import { Component, ElementRef, HostListener, ViewChildren, } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "../../../../../ui-kit/tooltip/tooltip.directive";
import * as i3 from "../../../../../ui-kit/formgroup/cs-select/cs-select.component";
import * as i4 from "../../../../assessment-preview/quick-settings/quick-settings.component";
export class PreviewMatrixDropdownComponent {
    constructor() {
        this.questionIndex = 1;
        this.isQuickSettings = true;
    }
    ngOnInit() { }
    scrollHandler(event) {
        this.panel['_results'].forEach((panel) => {
            panel['nativeElement'].scrollLeft = event.target.scrollLeft;
        });
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PreviewMatrixDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PreviewMatrixDropdownComponent, selector: "app-preview-matrix-dropdown", inputs: { question: "question", questionIndex: "questionIndex" }, host: { listeners: { "scroll": "scrollHandler($event)" } }, viewQueries: [{ propertyName: "panel", predicate: ["scrollMatrixDropdown"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"question-block vx-mb-1 vx-p-4\">\n  <div class=\"question-heading vx-pb-3 vx-mb-3\">\n    <span\n      class=\"count vx-fs-13 vx-fw-400 vx-label-txt vx-d-flex vx-align-center vx-justify-center\"\n      >{{ questionIndex }}</span\n    >\n    <span class=\"heading\">\n      <span\n        class=\"vx-fs-16 vx-label-txt vx-lh-6\"\n        [innerHTML]=\"question?.title\"\n      ></span>\n      <span\n        *ngIf=\"question?.isRequired\"\n        class=\"required vx-fs-20 vx-fw-300 vx-ml-1\"\n        >*</span\n      >\n    </span>\n  </div>\n  <div class=\"question-inner vx-d-flex vx-justify-between\">\n    <div class=\"question-inner-inside vx-w-100\">\n      <div\n        class=\"question-description vx-fs-12 vx-paragraph-txt vx-mb-3\"\n        *ngIf=\"\n          question?.hasDescription && question?.description?.trim().length > 0\n        \"\n        [innerHTML]=\"question?.description\"\n      ></div>\n      <div class=\"preview-list\">\n        <div class=\"matrix-dropdown-table\">\n          <div class=\"matrix-table-row table-head vx-d-flex\">\n            <div class=\"left\">\n              <div class=\"body\">\n                <div class=\"title vx-fs-12 vx-label-txt vx-p-2\"></div>\n              </div>\n            </div>\n            <div\n              class=\"right\"\n              (scroll)=\"scrollHandler($event)\"\n              #scrollMatrixDropdown\n            >\n              <div class=\"body\">\n                <ul class=\"columns vx-p-0 vx-m-0 vx-d-flex\">\n                  <li\n                    class=\"vx-d-flex vx-align-center vx-justify-center vx-p-2\"\n                    *ngFor=\"let columns of question?.columns\"\n                  >\n                    <div\n                      class=\"matrix-value vx-fs-12 vx-fw-500 vx-label-txt vx-tt-uppercase vx-d-flex vx-align-center\"\n                    >\n                      <div\n                        class=\"heading\"\n                        [appTooltip]=\"columns?.title\"\n                        placement=\"bottom-left\"\n                        delay=\"0\"\n                        type=\"black\"\n                        [tooltipMandatory]=\"false\"\n                      >\n                        {{ columns?.title ?? \"--\" }}\n                      </div>\n                    </div>\n                  </li>\n                </ul>\n              </div>\n            </div>\n          </div>\n          <div\n            class=\"matrix-table-row vx-d-flex\"\n            *ngFor=\"let eachRow of question?.choices; let rowIndex = index\"\n          >\n            <div class=\"left\">\n              <div class=\"body\">\n                <div\n                  class=\"title vx-fs-12 vx-label-txt vx-lh-7 vx-p-2\"\n                  [appTooltip]=\"eachRow?.title\"\n                  placement=\"bottom-left\"\n                  delay=\"0\"\n                  type=\"black\"\n                  [tooltipMandatory]=\"false\"\n                >\n                  {{ eachRow?.title }}\n                </div>\n              </div>\n            </div>\n            <div\n              class=\"right\"\n              (scroll)=\"scrollHandler($event)\"\n              #scrollMatrixDropdown\n            >\n              <div class=\"body\">\n                <ul class=\"columns vx-p-0 vx-m-0 vx-d-flex\">\n                  <li\n                    class=\"vx-d-flex vx-align-center vx-justify-center vx-p-2\"\n                    *ngFor=\"\n                      let eachColumns of question?.columns;\n                      let columnIndex = index\n                    \"\n                  >\n                    <div\n                      class=\"matrix-value vx-d-flex vx-align-center vx-justify-center\"\n                    >\n                      <app-cs-select\n                        [dataList]=\"eachColumns?.choices\"\n                        [valueKey]=\"'title'\"\n                        [displayProperty]=\"'title'\"\n                        [selectedValue]=\"'--'\"\n                      ></app-cs-select>\n                    </div>\n                  </li>\n                </ul>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"question-quickSettings\">\n      <app-quick-settings [question]=\"question\"></app-quick-settings>\n    </div>\n  </div>\n</div>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .question-block{background:#f8f8f8;border-radius:.25rem;position:relative;min-height:12.5rem}::ng-deep .question-heading{border-bottom:1px solid #dbdbdb;position:relative}::ng-deep .question-heading .count{background:#dbdbdb;border-radius:50%;border:.5rem solid #fff;min-width:2.75rem;height:2.75rem;position:absolute;top:-.625rem;left:-3.25rem}::ng-deep .question-heading .heading .required{color:#c7381b;position:relative;top:-.25rem}::ng-deep .question-inner{position:relative}::ng-deep .question-inner-inside{padding-right:4rem}@media screen and (max-width: 667px){::ng-deep .question-inner-inside{padding-right:2.5rem!important;width:100%!important}}::ng-deep .question-inner-inside .preview-list{position:relative}::ng-deep .question-inner-inside .preview-list .matrix-dropdown-table{border:1px solid #dbdbdb;border-bottom:none;max-width:100%}::ng-deep .question-inner-inside .preview-list .matrix-dropdown-table .matrix-table-row{border-bottom:1px solid #dbdbdb}::ng-deep .question-inner-inside .preview-list .matrix-dropdown-table .matrix-table-row:last-child .right::-webkit-scrollbar{display:block}::ng-deep .question-inner-inside .preview-list .matrix-dropdown-table .matrix-table-row.table-head{background:#f8f8f8}::ng-deep .question-inner-inside .preview-list .matrix-dropdown-table .matrix-table-row .left{width:18rem}@media screen and (max-width: 768px){::ng-deep .question-inner-inside .preview-list .matrix-dropdown-table .matrix-table-row .left{width:12rem}}@media screen and (max-width: 667px){::ng-deep .question-inner-inside .preview-list .matrix-dropdown-table .matrix-table-row .left{width:7rem}}::ng-deep .question-inner-inside .preview-list .matrix-dropdown-table .matrix-table-row .left .body{height:100%}::ng-deep .question-inner-inside .preview-list .matrix-dropdown-table .matrix-table-row .left .body .title{border-right:1px solid #dbdbdb;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;height:100%;font-weight:500}::ng-deep .question-inner-inside .preview-list .matrix-dropdown-table .matrix-table-row .right{width:calc(100% - 18rem);overflow-x:auto;position:static!important;height:auto!important;background:transparent!important}@media screen and (max-width: 768px){::ng-deep .question-inner-inside .preview-list .matrix-dropdown-table .matrix-table-row .right{width:calc(100% - 12rem)}}@media screen and (max-width: 667px){::ng-deep .question-inner-inside .preview-list .matrix-dropdown-table .matrix-table-row .right{width:calc(100% - 7rem)}}::ng-deep .question-inner-inside .preview-list .matrix-dropdown-table .matrix-table-row .right::-webkit-scrollbar{display:none;height:6px}::ng-deep .question-inner-inside .preview-list .matrix-dropdown-table .matrix-table-row .right::-webkit-scrollbar-thumb{border-radius:3px;background-color:#dbdbdb;position:absolute}::ng-deep .question-inner-inside .preview-list .matrix-dropdown-table .matrix-table-row .right .body ul.columns li{border-right:1px solid #dbdbdb}::ng-deep .question-inner-inside .preview-list .matrix-dropdown-table .matrix-table-row .right .body ul.columns li:last-of-type{border-right:none}::ng-deep .question-inner-inside .preview-list .matrix-dropdown-table .matrix-table-row .right .body ul.columns li .matrix-value{width:7rem}::ng-deep .question-inner-inside .preview-list .matrix-dropdown-table .matrix-table-row .right .body ul.columns li .matrix-value .heading{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .question-inner-inside .preview-list .matrix-dropdown-table .matrix-table-row .right .body ul.columns li .matrix-value .devider{color:#bcbcbc}::ng-deep .question-inner-inside .preview-list .matrix-dropdown-table .matrix-table-row .right .body ul.columns li .matrix-value app-cs-select .input-group .custom-select-box{z-index:unset!important}::ng-deep .question-inner-inside .preview-list .matrix-dropdown-table .matrix-table-row .right .body ul.columns li .matrix-value app-cs-select .input-group .custom-select-box input[type=text]{height:28px;padding:4px 20px 4px 8px}::ng-deep .question-inner-inside .preview-list .matrix-dropdown-table .matrix-table-row .right .body ul.columns li .matrix-value app-cs-select .input-group .custom-select-box:after{right:8px;top:calc(50% - 5px);z-index:0}::ng-deep .question-quickSettings{position:absolute;top:0;right:0}\n"], dependencies: [{ 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.ToolTipDirective, selector: "[appTooltip]", inputs: ["appTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: i3.CsSelectComponentUI, selector: "app-cs-select", inputs: ["dataList", "dropdownLabel", "displayProperty", "selectedValue", "isRequired", "dropdownSubLabel", "disabled", "placeholder", "stylex", "valueKey", "multipleSelect", "colorProperty", "colorSelected"], outputs: ["selectedData", "selectedValueChange"] }, { kind: "component", type: i4.QuickSettingsComponent, selector: "app-quick-settings", inputs: ["question"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PreviewMatrixDropdownComponent, decorators: [{
            type: Component,
            args: [{ selector: 'app-preview-matrix-dropdown', inputs: ['question', 'questionIndex'], template: "<div class=\"question-block vx-mb-1 vx-p-4\">\n  <div class=\"question-heading vx-pb-3 vx-mb-3\">\n    <span\n      class=\"count vx-fs-13 vx-fw-400 vx-label-txt vx-d-flex vx-align-center vx-justify-center\"\n      >{{ questionIndex }}</span\n    >\n    <span class=\"heading\">\n      <span\n        class=\"vx-fs-16 vx-label-txt vx-lh-6\"\n        [innerHTML]=\"question?.title\"\n      ></span>\n      <span\n        *ngIf=\"question?.isRequired\"\n        class=\"required vx-fs-20 vx-fw-300 vx-ml-1\"\n        >*</span\n      >\n    </span>\n  </div>\n  <div class=\"question-inner vx-d-flex vx-justify-between\">\n    <div class=\"question-inner-inside vx-w-100\">\n      <div\n        class=\"question-description vx-fs-12 vx-paragraph-txt vx-mb-3\"\n        *ngIf=\"\n          question?.hasDescription && question?.description?.trim().length > 0\n        \"\n        [innerHTML]=\"question?.description\"\n      ></div>\n      <div class=\"preview-list\">\n        <div class=\"matrix-dropdown-table\">\n          <div class=\"matrix-table-row table-head vx-d-flex\">\n            <div class=\"left\">\n              <div class=\"body\">\n                <div class=\"title vx-fs-12 vx-label-txt vx-p-2\"></div>\n              </div>\n            </div>\n            <div\n              class=\"right\"\n              (scroll)=\"scrollHandler($event)\"\n              #scrollMatrixDropdown\n            >\n              <div class=\"body\">\n                <ul class=\"columns vx-p-0 vx-m-0 vx-d-flex\">\n                  <li\n                    class=\"vx-d-flex vx-align-center vx-justify-center vx-p-2\"\n                    *ngFor=\"let columns of question?.columns\"\n                  >\n                    <div\n                      class=\"matrix-value vx-fs-12 vx-fw-500 vx-label-txt vx-tt-uppercase vx-d-flex vx-align-center\"\n                    >\n                      <div\n                        class=\"heading\"\n                        [appTooltip]=\"columns?.title\"\n                        placement=\"bottom-left\"\n                        delay=\"0\"\n                        type=\"black\"\n                        [tooltipMandatory]=\"false\"\n                      >\n                        {{ columns?.title ?? \"--\" }}\n                      </div>\n                    </div>\n                  </li>\n                </ul>\n              </div>\n            </div>\n          </div>\n          <div\n            class=\"matrix-table-row vx-d-flex\"\n            *ngFor=\"let eachRow of question?.choices; let rowIndex = index\"\n          >\n            <div class=\"left\">\n              <div class=\"body\">\n                <div\n                  class=\"title vx-fs-12 vx-label-txt vx-lh-7 vx-p-2\"\n                  [appTooltip]=\"eachRow?.title\"\n                  placement=\"bottom-left\"\n                  delay=\"0\"\n                  type=\"black\"\n                  [tooltipMandatory]=\"false\"\n                >\n                  {{ eachRow?.title }}\n                </div>\n              </div>\n            </div>\n            <div\n              class=\"right\"\n              (scroll)=\"scrollHandler($event)\"\n              #scrollMatrixDropdown\n            >\n              <div class=\"body\">\n                <ul class=\"columns vx-p-0 vx-m-0 vx-d-flex\">\n                  <li\n                    class=\"vx-d-flex vx-align-center vx-justify-center vx-p-2\"\n                    *ngFor=\"\n                      let eachColumns of question?.columns;\n                      let columnIndex = index\n                    \"\n                  >\n                    <div\n                      class=\"matrix-value vx-d-flex vx-align-center vx-justify-center\"\n                    >\n                      <app-cs-select\n                        [dataList]=\"eachColumns?.choices\"\n                        [valueKey]=\"'title'\"\n                        [displayProperty]=\"'title'\"\n                        [selectedValue]=\"'--'\"\n                      ></app-cs-select>\n                    </div>\n                  </li>\n                </ul>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"question-quickSettings\">\n      <app-quick-settings [question]=\"question\"></app-quick-settings>\n    </div>\n  </div>\n</div>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .question-block{background:#f8f8f8;border-radius:.25rem;position:relative;min-height:12.5rem}::ng-deep .question-heading{border-bottom:1px solid #dbdbdb;position:relative}::ng-deep .question-heading .count{background:#dbdbdb;border-radius:50%;border:.5rem solid #fff;min-width:2.75rem;height:2.75rem;position:absolute;top:-.625rem;left:-3.25rem}::ng-deep .question-heading .heading .required{color:#c7381b;position:relative;top:-.25rem}::ng-deep .question-inner{position:relative}::ng-deep .question-inner-inside{padding-right:4rem}@media screen and (max-width: 667px){::ng-deep .question-inner-inside{padding-right:2.5rem!important;width:100%!important}}::ng-deep .question-inner-inside .preview-list{position:relative}::ng-deep .question-inner-inside .preview-list .matrix-dropdown-table{border:1px solid #dbdbdb;border-bottom:none;max-width:100%}::ng-deep .question-inner-inside .preview-list .matrix-dropdown-table .matrix-table-row{border-bottom:1px solid #dbdbdb}::ng-deep .question-inner-inside .preview-list .matrix-dropdown-table .matrix-table-row:last-child .right::-webkit-scrollbar{display:block}::ng-deep .question-inner-inside .preview-list .matrix-dropdown-table .matrix-table-row.table-head{background:#f8f8f8}::ng-deep .question-inner-inside .preview-list .matrix-dropdown-table .matrix-table-row .left{width:18rem}@media screen and (max-width: 768px){::ng-deep .question-inner-inside .preview-list .matrix-dropdown-table .matrix-table-row .left{width:12rem}}@media screen and (max-width: 667px){::ng-deep .question-inner-inside .preview-list .matrix-dropdown-table .matrix-table-row .left{width:7rem}}::ng-deep .question-inner-inside .preview-list .matrix-dropdown-table .matrix-table-row .left .body{height:100%}::ng-deep .question-inner-inside .preview-list .matrix-dropdown-table .matrix-table-row .left .body .title{border-right:1px solid #dbdbdb;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;height:100%;font-weight:500}::ng-deep .question-inner-inside .preview-list .matrix-dropdown-table .matrix-table-row .right{width:calc(100% - 18rem);overflow-x:auto;position:static!important;height:auto!important;background:transparent!important}@media screen and (max-width: 768px){::ng-deep .question-inner-inside .preview-list .matrix-dropdown-table .matrix-table-row .right{width:calc(100% - 12rem)}}@media screen and (max-width: 667px){::ng-deep .question-inner-inside .preview-list .matrix-dropdown-table .matrix-table-row .right{width:calc(100% - 7rem)}}::ng-deep .question-inner-inside .preview-list .matrix-dropdown-table .matrix-table-row .right::-webkit-scrollbar{display:none;height:6px}::ng-deep .question-inner-inside .preview-list .matrix-dropdown-table .matrix-table-row .right::-webkit-scrollbar-thumb{border-radius:3px;background-color:#dbdbdb;position:absolute}::ng-deep .question-inner-inside .preview-list .matrix-dropdown-table .matrix-table-row .right .body ul.columns li{border-right:1px solid #dbdbdb}::ng-deep .question-inner-inside .preview-list .matrix-dropdown-table .matrix-table-row .right .body ul.columns li:last-of-type{border-right:none}::ng-deep .question-inner-inside .preview-list .matrix-dropdown-table .matrix-table-row .right .body ul.columns li .matrix-value{width:7rem}::ng-deep .question-inner-inside .preview-list .matrix-dropdown-table .matrix-table-row .right .body ul.columns li .matrix-value .heading{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .question-inner-inside .preview-list .matrix-dropdown-table .matrix-table-row .right .body ul.columns li .matrix-value .devider{color:#bcbcbc}::ng-deep .question-inner-inside .preview-list .matrix-dropdown-table .matrix-table-row .right .body ul.columns li .matrix-value app-cs-select .input-group .custom-select-box{z-index:unset!important}::ng-deep .question-inner-inside .preview-list .matrix-dropdown-table .matrix-table-row .right .body ul.columns li .matrix-value app-cs-select .input-group .custom-select-box input[type=text]{height:28px;padding:4px 20px 4px 8px}::ng-deep .question-inner-inside .preview-list .matrix-dropdown-table .matrix-table-row .right .body ul.columns li .matrix-value app-cs-select .input-group .custom-select-box:after{right:8px;top:calc(50% - 5px);z-index:0}::ng-deep .question-quickSettings{position:absolute;top:0;right:0}\n"] }]
        }], ctorParameters: function () { return []; }, propDecorators: { panel: [{
                type: ViewChildren,
                args: ['scrollMatrixDropdown', { read: ElementRef }]
            }], scrollHandler: [{
                type: HostListener,
                args: ['scroll', ['$event']]
            }] } });
//# sourceMappingURL=data:application/json;base64, 