import { CommonModule } from '@angular/common';
import { Component, Input } from '@angular/core';
import { TooltipModule } from '../../../ui-kit/tooltip/tooltip.module';
import { PopoverModule } from '../../../ui-kit/popover/popover.module';
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/popover/popover.component";
import * as i4 from "../../../ui-kit/popover/popover.directive";
export class QuickSettingsComponent {
    constructor() { }
    ngOnInit() { }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: QuickSettingsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: QuickSettingsComponent, isStandalone: true, selector: "app-quick-settings", inputs: { question: "question" }, ngImport: i0, template: "<div class=\"quick-settings\">\n  <ul class=\"more-options vx-p-0 vx-m-0\">\n    <li class=\"vx-pt-1 vx-pb-1\" *ngIf=\"question.hasComments\">\n      <button\n        class=\"options commentBtn vx-fs-14 vx-d-flex vx-align-center vx-justify-center vx-bg-grey vx-txt-white vx-p-2\"\n        [class.close]=\"info?.showPopover\"\n        appPopover\n        (click)=\"info?.popover()\"\n        placement=\"right\"\n      >\n        <!-- <span class=\"status vx-bg-blue\"></span> -->\n        <i class=\"icons\" *ngIf=\"!info?.showPopover\">&#xe932;</i>\n        <i class=\"icons\" *ngIf=\"info?.showPopover\">&#xe9ae;</i>\n      </button>\n\n      <app-popover #info [dontCloseonClick]=\"false\">\n        <div class=\"block info vx-bg-white vx-p-3\">\n          <div\n            class=\"block-text vx-fs-13 vx-paragraph-txt\"\n            [innerHTML]=\"question.comments\"\n          ></div>\n        </div>\n      </app-popover>\n    </li>\n\n    <li class=\"vx-pt-1 vx-pb-1\" *ngIf=\"question.isRespondentAttachment\">\n      <button\n        class=\"options attachBtn vx-fs-16 vx-d-flex vx-align-center vx-justify-center vx-bg-grey vx-label-txt vx-p-2\"\n        [class.close]=\"attachment?.showPopover\"\n        appPopover\n        (click)=\"attachment.popover()\"\n        placement=\"right\"\n      >\n        <!-- <span class=\"status vx-bg-blue\"></span> -->\n        <i class=\"icons\" *ngIf=\"!attachment?.showPopover\">&#xe977;</i>\n        <i class=\"icons\" *ngIf=\"attachment?.showPopover\">&#xe9ae;</i>\n      </button>\n\n      <app-popover #attachment [dontCloseonClick]=\"true\">\n        <div class=\"block attachment vx-bg-white\">\n          <div *ngIf=\"false\" class=\"attached vx-pt-1 vx-pl-3 vx-pr-3\">\n            <div\n              class=\"file-box vx-d-flex vx-align-center vx-pb-2 vx-pt-2\"\n              *ngFor=\"let data of [1, 1]\"\n            >\n              <span class=\"file table pdf\">\n                <i class=\"icons\">&#xe92e;</i>\n                <span class=\"format\">pdf</span>\n              </span>\n              <div\n                class=\"file-name vx-fs-12 vx-label-txt\"\n                [appTooltip]=\"'payrollnew-vcomply-interns.pdf'\"\n                placement=\"bottom-left\"\n                delay=\"0\"\n                type=\"black\"\n                [tooltipMandatory]=\"false\"\n              >\n                payrollnew-vcomply-interns.pdf\n              </div>\n              <button\n                class=\"delete-btn vx-fs-14 vx-txt-red vx-p-0 vx-m-0 vx-ml-2 vx-d-flex vx-align-center vx-justify-center\"\n              >\n                <i class=\"icons\">&#xe923;</i>\n              </button>\n              <div class=\"line-progress\">\n                <div class=\"line-progress-bar\"></div>\n              </div>\n            </div>\n          </div>\n          <div\n            class=\"attach-btn vx-d-flex vx-align-center vx-justify-center vx-p-2\"\n          >\n            <input type=\"file\" />\n            <i class=\"icons vx-fs-18 vx-pt-2 vx-mb-1\">&#xe977;</i>\n            <span class=\"vx-txt-blue vx-fs-12 vx-tt-uppercase\"\n              >Attach Files</span\n            >\n          </div>\n          <div\n            *ngIf=\"false\"\n            class=\"bottom vx-p-2 vx-justify-center vx-d-flex vx-align-center\"\n          >\n            <button\n              class=\"save-btn vx-fs-11 vx-fw-500 vx-txt-white vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-justify-center\"\n            >\n              SAVE\n            </button>\n          </div>\n        </div>\n      </app-popover>\n    </li>\n\n    <li class=\"vx-pt-1 vx-pb-1\" *ngIf=\"question.isRespondentComment\">\n      <button\n        class=\"options respondentBtn vx-fs-14 vx-d-flex vx-align-center vx-justify-center vx-bg-grey vx-label-txt vx-p-2\"\n        [class.close]=\"comment?.showPopover\"\n        appPopover\n        (click)=\"comment.popover()\"\n        placement=\"right\"\n      >\n        <!-- <span class=\"status vx-bg-blue\"></span> -->\n        <i class=\"icons\" *ngIf=\"!comment?.showPopover\">&#xe9a6;</i>\n        <i class=\"icons\" *ngIf=\"comment?.showPopover\">&#xe9ae;</i>\n      </button>\n\n      <app-popover #comment [dontCloseonClick]=\"true\">\n        <div class=\"block comment vx-p-0 vx-bg-white\">\n          <div class=\"text-area\">\n            <textarea\n              class=\"vx-fs-13 vx-paragraph-txt vx-lh-5 vx-p-2 vx-m-0\"\n              placeholder=\"Type here...\"\n            ></textarea>\n          </div>\n          <div\n            *ngIf=\"true\"\n            class=\"bottom vx-p-2 vx-justify-center vx-d-flex vx-align-center\"\n          >\n            <button\n              class=\"save-btn vx-fs-11 vx-fw-500 vx-txt-white vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-justify-center\"\n            >\n              SAVE\n            </button>\n          </div>\n        </div>\n      </app-popover>\n    </li>\n  </ul>\n</div>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.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\";@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";.quick-settings ul.more-options li{position:relative;list-style:none}.quick-settings ul.more-options li button.options{border-radius:50%;border:1px solid #f1f1f1}.quick-settings ul.more-options li button.options.commentBtn{background:#4681ef}.quick-settings ul.more-options li button.options span.status{border-radius:50%;height:.5rem;width:.5rem;position:absolute;right:.125rem;top:.5rem}.quick-settings ul.more-options li button.options.close{background:#4681ef;color:#fff}::ng-deep app-popover .block{border-radius:.125rem;box-shadow:0 0 10px #1e5dd31a;max-height:10rem;overflow:auto}::ng-deep app-popover .block::-webkit-scrollbar-track{background-color:#fff}::ng-deep app-popover .block.info{width:17rem}::ng-deep app-popover .block.attachment{min-width:12.25rem;max-width:17rem}::ng-deep app-popover .block.attachment .attached .file-box{border-bottom:1px solid #f1f1f1;position:relative}::ng-deep app-popover .block.attachment .attached .file-box .file-name{min-width:11.375rem;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep app-popover .block.attachment .attached .file-box button.delete-btn{background:transparent;border-radius:0;border:none}::ng-deep app-popover .block.attachment .attached .file-box .line-progress{left:1.625rem;top:auto;bottom:.5rem;width:80%}::ng-deep app-popover .block.attachment .attach-btn{flex-direction:column;position:relative}::ng-deep app-popover .block.attachment .attach-btn input{position:absolute;top:0;right:0;height:100%;width:100%;opacity:0;cursor:pointer}::ng-deep app-popover .block.attachment .attach-btn i{color:#dbdbdb}::ng-deep app-popover .block.comment{width:17rem}::ng-deep app-popover .block.comment textarea{border:none;outline:none;width:100%;resize:none}::ng-deep app-popover .block .bottom{border-top:1px solid #f1f1f1}::ng-deep app-popover .block .bottom button.save-btn{background:#1e5dd3;border-radius:.125rem;border:none;height:1.5rem;width:4rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2.ToolTipDirective, selector: "[appTooltip]", inputs: ["appTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i3.PopoverComponent, selector: "app-popover", inputs: ["dontCloseonClick"] }, { kind: "directive", type: i4.PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "placement"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: QuickSettingsComponent, decorators: [{
            type: Component,
            args: [{ selector: 'app-quick-settings', imports: [CommonModule, TooltipModule, PopoverModule], standalone: true, template: "<div class=\"quick-settings\">\n  <ul class=\"more-options vx-p-0 vx-m-0\">\n    <li class=\"vx-pt-1 vx-pb-1\" *ngIf=\"question.hasComments\">\n      <button\n        class=\"options commentBtn vx-fs-14 vx-d-flex vx-align-center vx-justify-center vx-bg-grey vx-txt-white vx-p-2\"\n        [class.close]=\"info?.showPopover\"\n        appPopover\n        (click)=\"info?.popover()\"\n        placement=\"right\"\n      >\n        <!-- <span class=\"status vx-bg-blue\"></span> -->\n        <i class=\"icons\" *ngIf=\"!info?.showPopover\">&#xe932;</i>\n        <i class=\"icons\" *ngIf=\"info?.showPopover\">&#xe9ae;</i>\n      </button>\n\n      <app-popover #info [dontCloseonClick]=\"false\">\n        <div class=\"block info vx-bg-white vx-p-3\">\n          <div\n            class=\"block-text vx-fs-13 vx-paragraph-txt\"\n            [innerHTML]=\"question.comments\"\n          ></div>\n        </div>\n      </app-popover>\n    </li>\n\n    <li class=\"vx-pt-1 vx-pb-1\" *ngIf=\"question.isRespondentAttachment\">\n      <button\n        class=\"options attachBtn vx-fs-16 vx-d-flex vx-align-center vx-justify-center vx-bg-grey vx-label-txt vx-p-2\"\n        [class.close]=\"attachment?.showPopover\"\n        appPopover\n        (click)=\"attachment.popover()\"\n        placement=\"right\"\n      >\n        <!-- <span class=\"status vx-bg-blue\"></span> -->\n        <i class=\"icons\" *ngIf=\"!attachment?.showPopover\">&#xe977;</i>\n        <i class=\"icons\" *ngIf=\"attachment?.showPopover\">&#xe9ae;</i>\n      </button>\n\n      <app-popover #attachment [dontCloseonClick]=\"true\">\n        <div class=\"block attachment vx-bg-white\">\n          <div *ngIf=\"false\" class=\"attached vx-pt-1 vx-pl-3 vx-pr-3\">\n            <div\n              class=\"file-box vx-d-flex vx-align-center vx-pb-2 vx-pt-2\"\n              *ngFor=\"let data of [1, 1]\"\n            >\n              <span class=\"file table pdf\">\n                <i class=\"icons\">&#xe92e;</i>\n                <span class=\"format\">pdf</span>\n              </span>\n              <div\n                class=\"file-name vx-fs-12 vx-label-txt\"\n                [appTooltip]=\"'payrollnew-vcomply-interns.pdf'\"\n                placement=\"bottom-left\"\n                delay=\"0\"\n                type=\"black\"\n                [tooltipMandatory]=\"false\"\n              >\n                payrollnew-vcomply-interns.pdf\n              </div>\n              <button\n                class=\"delete-btn vx-fs-14 vx-txt-red vx-p-0 vx-m-0 vx-ml-2 vx-d-flex vx-align-center vx-justify-center\"\n              >\n                <i class=\"icons\">&#xe923;</i>\n              </button>\n              <div class=\"line-progress\">\n                <div class=\"line-progress-bar\"></div>\n              </div>\n            </div>\n          </div>\n          <div\n            class=\"attach-btn vx-d-flex vx-align-center vx-justify-center vx-p-2\"\n          >\n            <input type=\"file\" />\n            <i class=\"icons vx-fs-18 vx-pt-2 vx-mb-1\">&#xe977;</i>\n            <span class=\"vx-txt-blue vx-fs-12 vx-tt-uppercase\"\n              >Attach Files</span\n            >\n          </div>\n          <div\n            *ngIf=\"false\"\n            class=\"bottom vx-p-2 vx-justify-center vx-d-flex vx-align-center\"\n          >\n            <button\n              class=\"save-btn vx-fs-11 vx-fw-500 vx-txt-white vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-justify-center\"\n            >\n              SAVE\n            </button>\n          </div>\n        </div>\n      </app-popover>\n    </li>\n\n    <li class=\"vx-pt-1 vx-pb-1\" *ngIf=\"question.isRespondentComment\">\n      <button\n        class=\"options respondentBtn vx-fs-14 vx-d-flex vx-align-center vx-justify-center vx-bg-grey vx-label-txt vx-p-2\"\n        [class.close]=\"comment?.showPopover\"\n        appPopover\n        (click)=\"comment.popover()\"\n        placement=\"right\"\n      >\n        <!-- <span class=\"status vx-bg-blue\"></span> -->\n        <i class=\"icons\" *ngIf=\"!comment?.showPopover\">&#xe9a6;</i>\n        <i class=\"icons\" *ngIf=\"comment?.showPopover\">&#xe9ae;</i>\n      </button>\n\n      <app-popover #comment [dontCloseonClick]=\"true\">\n        <div class=\"block comment vx-p-0 vx-bg-white\">\n          <div class=\"text-area\">\n            <textarea\n              class=\"vx-fs-13 vx-paragraph-txt vx-lh-5 vx-p-2 vx-m-0\"\n              placeholder=\"Type here...\"\n            ></textarea>\n          </div>\n          <div\n            *ngIf=\"true\"\n            class=\"bottom vx-p-2 vx-justify-center vx-d-flex vx-align-center\"\n          >\n            <button\n              class=\"save-btn vx-fs-11 vx-fw-500 vx-txt-white vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-justify-center\"\n            >\n              SAVE\n            </button>\n          </div>\n        </div>\n      </app-popover>\n    </li>\n  </ul>\n</div>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.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\";@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";.quick-settings ul.more-options li{position:relative;list-style:none}.quick-settings ul.more-options li button.options{border-radius:50%;border:1px solid #f1f1f1}.quick-settings ul.more-options li button.options.commentBtn{background:#4681ef}.quick-settings ul.more-options li button.options span.status{border-radius:50%;height:.5rem;width:.5rem;position:absolute;right:.125rem;top:.5rem}.quick-settings ul.more-options li button.options.close{background:#4681ef;color:#fff}::ng-deep app-popover .block{border-radius:.125rem;box-shadow:0 0 10px #1e5dd31a;max-height:10rem;overflow:auto}::ng-deep app-popover .block::-webkit-scrollbar-track{background-color:#fff}::ng-deep app-popover .block.info{width:17rem}::ng-deep app-popover .block.attachment{min-width:12.25rem;max-width:17rem}::ng-deep app-popover .block.attachment .attached .file-box{border-bottom:1px solid #f1f1f1;position:relative}::ng-deep app-popover .block.attachment .attached .file-box .file-name{min-width:11.375rem;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep app-popover .block.attachment .attached .file-box button.delete-btn{background:transparent;border-radius:0;border:none}::ng-deep app-popover .block.attachment .attached .file-box .line-progress{left:1.625rem;top:auto;bottom:.5rem;width:80%}::ng-deep app-popover .block.attachment .attach-btn{flex-direction:column;position:relative}::ng-deep app-popover .block.attachment .attach-btn input{position:absolute;top:0;right:0;height:100%;width:100%;opacity:0;cursor:pointer}::ng-deep app-popover .block.attachment .attach-btn i{color:#dbdbdb}::ng-deep app-popover .block.comment{width:17rem}::ng-deep app-popover .block.comment textarea{border:none;outline:none;width:100%;resize:none}::ng-deep app-popover .block .bottom{border-top:1px solid #f1f1f1}::ng-deep app-popover .block .bottom button.save-btn{background:#1e5dd3;border-radius:.125rem;border:none;height:1.5rem;width:4rem}\n"] }]
        }], ctorParameters: function () { return []; }, propDecorators: { question: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 