import { Component, EventEmitter, Input, Output, ViewChild, } from '@angular/core';
import { ASSETS } from '../../constants/assets.constants';
import * as i0 from "@angular/core";
import * as i1 from "@angular/forms";
import * as i2 from "@angular/common";
import * as i3 from "../../formgroup/cs-radio/cs-radio.component";
import * as i4 from "../../ui-kit/tooltip/tooltip.directive";
import * as i5 from "../no-data/no-data.component";
import * as i6 from "../v-loader/loader-inline/loader-inline.component";
import * as i7 from "../floating-bar/floating-bar.component";
import * as i8 from "../../pipes/data-type.pipe";
import * as i9 from "../../pipes/list-mapper.pipe";
import * as i10 from "../../pipes/search.pipe";
export class RadioListComponent {
    constructor() {
        this.itemsList = [];
        this.selectedItems = [];
        this.identifierKey = '';
        this.displayKey = '';
        this.tooltipKey = '';
        this.twoColumn = false;
        this.closeList = new EventEmitter();
        this.saveList = new EventEmitter();
        this.loader = false;
        this.animation = true;
        this.searchItem = '';
        this.ASSETS = ASSETS;
    }
    ngOnInit() {
        setTimeout(() => {
            this.animation = false;
        }, 300);
        this.selectedItems = this.arrayToId(this.selectedItems, this.identifierKey);
        // this.rerenderList();
    }
    ngAfterViewInit() {
        setTimeout(() => {
            this.blockWidth = this.listBlock?.nativeElement?.offsetWidth;
        }, 100);
    }
    selectItem(item) {
        this.selectedItems = [];
        this.selectedItems.push(item);
    }
    deleteItem(item) {
        this.selectedItems = [];
        // this.rerenderList();
    }
    save() {
        this.saveList.emit(this.selectedItems);
    }
    close() {
        this.closeList.emit();
    }
    arrayToId(array, identifierKey) {
        return array.map((a) => a[identifierKey]);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RadioListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RadioListComponent, selector: "app-radio-list", inputs: { itemsList: "itemsList", selectedItems: "selectedItems", identifierKey: "identifierKey", displayKey: "displayKey", tooltipKey: "tooltipKey", config: "config", twoColumn: "twoColumn", loader: "loader" }, outputs: { closeList: "closeList", saveList: "saveList" }, viewQueries: [{ propertyName: "listBlock", first: true, predicate: ["listBlock"], descendants: true }], ngImport: i0, template: "<div class=\"radio-list\" [class.animate]=\"animation\">\n  <div\n    class=\"radio-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\">{{ config?.panelTitle }}</div>\n    <!-- <button class=\"radio-list-close\">\n      <i class=\"icons\" (click)=\"close()\">&#xe90d;</i>\n    </button> -->\n  </div>\n\n  <div class=\"radio-list-body\">\n    <div class=\"search-block vx-mb-2\" *ngIf=\"config?.searchEnabled\">\n      <i class=\"icons\">&#xe90b;</i>\n      <input\n        type=\"text\"\n        [placeholder]=\"config?.searchPlaceholder\"\n        [(ngModel)]=\"searchItem\"\n      />\n    </div>\n    <app-loader-inline *ngIf=\"loader\"></app-loader-inline>\n    <ng-container\n      *ngIf=\"itemsList | search : searchItem : displayKey as searchList\"\n    >\n      <div class=\"categories vx-mb-4\" *ngIf=\"searchList?.length > 0\">\n        <ul [class.two-column]=\"twoColumn\" *ngIf=\"searchList?.length > 0\">\n          <li *ngFor=\"let item of searchList\">\n            <ng-container *ngIf=\"(item[displayKey] | dataType) !== 'object'\">\n              <app-cs-radio\n                [name]=\"'radio-selector'\"\n                (checkedEvent)=\"selectItem(item[identifierKey])\"\n                [name]=\"'rx-category'\"\n                [checked]=\"selectedItems.includes(item[identifierKey])\"\n                [appTooltip]=\"tooltipKey ? item[tooltipKey] : item[displayKey]\"\n                placement=\"bottom-left\"\n                delay=\"0\"\n                [tooltipMandatory]=\"true\"\n              >\n                {{ item[displayKey] }}\n              </app-cs-radio>\n            </ng-container>\n            <ng-container *ngIf=\"(item[displayKey] | dataType) === 'object'\">\n              <app-cs-radio\n                [name]=\"'radio-selector'\"\n                (checkedEvent)=\"selectItem(item[identifierKey])\"\n                [checked]=\"selectedItems.includes(item[identifierKey])\"\n              >\n                <ul class=\"category-within-list\" #listBlock>\n                  <li\n                    *ngFor=\"let child of item[displayKey]\"\n                    [style.max-width.px]=\"blockWidth / item[displayKey].length\"\n                  >\n                    <span\n                      [appTooltip]=\"child\"\n                      placement=\"bottom-left\"\n                      delay=\"0\"\n                      >{{ child }}</span\n                    >\n                  </li>\n                </ul>\n              </app-cs-radio>\n            </ng-container>\n          </li>\n        </ul>\n      </div>\n      <app-no-data\n        *ngIf=\"searchList?.length === 0 && !loader\"\n        [noDataImage]=\"ASSETS.search_data\"\n        [noDataText]=\"\n          config?.noDataText?.length > 0\n            ? config?.noDataText\n            : 'No data to display'\n        \"\n      ></app-no-data>\n    </ng-container>\n\n    <app-floating-bar\n      *ngIf=\"!loader\"\n      [selectedData]=\"selectedItems | listMapper : itemsList : identifierKey\"\n      [displayElementKey]=\"displayKey\"\n      [singularText]=\"config?.floatingTextSingular\"\n      [pluralText]=\"\n        config?.floatingTextPlural\n          ? config?.floatingTextPlural\n          : 'Users selected'\n      \"\n      (closeEvent)=\"save()\"\n      (closeList)=\"close()\"\n      (deleteEvent)=\"deleteItem($event)\"\n      [isDisabled]=\"selectedItems.length === 0 || itemsList.length === 0\"\n    >\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 .radio-list{position:fixed;inset:0 500px 0 0}::ng-deep .radio-list:before{background:#1e5dd3;content:\"\";position:absolute;top:0;left:0;right:0;width:100%;height:3px}::ng-deep .radio-list-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .radio-list-close{background:transparent;border:none;outline:none;cursor:pointer;color:#000;font-size:12px;display:inline-block;padding:0}::ng-deep .radio-list-body{background:#fff;height:calc(100vh - 2.75rem);padding:2rem}::ng-deep .radio-list-body .search-block{position:relative}::ng-deep .radio-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 .radio-list-body .search-block input:focus{border-color:#1e5dd3}::ng-deep .radio-list-body .search-block i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1;font-size:12px}::ng-deep .radio-list-body .categories{height:calc(100vh - 224px);overflow:hidden;overflow-y:auto}::ng-deep .radio-list-body .categories ul{padding:0;margin:0}::ng-deep .radio-list-body .categories ul li{padding:0 0 1rem;list-style:none}::ng-deep .radio-list-body .categories ul li app-cs-radio{display:flex}::ng-deep .radio-list-body .categories ul li app-cs-radio label.radio-item{width:100%}::ng-deep .radio-list-body .categories ul li app-cs-radio label.radio-item span.value{width:100%;color:#161b2f;font-size:12px;font-weight:400;overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}::ng-deep .radio-list-body .categories ul li app-cs-radio label.radio-item span.value ul{padding:0;margin:0}::ng-deep .radio-list-body .categories ul li app-cs-radio label.radio-item span.value ul.category-within-list{display:flex;max-width:100%}::ng-deep .radio-list-body .categories ul li app-cs-radio label.radio-item span.value ul.category-within-list li{display:block;padding:0 8px;position:relative;max-width:50%;width:auto}::ng-deep .radio-list-body .categories ul li app-cs-radio label.radio-item span.value ul.category-within-list li:after{content:\">\";position:absolute;top:0;right:-3px;color:#747576;font-size:13px}::ng-deep .radio-list-body .categories ul li app-cs-radio label.radio-item span.value ul.category-within-list li span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;color:#747576}::ng-deep .radio-list-body .categories ul li app-cs-radio label.radio-item span.value ul.category-within-list li:last-of-type:after{display:none}::ng-deep .radio-list-body .categories ul li app-cs-radio label.radio-item span.value ul.category-within-list li:last-of-type span{color:#34aa44}::ng-deep .radio-list-body .categories ul li app-cs-radio label.radio-item span.value ul.category-within-list li:first-of-type{padding-left:0}::ng-deep .radio-list-body .categories ul li app-cs-radio label.radio-item span.value ul.category-within-list li:first-of-type span{color:#1e5dd3}::ng-deep .radio-list-body .categories ul.two-column{display:flex;flex-wrap:wrap;align-items:flex-start}::ng-deep .radio-list-body .categories ul.two-column li{width:50%;padding-right:20px}::ng-deep .radio-list-body app-no-data .no-data-wrapper{height:calc(100% - 100px)!important}::ng-deep .radio-list.animate{animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;z-index:-1}@keyframes animate-right{0%{transform:translate(100%)}to{transform:translate(0)}}\n"], dependencies: [{ kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.CsRadioComponent, selector: "app-cs-radio", inputs: ["disabled", "readonly", "name", "checked", "value", "oneLine"], outputs: ["checkedEvent"] }, { kind: "directive", type: i4.ToolTipDirective, selector: "[appTooltip]", inputs: ["appTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.NoDataComponent, selector: "app-no-data", inputs: ["action", "noDataImage", "noDataText", "noDataButton", "noDataSecButton", "altText", "smallButton", "button"], outputs: ["buttonAction"] }, { kind: "component", type: i6.LoaderInlineComponent, selector: "app-loader-inline" }, { kind: "component", type: i7.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: "pipe", type: i8.DataTypePipe, name: "dataType" }, { kind: "pipe", type: i9.ListMapperPipe, name: "listMapper" }, { kind: "pipe", type: i10.SearchPipe, name: "search" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RadioListComponent, decorators: [{
            type: Component,
            args: [{ selector: 'app-radio-list', template: "<div class=\"radio-list\" [class.animate]=\"animation\">\n  <div\n    class=\"radio-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\">{{ config?.panelTitle }}</div>\n    <!-- <button class=\"radio-list-close\">\n      <i class=\"icons\" (click)=\"close()\">&#xe90d;</i>\n    </button> -->\n  </div>\n\n  <div class=\"radio-list-body\">\n    <div class=\"search-block vx-mb-2\" *ngIf=\"config?.searchEnabled\">\n      <i class=\"icons\">&#xe90b;</i>\n      <input\n        type=\"text\"\n        [placeholder]=\"config?.searchPlaceholder\"\n        [(ngModel)]=\"searchItem\"\n      />\n    </div>\n    <app-loader-inline *ngIf=\"loader\"></app-loader-inline>\n    <ng-container\n      *ngIf=\"itemsList | search : searchItem : displayKey as searchList\"\n    >\n      <div class=\"categories vx-mb-4\" *ngIf=\"searchList?.length > 0\">\n        <ul [class.two-column]=\"twoColumn\" *ngIf=\"searchList?.length > 0\">\n          <li *ngFor=\"let item of searchList\">\n            <ng-container *ngIf=\"(item[displayKey] | dataType) !== 'object'\">\n              <app-cs-radio\n                [name]=\"'radio-selector'\"\n                (checkedEvent)=\"selectItem(item[identifierKey])\"\n                [name]=\"'rx-category'\"\n                [checked]=\"selectedItems.includes(item[identifierKey])\"\n                [appTooltip]=\"tooltipKey ? item[tooltipKey] : item[displayKey]\"\n                placement=\"bottom-left\"\n                delay=\"0\"\n                [tooltipMandatory]=\"true\"\n              >\n                {{ item[displayKey] }}\n              </app-cs-radio>\n            </ng-container>\n            <ng-container *ngIf=\"(item[displayKey] | dataType) === 'object'\">\n              <app-cs-radio\n                [name]=\"'radio-selector'\"\n                (checkedEvent)=\"selectItem(item[identifierKey])\"\n                [checked]=\"selectedItems.includes(item[identifierKey])\"\n              >\n                <ul class=\"category-within-list\" #listBlock>\n                  <li\n                    *ngFor=\"let child of item[displayKey]\"\n                    [style.max-width.px]=\"blockWidth / item[displayKey].length\"\n                  >\n                    <span\n                      [appTooltip]=\"child\"\n                      placement=\"bottom-left\"\n                      delay=\"0\"\n                      >{{ child }}</span\n                    >\n                  </li>\n                </ul>\n              </app-cs-radio>\n            </ng-container>\n          </li>\n        </ul>\n      </div>\n      <app-no-data\n        *ngIf=\"searchList?.length === 0 && !loader\"\n        [noDataImage]=\"ASSETS.search_data\"\n        [noDataText]=\"\n          config?.noDataText?.length > 0\n            ? config?.noDataText\n            : 'No data to display'\n        \"\n      ></app-no-data>\n    </ng-container>\n\n    <app-floating-bar\n      *ngIf=\"!loader\"\n      [selectedData]=\"selectedItems | listMapper : itemsList : identifierKey\"\n      [displayElementKey]=\"displayKey\"\n      [singularText]=\"config?.floatingTextSingular\"\n      [pluralText]=\"\n        config?.floatingTextPlural\n          ? config?.floatingTextPlural\n          : 'Users selected'\n      \"\n      (closeEvent)=\"save()\"\n      (closeList)=\"close()\"\n      (deleteEvent)=\"deleteItem($event)\"\n      [isDisabled]=\"selectedItems.length === 0 || itemsList.length === 0\"\n    >\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 .radio-list{position:fixed;inset:0 500px 0 0}::ng-deep .radio-list:before{background:#1e5dd3;content:\"\";position:absolute;top:0;left:0;right:0;width:100%;height:3px}::ng-deep .radio-list-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .radio-list-close{background:transparent;border:none;outline:none;cursor:pointer;color:#000;font-size:12px;display:inline-block;padding:0}::ng-deep .radio-list-body{background:#fff;height:calc(100vh - 2.75rem);padding:2rem}::ng-deep .radio-list-body .search-block{position:relative}::ng-deep .radio-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 .radio-list-body .search-block input:focus{border-color:#1e5dd3}::ng-deep .radio-list-body .search-block i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1;font-size:12px}::ng-deep .radio-list-body .categories{height:calc(100vh - 224px);overflow:hidden;overflow-y:auto}::ng-deep .radio-list-body .categories ul{padding:0;margin:0}::ng-deep .radio-list-body .categories ul li{padding:0 0 1rem;list-style:none}::ng-deep .radio-list-body .categories ul li app-cs-radio{display:flex}::ng-deep .radio-list-body .categories ul li app-cs-radio label.radio-item{width:100%}::ng-deep .radio-list-body .categories ul li app-cs-radio label.radio-item span.value{width:100%;color:#161b2f;font-size:12px;font-weight:400;overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}::ng-deep .radio-list-body .categories ul li app-cs-radio label.radio-item span.value ul{padding:0;margin:0}::ng-deep .radio-list-body .categories ul li app-cs-radio label.radio-item span.value ul.category-within-list{display:flex;max-width:100%}::ng-deep .radio-list-body .categories ul li app-cs-radio label.radio-item span.value ul.category-within-list li{display:block;padding:0 8px;position:relative;max-width:50%;width:auto}::ng-deep .radio-list-body .categories ul li app-cs-radio label.radio-item span.value ul.category-within-list li:after{content:\">\";position:absolute;top:0;right:-3px;color:#747576;font-size:13px}::ng-deep .radio-list-body .categories ul li app-cs-radio label.radio-item span.value ul.category-within-list li span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;color:#747576}::ng-deep .radio-list-body .categories ul li app-cs-radio label.radio-item span.value ul.category-within-list li:last-of-type:after{display:none}::ng-deep .radio-list-body .categories ul li app-cs-radio label.radio-item span.value ul.category-within-list li:last-of-type span{color:#34aa44}::ng-deep .radio-list-body .categories ul li app-cs-radio label.radio-item span.value ul.category-within-list li:first-of-type{padding-left:0}::ng-deep .radio-list-body .categories ul li app-cs-radio label.radio-item span.value ul.category-within-list li:first-of-type span{color:#1e5dd3}::ng-deep .radio-list-body .categories ul.two-column{display:flex;flex-wrap:wrap;align-items:flex-start}::ng-deep .radio-list-body .categories ul.two-column li{width:50%;padding-right:20px}::ng-deep .radio-list-body app-no-data .no-data-wrapper{height:calc(100% - 100px)!important}::ng-deep .radio-list.animate{animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;z-index:-1}@keyframes animate-right{0%{transform:translate(100%)}to{transform:translate(0)}}\n"] }]
        }], ctorParameters: function () { return []; }, propDecorators: { listBlock: [{
                type: ViewChild,
                args: ['listBlock', { static: false }]
            }], itemsList: [{
                type: Input
            }], selectedItems: [{
                type: Input
            }], identifierKey: [{
                type: Input
            }], displayKey: [{
                type: Input
            }], tooltipKey: [{
                type: Input
            }], config: [{
                type: Input
            }], twoColumn: [{
                type: Input
            }], closeList: [{
                type: Output
            }], saveList: [{
                type: Output
            }], loader: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 