ngx-render-material-forms 2.4.9 → 2.5.0

package/esm2020/lib/components/button/button.component.mjs

@@ -19,7 +19,6 @@ export class MaterialButtonComponent extends MaterialComponent {
         this.error = false;
         this.disabled = false;
         this.clicked = false;
-        this.walkmeClass = '';
     }
     get color() {
         if (this.error) {
@@ -46,12 +45,6 @@ export class MaterialButtonComponent extends MaterialComponent {
         let className = this.instance.component.block ? 'mat-formio-button-block' : '';
         className += this.instance.component.size ? ` mat-formio-button-${this.instance.component.size}` : '';
         className += !this.angularButtonTheme ? ` mat-formio-theme-${this.instance.component.theme}` : '';
-        const attributes = this.instance?.component?.attributes;
-        if (attributes) {
-            const buttonType = attributes.buttonType || '';
-            const programName = attributes.programName || '';
-            this.walkmeClass = `walkme-${buttonType}-${programName}`.toLowerCase();
-        }
         return className;
     }
     onClick(event) {
@@ -92,11 +85,11 @@ export class MaterialButtonComponent extends MaterialComponent {
     }
 }
 MaterialButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MaterialButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-MaterialButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: MaterialButtonComponent, selector: "mat-formio-button", usesInheritance: true, ngImport: i0, template: "<button *ngIf=\"instance && instance.component.label != 'Click to add Products'\"\r\n        [ngClass]=\"[buttonClass, walkmeClass]\"\r\n        type=\"{{ instance.component.action }}\"\r\n        mat-raised-button [color]=\"color\"\r\n        [disabled]=\"disabled\"\r\n        (click)=\"instance.onClick($event)\"\r\n>\r\n\r\n\r\n  <mat-icon *ngIf=\"instance.component.leftIcon\">{{instance.component.leftIcon}}</mat-icon>\r\n  <mat-icon *ngIf=\"done\">done</mat-icon>\r\n  <mat-icon *ngIf=\"error\">close</mat-icon>\r\n  <mat-icon class=\"mat-icon-spin\" *ngIf=\"loading\">autorenew</mat-icon>\r\n  {{ instance.component.label }}\r\n  <mat-icon *ngIf=\"instance.component.rightIcon\">{{instance.component.rightIcon}}</mat-icon>\r\n</button>\r\n", styles: ["@-webkit-keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host .mat-icon-spin{-webkit-animation-name:spin;animation-name:spin;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-timing-function:linear;animation-timing-function:linear}.mat-formio-theme-success{background-color:#63d644!important}.mat-formio-theme-info{background-color:#49d9f4!important}.mat-formio-button-sm{font-size:14px;padding:8px 12px}.mat-formio-button-xs{font-size:14px;padding:4px 6px}.mat-formio-button-md{font-size:15px;padding:8px 12px}.mat-formio-button-lg{font-size:19px;padding:16px 20px}.mat-formio-button-block{display:block;width:100%}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }] });
+MaterialButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: MaterialButtonComponent, selector: "mat-formio-button", usesInheritance: true, ngImport: i0, template: "<button *ngIf=\"instance && instance.component.label != 'Click to add Products'\"\r\n        [ngClass]=\"buttonClass\"\r\n        type=\"{{ instance.component.action }}\"\r\n        mat-raised-button [color]=\"color\"\r\n        [disabled]=\"disabled\"\r\n        (click)=\"instance.onClick($event)\"\r\n>\r\n\r\n\r\n  <mat-icon *ngIf=\"instance.component.leftIcon\">{{instance.component.leftIcon}}</mat-icon>\r\n  <mat-icon *ngIf=\"done\">done</mat-icon>\r\n  <mat-icon *ngIf=\"error\">close</mat-icon>\r\n  <mat-icon class=\"mat-icon-spin\" *ngIf=\"loading\">autorenew</mat-icon>\r\n  {{ instance.component.label }}\r\n  <mat-icon *ngIf=\"instance.component.rightIcon\">{{instance.component.rightIcon}}</mat-icon>\r\n</button>\r\n", styles: ["@-webkit-keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host .mat-icon-spin{-webkit-animation-name:spin;animation-name:spin;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-timing-function:linear;animation-timing-function:linear}.mat-formio-theme-success{background-color:#63d644!important}.mat-formio-theme-info{background-color:#49d9f4!important}.mat-formio-button-sm{font-size:14px;padding:8px 12px}.mat-formio-button-xs{font-size:14px;padding:4px 6px}.mat-formio-button-md{font-size:15px;padding:8px 12px}.mat-formio-button-lg{font-size:19px;padding:16px 20px}.mat-formio-button-block{display:block;width:100%}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MaterialButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mat-formio-button', template: "<button *ngIf=\"instance && instance.component.label != 'Click to add Products'\"\r\n        [ngClass]=\"[buttonClass, walkmeClass]\"\r\n        type=\"{{ instance.component.action }}\"\r\n        mat-raised-button [color]=\"color\"\r\n        [disabled]=\"disabled\"\r\n        (click)=\"instance.onClick($event)\"\r\n>\r\n\r\n\r\n  <mat-icon *ngIf=\"instance.component.leftIcon\">{{instance.component.leftIcon}}</mat-icon>\r\n  <mat-icon *ngIf=\"done\">done</mat-icon>\r\n  <mat-icon *ngIf=\"error\">close</mat-icon>\r\n  <mat-icon class=\"mat-icon-spin\" *ngIf=\"loading\">autorenew</mat-icon>\r\n  {{ instance.component.label }}\r\n  <mat-icon *ngIf=\"instance.component.rightIcon\">{{instance.component.rightIcon}}</mat-icon>\r\n</button>\r\n", styles: ["@-webkit-keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host .mat-icon-spin{-webkit-animation-name:spin;animation-name:spin;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-timing-function:linear;animation-timing-function:linear}.mat-formio-theme-success{background-color:#63d644!important}.mat-formio-theme-info{background-color:#49d9f4!important}.mat-formio-button-sm{font-size:14px;padding:8px 12px}.mat-formio-button-xs{font-size:14px;padding:4px 6px}.mat-formio-button-md{font-size:15px;padding:8px 12px}.mat-formio-button-lg{font-size:19px;padding:16px 20px}.mat-formio-button-block{display:block;width:100%}\n"] }]
+            args: [{ selector: 'mat-formio-button', template: "<button *ngIf=\"instance && instance.component.label != 'Click to add Products'\"\r\n        [ngClass]=\"buttonClass\"\r\n        type=\"{{ instance.component.action }}\"\r\n        mat-raised-button [color]=\"color\"\r\n        [disabled]=\"disabled\"\r\n        (click)=\"instance.onClick($event)\"\r\n>\r\n\r\n\r\n  <mat-icon *ngIf=\"instance.component.leftIcon\">{{instance.component.leftIcon}}</mat-icon>\r\n  <mat-icon *ngIf=\"done\">done</mat-icon>\r\n  <mat-icon *ngIf=\"error\">close</mat-icon>\r\n  <mat-icon class=\"mat-icon-spin\" *ngIf=\"loading\">autorenew</mat-icon>\r\n  {{ instance.component.label }}\r\n  <mat-icon *ngIf=\"instance.component.rightIcon\">{{instance.component.rightIcon}}</mat-icon>\r\n</button>\r\n", styles: ["@-webkit-keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host .mat-icon-spin{-webkit-animation-name:spin;animation-name:spin;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-timing-function:linear;animation-timing-function:linear}.mat-formio-theme-success{background-color:#63d644!important}.mat-formio-theme-info{background-color:#49d9f4!important}.mat-formio-button-sm{font-size:14px;padding:8px 12px}.mat-formio-button-xs{font-size:14px;padding:4px 6px}.mat-formio-button-md{font-size:15px;padding:8px 12px}.mat-formio-button-lg{font-size:19px;padding:16px 20px}.mat-formio-button-block{display:block;width:100%}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.MatDialog }]; } });
 ButtonComponent.MaterialComponent = MaterialButtonComponent;
 export { ButtonComponent };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnV0dG9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1yZW5kZXItbWF0ZXJpYWwtZm9ybXMvc3JjL2xpYi9jb21wb25lbnRzL2J1dHRvbi9idXR0b24uY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXJlbmRlci1tYXRlcmlhbC1mb3Jtcy9zcmMvbGliL2NvbXBvbmVudHMvYnV0dG9uL2J1dHRvbi5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQXFCLFNBQVMsRUFBYyxNQUFNLGVBQWUsQ0FBQztBQUN6RSxPQUFPLGVBQWUsTUFBTSxzQ0FBc0MsQ0FBQztBQUNuRSxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxzQkFBc0IsQ0FBQztBQUN6RCxPQUFPLEVBQUUsb0JBQW9CLEVBQUUsYUFBYSxFQUFFLE1BQU0sMkJBQTJCLENBQUM7Ozs7Ozs7QUFRaEYsTUFBTSxPQUFPLHVCQUF3QixTQUFRLGlCQUFpQjtJQU81RCxZQUFtQixPQUFtQixFQUFTLEdBQXNCLEVBQVUsTUFBaUI7UUFDOUYsS0FBSyxDQUFDLE9BQU8sRUFBRSxHQUFHLENBQUMsQ0FBQztRQURILFlBQU8sR0FBUCxPQUFPLENBQVk7UUFBUyxRQUFHLEdBQUgsR0FBRyxDQUFtQjtRQUFVLFdBQU0sR0FBTixNQUFNLENBQVc7UUFOekYsWUFBTyxHQUFHLEtBQUssQ0FBQztRQUNoQixTQUFJLEdBQUcsS0FBSyxDQUFDO1FBQ2IsVUFBSyxHQUFHLEtBQUssQ0FBQztRQUNkLGFBQVEsR0FBRyxLQUFLLENBQUM7UUFDakIsWUFBTyxHQUFHLEtBQUssQ0FBQztRQUN2QixnQkFBVyxHQUFXLEVBQUUsQ0FBQztJQUd6QixDQUFDO0lBQ0QsSUFBSSxLQUFLO1FBQ1AsSUFBSSxJQUFJLENBQUMsS0FBSyxFQUFFO1lBQ2QsT0FBTyxvQkFBb0IsQ0FBQyxJQUFJLENBQUM7U0FDbEM7UUFDRCxNQUFNLEtBQUssR0FBRyxJQUFJLENBQUMsa0JBQWtCLENBQUM7UUFDdEMsT0FBTyxLQUFLLElBQUksb0JBQW9CLENBQUMsT0FBTyxDQUFDO0lBQy9DLENBQUM7SUFFRCxJQUFJLGtCQUFrQjtRQUNwQixRQUFRLElBQUksQ0FBQyxRQUFRLENBQUMsU0FBUyxDQUFDLEtBQUssRUFBRTtZQUNyQyxLQUFLLGFBQWEsQ0FBQyxPQUFPO2dCQUN4QixPQUFPLG9CQUFvQixDQUFDLE9BQU8sQ0FBQztZQUV0QyxLQUFLLGFBQWEsQ0FBQyxPQUFPO2dCQUN4QixPQUFPLG9CQUFvQixDQUFDLE1BQU0sQ0FBQztZQUVyQyxLQUFLLGFBQWEsQ0FBQyxNQUFNO2dCQUN2QixPQUFPLG9CQUFvQixDQUFDLElBQUksQ0FBQztZQUVuQyxLQUFLLGFBQWEsQ0FBQyxTQUFTO2dCQUMxQixPQUFPLG9CQUFvQixDQUFDLEtBQUssQ0FBQztZQUVwQztnQkFDRSxPQUFPLEVBQUUsQ0FBQztTQUNiO0lBQ0gsQ0FBQztJQUVELElBQUksV0FBVztRQUNiLElBQUksU0FBUyxHQUFHLElBQUksQ0FBQyxRQUFRLENBQUMsU0FBUyxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUMseUJBQXlCLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQztRQUMvRSxTQUFTLElBQUksSUFBSSxDQUFDLFFBQVEsQ0FBQyxTQUFTLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQyxzQkFBc0IsSUFBSSxDQUFDLFFBQVEsQ0FBQyxTQUFTLENBQUMsSUFBSSxFQUFFLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQztRQUN0RyxTQUFTLElBQUksQ0FBQyxJQUFJLENBQUMsa0JBQWtCLENBQUMsQ0FBQyxDQUFDLHFCQUFxQixJQUFJLENBQUMsUUFBUSxDQUFDLFNBQVMsQ0FBQyxLQUFLLEVBQUUsQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDO1FBQ2xHLE1BQU0sVUFBVSxHQUFHLElBQUksQ0FBQyxRQUFRLEVBQUUsU0FBUyxFQUFFLFVBQVUsQ0FBQztRQUN4RCxJQUFJLFVBQVUsRUFBRTtZQUNkLE1BQU0sVUFBVSxHQUFHLFVBQVUsQ0FBQyxVQUFVLElBQUksRUFBRSxDQUFDO1lBQy9DLE1BQU0sV0FBVyxHQUFHLFVBQVUsQ0FBQyxXQUFXLElBQUksRUFBRSxDQUFDO1lBQ2pELElBQUksQ0FBQyxXQUFXLEdBQUcsVUFBVSxVQUFVLElBQUksV0FBVyxFQUFFLENBQUMsV0FBVyxFQUFFLENBQUM7U0FDeEU7UUFDRCxPQUFPLFNBQVMsQ0FBQztJQUNuQixDQUFDO0lBRUQsT0FBTyxDQUFDLEtBQUs7UUFDWCxJQUFJLENBQUMsT0FBTyxHQUFHLElBQUksQ0FBQztRQUNwQixJQUFJLENBQUMsUUFBUSxDQUFDLE9BQU8sQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUMvQixDQUFDO0lBRUQsUUFBUTtRQUNOLE9BQU8sSUFBSSxDQUFDLE9BQU8sQ0FBQztJQUN0QixDQUFDO0lBRUQsUUFBUSxDQUFDLE9BQU8sRUFBRSxLQUFLLEVBQUUsSUFBSTtRQUMzQixJQUFJLENBQUMsT0FBTyxHQUFHLE9BQU8sQ0FBQztRQUN2QixJQUFJLENBQUMsSUFBSSxHQUFHLElBQUksQ0FBQztRQUNqQixJQUFJLENBQUMsS0FBSyxHQUFHLEtBQUssQ0FBQztJQUNyQixDQUFDO0lBRUQsY0FBYyxDQUFDLElBQVk7UUFDekIsTUFBTSxPQUFPLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQyxHQUFHLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQztRQUNuQyxPQUFPLE9BQU8sQ0FBQztJQUNqQixDQUFDO0lBRUQsV0FBVyxDQUFDLElBQVk7UUFDdEIsT0FBTyxJQUFJLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQyxjQUFjLENBQUMsSUFBSSxDQUFDLEVBQUUsRUFBRSxDQUFDLENBQUM7SUFDckQsQ0FBQztJQUVELFdBQVcsQ0FBQyxRQUFRO1FBQ2xCLE1BQU0sTUFBTSxHQUFHLEtBQUssQ0FBQyxXQUFXLENBQUMsUUFBUSxDQUFDLENBQUM7UUFDM0MsSUFBSSxDQUFDLFFBQVEsR0FBRyxRQUFRLENBQUMsY0FBYyxDQUFDO1FBQ3hDLFFBQVEsQ0FBQyxFQUFFLENBQUMsY0FBYyxFQUFFLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUMsSUFBSSxFQUFFLEtBQUssRUFBRSxLQUFLLENBQUMsQ0FBQyxDQUFDO1FBQ3JFLFFBQVEsQ0FBQyxFQUFFLENBQUMsWUFBWSxFQUFFLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUMsS0FBSyxFQUFFLEtBQUssRUFBRSxJQUFJLENBQUMsQ0FBQyxDQUFDO1FBQ25FLFFBQVEsQ0FBQyxFQUFFLENBQUMsYUFBYSxFQUFFLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUMsS0FBSyxFQUFFLElBQUksRUFBRSxLQUFLLENBQUMsQ0FBQyxDQUFDO1FBQ3BFLFFBQVEsQ0FBQyxFQUFFLENBQUMsZUFBZSxFQUFFLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUMsSUFBSSxFQUFFLEtBQUssRUFBRSxLQUFLLENBQUMsQ0FBQyxDQUFDO1FBQ3RFLFFBQVEsQ0FBQyxFQUFFLENBQUMsYUFBYSxFQUFFLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUMsS0FBSyxFQUFFLEtBQUssRUFBRSxJQUFJLENBQUMsQ0FBQyxDQUFDO1FBQ3BFLFFBQVEsQ0FBQyxFQUFFLENBQUMsUUFBUSxFQUFFLENBQUMsS0FBSyxFQUFFLEVBQUU7WUFDOUIsSUFBSSxDQUFDLFFBQVEsR0FBRyxJQUFJLENBQUMsUUFBUSxDQUFDLGNBQWMsSUFBSSxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUMsU0FBUyxDQUFDLGdCQUFnQixJQUFJLENBQUMsS0FBSyxDQUFDLE9BQU8sQ0FBQyxDQUFDO1lBQzdHLElBQUksS0FBSyxDQUFDLE9BQU8sRUFBRTtnQkFDakIsSUFBSSxDQUFDLE9BQU8sR0FBRyxLQUFLLENBQUM7Z0JBQ3JCLElBQUksQ0FBQyxLQUFLLEdBQUcsS0FBSyxDQUFDO2FBQ3BCO1FBQ0gsQ0FBQyxDQUFDLENBQUM7UUFDSCxPQUFPLE1BQU0sQ0FBQztJQUNoQixDQUFDOztvSEExRlUsdUJBQXVCO3dHQUF2Qix1QkFBdUIsZ0ZDWHBDLDZ1QkFnQkE7MkZETGEsdUJBQXVCO2tCQUxuQyxTQUFTOytCQUNFLG1CQUFtQjs7QUFnRy9CLGVBQWUsQ0FBQyxpQkFBaUIsR0FBRyx1QkFBdUIsQ0FBQztBQUM1RCxPQUFPLEVBQUUsZUFBZSxFQUFFLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDaGFuZ2VEZXRlY3RvclJlZiwgQ29tcG9uZW50LCBFbGVtZW50UmVmIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCBCdXR0b25Db21wb25lbnQgZnJvbSAnZm9ybWlvanMvY29tcG9uZW50cy9idXR0b24vQnV0dG9uLmpzJztcclxuaW1wb3J0IHsgTWF0ZXJpYWxDb21wb25lbnQgfSBmcm9tICcuLi9NYXRlcmlhbENvbXBvbmVudCc7XHJcbmltcG9ydCB7IEFuZ3VsYXJCdXR0b25zVGhlbWVzLCBCdXR0b25zVGhlbWVzIH0gZnJvbSAnLi4vLi4vY29uc3QvQnV0dG9uc1RoZW1lcyc7XHJcbmltcG9ydCB7IE1hdERpYWxvZyB9IGZyb20gJ0Bhbmd1bGFyL21hdGVyaWFsL2RpYWxvZyc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ21hdC1mb3JtaW8tYnV0dG9uJyxcclxuICB0ZW1wbGF0ZVVybDogJy4vYnV0dG9uLmNvbXBvbmVudC5odG1sJyxcclxuICBzdHlsZVVybHM6IFsnLi9idXR0b24uY29tcG9uZW50LmNzcyddXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBNYXRlcmlhbEJ1dHRvbkNvbXBvbmVudCBleHRlbmRzIE1hdGVyaWFsQ29tcG9uZW50IHtcclxuICBwdWJsaWMgbG9hZGluZyA9IGZhbHNlO1xyXG4gIHB1YmxpYyBkb25lID0gZmFsc2U7XHJcbiAgcHVibGljIGVycm9yID0gZmFsc2U7XHJcbiAgcHVibGljIGRpc2FibGVkID0gZmFsc2U7XHJcbiAgcHVibGljIGNsaWNrZWQgPSBmYWxzZTtcclxuICB3YWxrbWVDbGFzczogc3RyaW5nID0gJyc7XHJcbiAgY29uc3RydWN0b3IocHVibGljIGVsZW1lbnQ6IEVsZW1lbnRSZWYsIHB1YmxpYyByZWY6IENoYW5nZURldGVjdG9yUmVmLCBwcml2YXRlIGRpYWxvZzogTWF0RGlhbG9nKSB7XHJcbiAgICBzdXBlcihlbGVtZW50LCByZWYpO1xyXG4gIH1cclxuICBnZXQgY29sb3IoKSB7XHJcbiAgICBpZiAodGhpcy5lcnJvcikge1xyXG4gICAgICByZXR1cm4gQW5ndWxhckJ1dHRvbnNUaGVtZXMuV0FSTjtcclxuICAgIH1cclxuICAgIGNvbnN0IHRoZW1lID0gdGhpcy5hbmd1bGFyQnV0dG9uVGhlbWU7XHJcbiAgICByZXR1cm4gdGhlbWUgfHwgQW5ndWxhckJ1dHRvbnNUaGVtZXMuUFJJTUFSWTtcclxuICB9XHJcblxyXG4gIGdldCBhbmd1bGFyQnV0dG9uVGhlbWUoKSB7XHJcbiAgICBzd2l0Y2ggKHRoaXMuaW5zdGFuY2UuY29tcG9uZW50LnRoZW1lKSB7XHJcbiAgICAgIGNhc2UgQnV0dG9uc1RoZW1lcy5QUklNQVJZOlxyXG4gICAgICAgIHJldHVybiBBbmd1bGFyQnV0dG9uc1RoZW1lcy5QUklNQVJZO1xyXG5cclxuICAgICAgY2FzZSBCdXR0b25zVGhlbWVzLldBUk5JTkc6XHJcbiAgICAgICAgcmV0dXJuIEFuZ3VsYXJCdXR0b25zVGhlbWVzLkFDQ0VOVDtcclxuXHJcbiAgICAgIGNhc2UgQnV0dG9uc1RoZW1lcy5EQU5HRVI6XHJcbiAgICAgICAgcmV0dXJuIEFuZ3VsYXJCdXR0b25zVGhlbWVzLldBUk47XHJcblxyXG4gICAgICBjYXNlIEJ1dHRvbnNUaGVtZXMuU0VDT05EQVJZOlxyXG4gICAgICAgIHJldHVybiBBbmd1bGFyQnV0dG9uc1RoZW1lcy5CQVNJQztcclxuXHJcbiAgICAgIGRlZmF1bHQ6XHJcbiAgICAgICAgcmV0dXJuICcnO1xyXG4gICAgfVxyXG4gIH1cclxuXHJcbiAgZ2V0IGJ1dHRvbkNsYXNzKCkge1xyXG4gICAgbGV0IGNsYXNzTmFtZSA9IHRoaXMuaW5zdGFuY2UuY29tcG9uZW50LmJsb2NrID8gJ21hdC1mb3JtaW8tYnV0dG9uLWJsb2NrJyA6ICcnO1xyXG4gICAgY2xhc3NOYW1lICs9IHRoaXMuaW5zdGFuY2UuY29tcG9uZW50LnNpemUgPyBgIG1hdC1mb3JtaW8tYnV0dG9uLSR7dGhpcy5pbnN0YW5jZS5jb21wb25lbnQuc2l6ZX1gIDogJyc7XHJcbiAgICBjbGFzc05hbWUgKz0gIXRoaXMuYW5ndWxhckJ1dHRvblRoZW1lID8gYCBtYXQtZm9ybWlvLXRoZW1lLSR7dGhpcy5pbnN0YW5jZS5jb21wb25lbnQudGhlbWV9YCA6ICcnO1xyXG4gICAgY29uc3QgYXR0cmlidXRlcyA9IHRoaXMuaW5zdGFuY2U/LmNvbXBvbmVudD8uYXR0cmlidXRlcztcclxuICAgIGlmIChhdHRyaWJ1dGVzKSB7XHJcbiAgICAgIGNvbnN0IGJ1dHRvblR5cGUgPSBhdHRyaWJ1dGVzLmJ1dHRvblR5cGUgfHwgJyc7XHJcbiAgICAgIGNvbnN0IHByb2dyYW1OYW1lID0gYXR0cmlidXRlcy5wcm9ncmFtTmFtZSB8fCAnJztcclxuICAgICAgdGhpcy53YWxrbWVDbGFzcyA9IGB3YWxrbWUtJHtidXR0b25UeXBlfS0ke3Byb2dyYW1OYW1lfWAudG9Mb3dlckNhc2UoKTtcclxuICAgIH1cclxuICAgIHJldHVybiBjbGFzc05hbWU7XHJcbiAgfVxyXG5cclxuICBvbkNsaWNrKGV2ZW50KSB7XHJcbiAgICB0aGlzLmNsaWNrZWQgPSB0cnVlO1xyXG4gICAgdGhpcy5pbnN0YW5jZS5vbkNsaWNrKGV2ZW50KTtcclxuICB9XHJcblxyXG4gIGdldFZhbHVlKCkge1xyXG4gICAgcmV0dXJuIHRoaXMuY2xpY2tlZDtcclxuICB9XHJcblxyXG4gIHNldFN0YXRlKGxvYWRpbmcsIGVycm9yLCBkb25lKSB7XHJcbiAgICB0aGlzLmxvYWRpbmcgPSBsb2FkaW5nO1xyXG4gICAgdGhpcy5kb25lID0gZG9uZTtcclxuICAgIHRoaXMuZXJyb3IgPSBlcnJvcjtcclxuICB9XHJcblxyXG4gIGdldEljb25Gb250U2V0KGljb246IHN0cmluZykge1xyXG4gICAgY29uc3QgZm9udFNldCA9IGljb24uc3BsaXQoJyAnKVswXTtcclxuICAgIHJldHVybiBmb250U2V0O1xyXG4gIH1cclxuXHJcbiAgZ2V0SWNvbk5hbWUoaWNvbjogc3RyaW5nKSB7XHJcbiAgICByZXR1cm4gaWNvbi5yZXBsYWNlKHRoaXMuZ2V0SWNvbkZvbnRTZXQoaWNvbiksICcnKTtcclxuICB9XHJcblxyXG4gIHNldEluc3RhbmNlKGluc3RhbmNlKSB7XHJcbiAgICBjb25zdCByZXRWYWwgPSBzdXBlci5zZXRJbnN0YW5jZShpbnN0YW5jZSk7XHJcbiAgICB0aGlzLmRpc2FibGVkID0gaW5zdGFuY2Uuc2hvdWxkRGlzYWJsZWQ7XHJcbiAgICBpbnN0YW5jZS5vbignc3VibWl0QnV0dG9uJywgKCkgPT4gdGhpcy5zZXRTdGF0ZSh0cnVlLCBmYWxzZSwgZmFsc2UpKTtcclxuICAgIGluc3RhbmNlLm9uKCdzdWJtaXREb25lJywgKCkgPT4gdGhpcy5zZXRTdGF0ZShmYWxzZSwgZmFsc2UsIHRydWUpKTtcclxuICAgIGluc3RhbmNlLm9uKCdzdWJtaXRFcnJvcicsICgpID0+IHRoaXMuc2V0U3RhdGUoZmFsc2UsIHRydWUsIGZhbHNlKSk7XHJcbiAgICBpbnN0YW5jZS5vbigncmVxdWVzdEJ1dHRvbicsICgpID0+IHRoaXMuc2V0U3RhdGUodHJ1ZSwgZmFsc2UsIGZhbHNlKSk7XHJcbiAgICBpbnN0YW5jZS5vbigncmVxdWVzdERvbmUnLCAoKSA9PiB0aGlzLnNldFN0YXRlKGZhbHNlLCBmYWxzZSwgdHJ1ZSkpO1xyXG4gICAgaW5zdGFuY2Uub24oJ2NoYW5nZScsIChldmVudCkgPT4ge1xyXG4gICAgICB0aGlzLmRpc2FibGVkID0gdGhpcy5pbnN0YW5jZS5zaG91bGREaXNhYmxlZCB8fCAodGhpcy5pbnN0YW5jZS5jb21wb25lbnQuZGlzYWJsZU9uSW52YWxpZCAmJiAhZXZlbnQuaXNWYWxpZCk7XHJcbiAgICAgIGlmIChldmVudC5pc1ZhbGlkKSB7XHJcbiAgICAgICAgdGhpcy5sb2FkaW5nID0gZmFsc2U7XHJcbiAgICAgICAgdGhpcy5lcnJvciA9IGZhbHNlO1xyXG4gICAgICB9XHJcbiAgICB9KTtcclxuICAgIHJldHVybiByZXRWYWw7XHJcbiAgfVxyXG59XHJcbkJ1dHRvbkNvbXBvbmVudC5NYXRlcmlhbENvbXBvbmVudCA9IE1hdGVyaWFsQnV0dG9uQ29tcG9uZW50O1xyXG5leHBvcnQgeyBCdXR0b25Db21wb25lbnQgfTtcclxuIiwiPGJ1dHRvbiAqbmdJZj1cImluc3RhbmNlICYmIGluc3RhbmNlLmNvbXBvbmVudC5sYWJlbCAhPSAnQ2xpY2sgdG8gYWRkIFByb2R1Y3RzJ1wiXHJcbiAgICAgICAgW25nQ2xhc3NdPVwiW2J1dHRvbkNsYXNzLCB3YWxrbWVDbGFzc11cIlxyXG4gICAgICAgIHR5cGU9XCJ7eyBpbnN0YW5jZS5jb21wb25lbnQuYWN0aW9uIH19XCJcclxuICAgICAgICBtYXQtcmFpc2VkLWJ1dHRvbiBbY29sb3JdPVwiY29sb3JcIlxyXG4gICAgICAgIFtkaXNhYmxlZF09XCJkaXNhYmxlZFwiXHJcbiAgICAgICAgKGNsaWNrKT1cImluc3RhbmNlLm9uQ2xpY2soJGV2ZW50KVwiXHJcbj5cclxuXHJcblxyXG4gIDxtYXQtaWNvbiAqbmdJZj1cImluc3RhbmNlLmNvbXBvbmVudC5sZWZ0SWNvblwiPnt7aW5zdGFuY2UuY29tcG9uZW50LmxlZnRJY29ufX08L21hdC1pY29uPlxyXG4gIDxtYXQtaWNvbiAqbmdJZj1cImRvbmVcIj5kb25lPC9tYXQtaWNvbj5cclxuICA8bWF0LWljb24gKm5nSWY9XCJlcnJvclwiPmNsb3NlPC9tYXQtaWNvbj5cclxuICA8bWF0LWljb24gY2xhc3M9XCJtYXQtaWNvbi1zcGluXCIgKm5nSWY9XCJsb2FkaW5nXCI+YXV0b3JlbmV3PC9tYXQtaWNvbj5cclxuICB7eyBpbnN0YW5jZS5jb21wb25lbnQubGFiZWwgfX1cclxuICA8bWF0LWljb24gKm5nSWY9XCJpbnN0YW5jZS5jb21wb25lbnQucmlnaHRJY29uXCI+e3tpbnN0YW5jZS5jb21wb25lbnQucmlnaHRJY29ufX08L21hdC1pY29uPlxyXG48L2J1dHRvbj5cclxuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnV0dG9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1yZW5kZXItbWF0ZXJpYWwtZm9ybXMvc3JjL2xpYi9jb21wb25lbnRzL2J1dHRvbi9idXR0b24uY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXJlbmRlci1tYXRlcmlhbC1mb3Jtcy9zcmMvbGliL2NvbXBvbmVudHMvYnV0dG9uL2J1dHRvbi5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQXFCLFNBQVMsRUFBYyxNQUFNLGVBQWUsQ0FBQztBQUN4RSxPQUFPLGVBQWUsTUFBTSxzQ0FBc0MsQ0FBQztBQUNwRSxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxzQkFBc0IsQ0FBQztBQUN6RCxPQUFPLEVBQUUsb0JBQW9CLEVBQUUsYUFBYSxFQUFFLE1BQU0sMkJBQTJCLENBQUM7Ozs7Ozs7QUFRaEYsTUFBTSxPQUFPLHVCQUF3QixTQUFRLGlCQUFpQjtJQU01RCxZQUFtQixPQUFtQixFQUFTLEdBQXNCLEVBQVUsTUFBaUI7UUFDOUYsS0FBSyxDQUFDLE9BQU8sRUFBRSxHQUFHLENBQUMsQ0FBQztRQURILFlBQU8sR0FBUCxPQUFPLENBQVk7UUFBUyxRQUFHLEdBQUgsR0FBRyxDQUFtQjtRQUFVLFdBQU0sR0FBTixNQUFNLENBQVc7UUFMekYsWUFBTyxHQUFHLEtBQUssQ0FBQztRQUNoQixTQUFJLEdBQUcsS0FBSyxDQUFDO1FBQ2IsVUFBSyxHQUFHLEtBQUssQ0FBQztRQUNkLGFBQVEsR0FBRyxLQUFLLENBQUM7UUFDakIsWUFBTyxHQUFHLEtBQUssQ0FBQztJQUd2QixDQUFDO0lBQ0QsSUFBSSxLQUFLO1FBQ1AsSUFBSSxJQUFJLENBQUMsS0FBSyxFQUFFO1lBQ2QsT0FBTyxvQkFBb0IsQ0FBQyxJQUFJLENBQUM7U0FDbEM7UUFDRCxNQUFNLEtBQUssR0FBRyxJQUFJLENBQUMsa0JBQWtCLENBQUM7UUFDdEMsT0FBTyxLQUFLLElBQUksb0JBQW9CLENBQUMsT0FBTyxDQUFDO0lBQy9DLENBQUM7SUFFRCxJQUFJLGtCQUFrQjtRQUNwQixRQUFRLElBQUksQ0FBQyxRQUFRLENBQUMsU0FBUyxDQUFDLEtBQUssRUFBRTtZQUNyQyxLQUFLLGFBQWEsQ0FBQyxPQUFPO2dCQUN4QixPQUFPLG9CQUFvQixDQUFDLE9BQU8sQ0FBQztZQUV0QyxLQUFLLGFBQWEsQ0FBQyxPQUFPO2dCQUN4QixPQUFPLG9CQUFvQixDQUFDLE1BQU0sQ0FBQztZQUVyQyxLQUFLLGFBQWEsQ0FBQyxNQUFNO2dCQUN2QixPQUFPLG9CQUFvQixDQUFDLElBQUksQ0FBQztZQUVuQyxLQUFLLGFBQWEsQ0FBQyxTQUFTO2dCQUMxQixPQUFPLG9CQUFvQixDQUFDLEtBQUssQ0FBQztZQUVwQztnQkFDRSxPQUFPLEVBQUUsQ0FBQztTQUNiO0lBQ0gsQ0FBQztJQUVELElBQUksV0FBVztRQUNiLElBQUksU0FBUyxHQUFHLElBQUksQ0FBQyxRQUFRLENBQUMsU0FBUyxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUMseUJBQXlCLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQztRQUMvRSxTQUFTLElBQUksSUFBSSxDQUFDLFFBQVEsQ0FBQyxTQUFTLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQyxzQkFBc0IsSUFBSSxDQUFDLFFBQVEsQ0FBQyxTQUFTLENBQUMsSUFBSSxFQUFFLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQztRQUN0RyxTQUFTLElBQUksQ0FBQyxJQUFJLENBQUMsa0JBQWtCLENBQUMsQ0FBQyxDQUFDLHFCQUFxQixJQUFJLENBQUMsUUFBUSxDQUFDLFNBQVMsQ0FBQyxLQUFLLEVBQUUsQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDO1FBQ2xHLE9BQU8sU0FBUyxDQUFDO0lBQ25CLENBQUM7SUFFRCxPQUFPLENBQUMsS0FBSztRQUNYLElBQUksQ0FBQyxPQUFPLEdBQUcsSUFBSSxDQUFDO1FBQ3BCLElBQUksQ0FBQyxRQUFRLENBQUMsT0FBTyxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQy9CLENBQUM7SUFFRCxRQUFRO1FBQ04sT0FBTyxJQUFJLENBQUMsT0FBTyxDQUFDO0lBQ3RCLENBQUM7SUFFRCxRQUFRLENBQUMsT0FBTyxFQUFFLEtBQUssRUFBRSxJQUFJO1FBQzNCLElBQUksQ0FBQyxPQUFPLEdBQUcsT0FBTyxDQUFDO1FBQ3ZCLElBQUksQ0FBQyxJQUFJLEdBQUcsSUFBSSxDQUFDO1FBQ2pCLElBQUksQ0FBQyxLQUFLLEdBQUcsS0FBSyxDQUFDO0lBQ3JCLENBQUM7SUFFRCxjQUFjLENBQUMsSUFBWTtRQUN6QixNQUFNLE9BQU8sR0FBRyxJQUFJLENBQUMsS0FBSyxDQUFDLEdBQUcsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDO1FBQ25DLE9BQU8sT0FBTyxDQUFDO0lBQ2pCLENBQUM7SUFFRCxXQUFXLENBQUMsSUFBWTtRQUN0QixPQUFPLElBQUksQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLGNBQWMsQ0FBQyxJQUFJLENBQUMsRUFBRSxFQUFFLENBQUMsQ0FBQztJQUNyRCxDQUFDO0lBRUQsV0FBVyxDQUFDLFFBQVE7UUFDbEIsTUFBTSxNQUFNLEdBQUcsS0FBSyxDQUFDLFdBQVcsQ0FBQyxRQUFRLENBQUMsQ0FBQztRQUMzQyxJQUFJLENBQUMsUUFBUSxHQUFHLFFBQVEsQ0FBQyxjQUFjLENBQUM7UUFDeEMsUUFBUSxDQUFDLEVBQUUsQ0FBQyxjQUFjLEVBQUUsR0FBRyxFQUFFLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxJQUFJLEVBQUUsS0FBSyxFQUFFLEtBQUssQ0FBQyxDQUFDLENBQUM7UUFDckUsUUFBUSxDQUFDLEVBQUUsQ0FBQyxZQUFZLEVBQUUsR0FBRyxFQUFFLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxLQUFLLEVBQUUsS0FBSyxFQUFFLElBQUksQ0FBQyxDQUFDLENBQUM7UUFDbkUsUUFBUSxDQUFDLEVBQUUsQ0FBQyxhQUFhLEVBQUUsR0FBRyxFQUFFLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxLQUFLLEVBQUUsSUFBSSxFQUFFLEtBQUssQ0FBQyxDQUFDLENBQUM7UUFDcEUsUUFBUSxDQUFDLEVBQUUsQ0FBQyxlQUFlLEVBQUUsR0FBRyxFQUFFLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxJQUFJLEVBQUUsS0FBSyxFQUFFLEtBQUssQ0FBQyxDQUFDLENBQUM7UUFDdEUsUUFBUSxDQUFDLEVBQUUsQ0FBQyxhQUFhLEVBQUUsR0FBRyxFQUFFLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxLQUFLLEVBQUUsS0FBSyxFQUFFLElBQUksQ0FBQyxDQUFDLENBQUM7UUFDcEUsUUFBUSxDQUFDLEVBQUUsQ0FBQyxRQUFRLEVBQUUsQ0FBQyxLQUFLLEVBQUUsRUFBRTtZQUM5QixJQUFJLENBQUMsUUFBUSxHQUFHLElBQUksQ0FBQyxRQUFRLENBQUMsY0FBYyxJQUFJLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxTQUFTLENBQUMsZ0JBQWdCLElBQUksQ0FBQyxLQUFLLENBQUMsT0FBTyxDQUFDLENBQUM7WUFDN0csSUFBSSxLQUFLLENBQUMsT0FBTyxFQUFFO2dCQUNqQixJQUFJLENBQUMsT0FBTyxHQUFHLEtBQUssQ0FBQztnQkFDckIsSUFBSSxDQUFDLEtBQUssR0FBRyxLQUFLLENBQUM7YUFDcEI7UUFDSCxDQUFDLENBQUMsQ0FBQztRQUNILE9BQU8sTUFBTSxDQUFDO0lBQ2hCLENBQUM7O29IQW5GVSx1QkFBdUI7d0dBQXZCLHVCQUF1QixnRkNYcEMsOHRCQWdCQTsyRkRMYSx1QkFBdUI7a0JBTG5DLFNBQVM7K0JBQ0UsbUJBQW1COztBQXlGL0IsZUFBZSxDQUFDLGlCQUFpQixHQUFHLHVCQUF1QixDQUFDO0FBQzVELE9BQU8sRUFBRSxlQUFlLEVBQUUsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENoYW5nZURldGVjdG9yUmVmLCBDb21wb25lbnQsIEVsZW1lbnRSZWYgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuIGltcG9ydCBCdXR0b25Db21wb25lbnQgZnJvbSAnZm9ybWlvanMvY29tcG9uZW50cy9idXR0b24vQnV0dG9uLmpzJztcclxuaW1wb3J0IHsgTWF0ZXJpYWxDb21wb25lbnQgfSBmcm9tICcuLi9NYXRlcmlhbENvbXBvbmVudCc7XHJcbmltcG9ydCB7IEFuZ3VsYXJCdXR0b25zVGhlbWVzLCBCdXR0b25zVGhlbWVzIH0gZnJvbSAnLi4vLi4vY29uc3QvQnV0dG9uc1RoZW1lcyc7XHJcbmltcG9ydCB7IE1hdERpYWxvZyB9IGZyb20gJ0Bhbmd1bGFyL21hdGVyaWFsL2RpYWxvZyc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ21hdC1mb3JtaW8tYnV0dG9uJyxcclxuICB0ZW1wbGF0ZVVybDogJy4vYnV0dG9uLmNvbXBvbmVudC5odG1sJyxcclxuICBzdHlsZVVybHM6IFsnLi9idXR0b24uY29tcG9uZW50LmNzcyddXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBNYXRlcmlhbEJ1dHRvbkNvbXBvbmVudCBleHRlbmRzIE1hdGVyaWFsQ29tcG9uZW50IHtcclxuICBwdWJsaWMgbG9hZGluZyA9IGZhbHNlO1xyXG4gIHB1YmxpYyBkb25lID0gZmFsc2U7XHJcbiAgcHVibGljIGVycm9yID0gZmFsc2U7XHJcbiAgcHVibGljIGRpc2FibGVkID0gZmFsc2U7XHJcbiAgcHVibGljIGNsaWNrZWQgPSBmYWxzZTtcclxuICBjb25zdHJ1Y3RvcihwdWJsaWMgZWxlbWVudDogRWxlbWVudFJlZiwgcHVibGljIHJlZjogQ2hhbmdlRGV0ZWN0b3JSZWYsIHByaXZhdGUgZGlhbG9nOiBNYXREaWFsb2cpIHtcclxuICAgIHN1cGVyKGVsZW1lbnQsIHJlZik7XHJcbiAgfVxyXG4gIGdldCBjb2xvcigpIHtcclxuICAgIGlmICh0aGlzLmVycm9yKSB7XHJcbiAgICAgIHJldHVybiBBbmd1bGFyQnV0dG9uc1RoZW1lcy5XQVJOO1xyXG4gICAgfVxyXG4gICAgY29uc3QgdGhlbWUgPSB0aGlzLmFuZ3VsYXJCdXR0b25UaGVtZTtcclxuICAgIHJldHVybiB0aGVtZSB8fCBBbmd1bGFyQnV0dG9uc1RoZW1lcy5QUklNQVJZO1xyXG4gIH1cclxuXHJcbiAgZ2V0IGFuZ3VsYXJCdXR0b25UaGVtZSgpIHtcclxuICAgIHN3aXRjaCAodGhpcy5pbnN0YW5jZS5jb21wb25lbnQudGhlbWUpIHtcclxuICAgICAgY2FzZSBCdXR0b25zVGhlbWVzLlBSSU1BUlk6XHJcbiAgICAgICAgcmV0dXJuIEFuZ3VsYXJCdXR0b25zVGhlbWVzLlBSSU1BUlk7XHJcblxyXG4gICAgICBjYXNlIEJ1dHRvbnNUaGVtZXMuV0FSTklORzpcclxuICAgICAgICByZXR1cm4gQW5ndWxhckJ1dHRvbnNUaGVtZXMuQUNDRU5UO1xyXG5cclxuICAgICAgY2FzZSBCdXR0b25zVGhlbWVzLkRBTkdFUjpcclxuICAgICAgICByZXR1cm4gQW5ndWxhckJ1dHRvbnNUaGVtZXMuV0FSTjtcclxuXHJcbiAgICAgIGNhc2UgQnV0dG9uc1RoZW1lcy5TRUNPTkRBUlk6XHJcbiAgICAgICAgcmV0dXJuIEFuZ3VsYXJCdXR0b25zVGhlbWVzLkJBU0lDO1xyXG5cclxuICAgICAgZGVmYXVsdDpcclxuICAgICAgICByZXR1cm4gJyc7XHJcbiAgICB9XHJcbiAgfVxyXG5cclxuICBnZXQgYnV0dG9uQ2xhc3MoKSB7XHJcbiAgICBsZXQgY2xhc3NOYW1lID0gdGhpcy5pbnN0YW5jZS5jb21wb25lbnQuYmxvY2sgPyAnbWF0LWZvcm1pby1idXR0b24tYmxvY2snIDogJyc7XHJcbiAgICBjbGFzc05hbWUgKz0gdGhpcy5pbnN0YW5jZS5jb21wb25lbnQuc2l6ZSA/IGAgbWF0LWZvcm1pby1idXR0b24tJHt0aGlzLmluc3RhbmNlLmNvbXBvbmVudC5zaXplfWAgOiAnJztcclxuICAgIGNsYXNzTmFtZSArPSAhdGhpcy5hbmd1bGFyQnV0dG9uVGhlbWUgPyBgIG1hdC1mb3JtaW8tdGhlbWUtJHt0aGlzLmluc3RhbmNlLmNvbXBvbmVudC50aGVtZX1gIDogJyc7XHJcbiAgICByZXR1cm4gY2xhc3NOYW1lO1xyXG4gIH1cclxuXHJcbiAgb25DbGljayhldmVudCkge1xyXG4gICAgdGhpcy5jbGlja2VkID0gdHJ1ZTtcclxuICAgIHRoaXMuaW5zdGFuY2Uub25DbGljayhldmVudCk7XHJcbiAgfVxyXG5cclxuICBnZXRWYWx1ZSgpIHtcclxuICAgIHJldHVybiB0aGlzLmNsaWNrZWQ7XHJcbiAgfVxyXG5cclxuICBzZXRTdGF0ZShsb2FkaW5nLCBlcnJvciwgZG9uZSkge1xyXG4gICAgdGhpcy5sb2FkaW5nID0gbG9hZGluZztcclxuICAgIHRoaXMuZG9uZSA9IGRvbmU7XHJcbiAgICB0aGlzLmVycm9yID0gZXJyb3I7XHJcbiAgfVxyXG5cclxuICBnZXRJY29uRm9udFNldChpY29uOiBzdHJpbmcpIHtcclxuICAgIGNvbnN0IGZvbnRTZXQgPSBpY29uLnNwbGl0KCcgJylbMF07XHJcbiAgICByZXR1cm4gZm9udFNldDtcclxuICB9XHJcblxyXG4gIGdldEljb25OYW1lKGljb246IHN0cmluZykge1xyXG4gICAgcmV0dXJuIGljb24ucmVwbGFjZSh0aGlzLmdldEljb25Gb250U2V0KGljb24pLCAnJyk7XHJcbiAgfVxyXG5cclxuICBzZXRJbnN0YW5jZShpbnN0YW5jZSkge1xyXG4gICAgY29uc3QgcmV0VmFsID0gc3VwZXIuc2V0SW5zdGFuY2UoaW5zdGFuY2UpO1xyXG4gICAgdGhpcy5kaXNhYmxlZCA9IGluc3RhbmNlLnNob3VsZERpc2FibGVkO1xyXG4gICAgaW5zdGFuY2Uub24oJ3N1Ym1pdEJ1dHRvbicsICgpID0+IHRoaXMuc2V0U3RhdGUodHJ1ZSwgZmFsc2UsIGZhbHNlKSk7XHJcbiAgICBpbnN0YW5jZS5vbignc3VibWl0RG9uZScsICgpID0+IHRoaXMuc2V0U3RhdGUoZmFsc2UsIGZhbHNlLCB0cnVlKSk7XHJcbiAgICBpbnN0YW5jZS5vbignc3VibWl0RXJyb3InLCAoKSA9PiB0aGlzLnNldFN0YXRlKGZhbHNlLCB0cnVlLCBmYWxzZSkpO1xyXG4gICAgaW5zdGFuY2Uub24oJ3JlcXVlc3RCdXR0b24nLCAoKSA9PiB0aGlzLnNldFN0YXRlKHRydWUsIGZhbHNlLCBmYWxzZSkpO1xyXG4gICAgaW5zdGFuY2Uub24oJ3JlcXVlc3REb25lJywgKCkgPT4gdGhpcy5zZXRTdGF0ZShmYWxzZSwgZmFsc2UsIHRydWUpKTtcclxuICAgIGluc3RhbmNlLm9uKCdjaGFuZ2UnLCAoZXZlbnQpID0+IHtcclxuICAgICAgdGhpcy5kaXNhYmxlZCA9IHRoaXMuaW5zdGFuY2Uuc2hvdWxkRGlzYWJsZWQgfHwgKHRoaXMuaW5zdGFuY2UuY29tcG9uZW50LmRpc2FibGVPbkludmFsaWQgJiYgIWV2ZW50LmlzVmFsaWQpO1xyXG4gICAgICBpZiAoZXZlbnQuaXNWYWxpZCkge1xyXG4gICAgICAgIHRoaXMubG9hZGluZyA9IGZhbHNlO1xyXG4gICAgICAgIHRoaXMuZXJyb3IgPSBmYWxzZTtcclxuICAgICAgfVxyXG4gICAgfSk7XHJcbiAgICByZXR1cm4gcmV0VmFsO1xyXG4gIH1cclxufVxyXG5CdXR0b25Db21wb25lbnQuTWF0ZXJpYWxDb21wb25lbnQgPSBNYXRlcmlhbEJ1dHRvbkNvbXBvbmVudDtcclxuZXhwb3J0IHsgQnV0dG9uQ29tcG9uZW50IH07XHJcbiIsIjxidXR0b24gKm5nSWY9XCJpbnN0YW5jZSAmJiBpbnN0YW5jZS5jb21wb25lbnQubGFiZWwgIT0gJ0NsaWNrIHRvIGFkZCBQcm9kdWN0cydcIlxyXG4gICAgICAgIFtuZ0NsYXNzXT1cImJ1dHRvbkNsYXNzXCJcclxuICAgICAgICB0eXBlPVwie3sgaW5zdGFuY2UuY29tcG9uZW50LmFjdGlvbiB9fVwiXHJcbiAgICAgICAgbWF0LXJhaXNlZC1idXR0b24gW2NvbG9yXT1cImNvbG9yXCJcclxuICAgICAgICBbZGlzYWJsZWRdPVwiZGlzYWJsZWRcIlxyXG4gICAgICAgIChjbGljayk9XCJpbnN0YW5jZS5vbkNsaWNrKCRldmVudClcIlxyXG4+XHJcblxyXG5cclxuICA8bWF0LWljb24gKm5nSWY9XCJpbnN0YW5jZS5jb21wb25lbnQubGVmdEljb25cIj57e2luc3RhbmNlLmNvbXBvbmVudC5sZWZ0SWNvbn19PC9tYXQtaWNvbj5cclxuICA8bWF0LWljb24gKm5nSWY9XCJkb25lXCI+ZG9uZTwvbWF0LWljb24+XHJcbiAgPG1hdC1pY29uICpuZ0lmPVwiZXJyb3JcIj5jbG9zZTwvbWF0LWljb24+XHJcbiAgPG1hdC1pY29uIGNsYXNzPVwibWF0LWljb24tc3BpblwiICpuZ0lmPVwibG9hZGluZ1wiPmF1dG9yZW5ldzwvbWF0LWljb24+XHJcbiAge3sgaW5zdGFuY2UuY29tcG9uZW50LmxhYmVsIH19XHJcbiAgPG1hdC1pY29uICpuZ0lmPVwiaW5zdGFuY2UuY29tcG9uZW50LnJpZ2h0SWNvblwiPnt7aW5zdGFuY2UuY29tcG9uZW50LnJpZ2h0SWNvbn19PC9tYXQtaWNvbj5cclxuPC9idXR0b24+XHJcbiJdfQ==

package/fesm2015/ngx-render-material-forms.js

@@ -998,7 +998,6 @@ class MaterialButtonComponent extends MaterialComponent {
         this.error = false;
         this.disabled = false;
         this.clicked = false;
-        this.walkmeClass = '';
     }
     get color() {
         if (this.error) {
@@ -1022,16 +1021,9 @@ class MaterialButtonComponent extends MaterialComponent {
         }
     }
     get buttonClass() {
-        var _a, _b;
         let className = this.instance.component.block ? 'mat-formio-button-block' : '';
         className += this.instance.component.size ? ` mat-formio-button-${this.instance.component.size}` : '';
         className += !this.angularButtonTheme ? ` mat-formio-theme-${this.instance.component.theme}` : '';
-        const attributes = (_b = (_a = this.instance) === null || _a === void 0 ? void 0 : _a.component) === null || _b === void 0 ? void 0 : _b.attributes;
-        if (attributes) {
-            const buttonType = attributes.buttonType || '';
-            const programName = attributes.programName || '';
-            this.walkmeClass = `walkme-${buttonType}-${programName}`.toLowerCase();
-        }
         return className;
     }
     onClick(event) {
@@ -1072,10 +1064,10 @@ class MaterialButtonComponent extends MaterialComponent {
     }
 }
 MaterialButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MaterialButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1$1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-MaterialButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: MaterialButtonComponent, selector: "mat-formio-button", usesInheritance: true, ngImport: i0, template: "<button *ngIf=\"instance && instance.component.label != 'Click to add Products'\"\r\n        [ngClass]=\"[buttonClass, walkmeClass]\"\r\n        type=\"{{ instance.component.action }}\"\r\n        mat-raised-button [color]=\"color\"\r\n        [disabled]=\"disabled\"\r\n        (click)=\"instance.onClick($event)\"\r\n>\r\n\r\n\r\n  <mat-icon *ngIf=\"instance.component.leftIcon\">{{instance.component.leftIcon}}</mat-icon>\r\n  <mat-icon *ngIf=\"done\">done</mat-icon>\r\n  <mat-icon *ngIf=\"error\">close</mat-icon>\r\n  <mat-icon class=\"mat-icon-spin\" *ngIf=\"loading\">autorenew</mat-icon>\r\n  {{ instance.component.label }}\r\n  <mat-icon *ngIf=\"instance.component.rightIcon\">{{instance.component.rightIcon}}</mat-icon>\r\n</button>\r\n", styles: ["@-webkit-keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host .mat-icon-spin{-webkit-animation-name:spin;animation-name:spin;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-timing-function:linear;animation-timing-function:linear}.mat-formio-theme-success{background-color:#63d644!important}.mat-formio-theme-info{background-color:#49d9f4!important}.mat-formio-button-sm{font-size:14px;padding:8px 12px}.mat-formio-button-xs{font-size:14px;padding:4px 6px}.mat-formio-button-md{font-size:15px;padding:8px 12px}.mat-formio-button-lg{font-size:19px;padding:16px 20px}.mat-formio-button-block{display:block;width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }] });
+MaterialButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: MaterialButtonComponent, selector: "mat-formio-button", usesInheritance: true, ngImport: i0, template: "<button *ngIf=\"instance && instance.component.label != 'Click to add Products'\"\r\n        [ngClass]=\"buttonClass\"\r\n        type=\"{{ instance.component.action }}\"\r\n        mat-raised-button [color]=\"color\"\r\n        [disabled]=\"disabled\"\r\n        (click)=\"instance.onClick($event)\"\r\n>\r\n\r\n\r\n  <mat-icon *ngIf=\"instance.component.leftIcon\">{{instance.component.leftIcon}}</mat-icon>\r\n  <mat-icon *ngIf=\"done\">done</mat-icon>\r\n  <mat-icon *ngIf=\"error\">close</mat-icon>\r\n  <mat-icon class=\"mat-icon-spin\" *ngIf=\"loading\">autorenew</mat-icon>\r\n  {{ instance.component.label }}\r\n  <mat-icon *ngIf=\"instance.component.rightIcon\">{{instance.component.rightIcon}}</mat-icon>\r\n</button>\r\n", styles: ["@-webkit-keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host .mat-icon-spin{-webkit-animation-name:spin;animation-name:spin;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-timing-function:linear;animation-timing-function:linear}.mat-formio-theme-success{background-color:#63d644!important}.mat-formio-theme-info{background-color:#49d9f4!important}.mat-formio-button-sm{font-size:14px;padding:8px 12px}.mat-formio-button-xs{font-size:14px;padding:4px 6px}.mat-formio-button-md{font-size:15px;padding:8px 12px}.mat-formio-button-lg{font-size:19px;padding:16px 20px}.mat-formio-button-block{display:block;width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MaterialButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mat-formio-button', template: "<button *ngIf=\"instance && instance.component.label != 'Click to add Products'\"\r\n        [ngClass]=\"[buttonClass, walkmeClass]\"\r\n        type=\"{{ instance.component.action }}\"\r\n        mat-raised-button [color]=\"color\"\r\n        [disabled]=\"disabled\"\r\n        (click)=\"instance.onClick($event)\"\r\n>\r\n\r\n\r\n  <mat-icon *ngIf=\"instance.component.leftIcon\">{{instance.component.leftIcon}}</mat-icon>\r\n  <mat-icon *ngIf=\"done\">done</mat-icon>\r\n  <mat-icon *ngIf=\"error\">close</mat-icon>\r\n  <mat-icon class=\"mat-icon-spin\" *ngIf=\"loading\">autorenew</mat-icon>\r\n  {{ instance.component.label }}\r\n  <mat-icon *ngIf=\"instance.component.rightIcon\">{{instance.component.rightIcon}}</mat-icon>\r\n</button>\r\n", styles: ["@-webkit-keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host .mat-icon-spin{-webkit-animation-name:spin;animation-name:spin;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-timing-function:linear;animation-timing-function:linear}.mat-formio-theme-success{background-color:#63d644!important}.mat-formio-theme-info{background-color:#49d9f4!important}.mat-formio-button-sm{font-size:14px;padding:8px 12px}.mat-formio-button-xs{font-size:14px;padding:4px 6px}.mat-formio-button-md{font-size:15px;padding:8px 12px}.mat-formio-button-lg{font-size:19px;padding:16px 20px}.mat-formio-button-block{display:block;width:100%}\n"] }]
+            args: [{ selector: 'mat-formio-button', template: "<button *ngIf=\"instance && instance.component.label != 'Click to add Products'\"\r\n        [ngClass]=\"buttonClass\"\r\n        type=\"{{ instance.component.action }}\"\r\n        mat-raised-button [color]=\"color\"\r\n        [disabled]=\"disabled\"\r\n        (click)=\"instance.onClick($event)\"\r\n>\r\n\r\n\r\n  <mat-icon *ngIf=\"instance.component.leftIcon\">{{instance.component.leftIcon}}</mat-icon>\r\n  <mat-icon *ngIf=\"done\">done</mat-icon>\r\n  <mat-icon *ngIf=\"error\">close</mat-icon>\r\n  <mat-icon class=\"mat-icon-spin\" *ngIf=\"loading\">autorenew</mat-icon>\r\n  {{ instance.component.label }}\r\n  <mat-icon *ngIf=\"instance.component.rightIcon\">{{instance.component.rightIcon}}</mat-icon>\r\n</button>\r\n", styles: ["@-webkit-keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host .mat-icon-spin{-webkit-animation-name:spin;animation-name:spin;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-timing-function:linear;animation-timing-function:linear}.mat-formio-theme-success{background-color:#63d644!important}.mat-formio-theme-info{background-color:#49d9f4!important}.mat-formio-button-sm{font-size:14px;padding:8px 12px}.mat-formio-button-xs{font-size:14px;padding:4px 6px}.mat-formio-button-md{font-size:15px;padding:8px 12px}.mat-formio-button-lg{font-size:19px;padding:16px 20px}.mat-formio-button-block{display:block;width:100%}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$1.MatDialog }]; } });
 ButtonComponent.MaterialComponent = MaterialButtonComponent;
 
@@ -4216,7 +4208,7 @@ class AddOnProductsComponent {
     }
 }
 AddOnProductsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: AddOnProductsComponent, deps: [{ token: i1$1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i2.FormBuilder }, { token: i1$1.MatDialog }, { token: CommonService }], target: i0.ɵɵFactoryTarget.Component });
-AddOnProductsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: AddOnProductsComponent, selector: "ngx-mat-add-on-products", viewQueries: [{ propertyName: "firstscrollableDiv", first: true, predicate: ["firstscrollableDiv"], descendants: true }], ngImport: i0, template: "<div *ngIf=\"spinnerFlag\" class=\"OverlayDiv\">\r\n    <div class=\"OverlayDivContent\">\r\n        <mat-spinner></mat-spinner>\r\n    </div>\r\n</div>\r\n<div class=\"mat-dialog-heading\">\r\n    <h1 mat-dialog-title>Add Products</h1>\r\n</div>\r\n\r\n<mat-dialog-content [ngClass]=\"dataSource?.data?.length > 0 ? 'products-scroll-visible': ''\">\r\n    <div class=\"mat-dialog-content\">\r\n        <!--Search Start-->\r\n        <div class=\"basic-search\" [hidden]=\"currentPage !== 'select-products'\">\r\n            <div class=\"basic-search-wrp\">\r\n                <div class=\"search-icon\">\r\n                    <svg width=\"80\" height=\"80\" viewBox=\"0 0 24 25\" xmlns=\"http://www.w3.org/2000/svg\"\r\n                        transform=\"rotate(0 0 0)\">\r\n                        <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n                            d=\"M11.25 2.75C6.14154 2.75 2 6.89029 2 11.998C2 17.1056 6.14154 21.2459 11.25 21.2459C13.5335 21.2459 15.6238 20.4187 17.2373 19.0475L20.7182 22.5287C21.011 22.8216 21.4859 22.8217 21.7788 22.5288C22.0717 22.2359 22.0718 21.761 21.7789 21.4681L18.2983 17.9872C19.6714 16.3736 20.5 14.2826 20.5 11.998C20.5 6.89029 16.3585 2.75 11.25 2.75ZM3.5 11.998C3.5 7.71905 6.96962 4.25 11.25 4.25C15.5304 4.25 19 7.71905 19 11.998C19 16.2769 15.5304 19.7459 11.25 19.7459C6.96962 19.7459 3.5 16.2769 3.5 11.998Z\" />\r\n                    </svg>\r\n                </div>\r\n                <form [formGroup]=\"form\">\r\n                    <div class=\"input-search\">\r\n                        <input (keydown.enter)=\"handleDropdownFilter(); $event.stopPropagation()\" type=\"text\" matInput\r\n                            placeholder=\"Search Product\" formControlName=\"searchProductName\"\r\n                            (input)=\"clearIfEmpty($event)\">\r\n                    </div>\r\n                </form>\r\n                <!-- <div class=\"advfilter\">\r\n                    <button class=\"adv\" (click)=\"toggleSection();$event.stopPropagation();\">\r\n                        <mat-icon class=\"material-icons-round\" aria-hidden=\"false\"\r\n                            aria-label=\"tune\">tune\r\n                        </mat-icon>\r\n                        <span *ngIf=\"activeFiltersCount > 0\" class=\"custom-badge\">{{ activeFiltersCount }}</span>\r\n                    </button>\r\n                </div> -->\r\n            </div>\r\n            <div class=\"search-btn\">\r\n                <button mat-raised-button color=\"primary\"\r\n                    (click)=\"handleDropdownFilter();$event.stopPropagation();\">Search</button>\r\n            </div>\r\n        </div>\r\n        <!--Search End-->\r\n        <div class=\"product-selector\">\r\n            <div [hidden]=\"currentPage !== 'select-products'\">\r\n                <form [formGroup]=\"form\">\r\n                    <div class=\"product-selection-container\" *ngIf=\"isVisible && dropdownL1\">\r\n                        <div class=\"dropdown-selection\" *ngIf=\"dropdownL1\">\r\n                            <div [ngClass]=\"dropDownCount === 1 ? 'no-child': 'child'\">\r\n                                <div class=\"title-adv\">\r\n                                    <h5>Advanced Filters</h5>\r\n                                    <button class=\"clr-all-picker\" type=\"button\" (click)=\"resetTable()\"\r\n                                        *ngIf=\"activeFiltersCount > 0\">Clear All</button>\r\n                                </div>\r\n                                <div class=\"row\">\r\n                                    <div class=\"col-lg-6\">\r\n                                        <div class=\"example-full-width\">\r\n                                            <mat-form-field *ngIf=\"dropdownL1\" class=\"example-full-width\">\r\n                                                <mat-label>{{dropdownL1Label}}</mat-label>\r\n                                                <input type=\"text\" matInput formControlName=\"dropdownLevel1\"\r\n                                                    [matAutocomplete]=\"auto3\"\r\n                                                    (input)=\"onInputChange($event, 'category1')\">\r\n                                                <mat-autocomplete [displayWith]=\"displayFn\" #auto3=\"matAutocomplete\"\r\n                                                    (optionSelected)=\"onOptionSelected($event, 'category1')\">\r\n                                                    <mat-option *ngFor=\"let option of filteredDropdownOne\"\r\n                                                        [value]=\"option\">{{option.name}}</mat-option>\r\n                                                </mat-autocomplete>\r\n                                                <mat-icon matSuffix *ngIf=\"form.get('dropdownLevel1').value\"\r\n                                                    (click)=\"clearField('dropdownLevel1', 'category1', $event)\"\r\n                                                    class=\"iconclose\">close</mat-icon>\r\n                                                <mat-icon class=\"icondropdown\" matSuffix>arrow_drop_down</mat-icon>\r\n                                            </mat-form-field>\r\n                                        </div>\r\n                                    </div>\r\n                                    <div class=\"col-lg-6\">\r\n                                        <div class=\"example-full-width\">\r\n                                            <mat-form-field *ngIf=\"dropdownL2\" class=\"example-full-width\">\r\n                                                <mat-label>{{dropdownL2Label}}</mat-label>\r\n                                                <input type=\"text\" matInput formControlName=\"dropdownLevel2\"\r\n                                                    [matAutocomplete]=\"auto4\"\r\n                                                    (input)=\"onInputChange($event, 'category2')\">\r\n                                                <mat-autocomplete [displayWith]=\"displayFn\" #auto4=\"matAutocomplete\"\r\n                                                    (optionSelected)=\"onOptionSelected($event, 'category2')\">\r\n                                                    <mat-option *ngFor=\"let option of filteredDropdownTwo\"\r\n                                                        [value]=\"option\">{{option.name}}</mat-option>\r\n                                                </mat-autocomplete>\r\n                                                <mat-icon matSuffix *ngIf=\"form.get('dropdownLevel2').value\"\r\n                                                    (click)=\"clearField('dropdownLevel2', 'category2', $event)\"\r\n                                                    class=\"iconclose\">close</mat-icon>\r\n                                                <mat-icon class=\"icondropdown\" matSuffix\r\n                                                    [ngClass]=\"{'disabled-icon': isDisabled2}\">arrow_drop_down</mat-icon>\r\n                                            </mat-form-field>\r\n                                        </div>\r\n                                    </div>\r\n\r\n                                    <div class=\"col-lg-6\">\r\n                                        <div class=\"example-full-width\">\r\n                                            <mat-form-field *ngIf=\"dropdownL3\" class=\"example-full-width\">\r\n                                                <mat-label>{{dropdownL3Label}}</mat-label>\r\n                                                <input type=\"text\" matInput formControlName=\"dropdownLevel3\"\r\n                                                    [matAutocomplete]=\"auto5\"\r\n                                                    (input)=\"onInputChange($event, 'category3')\">\r\n                                                <mat-autocomplete [displayWith]=\"displayFn\" #auto5=\"matAutocomplete\"\r\n                                                    (optionSelected)=\"onOptionSelected($event, 'category3')\">\r\n                                                    <mat-option *ngFor=\"let option of filteredDropdownThree\"\r\n                                                        [value]=\"option\">{{option.name}}</mat-option>\r\n                                                </mat-autocomplete>\r\n                                                <mat-icon matSuffix *ngIf=\"form.get('dropdownLevel3').value\"\r\n                                                    (click)=\"clearField('dropdownLevel3', 'category3', $event)\"\r\n                                                    class=\"iconclose\">close</mat-icon>\r\n                                                <mat-icon class=\"icondropdown\" matSuffix\r\n                                                    [ngClass]=\"{'disable-icon': isDisabled3}\">arrow_drop_down</mat-icon>\r\n                                            </mat-form-field>\r\n                                        </div>\r\n                                    </div>\r\n                                    <div class=\"col-lg-6\">\r\n                                        <div class=\"example-full-width\">\r\n                                            <mat-form-field *ngIf=\"dropdownL4\" class=\"example-full-width\">\r\n                                                <mat-label>{{dropdownL4Label}}</mat-label>\r\n                                                <input type=\"text\" matInput formControlName=\"dropdownLevel4\"\r\n                                                    [matAutocomplete]=\"auto6\"\r\n                                                    (input)=\"onInputChange($event, 'category4')\">\r\n                                                <mat-autocomplete [displayWith]=\"displayFn\" #auto6=\"matAutocomplete\"\r\n                                                    (optionSelected)=\"onOptionSelected($event, 'category4')\">\r\n                                                    <mat-option *ngFor=\"let option of filteredDropdownFour\"\r\n                                                        [value]=\"option\">{{option.name}}</mat-option>\r\n                                                </mat-autocomplete>\r\n                                                <mat-icon matSuffix *ngIf=\"form.get('dropdownLevel4').value\"\r\n                                                    (click)=\"clearField('dropdownLevel4', 'category4', $event)\"\r\n                                                    class=\"iconclose\">close</mat-icon>\r\n                                                <mat-icon class=\"icondropdown\" matSuffix\r\n                                                    [ngClass]=\"{'disable-icon': isDisabled4}\">arrow_drop_down</mat-icon>\r\n                                            </mat-form-field>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div #firstscrollableDiv id=\"firstscrollableDiv\" class=\"new-class first-div\"\r\n                        (scroll)=\"onScroll($event)\" [ngClass]=\"dataSource?.data?.length > 0 ? 'tbl-record-found': ''\">\r\n                        <table mat-table [dataSource]=\"dataSource\" class=\"mat-table abc\"\r\n                            *ngIf=\"dataSource && dataSource?.data?.length > 0; else noData\">\r\n                            <ng-container matColumnDef=\"select\">\r\n                                <th mat-header-cell *matHeaderCellDef>\r\n                                </th>\r\n                                <td mat-cell *matCellDef=\"let row\" class=\"checkbox-picker-pointer\">\r\n                                    <mat-checkbox color=\"primary\" (click)=\"$event.stopPropagation()\"\r\n                                        (change)=\"$event ? toggleSelection(row) : null\"\r\n                                        [checked]=\"selection.isSelected(row)\"></mat-checkbox>\r\n                                </td>\r\n                            </ng-container>\r\n                            <ng-container matColumnDef=\"productName\">\r\n                                <th mat-header-cell *matHeaderCellDef> {{productTweek}} </th>\r\n                                <td mat-cell *matCellDef=\"let element\"> {{element?.text}} </td>\r\n                            </ng-container>\r\n                            <ng-container matColumnDef=\"skuNumber\" *ngIf=\"showSkuNumber\">\r\n                                <th mat-header-cell *matHeaderCellDef> {{skuTweek}} </th>\r\n                                <td mat-cell *matCellDef=\"let element\"> {{element?.otherInformation0}} </td>\r\n                            </ng-container>\r\n                            <ng-container matColumnDef=\"inventory\" *ngIf=\"showInventory\">\r\n                                <th mat-header-cell *matHeaderCellDef> {{inventoryTweek}} </th>\r\n                                <td mat-cell *matCellDef=\"let element\"> {{element?.otherInformation1}} </td>\r\n                            </ng-container>\r\n                            <tr mat-header-row *matHeaderRowDef=\"addProductsColumns\"></tr>\r\n                            <tr mat-row *matRowDef=\"let row; columns: addProductsColumns;\"\r\n                                [class.selected]=\"selection.isSelected(row)\"></tr>\r\n                        </table>\r\n                        <ng-template #noData>\r\n                            <div class=\"no-data-message\">\r\n                                <!--No data found.-->\r\n                                <div class=\"pp-empty-state\">\r\n                                    <div class=\"img-empty-state\">\r\n                                        <img [src]=\"emptyImage\" alt=\"\">\r\n                                    </div>\r\n                                    <h3>No records to show at the moment</h3>\r\n                                    <p>Please modify your search criteria to find the desired result</p>\r\n                                </div>\r\n\r\n                            </div>\r\n                        </ng-template>\r\n                    </div>\r\n                    <div class=\"row-summary\" *ngIf=\"dataSource && dataSource?.data?.length > 0\">\r\n                        <div>Selected: <strong>{{ getSelectedRowsCount() }}</strong> </div>\r\n                        <div>Total Records: <strong>{{ getTotalRecords }}</strong></div>\r\n                    </div>\r\n                </form>\r\n            </div>\r\n\r\n            <div [hidden]=\"currentPage !== 'edit-save'\">\r\n                <form [formGroup]=\"form\">\r\n                    <div class=\"new-class\"\r\n                        [ngClass]=\"selectedDataSource && selectedDataSource.data.length > 0 ? 'added-products': ''\">\r\n                        <table mat-table [dataSource]=\"selectedDataSource\"\r\n                            *ngIf=\"selectedDataSource && selectedDataSource.data.length > 0; else showBlank\">\r\n                            <ng-container matColumnDef=\"delete\">\r\n                                <th mat-header-cell *matHeaderCellDef></th>\r\n                                <td mat-cell *matCellDef=\"let element\">\r\n                                    <button class=\"delete-btn-picker\" mat-button\r\n                                        (click)=\"$event.stopPropagation();removeRow($event, element)\">\r\n                                        <mat-icon aria-hidden=\"false\" aria-label=\"Remove row\">delete</mat-icon>\r\n                                    </button>\r\n                                </td>\r\n                            </ng-container>\r\n                            <ng-container matColumnDef=\"productName\">\r\n                                <th mat-header-cell *matHeaderCellDef> {{productTweek}} </th>\r\n                                <td mat-cell *matCellDef=\"let element\"> {{element.text}} </td>\r\n                            </ng-container>\r\n                            <ng-container matColumnDef=\"categoryName\" *ngIf=\"showCategory\">\r\n                                <th mat-header-cell *matHeaderCellDef> {{categoryTweek}} </th>\r\n                                <td mat-cell *matCellDef=\"let element\"> {{element.category}} </td>\r\n                            </ng-container>\r\n                            <ng-container matColumnDef=\"subCategory\" *ngIf=\"showSubcategory\">\r\n                                <th mat-header-cell *matHeaderCellDef> {{subCategoryTweek}} </th>\r\n                                <td mat-cell *matCellDef=\"let element\"> {{element.subCategory}} </td>\r\n                            </ng-container>\r\n                            <ng-container matColumnDef=\"price\" *ngIf=\"showPrice\">\r\n                                <th mat-header-cell *matHeaderCellDef>{{priceTweek}}</th>\r\n                                <td mat-cell *matCellDef=\"let element; let i = index\">\r\n                                    <mat-form-field class=\"example-full-width select-price\">\r\n                                        <mat-label>{{priceTweek}}</mat-label>\r\n                                        <input matInput [formControl]=\"selectedProducts.at(i).get('price')\"\r\n                                            (input)=\"applyValidationRule($event, i, 'price')\"\r\n                                            (keypress)=\"restrictInput($event, '')\" (paste)=\"handlePaste($event, '')\">\r\n                                        <mat-error *ngIf=\"selectedProducts.at(i).get('price').hasError('required')\">\r\n                                            This field is required\r\n                                        </mat-error>\r\n                                    </mat-form-field>\r\n                                </td>\r\n                            </ng-container>\r\n                            <ng-container matColumnDef=\"Quantity\" *ngIf=\"showQuantity\">\r\n                                <th mat-header-cell *matHeaderCellDef> {{quantityTweek}} </th>\r\n                                <td mat-cell *matCellDef=\"let element; let i = index\">\r\n                                    <mat-form-field class=\"example-full-width\">\r\n                                        <mat-label>{{quantityTweek}}</mat-label>\r\n                                        <input matInput [formControl]=\"selectedProducts.at(i).get('quantity')\"\r\n                                            type=\"number\" min=\"1\" step=\"1\" (input)=\"onQuantityChange($event, i)\">\r\n                                        <mat-error *ngIf=\"selectedProducts.at(i).get('quantity').hasError('required')\">\r\n                                            This field is required\r\n                                        </mat-error>\r\n                                        <mat-error *ngIf=\"selectedProducts.at(i).get('quantity').hasError('min')\">\r\n                                            Quantity can not be less than 1\r\n                                        </mat-error>\r\n                                        <mat-error *ngIf=\"selectedProducts.at(i).get('quantity').hasError('pattern')\">\r\n                                            Decimals not allowed\r\n                                        </mat-error>\r\n                                    </mat-form-field>\r\n                                </td>\r\n                            </ng-container>\r\n                            <ng-container matColumnDef=\"skuNumber\" *ngIf=\"showSkuNumber\">\r\n                                <th mat-header-cell *matHeaderCellDef> {{skuTweek}} </th>\r\n                                <td mat-cell *matCellDef=\"let element\">{{element?.otherInformation0}} </td>\r\n                            </ng-container>\r\n                            <ng-container matColumnDef=\"inventory\" *ngIf=\"showInventory\">\r\n                                <th mat-header-cell *matHeaderCellDef> {{inventoryTweek}} </th>\r\n                                <td mat-cell *matCellDef=\"let element\">{{element?.otherInformation1}} </td>\r\n                            </ng-container>\r\n\r\n                            <ng-container matColumnDef=\"cost\" *ngIf=\"showCost\">\r\n                                <th mat-header-cell *matHeaderCellDef>{{costTweek}}</th>\r\n                                <td mat-cell *matCellDef=\"let element; let i = index\">\r\n                                    <mat-form-field class=\"example-full-width select-cost\">\r\n                                        <mat-label>{{costTweek}}</mat-label>\r\n                                        <input matInput [formControl]=\"selectedProducts.at(i).get('otherInformation0')\"\r\n                                            (input)=\"applyValidationRule($event, i, 'otherInformation0')\"\r\n                                            (keypress)=\"restrictInput($event, 'otherInformation0')\" (paste)=\"handlePaste($event, 'otherInformation0')\">\r\n                                        <mat-error\r\n                                            *ngIf=\"selectedProducts.at(i).get('otherInformation0').hasError('required')\">\r\n                                            This field is required\r\n                                        </mat-error>\r\n                                    </mat-form-field>\r\n                                </td>\r\n                            </ng-container>\r\n                            <tr mat-header-row *matHeaderRowDef=\"showAllproductsColumns\"></tr>\r\n                            <tr mat-row *matRowDef=\"let row; columns: showAllproductsColumns;\"></tr>\r\n                        </table>\r\n                        <!-- <ng-template #showBlank>\r\n                            <div class=\"no-data-message\">\r\n                                No data found.\r\n                            </div>\r\n                        </ng-template> -->\r\n                        <ng-template #showBlank>\r\n                            <div class=\"no-data-message\">\r\n                                <div class=\"pp-empty-state\">\r\n                                    <div class=\"img-empty-state\">\r\n                                        <img [src]=\"emptyImage\" alt=\"\">\r\n                                    </div>\r\n                                    <h3>No Product added</h3>\r\n                                    <p>Please go back and start adding products</p>\r\n                                </div>\r\n                            </div>\r\n                        </ng-template>\r\n                    </div>\r\n                </form>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</mat-dialog-content>\r\n\r\n<mat-dialog-actions>\r\n    <div class=\"tabs-action-step-one\" *ngIf=\"currentPage === 'select-products'\">\r\n        <div>\r\n            <button mat-button (click)=\"goToNextPage()\" [disabled]=\"selection.selected.length ? false : true\"\r\n                color=\"primary\" mat-raised-button>Edit Selected Products</button>\r\n        </div>\r\n        <div>\r\n            <button mat-button (click)=\"goToNextPage()\" [disabled]=\"selection.selected.length ? false : true\"\r\n                color=\"primary\" mat-raised-button>Next</button>\r\n            <button mat-button [mat-dialog-close]=\"false\">Cancel</button>\r\n        </div>\r\n    </div>\r\n    <div class=\"tabs-action\" *ngIf=\"currentPage === 'edit-save'\">\r\n        <div class=\"tab-action-wrp\">\r\n            <button mat-button (click)=\"goToPreviousPage()\">Back</button>\r\n            <button mat-button type=\"submit\" color=\"primary\" mat-raised-button (click)=\"onSubmit()\">Add/Update</button>\r\n        </div>\r\n    </div>\r\n</mat-dialog-actions>", styles: [".mat-dialog-heading{margin:0 0 20px;position:relative;display:flex;align-items:center}:host ::ng-deep .mat-dialog-title{width:100%;padding:0 40px;margin:0;font-family:Inter,sans-serif;font-size:20px;color:#000;letter-spacing:normal;text-align:center}.mat-dialog-close mat-icon{color:#000}.example-full-width{width:100%}.mat-dialog-content p{margin-bottom:15px;font-family:Inter,sans-serif}.mat-dialog-content a{color:#2196f3}.mat-dialog-content a:hover{text-decoration:none}:host ::ng-deep .mat-dialog-actions{justify-content:flex-end}.mat-stroked-button.mat-primary{color:#0078d6}.OverlayDiv{position:fixed;display:block;width:100%;height:100%;top:0;left:0;right:0;bottom:0;background-color:#00000080;z-index:500;cursor:pointer}.OverlayDivContent{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%)}.basic-search{display:flex;align-items:center;width:100%;margin-bottom:20px}.basic-search-wrp{border:1px solid #DADCE0;border-radius:5px;padding-left:15px;height:46px;display:flex;align-items:center;flex:1;margin-right:20px}.basic-search-wrp mat-icon{color:#0006}.basic-search-wrp form{width:100%}.search-icon{margin:0;display:flex}.search-icon mat-icon{color:#0006}.search-icon svg{width:24px;height:24px}.search-icon svg path{fill:#999}.input-search{margin:0;border:0;width:100%;padding:0 18px 0 10px}.input-search input{border:0;width:100%;font-size:15px;line-height:1}.input-search input:focus{border:0;outline:0 none}.advfilter{display:flex;margin-left:auto}.advfilter button{border:0;background-color:transparent;margin:0;padding:0;display:flex;position:relative}.advfilter button mat-icon{color:#0006}.advfilter button span{font-weight:600;font-size:10px;display:flex;align-items:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;justify-content:center;width:20px;height:20px;color:#fff!important;border-radius:50%;background-color:#f44336!important;position:absolute;top:-5px;right:-10px}.search-btn{margin-left:auto;min-width:137px}.search-btn button{box-shadow:none;height:46px;width:100%}.product-selection-container{border:1px solid #DADCE0;padding:20px;margin-bottom:20px;border-radius:5px}.product-selection-container h5{margin:0;color:#202020!important;font-size:16px!important}.pp-empty-state{max-width:420px;margin:0 auto;padding:50px 0;text-align:center}.img-empty-state{width:100%;margin-bottom:20px}.img-empty-state img{width:100%}.pp-empty-state h3{font-size:20px!important;margin:0 0 5px;padding:0;font-weight:400;color:#202020!important}.pp-empty-state p{font-size:15px!important;margin:0 0 20px!important;padding:0;color:#656667!important}.mat-dialog-content{max-height:none!important;overflow:hidden!important}.tbl-record-found{border-left:1px solid #0000001f;border-right:1px solid #0000001f;border-top:1px solid #0000001f;border-radius:5px 5px 0 0;min-height:104px;max-height:296px;overflow-y:auto;height:100%}.tbl-record-found table{border-collapse:separate}.tbl-record-found tr:last-child td{border-bottom:none}.tbl-record-found thead,.tbl-record-found th{position:-webkit-sticky;position:sticky;top:0;z-index:100;background-color:#fff}.tbl-record-found th.mat-header-cell:first-of-type,.tbl-record-found td.mat-cell:first-of-type,.tbl-record-found td.mat-footer-cell:first-of-type{width:70px}.row-summary{padding:15px 25px;border-left:1px solid #0000001f;border-top:1px solid #0000001f;display:flex;justify-content:space-between;border-right:1px solid #0000001f;border-bottom:1px solid #0000001f;border-radius:0 0 5px 5px}.row-summary div{margin-right:30px}button.delete-btn-picker{background:transparent!important;padding:0!important;min-width:auto!important}button.delete-btn-picker:hover{background:transparent!important}button.delete-btn-picker:hover .mat-button-focus-overlay{opacity:0!important}button.delete-btn-picker mat-icon{color:#f44336!important}mat-icon.icondropdown{line-height:1.6!important}mat-icon.iconclose{line-height:2!important;font-size:120%!important}.added-products{border:1px solid #0000001f;border-bottom:none;border-radius:5px;min-height:133px;max-height:444px;overflow-y:auto;height:100%}.added-products table{border-collapse:separate}.added-products thead,.added-products th{position:-webkit-sticky;position:sticky;top:0;z-index:100;background-color:#fff}.added-products th.mat-header-cell:first-of-type,.added-products td.mat-cell:first-of-type,.added-products td.mat-footer-cell:first-of-type{width:70px}.mat-header-cell{font-weight:500!important;color:#0000008a!important}.clr-all-picker{display:inline-block;border:0;outline:0 none;padding:0;background-color:transparent;color:#2196f3;margin-left:20px}.title-adv{display:flex;align-items:center;margin-bottom:15px}.tabs-action-step-one{display:flex;justify-content:space-between;width:100%}.tbl-record-found td.checkbox-picker-pointer{cursor:pointer!important}.tbl-record-found td{cursor:text!important}@media only screen and (max-width:1545px){.pp-empty-state h3{font-size:18px}.pp-empty-state p{font-size:14px}.pp-empty-state{padding:20px 0;max-width:392px}.product-selection-container h5{font-size:14px;margin-bottom:5px}.product-selection-container{padding:15px 20px}.basic-search{margin-bottom:20px}.mat-dialog-heading{margin-bottom:10px}.mat-dialog-title{font-size:18px}.mat-dialog-content{max-height:60vh!important;overflow:auto!important}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i3$2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$5.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i5$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i10$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i10$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i10$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i10$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i10$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i10$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i10$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i10$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i10$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i10$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i11.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "directive", type: i1$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i14.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i14.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }], animations: [
+AddOnProductsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: AddOnProductsComponent, selector: "ngx-mat-add-on-products", viewQueries: [{ propertyName: "firstscrollableDiv", first: true, predicate: ["firstscrollableDiv"], descendants: true }], ngImport: i0, template: "<div *ngIf=\"spinnerFlag\" class=\"OverlayDiv\">\r\n    <div class=\"OverlayDivContent\">\r\n        <mat-spinner></mat-spinner>\r\n    </div>\r\n</div>\r\n<div class=\"mat-dialog-heading\">\r\n    <h1 mat-dialog-title>Add Products</h1>\r\n</div>\r\n\r\n<mat-dialog-content [ngClass]=\"dataSource?.data?.length > 0 ? 'products-scroll-visible': ''\">\r\n    <div class=\"mat-dialog-content\">\r\n        <!--Search Start-->\r\n        <div class=\"basic-search\" [hidden]=\"currentPage !== 'select-products'\">\r\n            <div class=\"basic-search-wrp\">\r\n                <div class=\"search-icon\">\r\n                    <svg width=\"80\" height=\"80\" viewBox=\"0 0 24 25\" xmlns=\"http://www.w3.org/2000/svg\"\r\n                        transform=\"rotate(0 0 0)\">\r\n                        <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n                            d=\"M11.25 2.75C6.14154 2.75 2 6.89029 2 11.998C2 17.1056 6.14154 21.2459 11.25 21.2459C13.5335 21.2459 15.6238 20.4187 17.2373 19.0475L20.7182 22.5287C21.011 22.8216 21.4859 22.8217 21.7788 22.5288C22.0717 22.2359 22.0718 21.761 21.7789 21.4681L18.2983 17.9872C19.6714 16.3736 20.5 14.2826 20.5 11.998C20.5 6.89029 16.3585 2.75 11.25 2.75ZM3.5 11.998C3.5 7.71905 6.96962 4.25 11.25 4.25C15.5304 4.25 19 7.71905 19 11.998C19 16.2769 15.5304 19.7459 11.25 19.7459C6.96962 19.7459 3.5 16.2769 3.5 11.998Z\" />\r\n                    </svg>\r\n                </div>\r\n                <form [formGroup]=\"form\">\r\n                    <div class=\"input-search\">\r\n                        <input (keydown.enter)=\"handleDropdownFilter(); $event.stopPropagation()\" type=\"text\" matInput\r\n                            placeholder=\"Search Product\" formControlName=\"searchProductName\"\r\n                            (input)=\"clearIfEmpty($event)\">\r\n                    </div>\r\n                </form>\r\n                <!-- <div class=\"advfilter\">\r\n                    <button class=\"adv\" (click)=\"toggleSection();$event.stopPropagation();\">\r\n                        <mat-icon class=\"material-icons-round\" aria-hidden=\"false\"\r\n                            aria-label=\"tune\">tune\r\n                        </mat-icon>\r\n                        <span *ngIf=\"activeFiltersCount > 0\" class=\"custom-badge\">{{ activeFiltersCount }}</span>\r\n                    </button>\r\n                </div> -->\r\n            </div>\r\n            <div class=\"search-btn\">\r\n                <button mat-raised-button color=\"primary\"\r\n                    (click)=\"handleDropdownFilter();$event.stopPropagation();\">Search</button>\r\n            </div>\r\n        </div>\r\n        <!--Search End-->\r\n        <div class=\"product-selector\">\r\n            <div [hidden]=\"currentPage !== 'select-products'\">\r\n                <form [formGroup]=\"form\">\r\n                    <div class=\"product-selection-container\" *ngIf=\"isVisible && dropdownL1\">\r\n                        <div class=\"dropdown-selection\" *ngIf=\"dropdownL1\">\r\n                            <div [ngClass]=\"dropDownCount === 1 ? 'no-child': 'child'\">\r\n                                <div class=\"title-adv\">\r\n                                    <h5>Advanced Filters</h5>\r\n                                    <button class=\"clr-all-picker\" type=\"button\" (click)=\"resetTable()\"\r\n                                        *ngIf=\"activeFiltersCount > 0\">Clear All</button>\r\n                                </div>\r\n                                <div class=\"row\">\r\n                                    <div class=\"col-lg-6\">\r\n                                        <div class=\"example-full-width\">\r\n                                            <mat-form-field *ngIf=\"dropdownL1\" class=\"example-full-width\">\r\n                                                <mat-label>{{dropdownL1Label}}</mat-label>\r\n                                                <input type=\"text\" matInput formControlName=\"dropdownLevel1\"\r\n                                                    [matAutocomplete]=\"auto3\"\r\n                                                    (input)=\"onInputChange($event, 'category1')\">\r\n                                                <mat-autocomplete [displayWith]=\"displayFn\" #auto3=\"matAutocomplete\"\r\n                                                    (optionSelected)=\"onOptionSelected($event, 'category1')\">\r\n                                                    <mat-option *ngFor=\"let option of filteredDropdownOne\"\r\n                                                        [value]=\"option\">{{option.name}}</mat-option>\r\n                                                </mat-autocomplete>\r\n                                                <mat-icon matSuffix *ngIf=\"form.get('dropdownLevel1').value\"\r\n                                                    (click)=\"clearField('dropdownLevel1', 'category1', $event)\"\r\n                                                    class=\"iconclose\">close</mat-icon>\r\n                                                <mat-icon class=\"icondropdown\" matSuffix>arrow_drop_down</mat-icon>\r\n                                            </mat-form-field>\r\n                                        </div>\r\n                                    </div>\r\n                                    <div class=\"col-lg-6\">\r\n                                        <div class=\"example-full-width\">\r\n                                            <mat-form-field *ngIf=\"dropdownL2\" class=\"example-full-width\">\r\n                                                <mat-label>{{dropdownL2Label}}</mat-label>\r\n                                                <input type=\"text\" matInput formControlName=\"dropdownLevel2\"\r\n                                                    [matAutocomplete]=\"auto4\"\r\n                                                    (input)=\"onInputChange($event, 'category2')\">\r\n                                                <mat-autocomplete [displayWith]=\"displayFn\" #auto4=\"matAutocomplete\"\r\n                                                    (optionSelected)=\"onOptionSelected($event, 'category2')\">\r\n                                                    <mat-option *ngFor=\"let option of filteredDropdownTwo\"\r\n                                                        [value]=\"option\">{{option.name}}</mat-option>\r\n                                                </mat-autocomplete>\r\n                                                <mat-icon matSuffix *ngIf=\"form.get('dropdownLevel2').value\"\r\n                                                    (click)=\"clearField('dropdownLevel2', 'category2', $event)\"\r\n                                                    class=\"iconclose\">close</mat-icon>\r\n                                                <mat-icon class=\"icondropdown\" matSuffix\r\n                                                    [ngClass]=\"{'disabled-icon': isDisabled2}\">arrow_drop_down</mat-icon>\r\n                                            </mat-form-field>\r\n                                        </div>\r\n                                    </div>\r\n\r\n                                    <div class=\"col-lg-6\">\r\n                                        <div class=\"example-full-width\">\r\n                                            <mat-form-field *ngIf=\"dropdownL3\" class=\"example-full-width\">\r\n                                                <mat-label>{{dropdownL3Label}}</mat-label>\r\n                                                <input type=\"text\" matInput formControlName=\"dropdownLevel3\"\r\n                                                    [matAutocomplete]=\"auto5\"\r\n                                                    (input)=\"onInputChange($event, 'category3')\">\r\n                                                <mat-autocomplete [displayWith]=\"displayFn\" #auto5=\"matAutocomplete\"\r\n                                                    (optionSelected)=\"onOptionSelected($event, 'category3')\">\r\n                                                    <mat-option *ngFor=\"let option of filteredDropdownThree\"\r\n                                                        [value]=\"option\">{{option.name}}</mat-option>\r\n                                                </mat-autocomplete>\r\n                                                <mat-icon matSuffix *ngIf=\"form.get('dropdownLevel3').value\"\r\n                                                    (click)=\"clearField('dropdownLevel3', 'category3', $event)\"\r\n                                                    class=\"iconclose\">close</mat-icon>\r\n                                                <mat-icon class=\"icondropdown\" matSuffix\r\n                                                    [ngClass]=\"{'disable-icon': isDisabled3}\">arrow_drop_down</mat-icon>\r\n                                            </mat-form-field>\r\n                                        </div>\r\n                                    </div>\r\n                                    <div class=\"col-lg-6\">\r\n                                        <div class=\"example-full-width\">\r\n                                            <mat-form-field *ngIf=\"dropdownL4\" class=\"example-full-width\">\r\n                                                <mat-label>{{dropdownL4Label}}</mat-label>\r\n                                                <input type=\"text\" matInput formControlName=\"dropdownLevel4\"\r\n                                                    [matAutocomplete]=\"auto6\"\r\n                                                    (input)=\"onInputChange($event, 'category4')\">\r\n                                                <mat-autocomplete [displayWith]=\"displayFn\" #auto6=\"matAutocomplete\"\r\n                                                    (optionSelected)=\"onOptionSelected($event, 'category4')\">\r\n                                                    <mat-option *ngFor=\"let option of filteredDropdownFour\"\r\n                                                        [value]=\"option\">{{option.name}}</mat-option>\r\n                                                </mat-autocomplete>\r\n                                                <mat-icon matSuffix *ngIf=\"form.get('dropdownLevel4').value\"\r\n                                                    (click)=\"clearField('dropdownLevel4', 'category4', $event)\"\r\n                                                    class=\"iconclose\">close</mat-icon>\r\n                                                <mat-icon class=\"icondropdown\" matSuffix\r\n                                                    [ngClass]=\"{'disable-icon': isDisabled4}\">arrow_drop_down</mat-icon>\r\n                                            </mat-form-field>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div #firstscrollableDiv id=\"firstscrollableDiv\" class=\"new-class first-div\"\r\n                        (scroll)=\"onScroll($event)\" [ngClass]=\"dataSource?.data?.length > 0 ? 'tbl-record-found': ''\">\r\n                        <table mat-table [dataSource]=\"dataSource\" class=\"mat-table abc\"\r\n                            *ngIf=\"dataSource && dataSource?.data?.length > 0; else noData\">\r\n                            <ng-container matColumnDef=\"select\">\r\n                                <th mat-header-cell *matHeaderCellDef>\r\n                                </th>\r\n                                <td mat-cell *matCellDef=\"let row\" class=\"checkbox-picker-pointer\">\r\n                                    <mat-checkbox color=\"primary\" (click)=\"$event.stopPropagation()\"\r\n                                        (change)=\"$event ? toggleSelection(row) : null\"\r\n                                        [checked]=\"selection.isSelected(row)\"></mat-checkbox>\r\n                                </td>\r\n                            </ng-container>\r\n                            <ng-container matColumnDef=\"productName\">\r\n                                <th mat-header-cell *matHeaderCellDef> {{productTweek}} </th>\r\n                                <td mat-cell *matCellDef=\"let element\"> {{element?.text}} </td>\r\n                            </ng-container>\r\n                            <ng-container matColumnDef=\"skuNumber\" *ngIf=\"showSkuNumber\">\r\n                                <th mat-header-cell *matHeaderCellDef> {{skuTweek}} </th>\r\n                                <td mat-cell *matCellDef=\"let element\"> {{element?.otherInformation0}} </td>\r\n                            </ng-container>\r\n                            <ng-container matColumnDef=\"inventory\" *ngIf=\"showInventory\">\r\n                                <th mat-header-cell *matHeaderCellDef> {{inventoryTweek}} </th>\r\n                                <td mat-cell *matCellDef=\"let element\"> {{element?.otherInformation1}} </td>\r\n                            </ng-container>\r\n                            <tr mat-header-row *matHeaderRowDef=\"addProductsColumns\"></tr>\r\n                            <tr mat-row *matRowDef=\"let row; columns: addProductsColumns;\"\r\n                                [class.selected]=\"selection.isSelected(row)\"></tr>\r\n                        </table>\r\n                        <ng-template #noData>\r\n                            <div class=\"no-data-message\">\r\n                                <!--No data found.-->\r\n                                <div class=\"pp-empty-state\">\r\n                                    <div class=\"img-empty-state\">\r\n                                        <img [src]=\"emptyImage\" alt=\"\">\r\n                                    </div>\r\n                                    <h3>No records to show at the moment</h3>\r\n                                    <p>Please modify your search criteria to find the desired result</p>\r\n                                </div>\r\n\r\n                            </div>\r\n                        </ng-template>\r\n                    </div>\r\n                    <div class=\"row-summary\" *ngIf=\"dataSource && dataSource?.data?.length > 0\">\r\n                        <div>Selected: <strong>{{ getSelectedRowsCount() }}</strong> </div>\r\n                        <div>Total Records: <strong>{{ getTotalRecords }}</strong></div>\r\n                    </div>\r\n                </form>\r\n            </div>\r\n\r\n            <div [hidden]=\"currentPage !== 'edit-save'\">\r\n                <form [formGroup]=\"form\">\r\n                    <div class=\"new-class\"\r\n                        [ngClass]=\"selectedDataSource && selectedDataSource.data.length > 0 ? 'added-products': ''\">\r\n                        <table mat-table [dataSource]=\"selectedDataSource\"\r\n                            *ngIf=\"selectedDataSource && selectedDataSource.data.length > 0; else showBlank\">\r\n                            <ng-container matColumnDef=\"delete\">\r\n                                <th mat-header-cell *matHeaderCellDef></th>\r\n                                <td mat-cell *matCellDef=\"let element\">\r\n                                    <button class=\"delete-btn-picker\" mat-button\r\n                                        (click)=\"$event.stopPropagation();removeRow($event, element)\">\r\n                                        <mat-icon aria-hidden=\"false\" aria-label=\"Remove row\">delete</mat-icon>\r\n                                    </button>\r\n                                </td>\r\n                            </ng-container>\r\n                            <ng-container matColumnDef=\"productName\">\r\n                                <th mat-header-cell *matHeaderCellDef> {{productTweek}} </th>\r\n                                <td mat-cell *matCellDef=\"let element\"> {{element.text}} </td>\r\n                            </ng-container>\r\n                            <ng-container matColumnDef=\"categoryName\" *ngIf=\"showCategory\">\r\n                                <th mat-header-cell *matHeaderCellDef> {{categoryTweek}} </th>\r\n                                <td mat-cell *matCellDef=\"let element\"> {{element.category}} </td>\r\n                            </ng-container>\r\n                            <ng-container matColumnDef=\"subCategory\" *ngIf=\"showSubcategory\">\r\n                                <th mat-header-cell *matHeaderCellDef> {{subCategoryTweek}} </th>\r\n                                <td mat-cell *matCellDef=\"let element\"> {{element.subCategory}} </td>\r\n                            </ng-container>\r\n                            <ng-container matColumnDef=\"price\" *ngIf=\"showPrice\">\r\n                                <th mat-header-cell *matHeaderCellDef>{{priceTweek}}</th>\r\n                                <td mat-cell *matCellDef=\"let element; let i = index\">\r\n                                    <mat-form-field class=\"example-full-width select-price\">\r\n                                        <mat-label>{{priceTweek}}</mat-label>\r\n                                        <input matInput [formControl]=\"selectedProducts.at(i).get('price')\"\r\n                                            (input)=\"applyValidationRule($event, i, 'price')\"\r\n                                            (keypress)=\"restrictInput($event, '')\" (paste)=\"handlePaste($event, '')\">\r\n                                        <mat-error *ngIf=\"selectedProducts.at(i).get('price').hasError('required')\">\r\n                                            This field is required\r\n                                        </mat-error>\r\n                                    </mat-form-field>\r\n                                </td>\r\n                            </ng-container>\r\n                            <ng-container matColumnDef=\"Quantity\" *ngIf=\"showQuantity\">\r\n                                <th mat-header-cell *matHeaderCellDef> {{quantityTweek}} </th>\r\n                                <td mat-cell *matCellDef=\"let element; let i = index\">\r\n                                    <mat-form-field class=\"example-full-width\">\r\n                                        <mat-label>{{quantityTweek}}</mat-label>\r\n                                        <input matInput [formControl]=\"selectedProducts.at(i).get('quantity')\"\r\n                                            type=\"number\" min=\"1\" step=\"1\" (input)=\"onQuantityChange($event, i)\">\r\n                                        <mat-error *ngIf=\"selectedProducts.at(i).get('quantity').hasError('required')\">\r\n                                            This field is required\r\n                                        </mat-error>\r\n                                        <mat-error *ngIf=\"selectedProducts.at(i).get('quantity').hasError('min')\">\r\n                                            Quantity can not be less than 1\r\n                                        </mat-error>\r\n                                        <mat-error *ngIf=\"selectedProducts.at(i).get('quantity').hasError('pattern')\">\r\n                                            Decimals not allowed\r\n                                        </mat-error>\r\n                                    </mat-form-field>\r\n                                </td>\r\n                            </ng-container>\r\n                            <ng-container matColumnDef=\"skuNumber\" *ngIf=\"showSkuNumber\">\r\n                                <th mat-header-cell *matHeaderCellDef> {{skuTweek}} </th>\r\n                                <td mat-cell *matCellDef=\"let element\">{{element?.otherInformation0}} </td>\r\n                            </ng-container>\r\n                            <ng-container matColumnDef=\"inventory\" *ngIf=\"showInventory\">\r\n                                <th mat-header-cell *matHeaderCellDef> {{inventoryTweek}} </th>\r\n                                <td mat-cell *matCellDef=\"let element\">{{element?.otherInformation1}} </td>\r\n                            </ng-container>\r\n\r\n                            <ng-container matColumnDef=\"cost\" *ngIf=\"showCost\">\r\n                                <th mat-header-cell *matHeaderCellDef>{{costTweek}}</th>\r\n                                <td mat-cell *matCellDef=\"let element; let i = index\">\r\n                                    <mat-form-field class=\"example-full-width select-cost\">\r\n                                        <mat-label>{{costTweek}}</mat-label>\r\n                                        <input matInput [formControl]=\"selectedProducts.at(i).get('otherInformation0')\"\r\n                                            (input)=\"applyValidationRule($event, i, 'otherInformation0')\"\r\n                                            (keypress)=\"restrictInput($event, 'otherInformation0')\" (paste)=\"handlePaste($event, 'otherInformation0')\">\r\n                                        <mat-error\r\n                                            *ngIf=\"selectedProducts.at(i).get('otherInformation0').hasError('required')\">\r\n                                            This field is required\r\n                                        </mat-error>\r\n                                    </mat-form-field>\r\n                                </td>\r\n                            </ng-container>\r\n                            <tr mat-header-row *matHeaderRowDef=\"showAllproductsColumns\"></tr>\r\n                            <tr mat-row *matRowDef=\"let row; columns: showAllproductsColumns;\"></tr>\r\n                        </table>\r\n                        <!-- <ng-template #showBlank>\r\n                            <div class=\"no-data-message\">\r\n                                No data found.\r\n                            </div>\r\n                        </ng-template> -->\r\n                        <ng-template #showBlank>\r\n                            <div class=\"no-data-message\">\r\n                                <div class=\"pp-empty-state\">\r\n                                    <div class=\"img-empty-state\">\r\n                                        <img [src]=\"emptyImage\" alt=\"\">\r\n                                    </div>\r\n                                    <h3>No Product added</h3>\r\n                                    <p>Please go back and start adding products</p>\r\n                                </div>\r\n                            </div>\r\n                        </ng-template>\r\n                    </div>\r\n                </form>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</mat-dialog-content>\r\n\r\n<mat-dialog-actions>\r\n    <div class=\"tabs-action-step-one\" *ngIf=\"currentPage === 'select-products'\">\r\n        <div>\r\n            <button mat-button (click)=\"goToNextPage()\" [disabled]=\"selection.selected.length ? false : true\"\r\n                color=\"primary\" mat-raised-button>Edit Selected Products</button>\r\n        </div>\r\n        <div>\r\n            <button mat-button (click)=\"goToNextPage()\" [disabled]=\"selection.selected.length ? false : true\"\r\n                color=\"primary\" mat-raised-button>Next</button>\r\n            <button mat-button [mat-dialog-close]=\"false\">Cancel</button>\r\n        </div>\r\n    </div>\r\n    <div class=\"tabs-action\" *ngIf=\"currentPage === 'edit-save'\">\r\n        <div class=\"tab-action-wrp\">\r\n            <button mat-button (click)=\"goToPreviousPage()\">Back</button>\r\n            <button mat-button type=\"submit\" color=\"primary\" mat-raised-button (click)=\"onSubmit()\">Add/Update</button>\r\n        </div>\r\n    </div>\r\n</mat-dialog-actions>", styles: [".mat-dialog-heading{margin:0 0 20px;position:relative;display:flex;align-items:center}:host ::ng-deep .mat-dialog-title{width:100%;padding:0 40px;margin:0;font-family:Inter,sans-serif;font-size:20px;color:#000;letter-spacing:normal;text-align:center}.mat-dialog-close mat-icon{color:#000}.example-full-width{width:100%}.mat-dialog-content p{margin-bottom:15px;font-family:Inter,sans-serif}.mat-dialog-content a{color:#2196f3}.mat-dialog-content a:hover{text-decoration:none}:host ::ng-deep .mat-dialog-actions{justify-content:flex-end}.mat-stroked-button.mat-primary{color:#0078d6}.OverlayDiv{position:fixed;display:block;width:100%;height:100%;top:0;left:0;right:0;bottom:0;background-color:#00000080;z-index:500;cursor:pointer}.OverlayDivContent{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%)}.basic-search{display:flex;align-items:center;width:100%;margin-bottom:20px}.basic-search-wrp{border:1px solid #DADCE0;border-radius:5px;padding-left:15px;height:46px;display:flex;align-items:center;flex:1;margin-right:20px}.basic-search-wrp mat-icon{color:#0006}.basic-search-wrp form{width:100%}.search-icon{margin:0;display:flex}.search-icon mat-icon{color:#0006}.search-icon svg{width:24px;height:24px}.search-icon svg path{fill:#999}.input-search{margin:0;border:0;width:100%;padding:0 18px 0 10px}.input-search input{border:0;width:100%;font-size:15px;line-height:1}.input-search input:focus{border:0;outline:0 none}.advfilter{display:flex;margin-left:auto}.advfilter button{border:0;background-color:transparent;margin:0;padding:0;display:flex;position:relative}.advfilter button mat-icon{color:#0006}.advfilter button span{font-weight:600;font-size:10px;display:flex;align-items:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;justify-content:center;width:20px;height:20px;color:#fff!important;border-radius:50%;background-color:#f44336!important;position:absolute;top:-5px;right:-10px}.search-btn{margin-left:auto;min-width:137px}.search-btn button{box-shadow:none;height:46px;width:100%}.product-selection-container{border:1px solid #DADCE0;padding:20px;margin-bottom:20px;border-radius:5px}.product-selection-container h5{margin:0;color:#202020!important;font-size:16px!important}.pp-empty-state{max-width:420px;margin:0 auto;padding:50px 0;text-align:center}.img-empty-state{width:100%;margin-bottom:20px}.img-empty-state img{width:100%}.pp-empty-state h3{font-size:20px!important;margin:0 0 5px;padding:0;font-weight:400;color:#202020!important}.pp-empty-state p{font-size:15px!important;margin:0 0 20px!important;padding:0;color:#656667!important}.mat-dialog-content{max-height:none!important;overflow:hidden!important}.tbl-record-found{border-left:1px solid #0000001f;border-right:1px solid #0000001f;border-top:1px solid #0000001f;border-radius:5px 5px 0 0;min-height:104px;max-height:296px;overflow-y:auto;height:100%}.tbl-record-found table{border-collapse:separate}.tbl-record-found tr:last-child td{border-bottom:none}.tbl-record-found thead,.tbl-record-found th{position:-webkit-sticky;position:sticky;top:0;z-index:100;background-color:#fff}.tbl-record-found th.mat-header-cell:first-of-type,.tbl-record-found td.mat-cell:first-of-type,.tbl-record-found td.mat-footer-cell:first-of-type{width:70px}.row-summary{padding:15px 25px;border-left:1px solid #0000001f;border-top:1px solid #0000001f;display:flex;justify-content:space-between;border-right:1px solid #0000001f;border-bottom:1px solid #0000001f;border-radius:0 0 5px 5px}.row-summary div{margin-right:30px}button.delete-btn-picker{background:transparent!important;padding:0!important;min-width:auto!important}button.delete-btn-picker:hover{background:transparent!important}button.delete-btn-picker:hover .mat-button-focus-overlay{opacity:0!important}button.delete-btn-picker mat-icon{color:#f44336!important}mat-icon.icondropdown{line-height:1.6!important}mat-icon.iconclose{line-height:2!important;font-size:120%!important}.added-products{border:1px solid #0000001f;border-bottom:none;border-radius:5px;min-height:133px;max-height:444px;overflow-y:auto;height:100%}.added-products table{border-collapse:separate}.added-products thead,.added-products th{position:-webkit-sticky;position:sticky;top:0;z-index:100;background-color:#fff}.added-products th.mat-header-cell:first-of-type,.added-products td.mat-cell:first-of-type,.added-products td.mat-footer-cell:first-of-type{width:70px}.mat-header-cell{font-weight:500!important;color:#0000008a!important}.clr-all-picker{display:inline-block;border:0;outline:0 none;padding:0;background-color:transparent;color:#2196f3;margin-left:20px}.title-adv{display:flex;align-items:center;margin-bottom:15px}.tabs-action-step-one{display:flex;justify-content:space-between;width:100%}.tbl-record-found td.checkbox-picker-pointer{cursor:pointer!important}.tbl-record-found td{cursor:text!important}.basic-search form{margin:0}@media only screen and (max-width:1545px){.pp-empty-state h3{font-size:18px}.pp-empty-state p{font-size:14px}.pp-empty-state{padding:20px 0;max-width:392px}.product-selection-container h5{font-size:14px;margin-bottom:5px}.product-selection-container{padding:15px 20px}.basic-search{margin-bottom:20px}.mat-dialog-heading{margin-bottom:10px}.mat-dialog-title{font-size:18px}.mat-dialog-content{max-height:60vh!important;overflow:auto!important}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i3$2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$5.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i5$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i10$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i10$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i10$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i10$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i10$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i10$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i10$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i10$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i10$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i10$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i11.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "directive", type: i1$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i14.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i14.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }], animations: [
         trigger('slideDown', [
             state('hidden', style({ height: '0px', opacity: 0, overflow: 'hidden' })),
             state('visible', style({ height: '*', opacity: 1 })),
@@ -4241,7 +4233,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImpor
                                 animate('300ms ease-in')
                             ])
                         ])
-                    ], template: "<div *ngIf=\"spinnerFlag\" class=\"OverlayDiv\">\r\n    <div class=\"OverlayDivContent\">\r\n        <mat-spinner></mat-spinner>\r\n    </div>\r\n</div>\r\n<div class=\"mat-dialog-heading\">\r\n    <h1 mat-dialog-title>Add Products</h1>\r\n</div>\r\n\r\n<mat-dialog-content [ngClass]=\"dataSource?.data?.length > 0 ? 'products-scroll-visible': ''\">\r\n    <div class=\"mat-dialog-content\">\r\n        <!--Search Start-->\r\n        <div class=\"basic-search\" [hidden]=\"currentPage !== 'select-products'\">\r\n            <div class=\"basic-search-wrp\">\r\n                <div class=\"search-icon\">\r\n                    <svg width=\"80\" height=\"80\" viewBox=\"0 0 24 25\" xmlns=\"http://www.w3.org/2000/svg\"\r\n                        transform=\"rotate(0 0 0)\">\r\n                        <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n                            d=\"M11.25 2.75C6.14154 2.75 2 6.89029 2 11.998C2 17.1056 6.14154 21.2459 11.25 21.2459C13.5335 21.2459 15.6238 20.4187 17.2373 19.0475L20.7182 22.5287C21.011 22.8216 21.4859 22.8217 21.7788 22.5288C22.0717 22.2359 22.0718 21.761 21.7789 21.4681L18.2983 17.9872C19.6714 16.3736 20.5 14.2826 20.5 11.998C20.5 6.89029 16.3585 2.75 11.25 2.75ZM3.5 11.998C3.5 7.71905 6.96962 4.25 11.25 4.25C15.5304 4.25 19 7.71905 19 11.998C19 16.2769 15.5304 19.7459 11.25 19.7459C6.96962 19.7459 3.5 16.2769 3.5 11.998Z\" />\r\n                    </svg>\r\n                </div>\r\n                <form [formGroup]=\"form\">\r\n                    <div class=\"input-search\">\r\n                        <input (keydown.enter)=\"handleDropdownFilter(); $event.stopPropagation()\" type=\"text\" matInput\r\n                            placeholder=\"Search Product\" formControlName=\"searchProductName\"\r\n                            (input)=\"clearIfEmpty($event)\">\r\n                    </div>\r\n                </form>\r\n                <!-- <div class=\"advfilter\">\r\n                    <button class=\"adv\" (click)=\"toggleSection();$event.stopPropagation();\">\r\n                        <mat-icon class=\"material-icons-round\" aria-hidden=\"false\"\r\n                            aria-label=\"tune\">tune\r\n                        </mat-icon>\r\n                        <span *ngIf=\"activeFiltersCount > 0\" class=\"custom-badge\">{{ activeFiltersCount }}</span>\r\n                    </button>\r\n                </div> -->\r\n            </div>\r\n            <div class=\"search-btn\">\r\n                <button mat-raised-button color=\"primary\"\r\n                    (click)=\"handleDropdownFilter();$event.stopPropagation();\">Search</button>\r\n            </div>\r\n        </div>\r\n        <!--Search End-->\r\n        <div class=\"product-selector\">\r\n            <div [hidden]=\"currentPage !== 'select-products'\">\r\n                <form [formGroup]=\"form\">\r\n                    <div class=\"product-selection-container\" *ngIf=\"isVisible && dropdownL1\">\r\n                        <div class=\"dropdown-selection\" *ngIf=\"dropdownL1\">\r\n                            <div [ngClass]=\"dropDownCount === 1 ? 'no-child': 'child'\">\r\n                                <div class=\"title-adv\">\r\n                                    <h5>Advanced Filters</h5>\r\n                                    <button class=\"clr-all-picker\" type=\"button\" (click)=\"resetTable()\"\r\n                                        *ngIf=\"activeFiltersCount > 0\">Clear All</button>\r\n                                </div>\r\n                                <div class=\"row\">\r\n                                    <div class=\"col-lg-6\">\r\n                                        <div class=\"example-full-width\">\r\n                                            <mat-form-field *ngIf=\"dropdownL1\" class=\"example-full-width\">\r\n                                                <mat-label>{{dropdownL1Label}}</mat-label>\r\n                                                <input type=\"text\" matInput formControlName=\"dropdownLevel1\"\r\n                                                    [matAutocomplete]=\"auto3\"\r\n                                                    (input)=\"onInputChange($event, 'category1')\">\r\n                                                <mat-autocomplete [displayWith]=\"displayFn\" #auto3=\"matAutocomplete\"\r\n                                                    (optionSelected)=\"onOptionSelected($event, 'category1')\">\r\n                                                    <mat-option *ngFor=\"let option of filteredDropdownOne\"\r\n                                                        [value]=\"option\">{{option.name}}</mat-option>\r\n                                                </mat-autocomplete>\r\n                                                <mat-icon matSuffix *ngIf=\"form.get('dropdownLevel1').value\"\r\n                                                    (click)=\"clearField('dropdownLevel1', 'category1', $event)\"\r\n                                                    class=\"iconclose\">close</mat-icon>\r\n                                                <mat-icon class=\"icondropdown\" matSuffix>arrow_drop_down</mat-icon>\r\n                                            </mat-form-field>\r\n                                        </div>\r\n                                    </div>\r\n                                    <div class=\"col-lg-6\">\r\n                                        <div class=\"example-full-width\">\r\n                                            <mat-form-field *ngIf=\"dropdownL2\" class=\"example-full-width\">\r\n                                                <mat-label>{{dropdownL2Label}}</mat-label>\r\n                                                <input type=\"text\" matInput formControlName=\"dropdownLevel2\"\r\n                                                    [matAutocomplete]=\"auto4\"\r\n                                                    (input)=\"onInputChange($event, 'category2')\">\r\n                                                <mat-autocomplete [displayWith]=\"displayFn\" #auto4=\"matAutocomplete\"\r\n                                                    (optionSelected)=\"onOptionSelected($event, 'category2')\">\r\n                                                    <mat-option *ngFor=\"let option of filteredDropdownTwo\"\r\n                                                        [value]=\"option\">{{option.name}}</mat-option>\r\n                                                </mat-autocomplete>\r\n                                                <mat-icon matSuffix *ngIf=\"form.get('dropdownLevel2').value\"\r\n                                                    (click)=\"clearField('dropdownLevel2', 'category2', $event)\"\r\n                                                    class=\"iconclose\">close</mat-icon>\r\n                                                <mat-icon class=\"icondropdown\" matSuffix\r\n                                                    [ngClass]=\"{'disabled-icon': isDisabled2}\">arrow_drop_down</mat-icon>\r\n                                            </mat-form-field>\r\n                                        </div>\r\n                                    </div>\r\n\r\n                                    <div class=\"col-lg-6\">\r\n                                        <div class=\"example-full-width\">\r\n                                            <mat-form-field *ngIf=\"dropdownL3\" class=\"example-full-width\">\r\n                                                <mat-label>{{dropdownL3Label}}</mat-label>\r\n                                                <input type=\"text\" matInput formControlName=\"dropdownLevel3\"\r\n                                                    [matAutocomplete]=\"auto5\"\r\n                                                    (input)=\"onInputChange($event, 'category3')\">\r\n                                                <mat-autocomplete [displayWith]=\"displayFn\" #auto5=\"matAutocomplete\"\r\n                                                    (optionSelected)=\"onOptionSelected($event, 'category3')\">\r\n                                                    <mat-option *ngFor=\"let option of filteredDropdownThree\"\r\n                                                        [value]=\"option\">{{option.name}}</mat-option>\r\n                                                </mat-autocomplete>\r\n                                                <mat-icon matSuffix *ngIf=\"form.get('dropdownLevel3').value\"\r\n                                                    (click)=\"clearField('dropdownLevel3', 'category3', $event)\"\r\n                                                    class=\"iconclose\">close</mat-icon>\r\n                                                <mat-icon class=\"icondropdown\" matSuffix\r\n                                                    [ngClass]=\"{'disable-icon': isDisabled3}\">arrow_drop_down</mat-icon>\r\n                                            </mat-form-field>\r\n                                        </div>\r\n                                    </div>\r\n                                    <div class=\"col-lg-6\">\r\n                                        <div class=\"example-full-width\">\r\n                                            <mat-form-field *ngIf=\"dropdownL4\" class=\"example-full-width\">\r\n                                                <mat-label>{{dropdownL4Label}}</mat-label>\r\n                                                <input type=\"text\" matInput formControlName=\"dropdownLevel4\"\r\n                                                    [matAutocomplete]=\"auto6\"\r\n                                                    (input)=\"onInputChange($event, 'category4')\">\r\n                                                <mat-autocomplete [displayWith]=\"displayFn\" #auto6=\"matAutocomplete\"\r\n                                                    (optionSelected)=\"onOptionSelected($event, 'category4')\">\r\n                                                    <mat-option *ngFor=\"let option of filteredDropdownFour\"\r\n                                                        [value]=\"option\">{{option.name}}</mat-option>\r\n                                                </mat-autocomplete>\r\n                                                <mat-icon matSuffix *ngIf=\"form.get('dropdownLevel4').value\"\r\n                                                    (click)=\"clearField('dropdownLevel4', 'category4', $event)\"\r\n                                                    class=\"iconclose\">close</mat-icon>\r\n                                                <mat-icon class=\"icondropdown\" matSuffix\r\n                                                    [ngClass]=\"{'disable-icon': isDisabled4}\">arrow_drop_down</mat-icon>\r\n                                            </mat-form-field>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div #firstscrollableDiv id=\"firstscrollableDiv\" class=\"new-class first-div\"\r\n                        (scroll)=\"onScroll($event)\" [ngClass]=\"dataSource?.data?.length > 0 ? 'tbl-record-found': ''\">\r\n                        <table mat-table [dataSource]=\"dataSource\" class=\"mat-table abc\"\r\n                            *ngIf=\"dataSource && dataSource?.data?.length > 0; else noData\">\r\n                            <ng-container matColumnDef=\"select\">\r\n                                <th mat-header-cell *matHeaderCellDef>\r\n                                </th>\r\n                                <td mat-cell *matCellDef=\"let row\" class=\"checkbox-picker-pointer\">\r\n                                    <mat-checkbox color=\"primary\" (click)=\"$event.stopPropagation()\"\r\n                                        (change)=\"$event ? toggleSelection(row) : null\"\r\n                                        [checked]=\"selection.isSelected(row)\"></mat-checkbox>\r\n                                </td>\r\n                            </ng-container>\r\n                            <ng-container matColumnDef=\"productName\">\r\n                                <th mat-header-cell *matHeaderCellDef> {{productTweek}} </th>\r\n                                <td mat-cell *matCellDef=\"let element\"> {{element?.text}} </td>\r\n                            </ng-container>\r\n                            <ng-container matColumnDef=\"skuNumber\" *ngIf=\"showSkuNumber\">\r\n                                <th mat-header-cell *matHeaderCellDef> {{skuTweek}} </th>\r\n                                <td mat-cell *matCellDef=\"let element\"> {{element?.otherInformation0}} </td>\r\n                            </ng-container>\r\n                            <ng-container matColumnDef=\"inventory\" *ngIf=\"showInventory\">\r\n                                <th mat-header-cell *matHeaderCellDef> {{inventoryTweek}} </th>\r\n                                <td mat-cell *matCellDef=\"let element\"> {{element?.otherInformation1}} </td>\r\n                            </ng-container>\r\n                            <tr mat-header-row *matHeaderRowDef=\"addProductsColumns\"></tr>\r\n                            <tr mat-row *matRowDef=\"let row; columns: addProductsColumns;\"\r\n                                [class.selected]=\"selection.isSelected(row)\"></tr>\r\n                        </table>\r\n                        <ng-template #noData>\r\n                            <div class=\"no-data-message\">\r\n                                <!--No data found.-->\r\n                                <div class=\"pp-empty-state\">\r\n                                    <div class=\"img-empty-state\">\r\n                                        <img [src]=\"emptyImage\" alt=\"\">\r\n                                    </div>\r\n                                    <h3>No records to show at the moment</h3>\r\n                                    <p>Please modify your search criteria to find the desired result</p>\r\n                                </div>\r\n\r\n                            </div>\r\n                        </ng-template>\r\n                    </div>\r\n                    <div class=\"row-summary\" *ngIf=\"dataSource && dataSource?.data?.length > 0\">\r\n                        <div>Selected: <strong>{{ getSelectedRowsCount() }}</strong> </div>\r\n                        <div>Total Records: <strong>{{ getTotalRecords }}</strong></div>\r\n                    </div>\r\n                </form>\r\n            </div>\r\n\r\n            <div [hidden]=\"currentPage !== 'edit-save'\">\r\n                <form [formGroup]=\"form\">\r\n                    <div class=\"new-class\"\r\n                        [ngClass]=\"selectedDataSource && selectedDataSource.data.length > 0 ? 'added-products': ''\">\r\n                        <table mat-table [dataSource]=\"selectedDataSource\"\r\n                            *ngIf=\"selectedDataSource && selectedDataSource.data.length > 0; else showBlank\">\r\n                            <ng-container matColumnDef=\"delete\">\r\n                                <th mat-header-cell *matHeaderCellDef></th>\r\n                                <td mat-cell *matCellDef=\"let element\">\r\n                                    <button class=\"delete-btn-picker\" mat-button\r\n                                        (click)=\"$event.stopPropagation();removeRow($event, element)\">\r\n                                        <mat-icon aria-hidden=\"false\" aria-label=\"Remove row\">delete</mat-icon>\r\n                                    </button>\r\n                                </td>\r\n                            </ng-container>\r\n                            <ng-container matColumnDef=\"productName\">\r\n                                <th mat-header-cell *matHeaderCellDef> {{productTweek}} </th>\r\n                                <td mat-cell *matCellDef=\"let element\"> {{element.text}} </td>\r\n                            </ng-container>\r\n                            <ng-container matColumnDef=\"categoryName\" *ngIf=\"showCategory\">\r\n                                <th mat-header-cell *matHeaderCellDef> {{categoryTweek}} </th>\r\n                                <td mat-cell *matCellDef=\"let element\"> {{element.category}} </td>\r\n                            </ng-container>\r\n                            <ng-container matColumnDef=\"subCategory\" *ngIf=\"showSubcategory\">\r\n                                <th mat-header-cell *matHeaderCellDef> {{subCategoryTweek}} </th>\r\n                                <td mat-cell *matCellDef=\"let element\"> {{element.subCategory}} </td>\r\n                            </ng-container>\r\n                            <ng-container matColumnDef=\"price\" *ngIf=\"showPrice\">\r\n                                <th mat-header-cell *matHeaderCellDef>{{priceTweek}}</th>\r\n                                <td mat-cell *matCellDef=\"let element; let i = index\">\r\n                                    <mat-form-field class=\"example-full-width select-price\">\r\n                                        <mat-label>{{priceTweek}}</mat-label>\r\n                                        <input matInput [formControl]=\"selectedProducts.at(i).get('price')\"\r\n                                            (input)=\"applyValidationRule($event, i, 'price')\"\r\n                                            (keypress)=\"restrictInput($event, '')\" (paste)=\"handlePaste($event, '')\">\r\n                                        <mat-error *ngIf=\"selectedProducts.at(i).get('price').hasError('required')\">\r\n                                            This field is required\r\n                                        </mat-error>\r\n                                    </mat-form-field>\r\n                                </td>\r\n                            </ng-container>\r\n                            <ng-container matColumnDef=\"Quantity\" *ngIf=\"showQuantity\">\r\n                                <th mat-header-cell *matHeaderCellDef> {{quantityTweek}} </th>\r\n                                <td mat-cell *matCellDef=\"let element; let i = index\">\r\n                                    <mat-form-field class=\"example-full-width\">\r\n                                        <mat-label>{{quantityTweek}}</mat-label>\r\n                                        <input matInput [formControl]=\"selectedProducts.at(i).get('quantity')\"\r\n                                            type=\"number\" min=\"1\" step=\"1\" (input)=\"onQuantityChange($event, i)\">\r\n                                        <mat-error *ngIf=\"selectedProducts.at(i).get('quantity').hasError('required')\">\r\n                                            This field is required\r\n                                        </mat-error>\r\n                                        <mat-error *ngIf=\"selectedProducts.at(i).get('quantity').hasError('min')\">\r\n                                            Quantity can not be less than 1\r\n                                        </mat-error>\r\n                                        <mat-error *ngIf=\"selectedProducts.at(i).get('quantity').hasError('pattern')\">\r\n                                            Decimals not allowed\r\n                                        </mat-error>\r\n                                    </mat-form-field>\r\n                                </td>\r\n                            </ng-container>\r\n                            <ng-container matColumnDef=\"skuNumber\" *ngIf=\"showSkuNumber\">\r\n                                <th mat-header-cell *matHeaderCellDef> {{skuTweek}} </th>\r\n                                <td mat-cell *matCellDef=\"let element\">{{element?.otherInformation0}} </td>\r\n                            </ng-container>\r\n                            <ng-container matColumnDef=\"inventory\" *ngIf=\"showInventory\">\r\n                                <th mat-header-cell *matHeaderCellDef> {{inventoryTweek}} </th>\r\n                                <td mat-cell *matCellDef=\"let element\">{{element?.otherInformation1}} </td>\r\n                            </ng-container>\r\n\r\n                            <ng-container matColumnDef=\"cost\" *ngIf=\"showCost\">\r\n                                <th mat-header-cell *matHeaderCellDef>{{costTweek}}</th>\r\n                                <td mat-cell *matCellDef=\"let element; let i = index\">\r\n                                    <mat-form-field class=\"example-full-width select-cost\">\r\n                                        <mat-label>{{costTweek}}</mat-label>\r\n                                        <input matInput [formControl]=\"selectedProducts.at(i).get('otherInformation0')\"\r\n                                            (input)=\"applyValidationRule($event, i, 'otherInformation0')\"\r\n                                            (keypress)=\"restrictInput($event, 'otherInformation0')\" (paste)=\"handlePaste($event, 'otherInformation0')\">\r\n                                        <mat-error\r\n                                            *ngIf=\"selectedProducts.at(i).get('otherInformation0').hasError('required')\">\r\n                                            This field is required\r\n                                        </mat-error>\r\n                                    </mat-form-field>\r\n                                </td>\r\n                            </ng-container>\r\n                            <tr mat-header-row *matHeaderRowDef=\"showAllproductsColumns\"></tr>\r\n                            <tr mat-row *matRowDef=\"let row; columns: showAllproductsColumns;\"></tr>\r\n                        </table>\r\n                        <!-- <ng-template #showBlank>\r\n                            <div class=\"no-data-message\">\r\n                                No data found.\r\n                            </div>\r\n                        </ng-template> -->\r\n                        <ng-template #showBlank>\r\n                            <div class=\"no-data-message\">\r\n                                <div class=\"pp-empty-state\">\r\n                                    <div class=\"img-empty-state\">\r\n                                        <img [src]=\"emptyImage\" alt=\"\">\r\n                                    </div>\r\n                                    <h3>No Product added</h3>\r\n                                    <p>Please go back and start adding products</p>\r\n                                </div>\r\n                            </div>\r\n                        </ng-template>\r\n                    </div>\r\n                </form>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</mat-dialog-content>\r\n\r\n<mat-dialog-actions>\r\n    <div class=\"tabs-action-step-one\" *ngIf=\"currentPage === 'select-products'\">\r\n        <div>\r\n            <button mat-button (click)=\"goToNextPage()\" [disabled]=\"selection.selected.length ? false : true\"\r\n                color=\"primary\" mat-raised-button>Edit Selected Products</button>\r\n        </div>\r\n        <div>\r\n            <button mat-button (click)=\"goToNextPage()\" [disabled]=\"selection.selected.length ? false : true\"\r\n                color=\"primary\" mat-raised-button>Next</button>\r\n            <button mat-button [mat-dialog-close]=\"false\">Cancel</button>\r\n        </div>\r\n    </div>\r\n    <div class=\"tabs-action\" *ngIf=\"currentPage === 'edit-save'\">\r\n        <div class=\"tab-action-wrp\">\r\n            <button mat-button (click)=\"goToPreviousPage()\">Back</button>\r\n            <button mat-button type=\"submit\" color=\"primary\" mat-raised-button (click)=\"onSubmit()\">Add/Update</button>\r\n        </div>\r\n    </div>\r\n</mat-dialog-actions>", styles: [".mat-dialog-heading{margin:0 0 20px;position:relative;display:flex;align-items:center}:host ::ng-deep .mat-dialog-title{width:100%;padding:0 40px;margin:0;font-family:Inter,sans-serif;font-size:20px;color:#000;letter-spacing:normal;text-align:center}.mat-dialog-close mat-icon{color:#000}.example-full-width{width:100%}.mat-dialog-content p{margin-bottom:15px;font-family:Inter,sans-serif}.mat-dialog-content a{color:#2196f3}.mat-dialog-content a:hover{text-decoration:none}:host ::ng-deep .mat-dialog-actions{justify-content:flex-end}.mat-stroked-button.mat-primary{color:#0078d6}.OverlayDiv{position:fixed;display:block;width:100%;height:100%;top:0;left:0;right:0;bottom:0;background-color:#00000080;z-index:500;cursor:pointer}.OverlayDivContent{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%)}.basic-search{display:flex;align-items:center;width:100%;margin-bottom:20px}.basic-search-wrp{border:1px solid #DADCE0;border-radius:5px;padding-left:15px;height:46px;display:flex;align-items:center;flex:1;margin-right:20px}.basic-search-wrp mat-icon{color:#0006}.basic-search-wrp form{width:100%}.search-icon{margin:0;display:flex}.search-icon mat-icon{color:#0006}.search-icon svg{width:24px;height:24px}.search-icon svg path{fill:#999}.input-search{margin:0;border:0;width:100%;padding:0 18px 0 10px}.input-search input{border:0;width:100%;font-size:15px;line-height:1}.input-search input:focus{border:0;outline:0 none}.advfilter{display:flex;margin-left:auto}.advfilter button{border:0;background-color:transparent;margin:0;padding:0;display:flex;position:relative}.advfilter button mat-icon{color:#0006}.advfilter button span{font-weight:600;font-size:10px;display:flex;align-items:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;justify-content:center;width:20px;height:20px;color:#fff!important;border-radius:50%;background-color:#f44336!important;position:absolute;top:-5px;right:-10px}.search-btn{margin-left:auto;min-width:137px}.search-btn button{box-shadow:none;height:46px;width:100%}.product-selection-container{border:1px solid #DADCE0;padding:20px;margin-bottom:20px;border-radius:5px}.product-selection-container h5{margin:0;color:#202020!important;font-size:16px!important}.pp-empty-state{max-width:420px;margin:0 auto;padding:50px 0;text-align:center}.img-empty-state{width:100%;margin-bottom:20px}.img-empty-state img{width:100%}.pp-empty-state h3{font-size:20px!important;margin:0 0 5px;padding:0;font-weight:400;color:#202020!important}.pp-empty-state p{font-size:15px!important;margin:0 0 20px!important;padding:0;color:#656667!important}.mat-dialog-content{max-height:none!important;overflow:hidden!important}.tbl-record-found{border-left:1px solid #0000001f;border-right:1px solid #0000001f;border-top:1px solid #0000001f;border-radius:5px 5px 0 0;min-height:104px;max-height:296px;overflow-y:auto;height:100%}.tbl-record-found table{border-collapse:separate}.tbl-record-found tr:last-child td{border-bottom:none}.tbl-record-found thead,.tbl-record-found th{position:-webkit-sticky;position:sticky;top:0;z-index:100;background-color:#fff}.tbl-record-found th.mat-header-cell:first-of-type,.tbl-record-found td.mat-cell:first-of-type,.tbl-record-found td.mat-footer-cell:first-of-type{width:70px}.row-summary{padding:15px 25px;border-left:1px solid #0000001f;border-top:1px solid #0000001f;display:flex;justify-content:space-between;border-right:1px solid #0000001f;border-bottom:1px solid #0000001f;border-radius:0 0 5px 5px}.row-summary div{margin-right:30px}button.delete-btn-picker{background:transparent!important;padding:0!important;min-width:auto!important}button.delete-btn-picker:hover{background:transparent!important}button.delete-btn-picker:hover .mat-button-focus-overlay{opacity:0!important}button.delete-btn-picker mat-icon{color:#f44336!important}mat-icon.icondropdown{line-height:1.6!important}mat-icon.iconclose{line-height:2!important;font-size:120%!important}.added-products{border:1px solid #0000001f;border-bottom:none;border-radius:5px;min-height:133px;max-height:444px;overflow-y:auto;height:100%}.added-products table{border-collapse:separate}.added-products thead,.added-products th{position:-webkit-sticky;position:sticky;top:0;z-index:100;background-color:#fff}.added-products th.mat-header-cell:first-of-type,.added-products td.mat-cell:first-of-type,.added-products td.mat-footer-cell:first-of-type{width:70px}.mat-header-cell{font-weight:500!important;color:#0000008a!important}.clr-all-picker{display:inline-block;border:0;outline:0 none;padding:0;background-color:transparent;color:#2196f3;margin-left:20px}.title-adv{display:flex;align-items:center;margin-bottom:15px}.tabs-action-step-one{display:flex;justify-content:space-between;width:100%}.tbl-record-found td.checkbox-picker-pointer{cursor:pointer!important}.tbl-record-found td{cursor:text!important}@media only screen and (max-width:1545px){.pp-empty-state h3{font-size:18px}.pp-empty-state p{font-size:14px}.pp-empty-state{padding:20px 0;max-width:392px}.product-selection-container h5{font-size:14px;margin-bottom:5px}.product-selection-container{padding:15px 20px}.basic-search{margin-bottom:20px}.mat-dialog-heading{margin-bottom:10px}.mat-dialog-title{font-size:18px}.mat-dialog-content{max-height:60vh!important;overflow:auto!important}}\n"] }]
+                    ], template: "<div *ngIf=\"spinnerFlag\" class=\"OverlayDiv\">\r\n    <div class=\"OverlayDivContent\">\r\n        <mat-spinner></mat-spinner>\r\n    </div>\r\n</div>\r\n<div class=\"mat-dialog-heading\">\r\n    <h1 mat-dialog-title>Add Products</h1>\r\n</div>\r\n\r\n<mat-dialog-content [ngClass]=\"dataSource?.data?.length > 0 ? 'products-scroll-visible': ''\">\r\n    <div class=\"mat-dialog-content\">\r\n        <!--Search Start-->\r\n        <div class=\"basic-search\" [hidden]=\"currentPage !== 'select-products'\">\r\n            <div class=\"basic-search-wrp\">\r\n                <div class=\"search-icon\">\r\n                    <svg width=\"80\" height=\"80\" viewBox=\"0 0 24 25\" xmlns=\"http://www.w3.org/2000/svg\"\r\n                        transform=\"rotate(0 0 0)\">\r\n                        <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n                            d=\"M11.25 2.75C6.14154 2.75 2 6.89029 2 11.998C2 17.1056 6.14154 21.2459 11.25 21.2459C13.5335 21.2459 15.6238 20.4187 17.2373 19.0475L20.7182 22.5287C21.011 22.8216 21.4859 22.8217 21.7788 22.5288C22.0717 22.2359 22.0718 21.761 21.7789 21.4681L18.2983 17.9872C19.6714 16.3736 20.5 14.2826 20.5 11.998C20.5 6.89029 16.3585 2.75 11.25 2.75ZM3.5 11.998C3.5 7.71905 6.96962 4.25 11.25 4.25C15.5304 4.25 19 7.71905 19 11.998C19 16.2769 15.5304 19.7459 11.25 19.7459C6.96962 19.7459 3.5 16.2769 3.5 11.998Z\" />\r\n                    </svg>\r\n                </div>\r\n                <form [formGroup]=\"form\">\r\n                    <div class=\"input-search\">\r\n                        <input (keydown.enter)=\"handleDropdownFilter(); $event.stopPropagation()\" type=\"text\" matInput\r\n                            placeholder=\"Search Product\" formControlName=\"searchProductName\"\r\n                            (input)=\"clearIfEmpty($event)\">\r\n                    </div>\r\n                </form>\r\n                <!-- <div class=\"advfilter\">\r\n                    <button class=\"adv\" (click)=\"toggleSection();$event.stopPropagation();\">\r\n                        <mat-icon class=\"material-icons-round\" aria-hidden=\"false\"\r\n                            aria-label=\"tune\">tune\r\n                        </mat-icon>\r\n                        <span *ngIf=\"activeFiltersCount > 0\" class=\"custom-badge\">{{ activeFiltersCount }}</span>\r\n                    </button>\r\n                </div> -->\r\n            </div>\r\n            <div class=\"search-btn\">\r\n                <button mat-raised-button color=\"primary\"\r\n                    (click)=\"handleDropdownFilter();$event.stopPropagation();\">Search</button>\r\n            </div>\r\n        </div>\r\n        <!--Search End-->\r\n        <div class=\"product-selector\">\r\n            <div [hidden]=\"currentPage !== 'select-products'\">\r\n                <form [formGroup]=\"form\">\r\n                    <div class=\"product-selection-container\" *ngIf=\"isVisible && dropdownL1\">\r\n                        <div class=\"dropdown-selection\" *ngIf=\"dropdownL1\">\r\n                            <div [ngClass]=\"dropDownCount === 1 ? 'no-child': 'child'\">\r\n                                <div class=\"title-adv\">\r\n                                    <h5>Advanced Filters</h5>\r\n                                    <button class=\"clr-all-picker\" type=\"button\" (click)=\"resetTable()\"\r\n                                        *ngIf=\"activeFiltersCount > 0\">Clear All</button>\r\n                                </div>\r\n                                <div class=\"row\">\r\n                                    <div class=\"col-lg-6\">\r\n                                        <div class=\"example-full-width\">\r\n                                            <mat-form-field *ngIf=\"dropdownL1\" class=\"example-full-width\">\r\n                                                <mat-label>{{dropdownL1Label}}</mat-label>\r\n                                                <input type=\"text\" matInput formControlName=\"dropdownLevel1\"\r\n                                                    [matAutocomplete]=\"auto3\"\r\n                                                    (input)=\"onInputChange($event, 'category1')\">\r\n                                                <mat-autocomplete [displayWith]=\"displayFn\" #auto3=\"matAutocomplete\"\r\n                                                    (optionSelected)=\"onOptionSelected($event, 'category1')\">\r\n                                                    <mat-option *ngFor=\"let option of filteredDropdownOne\"\r\n                                                        [value]=\"option\">{{option.name}}</mat-option>\r\n                                                </mat-autocomplete>\r\n                                                <mat-icon matSuffix *ngIf=\"form.get('dropdownLevel1').value\"\r\n                                                    (click)=\"clearField('dropdownLevel1', 'category1', $event)\"\r\n                                                    class=\"iconclose\">close</mat-icon>\r\n                                                <mat-icon class=\"icondropdown\" matSuffix>arrow_drop_down</mat-icon>\r\n                                            </mat-form-field>\r\n                                        </div>\r\n                                    </div>\r\n                                    <div class=\"col-lg-6\">\r\n                                        <div class=\"example-full-width\">\r\n                                            <mat-form-field *ngIf=\"dropdownL2\" class=\"example-full-width\">\r\n                                                <mat-label>{{dropdownL2Label}}</mat-label>\r\n                                                <input type=\"text\" matInput formControlName=\"dropdownLevel2\"\r\n                                                    [matAutocomplete]=\"auto4\"\r\n                                                    (input)=\"onInputChange($event, 'category2')\">\r\n                                                <mat-autocomplete [displayWith]=\"displayFn\" #auto4=\"matAutocomplete\"\r\n                                                    (optionSelected)=\"onOptionSelected($event, 'category2')\">\r\n                                                    <mat-option *ngFor=\"let option of filteredDropdownTwo\"\r\n                                                        [value]=\"option\">{{option.name}}</mat-option>\r\n                                                </mat-autocomplete>\r\n                                                <mat-icon matSuffix *ngIf=\"form.get('dropdownLevel2').value\"\r\n                                                    (click)=\"clearField('dropdownLevel2', 'category2', $event)\"\r\n                                                    class=\"iconclose\">close</mat-icon>\r\n                                                <mat-icon class=\"icondropdown\" matSuffix\r\n                                                    [ngClass]=\"{'disabled-icon': isDisabled2}\">arrow_drop_down</mat-icon>\r\n                                            </mat-form-field>\r\n                                        </div>\r\n                                    </div>\r\n\r\n                                    <div class=\"col-lg-6\">\r\n                                        <div class=\"example-full-width\">\r\n                                            <mat-form-field *ngIf=\"dropdownL3\" class=\"example-full-width\">\r\n                                                <mat-label>{{dropdownL3Label}}</mat-label>\r\n                                                <input type=\"text\" matInput formControlName=\"dropdownLevel3\"\r\n                                                    [matAutocomplete]=\"auto5\"\r\n                                                    (input)=\"onInputChange($event, 'category3')\">\r\n                                                <mat-autocomplete [displayWith]=\"displayFn\" #auto5=\"matAutocomplete\"\r\n                                                    (optionSelected)=\"onOptionSelected($event, 'category3')\">\r\n                                                    <mat-option *ngFor=\"let option of filteredDropdownThree\"\r\n                                                        [value]=\"option\">{{option.name}}</mat-option>\r\n                                                </mat-autocomplete>\r\n                                                <mat-icon matSuffix *ngIf=\"form.get('dropdownLevel3').value\"\r\n                                                    (click)=\"clearField('dropdownLevel3', 'category3', $event)\"\r\n                                                    class=\"iconclose\">close</mat-icon>\r\n                                                <mat-icon class=\"icondropdown\" matSuffix\r\n                                                    [ngClass]=\"{'disable-icon': isDisabled3}\">arrow_drop_down</mat-icon>\r\n                                            </mat-form-field>\r\n                                        </div>\r\n                                    </div>\r\n                                    <div class=\"col-lg-6\">\r\n                                        <div class=\"example-full-width\">\r\n                                            <mat-form-field *ngIf=\"dropdownL4\" class=\"example-full-width\">\r\n                                                <mat-label>{{dropdownL4Label}}</mat-label>\r\n                                                <input type=\"text\" matInput formControlName=\"dropdownLevel4\"\r\n                                                    [matAutocomplete]=\"auto6\"\r\n                                                    (input)=\"onInputChange($event, 'category4')\">\r\n                                                <mat-autocomplete [displayWith]=\"displayFn\" #auto6=\"matAutocomplete\"\r\n                                                    (optionSelected)=\"onOptionSelected($event, 'category4')\">\r\n                                                    <mat-option *ngFor=\"let option of filteredDropdownFour\"\r\n                                                        [value]=\"option\">{{option.name}}</mat-option>\r\n                                                </mat-autocomplete>\r\n                                                <mat-icon matSuffix *ngIf=\"form.get('dropdownLevel4').value\"\r\n                                                    (click)=\"clearField('dropdownLevel4', 'category4', $event)\"\r\n                                                    class=\"iconclose\">close</mat-icon>\r\n                                                <mat-icon class=\"icondropdown\" matSuffix\r\n                                                    [ngClass]=\"{'disable-icon': isDisabled4}\">arrow_drop_down</mat-icon>\r\n                                            </mat-form-field>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div #firstscrollableDiv id=\"firstscrollableDiv\" class=\"new-class first-div\"\r\n                        (scroll)=\"onScroll($event)\" [ngClass]=\"dataSource?.data?.length > 0 ? 'tbl-record-found': ''\">\r\n                        <table mat-table [dataSource]=\"dataSource\" class=\"mat-table abc\"\r\n                            *ngIf=\"dataSource && dataSource?.data?.length > 0; else noData\">\r\n                            <ng-container matColumnDef=\"select\">\r\n                                <th mat-header-cell *matHeaderCellDef>\r\n                                </th>\r\n                                <td mat-cell *matCellDef=\"let row\" class=\"checkbox-picker-pointer\">\r\n                                    <mat-checkbox color=\"primary\" (click)=\"$event.stopPropagation()\"\r\n                                        (change)=\"$event ? toggleSelection(row) : null\"\r\n                                        [checked]=\"selection.isSelected(row)\"></mat-checkbox>\r\n                                </td>\r\n                            </ng-container>\r\n                            <ng-container matColumnDef=\"productName\">\r\n                                <th mat-header-cell *matHeaderCellDef> {{productTweek}} </th>\r\n                                <td mat-cell *matCellDef=\"let element\"> {{element?.text}} </td>\r\n                            </ng-container>\r\n                            <ng-container matColumnDef=\"skuNumber\" *ngIf=\"showSkuNumber\">\r\n                                <th mat-header-cell *matHeaderCellDef> {{skuTweek}} </th>\r\n                                <td mat-cell *matCellDef=\"let element\"> {{element?.otherInformation0}} </td>\r\n                            </ng-container>\r\n                            <ng-container matColumnDef=\"inventory\" *ngIf=\"showInventory\">\r\n                                <th mat-header-cell *matHeaderCellDef> {{inventoryTweek}} </th>\r\n                                <td mat-cell *matCellDef=\"let element\"> {{element?.otherInformation1}} </td>\r\n                            </ng-container>\r\n                            <tr mat-header-row *matHeaderRowDef=\"addProductsColumns\"></tr>\r\n                            <tr mat-row *matRowDef=\"let row; columns: addProductsColumns;\"\r\n                                [class.selected]=\"selection.isSelected(row)\"></tr>\r\n                        </table>\r\n                        <ng-template #noData>\r\n                            <div class=\"no-data-message\">\r\n                                <!--No data found.-->\r\n                                <div class=\"pp-empty-state\">\r\n                                    <div class=\"img-empty-state\">\r\n                                        <img [src]=\"emptyImage\" alt=\"\">\r\n                                    </div>\r\n                                    <h3>No records to show at the moment</h3>\r\n                                    <p>Please modify your search criteria to find the desired result</p>\r\n                                </div>\r\n\r\n                            </div>\r\n                        </ng-template>\r\n                    </div>\r\n                    <div class=\"row-summary\" *ngIf=\"dataSource && dataSource?.data?.length > 0\">\r\n                        <div>Selected: <strong>{{ getSelectedRowsCount() }}</strong> </div>\r\n                        <div>Total Records: <strong>{{ getTotalRecords }}</strong></div>\r\n                    </div>\r\n                </form>\r\n            </div>\r\n\r\n            <div [hidden]=\"currentPage !== 'edit-save'\">\r\n                <form [formGroup]=\"form\">\r\n                    <div class=\"new-class\"\r\n                        [ngClass]=\"selectedDataSource && selectedDataSource.data.length > 0 ? 'added-products': ''\">\r\n                        <table mat-table [dataSource]=\"selectedDataSource\"\r\n                            *ngIf=\"selectedDataSource && selectedDataSource.data.length > 0; else showBlank\">\r\n                            <ng-container matColumnDef=\"delete\">\r\n                                <th mat-header-cell *matHeaderCellDef></th>\r\n                                <td mat-cell *matCellDef=\"let element\">\r\n                                    <button class=\"delete-btn-picker\" mat-button\r\n                                        (click)=\"$event.stopPropagation();removeRow($event, element)\">\r\n                                        <mat-icon aria-hidden=\"false\" aria-label=\"Remove row\">delete</mat-icon>\r\n                                    </button>\r\n                                </td>\r\n                            </ng-container>\r\n                            <ng-container matColumnDef=\"productName\">\r\n                                <th mat-header-cell *matHeaderCellDef> {{productTweek}} </th>\r\n                                <td mat-cell *matCellDef=\"let element\"> {{element.text}} </td>\r\n                            </ng-container>\r\n                            <ng-container matColumnDef=\"categoryName\" *ngIf=\"showCategory\">\r\n                                <th mat-header-cell *matHeaderCellDef> {{categoryTweek}} </th>\r\n                                <td mat-cell *matCellDef=\"let element\"> {{element.category}} </td>\r\n                            </ng-container>\r\n                            <ng-container matColumnDef=\"subCategory\" *ngIf=\"showSubcategory\">\r\n                                <th mat-header-cell *matHeaderCellDef> {{subCategoryTweek}} </th>\r\n                                <td mat-cell *matCellDef=\"let element\"> {{element.subCategory}} </td>\r\n                            </ng-container>\r\n                            <ng-container matColumnDef=\"price\" *ngIf=\"showPrice\">\r\n                                <th mat-header-cell *matHeaderCellDef>{{priceTweek}}</th>\r\n                                <td mat-cell *matCellDef=\"let element; let i = index\">\r\n                                    <mat-form-field class=\"example-full-width select-price\">\r\n                                        <mat-label>{{priceTweek}}</mat-label>\r\n                                        <input matInput [formControl]=\"selectedProducts.at(i).get('price')\"\r\n                                            (input)=\"applyValidationRule($event, i, 'price')\"\r\n                                            (keypress)=\"restrictInput($event, '')\" (paste)=\"handlePaste($event, '')\">\r\n                                        <mat-error *ngIf=\"selectedProducts.at(i).get('price').hasError('required')\">\r\n                                            This field is required\r\n                                        </mat-error>\r\n                                    </mat-form-field>\r\n                                </td>\r\n                            </ng-container>\r\n                            <ng-container matColumnDef=\"Quantity\" *ngIf=\"showQuantity\">\r\n                                <th mat-header-cell *matHeaderCellDef> {{quantityTweek}} </th>\r\n                                <td mat-cell *matCellDef=\"let element; let i = index\">\r\n                                    <mat-form-field class=\"example-full-width\">\r\n                                        <mat-label>{{quantityTweek}}</mat-label>\r\n                                        <input matInput [formControl]=\"selectedProducts.at(i).get('quantity')\"\r\n                                            type=\"number\" min=\"1\" step=\"1\" (input)=\"onQuantityChange($event, i)\">\r\n                                        <mat-error *ngIf=\"selectedProducts.at(i).get('quantity').hasError('required')\">\r\n                                            This field is required\r\n                                        </mat-error>\r\n                                        <mat-error *ngIf=\"selectedProducts.at(i).get('quantity').hasError('min')\">\r\n                                            Quantity can not be less than 1\r\n                                        </mat-error>\r\n                                        <mat-error *ngIf=\"selectedProducts.at(i).get('quantity').hasError('pattern')\">\r\n                                            Decimals not allowed\r\n                                        </mat-error>\r\n                                    </mat-form-field>\r\n                                </td>\r\n                            </ng-container>\r\n                            <ng-container matColumnDef=\"skuNumber\" *ngIf=\"showSkuNumber\">\r\n                                <th mat-header-cell *matHeaderCellDef> {{skuTweek}} </th>\r\n                                <td mat-cell *matCellDef=\"let element\">{{element?.otherInformation0}} </td>\r\n                            </ng-container>\r\n                            <ng-container matColumnDef=\"inventory\" *ngIf=\"showInventory\">\r\n                                <th mat-header-cell *matHeaderCellDef> {{inventoryTweek}} </th>\r\n                                <td mat-cell *matCellDef=\"let element\">{{element?.otherInformation1}} </td>\r\n                            </ng-container>\r\n\r\n                            <ng-container matColumnDef=\"cost\" *ngIf=\"showCost\">\r\n                                <th mat-header-cell *matHeaderCellDef>{{costTweek}}</th>\r\n                                <td mat-cell *matCellDef=\"let element; let i = index\">\r\n                                    <mat-form-field class=\"example-full-width select-cost\">\r\n                                        <mat-label>{{costTweek}}</mat-label>\r\n                                        <input matInput [formControl]=\"selectedProducts.at(i).get('otherInformation0')\"\r\n                                            (input)=\"applyValidationRule($event, i, 'otherInformation0')\"\r\n                                            (keypress)=\"restrictInput($event, 'otherInformation0')\" (paste)=\"handlePaste($event, 'otherInformation0')\">\r\n                                        <mat-error\r\n                                            *ngIf=\"selectedProducts.at(i).get('otherInformation0').hasError('required')\">\r\n                                            This field is required\r\n                                        </mat-error>\r\n                                    </mat-form-field>\r\n                                </td>\r\n                            </ng-container>\r\n                            <tr mat-header-row *matHeaderRowDef=\"showAllproductsColumns\"></tr>\r\n                            <tr mat-row *matRowDef=\"let row; columns: showAllproductsColumns;\"></tr>\r\n                        </table>\r\n                        <!-- <ng-template #showBlank>\r\n                            <div class=\"no-data-message\">\r\n                                No data found.\r\n                            </div>\r\n                        </ng-template> -->\r\n                        <ng-template #showBlank>\r\n                            <div class=\"no-data-message\">\r\n                                <div class=\"pp-empty-state\">\r\n                                    <div class=\"img-empty-state\">\r\n                                        <img [src]=\"emptyImage\" alt=\"\">\r\n                                    </div>\r\n                                    <h3>No Product added</h3>\r\n                                    <p>Please go back and start adding products</p>\r\n                                </div>\r\n                            </div>\r\n                        </ng-template>\r\n                    </div>\r\n                </form>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</mat-dialog-content>\r\n\r\n<mat-dialog-actions>\r\n    <div class=\"tabs-action-step-one\" *ngIf=\"currentPage === 'select-products'\">\r\n        <div>\r\n            <button mat-button (click)=\"goToNextPage()\" [disabled]=\"selection.selected.length ? false : true\"\r\n                color=\"primary\" mat-raised-button>Edit Selected Products</button>\r\n        </div>\r\n        <div>\r\n            <button mat-button (click)=\"goToNextPage()\" [disabled]=\"selection.selected.length ? false : true\"\r\n                color=\"primary\" mat-raised-button>Next</button>\r\n            <button mat-button [mat-dialog-close]=\"false\">Cancel</button>\r\n        </div>\r\n    </div>\r\n    <div class=\"tabs-action\" *ngIf=\"currentPage === 'edit-save'\">\r\n        <div class=\"tab-action-wrp\">\r\n            <button mat-button (click)=\"goToPreviousPage()\">Back</button>\r\n            <button mat-button type=\"submit\" color=\"primary\" mat-raised-button (click)=\"onSubmit()\">Add/Update</button>\r\n        </div>\r\n    </div>\r\n</mat-dialog-actions>", styles: [".mat-dialog-heading{margin:0 0 20px;position:relative;display:flex;align-items:center}:host ::ng-deep .mat-dialog-title{width:100%;padding:0 40px;margin:0;font-family:Inter,sans-serif;font-size:20px;color:#000;letter-spacing:normal;text-align:center}.mat-dialog-close mat-icon{color:#000}.example-full-width{width:100%}.mat-dialog-content p{margin-bottom:15px;font-family:Inter,sans-serif}.mat-dialog-content a{color:#2196f3}.mat-dialog-content a:hover{text-decoration:none}:host ::ng-deep .mat-dialog-actions{justify-content:flex-end}.mat-stroked-button.mat-primary{color:#0078d6}.OverlayDiv{position:fixed;display:block;width:100%;height:100%;top:0;left:0;right:0;bottom:0;background-color:#00000080;z-index:500;cursor:pointer}.OverlayDivContent{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%)}.basic-search{display:flex;align-items:center;width:100%;margin-bottom:20px}.basic-search-wrp{border:1px solid #DADCE0;border-radius:5px;padding-left:15px;height:46px;display:flex;align-items:center;flex:1;margin-right:20px}.basic-search-wrp mat-icon{color:#0006}.basic-search-wrp form{width:100%}.search-icon{margin:0;display:flex}.search-icon mat-icon{color:#0006}.search-icon svg{width:24px;height:24px}.search-icon svg path{fill:#999}.input-search{margin:0;border:0;width:100%;padding:0 18px 0 10px}.input-search input{border:0;width:100%;font-size:15px;line-height:1}.input-search input:focus{border:0;outline:0 none}.advfilter{display:flex;margin-left:auto}.advfilter button{border:0;background-color:transparent;margin:0;padding:0;display:flex;position:relative}.advfilter button mat-icon{color:#0006}.advfilter button span{font-weight:600;font-size:10px;display:flex;align-items:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;justify-content:center;width:20px;height:20px;color:#fff!important;border-radius:50%;background-color:#f44336!important;position:absolute;top:-5px;right:-10px}.search-btn{margin-left:auto;min-width:137px}.search-btn button{box-shadow:none;height:46px;width:100%}.product-selection-container{border:1px solid #DADCE0;padding:20px;margin-bottom:20px;border-radius:5px}.product-selection-container h5{margin:0;color:#202020!important;font-size:16px!important}.pp-empty-state{max-width:420px;margin:0 auto;padding:50px 0;text-align:center}.img-empty-state{width:100%;margin-bottom:20px}.img-empty-state img{width:100%}.pp-empty-state h3{font-size:20px!important;margin:0 0 5px;padding:0;font-weight:400;color:#202020!important}.pp-empty-state p{font-size:15px!important;margin:0 0 20px!important;padding:0;color:#656667!important}.mat-dialog-content{max-height:none!important;overflow:hidden!important}.tbl-record-found{border-left:1px solid #0000001f;border-right:1px solid #0000001f;border-top:1px solid #0000001f;border-radius:5px 5px 0 0;min-height:104px;max-height:296px;overflow-y:auto;height:100%}.tbl-record-found table{border-collapse:separate}.tbl-record-found tr:last-child td{border-bottom:none}.tbl-record-found thead,.tbl-record-found th{position:-webkit-sticky;position:sticky;top:0;z-index:100;background-color:#fff}.tbl-record-found th.mat-header-cell:first-of-type,.tbl-record-found td.mat-cell:first-of-type,.tbl-record-found td.mat-footer-cell:first-of-type{width:70px}.row-summary{padding:15px 25px;border-left:1px solid #0000001f;border-top:1px solid #0000001f;display:flex;justify-content:space-between;border-right:1px solid #0000001f;border-bottom:1px solid #0000001f;border-radius:0 0 5px 5px}.row-summary div{margin-right:30px}button.delete-btn-picker{background:transparent!important;padding:0!important;min-width:auto!important}button.delete-btn-picker:hover{background:transparent!important}button.delete-btn-picker:hover .mat-button-focus-overlay{opacity:0!important}button.delete-btn-picker mat-icon{color:#f44336!important}mat-icon.icondropdown{line-height:1.6!important}mat-icon.iconclose{line-height:2!important;font-size:120%!important}.added-products{border:1px solid #0000001f;border-bottom:none;border-radius:5px;min-height:133px;max-height:444px;overflow-y:auto;height:100%}.added-products table{border-collapse:separate}.added-products thead,.added-products th{position:-webkit-sticky;position:sticky;top:0;z-index:100;background-color:#fff}.added-products th.mat-header-cell:first-of-type,.added-products td.mat-cell:first-of-type,.added-products td.mat-footer-cell:first-of-type{width:70px}.mat-header-cell{font-weight:500!important;color:#0000008a!important}.clr-all-picker{display:inline-block;border:0;outline:0 none;padding:0;background-color:transparent;color:#2196f3;margin-left:20px}.title-adv{display:flex;align-items:center;margin-bottom:15px}.tabs-action-step-one{display:flex;justify-content:space-between;width:100%}.tbl-record-found td.checkbox-picker-pointer{cursor:pointer!important}.tbl-record-found td{cursor:text!important}.basic-search form{margin:0}@media only screen and (max-width:1545px){.pp-empty-state h3{font-size:18px}.pp-empty-state p{font-size:14px}.pp-empty-state{padding:20px 0;max-width:392px}.product-selection-container h5{font-size:14px;margin-bottom:5px}.product-selection-container{padding:15px 20px}.basic-search{margin-bottom:20px}.mat-dialog-heading{margin-bottom:10px}.mat-dialog-title{font-size:18px}.mat-dialog-content{max-height:60vh!important;overflow:auto!important}}\n"] }]
         }], ctorParameters: function () {
         return [{ type: i1$1.MatDialogRef }, { type: undefined, decorators: [{
                         type: Inject,