import { CdkStep } from '@angular/cdk/stepper';
import { Component } from '@angular/core';
import { filter } from 'rxjs/operators';
import { AlertService, AppStateService, C8yStepper, SetupComponent } from '@c8y/ngx-components';
import { CockpitSetupStep } from './cockpit-setup-step';
import { ApplicationService } from '@c8y/client';
import { CockpitConfigService } from '../cockpit-config.service';
import * as i0 from "@angular/core";
import * as i1 from "@c8y/ngx-components";
import * as i2 from "@angular/cdk/stepper";
import * as i3 from "@c8y/client";
import * as i4 from "../cockpit-config.service";
import * as i5 from "@angular/forms";
import * as i6 from "@c8y/ngx-components/icon-selector";
import * as i7 from "../misc-config.component";
import * as i8 from "./cockpit-setup-stepper-buttons.component";
import * as i9 from "@angular/common";
export class CockpitSetupStep1Component extends CockpitSetupStep {
    constructor(stepper, step, setup, appState, alert, appService, cockpitConfigService) {
        super(stepper, step, setup, appState, alert, appService, cockpitConfigService);
        this.stepper = stepper;
        this.step = step;
        this.setup = setup;
        this.appState = appState;
        this.alert = alert;
        this.appService = appService;
        this.cockpitConfigService = cockpitConfigService;
        this.app$ = this.appState.currentApplication.pipe(filter(app => !!app));
    }
    iconSelectionChange(icon) {
        this.config.icon = { class: icon };
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: CockpitSetupStep1Component, deps: [{ token: i1.C8yStepper }, { token: i2.CdkStep }, { token: i1.SetupComponent }, { token: i1.AppStateService }, { token: i1.AlertService }, { token: i3.ApplicationService }, { token: i4.CockpitConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: CockpitSetupStep1Component, selector: "c8y-cockpit-setup-step1", host: { classAttribute: "d-contents" }, usesInheritance: true, ngImport: i0, template: "<form\n  class=\"d-contents\"\n  name=\"form\"\n  #stepForm=\"ngForm\"\n>\n  <div class=\"container-fluid flex-no-shrink fit-w\">\n    <div class=\"row separator-bottom\">\n      <div class=\"col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3 p-t-24 p-l-16 p-r-16\">\n        <h3\n          data-cy=\"c8y-cockpit-setup-step1--step1-header-title\"\n          class=\"text-medium l-h-base\"\n          translate\n        >\n          Title, icon, and navigator collapse\n        </h3>\n        <p\n          class=\"lead text-normal\"\n          translate\n        >\n          Change the icon, the title, and set the initial navigator state.\n        </p>\n      </div>\n    </div>\n  </div>\n  <div class=\"inner-scroll flex-grow\">\n    <div class=\"container-fluid fit-w\">\n      <div class=\"row\">\n        <div class=\"col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3\">\n          <div class=\"d-flex a-i-start gap-16 p-t-16\">\n            <div class=\"form-group d-inline-block\">\n              <label>{{ 'Icon' | translate }}</label>\n              <c8y-icon-selector-wrapper\n                [selectedIcon]=\"(app$ | async)?.config?.icon?.class || 'c8y-cockpit'\"\n                [iconSize]=\"24\"\n                (onSelect)=\"iconSelectionChange($event)\"\n              ></c8y-icon-selector-wrapper>\n            </div>\n            <div class=\"form-group flex-grow\">\n              <label\n                for=\"confAppTitle\"\n                translate\n              >\n                Change application title\n              </label>\n              <input\n                class=\"form-control\"\n                id=\"confAppTitle\"\n                placeholder=\"{{ 'e.g. Cockpit' | translate }} \"\n                type=\"text\"\n                maxlength=\"254\"\n                [(ngModel)]=\"config.appTitle\"\n                [ngModelOptions]=\"{ standalone: true }\"\n              />\n            </div>\n          </div>\n\n          <c8y-misc-config [config]=\"config\"></c8y-misc-config>\n        </div>\n      </div>\n    </div>\n  </div>\n  <c8y-cockpit-setup-stepper-buttons\n    [index]=\"stepper.selectedIndex\"\n    (onNext)=\"next()\"\n    (onBack)=\"back()\"\n  ></c8y-cockpit-setup-stepper-buttons>\n</form>\n", dependencies: [{ kind: "directive", type: i1.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i6.IconSelectorWrapperComponent, selector: "c8y-icon-selector-wrapper", inputs: ["canRemoveIcon", "selectedIcon", "iconSize"], outputs: ["onSelect"] }, { kind: "component", type: i7.MiscConfigComponent, selector: "c8y-misc-config", inputs: ["config"] }, { kind: "component", type: i8.CockpitSetupStepperButtonsComponent, selector: "c8y-cockpit-setup-stepper-buttons", inputs: ["index"], outputs: ["onNext", "onBack"] }, { kind: "pipe", type: i1.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i9.AsyncPipe, name: "async" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: CockpitSetupStep1Component, decorators: [{
            type: Component,
            args: [{ selector: 'c8y-cockpit-setup-step1', host: { class: 'd-contents' }, template: "<form\n  class=\"d-contents\"\n  name=\"form\"\n  #stepForm=\"ngForm\"\n>\n  <div class=\"container-fluid flex-no-shrink fit-w\">\n    <div class=\"row separator-bottom\">\n      <div class=\"col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3 p-t-24 p-l-16 p-r-16\">\n        <h3\n          data-cy=\"c8y-cockpit-setup-step1--step1-header-title\"\n          class=\"text-medium l-h-base\"\n          translate\n        >\n          Title, icon, and navigator collapse\n        </h3>\n        <p\n          class=\"lead text-normal\"\n          translate\n        >\n          Change the icon, the title, and set the initial navigator state.\n        </p>\n      </div>\n    </div>\n  </div>\n  <div class=\"inner-scroll flex-grow\">\n    <div class=\"container-fluid fit-w\">\n      <div class=\"row\">\n        <div class=\"col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3\">\n          <div class=\"d-flex a-i-start gap-16 p-t-16\">\n            <div class=\"form-group d-inline-block\">\n              <label>{{ 'Icon' | translate }}</label>\n              <c8y-icon-selector-wrapper\n                [selectedIcon]=\"(app$ | async)?.config?.icon?.class || 'c8y-cockpit'\"\n                [iconSize]=\"24\"\n                (onSelect)=\"iconSelectionChange($event)\"\n              ></c8y-icon-selector-wrapper>\n            </div>\n            <div class=\"form-group flex-grow\">\n              <label\n                for=\"confAppTitle\"\n                translate\n              >\n                Change application title\n              </label>\n              <input\n                class=\"form-control\"\n                id=\"confAppTitle\"\n                placeholder=\"{{ 'e.g. Cockpit' | translate }} \"\n                type=\"text\"\n                maxlength=\"254\"\n                [(ngModel)]=\"config.appTitle\"\n                [ngModelOptions]=\"{ standalone: true }\"\n              />\n            </div>\n          </div>\n\n          <c8y-misc-config [config]=\"config\"></c8y-misc-config>\n        </div>\n      </div>\n    </div>\n  </div>\n  <c8y-cockpit-setup-stepper-buttons\n    [index]=\"stepper.selectedIndex\"\n    (onNext)=\"next()\"\n    (onBack)=\"back()\"\n  ></c8y-cockpit-setup-stepper-buttons>\n</form>\n" }]
        }], ctorParameters: () => [{ type: i1.C8yStepper }, { type: i2.CdkStep }, { type: i1.SetupComponent }, { type: i1.AppStateService }, { type: i1.AlertService }, { type: i3.ApplicationService }, { type: i4.CockpitConfigService }] });
//# sourceMappingURL=data:application/json;base64, 