import { Component, EventEmitter, Input, Output, } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "../../../formgroup/cs-checkbox/cs-checkbox.component";
import * as i3 from "../../../formgroup/cs-checkbox-indeterminate/cs-checkbox-indeterminate.component";
export class DropdownComponent {
    onSingleSelect(item) {
        if (!this.config.isMulti) {
            this.selectionChange.emit(item);
            this.isOpen = false;
        }
    }
    ngOnInit() {
        if (this.selectedList?.length) {
            this.selectedItems = [...new Set(this.selectedList)];
        }
        this.resetContainer();
    }
    constructor() {
        this.isOpen = false;
        this.selectedItems = [];
        this.selectedList = [];
        this.config = {
            items: [],
            isMulti: false,
            showIndeterminateCheckbox: false,
            indeterminateCheckboxLabel: '',
        };
        this.selectionChange = new EventEmitter();
    }
    ngOnChanges(changes) {
        if (changes['selectedList'] &&
            changes['selectedList'].currentValue.length) {
            this.selectedItems = [...new Set(this.selectedList)];
        }
    }
    resetContainer() {
    }
    toggleSelectAll(selected) {
        this.selectedItems = selected
            ? this.config.items?.map((item) => item?.id)
            : [];
        this.selectionChange.emit(this.selectedItems);
    }
    isAllSelected() {
        return (this.config.items?.length > 0 &&
            this.config.items?.every((item) => this.selectedItems?.includes(item?.id)));
    }
    toggleSelection(item, selected) {
        if (selected) {
            if (!this.selectedItems?.includes(item?.id)) {
                this.selectedItems?.push(item?.id);
            }
        }
        else {
            this.selectedItems = this.selectedItems?.filter((id) => id !== item?.id);
        }
        this.selectionChange.emit(this.selectedItems);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DropdownComponent, selector: "app-vc-dropdown", inputs: { selectedList: "selectedList", config: "config" }, outputs: { selectionChange: "selectionChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"wf-action-list selection-list\">\n  <ul class=\"action-item\">\n    <!-- single select -->\n    <div *ngIf=\"!config?.isMulti\">\n      <li *ngFor=\"let data of config.items\">\n        <div\n          [vuiTooltip]=\"data?.isDisabled ? data?.tooltipMsg || '' : ''\"\n          placement=\"bottom-left\"\n          delay=\"0\"\n          type=\"black\"\n          [tooltipMandatory]=\"true\"\n        >\n          <button (click)=\"onSingleSelect(data)\" [disabled]=\"data?.isDisabled\">\n            <i *ngIf=\"data?.icon\" class=\"icons\" [innerHTML]=\"data?.icon\"></i\n            >{{ data?.name }}\n          </button>\n        </div>\n      </li>\n    </div>\n    <!-- multiple select with checkbox -->\n    <div *ngIf=\"config?.showIndeterminateCheckbox\">\n      <li>\n        <div class=\"avatar-card\">\n          <span class=\"value\">\n            <app-cs-checkbox\n              *ngIf=\"\n                selectedItems?.length === config?.items?.length ||\n                selectedItems?.length === 0\n              \"\n              [ngValue]=\"isAllSelected()\"\n              (ngValueChange)=\"toggleSelectAll($event)\"\n              >{{ config.indeterminateCheckboxLabel }}</app-cs-checkbox\n            >\n\n            <app-cs-checkbox-indeterminate\n              *ngIf=\"\n                selectedItems?.length !== 0 &&\n                selectedItems.length !== config?.items?.length\n              \"\n              [ngValue]=\"true\"\n              (ngValueChange)=\"toggleSelectAll(false)\"\n              >{{\n                config.indeterminateCheckboxLabel\n              }}</app-cs-checkbox-indeterminate\n            >\n          </span>\n        </div>\n      </li>\n      <li *ngFor=\"let data of config.items\">\n        <div class=\"avatar-card\">\n          <app-cs-checkbox\n            [ngValue]=\"selectedItems.includes(data?.id)\"\n            (ngValueChange)=\"toggleSelection(data, $event)\"\n            >{{ data?.name }}</app-cs-checkbox\n          >\n        </div>\n      </li>\n    </div>\n  </ul>\n</div>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.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/display/display.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/icons/icons.css\";.wf-action-list.selection-list{background:#fff;border-radius:.25rem;border:1px solid #e3e3e9;box-shadow:0 3px 6px #1c5bd140;overflow:hidden;width:15.5rem}.wf-action-list.selection-list ul{border-radius:unset;border:none;box-shadow:none}.wf-action-list.selection-list ul li .avatar-card app-cs-checkbox{display:flex;padding:.125rem 0;width:100%}.wf-action-list.selection-list .action-list-bottom{background:#fff;border-radius:0 0 .25rem .25rem;border-top:1px solid #f2f2f5}.wf-action-list.selection-list .action-list-bottom button{background:#fff;border-radius:.25rem;height:1.5rem;margin:0 .125rem!important}.wf-action-list.selection-list .action-list-bottom button.reset-btn{border:1px solid #cdced6}.wf-action-list.selection-list .action-list-bottom button.reset-btn:hover{background:#f9f9fa}.wf-action-list.selection-list .action-list-bottom button.reset-btn.disabled{background:#f9f9fa;border-color:#cdced6;color:#a9aab6;pointer-events:none}.wf-action-list.selection-list .action-list-bottom button.apply-btn{background:#1e5dd3;border:none}.wf-action-list.selection-list .action-list-bottom button.apply-btn.disabled{background:#e3e3e9;color:#a9aab6;pointer-events:none}\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: "component", type: i2.CsCheckboxComponent, selector: "app-cs-checkbox", inputs: ["disabled", "ngValue", "value", "readonly", "oneLine"], outputs: ["ngValueChange"] }, { kind: "component", type: i3.CsCheckboxIndeterminateComponent, selector: "app-cs-checkbox-indeterminate", inputs: ["disabled", "ngValue", "value"], outputs: ["ngValueChange"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropdownComponent, decorators: [{
            type: Component,
            args: [{ selector: 'app-vc-dropdown', template: "<div class=\"wf-action-list selection-list\">\n  <ul class=\"action-item\">\n    <!-- single select -->\n    <div *ngIf=\"!config?.isMulti\">\n      <li *ngFor=\"let data of config.items\">\n        <div\n          [vuiTooltip]=\"data?.isDisabled ? data?.tooltipMsg || '' : ''\"\n          placement=\"bottom-left\"\n          delay=\"0\"\n          type=\"black\"\n          [tooltipMandatory]=\"true\"\n        >\n          <button (click)=\"onSingleSelect(data)\" [disabled]=\"data?.isDisabled\">\n            <i *ngIf=\"data?.icon\" class=\"icons\" [innerHTML]=\"data?.icon\"></i\n            >{{ data?.name }}\n          </button>\n        </div>\n      </li>\n    </div>\n    <!-- multiple select with checkbox -->\n    <div *ngIf=\"config?.showIndeterminateCheckbox\">\n      <li>\n        <div class=\"avatar-card\">\n          <span class=\"value\">\n            <app-cs-checkbox\n              *ngIf=\"\n                selectedItems?.length === config?.items?.length ||\n                selectedItems?.length === 0\n              \"\n              [ngValue]=\"isAllSelected()\"\n              (ngValueChange)=\"toggleSelectAll($event)\"\n              >{{ config.indeterminateCheckboxLabel }}</app-cs-checkbox\n            >\n\n            <app-cs-checkbox-indeterminate\n              *ngIf=\"\n                selectedItems?.length !== 0 &&\n                selectedItems.length !== config?.items?.length\n              \"\n              [ngValue]=\"true\"\n              (ngValueChange)=\"toggleSelectAll(false)\"\n              >{{\n                config.indeterminateCheckboxLabel\n              }}</app-cs-checkbox-indeterminate\n            >\n          </span>\n        </div>\n      </li>\n      <li *ngFor=\"let data of config.items\">\n        <div class=\"avatar-card\">\n          <app-cs-checkbox\n            [ngValue]=\"selectedItems.includes(data?.id)\"\n            (ngValueChange)=\"toggleSelection(data, $event)\"\n            >{{ data?.name }}</app-cs-checkbox\n          >\n        </div>\n      </li>\n    </div>\n  </ul>\n</div>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.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/display/display.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/icons/icons.css\";.wf-action-list.selection-list{background:#fff;border-radius:.25rem;border:1px solid #e3e3e9;box-shadow:0 3px 6px #1c5bd140;overflow:hidden;width:15.5rem}.wf-action-list.selection-list ul{border-radius:unset;border:none;box-shadow:none}.wf-action-list.selection-list ul li .avatar-card app-cs-checkbox{display:flex;padding:.125rem 0;width:100%}.wf-action-list.selection-list .action-list-bottom{background:#fff;border-radius:0 0 .25rem .25rem;border-top:1px solid #f2f2f5}.wf-action-list.selection-list .action-list-bottom button{background:#fff;border-radius:.25rem;height:1.5rem;margin:0 .125rem!important}.wf-action-list.selection-list .action-list-bottom button.reset-btn{border:1px solid #cdced6}.wf-action-list.selection-list .action-list-bottom button.reset-btn:hover{background:#f9f9fa}.wf-action-list.selection-list .action-list-bottom button.reset-btn.disabled{background:#f9f9fa;border-color:#cdced6;color:#a9aab6;pointer-events:none}.wf-action-list.selection-list .action-list-bottom button.apply-btn{background:#1e5dd3;border:none}.wf-action-list.selection-list .action-list-bottom button.apply-btn.disabled{background:#e3e3e9;color:#a9aab6;pointer-events:none}\n"] }]
        }], ctorParameters: function () { return []; }, propDecorators: { selectedList: [{
                type: Input
            }], config: [{
                type: Input
            }], selectionChange: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 