import * as i0 from '@angular/core';
import { Input, Component, EventEmitter, Output, NgModule } from '@angular/core';
import { gettext } from '@c8y/ngx-components/gettext';
import { BulkOperationType, hookListBulkType, baseUrl } from '@c8y/ngx-components/operations/bulk-operations-service';
import { get, uniqWith, isEqual } from 'lodash-es';
import { ListGroupComponent, ListItemComponent, ListItemIconComponent, IconDirective, ListItemBodyComponent, C8yTranslateDirective, C8yTranslatePipe, FormGroupComponent, TypeaheadComponent, HighlightComponent, MessagesComponent, MessageDirective, ForOfDirective, ListItemRadioComponent } from '@c8y/ngx-components';
import * as i1 from '@ngx-translate/core';
import { PreviewSelectionFrameComponent, PreviewBlockDirective, SelectStepFrameComponent } from '@c8y/ngx-components/operations/stepper-frames';
import { NgIf, NgFor, AsyncPipe } from '@angular/common';
import { BehaviorSubject, combineLatest, from } from 'rxjs';
import { switchMap, shareReplay, debounceTime, distinctUntilChanged } from 'rxjs/operators';
import * as i1$1 from '@c8y/ngx-components/device-profile';
import * as i3 from '@angular/forms';
import { FormsModule } from '@angular/forms';
import { BaseStepperComponent, BulkOperationStepper, CustomStep } from '@c8y/ngx-components/operations/bulk-operation-stepper';

class ConfirmDeviceProfileSelectionStepComponent {
    constructor(translate) {
        this.translate = translate;
        this.DEVICE_TYPE_NOT_DEFINED = gettext('Device type not defined');
    }
    get softwares() {
        return get(this.selectedDeviceProfile, ['c8y_DeviceProfile', 'software'], []);
    }
    get configurations() {
        return get(this.selectedDeviceProfile, ['c8y_DeviceProfile', 'configuration'], []);
    }
    getDeviceTypeTitle(deviceProfile) {
        return get(deviceProfile, 'c8y_Filter.type', this.translate.instant(this.DEVICE_TYPE_NOT_DEFINED));
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ConfirmDeviceProfileSelectionStepComponent, deps: [{ token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: ConfirmDeviceProfileSelectionStepComponent, isStandalone: true, selector: "c8y-confirm-device-profile-selection-step", inputs: { selectedDeviceProfile: "selectedDeviceProfile" }, ngImport: i0, template: "<c8y-preview-selection-frame\n  [header]=\"'Confirm selection' | translate\"\n  [name]=\"selectedDeviceProfile?.name\"\n>\n  <ng-container *previewBlock=\"'Device type' | translate\">\n    <ng-container *ngIf=\"selectedDeviceProfile?.c8y_Filter?.type; else noType\">\n      <span>{{ selectedDeviceProfile.c8y_Filter.type }}</span>\n    </ng-container>\n    <ng-template #noType> --- </ng-template>\n  </ng-container>\n  <c8y-list-group\n    *previewBlock=\"'Firmware' | translate; if: selectedDeviceProfile?.c8y_DeviceProfile.firmware\"\n  >\n    <c8y-li>\n      <c8y-li-icon>\n        <i c8yIcon=\"c8y-firmware\"></i>\n      </c8y-li-icon>\n      <c8y-li-body class=\"content-flex-500\">\n        <div class=\"col-5\">\n          {{ selectedDeviceProfile.c8y_DeviceProfile.firmware.name }}\n        </div>\n        <div class=\"col-5\">\n          <span class=\"text-label-small m-r-8\" translate> Version </span>\n          <span>\n            {{ selectedDeviceProfile.c8y_DeviceProfile.firmware.version }}\n          </span>\n        </div>\n      </c8y-li-body>\n    </c8y-li>\n  </c8y-list-group>\n  <c8y-list-group *previewBlock=\"'Software' | translate; if: softwares?.length\">\n    <c8y-li *ngFor=\"let software of softwares\">\n      <c8y-li-icon>\n        <i c8yIcon=\"c8y-tools\"></i>\n      </c8y-li-icon>\n      <c8y-li-body class=\"content-flex-500\">\n        <div class=\"col-5\">\n          {{ software.name }}\n        </div>\n        <div class=\"col-5\">\n          <span class=\"text-label-small m-r-8\" translate> Version </span>\n          <span>\n            {{ software.version }}\n          </span>\n        </div>\n      </c8y-li-body>\n    </c8y-li>\n  </c8y-list-group>\n  <c8y-list-group *previewBlock=\"'Configuration' | translate; if: configurations?.length\">\n    <c8y-li *ngFor=\"let configuration of configurations\">\n      <c8y-li-icon>\n        <i c8yIcon=\"c8y-tools\"></i>\n      </c8y-li-icon>\n      <c8y-li-body class=\"content-flex-500\">\n        <div class=\"col-5\">\n          {{ configuration.name }}\n        </div>\n        <div class=\"col-5\">\n          <span class=\"label label-info\" *ngIf=\"configuration.type\">\n            {{ configuration.type }}\n          </span>\n        </div>\n      </c8y-li-body>\n    </c8y-li>\n  </c8y-list-group>\n</c8y-preview-selection-frame>\n", dependencies: [{ kind: "component", type: PreviewSelectionFrameComponent, selector: "c8y-preview-selection-frame", inputs: ["header", "name", "description", "type"] }, { kind: "directive", type: PreviewBlockDirective, selector: "[previewBlock]", inputs: ["previewBlock", "previewBlockIf"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "component", type: ListItemBodyComponent, selector: "c8y-list-item-body, c8y-li-body", inputs: ["body"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ConfirmDeviceProfileSelectionStepComponent, decorators: [{
            type: Component,
            args: [{ selector: 'c8y-confirm-device-profile-selection-step', imports: [
                        PreviewSelectionFrameComponent,
                        PreviewBlockDirective,
                        NgIf,
                        ListGroupComponent,
                        ListItemComponent,
                        ListItemIconComponent,
                        IconDirective,
                        ListItemBodyComponent,
                        C8yTranslateDirective,
                        NgFor,
                        C8yTranslatePipe
                    ], template: "<c8y-preview-selection-frame\n  [header]=\"'Confirm selection' | translate\"\n  [name]=\"selectedDeviceProfile?.name\"\n>\n  <ng-container *previewBlock=\"'Device type' | translate\">\n    <ng-container *ngIf=\"selectedDeviceProfile?.c8y_Filter?.type; else noType\">\n      <span>{{ selectedDeviceProfile.c8y_Filter.type }}</span>\n    </ng-container>\n    <ng-template #noType> --- </ng-template>\n  </ng-container>\n  <c8y-list-group\n    *previewBlock=\"'Firmware' | translate; if: selectedDeviceProfile?.c8y_DeviceProfile.firmware\"\n  >\n    <c8y-li>\n      <c8y-li-icon>\n        <i c8yIcon=\"c8y-firmware\"></i>\n      </c8y-li-icon>\n      <c8y-li-body class=\"content-flex-500\">\n        <div class=\"col-5\">\n          {{ selectedDeviceProfile.c8y_DeviceProfile.firmware.name }}\n        </div>\n        <div class=\"col-5\">\n          <span class=\"text-label-small m-r-8\" translate> Version </span>\n          <span>\n            {{ selectedDeviceProfile.c8y_DeviceProfile.firmware.version }}\n          </span>\n        </div>\n      </c8y-li-body>\n    </c8y-li>\n  </c8y-list-group>\n  <c8y-list-group *previewBlock=\"'Software' | translate; if: softwares?.length\">\n    <c8y-li *ngFor=\"let software of softwares\">\n      <c8y-li-icon>\n        <i c8yIcon=\"c8y-tools\"></i>\n      </c8y-li-icon>\n      <c8y-li-body class=\"content-flex-500\">\n        <div class=\"col-5\">\n          {{ software.name }}\n        </div>\n        <div class=\"col-5\">\n          <span class=\"text-label-small m-r-8\" translate> Version </span>\n          <span>\n            {{ software.version }}\n          </span>\n        </div>\n      </c8y-li-body>\n    </c8y-li>\n  </c8y-list-group>\n  <c8y-list-group *previewBlock=\"'Configuration' | translate; if: configurations?.length\">\n    <c8y-li *ngFor=\"let configuration of configurations\">\n      <c8y-li-icon>\n        <i c8yIcon=\"c8y-tools\"></i>\n      </c8y-li-icon>\n      <c8y-li-body class=\"content-flex-500\">\n        <div class=\"col-5\">\n          {{ configuration.name }}\n        </div>\n        <div class=\"col-5\">\n          <span class=\"label label-info\" *ngIf=\"configuration.type\">\n            {{ configuration.type }}\n          </span>\n        </div>\n      </c8y-li-body>\n    </c8y-li>\n  </c8y-list-group>\n</c8y-preview-selection-frame>\n" }]
        }], ctorParameters: () => [{ type: i1.TranslateService }], propDecorators: { selectedDeviceProfile: [{
                type: Input
            }] } });

class SelectDeviceProfileStepComponent {
    constructor(deviceProfileService, translate) {
        this.deviceProfileService = deviceProfileService;
        this.translate = translate;
        this.deviceProfile = new EventEmitter();
        this.textFilter$ = new BehaviorSubject('');
        this.deviceType$ = new BehaviorSubject('');
        this.DEVICE_TYPE_NOT_DEFINED = gettext('Device type not defined');
        this.deviceTypes = [];
        this.selectedDeviceType = { name: '' };
        this.deviceProfile$ = combineLatest(this.textFilter$, this.deviceType$).pipe(switchMap(([name, deviceType]) => this.getDeviceProfiles(name, deviceType)), shareReplay(1));
        this.loadDeviceTypes();
    }
    loadDeviceTypes() {
        this.deviceTypeSubscription = this.deviceType$
            .pipe(debounceTime(300), distinctUntilChanged(), switchMap(searchStr => {
            const query = { 'c8y_Filter.type': `*${searchStr}*` };
            return from(this.deviceProfileService.getDeviceProfiles(query));
        }))
            .subscribe(({ data }) => {
            this.deviceTypes = uniqWith(data.map(val => ({ name: val.c8y_Filter.type })).filter(val => val.name), isEqual);
        });
    }
    ngOnDestroy() {
        this.deviceTypeSubscription.unsubscribe();
    }
    selectDeviceProfile(deviceProfile) {
        this.deviceProfile.emit(deviceProfile);
    }
    getDeviceTypeTitle(deviceProfile) {
        return get(deviceProfile, 'c8y_Filter.type', this.translate.instant(this.DEVICE_TYPE_NOT_DEFINED));
    }
    getDeviceProfiles(name, deviceType) {
        const query = deviceType ? { 'c8y_Filter.type': deviceType } : {};
        if (name) {
            query.name = `*${name}*`;
        }
        return this.deviceProfileService.getDeviceProfiles(query);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: SelectDeviceProfileStepComponent, deps: [{ token: i1$1.DeviceProfileService }, { token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: SelectDeviceProfileStepComponent, isStandalone: true, selector: "c8y-select-device-profile-step", outputs: { deviceProfile: "deviceProfile" }, ngImport: i0, template: "<c8y-select-step-frame\n  [header]=\"'Select device profile' | translate\"\n  [noResults]=\"\n    ((textFilter$ | async)?.length || (deviceType$ | async)?.length) &&\n    (deviceProfile$ | async)?.data.length === 0\n  \"\n>\n  <div\n    class=\"row\"\n    filters\n  >\n    <div class=\"col-md-6 m-b-xs-8 m-b-sm-8\">\n      <div class=\"input-group input-group-search\">\n        <input\n          class=\"form-control\"\n          title=\"{{ 'Filter\u2026' | translate }}\"\n          placeholder=\"{{ 'Filter\u2026' | translate }}\"\n          type=\"search\"\n          [ngModel]=\"textFilter$ | async\"\n          (ngModelChange)=\"textFilter$.next($event)\"\n        />\n        <span class=\"input-group-addon\">\n          <i\n            c8yIcon=\"search\"\n            *ngIf=\"(textFilter$ | async).length === 0\"\n          ></i>\n          <i\n            class=\"text-muted\"\n            c8yIcon=\"times\"\n            *ngIf=\"(textFilter$ | async).length\"\n            (click)=\"textFilter$.next('')\"\n          ></i>\n        </span>\n      </div>\n    </div>\n    <div class=\"col-md-6 m-b-xs-8 m-b-sm-8\">\n      <c8y-form-group class=\"m-0\">\n        <c8y-typeahead\n          placeholder=\"{{ 'Type to filter device types\u2026' | translate }}\"\n          name=\"deviceType\"\n          [(ngModel)]=\"selectedDeviceType\"\n          (onSearch)=\"deviceType$.next($event)\"\n          [allowFreeEntries]=\"false\"\n        >\n          <c8y-li\n            class=\"p-l-8 p-r-8 c8y-list__item--link\"\n            (click)=\"selectedDeviceType = { name: '' }; deviceType$.next('')\"\n          >\n            <span>{{ 'All device types' | translate }}</span>\n          </c8y-li>\n          <c8y-li\n            class=\"p-l-8 p-r-8 c8y-list__item--link\"\n            *ngFor=\"let deviceType of deviceTypes\"\n            (click)=\"selectedDeviceType = deviceType; deviceType$.next(deviceType.name)\"\n            [active]=\"selectedDeviceType === deviceType\"\n          >\n            <c8y-highlight\n              [text]=\"deviceType.name\"\n              [pattern]=\"deviceType$ | async\"\n            ></c8y-highlight>\n          </c8y-li>\n        </c8y-typeahead>\n        <c8y-messages>\n          <c8y-message\n            name=\"notExisting\"\n            [text]=\"'Select one of the existing device types.' | translate\"\n          ></c8y-message>\n        </c8y-messages>\n      </c8y-form-group>\n    </div>\n  </div>\n  <c8y-li\n    class=\"hidden-sm hidden-xs m-r-8 m-l-8\"\n    header\n  >\n    <c8y-li-icon><i class=\"p-l-32 p-r-40\"></i></c8y-li-icon>\n    <c8y-li-body class=\"content-flex-40\">\n      <div class=\"col-5\">\n        <span\n          class=\"text-truncate\"\n          title=\" {{ 'Name' | translate }} \"\n        >\n          {{ 'Name' | translate }}\n        </span>\n      </div>\n      <div class=\"col-3\">\n        <span\n          class=\"text-truncate\"\n          title=\"{{ 'Device type' | translate }}\"\n        >\n          {{ 'Device type' | translate }}\n        </span>\n      </div>\n    </c8y-li-body>\n  </c8y-li>\n  <c8y-list-group list>\n    <c8y-li *c8yFor=\"let deviceProfile of deviceProfile$ | async; loadMore: 'auto'\">\n      <c8y-li-radio (onSelect)=\"selectDeviceProfile(deviceProfile)\"></c8y-li-radio>\n      <c8y-li-icon>\n        <i c8yIcon=\"c8y-device-profile\"></i>\n      </c8y-li-icon>\n      <c8y-li-body class=\"content-flex-40\">\n        <div class=\"col-5 m-b-xs-8\">\n          <div\n            class=\"text-truncate\"\n            title=\"{{ deviceProfile.name }}\"\n          >\n            {{ deviceProfile.name }}\n          </div>\n        </div>\n        <div class=\"col-3 m-b-xs-8\">\n          <div\n            class=\"text-truncate\"\n            title=\"{{ 'Device type' | translate }}: {{ getDeviceTypeTitle(deviceProfile) }}\"\n          >\n            <span\n              class=\"text-label-small m-r-8 visible-xs visible-sm\"\n              translate\n            >\n              Device type\n            </span>\n            <span *ngIf=\"deviceProfile.c8y_Filter?.type; else noType\">\n              {{ deviceProfile.c8y_Filter?.type }}\n            </span>\n            <ng-template #noType>\n              <small>\n                <em\n                  class=\"text-muted\"\n                  translate\n                >\n                  Undefined`device type`\n                </em>\n              </small>\n            </ng-template>\n          </div>\n        </div>\n      </c8y-li-body>\n    </c8y-li>\n  </c8y-list-group>\n</c8y-select-step-frame>\n", dependencies: [{ kind: "component", type: SelectStepFrameComponent, selector: "c8y-select-step-frame", inputs: ["header", "noResults"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "component", type: TypeaheadComponent, selector: "c8y-typeahead", inputs: ["required", "maxlength", "disabled", "allowFreeEntries", "placeholder", "displayProperty", "icon", "name", "autoClose", "hideNew", "container", "selected", "title", "highlightFirstItem"], outputs: ["onSearch", "onIconClick"] }, { kind: "component", type: ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: HighlightComponent, selector: "c8y-highlight", inputs: ["pattern", "text", "elementClass", "shouldTrimPattern"] }, { kind: "component", type: MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage"] }, { kind: "directive", type: MessageDirective, selector: "c8y-message", inputs: ["name", "text"] }, { kind: "component", type: ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "component", type: ListItemBodyComponent, selector: "c8y-list-item-body, c8y-li-body", inputs: ["body"] }, { kind: "component", type: ListGroupComponent, selector: "c8y-list-group" }, { kind: "directive", type: ForOfDirective, selector: "[c8yFor]", inputs: ["c8yForOf", "c8yForLoadMore", "c8yForPipe", "c8yForNotFound", "c8yForMaxIterations", "c8yForLoadingTemplate", "c8yForLoadNextLabel", "c8yForLoadingLabel", "c8yForRealtime", "c8yForRealtimeOptions", "c8yForComparator", "c8yForEnableVirtualScroll", "c8yForVirtualScrollElementSize", "c8yForVirtualScrollStrategy", "c8yForVirtualScrollContainerHeight"], outputs: ["c8yForCount", "c8yForChange", "c8yForLoadMoreComponent"] }, { kind: "component", type: ListItemRadioComponent, selector: "c8y-list-item-radio, c8y-li-radio", inputs: ["selected", "name", "disabled", "value"], outputs: ["onSelect"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: SelectDeviceProfileStepComponent, decorators: [{
            type: Component,
            args: [{ selector: 'c8y-select-device-profile-step', imports: [
                        SelectStepFrameComponent,
                        FormsModule,
                        NgIf,
                        IconDirective,
                        FormGroupComponent,
                        TypeaheadComponent,
                        ListItemComponent,
                        NgFor,
                        HighlightComponent,
                        MessagesComponent,
                        MessageDirective,
                        ListItemIconComponent,
                        ListItemBodyComponent,
                        ListGroupComponent,
                        ForOfDirective,
                        ListItemRadioComponent,
                        C8yTranslateDirective,
                        C8yTranslatePipe,
                        AsyncPipe
                    ], template: "<c8y-select-step-frame\n  [header]=\"'Select device profile' | translate\"\n  [noResults]=\"\n    ((textFilter$ | async)?.length || (deviceType$ | async)?.length) &&\n    (deviceProfile$ | async)?.data.length === 0\n  \"\n>\n  <div\n    class=\"row\"\n    filters\n  >\n    <div class=\"col-md-6 m-b-xs-8 m-b-sm-8\">\n      <div class=\"input-group input-group-search\">\n        <input\n          class=\"form-control\"\n          title=\"{{ 'Filter\u2026' | translate }}\"\n          placeholder=\"{{ 'Filter\u2026' | translate }}\"\n          type=\"search\"\n          [ngModel]=\"textFilter$ | async\"\n          (ngModelChange)=\"textFilter$.next($event)\"\n        />\n        <span class=\"input-group-addon\">\n          <i\n            c8yIcon=\"search\"\n            *ngIf=\"(textFilter$ | async).length === 0\"\n          ></i>\n          <i\n            class=\"text-muted\"\n            c8yIcon=\"times\"\n            *ngIf=\"(textFilter$ | async).length\"\n            (click)=\"textFilter$.next('')\"\n          ></i>\n        </span>\n      </div>\n    </div>\n    <div class=\"col-md-6 m-b-xs-8 m-b-sm-8\">\n      <c8y-form-group class=\"m-0\">\n        <c8y-typeahead\n          placeholder=\"{{ 'Type to filter device types\u2026' | translate }}\"\n          name=\"deviceType\"\n          [(ngModel)]=\"selectedDeviceType\"\n          (onSearch)=\"deviceType$.next($event)\"\n          [allowFreeEntries]=\"false\"\n        >\n          <c8y-li\n            class=\"p-l-8 p-r-8 c8y-list__item--link\"\n            (click)=\"selectedDeviceType = { name: '' }; deviceType$.next('')\"\n          >\n            <span>{{ 'All device types' | translate }}</span>\n          </c8y-li>\n          <c8y-li\n            class=\"p-l-8 p-r-8 c8y-list__item--link\"\n            *ngFor=\"let deviceType of deviceTypes\"\n            (click)=\"selectedDeviceType = deviceType; deviceType$.next(deviceType.name)\"\n            [active]=\"selectedDeviceType === deviceType\"\n          >\n            <c8y-highlight\n              [text]=\"deviceType.name\"\n              [pattern]=\"deviceType$ | async\"\n            ></c8y-highlight>\n          </c8y-li>\n        </c8y-typeahead>\n        <c8y-messages>\n          <c8y-message\n            name=\"notExisting\"\n            [text]=\"'Select one of the existing device types.' | translate\"\n          ></c8y-message>\n        </c8y-messages>\n      </c8y-form-group>\n    </div>\n  </div>\n  <c8y-li\n    class=\"hidden-sm hidden-xs m-r-8 m-l-8\"\n    header\n  >\n    <c8y-li-icon><i class=\"p-l-32 p-r-40\"></i></c8y-li-icon>\n    <c8y-li-body class=\"content-flex-40\">\n      <div class=\"col-5\">\n        <span\n          class=\"text-truncate\"\n          title=\" {{ 'Name' | translate }} \"\n        >\n          {{ 'Name' | translate }}\n        </span>\n      </div>\n      <div class=\"col-3\">\n        <span\n          class=\"text-truncate\"\n          title=\"{{ 'Device type' | translate }}\"\n        >\n          {{ 'Device type' | translate }}\n        </span>\n      </div>\n    </c8y-li-body>\n  </c8y-li>\n  <c8y-list-group list>\n    <c8y-li *c8yFor=\"let deviceProfile of deviceProfile$ | async; loadMore: 'auto'\">\n      <c8y-li-radio (onSelect)=\"selectDeviceProfile(deviceProfile)\"></c8y-li-radio>\n      <c8y-li-icon>\n        <i c8yIcon=\"c8y-device-profile\"></i>\n      </c8y-li-icon>\n      <c8y-li-body class=\"content-flex-40\">\n        <div class=\"col-5 m-b-xs-8\">\n          <div\n            class=\"text-truncate\"\n            title=\"{{ deviceProfile.name }}\"\n          >\n            {{ deviceProfile.name }}\n          </div>\n        </div>\n        <div class=\"col-3 m-b-xs-8\">\n          <div\n            class=\"text-truncate\"\n            title=\"{{ 'Device type' | translate }}: {{ getDeviceTypeTitle(deviceProfile) }}\"\n          >\n            <span\n              class=\"text-label-small m-r-8 visible-xs visible-sm\"\n              translate\n            >\n              Device type\n            </span>\n            <span *ngIf=\"deviceProfile.c8y_Filter?.type; else noType\">\n              {{ deviceProfile.c8y_Filter?.type }}\n            </span>\n            <ng-template #noType>\n              <small>\n                <em\n                  class=\"text-muted\"\n                  translate\n                >\n                  Undefined`device type`\n                </em>\n              </small>\n            </ng-template>\n          </div>\n        </div>\n      </c8y-li-body>\n    </c8y-li>\n  </c8y-list-group>\n</c8y-select-step-frame>\n" }]
        }], ctorParameters: () => [{ type: i1$1.DeviceProfileService }, { type: i1.TranslateService }], propDecorators: { deviceProfile: [{
                type: Output
            }] } });

class StepperBulkTypeDeviceProfileComponent extends BaseStepperComponent {
    constructor() {
        super(...arguments);
        this.type = BulkOperationType.DEVICE_PROFILE;
    }
    goToConfirmSelection($event) {
        this.deviceTypes = get(this.selectedDeviceProfile, 'c8y_Filter.type');
        $event.stepper.next();
    }
    onDeviceProfileSelected(selectedItem) {
        this.selectedDeviceProfile = selectedItem;
    }
    retrieveOperationPrototype() {
        return {
            name: gettext('Apply device profile'),
            description: get(this.selectedDeviceProfile, 'name'),
            prototype: {
                description: `Apply device profile: ${this.selectedDeviceProfile.name}`,
                profileId: this.selectedDeviceProfile.id,
                profileName: this.selectedDeviceProfile.name,
                c8y_DeviceProfile: this.selectedDeviceProfile.c8y_DeviceProfile
            }
        };
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: StepperBulkTypeDeviceProfileComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: StepperBulkTypeDeviceProfileComponent, isStandalone: true, selector: "c8y-stepper-bulk-type-device-profile", usesInheritance: true, ngImport: i0, template: "<c8y-bulk-operation-stepper [type]=\"type\">\n  <ng-container\n    *customStep=\"\n      'Select device profile' | translate;\n      completed: !!selectedDeviceProfile;\n      buttonsDisabled: !selectedDeviceProfile;\n      onNext: goToConfirmSelection.bind(this)\n    \"\n  >\n    <c8y-select-device-profile-step\n      (deviceProfile)=\"onDeviceProfileSelected($event)\"\n      class=\"d-contents\"\n    ></c8y-select-device-profile-step>\n  </ng-container>\n  <ng-container *customStep=\"'Confirm selected device profile' | translate\">\n    <c8y-confirm-device-profile-selection-step\n      class=\"d-contents\"\n      [selectedDeviceProfile]=\"selectedDeviceProfile\"\n    ></c8y-confirm-device-profile-selection-step>\n  </ng-container>\n</c8y-bulk-operation-stepper>\n", dependencies: [{ kind: "component", type: BulkOperationStepper, selector: "c8y-bulk-operation-stepper", inputs: ["type"], outputs: ["selectionChange"] }, { kind: "directive", type: CustomStep, selector: "[customStep]", inputs: ["customStep", "customStepCompleted", "customStepButtonsDisabled", "customStepOnNext"] }, { kind: "component", type: SelectDeviceProfileStepComponent, selector: "c8y-select-device-profile-step", outputs: ["deviceProfile"] }, { kind: "component", type: ConfirmDeviceProfileSelectionStepComponent, selector: "c8y-confirm-device-profile-selection-step", inputs: ["selectedDeviceProfile"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: StepperBulkTypeDeviceProfileComponent, decorators: [{
            type: Component,
            args: [{ selector: 'c8y-stepper-bulk-type-device-profile', imports: [
                        BulkOperationStepper,
                        CustomStep,
                        SelectDeviceProfileStepComponent,
                        ConfirmDeviceProfileSelectionStepComponent,
                        C8yTranslatePipe
                    ], template: "<c8y-bulk-operation-stepper [type]=\"type\">\n  <ng-container\n    *customStep=\"\n      'Select device profile' | translate;\n      completed: !!selectedDeviceProfile;\n      buttonsDisabled: !selectedDeviceProfile;\n      onNext: goToConfirmSelection.bind(this)\n    \"\n  >\n    <c8y-select-device-profile-step\n      (deviceProfile)=\"onDeviceProfileSelected($event)\"\n      class=\"d-contents\"\n    ></c8y-select-device-profile-step>\n  </ng-container>\n  <ng-container *customStep=\"'Confirm selected device profile' | translate\">\n    <c8y-confirm-device-profile-selection-step\n      class=\"d-contents\"\n      [selectedDeviceProfile]=\"selectedDeviceProfile\"\n    ></c8y-confirm-device-profile-selection-step>\n  </ng-container>\n</c8y-bulk-operation-stepper>\n" }]
        }] });

/** Module for the 'Apply device profile' operation type stepper */
class StepperBulkTypeDeviceProfileModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: StepperBulkTypeDeviceProfileModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.19", ngImport: i0, type: StepperBulkTypeDeviceProfileModule, imports: [StepperBulkTypeDeviceProfileComponent,
            SelectDeviceProfileStepComponent,
            ConfirmDeviceProfileSelectionStepComponent], exports: [StepperBulkTypeDeviceProfileComponent] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: StepperBulkTypeDeviceProfileModule, providers: [
            hookListBulkType({
                type: BulkOperationType.DEVICE_PROFILE,
                c8yIcon: 'c8y-device-profile',
                name: gettext('Apply device profile'),
                path: `${baseUrl}device-profile`,
                component: StepperBulkTypeDeviceProfileComponent,
                fragments: ['c8y_DeviceProfile'],
                selected: false
            })
        ], imports: [StepperBulkTypeDeviceProfileComponent,
            SelectDeviceProfileStepComponent,
            ConfirmDeviceProfileSelectionStepComponent] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: StepperBulkTypeDeviceProfileModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [
                        StepperBulkTypeDeviceProfileComponent,
                        SelectDeviceProfileStepComponent,
                        ConfirmDeviceProfileSelectionStepComponent
                    ],
                    providers: [
                        hookListBulkType({
                            type: BulkOperationType.DEVICE_PROFILE,
                            c8yIcon: 'c8y-device-profile',
                            name: gettext('Apply device profile'),
                            path: `${baseUrl}device-profile`,
                            component: StepperBulkTypeDeviceProfileComponent,
                            fragments: ['c8y_DeviceProfile'],
                            selected: false
                        })
                    ],
                    exports: [StepperBulkTypeDeviceProfileComponent]
                }]
        }] });

/**
 * Generated bundle index. Do not edit.
 */

export { ConfirmDeviceProfileSelectionStepComponent, SelectDeviceProfileStepComponent, StepperBulkTypeDeviceProfileComponent, StepperBulkTypeDeviceProfileModule };
//# sourceMappingURL=c8y-ngx-components-operations-stepper-bulk-type-device-profile.mjs.map
