var _subscription, _modelChanges;
import { __classPrivateFieldGet } from "tslib";
import { Component, ChangeDetectorRef, ChangeDetectionStrategy, ViewChild, HostListener, Input, Output, EventEmitter, ContentChild } from '@angular/core';
import { SdLabelDefDirective } from '@sd-angular/core/common';
import { Subject, Subscription } from 'rxjs';
import { startWith } from 'rxjs/operators';
export class SdSelectBadge {
    constructor(ref) {
        this.ref = ref;
        // Items
        this.items = [];
        this.modelChange = new EventEmitter();
        this.sdChange = new EventEmitter();
        this.sdSelection = new EventEmitter();
        _subscription.set(this, new Subscription());
        _modelChanges.set(this, new Subject());
        this.isShowContent = false;
        this.onToogle = () => {
            this.isShowContent = !this.isShowContent;
        };
        this.onModelChange = (val) => {
            this.modelChange.emit(val);
            this.sdChange.emit(val);
        };
    }
    set model(val) {
        if (this.value !== val) {
            this.value = val;
            __classPrivateFieldGet(this, _modelChanges).next(val);
        }
    }
    set _items(items) {
        if (!Array.isArray(items)) {
            this.items = [];
        }
        this.items = items;
    }
    clickout(event) {
        if (!this.selectbadge.nativeElement.contains(event.target)) {
            this.isShowContent = false;
        }
    }
    ngOnInit() {
        __classPrivateFieldGet(this, _subscription).add(__classPrivateFieldGet(this, _modelChanges).pipe(startWith(this.value)).subscribe(() => {
            var _a;
            this.selectedItem = (_a = this.items) === null || _a === void 0 ? void 0 : _a.find(e => { var _a, _b; return ((_a = this.value) === null || _a === void 0 ? void 0 : _a.toString()) === ((_b = e === null || e === void 0 ? void 0 : e[this.valueField]) === null || _b === void 0 ? void 0 : _b.toString()); });
        }));
    }
    onSelected(item) {
        var _a;
        this.selectedItem = item;
        const emitVal = this.selectedItem[this.valueField];
        this.modelChange.emit(emitVal);
        this.sdChange.emit(emitVal);
        this.sdSelection.emit({
            value: emitVal,
            item: (_a = this.items) === null || _a === void 0 ? void 0 : _a.find(e => { var _a; return (emitVal === null || emitVal === void 0 ? void 0 : emitVal.toString()) === ((_a = e === null || e === void 0 ? void 0 : e[this.valueField]) === null || _a === void 0 ? void 0 : _a.toString()); })
        });
    }
}
_subscription = new WeakMap(), _modelChanges = new WeakMap();
SdSelectBadge.decorators = [
    { type: Component, args: [{
                selector: 'sd-select-badge',
                template: "<ng-container *ngIf=\"sdLabelDef?.templateRef\">\r\n  <ng-container *ngTemplateOutlet=\"sdLabelDef.templateRef\">\r\n  </ng-container>\r\n</ng-container>\r\n<label *ngIf=\"label&&!sdLabelDef?.templateRef\" class=\"d-block mb-6 T14M\">{{label}}</label>\r\n<div #selectbadge class=\"c-selectbadge-dropdown\" (click)=\"onToogle()\">\r\n  <div class=\"c-selectbadge-dropdown__label\">\r\n    <div class=\"media align-items-center\">\r\n      <div class=\"media-body d-flex align-items-center\">\r\n        <ng-container *ngIf=\"selectedItem\">\r\n          <span class=\"c-selectbadge-icon c-badge mr-6\" [ngClass]=\"{\r\n            'material-icons-outlined': !selectedItem[iconColorField],\r\n            'material-icons-round': selectedItem[iconColorField],\r\n            'c-primary': selectedItem[iconColorField] === 'primary', \r\n            'c-black400': selectedItem[iconColorField] === 'normal', \r\n            'c-info': selectedItem[iconColorField] === 'info', \r\n            'c-success': selectedItem[iconColorField] === 'success', \r\n            'c-danger': selectedItem[iconColorField] === 'danger', \r\n            'c-warning': selectedItem[iconColorField] === 'warning'\r\n          }\">\r\n            {{selectedItem[iconField]}}\r\n          </span>\r\n          <span>{{selectedItem[displayField]}}</span>\r\n        </ng-container>\r\n      </div>\r\n      <span class=\"material-icons-outlined ml-6\">\r\n        arrow_drop_down\r\n      </span>\r\n    </div>\r\n\r\n  </div>\r\n  <div class=\"c-selectbadge-dropdown__content\" [ngClass]=\"isShowContent ? '' : 'd-none'\">\r\n    <div class=\"c-selectbadge-item media align-items-center py-12\" *ngFor=\"let item of items\"\r\n      (click)=\"onSelected(item)\">\r\n      <span class=\"c-selectbadge-icon c-badge\" [ngClass]=\"{\r\n        'material-icons-outlined': !item[iconColorField],\r\n        'material-icons-round': item[iconColorField],\r\n        'c-primary': item[iconColorField] === 'primary', \r\n        'c-black400': item[iconColorField] === 'normal', \r\n        'c-info': item[iconColorField] === 'info', \r\n        'c-success': item[iconColorField] === 'success', \r\n        'c-danger': item[iconColorField] === 'danger', \r\n        'c-warning': item[iconColorField] === 'warning'\r\n      }\">\r\n        <ng-container *ngIf=\"item[iconField]\">\r\n          {{item[iconField]}}\r\n        </ng-container>\r\n        <ng-container *ngIf=\"!item[iconField]\">\r\n          fiber_manual_record\r\n        </ng-container>\r\n      </span>\r\n\r\n      <div class=\"media-body ml-12\">\r\n        <div class=\"d-flex justify-content-between align-items-center\">\r\n          <div class=\"mr-16\">\r\n            <div class=\"c-selectbadge-item__title\">{{item[displayField]}}</div>\r\n            <div class=\"c-selectbadge-item__desc\">{{item[descriptionField]}}</div>\r\n          </div>\r\n          <span *ngIf=\"selectedItem && item[valueField] === selectedItem[valueField]\"\r\n            class=\"material-icons-outlined c-selectbadge-icon__checked\">check</span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>",
                changeDetection: ChangeDetectionStrategy.OnPush,
                styles: [".text-black400{color:#757575}.c-selectbadge-dropdown{color:#5f6368;cursor:pointer;display:inline-flex;position:relative}.c-selectbadge-dropdown__label{border:1px solid #dadce0;border-radius:18px;font-weight:500;height:36px;min-width:110px;padding:4px 8px}.c-selectbadge-dropdown__label:hover{background-color:rgba(32,33,36,.059)}.c-selectbadge-dropdown__label:active{background:rgba(32,33,36,.122)}.c-selectbadge-dropdown .c-selectbadge-icon{display:inline-block;font-size:18px}.c-selectbadge-dropdown .c-selectbadge-icon__checked{color:rgba(0,0,0,.5);font-size:16px}.c-selectbadge-dropdown .c-selectbadge-icon.c-primary{color:#2962ff}.c-selectbadge-dropdown .c-selectbadge-icon.c-black400{color:#757575}.c-selectbadge-dropdown .c-selectbadge-icon.c-info{color:#2962ff}.c-selectbadge-dropdown .c-selectbadge-icon.c-warning{color:#ff9600}.c-selectbadge-dropdown .c-selectbadge-icon.c-success{color:#4caf50}.c-selectbadge-dropdown .c-selectbadge-icon.c-danger{color:#f82c13}.c-selectbadge-dropdown__content{background-color:#fff;border-radius:3px;box-shadow:0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12),0 5px 5px -3px rgba(0,0,0,.2);display:block;left:0;min-width:160px;min-width:256px;padding:12px 0;position:absolute;top:36px;z-index:9}.c-selectbadge-dropdown__content .c-selectbadge-item{padding:16px 12px}.c-selectbadge-dropdown__content .c-selectbadge-item:hover{background-color:#eee;outline:1px dashed transparent}.c-selectbadge-dropdown__content .c-selectbadge-item__desc{color:rgba(0,0,0,.5);font-size:12px}"]
            },] }
];
SdSelectBadge.ctorParameters = () => [
    { type: ChangeDetectorRef }
];
SdSelectBadge.propDecorators = {
    selectbadge: [{ type: ViewChild, args: ['selectbadge',] }],
    label: [{ type: Input }],
    placeholder: [{ type: Input }],
    model: [{ type: Input }],
    _items: [{ type: Input, args: ['items',] }],
    valueField: [{ type: Input }],
    displayField: [{ type: Input }],
    iconField: [{ type: Input }],
    iconColorField: [{ type: Input }],
    descriptionField: [{ type: Input }],
    modelChange: [{ type: Output }],
    sdChange: [{ type: Output }],
    sdSelection: [{ type: Output }],
    sdLabelDef: [{ type: ContentChild, args: [SdLabelDefDirective,] }],
    clickout: [{ type: HostListener, args: ['document:click', ['$event'],] }]
};
//# sourceMappingURL=data:application/json;base64, 