import { Component, Input, ElementRef, ViewChild } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "../cs-multiselect/cs-multiselect.component";
export class CsMultiselectOptionComponent {
    constructor(select) {
        this.select = select;
    }
    change(event) {
        if (event.target.checked) {
            this.select.addValue({
                key: this.option.nativeElement.innerHTML.replace(/&lt;/g, "<"),
                value: this.value,
            });
        }
        else {
            this.select.removeValueFromCheckbox(this.value);
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CsMultiselectOptionComponent, deps: [{ token: i1.CsMultiselectComponent }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CsMultiselectOptionComponent, selector: "cs-multi-select-option", inputs: { value: "value" }, viewQueries: [{ propertyName: "option", first: true, predicate: ["options"], descendants: true, read: ElementRef }], ngImport: i0, template: "<li>\n  <label class=\"multi-select\">\n    <input type=\"checkbox\" tabindex=\"0\" [value]=\"value\" [checked]=\"select.value.includes(value)\" (change)=\"change($event)\" />\n    <span class=\"checkbox\"></span>\n    <span class=\"value\" #options>\n      <ng-content> </ng-content>\n    </span>\n  </label>\n</li>\n", styles: ["li{width:100%;display:block;margin-bottom:0;padding:0;height:auto}li label{line-height:23px;font-size:13px;font-weight:400;border-radius:4px;display:flex;position:relative;margin:0;align-items:center}li label input[type=checkbox]{position:absolute;margin:0;height:100%;width:100%;opacity:0;cursor:pointer;pointer-events:none}li label input[type=checkbox]:checked+span,li label input[type=checkbox]:hover+span{background:#dcdcdc}li label span.value{color:#161b2f;font-size:12px;line-height:20px;font-weight:400;max-width:100%;white-space:nowrap;overflow:hidden;display:block;text-overflow:ellipsis;padding:4px 8px;width:100%;text-transform:none;cursor:pointer;text-align:left}li label.multi-select{padding:0 8px}li label.multi-select span.checkbox{background:#fff!important;display:inline-block;border:1px solid #dbdbdb;border-radius:2px;height:16px;width:16px;position:relative;padding:2px}li label input[type=checkbox]{position:absolute;margin:0;height:100%;width:100%;opacity:0;cursor:pointer}li label input[type=checkbox]:checked+span{background:#dcdcdc}li label input[type=checkbox]:checked+span.checkbox{border-color:#34aa44;background:#34aa44!important}li label input[type=checkbox]:checked+span.checkbox:after{width:8px;height:3px;border-bottom:2px solid #ffffff;border-left:2px solid #ffffff;transform:rotate(-45deg);content:\"\";position:absolute;top:3px;left:2px}li:hover label{background:#f1f1f1}\n"] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CsMultiselectOptionComponent, decorators: [{
            type: Component,
            args: [{ selector: 'cs-multi-select-option', template: "<li>\n  <label class=\"multi-select\">\n    <input type=\"checkbox\" tabindex=\"0\" [value]=\"value\" [checked]=\"select.value.includes(value)\" (change)=\"change($event)\" />\n    <span class=\"checkbox\"></span>\n    <span class=\"value\" #options>\n      <ng-content> </ng-content>\n    </span>\n  </label>\n</li>\n", styles: ["li{width:100%;display:block;margin-bottom:0;padding:0;height:auto}li label{line-height:23px;font-size:13px;font-weight:400;border-radius:4px;display:flex;position:relative;margin:0;align-items:center}li label input[type=checkbox]{position:absolute;margin:0;height:100%;width:100%;opacity:0;cursor:pointer;pointer-events:none}li label input[type=checkbox]:checked+span,li label input[type=checkbox]:hover+span{background:#dcdcdc}li label span.value{color:#161b2f;font-size:12px;line-height:20px;font-weight:400;max-width:100%;white-space:nowrap;overflow:hidden;display:block;text-overflow:ellipsis;padding:4px 8px;width:100%;text-transform:none;cursor:pointer;text-align:left}li label.multi-select{padding:0 8px}li label.multi-select span.checkbox{background:#fff!important;display:inline-block;border:1px solid #dbdbdb;border-radius:2px;height:16px;width:16px;position:relative;padding:2px}li label input[type=checkbox]{position:absolute;margin:0;height:100%;width:100%;opacity:0;cursor:pointer}li label input[type=checkbox]:checked+span{background:#dcdcdc}li label input[type=checkbox]:checked+span.checkbox{border-color:#34aa44;background:#34aa44!important}li label input[type=checkbox]:checked+span.checkbox:after{width:8px;height:3px;border-bottom:2px solid #ffffff;border-left:2px solid #ffffff;transform:rotate(-45deg);content:\"\";position:absolute;top:3px;left:2px}li:hover label{background:#f1f1f1}\n"] }]
        }], ctorParameters: function () { return [{ type: i1.CsMultiselectComponent }]; }, propDecorators: { value: [{
                type: Input
            }], option: [{
                type: ViewChild,
                args: ['options', { read: ElementRef, static: false }]
            }] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY3MtbXVsdGlzZWxlY3Qtb3B0aW9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3Z4LXdvcmtmbG93LWVuZ2luZS9zcmMvbGliL3VpLWtpdC9tdWx0aS1zZWxlY3QvY3MtbXVsdGlzZWxlY3Qtb3B0aW9uL2NzLW11bHRpc2VsZWN0LW9wdGlvbi5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy92eC13b3JrZmxvdy1lbmdpbmUvc3JjL2xpYi91aS1raXQvbXVsdGktc2VsZWN0L2NzLW11bHRpc2VsZWN0LW9wdGlvbi9jcy1tdWx0aXNlbGVjdC1vcHRpb24uY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsVUFBVSxFQUFFLFNBQVMsRUFBRSxNQUFNLGVBQWUsQ0FBQzs7O0FBT3hFLE1BQU0sT0FBTyw0QkFBNEI7SUFJdkMsWUFBbUIsTUFBOEI7UUFBOUIsV0FBTSxHQUFOLE1BQU0sQ0FBd0I7SUFBRyxDQUFDO0lBRXJELE1BQU0sQ0FBQyxLQUFVO1FBQ2YsSUFBSSxLQUFLLENBQUMsTUFBTSxDQUFDLE9BQU8sRUFBRTtZQUN4QixJQUFJLENBQUMsTUFBTSxDQUFDLFFBQVEsQ0FBQztnQkFDbkIsR0FBRyxFQUFFLElBQUksQ0FBQyxNQUFNLENBQUMsYUFBYSxDQUFDLFNBQVMsQ0FBQyxPQUFPLENBQUMsT0FBTyxFQUFDLEdBQUcsQ0FBQztnQkFDN0QsS0FBSyxFQUFFLElBQUksQ0FBQyxLQUFLO2FBQ2xCLENBQUMsQ0FBQztTQUNKO2FBQU07WUFDTCxJQUFJLENBQUMsTUFBTSxDQUFDLHVCQUF1QixDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztTQUNqRDtJQUNILENBQUM7K0dBZlUsNEJBQTRCO21HQUE1Qiw0QkFBNEIsd0tBRVQsVUFBVSw2QkNUMUMsZ1VBU0E7OzRGREZhLDRCQUE0QjtrQkFMeEMsU0FBUzsrQkFDRSx3QkFBd0I7NkdBS3pCLEtBQUs7c0JBQWIsS0FBSztnQkFFTixNQUFNO3NCQURMLFNBQVM7dUJBQUMsU0FBUyxFQUFFLEVBQUUsSUFBSSxFQUFFLFVBQVUsRUFBRSxNQUFNLEVBQUUsS0FBSyxFQUFFIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBJbnB1dCwgRWxlbWVudFJlZiwgVmlld0NoaWxkIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBDc011bHRpc2VsZWN0Q29tcG9uZW50IH0gZnJvbSAnLi4vY3MtbXVsdGlzZWxlY3QvY3MtbXVsdGlzZWxlY3QuY29tcG9uZW50JztcbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2NzLW11bHRpLXNlbGVjdC1vcHRpb24nLFxuICB0ZW1wbGF0ZVVybDogJy4vY3MtbXVsdGlzZWxlY3Qtb3B0aW9uLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vY3MtbXVsdGlzZWxlY3Qtb3B0aW9uLmNvbXBvbmVudC5sZXNzJ10sXG59KVxuZXhwb3J0IGNsYXNzIENzTXVsdGlzZWxlY3RPcHRpb25Db21wb25lbnQge1xuICBASW5wdXQoKSB2YWx1ZSE6IGFueTtcbiAgQFZpZXdDaGlsZCgnb3B0aW9ucycsIHsgcmVhZDogRWxlbWVudFJlZiwgc3RhdGljOiBmYWxzZSB9KVxuICBvcHRpb24hOiBFbGVtZW50UmVmO1xuICBjb25zdHJ1Y3RvcihwdWJsaWMgc2VsZWN0OiBDc011bHRpc2VsZWN0Q29tcG9uZW50KSB7fVxuXG4gIGNoYW5nZShldmVudDogYW55KTogdm9pZCB7XG4gICAgaWYgKGV2ZW50LnRhcmdldC5jaGVja2VkKSB7XG4gICAgICB0aGlzLnNlbGVjdC5hZGRWYWx1ZSh7XG4gICAgICAgIGtleTogdGhpcy5vcHRpb24ubmF0aXZlRWxlbWVudC5pbm5lckhUTUwucmVwbGFjZSgvJmx0Oy9nLFwiPFwiKSxcbiAgICAgICAgdmFsdWU6IHRoaXMudmFsdWUsXG4gICAgICB9KTtcbiAgICB9IGVsc2Uge1xuICAgICAgdGhpcy5zZWxlY3QucmVtb3ZlVmFsdWVGcm9tQ2hlY2tib3godGhpcy52YWx1ZSk7XG4gICAgfVxuICB9XG59XG4iLCI8bGk+XG4gIDxsYWJlbCBjbGFzcz1cIm11bHRpLXNlbGVjdFwiPlxuICAgIDxpbnB1dCB0eXBlPVwiY2hlY2tib3hcIiB0YWJpbmRleD1cIjBcIiBbdmFsdWVdPVwidmFsdWVcIiBbY2hlY2tlZF09XCJzZWxlY3QudmFsdWUuaW5jbHVkZXModmFsdWUpXCIgKGNoYW5nZSk9XCJjaGFuZ2UoJGV2ZW50KVwiIC8+XG4gICAgPHNwYW4gY2xhc3M9XCJjaGVja2JveFwiPjwvc3Bhbj5cbiAgICA8c3BhbiBjbGFzcz1cInZhbHVlXCIgI29wdGlvbnM+XG4gICAgICA8bmctY29udGVudD4gPC9uZy1jb250ZW50PlxuICAgIDwvc3Bhbj5cbiAgPC9sYWJlbD5cbjwvbGk+XG4iXX0=