@c8y/ngx-components/fesm2022/c8y-ngx-components-context-dashboard-dashboard-general-settings.component-RXvOcs04.mjs

Angular modules for Cumulocity IoT applications

import * as i0 from '@angular/core';
import { EventEmitter, Output, Input, Component, forwardRef } from '@angular/core';
import * as i2 from '@c8y/ngx-components';
import { Permissions, C8yTranslatePipe, FormsModule, SelectModule, SupportedApps, gettext, CoreModule, ProductExperienceDirective } from '@c8y/ngx-components';
import { ALL_GLOBAL_ROLES_SELECTED, PRODUCT_EXPERIENCE, TypeDashboardInfoComponent, DashboardDetailService } from './c8y-ngx-components-context-dashboard.mjs';
import * as i5$1 from '@c8y/ngx-components/icon-selector';
import { IconSelectorModule } from '@c8y/ngx-components/icon-selector';
import * as i2$1 from 'ngx-bootstrap/popover';
import { PopoverModule } from 'ngx-bootstrap/popover';
import * as i1 from '@c8y/client';
import * as i5 from '@angular/forms';
import { ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
import * as i3 from '@angular/common';
import { NgIf } from '@angular/common';
import * as i1$1 from '@angular/router';

class DashboardAvailabilityComponent {
    /**
     * Ids of global roles assigned to the dashboard or a string "all" indicating the selection of all global roles.
     * The value undefined is treated as equivalent to 'all'.
     */
    get globalRolesIds() {
        return this._globalRolesIds;
    }
    set globalRolesIds(ids) {
        if (!ids || ids === ALL_GLOBAL_ROLES_SELECTED) {
            this._globalRolesIds = ALL_GLOBAL_ROLES_SELECTED;
            return;
        }
        this._globalRolesIds = [...ids];
    }
    constructor(userGroupService, gainsightService, permissions) {
        this.userGroupService = userGroupService;
        this.gainsightService = gainsightService;
        this.permissions = permissions;
        this.globalRolesIdsChange = new EventEmitter();
        this.globalRolesItems = [];
        this.globalRolesItemsSelected = [];
        this.selectHidden = false;
        this.globalRoles = [];
        this.PAGE_SIZE = 100;
    }
    async ngOnInit() {
        if (this.permissions.hasRole(Permissions.ROLE_USER_MANAGEMENT_READ)) {
            this.globalRoles = await this.getGlobalRoles();
            this.globalRolesItems = this.mapGlobalRolesToItems();
            this.globalRolesItemsSelected = this.getSelectedGlobalRolesItems();
        }
        else {
            this.selectHidden = true;
        }
    }
    onSelected(items) {
        if (!items || !Array.isArray(items)) {
            return;
        }
        const allItemsSelected = items.length === this.globalRolesItems.length;
        this.globalRolesItemsSelected = items;
        if (allItemsSelected) {
            this.globalRolesIdsChange.emit(ALL_GLOBAL_ROLES_SELECTED);
            this.gainsightService.triggerEvent(PRODUCT_EXPERIENCE.DASHBOARD.EVENTS.DASHBOARDS, {
                component: PRODUCT_EXPERIENCE.DASHBOARD.COMPONENTS.DASHBOARD_AVAILABILITY,
                action: PRODUCT_EXPERIENCE.DASHBOARD.ACTIONS.APPLY_GLOBAL_ROLES_CHANGES,
                globalRoles: ALL_GLOBAL_ROLES_SELECTED
            });
        }
        else {
            const selectedGlobalRolesIds = items.map(i => i.id);
            this.globalRolesIdsChange.emit([...selectedGlobalRolesIds]);
            this.gainsightService.triggerEvent(PRODUCT_EXPERIENCE.DASHBOARD.EVENTS.DASHBOARDS, {
                component: PRODUCT_EXPERIENCE.DASHBOARD.COMPONENTS.DASHBOARD_AVAILABILITY,
                action: PRODUCT_EXPERIENCE.DASHBOARD.ACTIONS.APPLY_GLOBAL_ROLES_CHANGES,
                globalRoles: selectedGlobalRolesIds?.sort()?.join()
            });
        }
    }
    async getGlobalRoles() {
        return (await this.userGroupService.list({ pageSize: this.PAGE_SIZE })).data;
    }
    mapGlobalRolesToItems() {
        return this.globalRoles.map(({ name, id }) => ({
            name,
            id
        }));
    }
    getSelectedGlobalRolesItems() {
        if (!this.globalRolesIds || this.globalRolesIds === ALL_GLOBAL_ROLES_SELECTED) {
            return this.globalRolesItems;
        }
        return this.globalRolesIds
            .map(globalRoleId => this.globalRolesItems.find(gR => gR.id === globalRoleId))
            .filter(Boolean);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DashboardAvailabilityComponent, deps: [{ token: i1.UserGroupService }, { token: i2.GainsightService }, { token: i2.Permissions }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DashboardAvailabilityComponent, isStandalone: true, selector: "c8y-dashboard-availability", inputs: { globalRolesIds: "globalRolesIds" }, outputs: { globalRolesIdsChange: "globalRolesIdsChange" }, ngImport: i0, template: "<fieldset class=\"c8y-fieldset c8y-fieldset--lg\">\n  <legend>{{ 'Availability`of dashboard based on permissions`' | translate }}</legend>\n  <c8y-form-group>\n    <label for=\"availability\">\n      <span\n        class=\"m-r-4\"\n        id=\"availability\"\n      >\n        {{ 'Global roles' | translate }}\n      </span>\n      <button\n        class=\"btn-help btn-help--sm\"\n        [attr.aria-label]=\"'Help' | translate\"\n        popover=\"{{\n          'Select the global roles for which the dashboard will be available' | translate\n        }}\"\n        placement=\"right\"\n        triggers=\"focus\"\n        container=\"body\"\n        type=\"button\"\n      ></button>\n    </label>\n    <c8y-select-legacy\n      *ngIf=\"!selectHidden\"\n      [items]=\"globalRolesItems\"\n      [selected]=\"globalRolesItemsSelected\"\n      (onChange)=\"onSelected($event)\"\n    ></c8y-select-legacy>\n    <p\n      class=\"form-control-static\"\n      *ngIf=\"selectHidden\"\n    >\n      {{ \"You don't have permission to change global roles.\" | translate }}\n    </p>\n  </c8y-form-group>\n</fieldset>\n", dependencies: [{ kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i2$1.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: i2.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i2.SelectLegacyComponent, selector: "c8y-select-legacy", inputs: ["placeholder", "selectedLabel", "applyLabel", "items", "selected", "updateItems", "disableApplyOnNoSelection", "addDropdownContainerToBody"], outputs: ["onChange"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DashboardAvailabilityComponent, decorators: [{
            type: Component,
            args: [{ selector: 'c8y-dashboard-availability', standalone: true, imports: [C8yTranslatePipe, ReactiveFormsModule, PopoverModule, FormsModule, NgIf, SelectModule], template: "<fieldset class=\"c8y-fieldset c8y-fieldset--lg\">\n  <legend>{{ 'Availability`of dashboard based on permissions`' | translate }}</legend>\n  <c8y-form-group>\n    <label for=\"availability\">\n      <span\n        class=\"m-r-4\"\n        id=\"availability\"\n      >\n        {{ 'Global roles' | translate }}\n      </span>\n      <button\n        class=\"btn-help btn-help--sm\"\n        [attr.aria-label]=\"'Help' | translate\"\n        popover=\"{{\n          'Select the global roles for which the dashboard will be available' | translate\n        }}\"\n        placement=\"right\"\n        triggers=\"focus\"\n        container=\"body\"\n        type=\"button\"\n      ></button>\n    </label>\n    <c8y-select-legacy\n      *ngIf=\"!selectHidden\"\n      [items]=\"globalRolesItems\"\n      [selected]=\"globalRolesItemsSelected\"\n      (onChange)=\"onSelected($event)\"\n    ></c8y-select-legacy>\n    <p\n      class=\"form-control-static\"\n      *ngIf=\"selectHidden\"\n    >\n      {{ \"You don't have permission to change global roles.\" | translate }}\n    </p>\n  </c8y-form-group>\n</fieldset>\n" }]
        }], ctorParameters: () => [{ type: i1.UserGroupService }, { type: i2.GainsightService }, { type: i2.Permissions }], propDecorators: { globalRolesIds: [{
                type: Input
            }], globalRolesIdsChange: [{
                type: Output
            }] } });

class TypedDashboardSettingsComponent {
    constructor(inventory, interAppService, route) {
        this.inventory = inventory;
        this.interAppService = interAppService;
        this.route = route;
        this.touched = false;
        this.disabled = false;
        this.onDuplicateWithoutType = new EventEmitter();
        this.deviceManagementAppKey = SupportedApps.devicemanagement;
        this.deviceManagementLinkTitle = gettext('Device Info page in {{ deviceManagementAppName }}');
        this.PRODUCT_EXPERIENCE = PRODUCT_EXPERIENCE;
        // eslint-disable-next-line @typescript-eslint/no-empty-function
        this.onChange = _ => { };
        // eslint-disable-next-line @typescript-eslint/no-empty-function
        this.onTouched = () => { };
    }
    async ngOnInit() {
        this.userDeviceManagementApp$ = this.interAppService.getApp$(this.deviceManagementAppKey);
        this.context = this.route.parent.snapshot.data.contextData;
        this.showSourceNavigationLink$ = this.interAppService.shouldShowAppLink$(this.deviceManagementAppKey);
    }
    async goToDeviceView() {
        await this.interAppService.navigateToApp(this.deviceManagementAppKey, `#/device/${this.context.id}/device-info`);
    }
    writeValue(value) {
        this.value = value;
        this.updateTexts();
        if (value) {
            this.updateDeviceTypeCount();
        }
    }
    registerOnChange(fn) {
        this.onChange = fn;
    }
    registerOnTouched(onTouched) {
        this.onTouched = onTouched;
    }
    markAsTouched() {
        if (!this.touched) {
            this.onTouched();
            this.touched = true;
        }
    }
    setDisabledState(disabled) {
        this.disabled = disabled;
    }
    async toggle() {
        this.value = !this.value;
        this.onChange(this.value);
        if (this.value && this.deviceTypeInstancesCount == null) {
            this.setDisabledState(true);
            await this.updateDeviceTypeCount();
        }
        this.updateTexts();
        this.setDisabledState(false);
    }
    updateTexts() {
        this.typedDashboardStatus = this.value
            ? gettext('Enabled`typed dashboard`')
            : gettext('Disabled`typed dashboard`');
        if (this.allowTypeDashboard === 'allow_if_type_filled') {
            this.infoText = gettext(`<p class="p-b-8">Enabling this option uses the layout and configuration of this dashboard to create dashboard instances for all devices based on the device type.</p>
             <p class="p-b-16">The current device doesn't have a device type assigned to it. Assign a device type to the device via the "Asset properties" widget in the <strong>Info</strong> tab of the device.</p>`);
            return;
        }
        if (this.value) {
            if (this.isDevice) {
                this.infoText = gettext(`<p class="p-b-8">
            The layout and configuration of this dashboard is used by all devices based on device type <span class="tag tag--info text-12">{{ displayDeviceTypeValue }}</span>.
          </p>
          <p class="p-b-16">
            Disabling this option removes it from all devices based on the same type and makes it available only for the current instance.
          </p>`);
            }
            else {
                this.infoText = gettext(`<p class="p-b-8">
              The layout and configuration of this dashboard is used by all assets based on asset model <span class="tag tag--info text-12">{{ displayDeviceTypeValue }}</span>.
            </p>
            <p class="p-b-16">
              Disabling this option removes it from all assets based on the same model and makes it available only for the current instance.
            </p>`);
            }
        }
        else {
            if (this.isDevice) {
                this.infoText = gettext(`<p>Enabling this option uses the layout and configuration of this dashboard to create dashboard instances for all devices based on the type <span class="tag tag--info text-12">{{ displayDeviceTypeValue }}</span>.</p>`);
            }
            else {
                this.infoText = gettext(`<p>Enabling this option uses the layout and configuration of this dashboard to create dashboard instances for all assets based on the model <span class="tag tag--info text-12">{{ displayDeviceTypeValue }}</span>.</p>`);
            }
        }
    }
    async updateDeviceTypeCount() {
        const count = await this.inventory.count({
            type: this.deviceTypeValue
        });
        this.deviceTypeInstancesCount = count.data;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TypedDashboardSettingsComponent, deps: [{ token: i1.InventoryService }, { token: i2.InterAppService }, { token: i1$1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: TypedDashboardSettingsComponent, isStandalone: true, selector: "c8y-typed-dashboard-settings", inputs: { deviceTypeValue: "deviceTypeValue", displayDeviceTypeValue: "displayDeviceTypeValue", formInvalid: "formInvalid", mo: "mo", isDevice: "isDevice", allowTypeDashboard: "allowTypeDashboard" }, outputs: { onDuplicateWithoutType: "onDuplicateWithoutType" }, providers: [
            {
                provide: NG_VALUE_ACCESSOR,
                useExisting: forwardRef(() => TypedDashboardSettingsComponent),
                multi: true
            }
        ], ngImport: i0, template: "<fieldset class=\"c8y-fieldset c8y-fieldset--lg\">\n  <legend>{{ 'Dashboard template' | translate }}</legend>\n  <div class=\"d-flex p-b-16 gap-16\">\n    <label class=\"c8y-switch flex-no-shrink\">\n      <input\n        type=\"checkbox\"\n        [checked]=\"value\"\n        [disabled]=\"disabled\"\n        (click)=\"toggle()\"\n      />\n      <span></span>\n      <span>{{ typedDashboardStatus | translate }}</span>\n    </label>\n    <div class=\"flex-grow d-flex d-col\">\n      <div\n        class=\"flex-grow\"\n        [innerHtml]=\"infoText | translate: { displayDeviceTypeValue: displayDeviceTypeValue }\"\n      ></div>\n      <button\n        class=\"btn-link p-0 m-r-auto\"\n        type=\"button\"\n        *ngIf=\"allowTypeDashboard === 'allow_if_type_filled' && showSourceNavigationLink$ | async\"\n        (click)=\"goToDeviceView()\"\n      >\n        {{\n          deviceManagementLinkTitle\n            | translate\n              : {\n                  deviceManagementAppName:\n                    userDeviceManagementApp$ | async | humanizeAppName | async\n                }\n        }}\n        <i c8yIcon=\"external-link\"></i>\n      </button>\n    </div>\n  </div>\n\n  <c8y-type-dashboard-info\n    *ngIf=\"allowTypeDashboard === 'allow'\"\n    [context]=\"mo\"\n    [deviceTypeValue]=\"deviceTypeValue\"\n    [displayDeviceTypeValue]=\"displayDeviceTypeValue\"\n  ></c8y-type-dashboard-info>\n\n  <div\n    class=\"p-t-8 p-b-16\"\n    *ngIf=\"mo?.c8y_Dashboard && value\"\n  >\n    <button\n      class=\"btn btn-default btn-sm\"\n      type=\"button\"\n      c8yProductExperience\n      [actionName]=\"PRODUCT_EXPERIENCE.DASHBOARD.EVENTS.DASHBOARD_TEMPLATE\"\n      [actionData]=\"{\n        component: PRODUCT_EXPERIENCE.DASHBOARD.COMPONENTS.TYPED_DASHBOARD_SETTINGS,\n        action: PRODUCT_EXPERIENCE.DASHBOARD.ACTIONS.DUPLICATE_AS_REGULAR_DASHBOARD\n      }\"\n      (click)=\"onDuplicateWithoutType.emit()\"\n      [disabled]=\"formInvalid\"\n    >\n      {{ 'Duplicate as regular dashboard' | translate }}\n    </button>\n  </div>\n</fieldset>\n", dependencies: [{ kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.HumanizeAppNamePipe, name: "humanizeAppName" }, { kind: "directive", type: i2.ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit", "suppressDataOverriding"] }, { kind: "component", type: TypeDashboardInfoComponent, selector: "c8y-type-dashboard-info", inputs: ["deviceTypeValue", "displayDeviceTypeValue", "context", "asyncRenderSuccess", "asyncRenderFail"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TypedDashboardSettingsComponent, decorators: [{
            type: Component,
            args: [{ selector: 'c8y-typed-dashboard-settings', providers: [
                        {
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: forwardRef(() => TypedDashboardSettingsComponent),
                            multi: true
                        }
                    ], standalone: true, imports: [C8yTranslatePipe, CoreModule, TypeDashboardInfoComponent, ProductExperienceDirective], template: "<fieldset class=\"c8y-fieldset c8y-fieldset--lg\">\n  <legend>{{ 'Dashboard template' | translate }}</legend>\n  <div class=\"d-flex p-b-16 gap-16\">\n    <label class=\"c8y-switch flex-no-shrink\">\n      <input\n        type=\"checkbox\"\n        [checked]=\"value\"\n        [disabled]=\"disabled\"\n        (click)=\"toggle()\"\n      />\n      <span></span>\n      <span>{{ typedDashboardStatus | translate }}</span>\n    </label>\n    <div class=\"flex-grow d-flex d-col\">\n      <div\n        class=\"flex-grow\"\n        [innerHtml]=\"infoText | translate: { displayDeviceTypeValue: displayDeviceTypeValue }\"\n      ></div>\n      <button\n        class=\"btn-link p-0 m-r-auto\"\n        type=\"button\"\n        *ngIf=\"allowTypeDashboard === 'allow_if_type_filled' && showSourceNavigationLink$ | async\"\n        (click)=\"goToDeviceView()\"\n      >\n        {{\n          deviceManagementLinkTitle\n            | translate\n              : {\n                  deviceManagementAppName:\n                    userDeviceManagementApp$ | async | humanizeAppName | async\n                }\n        }}\n        <i c8yIcon=\"external-link\"></i>\n      </button>\n    </div>\n  </div>\n\n  <c8y-type-dashboard-info\n    *ngIf=\"allowTypeDashboard === 'allow'\"\n    [context]=\"mo\"\n    [deviceTypeValue]=\"deviceTypeValue\"\n    [displayDeviceTypeValue]=\"displayDeviceTypeValue\"\n  ></c8y-type-dashboard-info>\n\n  <div\n    class=\"p-t-8 p-b-16\"\n    *ngIf=\"mo?.c8y_Dashboard && value\"\n  >\n    <button\n      class=\"btn btn-default btn-sm\"\n      type=\"button\"\n      c8yProductExperience\n      [actionName]=\"PRODUCT_EXPERIENCE.DASHBOARD.EVENTS.DASHBOARD_TEMPLATE\"\n      [actionData]=\"{\n        component: PRODUCT_EXPERIENCE.DASHBOARD.COMPONENTS.TYPED_DASHBOARD_SETTINGS,\n        action: PRODUCT_EXPERIENCE.DASHBOARD.ACTIONS.DUPLICATE_AS_REGULAR_DASHBOARD\n      }\"\n      (click)=\"onDuplicateWithoutType.emit()\"\n      [disabled]=\"formInvalid\"\n    >\n      {{ 'Duplicate as regular dashboard' | translate }}\n    </button>\n  </div>\n</fieldset>\n" }]
        }], ctorParameters: () => [{ type: i1.InventoryService }, { type: i2.InterAppService }, { type: i1$1.ActivatedRoute }], propDecorators: { deviceTypeValue: [{
                type: Input
            }], displayDeviceTypeValue: [{
                type: Input
            }], formInvalid: [{
                type: Input
            }], mo: [{
                type: Input
            }], isDevice: [{
                type: Input
            }], allowTypeDashboard: [{
                type: Input
            }], onDuplicateWithoutType: [{
                type: Output
            }] } });

class DashboardGeneralSettingsComponent {
    constructor(navigatorService, dashboardDetailService) {
        this.navigatorService = navigatorService;
        this.dashboardDetailService = dashboardDetailService;
        this.priorityExampleLabel = gettext('e.g. {{ example }}');
        this.positionInTabsExampleLabel = gettext('Position in tabs (10000 first, -10000 last)');
    }
    ngOnInit() {
        this.generalSettingsForm = this.dashboardDetailService.generalSettingsForm;
        Object.assign(this, this.dashboardDetailService.details);
        this.namePlaceholder = this.isReport ? gettext('e.g. My report') : gettext('e.g. My dashboard');
        this.navigatorNodes$ = this.navigatorService.items$;
        this.globalRolesIds = this.generalSettingsForm.value.globalRolesIds;
    }
    changeGlobalRoleIds() {
        this.generalSettingsForm.get('globalRolesIds').setValue(this.globalRolesIds);
        this.generalSettingsForm.markAsDirty();
    }
    async duplicateWithoutType() {
        await this.dashboardDetailService.duplicateWithoutTypeFn();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DashboardGeneralSettingsComponent, deps: [{ token: i2.NavigatorService }, { token: DashboardDetailService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DashboardGeneralSettingsComponent, isStandalone: true, selector: "c8y-dashboard-general-settings", 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                  {{ positionInTabsExampleLabel | 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.get('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)=\"duplicateWithoutType()\"\n    ></c8y-typed-dashboard-settings>\n    <c8y-dashboard-availability\n      *ngIf=\"\n        !!isReport === false &&\n        (!allowTypeDashboard || !deviceTypeValue || !generalSettingsForm.get('deviceType')) &&\n        !hideAvailability\n      \"\n      [(globalRolesIds)]=\"globalRolesIds\"\n      (globalRolesIdsChange)=\"changeGlobalRoleIds()\"\n    ></c8y-dashboard-availability>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "directive", type: i2.TextareaAutoresizeDirective, selector: "[c8y-textarea-autoresize]" }, { 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i5.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i2.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: i2.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: IconSelectorModule }, { kind: "component", type: i5$1.IconSelectorWrapperComponent, selector: "c8y-icon-selector-wrapper", inputs: ["canRemoveIcon", "selectedIcon", "iconSize"], outputs: ["onSelect"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i2$1.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: DashboardAvailabilityComponent, selector: "c8y-dashboard-availability", inputs: ["globalRolesIds"], outputs: ["globalRolesIdsChange"] }, { kind: "component", type: TypedDashboardSettingsComponent, selector: "c8y-typed-dashboard-settings", inputs: ["deviceTypeValue", "displayDeviceTypeValue", "formInvalid", "mo", "isDevice", "allowTypeDashboard"], outputs: ["onDuplicateWithoutType"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DashboardGeneralSettingsComponent, decorators: [{
            type: Component,
            args: [{ selector: 'c8y-dashboard-general-settings', standalone: true, imports: [
                        CoreModule,
                        IconSelectorModule,
                        C8yTranslatePipe,
                        PopoverModule,
                        DashboardAvailabilityComponent,
                        TypedDashboardSettingsComponent
                    ], 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                  {{ positionInTabsExampleLabel | 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.get('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)=\"duplicateWithoutType()\"\n    ></c8y-typed-dashboard-settings>\n    <c8y-dashboard-availability\n      *ngIf=\"\n        !!isReport === false &&\n        (!allowTypeDashboard || !deviceTypeValue || !generalSettingsForm.get('deviceType')) &&\n        !hideAvailability\n      \"\n      [(globalRolesIds)]=\"globalRolesIds\"\n      (globalRolesIdsChange)=\"changeGlobalRoleIds()\"\n    ></c8y-dashboard-availability>\n  </div>\n</div>\n" }]
        }], ctorParameters: () => [{ type: i2.NavigatorService }, { type: DashboardDetailService }] });

export { DashboardGeneralSettingsComponent };
//# sourceMappingURL=c8y-ngx-components-context-dashboard-dashboard-general-settings.component-RXvOcs04.mjs.map