import { Component, EventEmitter, forwardRef, Input, Output, TemplateRef } from '@angular/core';
import { assign } from 'lodash-es';
import { BsModalRef } from 'ngx-bootstrap/modal';
import { Subject } from 'rxjs';
import { debounceTime } from 'rxjs/operators';
import { gettext } from '../i18n/gettext';
import { PRODUCT_EXPERIENCE_EVENT_SOURCE } from '../product-experience/product-experience.model';
import { ModalSelectionMode } from './select-modal.model';
import * as i0 from "@angular/core";
import * as i1 from "ngx-bootstrap/modal";
import * as i2 from "../common/icon.directive";
import * as i3 from "../i18n/c8y-translate.directive";
import * as i4 from "@angular/common";
import * as i5 from "../list-group/list-group.component";
import * as i6 from "../list-group/list-item.component";
import * as i7 from "../list-group/list-item-icon.component";
import * as i8 from "../list-group/list-item-body.component";
import * as i9 from "../list-group/list-item-collapse.component";
import * as i10 from "../list-group/list-item-radio.component";
import * as i11 from "../search/highlight.component";
import * as i12 from "../forms/filter-input.component";
import * as i13 from "../product-experience/product-experience.directive";
import * as i14 from "../i18n/c8y-translate.pipe";
import * as i15 from "./select-modal-filter.pipe";
export class SelectModalComponent {
    set labels(labels) {
        const { ok = this.labels.ok, cancel = this.labels.cancel } = labels || {};
        this._labels = { ok, cancel };
    }
    get labels() {
        return this._labels;
    }
    constructor(bsModalRef) {
        this.bsModalRef = bsModalRef;
        this.subTitle = gettext('Select from the list of items matching the device type');
        this.mode = ModalSelectionMode.MULTI;
        this.disableSelected = true;
        this.showFilter = true;
        this.areMoreEntries = false;
        this.result = new EventEmitter();
        this.search = new EventEmitter();
        this.onChoiceUpdated = new EventEmitter();
        this.selected = false;
        this.filterTerm = '';
        this.listItems = [];
        this.productExperienceEvent = {
            eventName: undefined, // supress emitting events if a parent component does not declare event name
            data: {
                component: 'select-modal'
            }
        };
        this.debouncer = new Subject();
        this._labels = { ok: gettext('Confirm'), cancel: gettext('Cancel') };
        this.debouncer.pipe(debounceTime(500)).subscribe(value => {
            this.search.emit(value);
        });
    }
    async ngOnChanges(changes) {
        if (changes.items && changes.items.currentValue) {
            const itemsPromise = changes.items.currentValue.map(async (item) => {
                item.options = await item.options;
                const selected = item.options.find(option => option.selected);
                if (selected) {
                    item.selectedId = selected.obj.id;
                    if (this.disableSelected) {
                        item.options.map(option => assign(option, { disabled: true }));
                    }
                }
                return item;
            });
            this.listItems = await Promise.all(itemsPromise);
            this.emptyItemsOnly = this.listItems.every(item => !item.options || item.options.length === 0);
        }
        if (changes.title && !!this.productExperienceEvent?.data) {
            this.productExperienceEvent.data.title = changes.title.currentValue;
        }
    }
    updatePipe(filterTerm) {
        this.debouncer.next(filterTerm);
        this.filterTerm = filterTerm;
    }
    updateChoice({ item, id }) {
        if (this.mode === 'single') {
            this.listItems.map(value => (value.selectedId = undefined));
        }
        item.selectedId = id;
        this.selected = true;
        this.onChoiceUpdated.emit(item);
    }
    dismiss() {
        this.bsModalRef.hide();
    }
    select() {
        this.result.emit(this.getOutput());
        this.bsModalRef.hide();
    }
    ngOnDestroy() {
        this.debouncer.complete();
        this.result.complete();
        this.search.complete();
    }
    getOutput() {
        return this.listItems
            .filter(item => item.selectedId)
            .map(item => item.options.find(option => item.selectedId === option.obj.id))
            .filter(option => !option.selected)
            .map(selectedOption => selectedOption.obj);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SelectModalComponent, deps: [{ token: i1.BsModalRef }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SelectModalComponent, selector: "c8y-select-modal", inputs: { icon: "icon", title: "title", subTitle: "subTitle", items: "items", mode: "mode", disableSelected: "disableSelected", showFilter: "showFilter", additionalFilterTemplate: "additionalFilterTemplate", areMoreEntries: "areMoreEntries", labels: "labels", noItemsMessage: "noItemsMessage", hideEmptyItems: "hideEmptyItems" }, outputs: { result: "result", search: "search", onChoiceUpdated: "onChoiceUpdated" }, providers: [
            {
                provide: PRODUCT_EXPERIENCE_EVENT_SOURCE,
                useExisting: forwardRef(() => SelectModalComponent)
            }
        ], usesOnChanges: true, ngImport: i0, template: "<div class=\"viewport-modal\">\n  <div class=\"modal-header dialog-header\">\n    <i [c8yIcon]=\"icon\"></i>\n    <h1\n      class=\"h3\"\n      id=\"modal-title\"\n    >\n      {{ title | translate }}\n    </h1>\n  </div>\n  <div class=\"p-16 text-center separator-bottom min-height-fit\">\n    <p class=\"m-b-8\">{{ subTitle | translate }}</p>\n    <div class=\"row\">\n      <div\n        *ngIf=\"showFilter\"\n        [ngClass]=\"{\n          'col-xs-6': showFilter && additionalFilterTemplate,\n          'col-xs-12': !showFilter || !additionalFilterTemplate\n        }\"\n      >\n        <c8y-filter\n          [icon]=\"'search'\"\n          (onSearch)=\"updatePipe($event)\"\n        ></c8y-filter>\n      </div>\n      <div\n        *ngIf=\"additionalFilterTemplate\"\n        [ngClass]=\"{\n          'col-xs-6': showFilter && additionalFilterTemplate,\n          'col-xs-12': !showFilter || !additionalFilterTemplate\n        }\"\n      >\n        <ng-container *ngTemplateOutlet=\"additionalFilterTemplate\"></ng-container>\n      </div>\n    </div>\n  </div>\n  <div\n    class=\"modal-inner-scroll\"\n    id=\"modal-body\"\n  >\n    <div class=\"p-l-16 p-r-16\">\n      <div\n        class=\"panel m-t-8 m-b-8\"\n        *ngIf=\"!items || items.length === 0 || (emptyItemsOnly && hideEmptyItems)\"\n      >\n        <div class=\"c8y-empty-state text-left\">\n          <h1\n            class=\"c8y-icon-duocolor\"\n            c8yIcon=\"{{ icon }} \"\n          ></h1>\n          <p>{{ (noItemsMessage | translate) ?? 'No items to display.' | translate }}</p>\n        </div>\n      </div>\n    </div>\n    <c8y-list-group>\n      <ng-container *ngFor=\"let item of listItems | selectModalFilterPipe : filterTerm\">\n        <c8y-li *ngIf=\"item.options?.length > 0 || !hideEmptyItems\">\n          <c8y-li-icon>\n            <i c8yIcon=\"{{ icon }}\"></i>\n          </c8y-li-icon>\n\n          <c8y-li-body class=\"content-flex-30\">\n            <div class=\"col-9\">\n              <div\n                *ngFor=\"let bodyPart of item.body\"\n                [ngClass]=\"bodyPart.class\"\n              >\n                <c8y-highlight\n                  [title]=\"bodyPart.value\"\n                  [pattern]=\"filterTerm\"\n                  [text]=\"bodyPart.value\"\n                ></c8y-highlight>\n              </div>\n            </div>\n\n            <div\n              class=\"col-3 text-right\"\n              *ngIf=\"item.additionalInformation\"\n            >\n              <div [ngClass]=\"item.additionalInformation.class\">\n                {{ item.additionalInformation.value }}\n              </div>\n            </div>\n          </c8y-li-body>\n\n          <c8y-li-collapse *ngIf=\"item.options?.length > 0\">\n            <c8y-list-group>\n              <c8y-li *ngFor=\"let option of item.options\">\n                <c8y-li-radio\n                  [name]=\"mode === 'single' ? 'single' : item.groupId\"\n                  (onSelect)=\"updateChoice({ item: item, id: option.obj.id })\"\n                  [disabled]=\"option.disabled\"\n                  [selected]=\"option.selected\"\n                ></c8y-li-radio>\n                <c8y-li-body class=\"content-flex-20\">\n                  <div\n                    *ngFor=\"let optionPart of option.body; let i = index\"\n                    [ngClass]=\"optionPart.class\"\n                  >\n                    <c8y-highlight\n                      [pattern]=\"filterTerm\"\n                      [text]=\"optionPart.value\"\n                    ></c8y-highlight>\n                  </div>\n                  <ng-container\n                    *ngIf=\"option.template\"\n                    [ngTemplateOutlet]=\"option.template\"\n                    [ngTemplateOutletContext]=\"{ $implicit: item, option: option }\"\n                  ></ng-container>\n                </c8y-li-body>\n              </c8y-li>\n            </c8y-list-group>\n          </c8y-li-collapse>\n        </c8y-li>\n      </ng-container>\n      <div *ngIf=\"areMoreEntries\">\n        <div\n          class=\"alert alert-info m-t-16 m-r-8 m-l-8\"\n          translate\n        >\n          Some entries might not be shown. Try narrowing search criteria.\n        </div>\n      </div>\n    </c8y-list-group>\n  </div>\n\n  <div class=\"modal-footer\">\n    <button\n      class=\"btn btn-default\"\n      title=\"{{ labels.cancel | translate }}\"\n      type=\"button\"\n      data-cy=\"select-modal--Cancel-button\"\n      *ngIf=\"labels.cancel\"\n      (click)=\"dismiss()\"\n      c8yProductExperience\n      inherit\n      [actionData]=\"{ result: labels.cancel }\"\n    >\n      {{ labels.cancel | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary\"\n      title=\"{{ labels.ok | translate }}\"\n      type=\"button\"\n      data-cy=\"select-modal--Save-button\"\n      (click)=\"select()\"\n      [disabled]=\"!selected\"\n      c8yProductExperience\n      inherit\n      [actionData]=\"{ result: labels.ok }\"\n    >\n      {{ labels.ok | translate }}\n    </button>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i3.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5.ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: i6.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i7.ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "component", type: i8.ListItemBodyComponent, selector: "c8y-list-item-body, c8y-li-body", inputs: ["body"] }, { kind: "component", type: i9.ListItemCollapseComponent, selector: "c8y-list-item-collapse, c8y-li-collapse", inputs: ["collapseWay"] }, { kind: "component", type: i10.ListItemRadioComponent, selector: "c8y-list-item-radio, c8y-li-radio", inputs: ["selected", "name", "disabled", "value"], outputs: ["onSelect"] }, { kind: "component", type: i11.HighlightComponent, selector: "c8y-highlight", inputs: ["pattern", "text", "elementClass", "shouldTrimPattern"] }, { kind: "component", type: i12.FilterInputComponent, selector: "c8y-filter", inputs: ["icon", "filterTerm"], outputs: ["onSearch"] }, { kind: "directive", type: i13.ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit", "suppressDataOverriding"] }, { kind: "pipe", type: i14.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i15.SelectModalFilterPipe, name: "selectModalFilterPipe" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SelectModalComponent, decorators: [{
            type: Component,
            args: [{ selector: 'c8y-select-modal', providers: [
                        {
                            provide: PRODUCT_EXPERIENCE_EVENT_SOURCE,
                            useExisting: forwardRef(() => SelectModalComponent)
                        }
                    ], template: "<div class=\"viewport-modal\">\n  <div class=\"modal-header dialog-header\">\n    <i [c8yIcon]=\"icon\"></i>\n    <h1\n      class=\"h3\"\n      id=\"modal-title\"\n    >\n      {{ title | translate }}\n    </h1>\n  </div>\n  <div class=\"p-16 text-center separator-bottom min-height-fit\">\n    <p class=\"m-b-8\">{{ subTitle | translate }}</p>\n    <div class=\"row\">\n      <div\n        *ngIf=\"showFilter\"\n        [ngClass]=\"{\n          'col-xs-6': showFilter && additionalFilterTemplate,\n          'col-xs-12': !showFilter || !additionalFilterTemplate\n        }\"\n      >\n        <c8y-filter\n          [icon]=\"'search'\"\n          (onSearch)=\"updatePipe($event)\"\n        ></c8y-filter>\n      </div>\n      <div\n        *ngIf=\"additionalFilterTemplate\"\n        [ngClass]=\"{\n          'col-xs-6': showFilter && additionalFilterTemplate,\n          'col-xs-12': !showFilter || !additionalFilterTemplate\n        }\"\n      >\n        <ng-container *ngTemplateOutlet=\"additionalFilterTemplate\"></ng-container>\n      </div>\n    </div>\n  </div>\n  <div\n    class=\"modal-inner-scroll\"\n    id=\"modal-body\"\n  >\n    <div class=\"p-l-16 p-r-16\">\n      <div\n        class=\"panel m-t-8 m-b-8\"\n        *ngIf=\"!items || items.length === 0 || (emptyItemsOnly && hideEmptyItems)\"\n      >\n        <div class=\"c8y-empty-state text-left\">\n          <h1\n            class=\"c8y-icon-duocolor\"\n            c8yIcon=\"{{ icon }} \"\n          ></h1>\n          <p>{{ (noItemsMessage | translate) ?? 'No items to display.' | translate }}</p>\n        </div>\n      </div>\n    </div>\n    <c8y-list-group>\n      <ng-container *ngFor=\"let item of listItems | selectModalFilterPipe : filterTerm\">\n        <c8y-li *ngIf=\"item.options?.length > 0 || !hideEmptyItems\">\n          <c8y-li-icon>\n            <i c8yIcon=\"{{ icon }}\"></i>\n          </c8y-li-icon>\n\n          <c8y-li-body class=\"content-flex-30\">\n            <div class=\"col-9\">\n              <div\n                *ngFor=\"let bodyPart of item.body\"\n                [ngClass]=\"bodyPart.class\"\n              >\n                <c8y-highlight\n                  [title]=\"bodyPart.value\"\n                  [pattern]=\"filterTerm\"\n                  [text]=\"bodyPart.value\"\n                ></c8y-highlight>\n              </div>\n            </div>\n\n            <div\n              class=\"col-3 text-right\"\n              *ngIf=\"item.additionalInformation\"\n            >\n              <div [ngClass]=\"item.additionalInformation.class\">\n                {{ item.additionalInformation.value }}\n              </div>\n            </div>\n          </c8y-li-body>\n\n          <c8y-li-collapse *ngIf=\"item.options?.length > 0\">\n            <c8y-list-group>\n              <c8y-li *ngFor=\"let option of item.options\">\n                <c8y-li-radio\n                  [name]=\"mode === 'single' ? 'single' : item.groupId\"\n                  (onSelect)=\"updateChoice({ item: item, id: option.obj.id })\"\n                  [disabled]=\"option.disabled\"\n                  [selected]=\"option.selected\"\n                ></c8y-li-radio>\n                <c8y-li-body class=\"content-flex-20\">\n                  <div\n                    *ngFor=\"let optionPart of option.body; let i = index\"\n                    [ngClass]=\"optionPart.class\"\n                  >\n                    <c8y-highlight\n                      [pattern]=\"filterTerm\"\n                      [text]=\"optionPart.value\"\n                    ></c8y-highlight>\n                  </div>\n                  <ng-container\n                    *ngIf=\"option.template\"\n                    [ngTemplateOutlet]=\"option.template\"\n                    [ngTemplateOutletContext]=\"{ $implicit: item, option: option }\"\n                  ></ng-container>\n                </c8y-li-body>\n              </c8y-li>\n            </c8y-list-group>\n          </c8y-li-collapse>\n        </c8y-li>\n      </ng-container>\n      <div *ngIf=\"areMoreEntries\">\n        <div\n          class=\"alert alert-info m-t-16 m-r-8 m-l-8\"\n          translate\n        >\n          Some entries might not be shown. Try narrowing search criteria.\n        </div>\n      </div>\n    </c8y-list-group>\n  </div>\n\n  <div class=\"modal-footer\">\n    <button\n      class=\"btn btn-default\"\n      title=\"{{ labels.cancel | translate }}\"\n      type=\"button\"\n      data-cy=\"select-modal--Cancel-button\"\n      *ngIf=\"labels.cancel\"\n      (click)=\"dismiss()\"\n      c8yProductExperience\n      inherit\n      [actionData]=\"{ result: labels.cancel }\"\n    >\n      {{ labels.cancel | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary\"\n      title=\"{{ labels.ok | translate }}\"\n      type=\"button\"\n      data-cy=\"select-modal--Save-button\"\n      (click)=\"select()\"\n      [disabled]=\"!selected\"\n      c8yProductExperience\n      inherit\n      [actionData]=\"{ result: labels.ok }\"\n    >\n      {{ labels.ok | translate }}\n    </button>\n  </div>\n</div>\n" }]
        }], ctorParameters: () => [{ type: i1.BsModalRef }], propDecorators: { icon: [{
                type: Input
            }], title: [{
                type: Input
            }], subTitle: [{
                type: Input
            }], items: [{
                type: Input
            }], mode: [{
                type: Input
            }], disableSelected: [{
                type: Input
            }], showFilter: [{
                type: Input
            }], additionalFilterTemplate: [{
                type: Input
            }], areMoreEntries: [{
                type: Input
            }], labels: [{
                type: Input
            }], noItemsMessage: [{
                type: Input
            }], hideEmptyItems: [{
                type: Input
            }], result: [{
                type: Output
            }], search: [{
                type: Output
            }], onChoiceUpdated: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 