@c8y/ngx-components/fesm2022/c8y-ngx-components-location.mjs

Angular modules for Cumulocity IoT applications

import * as i0 from '@angular/core';
import { TemplateRef, ViewChild, Optional, Inject, Component, Injectable, NgModule } from '@angular/core';
import * as i1 from '@c8y/client';
import * as i1$1 from '@c8y/ngx-components';
import { IconDirective, C8yTranslateDirective, C8yTranslatePipe, ViewContext, Permissions, ActionBarItemComponent, FormGroupComponent, RequiredInputPlaceholderDirective, MinValidationDirective, MaxValidationDirective, MessagesComponent, MessageDirective, CoreModule, hookRoute, hookTab, hookActionBar } from '@c8y/ngx-components';
import * as i3 from '@angular/router';
import { RouterModule } from '@angular/router';
import { defaultMapConfig, MAP_DEFAULT_CONFIG, MapComponent, MapModule } from '@c8y/ngx-components/map';
import * as i4 from 'rxjs';
import { of, Subject } from 'rxjs';
import { first, takeUntil } from 'rxjs/operators';
import { isUndefined, cloneDeep } from 'lodash-es';
import { gettext } from '@c8y/ngx-components/gettext';
import { NgClass, NgIf } from '@angular/common';
import * as i4$1 from '@angular/forms';
import { FormsModule } from '@angular/forms';

class AddLocationComponent {
    constructor(inventoryService, contextRouteService, defaultConfig$, router, alertService, vcRef) {
        this.inventoryService = inventoryService;
        this.contextRouteService = contextRouteService;
        this.defaultConfig$ = defaultConfig$;
        this.router = router;
        this.alertService = alertService;
        this.vcRef = vcRef;
    }
    ngOnInit() {
        this.vcRef.createEmbeddedView(this.templateCopy);
    }
    onClick() {
        const mapConfig$ = this.defaultConfig$ || of(defaultMapConfig);
        mapConfig$.pipe(first()).subscribe(async (config) => {
            const context = this.contextRouteService.activatedContextData;
            context.contextData.c8y_Position = {
                lat: config.center[0],
                lng: config.center[1]
            };
            try {
                await this.inventoryService.update(context.contextData);
            }
            catch (ex) {
                this.alertService.addServerFailure(ex);
            }
            const route = this.contextRouteService.getContextRoute(context);
            this.contextRouteService.refreshContext();
            this.router.navigateByUrl(route + '/location');
        });
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AddLocationComponent, deps: [{ token: i1.InventoryService }, { token: i1$1.ContextRouteService }, { token: MAP_DEFAULT_CONFIG, optional: true }, { token: i3.Router }, { token: i1$1.AlertService }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: AddLocationComponent, isStandalone: true, selector: "c8y-add-location", viewQueries: [{ propertyName: "templateCopy", first: true, predicate: ["templateCopy"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<ng-template #templateCopy>\n  <button\n    class=\"btn btn-link\"\n    [title]=\"'Add location' | translate\"\n    (click)=\"onClick()\"\n  >\n    <i c8yIcon=\"location-arrow\"></i>\n    <span translate>Add location</span>\n  </button>\n</ng-template>\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AddLocationComponent, decorators: [{
            type: Component,
            args: [{ selector: 'c8y-add-location', imports: [IconDirective, C8yTranslateDirective, C8yTranslatePipe], template: "<ng-template #templateCopy>\n  <button\n    class=\"btn btn-link\"\n    [title]=\"'Add location' | translate\"\n    (click)=\"onClick()\"\n  >\n    <i c8yIcon=\"location-arrow\"></i>\n    <span translate>Add location</span>\n  </button>\n</ng-template>\n" }]
        }], ctorParameters: () => [{ type: i1.InventoryService }, { type: i1$1.ContextRouteService }, { type: i4.Observable, decorators: [{
                    type: Optional
                }, {
                    type: Inject,
                    args: [MAP_DEFAULT_CONFIG]
                }] }, { type: i3.Router }, { type: i1$1.AlertService }, { type: i0.ViewContainerRef }], propDecorators: { templateCopy: [{
                type: ViewChild,
                args: ['templateCopy', { read: TemplateRef, static: true }]
            }] } });

class AddLocationFactory {
    constructor(contextRouteService) {
        this.contextRouteService = contextRouteService;
        this.action = {
            component: AddLocationComponent,
            placement: 'more'
        };
    }
    get(activatedRoute) {
        const routeData = this.contextRouteService.getContextData(activatedRoute);
        if (!routeData) {
            return;
        }
        if (routeData.context === ViewContext.Device &&
            isUndefined(routeData.contextData.c8y_Position)) {
            return this.action;
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AddLocationFactory, deps: [{ token: i1$1.ContextRouteService }], target: i0.ɵɵFactoryTarget.Injectable }); }
    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AddLocationFactory, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AddLocationFactory, decorators: [{
            type: Injectable,
            args: [{ providedIn: 'root' }]
        }], ctorParameters: () => [{ type: i1$1.ContextRouteService }] });

class LocationTabFactory {
    constructor(contextRouteService) {
        this.contextRouteService = contextRouteService;
    }
    get(activatedRoute) {
        const contextData = this.contextRouteService.getContextData(activatedRoute);
        const isDeviceOrGroupWithPosition = (contextData?.context === ViewContext.Device || contextData?.context === ViewContext.Group) &&
            contextData?.contextData.c8y_Position;
        if (isDeviceOrGroupWithPosition) {
            return [
                {
                    label: gettext('Location'),
                    icon: 'location-arrow',
                    path: `${this.contextRouteService.getContextRoute(contextData)}/location`
                }
            ];
        }
        return [];
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: LocationTabFactory, deps: [{ token: i1$1.ContextRouteService }], target: i0.ɵɵFactoryTarget.Injectable }); }
    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: LocationTabFactory, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: LocationTabFactory, decorators: [{
            type: Injectable,
            args: [{
                    providedIn: 'root'
                }]
        }], ctorParameters: () => [{ type: i1$1.ContextRouteService }] });

class LocationComponent {
    constructor(contextRouteService, activatedRoute, inventoryService, permissions, optionsService, alertService) {
        this.contextRouteService = contextRouteService;
        this.activatedRoute = activatedRoute;
        this.inventoryService = inventoryService;
        this.permissions = permissions;
        this.optionsService = optionsService;
        this.alertService = alertService;
        this.isEdit = false;
        this.canEdit = true;
        this.config = { realtime: false, follow: true, zoomLevel: 12 };
        this.addressSearchTerm = '';
        this.hideAddressSearchFeature = false;
        this.destroy$ = new Subject();
        this.mapNominatimUrl = 'https://nominatim.openstreetmap.org/search?format=json&q={searchTerm}';
    }
    ngOnInit() {
        this.activatedRoute.url.pipe(takeUntil(this.destroy$)).subscribe(() => {
            this.updateMap();
        });
    }
    async updateMap() {
        const { contextData } = this.contextRouteService.getContextData(this.activatedRoute);
        this.position = contextData;
        this.canEdit = await this.permissions.canEdit([Permissions.ROLE_INVENTORY_ADMIN, Permissions.ROLE_INVENTORY_CREATE], contextData);
        const hasCustomSetting = !isUndefined(this.optionsService.mapNominatimUrl);
        this.hideAddressSearchFeature = hasCustomSetting && !this.optionsService.mapNominatimUrl;
        if (hasCustomSetting) {
            this.mapNominatimUrl = this.optionsService.mapNominatimUrl;
        }
        this.map.refresh();
    }
    toggleRealtime() {
        this.config = { ...this.config, realtime: !this.config.realtime };
    }
    disableRealtime() {
        this.config = { ...this.config, realtime: false };
    }
    centerMap() {
        this.config = {
            ...this.config,
            center: [this.position.c8y_Position.lat, this.position.c8y_Position.lng]
        };
    }
    edit() {
        this.originalPosition = cloneDeep(this.position);
        this.enableMarkerDragging();
        this.disableRealtime();
        this.isEdit = true;
    }
    cancel() {
        this.position = this.originalPosition;
        this.isEdit = false;
        this.map.markers[0]?.dragging.disable();
        this.centerMap();
    }
    async save() {
        try {
            const { data } = await this.inventoryService.update({
                id: this.position.id,
                c8y_Position: this.position.c8y_Position
            });
            this.position = data;
        }
        catch (ex) {
            this.alertService.addServerFailure(ex);
        }
        this.map.markers[0]?.dragging.disable();
        this.centerMap();
        this.isEdit = false;
    }
    positionChanged(position) {
        this.position = position;
    }
    async searchAddress(searchTerm) {
        const fetchResponse = await fetch(this.mapNominatimUrl.replace('{searchTerm}', searchTerm));
        if (fetchResponse.status !== 200) {
            this.alertService.danger(gettext('Failed to search for address.'));
            return;
        }
        const data = await fetchResponse.json();
        const latLng = data[0];
        if (!latLng) {
            this.alertService.warning(gettext('Address could not be found.'));
            return;
        }
        this.position.c8y_Position.lat = Number(latLng.lat);
        this.position.c8y_Position.lng = Number(latLng.lon);
        this.updateMarkerPosition();
        if (latLng.licence) {
            this.map.map.attributionControl.addAttribution(latLng.licence);
        }
    }
    updateMarkerPosition() {
        this.map.refreshMarkers();
        this.enableMarkerDragging();
        this.centerMap();
    }
    ngOnDestroy() {
        this.destroy$.next();
    }
    enableMarkerDragging() {
        const marker = this.map.markers[0];
        if (marker) {
            marker.dragging.enable();
            marker.on('dragend', () => {
                const latlng = marker.getLatLng();
                this.position.c8y_Position = {
                    ...this.position.c8y_Position,
                    lat: latlng.lat,
                    lng: latlng.lng
                };
                this.centerMap();
            });
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: LocationComponent, deps: [{ token: i1$1.ContextRouteService }, { token: i3.ActivatedRoute }, { token: i1.InventoryService }, { token: i1$1.Permissions }, { token: i1$1.OptionsService }, { token: i1$1.AlertService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: LocationComponent, isStandalone: true, selector: "c8y-location", viewQueries: [{ propertyName: "map", first: true, predicate: MapComponent, descendants: true }], ngImport: i0, template: "<c8y-action-bar-item placement=\"right\">\n  <button\n    class=\"btn btn-link c8y-realtime\"\n    title=\"{{ 'Toggle realtime' | translate }}\"\n    type=\"button\"\n    (click)=\"toggleRealtime()\"\n  >\n    <span\n      class=\"c8y-pulse\"\n      [ngClass]=\"{ active: config.realtime, inactive: !config.realtime }\"\n    ></span>\n    <span translate>Realtime</span>\n  </button>\n</c8y-action-bar-item>\n<c8y-action-bar-item placement=\"right\">\n  <button\n    class=\"btn btn-clean\"\n    title=\"{{ 'Center`verb`' | translate }}\"\n    (click)=\"centerMap()\"\n  >\n    <i [c8yIcon]=\"'target1'\"></i>\n    <span translate>Center`verb`</span>\n  </button>\n</c8y-action-bar-item>\n\n<div class=\"card card--grid content-fullpage d-grid grid__col--8-4--md\">\n  <div\n    class=\"bg-white p-relative\"\n    style=\"min-height: 30vh\"\n  >\n    <c8y-map\n      [assets]=\"[position]\"\n      [config]=\"config\"\n      (onRealtimeUpdate)=\"positionChanged($event)\"\n    ></c8y-map>\n  </div>\n\n  <form\n    class=\"d-flex d-col bg-inherit content-fullpage bg-gray-white\"\n    #positionForm=\"ngForm\"\n    (ngSubmit)=\"save()\"\n  >\n    <div class=\"card-header large-padding separator sticky-top\">\n      <span\n        class=\"card-title\"\n        translate\n      >\n        Device location\n      </span>\n    </div>\n    <div class=\"inner-scroll\">\n      <div\n        class=\"m-16\"\n        *ngIf=\"!isEdit\"\n      >\n        <div class=\"p-b-40\">\n          <div\n            class=\"text-bold\"\n            translate\n          >\n            Latitude (\u00B0)\n          </div>\n          {{ position.c8y_Position.lat }}\n        </div>\n        <div class=\"p-b-40\">\n          <div\n            class=\"text-bold\"\n            translate\n          >\n            Longitude (\u00B0)\n          </div>\n          {{ position.c8y_Position.lng }}\n        </div>\n        <div class=\"p-b-40\">\n          <div\n            class=\"text-bold\"\n            translate\n          >\n            Altitude (m)\n          </div>\n          {{ position.c8y_Position.alt }}\n        </div>\n      </div>\n      <div\n        class=\"m-16\"\n        *ngIf=\"isEdit\"\n      >\n        <c8y-form-group>\n          <label\n            for=\"lat\"\n            translate\n          >\n            Latitude (\u00B0)\n          </label>\n\n          <input\n            class=\"form-control\"\n            [title]=\"'Latitude (\u00B0)' | translate\"\n            id=\"lat\"\n            name=\"lat\"\n            type=\"number\"\n            required\n            min=\"-90\"\n            max=\"90\"\n            (blur)=\"positionForm.valid && updateMarkerPosition()\"\n            [(ngModel)]=\"position.c8y_Position.lat\"\n          />\n          <c8y-messages>\n            <c8y-message\n              name=\"min\"\n              [text]=\"'The minimum latitude value is -90\u00B0.' | translate\"\n            ></c8y-message>\n            <c8y-message\n              name=\"max\"\n              [text]=\"'The maximum latitude value is 90\u00B0.' | translate\"\n            ></c8y-message>\n          </c8y-messages>\n        </c8y-form-group>\n        <c8y-form-group>\n          <label\n            for=\"lat\"\n            translate\n          >\n            Longitude (\u00B0)\n          </label>\n\n          <input\n            class=\"form-control\"\n            [title]=\"'Longitude (\u00B0)' | translate\"\n            id=\"lng\"\n            name=\"lng\"\n            type=\"number\"\n            required\n            min=\"-180\"\n            max=\"180\"\n            (blur)=\"positionForm.valid && updateMarkerPosition()\"\n            [(ngModel)]=\"position.c8y_Position.lng\"\n          />\n          <c8y-messages>\n            <c8y-message\n              name=\"min\"\n              [text]=\"'The minimum longitude value is -180\u00B0.' | translate\"\n            ></c8y-message>\n            <c8y-message\n              name=\"max\"\n              [text]=\"'The maximum longitude value is 180\u00B0.' | translate\"\n            ></c8y-message>\n          </c8y-messages>\n        </c8y-form-group>\n        <c8y-form-group>\n          <label\n            for=\"alt\"\n            translate\n          >\n            Altitude (m)\n          </label>\n\n          <input\n            class=\"form-control\"\n            [title]=\"'Altitude (m)' | translate\"\n            id=\"alt\"\n            name=\"alt\"\n            type=\"number\"\n            [(ngModel)]=\"position.c8y_Position.alt\"\n          />\n        </c8y-form-group>\n      </div>\n\n      <form\n        class=\"card-block bg-level-1\"\n        #addressSearch=\"ngForm\"\n        novalidate\n        (submit)=\"searchAddress(addressSearchTerm)\"\n        *ngIf=\"isEdit && !hideAddressSearchFeature\"\n      >\n        <div class=\"form-group\">\n          <label\n            for=\"searchAddress\"\n            translate\n          >\n            Find lat/long by address\n          </label>\n          <div class=\"input-group input-group-search\">\n            <input\n              class=\"form-control\"\n              id=\"searchAddress\"\n              name=\"addressSearchTerm\"\n              type=\"text\"\n              [placeholder]=\"'e.g. Speditionstra\u00DFe 13, D\u00FCsseldorf`LOCALIZE`' | translate\"\n              [(ngModel)]=\"addressSearchTerm\"\n            />\n            <span class=\"input-group-btn\">\n              <button\n                class=\"btn btn-dot\"\n                [title]=\"'Search' | translate\"\n                type=\"submit\"\n              >\n                <i\n                  class=\"dlt-c8y-icon-search\"\n                  c8y-icon=\"search\"\n                ></i>\n              </button>\n            </span>\n          </div>\n        </div>\n      </form>\n    </div>\n    <div class=\"card-footer separator\">\n      <button\n        class=\"btn btn-default\"\n        [title]=\"'Edit location' | translate\"\n        type=\"button\"\n        *ngIf=\"canEdit && !isEdit\"\n        (click)=\"edit()\"\n        translate\n      >\n        Edit location\n      </button>\n      <button\n        class=\"btn btn-default\"\n        [title]=\"'Cancel' | translate\"\n        type=\"button\"\n        (click)=\"cancel()\"\n        *ngIf=\"isEdit\"\n        translate\n      >\n        Cancel\n      </button>\n      <button\n        class=\"btn btn-primary\"\n        [title]=\"'Save' | translate\"\n        type=\"submit\"\n        *ngIf=\"isEdit\"\n        translate\n        [disabled]=\"!positionForm.valid\"\n      >\n        Save\n      </button>\n    </div>\n  </form>\n</div>\n", dependencies: [{ kind: "component", type: ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId", "inGroupPriority"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "component", type: MapComponent, selector: "c8y-map", inputs: ["config", "assets", "polyline$", "polylineOptions"], outputs: ["onRealtimeUpdate", "onMove", "onMoveEnd", "onZoomStart", "onZoomEnd", "onMap", "onInit"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4$1.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: i4$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i4$1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i4$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: MinValidationDirective, selector: "[min]", inputs: ["min"] }, { kind: "directive", type: MaxValidationDirective, selector: "[max]", inputs: ["max"] }, { kind: "component", type: MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage", "additionalMessages"] }, { kind: "directive", type: MessageDirective, selector: "c8y-message", inputs: ["name", "text"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: LocationComponent, decorators: [{
            type: Component,
            args: [{ selector: 'c8y-location', imports: [
                        ActionBarItemComponent,
                        NgClass,
                        C8yTranslateDirective,
                        IconDirective,
                        MapComponent,
                        FormsModule,
                        NgIf,
                        FormGroupComponent,
                        RequiredInputPlaceholderDirective,
                        MinValidationDirective,
                        MaxValidationDirective,
                        MessagesComponent,
                        MessageDirective,
                        C8yTranslatePipe
                    ], template: "<c8y-action-bar-item placement=\"right\">\n  <button\n    class=\"btn btn-link c8y-realtime\"\n    title=\"{{ 'Toggle realtime' | translate }}\"\n    type=\"button\"\n    (click)=\"toggleRealtime()\"\n  >\n    <span\n      class=\"c8y-pulse\"\n      [ngClass]=\"{ active: config.realtime, inactive: !config.realtime }\"\n    ></span>\n    <span translate>Realtime</span>\n  </button>\n</c8y-action-bar-item>\n<c8y-action-bar-item placement=\"right\">\n  <button\n    class=\"btn btn-clean\"\n    title=\"{{ 'Center`verb`' | translate }}\"\n    (click)=\"centerMap()\"\n  >\n    <i [c8yIcon]=\"'target1'\"></i>\n    <span translate>Center`verb`</span>\n  </button>\n</c8y-action-bar-item>\n\n<div class=\"card card--grid content-fullpage d-grid grid__col--8-4--md\">\n  <div\n    class=\"bg-white p-relative\"\n    style=\"min-height: 30vh\"\n  >\n    <c8y-map\n      [assets]=\"[position]\"\n      [config]=\"config\"\n      (onRealtimeUpdate)=\"positionChanged($event)\"\n    ></c8y-map>\n  </div>\n\n  <form\n    class=\"d-flex d-col bg-inherit content-fullpage bg-gray-white\"\n    #positionForm=\"ngForm\"\n    (ngSubmit)=\"save()\"\n  >\n    <div class=\"card-header large-padding separator sticky-top\">\n      <span\n        class=\"card-title\"\n        translate\n      >\n        Device location\n      </span>\n    </div>\n    <div class=\"inner-scroll\">\n      <div\n        class=\"m-16\"\n        *ngIf=\"!isEdit\"\n      >\n        <div class=\"p-b-40\">\n          <div\n            class=\"text-bold\"\n            translate\n          >\n            Latitude (\u00B0)\n          </div>\n          {{ position.c8y_Position.lat }}\n        </div>\n        <div class=\"p-b-40\">\n          <div\n            class=\"text-bold\"\n            translate\n          >\n            Longitude (\u00B0)\n          </div>\n          {{ position.c8y_Position.lng }}\n        </div>\n        <div class=\"p-b-40\">\n          <div\n            class=\"text-bold\"\n            translate\n          >\n            Altitude (m)\n          </div>\n          {{ position.c8y_Position.alt }}\n        </div>\n      </div>\n      <div\n        class=\"m-16\"\n        *ngIf=\"isEdit\"\n      >\n        <c8y-form-group>\n          <label\n            for=\"lat\"\n            translate\n          >\n            Latitude (\u00B0)\n          </label>\n\n          <input\n            class=\"form-control\"\n            [title]=\"'Latitude (\u00B0)' | translate\"\n            id=\"lat\"\n            name=\"lat\"\n            type=\"number\"\n            required\n            min=\"-90\"\n            max=\"90\"\n            (blur)=\"positionForm.valid && updateMarkerPosition()\"\n            [(ngModel)]=\"position.c8y_Position.lat\"\n          />\n          <c8y-messages>\n            <c8y-message\n              name=\"min\"\n              [text]=\"'The minimum latitude value is -90\u00B0.' | translate\"\n            ></c8y-message>\n            <c8y-message\n              name=\"max\"\n              [text]=\"'The maximum latitude value is 90\u00B0.' | translate\"\n            ></c8y-message>\n          </c8y-messages>\n        </c8y-form-group>\n        <c8y-form-group>\n          <label\n            for=\"lat\"\n            translate\n          >\n            Longitude (\u00B0)\n          </label>\n\n          <input\n            class=\"form-control\"\n            [title]=\"'Longitude (\u00B0)' | translate\"\n            id=\"lng\"\n            name=\"lng\"\n            type=\"number\"\n            required\n            min=\"-180\"\n            max=\"180\"\n            (blur)=\"positionForm.valid && updateMarkerPosition()\"\n            [(ngModel)]=\"position.c8y_Position.lng\"\n          />\n          <c8y-messages>\n            <c8y-message\n              name=\"min\"\n              [text]=\"'The minimum longitude value is -180\u00B0.' | translate\"\n            ></c8y-message>\n            <c8y-message\n              name=\"max\"\n              [text]=\"'The maximum longitude value is 180\u00B0.' | translate\"\n            ></c8y-message>\n          </c8y-messages>\n        </c8y-form-group>\n        <c8y-form-group>\n          <label\n            for=\"alt\"\n            translate\n          >\n            Altitude (m)\n          </label>\n\n          <input\n            class=\"form-control\"\n            [title]=\"'Altitude (m)' | translate\"\n            id=\"alt\"\n            name=\"alt\"\n            type=\"number\"\n            [(ngModel)]=\"position.c8y_Position.alt\"\n          />\n        </c8y-form-group>\n      </div>\n\n      <form\n        class=\"card-block bg-level-1\"\n        #addressSearch=\"ngForm\"\n        novalidate\n        (submit)=\"searchAddress(addressSearchTerm)\"\n        *ngIf=\"isEdit && !hideAddressSearchFeature\"\n      >\n        <div class=\"form-group\">\n          <label\n            for=\"searchAddress\"\n            translate\n          >\n            Find lat/long by address\n          </label>\n          <div class=\"input-group input-group-search\">\n            <input\n              class=\"form-control\"\n              id=\"searchAddress\"\n              name=\"addressSearchTerm\"\n              type=\"text\"\n              [placeholder]=\"'e.g. Speditionstra\u00DFe 13, D\u00FCsseldorf`LOCALIZE`' | translate\"\n              [(ngModel)]=\"addressSearchTerm\"\n            />\n            <span class=\"input-group-btn\">\n              <button\n                class=\"btn btn-dot\"\n                [title]=\"'Search' | translate\"\n                type=\"submit\"\n              >\n                <i\n                  class=\"dlt-c8y-icon-search\"\n                  c8y-icon=\"search\"\n                ></i>\n              </button>\n            </span>\n          </div>\n        </div>\n      </form>\n    </div>\n    <div class=\"card-footer separator\">\n      <button\n        class=\"btn btn-default\"\n        [title]=\"'Edit location' | translate\"\n        type=\"button\"\n        *ngIf=\"canEdit && !isEdit\"\n        (click)=\"edit()\"\n        translate\n      >\n        Edit location\n      </button>\n      <button\n        class=\"btn btn-default\"\n        [title]=\"'Cancel' | translate\"\n        type=\"button\"\n        (click)=\"cancel()\"\n        *ngIf=\"isEdit\"\n        translate\n      >\n        Cancel\n      </button>\n      <button\n        class=\"btn btn-primary\"\n        [title]=\"'Save' | translate\"\n        type=\"submit\"\n        *ngIf=\"isEdit\"\n        translate\n        [disabled]=\"!positionForm.valid\"\n      >\n        Save\n      </button>\n    </div>\n  </form>\n</div>\n" }]
        }], ctorParameters: () => [{ type: i1$1.ContextRouteService }, { type: i3.ActivatedRoute }, { type: i1.InventoryService }, { type: i1$1.Permissions }, { type: i1$1.OptionsService }, { type: i1$1.AlertService }], propDecorators: { map: [{
                type: ViewChild,
                args: [MapComponent]
            }] } });

class LocationRouteModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: LocationRouteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.19", ngImport: i0, type: LocationRouteModule, imports: [MapModule, CoreModule, RouterModule, LocationComponent], exports: [LocationComponent] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: LocationRouteModule, providers: [
            hookRoute({
                path: 'location',
                component: LocationComponent,
                context: ViewContext.Device,
                tabs: []
            }),
            hookRoute({
                path: 'location',
                component: LocationComponent,
                context: ViewContext.Group,
                tabs: []
            })
        ], imports: [MapModule, CoreModule, RouterModule, LocationComponent] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: LocationRouteModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [MapModule, CoreModule, RouterModule, LocationComponent],
                    exports: [LocationComponent],
                    providers: [
                        hookRoute({
                            path: 'location',
                            component: LocationComponent,
                            context: ViewContext.Device,
                            tabs: []
                        }),
                        hookRoute({
                            path: 'location',
                            component: LocationComponent,
                            context: ViewContext.Group,
                            tabs: []
                        })
                    ]
                }]
        }] });
class LocationTabModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: LocationTabModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.19", ngImport: i0, type: LocationTabModule, imports: [LocationRouteModule] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: LocationTabModule, providers: [hookTab(LocationTabFactory)], imports: [LocationRouteModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: LocationTabModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [LocationRouteModule],
                    providers: [hookTab(LocationTabFactory)]
                }]
        }] });
/**
 * @deprecated has been splitted into `LocationTabModule` and `AddLocationModule`.
 */
class LocationModule {
    /**
     *
     * @deprecated use the `LocationTabModule` and optionally `AddLocationModule` instead.
     */
    static config(config = { addLocation: false }) {
        return {
            ngModule: LocationModule,
            providers: config.addLocation ? [hookActionBar(AddLocationFactory)] : []
        };
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: LocationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.19", ngImport: i0, type: LocationModule, imports: [LocationTabModule] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: LocationModule, imports: [LocationTabModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: LocationModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [LocationTabModule]
                }]
        }] });
class AddLocationModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AddLocationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.19", ngImport: i0, type: AddLocationModule, imports: [CoreModule, LocationRouteModule, AddLocationComponent], exports: [AddLocationComponent] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AddLocationModule, providers: [hookActionBar(AddLocationFactory)], imports: [CoreModule, LocationRouteModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AddLocationModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [CoreModule, LocationRouteModule, AddLocationComponent],
                    exports: [AddLocationComponent],
                    providers: [hookActionBar(AddLocationFactory)]
                }]
        }] });

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

export { AddLocationComponent, AddLocationFactory, AddLocationModule, LocationComponent, LocationModule, LocationRouteModule, LocationTabFactory, LocationTabModule };
//# sourceMappingURL=c8y-ngx-components-location.mjs.map