import { Component, Input, Output, EventEmitter } 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/popover/popover.component";
import * as i4 from "../../../ui-kit/popover/popover.directive";
export class ChipCapsuleComponent {
    constructor() {
        this.items = [];
        this.removable = true;
        this.remove = new EventEmitter();
    }
    ngOnInit() {
    }
    ngOnChanges(changes) {
        if (changes['items']) {
            this.items = changes['items'].currentValue;
        }
    }
    onRemove(item) {
        this.remove.emit(item);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChipCapsuleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ChipCapsuleComponent, selector: "app-chip-capsule", inputs: { items: "items", removable: "removable" }, outputs: { remove: "remove" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"chip-capsule vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n  <i\n    *ngIf=\"removable\"\n    (click)=\"onRemove(items[0])\"\n    class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n    >&#xe9ae;</i\n  >\n  <div\n    class=\"value vx-fs-11 vx-lh-4\"\n    [appTooltip]=\"items[0]?.label ?? ''\"\n    placement=\"bottom-left\"\n    delay=\"0\"\n    type=\"black\"\n    [tooltipMandatory]=\"false\"\n  >\n    {{ items[0]?.label }}\n  </div>\n  <button\n    *ngIf=\"items.length > 1\"\n    class=\"chip-count vx-fs-9 vx-fw-500 vx-txt-white vx-lh-3 vx-p-0 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)=\"chipCount.popover()\"\n    placement=\"right\"\n  >\n    +{{ items.length - 1 }}\n  </button>\n</div>\n<app-popover #chipCount [dontCloseonClick]=\"true\">\n  <div *ngIf=\"items.length > 1\" class=\"wf-action-list\">\n    <ul class=\"action-item\">\n      <li *ngFor=\"let item of items | slice : 1; let i = index\">\n        <div class=\"avatar-card\">\n          <span\n            class=\"value\"\n            [vuiTooltip]=\"item.label\"\n            placement=\"bottom-left\"\n            delay=\"0\"\n            type=\"black\"\n            [tooltipMandatory]=\"false\"\n          >\n            <i\n              *ngIf=\"removable\"\n              (click)=\"onRemove(item)\"\n              class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n              >&#xe9ae;</i\n            >\n            {{ item?.label }}\n          </span>\n        </div>\n      </li>\n    </ul>\n  </div>\n</app-popover>\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\";::ng-deep .chip-capsule{background:#fff;border-radius:.125rem;border:1px solid #f4f8ff;box-shadow:0 0 2px #1e5dd326;height:1.5rem}::ng-deep .chip-capsule .cross{color:#747576;font-size:10px;margin-right:4px;cursor:pointer;min-width:16px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;background:transparent;border-radius:2px;margin-left:-4px}::ng-deep .chip-capsule .cross:hover{background:#f1f1f1}::ng-deep .chip-capsule .value{color:#000;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:7rem}::ng-deep .chip-capsule button.chip-count{background:#1e5dd3;border-radius:1.25rem;border:none;height:1rem;min-width:1.5rem}::ng-deep app-popover .action-list .action-item .avatar-card .value{display:flex;align-items:center;justify-content:space-between}::ng-deep app-popover .action-list .action-item .avatar-card .value i{font-size:12px!important;color:#747576;font-size:10px;margin-right:4px;cursor:pointer;min-width:16px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;background:transparent;border-radius:2px;margin-left:-4px}::ng-deep app-popover .action-list .action-item .avatar-card .value i:hover{background:#f1f1f1}\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.PopoverComponent, selector: "app-popover", inputs: ["dontCloseonClick"] }, { kind: "directive", type: i4.PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "placement"] }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChipCapsuleComponent, decorators: [{
            type: Component,
            args: [{ selector: 'app-chip-capsule', template: "<div class=\"chip-capsule vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n  <i\n    *ngIf=\"removable\"\n    (click)=\"onRemove(items[0])\"\n    class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n    >&#xe9ae;</i\n  >\n  <div\n    class=\"value vx-fs-11 vx-lh-4\"\n    [appTooltip]=\"items[0]?.label ?? ''\"\n    placement=\"bottom-left\"\n    delay=\"0\"\n    type=\"black\"\n    [tooltipMandatory]=\"false\"\n  >\n    {{ items[0]?.label }}\n  </div>\n  <button\n    *ngIf=\"items.length > 1\"\n    class=\"chip-count vx-fs-9 vx-fw-500 vx-txt-white vx-lh-3 vx-p-0 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)=\"chipCount.popover()\"\n    placement=\"right\"\n  >\n    +{{ items.length - 1 }}\n  </button>\n</div>\n<app-popover #chipCount [dontCloseonClick]=\"true\">\n  <div *ngIf=\"items.length > 1\" class=\"wf-action-list\">\n    <ul class=\"action-item\">\n      <li *ngFor=\"let item of items | slice : 1; let i = index\">\n        <div class=\"avatar-card\">\n          <span\n            class=\"value\"\n            [vuiTooltip]=\"item.label\"\n            placement=\"bottom-left\"\n            delay=\"0\"\n            type=\"black\"\n            [tooltipMandatory]=\"false\"\n          >\n            <i\n              *ngIf=\"removable\"\n              (click)=\"onRemove(item)\"\n              class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n              >&#xe9ae;</i\n            >\n            {{ item?.label }}\n          </span>\n        </div>\n      </li>\n    </ul>\n  </div>\n</app-popover>\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\";::ng-deep .chip-capsule{background:#fff;border-radius:.125rem;border:1px solid #f4f8ff;box-shadow:0 0 2px #1e5dd326;height:1.5rem}::ng-deep .chip-capsule .cross{color:#747576;font-size:10px;margin-right:4px;cursor:pointer;min-width:16px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;background:transparent;border-radius:2px;margin-left:-4px}::ng-deep .chip-capsule .cross:hover{background:#f1f1f1}::ng-deep .chip-capsule .value{color:#000;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:7rem}::ng-deep .chip-capsule button.chip-count{background:#1e5dd3;border-radius:1.25rem;border:none;height:1rem;min-width:1.5rem}::ng-deep app-popover .action-list .action-item .avatar-card .value{display:flex;align-items:center;justify-content:space-between}::ng-deep app-popover .action-list .action-item .avatar-card .value i{font-size:12px!important;color:#747576;font-size:10px;margin-right:4px;cursor:pointer;min-width:16px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;background:transparent;border-radius:2px;margin-left:-4px}::ng-deep app-popover .action-list .action-item .avatar-card .value i:hover{background:#f1f1f1}\n"] }]
        }], propDecorators: { items: [{
                type: Input
            }], removable: [{
                type: Input
            }], remove: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 