import { Component, EventEmitter, Input, Output } from '@angular/core';
import { gettext, NavigatorService } from '@c8y/ngx-components';
import * as i0 from "@angular/core";
import * as i1 from "@c8y/ngx-components";
import * as i2 from "@angular/common";
import * as i3 from "@angular/forms";
import * as i4 from "ngx-bootstrap/popover";
import * as i5 from "@c8y/ngx-components/icon-selector";
import * as i6 from "../dashboard-availability.component";
import * as i7 from "./typed-dashboard-settings.component";
export class DashboardGeneralSettingsComponent {
    constructor(navigatorService) {
        this.navigatorService = navigatorService;
        this.onDuplicateWithoutType = new EventEmitter();
        this.priorityExampleLabel = gettext('e.g. {{ example }}');
        this.positionInTabsExampleLabel = gettext('Position in tabs (10000 first, -10000 last)');
    }
    ngOnInit() {
        this.navigatorNodes$ = this.navigatorService.items$;
        this.globalRolesIds = this.dashboard.globalRolesIds;
    }
    changeGlobalRoleIds() {
        this.generalSettingsForm.patchValue({ globalRolesIds: this.globalRolesIds });
        this.generalSettingsForm.markAsDirty();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DashboardGeneralSettingsComponent, deps: [{ token: i1.NavigatorService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DashboardGeneralSettingsComponent, selector: "c8y-dashboard-general-settings", inputs: { isReport: "isReport", isNamedDashboard: "isNamedDashboard", hideAvailability: "hideAvailability", dashboard: "dashboard", generalSettingsForm: "generalSettingsForm", deviceTypeValue: "deviceTypeValue", displayDeviceTypeValue: "displayDeviceTypeValue", allowTypeDashboard: "allowTypeDashboard", isDevice: "isDevice", mo: "mo" }, outputs: { onDuplicateWithoutType: "onDuplicateWithoutType" }, ngImport: i0, template: "<div\n  class=\"row\"\n  [formGroup]=\"generalSettingsForm\"\n>\n  <div\n    class=\"col-xs-12 p-b-24\"\n    [ngClass]=\"{ 'col-md-6': !isReport, 'col-md-8': isReport }\"\n    *ngIf=\"!isNamedDashboard || isReport\"\n  >\n    <fieldset class=\"c8y-fieldset c8y-fieldset--lg m-b-24\">\n      <legend>{{ 'Navigation' | translate }}</legend>\n      <div class=\"d-flex gap-16\">\n        <c8y-form-group>\n          <label>{{ 'Icon' | translate }}</label>\n          <c8y-icon-selector-wrapper\n            [iconSize]=\"24\"\n            name=\"icon\"\n            formControlName=\"icon\"\n          ></c8y-icon-selector-wrapper>\n        </c8y-form-group>\n        <c8y-form-group class=\"flex-grow\">\n          <label for=\"menuLabel\">\n            {{ 'Menu label' | translate }}\n            <button\n              class=\"btn-help btn-help--sm\"\n              [attr.aria-label]=\"'Help' | translate\"\n              popover=\"{{\n                'Menu label to display in submenu when dashboard is attached' | translate\n              }}\"\n              placement=\"right\"\n              triggers=\"focus\"\n              container=\"body\"\n              type=\"button\"\n            ></button>\n          </label>\n          <input\n            class=\"form-control\"\n            id=\"menuLabel\"\n            placeholder=\"{{ namePlaceholder | translate }}\"\n            name=\"name\"\n            type=\"text\"\n            formControlName=\"name\"\n          />\n        </c8y-form-group>\n      </div>\n\n      <c8y-form-group>\n        <label for=\"description\">{{ 'Description ' | translate }}</label>\n        <textarea\n          class=\"form-control\"\n          id=\"description\"\n          name=\"description\"\n          c8y-textarea-autoresize\n          formControlName=\"description\"\n        ></textarea>\n      </c8y-form-group>\n\n      <div class=\"row\">\n        <div\n          class=\"col-lg-7 col-xs-12\"\n          *ngIf=\"!isReport\"\n        >\n          <c8y-form-group>\n            <label for=\"position\">\n              {{ 'Position in tabs' | translate }}\n              <button\n                class=\"btn-help btn-help--sm\"\n                [attr.aria-label]=\"'Help' | translate\"\n                popover=\"{{ positionInTabsExampleLabel | translate }}\"\n                placement=\"right\"\n                triggers=\"focus\"\n                container=\"body\"\n                type=\"button\"\n              ></button>\n            </label>\n            <input\n              class=\"form-control\"\n              id=\"positionNav\"\n              placeholder=\"{{ priorityExampleLabel | translate: { example: '500' } }}\"\n              name=\"priority\"\n              for=\"position\"\n              type=\"number\"\n              formControlName=\"priority\"\n            />\n          </c8y-form-group>\n        </div>\n\n        <div\n          class=\"col-xs-6\"\n          *ngIf=\"isReport\"\n        >\n          <label translate>Navigator menu item</label>\n          <c8y-form-group>\n            <label\n              class=\"c8y-switch\"\n              title=\"{{ 'Show in navigator' | translate }}\"\n            >\n              <input\n                type=\"checkbox\"\n                formControlName=\"c8y_IsNavigatorNode\"\n              />\n              <span></span>\n              <span>{{ 'Show in navigator' | translate }}</span>\n            </label>\n          </c8y-form-group>\n        </div>\n\n        <div\n          class=\"col-xs-6\"\n          *ngIf=\"isReport && generalSettingsForm.value.c8y_IsNavigatorNode\"\n        >\n          <c8y-form-group>\n            <label\n              class=\"d-block\"\n              for=\"position\"\n            >\n              {{ 'Position in navigator' | translate }}\n              <ng-template #positionInNavPop>\n                <span>\n                  {{ positionInNavigationExampleLabel | translate }}&nbsp;\n                  {{ 'Existing nodes:' | translate }}\n                </span>\n                <ul class=\"list-unstyled m-t-16 m-b-0\">\n                  <li\n                    class=\"p-t-4 p-b-4\"\n                    title=\"{{ node.label | translate }}\"\n                    *ngFor=\"let node of navigatorNodes$ | async\"\n                  >\n                    <div class=\"icon-flex fit-w\">\n                      <i [c8yIcon]=\"node.icon\"></i>\n                      <span class=\"text-truncate m-l-4 m-r-16 flex-grow\">\n                        {{ node.label | translate }}\n                      </span>\n                      <span class=\"text-medium flex-no-shrink\">{{ node.priority }}</span>\n                    </div>\n                  </li>\n                </ul>\n              </ng-template>\n              <button\n                class=\"btn-help btn-help--sm\"\n                [attr.aria-label]=\"'Help' | translate\"\n                [popover]=\"positionInNavPop\"\n                placement=\"right\"\n                triggers=\"focus\"\n                container=\"body\"\n                type=\"button\"\n              ></button>\n            </label>\n            <input\n              class=\"form-control\"\n              placeholder=\"{{ priorityExampleLabel | translate: { example: '500' } }}\"\n              name=\"priority\"\n              for=\"position\"\n              type=\"number\"\n              formControlName=\"priority\"\n            />\n          </c8y-form-group>\n        </div>\n      </div>\n    </fieldset>\n    <c8y-dashboard-availability\n      *ngIf=\"\n        !!isReport === false &&\n        allowTypeDashboard &&\n        deviceTypeValue &&\n        generalSettingsForm.controls['deviceType'] &&\n        !hideAvailability\n      \"\n      [(globalRolesIds)]=\"globalRolesIds\"\n      (globalRolesIdsChange)=\"changeGlobalRoleIds()\"\n    ></c8y-dashboard-availability>\n  </div>\n\n  <div class=\"col-xs-12 col-md-6 p-b-24\">\n    <c8y-typed-dashboard-settings\n      *ngIf=\"allowTypeDashboard !== 'disallow'\"\n      formControlName=\"deviceType\"\n      [deviceTypeValue]=\"deviceTypeValue\"\n      [displayDeviceTypeValue]=\"displayDeviceTypeValue\"\n      [formInvalid]=\"generalSettingsForm.invalid\"\n      [mo]=\"mo\"\n      [isDevice]=\"isDevice\"\n      [allowTypeDashboard]=\"allowTypeDashboard\"\n      (onDuplicateWithoutType)=\"onDuplicateWithoutType.emit()\"\n    ></c8y-typed-dashboard-settings>\n    <c8y-dashboard-availability\n      *ngIf=\"\n        !!isReport === false &&\n        (!allowTypeDashboard || !deviceTypeValue || !generalSettingsForm.controls['deviceType']) &&\n        !hideAvailability\n      \"\n      [(globalRolesIds)]=\"globalRolesIds\"\n      (globalRolesIdsChange)=\"changeGlobalRoleIds()\"\n    ></c8y-dashboard-availability>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i1.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.TextareaAutoresizeDirective, selector: "[c8y-textarea-autoresize]" }, { 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i1.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: i1.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i4.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "component", type: i5.IconSelectorWrapperComponent, selector: "c8y-icon-selector-wrapper", inputs: ["canRemoveIcon", "selectedIcon", "iconSize"], outputs: ["onSelect"] }, { kind: "component", type: i6.DashboardAvailabilityComponent, selector: "c8y-dashboard-availability", inputs: ["globalRolesIds"], outputs: ["globalRolesIdsChange"] }, { kind: "component", type: i7.TypedDashboardSettingsComponent, selector: "c8y-typed-dashboard-settings", inputs: ["deviceTypeValue", "displayDeviceTypeValue", "formInvalid", "mo", "isDevice", "allowTypeDashboard"], outputs: ["onDuplicateWithoutType"] }, { kind: "pipe", type: i1.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DashboardGeneralSettingsComponent, decorators: [{
            type: Component,
            args: [{ selector: 'c8y-dashboard-general-settings', template: "<div\n  class=\"row\"\n  [formGroup]=\"generalSettingsForm\"\n>\n  <div\n    class=\"col-xs-12 p-b-24\"\n    [ngClass]=\"{ 'col-md-6': !isReport, 'col-md-8': isReport }\"\n    *ngIf=\"!isNamedDashboard || isReport\"\n  >\n    <fieldset class=\"c8y-fieldset c8y-fieldset--lg m-b-24\">\n      <legend>{{ 'Navigation' | translate }}</legend>\n      <div class=\"d-flex gap-16\">\n        <c8y-form-group>\n          <label>{{ 'Icon' | translate }}</label>\n          <c8y-icon-selector-wrapper\n            [iconSize]=\"24\"\n            name=\"icon\"\n            formControlName=\"icon\"\n          ></c8y-icon-selector-wrapper>\n        </c8y-form-group>\n        <c8y-form-group class=\"flex-grow\">\n          <label for=\"menuLabel\">\n            {{ 'Menu label' | translate }}\n            <button\n              class=\"btn-help btn-help--sm\"\n              [attr.aria-label]=\"'Help' | translate\"\n              popover=\"{{\n                'Menu label to display in submenu when dashboard is attached' | translate\n              }}\"\n              placement=\"right\"\n              triggers=\"focus\"\n              container=\"body\"\n              type=\"button\"\n            ></button>\n          </label>\n          <input\n            class=\"form-control\"\n            id=\"menuLabel\"\n            placeholder=\"{{ namePlaceholder | translate }}\"\n            name=\"name\"\n            type=\"text\"\n            formControlName=\"name\"\n          />\n        </c8y-form-group>\n      </div>\n\n      <c8y-form-group>\n        <label for=\"description\">{{ 'Description ' | translate }}</label>\n        <textarea\n          class=\"form-control\"\n          id=\"description\"\n          name=\"description\"\n          c8y-textarea-autoresize\n          formControlName=\"description\"\n        ></textarea>\n      </c8y-form-group>\n\n      <div class=\"row\">\n        <div\n          class=\"col-lg-7 col-xs-12\"\n          *ngIf=\"!isReport\"\n        >\n          <c8y-form-group>\n            <label for=\"position\">\n              {{ 'Position in tabs' | translate }}\n              <button\n                class=\"btn-help btn-help--sm\"\n                [attr.aria-label]=\"'Help' | translate\"\n                popover=\"{{ positionInTabsExampleLabel | translate }}\"\n                placement=\"right\"\n                triggers=\"focus\"\n                container=\"body\"\n                type=\"button\"\n              ></button>\n            </label>\n            <input\n              class=\"form-control\"\n              id=\"positionNav\"\n              placeholder=\"{{ priorityExampleLabel | translate: { example: '500' } }}\"\n              name=\"priority\"\n              for=\"position\"\n              type=\"number\"\n              formControlName=\"priority\"\n            />\n          </c8y-form-group>\n        </div>\n\n        <div\n          class=\"col-xs-6\"\n          *ngIf=\"isReport\"\n        >\n          <label translate>Navigator menu item</label>\n          <c8y-form-group>\n            <label\n              class=\"c8y-switch\"\n              title=\"{{ 'Show in navigator' | translate }}\"\n            >\n              <input\n                type=\"checkbox\"\n                formControlName=\"c8y_IsNavigatorNode\"\n              />\n              <span></span>\n              <span>{{ 'Show in navigator' | translate }}</span>\n            </label>\n          </c8y-form-group>\n        </div>\n\n        <div\n          class=\"col-xs-6\"\n          *ngIf=\"isReport && generalSettingsForm.value.c8y_IsNavigatorNode\"\n        >\n          <c8y-form-group>\n            <label\n              class=\"d-block\"\n              for=\"position\"\n            >\n              {{ 'Position in navigator' | translate }}\n              <ng-template #positionInNavPop>\n                <span>\n                  {{ positionInNavigationExampleLabel | translate }}&nbsp;\n                  {{ 'Existing nodes:' | translate }}\n                </span>\n                <ul class=\"list-unstyled m-t-16 m-b-0\">\n                  <li\n                    class=\"p-t-4 p-b-4\"\n                    title=\"{{ node.label | translate }}\"\n                    *ngFor=\"let node of navigatorNodes$ | async\"\n                  >\n                    <div class=\"icon-flex fit-w\">\n                      <i [c8yIcon]=\"node.icon\"></i>\n                      <span class=\"text-truncate m-l-4 m-r-16 flex-grow\">\n                        {{ node.label | translate }}\n                      </span>\n                      <span class=\"text-medium flex-no-shrink\">{{ node.priority }}</span>\n                    </div>\n                  </li>\n                </ul>\n              </ng-template>\n              <button\n                class=\"btn-help btn-help--sm\"\n                [attr.aria-label]=\"'Help' | translate\"\n                [popover]=\"positionInNavPop\"\n                placement=\"right\"\n                triggers=\"focus\"\n                container=\"body\"\n                type=\"button\"\n              ></button>\n            </label>\n            <input\n              class=\"form-control\"\n              placeholder=\"{{ priorityExampleLabel | translate: { example: '500' } }}\"\n              name=\"priority\"\n              for=\"position\"\n              type=\"number\"\n              formControlName=\"priority\"\n            />\n          </c8y-form-group>\n        </div>\n      </div>\n    </fieldset>\n    <c8y-dashboard-availability\n      *ngIf=\"\n        !!isReport === false &&\n        allowTypeDashboard &&\n        deviceTypeValue &&\n        generalSettingsForm.controls['deviceType'] &&\n        !hideAvailability\n      \"\n      [(globalRolesIds)]=\"globalRolesIds\"\n      (globalRolesIdsChange)=\"changeGlobalRoleIds()\"\n    ></c8y-dashboard-availability>\n  </div>\n\n  <div class=\"col-xs-12 col-md-6 p-b-24\">\n    <c8y-typed-dashboard-settings\n      *ngIf=\"allowTypeDashboard !== 'disallow'\"\n      formControlName=\"deviceType\"\n      [deviceTypeValue]=\"deviceTypeValue\"\n      [displayDeviceTypeValue]=\"displayDeviceTypeValue\"\n      [formInvalid]=\"generalSettingsForm.invalid\"\n      [mo]=\"mo\"\n      [isDevice]=\"isDevice\"\n      [allowTypeDashboard]=\"allowTypeDashboard\"\n      (onDuplicateWithoutType)=\"onDuplicateWithoutType.emit()\"\n    ></c8y-typed-dashboard-settings>\n    <c8y-dashboard-availability\n      *ngIf=\"\n        !!isReport === false &&\n        (!allowTypeDashboard || !deviceTypeValue || !generalSettingsForm.controls['deviceType']) &&\n        !hideAvailability\n      \"\n      [(globalRolesIds)]=\"globalRolesIds\"\n      (globalRolesIdsChange)=\"changeGlobalRoleIds()\"\n    ></c8y-dashboard-availability>\n  </div>\n</div>\n" }]
        }], ctorParameters: () => [{ type: i1.NavigatorService }], propDecorators: { isReport: [{
                type: Input
            }], isNamedDashboard: [{
                type: Input
            }], hideAvailability: [{
                type: Input
            }], dashboard: [{
                type: Input
            }], generalSettingsForm: [{
                type: Input
            }], deviceTypeValue: [{
                type: Input
            }], displayDeviceTypeValue: [{
                type: Input
            }], allowTypeDashboard: [{
                type: Input
            }], isDevice: [{
                type: Input
            }], mo: [{
                type: Input
            }], onDuplicateWithoutType: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 