import { Component, Input, Output, EventEmitter } from '@angular/core';
import { ASSETS } from '../../../constants/assets.constants';
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 "../../../sharedComponents/floating-bar/floating-bar.component";
import * as i4 from "../../../formgroup/cs-radio/cs-radio.component";
import * as i5 from "../../../ui-kit/popover/popover.component";
import * as i6 from "../../../ui-kit/popover/popover.directive";
import * as i7 from "@angular/forms";
import * as i8 from "../../../sharedComponents/v-loader/loader-inline/loader-inline.component";
import * as i9 from "../../../pipes/search.pipe";
export class AssigneeComponent {
    constructor() {
        this.ASSETS = ASSETS;
        this.animation = true;
        this.search = '';
        this.selectedAssignees = [];
        this.assigneeList = [];
        this.activeAssignee = [];
        this.closeEvent = new EventEmitter();
        this.selectedAssigneeEvent = new EventEmitter();
    }
    ngOnInit() {
        if (this.activeAssignee?.length) {
            this.selectedAssignees = [...this.activeAssignee];
        }
        setTimeout(() => {
            this.animation = false;
        }, 300);
    }
    closeList(event) {
        this.closeEvent.emit(event);
    }
    onSelectAssignee(assignee) {
        this.selectedAssignees = [assignee];
    }
    deleteAssignee(assignee) {
        this.selectedAssignees = [];
    }
    isSelected(assignee) {
        return this.selectedAssignees.some((item) => item?._id === assignee?._id);
    }
    selectedAssigneeData(event) {
        this.selectedAssigneeEvent.emit(event);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AssigneeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AssigneeComponent, selector: "app-assignee", inputs: { assigneeList: "assigneeList", activeAssignee: "activeAssignee", payload: "payload" }, outputs: { closeEvent: "closeEvent", selectedAssigneeEvent: "selectedAssigneeEvent" }, ngImport: i0, template: "<div class=\"assignee-list\">\n  <div\n    class=\"assignee-list-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\"\n  >\n    <div class=\"vx-fs-14 vx-fw-500 vx-label-txt vx-d-flex vx-align-center\">\n      <button\n        class=\"back-btn vx-fs-16 vx-p-0 vx-m-0 vx-mr-3 vx-d-flex vx-align-center\"\n        [appTooltip]=\"'Back'\"\n        placement=\"bottom\"\n        delay=\"0\"\n        type=\"black\"\n        [tooltipMandatory]=\"true\"\n        (click)=\"closeList()\"\n      >\n        <i class=\"icons\">&#xeb29;</i></button\n      >Select Assignee(s)\n    </div>\n  </div>\n  <div class=\"assignee-list-body\">\n    <div class=\"search-block\">\n      <i class=\"icons\">&#xe90b;</i>\n      <input type=\"text\" [(ngModel)]=\"search\" placeholder=\"Search User\" />\n    </div>\n    <app-loader-inline *ngIf=\"false\"></app-loader-inline>\n    <div class=\"assignee-list-body-inner vx-mb-4\">\n      <ng-container>\n        <div class=\"assignee-list-area\">\n          <ul class=\"vx-d-flex vx-p-0 vx-m-0\">\n            <li\n              *ngFor=\"\n                let data of assigneeList | search : search as assigneeList\n              \"\n              class=\"vx-pr-5\"\n            >\n              <app-cs-radio\n                [value]=\"data?._id\"\n                [checked]=\"isSelected(data)\"\n                (checkedEvent)=\"onSelectAssignee(data)\"\n              >\n                <div\n                  class=\"assignee-name vx-fs-12\"\n                  [appTooltip]=\"data?.member_name\"\n                  placement=\"bottom-left\"\n                  delay=\"0\"\n                  type=\"black\"\n                  [tooltipMandatory]=\"false\"\n                >\n                  {{ data?.member_name }}\n                </div>\n                <div\n                  *ngIf=\"data?.usergroup_id?.length\"\n                  class=\"assignee-lable vx-fs-9 vx-fw-600 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-lh-3 vx-ml-2\"\n                  [appTooltip]=\"data?.associatedGroups[0]?.group_name\"\n                  placement=\"bottom-left\"\n                  delay=\"0\"\n                  type=\"black\"\n                  [tooltipMandatory]=\"false\"\n                >\n                  {{ data?.associatedGroups[0]?.group_name }}\n                </div>\n                <button\n                  *ngIf=\"data?.usergroup_id?.length > 1\"\n                  class=\"count-btn vx-fs-9 vx-fw-600 vx-txt-white vx-pl-1 vx-pr-1 vx-m-0 vx-ml-2 vx-d-flex vx-align-center vx-justify-center\"\n                  appPopover\n                  (click)=\"assigneePopover.popover()\"\n                  placement=\"right\"\n                >\n                  +{{ data?.usergroup_id?.length - 1 }}\n                </button>\n                <app-popover #assigneePopover>\n                  <div class=\"wf-action-list\">\n                    <ul class=\"action-item\">\n                      <li\n                        *ngFor=\"\n                          let group of data?.associatedGroups | slice : 1;\n                          let i = index\n                        \"\n                      >\n                        <div class=\"avatar-card\">\n                          <span class=\"value\">{{ group?.group_name }}</span>\n                        </div>\n                      </li>\n                    </ul>\n                  </div>\n                </app-popover>\n              </app-cs-radio>\n            </li>\n          </ul>\n        </div>\n      </ng-container>\n      <app-no-data\n        *ngIf=\"false\"\n        [noDataImage]=\"ASSETS.search_data\"\n        [noDataText]=\"'No data to display'\"\n      ></app-no-data>\n    </div>\n    <app-floating-bar\n      [selectedData]=\"selectedAssignees\"\n      [elementId]=\"'_id'\"\n      [displayElementKey]=\"'member_name'\"\n      [singularText]=\"'Assignee selected'\"\n      (closeList)=\"closeList($event)\"\n      (closeEvent)=\"selectedAssigneeData($event)\"\n      (deleteEvent)=\"deleteAssignee($event)\"\n      [isDisabled]=\"!selectedAssignees?.length || !assigneeList?.length\"\n    ></app-floating-bar>\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/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 .assignee-list{background:#fff;position:fixed;inset:0 500px 0 0;z-index:1}::ng-deep .assignee-list:before{background:#1e5dd3;content:\"\";position:absolute;top:0;left:0;right:0;width:100%;height:3px}::ng-deep .assignee-list.animate{animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;z-index:-1}::ng-deep .assignee-list-head{background:#fbfbfb;border-bottom:1px solid #f1f1f1;height:2.75rem}::ng-deep .assignee-list-head button.back-btn{background:transparent;border-radius:0;border:none;color:#000}::ng-deep .assignee-list-body{background:#fff;height:calc(100vh - 2.75rem);padding:2rem}::ng-deep .assignee-list-body .search-block{position:relative;margin-bottom:.5rem}::ng-deep .assignee-list-body .search-block input{height:2.75rem;line-height:1.5rem;padding:.5rem 1rem .5rem 2.5rem;outline:none;border:1px solid #7475763f;border-radius:.25rem;width:100%;font-size:14px;color:#747576}::ng-deep .assignee-list-body .search-block input:focus{border-color:#1e5dd3}::ng-deep .assignee-list-body .search-block i{position:absolute;left:1rem;font-size:12px;font-weight:400;top:1rem;pointer-events:none;color:#f1f1f1}::ng-deep .assignee-list-body-inner{height:calc(100% - 7.25rem)}::ng-deep .assignee-list-body-inner app-pagination .wk-pagination-sec-ds{padding-top:0}::ng-deep .assignee-list-area{height:calc(100% - 2rem);overflow-y:auto;padding-right:2rem;width:calc(100% + 2rem)}::ng-deep .assignee-list-area ul{list-style-type:none;flex-wrap:wrap}::ng-deep .assignee-list-area ul li{margin-bottom:1rem;width:50%}::ng-deep .assignee-list-area ul li app-cs-radio .radio-item .value .assignee-name{color:#161b2f;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .assignee-list-area ul li app-cs-radio .radio-item .value .assignee-lable{background:#f1f1f1;border-radius:.125rem;color:#042e7d;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .assignee-list-area ul li app-cs-radio .radio-item .value button.count-btn{background:#1e5dd3;border-radius:1.25rem;border:none;min-width:1.5rem;height:1rem}@keyframes animate-right{0%{transform:translate(100%)}to{transform:translate(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.FloatingBarComponent, selector: "app-floating-bar", inputs: ["selectedData", "selectedGroups", "displayElementKey", "elementId", "singularText", "pluralText", "showNextButton", "showFrequencyText", "showWorkflow", "workflowText", "currentFrequency", "isDisabled", "workflowList", "selectedWorkflow", "workflowPlaceHolder", "mode", "defaultSelected", "groupsEnabled", "nonRemovableUsersList", "removePosition"], outputs: ["closeEvent", "deleteEvent", "closeList", "deleteGroupEvent", "workflowTypeChanged"] }, { kind: "component", type: i4.CsRadioComponent, selector: "app-cs-radio", inputs: ["disabled", "readonly", "name", "checked", "value", "oneLine"], outputs: ["checkedEvent"] }, { kind: "component", type: i5.PopoverComponent, selector: "app-popover", inputs: ["dontCloseonClick"] }, { kind: "directive", type: i6.PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "placement"] }, { kind: "directive", type: i7.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: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i8.LoaderInlineComponent, selector: "app-loader-inline" }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }, { kind: "pipe", type: i9.SearchPipe, name: "search" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AssigneeComponent, decorators: [{
            type: Component,
            args: [{ selector: 'app-assignee', template: "<div class=\"assignee-list\">\n  <div\n    class=\"assignee-list-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\"\n  >\n    <div class=\"vx-fs-14 vx-fw-500 vx-label-txt vx-d-flex vx-align-center\">\n      <button\n        class=\"back-btn vx-fs-16 vx-p-0 vx-m-0 vx-mr-3 vx-d-flex vx-align-center\"\n        [appTooltip]=\"'Back'\"\n        placement=\"bottom\"\n        delay=\"0\"\n        type=\"black\"\n        [tooltipMandatory]=\"true\"\n        (click)=\"closeList()\"\n      >\n        <i class=\"icons\">&#xeb29;</i></button\n      >Select Assignee(s)\n    </div>\n  </div>\n  <div class=\"assignee-list-body\">\n    <div class=\"search-block\">\n      <i class=\"icons\">&#xe90b;</i>\n      <input type=\"text\" [(ngModel)]=\"search\" placeholder=\"Search User\" />\n    </div>\n    <app-loader-inline *ngIf=\"false\"></app-loader-inline>\n    <div class=\"assignee-list-body-inner vx-mb-4\">\n      <ng-container>\n        <div class=\"assignee-list-area\">\n          <ul class=\"vx-d-flex vx-p-0 vx-m-0\">\n            <li\n              *ngFor=\"\n                let data of assigneeList | search : search as assigneeList\n              \"\n              class=\"vx-pr-5\"\n            >\n              <app-cs-radio\n                [value]=\"data?._id\"\n                [checked]=\"isSelected(data)\"\n                (checkedEvent)=\"onSelectAssignee(data)\"\n              >\n                <div\n                  class=\"assignee-name vx-fs-12\"\n                  [appTooltip]=\"data?.member_name\"\n                  placement=\"bottom-left\"\n                  delay=\"0\"\n                  type=\"black\"\n                  [tooltipMandatory]=\"false\"\n                >\n                  {{ data?.member_name }}\n                </div>\n                <div\n                  *ngIf=\"data?.usergroup_id?.length\"\n                  class=\"assignee-lable vx-fs-9 vx-fw-600 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-lh-3 vx-ml-2\"\n                  [appTooltip]=\"data?.associatedGroups[0]?.group_name\"\n                  placement=\"bottom-left\"\n                  delay=\"0\"\n                  type=\"black\"\n                  [tooltipMandatory]=\"false\"\n                >\n                  {{ data?.associatedGroups[0]?.group_name }}\n                </div>\n                <button\n                  *ngIf=\"data?.usergroup_id?.length > 1\"\n                  class=\"count-btn vx-fs-9 vx-fw-600 vx-txt-white vx-pl-1 vx-pr-1 vx-m-0 vx-ml-2 vx-d-flex vx-align-center vx-justify-center\"\n                  appPopover\n                  (click)=\"assigneePopover.popover()\"\n                  placement=\"right\"\n                >\n                  +{{ data?.usergroup_id?.length - 1 }}\n                </button>\n                <app-popover #assigneePopover>\n                  <div class=\"wf-action-list\">\n                    <ul class=\"action-item\">\n                      <li\n                        *ngFor=\"\n                          let group of data?.associatedGroups | slice : 1;\n                          let i = index\n                        \"\n                      >\n                        <div class=\"avatar-card\">\n                          <span class=\"value\">{{ group?.group_name }}</span>\n                        </div>\n                      </li>\n                    </ul>\n                  </div>\n                </app-popover>\n              </app-cs-radio>\n            </li>\n          </ul>\n        </div>\n      </ng-container>\n      <app-no-data\n        *ngIf=\"false\"\n        [noDataImage]=\"ASSETS.search_data\"\n        [noDataText]=\"'No data to display'\"\n      ></app-no-data>\n    </div>\n    <app-floating-bar\n      [selectedData]=\"selectedAssignees\"\n      [elementId]=\"'_id'\"\n      [displayElementKey]=\"'member_name'\"\n      [singularText]=\"'Assignee selected'\"\n      (closeList)=\"closeList($event)\"\n      (closeEvent)=\"selectedAssigneeData($event)\"\n      (deleteEvent)=\"deleteAssignee($event)\"\n      [isDisabled]=\"!selectedAssignees?.length || !assigneeList?.length\"\n    ></app-floating-bar>\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/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 .assignee-list{background:#fff;position:fixed;inset:0 500px 0 0;z-index:1}::ng-deep .assignee-list:before{background:#1e5dd3;content:\"\";position:absolute;top:0;left:0;right:0;width:100%;height:3px}::ng-deep .assignee-list.animate{animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;z-index:-1}::ng-deep .assignee-list-head{background:#fbfbfb;border-bottom:1px solid #f1f1f1;height:2.75rem}::ng-deep .assignee-list-head button.back-btn{background:transparent;border-radius:0;border:none;color:#000}::ng-deep .assignee-list-body{background:#fff;height:calc(100vh - 2.75rem);padding:2rem}::ng-deep .assignee-list-body .search-block{position:relative;margin-bottom:.5rem}::ng-deep .assignee-list-body .search-block input{height:2.75rem;line-height:1.5rem;padding:.5rem 1rem .5rem 2.5rem;outline:none;border:1px solid #7475763f;border-radius:.25rem;width:100%;font-size:14px;color:#747576}::ng-deep .assignee-list-body .search-block input:focus{border-color:#1e5dd3}::ng-deep .assignee-list-body .search-block i{position:absolute;left:1rem;font-size:12px;font-weight:400;top:1rem;pointer-events:none;color:#f1f1f1}::ng-deep .assignee-list-body-inner{height:calc(100% - 7.25rem)}::ng-deep .assignee-list-body-inner app-pagination .wk-pagination-sec-ds{padding-top:0}::ng-deep .assignee-list-area{height:calc(100% - 2rem);overflow-y:auto;padding-right:2rem;width:calc(100% + 2rem)}::ng-deep .assignee-list-area ul{list-style-type:none;flex-wrap:wrap}::ng-deep .assignee-list-area ul li{margin-bottom:1rem;width:50%}::ng-deep .assignee-list-area ul li app-cs-radio .radio-item .value .assignee-name{color:#161b2f;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .assignee-list-area ul li app-cs-radio .radio-item .value .assignee-lable{background:#f1f1f1;border-radius:.125rem;color:#042e7d;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .assignee-list-area ul li app-cs-radio .radio-item .value button.count-btn{background:#1e5dd3;border-radius:1.25rem;border:none;min-width:1.5rem;height:1rem}@keyframes animate-right{0%{transform:translate(100%)}to{transform:translate(0)}}\n"] }]
        }], propDecorators: { assigneeList: [{
                type: Input
            }], activeAssignee: [{
                type: Input
            }], payload: [{
                type: Input
            }], closeEvent: [{
                type: Output
            }], selectedAssigneeEvent: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 