npm - @c8y/ngx-components - Versions diffs - 1018.0.206 → 1018.0.208 - Mend

@c8y/ngx-components 1018.0.206 → 1018.0.208

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (69) hide show

package/fesm2015/c8y-ngx-components-widgets-implementations-map.mjs CHANGED Viewed

@@ -193,10 +193,10 @@ class MapWidgetConfigComponent {
     }
 }
 MapWidgetConfigComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: MapWidgetConfigComponent, deps: [{ token: i1$1.MapService }, { token: i2$1.AlertService }, { token: i3.TranslateService }, { token: MAP_DEFAULT_CONFIG, optional: true }, { token: i4.IconSelectorService }], target: i0.ɵɵFactoryTarget.Component });
-MapWidgetConfigComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: MapWidgetConfigComponent, selector: "c8y-map-widget-config", inputs: { config: "config" }, viewQueries: [{ propertyName: "previewMap", first: true, predicate: MapComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"row p-t-16\">\n  <div class=\"col-xs-2\">\n    <c8y-form-group class=\"m-b-0 text-center form-group-sm\">\n      <label translate>Marker icon</label>\n      <div class=\"icon-32 text-muted text-center p-b-8\" *ngIf=\"formConfig.icon\">\n        <i [c8yIcon]=\"formConfig.icon\"></i>\n      </div>\n      <div class=\"icon-32 text-muted text-center\" *ngIf=\"!formConfig.icon\">\n        <span class=\"d-block text-12 p-b-16 p-t-16\">\n          <em>{{ 'Auto' | translate }}</em>\n        </span>\n      </div>\n      <button\n        type=\"button\"\n        title=\"{{ 'Select icon to override default behavior' | translate }}\"\n        class=\"btn btn-default btn-xs btn-block\"\n        *ngIf=\"!formConfig.icon\"\n        (click)=\"openIconSelector()\"\n      >\n        {{ 'Select' | translate }}\n      </button>\n      <button\n        type=\"button\"\n        title=\"{{ 'Change icon' | translate }}\"\n        class=\"btn btn-default btn-xs btn-block\"\n        *ngIf=\"formConfig.icon\"\n        (click)=\"openIconSelector()\"\n      >\n        {{ 'Change' | translate }}\n      </button>\n      <button\n        type=\"button\"\n        title=\"{{ 'Remove icon and use default behavior' | translate }}\"\n        class=\"btn btn-danger btn-xs btn-block\"\n        *ngIf=\"formConfig.icon\"\n        (click)=\"removeIcon()\"\n      >\n        {{ 'Remove' | translate }}\n      </button>\n    </c8y-form-group>\n  </div>\n  <div class=\"col-xs-10\">\n    <div class=\"row tight-grid separator-bottom\">\n      <div class=\"col-xs-4\">\n        <div class=\"form-group form-group-sm\">\n          <label translate>Zoom level</label>\n          <c8y-range\n            #range\n            [(ngModel)]=\"formConfig.zoomLevel\"\n            name=\"zoomLevel\"\n            class=\"label-bottom\"\n            (change)=\"zoomLevelChanged()\"\n          >\n            <input type=\"range\" min=\"2\" max=\"18\" step=\"1\" />\n          </c8y-range>\n        </div>\n      </div>\n      <div class=\"col-xs-8\">\n        <c8y-form-group class=\"form-group-sm m-b-8\">\n          <label translate>Center bound</label>\n          <div class=\"input-group input-group-sm\">\n            <input\n              class=\"form-control\"\n              type=\"number\"\n              required\n              placeholder=\"lat\"\n              [(ngModel)]=\"formConfig.center[0]\"\n              (change)=\"changeCenter()\"\n              name=\"centerLat\"\n            />\n            <input\n              class=\"form-control\"\n              type=\"number\"\n              required\n              placeholder=\"lng\"\n              [(ngModel)]=\"formConfig.center[1]\"\n              (change)=\"changeCenter()\"\n              name=\"centerLng\"\n            />\n            <div class=\"input-group-btn\">\n              <button\n                class=\"btn btn-default\"\n                (click)=\"useOwnPosition()\"\n                [attr.aria-label]=\"'Use your location' | translate\"\n                [tooltip]=\"'Use your location' | translate\"\n                container=\"body\"\n                placement=\"top\"\n              >\n                <i c8yIcon=\"location-arrow\" class=\"icon-14\"></i>\n              </button>\n            </div>\n            <div class=\"input-group-btn\" *ngIf=\"canAutoCenter\">\n              <button\n                class=\"btn btn-default\"\n                [attr.aria-label]=\"'Use selected asset location' | translate\"\n                [tooltip]=\"'Use selected asset location' | translate\"\n                placement=\"top\"\n                container=\"body\"\n                (click)=\"centerToAsset()\"\n              >\n                <i c8yIcon=\"location\" class=\"icon-14\"></i>\n              </button>\n            </div>\n          </div>\n          <div class=\"help-block\">\n            {{ 'Drag the map below to the desired position' | translate }}\n          </div>\n        </c8y-form-group>\n      </div>\n    </div>\n\n    <div class=\"row tight-grid p-t-8 d-flex a-i-center\">\n      <div class=\"col-xs-4\">\n        <c8y-form-group class=\"m-b-0 form-group-sm\">\n          <div class=\"c8y-select-wrapper\">\n            <select\n              id=\"selectExample\"\n              class=\"form-control\"\n              [(ngModel)]=\"refreshOptions\"\n              name=\"refreshSelection\"\n              title=\"{{ 'Refresh options' | translate }}\"\n              (change)=\"updateRefreshOptions()\"\n            >\n              <option value=\"none\" [title]=\"'Only refreshing on interaction' | translate\" translate>\n                No automatic refresh\n              </option>\n              <option\n                value=\"interval\"\n                *ngIf=\"!isPositionedDevice\"\n                [title]=\"'Refreshing after a give interval and on interaction' | translate\"\n                translate\n              >\n                Use refresh interval\n              </option>\n              <option\n                value=\"realtime\"\n                *ngIf=\"isPositionedDevice\"\n                [title]=\"'Live updating on each position change' | translate\"\n                translate\n              >\n                Realtime\n              </option>\n            </select>\n          </div>\n        </c8y-form-group>\n      </div>\n      <div class=\"col-xs-8\">\n        <div class=\"form-group form-group-sm m-b-0\">\n          <c8y-range\n            #intervalRange\n            [(ngModel)]=\"formConfig.refreshInterval\"\n            name=\"refreshInterval\"\n            class=\"label-bottom\"\n            *ngIf=\"refreshOptions === 'interval'\"\n          >\n            <ng-template #c8yRangeValue>\n              <div>\n                <span\n                  translate\n                  [translateParams]=\"{ interval: intervalRange.value * 0.001 }\"\n                  ngNonBindable\n                >\n                  {{ interval }}s\n                </span>\n              </div>\n            </ng-template>\n            <input type=\"range\" min=\"5000\" max=\"100000\" step=\"1000\" />\n          </c8y-range>\n        </div>\n        <label class=\"c8y-switch c8y-switch--inline\" *ngIf=\"refreshOptions === 'realtime'\">\n          <input type=\"checkbox\" [(ngModel)]=\"formConfig.follow\" name=\"follow\" />\n          <span></span>\n          <span class=\"text-12\" translate>Follow selected</span>\n        </label>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div class=\"p-t-16 p-b-16\" style=\"width: 100%; height: 240px\">\n  <c8y-map\n    [assets]=\"assets\"\n    (onMove)=\"onPreviewMapMove($event)\"\n    (onZoomStart)=\"onPreviewZoomStart()\"\n    (onZoomEnd)=\"onPreviewZoomEnd($event)\"\n    [config]=\"config.mapConfig\"\n  ></c8y-map>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.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: i6.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i6.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i6.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$1.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2$1.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i2$1.MinValidationDirective, selector: "[min]", inputs: ["min"] }, { kind: "directive", type: i2$1.MaxValidationDirective, selector: "[max]", inputs: ["max"] }, { kind: "component", type: i2$1.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: i2$1.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: i2$1.RangeDirective, selector: "input[type=\"range\"]" }, { kind: "component", type: i2$1.RangeComponent, selector: "c8y-range" }, { kind: "component", type: i1$1.MapComponent, selector: "c8y-map", inputs: ["config", "assets"], outputs: ["onMove", "onMoveEnd", "onZoomStart", "onZoomEnd"] }, { kind: "directive", type: i7.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "pipe", type: i2$1.C8yTranslatePipe, name: "translate" }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] });
+MapWidgetConfigComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: MapWidgetConfigComponent, selector: "c8y-map-widget-config", inputs: { config: "config" }, viewQueries: [{ propertyName: "previewMap", first: true, predicate: MapComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"row p-t-16\">\n  <div class=\"col-xs-2\">\n    <c8y-form-group class=\"m-b-0 text-center form-group-sm\">\n      <label translate>Marker icon</label>\n      <div class=\"icon-32 text-muted text-center p-b-8\" *ngIf=\"formConfig.icon\">\n        <i [c8yIcon]=\"formConfig.icon\"></i>\n      </div>\n      <div class=\"icon-32 text-muted text-center\" *ngIf=\"!formConfig.icon\">\n        <span class=\"d-block text-12 p-b-16 p-t-16\">\n          <em>{{ 'Auto' | translate }}</em>\n        </span>\n      </div>\n      <button\n        type=\"button\"\n        title=\"{{ 'Select icon to override default behavior' | translate }}\"\n        class=\"btn btn-default btn-xs btn-block\"\n        *ngIf=\"!formConfig.icon\"\n        (click)=\"openIconSelector()\"\n      >\n        {{ 'Select' | translate }}\n      </button>\n      <button\n        type=\"button\"\n        title=\"{{ 'Change icon' | translate }}\"\n        class=\"btn btn-default btn-xs btn-block\"\n        *ngIf=\"formConfig.icon\"\n        (click)=\"openIconSelector()\"\n      >\n        {{ 'Change' | translate }}\n      </button>\n      <button\n        type=\"button\"\n        title=\"{{ 'Remove icon and use default behavior' | translate }}\"\n        class=\"btn btn-danger btn-xs btn-block\"\n        *ngIf=\"formConfig.icon\"\n        (click)=\"removeIcon()\"\n      >\n        {{ 'Remove' | translate }}\n      </button>\n    </c8y-form-group>\n  </div>\n  <div class=\"col-xs-10\">\n    <div class=\"row tight-grid separator-bottom\">\n      <div class=\"col-xs-4\">\n        <div class=\"form-group form-group-sm\">\n          <label translate>Zoom level</label>\n          <c8y-range\n            #range\n            [(ngModel)]=\"formConfig.zoomLevel\"\n            name=\"zoomLevel\"\n            class=\"label-bottom\"\n            (change)=\"zoomLevelChanged()\"\n          >\n            <input type=\"range\" min=\"2\" max=\"18\" step=\"1\" />\n          </c8y-range>\n        </div>\n      </div>\n      <div class=\"col-xs-8\">\n        <c8y-form-group class=\"form-group-sm m-b-8\">\n          <label translate>Center bound</label>\n          <div class=\"input-group input-group-sm\">\n            <input\n              class=\"form-control\"\n              type=\"number\"\n              required\n              placeholder=\"lat\"\n              [(ngModel)]=\"formConfig.center[0]\"\n              (change)=\"changeCenter()\"\n              name=\"centerLat\"\n            />\n            <input\n              class=\"form-control\"\n              type=\"number\"\n              required\n              placeholder=\"lng\"\n              [(ngModel)]=\"formConfig.center[1]\"\n              (change)=\"changeCenter()\"\n              name=\"centerLng\"\n            />\n            <div class=\"input-group-btn\">\n              <button\n                class=\"btn btn-default\"\n                (click)=\"useOwnPosition()\"\n                [attr.aria-label]=\"'Use your location' | translate\"\n                [tooltip]=\"'Use your location' | translate\"\n                container=\"body\"\n                placement=\"top\"\n              >\n                <i c8yIcon=\"location-arrow\" class=\"icon-14\"></i>\n              </button>\n            </div>\n            <div class=\"input-group-btn\" *ngIf=\"canAutoCenter\">\n              <button\n                class=\"btn btn-default\"\n                [attr.aria-label]=\"'Use selected asset location' | translate\"\n                [tooltip]=\"'Use selected asset location' | translate\"\n                placement=\"top\"\n                container=\"body\"\n                (click)=\"centerToAsset()\"\n              >\n                <i c8yIcon=\"location\" class=\"icon-14\"></i>\n              </button>\n            </div>\n          </div>\n          <div class=\"help-block\">\n            {{ 'Drag the map to the desired position' | translate }}\n          </div>\n        </c8y-form-group>\n      </div>\n    </div>\n\n    <div class=\"row tight-grid p-t-8 d-flex a-i-center\">\n      <div class=\"col-xs-4\">\n        <c8y-form-group class=\"m-b-0 form-group-sm\">\n          <div class=\"c8y-select-wrapper\">\n            <select\n              id=\"selectExample\"\n              class=\"form-control\"\n              [(ngModel)]=\"refreshOptions\"\n              name=\"refreshSelection\"\n              title=\"{{ 'Refresh options' | translate }}\"\n              (change)=\"updateRefreshOptions()\"\n            >\n              <option value=\"none\" [title]=\"'Only refreshing on interaction' | translate\" translate>\n                No automatic refresh\n              </option>\n              <option\n                value=\"interval\"\n                *ngIf=\"!isPositionedDevice\"\n                [title]=\"'Refreshing after a give interval and on interaction' | translate\"\n                translate\n              >\n                Use refresh interval\n              </option>\n              <option\n                value=\"realtime\"\n                *ngIf=\"isPositionedDevice\"\n                [title]=\"'Live updating on each position change' | translate\"\n                translate\n              >\n                Realtime\n              </option>\n            </select>\n          </div>\n        </c8y-form-group>\n      </div>\n      <div class=\"col-xs-8\">\n        <div class=\"form-group form-group-sm m-b-0\">\n          <c8y-range\n            #intervalRange\n            [(ngModel)]=\"formConfig.refreshInterval\"\n            name=\"refreshInterval\"\n            class=\"label-bottom\"\n            *ngIf=\"refreshOptions === 'interval'\"\n          >\n            <ng-template #c8yRangeValue>\n              <div>\n                <span\n                  translate\n                  [translateParams]=\"{ interval: intervalRange.value * 0.001 }\"\n                  ngNonBindable\n                >\n                  {{ interval }}s\n                </span>\n              </div>\n            </ng-template>\n            <input type=\"range\" min=\"5000\" max=\"100000\" step=\"1000\" />\n          </c8y-range>\n        </div>\n        <label class=\"c8y-switch c8y-switch--inline\" *ngIf=\"refreshOptions === 'realtime'\">\n          <input type=\"checkbox\" [(ngModel)]=\"formConfig.follow\" name=\"follow\" />\n          <span></span>\n          <span class=\"text-12\" translate>Follow selected</span>\n        </label>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div class=\"p-t-16 p-b-16\" style=\"width: 100%; height: 240px\">\n  <c8y-map\n    [assets]=\"assets\"\n    (onMove)=\"onPreviewMapMove($event)\"\n    (onZoomStart)=\"onPreviewZoomStart()\"\n    (onZoomEnd)=\"onPreviewZoomEnd($event)\"\n    [config]=\"config.mapConfig\"\n  ></c8y-map>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.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: i6.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i6.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i6.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$1.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2$1.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i2$1.MinValidationDirective, selector: "[min]", inputs: ["min"] }, { kind: "directive", type: i2$1.MaxValidationDirective, selector: "[max]", inputs: ["max"] }, { kind: "component", type: i2$1.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: i2$1.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: i2$1.RangeDirective, selector: "input[type=\"range\"]" }, { kind: "component", type: i2$1.RangeComponent, selector: "c8y-range" }, { kind: "component", type: i1$1.MapComponent, selector: "c8y-map", inputs: ["config", "assets"], outputs: ["onMove", "onMoveEnd", "onZoomStart", "onZoomEnd"] }, { kind: "directive", type: i7.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "pipe", type: i2$1.C8yTranslatePipe, name: "translate" }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: MapWidgetConfigComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-map-widget-config', viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], template: "<div class=\"row p-t-16\">\n  <div class=\"col-xs-2\">\n    <c8y-form-group class=\"m-b-0 text-center form-group-sm\">\n      <label translate>Marker icon</label>\n      <div class=\"icon-32 text-muted text-center p-b-8\" *ngIf=\"formConfig.icon\">\n        <i [c8yIcon]=\"formConfig.icon\"></i>\n      </div>\n      <div class=\"icon-32 text-muted text-center\" *ngIf=\"!formConfig.icon\">\n        <span class=\"d-block text-12 p-b-16 p-t-16\">\n          <em>{{ 'Auto' | translate }}</em>\n        </span>\n      </div>\n      <button\n        type=\"button\"\n        title=\"{{ 'Select icon to override default behavior' | translate }}\"\n        class=\"btn btn-default btn-xs btn-block\"\n        *ngIf=\"!formConfig.icon\"\n        (click)=\"openIconSelector()\"\n      >\n        {{ 'Select' | translate }}\n      </button>\n      <button\n        type=\"button\"\n        title=\"{{ 'Change icon' | translate }}\"\n        class=\"btn btn-default btn-xs btn-block\"\n        *ngIf=\"formConfig.icon\"\n        (click)=\"openIconSelector()\"\n      >\n        {{ 'Change' | translate }}\n      </button>\n      <button\n        type=\"button\"\n        title=\"{{ 'Remove icon and use default behavior' | translate }}\"\n        class=\"btn btn-danger btn-xs btn-block\"\n        *ngIf=\"formConfig.icon\"\n        (click)=\"removeIcon()\"\n      >\n        {{ 'Remove' | translate }}\n      </button>\n    </c8y-form-group>\n  </div>\n  <div class=\"col-xs-10\">\n    <div class=\"row tight-grid separator-bottom\">\n      <div class=\"col-xs-4\">\n        <div class=\"form-group form-group-sm\">\n          <label translate>Zoom level</label>\n          <c8y-range\n            #range\n            [(ngModel)]=\"formConfig.zoomLevel\"\n            name=\"zoomLevel\"\n            class=\"label-bottom\"\n            (change)=\"zoomLevelChanged()\"\n          >\n            <input type=\"range\" min=\"2\" max=\"18\" step=\"1\" />\n          </c8y-range>\n        </div>\n      </div>\n      <div class=\"col-xs-8\">\n        <c8y-form-group class=\"form-group-sm m-b-8\">\n          <label translate>Center bound</label>\n          <div class=\"input-group input-group-sm\">\n            <input\n              class=\"form-control\"\n              type=\"number\"\n              required\n              placeholder=\"lat\"\n              [(ngModel)]=\"formConfig.center[0]\"\n              (change)=\"changeCenter()\"\n              name=\"centerLat\"\n            />\n            <input\n              class=\"form-control\"\n              type=\"number\"\n              required\n              placeholder=\"lng\"\n              [(ngModel)]=\"formConfig.center[1]\"\n              (change)=\"changeCenter()\"\n              name=\"centerLng\"\n            />\n            <div class=\"input-group-btn\">\n              <button\n                class=\"btn btn-default\"\n                (click)=\"useOwnPosition()\"\n                [attr.aria-label]=\"'Use your location' | translate\"\n                [tooltip]=\"'Use your location' | translate\"\n                container=\"body\"\n                placement=\"top\"\n              >\n                <i c8yIcon=\"location-arrow\" class=\"icon-14\"></i>\n              </button>\n            </div>\n            <div class=\"input-group-btn\" *ngIf=\"canAutoCenter\">\n              <button\n                class=\"btn btn-default\"\n                [attr.aria-label]=\"'Use selected asset location' | translate\"\n                [tooltip]=\"'Use selected asset location' | translate\"\n                placement=\"top\"\n                container=\"body\"\n                (click)=\"centerToAsset()\"\n              >\n                <i c8yIcon=\"location\" class=\"icon-14\"></i>\n              </button>\n            </div>\n          </div>\n          <div class=\"help-block\">\n            {{ 'Drag the map below to the desired position' | translate }}\n          </div>\n        </c8y-form-group>\n      </div>\n    </div>\n\n    <div class=\"row tight-grid p-t-8 d-flex a-i-center\">\n      <div class=\"col-xs-4\">\n        <c8y-form-group class=\"m-b-0 form-group-sm\">\n          <div class=\"c8y-select-wrapper\">\n            <select\n              id=\"selectExample\"\n              class=\"form-control\"\n              [(ngModel)]=\"refreshOptions\"\n              name=\"refreshSelection\"\n              title=\"{{ 'Refresh options' | translate }}\"\n              (change)=\"updateRefreshOptions()\"\n            >\n              <option value=\"none\" [title]=\"'Only refreshing on interaction' | translate\" translate>\n                No automatic refresh\n              </option>\n              <option\n                value=\"interval\"\n                *ngIf=\"!isPositionedDevice\"\n                [title]=\"'Refreshing after a give interval and on interaction' | translate\"\n                translate\n              >\n                Use refresh interval\n              </option>\n              <option\n                value=\"realtime\"\n                *ngIf=\"isPositionedDevice\"\n                [title]=\"'Live updating on each position change' | translate\"\n                translate\n              >\n                Realtime\n              </option>\n            </select>\n          </div>\n        </c8y-form-group>\n      </div>\n      <div class=\"col-xs-8\">\n        <div class=\"form-group form-group-sm m-b-0\">\n          <c8y-range\n            #intervalRange\n            [(ngModel)]=\"formConfig.refreshInterval\"\n            name=\"refreshInterval\"\n            class=\"label-bottom\"\n            *ngIf=\"refreshOptions === 'interval'\"\n          >\n            <ng-template #c8yRangeValue>\n              <div>\n                <span\n                  translate\n                  [translateParams]=\"{ interval: intervalRange.value * 0.001 }\"\n                  ngNonBindable\n                >\n                  {{ interval }}s\n                </span>\n              </div>\n            </ng-template>\n            <input type=\"range\" min=\"5000\" max=\"100000\" step=\"1000\" />\n          </c8y-range>\n        </div>\n        <label class=\"c8y-switch c8y-switch--inline\" *ngIf=\"refreshOptions === 'realtime'\">\n          <input type=\"checkbox\" [(ngModel)]=\"formConfig.follow\" name=\"follow\" />\n          <span></span>\n          <span class=\"text-12\" translate>Follow selected</span>\n        </label>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div class=\"p-t-16 p-b-16\" style=\"width: 100%; height: 240px\">\n  <c8y-map\n    [assets]=\"assets\"\n    (onMove)=\"onPreviewMapMove($event)\"\n    (onZoomStart)=\"onPreviewZoomStart()\"\n    (onZoomEnd)=\"onPreviewZoomEnd($event)\"\n    [config]=\"config.mapConfig\"\n  ></c8y-map>\n</div>\n" }]
+            args: [{ selector: 'c8y-map-widget-config', viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], template: "<div class=\"row p-t-16\">\n  <div class=\"col-xs-2\">\n    <c8y-form-group class=\"m-b-0 text-center form-group-sm\">\n      <label translate>Marker icon</label>\n      <div class=\"icon-32 text-muted text-center p-b-8\" *ngIf=\"formConfig.icon\">\n        <i [c8yIcon]=\"formConfig.icon\"></i>\n      </div>\n      <div class=\"icon-32 text-muted text-center\" *ngIf=\"!formConfig.icon\">\n        <span class=\"d-block text-12 p-b-16 p-t-16\">\n          <em>{{ 'Auto' | translate }}</em>\n        </span>\n      </div>\n      <button\n        type=\"button\"\n        title=\"{{ 'Select icon to override default behavior' | translate }}\"\n        class=\"btn btn-default btn-xs btn-block\"\n        *ngIf=\"!formConfig.icon\"\n        (click)=\"openIconSelector()\"\n      >\n        {{ 'Select' | translate }}\n      </button>\n      <button\n        type=\"button\"\n        title=\"{{ 'Change icon' | translate }}\"\n        class=\"btn btn-default btn-xs btn-block\"\n        *ngIf=\"formConfig.icon\"\n        (click)=\"openIconSelector()\"\n      >\n        {{ 'Change' | translate }}\n      </button>\n      <button\n        type=\"button\"\n        title=\"{{ 'Remove icon and use default behavior' | translate }}\"\n        class=\"btn btn-danger btn-xs btn-block\"\n        *ngIf=\"formConfig.icon\"\n        (click)=\"removeIcon()\"\n      >\n        {{ 'Remove' | translate }}\n      </button>\n    </c8y-form-group>\n  </div>\n  <div class=\"col-xs-10\">\n    <div class=\"row tight-grid separator-bottom\">\n      <div class=\"col-xs-4\">\n        <div class=\"form-group form-group-sm\">\n          <label translate>Zoom level</label>\n          <c8y-range\n            #range\n            [(ngModel)]=\"formConfig.zoomLevel\"\n            name=\"zoomLevel\"\n            class=\"label-bottom\"\n            (change)=\"zoomLevelChanged()\"\n          >\n            <input type=\"range\" min=\"2\" max=\"18\" step=\"1\" />\n          </c8y-range>\n        </div>\n      </div>\n      <div class=\"col-xs-8\">\n        <c8y-form-group class=\"form-group-sm m-b-8\">\n          <label translate>Center bound</label>\n          <div class=\"input-group input-group-sm\">\n            <input\n              class=\"form-control\"\n              type=\"number\"\n              required\n              placeholder=\"lat\"\n              [(ngModel)]=\"formConfig.center[0]\"\n              (change)=\"changeCenter()\"\n              name=\"centerLat\"\n            />\n            <input\n              class=\"form-control\"\n              type=\"number\"\n              required\n              placeholder=\"lng\"\n              [(ngModel)]=\"formConfig.center[1]\"\n              (change)=\"changeCenter()\"\n              name=\"centerLng\"\n            />\n            <div class=\"input-group-btn\">\n              <button\n                class=\"btn btn-default\"\n                (click)=\"useOwnPosition()\"\n                [attr.aria-label]=\"'Use your location' | translate\"\n                [tooltip]=\"'Use your location' | translate\"\n                container=\"body\"\n                placement=\"top\"\n              >\n                <i c8yIcon=\"location-arrow\" class=\"icon-14\"></i>\n              </button>\n            </div>\n            <div class=\"input-group-btn\" *ngIf=\"canAutoCenter\">\n              <button\n                class=\"btn btn-default\"\n                [attr.aria-label]=\"'Use selected asset location' | translate\"\n                [tooltip]=\"'Use selected asset location' | translate\"\n                placement=\"top\"\n                container=\"body\"\n                (click)=\"centerToAsset()\"\n              >\n                <i c8yIcon=\"location\" class=\"icon-14\"></i>\n              </button>\n            </div>\n          </div>\n          <div class=\"help-block\">\n            {{ 'Drag the map to the desired position' | translate }}\n          </div>\n        </c8y-form-group>\n      </div>\n    </div>\n\n    <div class=\"row tight-grid p-t-8 d-flex a-i-center\">\n      <div class=\"col-xs-4\">\n        <c8y-form-group class=\"m-b-0 form-group-sm\">\n          <div class=\"c8y-select-wrapper\">\n            <select\n              id=\"selectExample\"\n              class=\"form-control\"\n              [(ngModel)]=\"refreshOptions\"\n              name=\"refreshSelection\"\n              title=\"{{ 'Refresh options' | translate }}\"\n              (change)=\"updateRefreshOptions()\"\n            >\n              <option value=\"none\" [title]=\"'Only refreshing on interaction' | translate\" translate>\n                No automatic refresh\n              </option>\n              <option\n                value=\"interval\"\n                *ngIf=\"!isPositionedDevice\"\n                [title]=\"'Refreshing after a give interval and on interaction' | translate\"\n                translate\n              >\n                Use refresh interval\n              </option>\n              <option\n                value=\"realtime\"\n                *ngIf=\"isPositionedDevice\"\n                [title]=\"'Live updating on each position change' | translate\"\n                translate\n              >\n                Realtime\n              </option>\n            </select>\n          </div>\n        </c8y-form-group>\n      </div>\n      <div class=\"col-xs-8\">\n        <div class=\"form-group form-group-sm m-b-0\">\n          <c8y-range\n            #intervalRange\n            [(ngModel)]=\"formConfig.refreshInterval\"\n            name=\"refreshInterval\"\n            class=\"label-bottom\"\n            *ngIf=\"refreshOptions === 'interval'\"\n          >\n            <ng-template #c8yRangeValue>\n              <div>\n                <span\n                  translate\n                  [translateParams]=\"{ interval: intervalRange.value * 0.001 }\"\n                  ngNonBindable\n                >\n                  {{ interval }}s\n                </span>\n              </div>\n            </ng-template>\n            <input type=\"range\" min=\"5000\" max=\"100000\" step=\"1000\" />\n          </c8y-range>\n        </div>\n        <label class=\"c8y-switch c8y-switch--inline\" *ngIf=\"refreshOptions === 'realtime'\">\n          <input type=\"checkbox\" [(ngModel)]=\"formConfig.follow\" name=\"follow\" />\n          <span></span>\n          <span class=\"text-12\" translate>Follow selected</span>\n        </label>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div class=\"p-t-16 p-b-16\" style=\"width: 100%; height: 240px\">\n  <c8y-map\n    [assets]=\"assets\"\n    (onMove)=\"onPreviewMapMove($event)\"\n    (onZoomStart)=\"onPreviewZoomStart()\"\n    (onZoomEnd)=\"onPreviewZoomEnd($event)\"\n    [config]=\"config.mapConfig\"\n  ></c8y-map>\n</div>\n" }]
         }], ctorParameters: function () {
         return [{ type: i1$1.MapService }, { type: i2$1.AlertService }, { type: i3.TranslateService }, { type: undefined, decorators: [{
                         type: Optional

package/fesm2015/c8y-ngx-components-widgets-implementations-map.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"c8y-ngx-components-widgets-implementations-map.mjs","sources":["../../widgets/implementations/map/map-event-info.component.ts","../../widgets/implementations/map/map-event-info.component.html","../../widgets/implementations/map/map-widget-config.component.ts","../../widgets/implementations/map/map-widget-config.component.html","../../widgets/implementations/map/map-widget.component.ts","../../widgets/implementations/map/map-widget.component.html","../../widgets/implementations/map/map-widget.module.ts","../../widgets/implementations/map/c8y-ngx-components-widgets-implementations-map.ts"],"sourcesContent":["import { Component, Input, OnChanges } from '@angular/core';\nimport { EventService, IEvent, IManagedObject } from '@c8y/client';\n\n@Component({\n selector: 'c8y-map-event-info',\n templateUrl: './map-event-info.component.html'\n})\nexport class MapEventInfoComponent implements OnChanges {\n @Input()\n asset: IManagedObject;\n\n loading = true;\n\n event: IEvent;\n\n constructor(private eventService: EventService) {}\n\n async ngOnChanges() {\n this.loading = true;\n const { data } = await this.eventService.list({\n dateFrom: '1970-01-01',\n dateTo: new Date(Date.now()).toISOString(),\n fragmentType: 'c8y_Position',\n pageSize: 1,\n source: this.asset.id\n });\n this.event = data[0];\n this.loading = false;\n }\n}\n","<div class=\"text-muted text-10 p-t-4 p-b-4\">\n <span translate>Last position update:</span>\n <br />\n <c8y-loading ngIf=\"loading\"></c8y-loading>\n <ng-container ngIf=\"!loading\">\n <i ngIf=\"!event\" translate>No information found</i>\n <ng-container ngIf=\"event\">\n <i>{{ event.time \| c8yDate }}</i>\n <ng-content></ng-content>\n </ng-container>\n </ng-container>\n</div>\n","import {\n AfterViewInit,\n Component,\n Inject,\n Input,\n OnChanges,\n OnInit,\n Optional,\n SimpleChanges,\n ViewChild\n} from '@angular/core';\nimport { ControlContainer, NgForm } from '@angular/forms';\nimport { AlertService, gettext } from '@c8y/ngx-components';\nimport { IconSelectorService } from '@c8y/ngx-components/icon-selector';\nimport {\n ClusterMapConfig,\n defaultMapConfig,\n MapComponent,\n MapDefaultConfig,\n MapService,\n MAP_DEFAULT_CONFIG,\n PositionManagedObject\n} from '@c8y/ngx-components/map';\nimport { TranslateService } from '@ngx-translate/core';\nimport type L from 'leaflet';\nimport { MapWidgetConfig, RefreshOptions } from './map-widget.model';\n\n@Component({\n selector: 'c8y-map-widget-config',\n templateUrl: './map-widget-config.component.html',\n viewProviders: [{ provide: ControlContainer, useExisting: NgForm }]\n})\nexport class MapWidgetConfigComponent implements OnInit, AfterViewInit, OnChanges {\n @Input() config: MapWidgetConfig = {\n mapConfig: undefined\n };\n\n formConfig: ClusterMapConfig;\n\n canAutoCenter = true;\n isPositionedDevice = false;\n assets: PositionManagedObject[];\n refreshOptions: RefreshOptions = 'none';\n\n private leaflet: typeof L;\n private centerIcon: L.Marker;\n\n @ViewChild(MapComponent)\n private previewMap: MapComponent;\n\n constructor(\n private mapService: MapService,\n private alertService: AlertService,\n private translateService: TranslateService,\n @Optional() @Inject(MAP_DEFAULT_CONFIG) private defaultConfig: MapDefaultConfig,\n private iconSelector: IconSelectorService\n ) {\n if (!this.defaultConfig) {\n this.defaultConfig = defaultMapConfig;\n }\n this.formConfig = {\n zoomLevel: this.defaultConfig.zoomLevel,\n center: this.defaultConfig.center\n };\n }\n\n async ngOnInit() {\n if (!this.config.mapConfig) {\n this.config.mapConfig = this.formConfig;\n }\n this.formConfig = {\n ...this.formConfig,\n ...this.config.mapConfig,\n disablePan: false\n };\n await this.updateAsset();\n }\n\n async ngOnChanges(changes: SimpleChanges) {\n if (\n changes.config.currentValue !== changes.config.previousValue &&\n !changes.config.firstChange\n ) {\n await this.updateAsset();\n }\n }\n\n async ngAfterViewInit() {\n this.leaflet = await this.mapService.getLeaflet();\n this.addCenterIcon(this.formConfig.center[0], this.formConfig.center[1]);\n }\n\n onBeforeSave() {\n this.config.mapConfig = this.formConfig;\n return true;\n }\n\n zoomLevelChanged() {\n this.config.mapConfig = {\n ...this.config.mapConfig,\n zoomLevel: this.formConfig.zoomLevel\n };\n }\n\n changeCenter() {\n this.config.mapConfig = { ...this.formConfig, center: this.formConfig.center };\n }\n\n onPreviewZoomStart() {\n this.centerIcon.remove();\n }\n\n onPreviewZoomEnd(event: L.LeafletEvent) {\n this.formConfig.zoomLevel = Math.floor(event.target.getZoom());\n }\n\n onPreviewMapMove(event: L.LeafletEvent) {\n if (this.centerIcon) {\n this.centerIcon.remove();\n }\n const { lat, lng } = event.target.getBounds().getCenter();\n this.addCenterIcon(lat, lng);\n this.formConfig.center = [lat, lng];\n }\n\n useOwnPosition() {\n navigator.geolocation.getCurrentPosition(({ coords }) => {\n this.formConfig.center = [coords.latitude, coords.longitude];\n this.changeCenter();\n });\n }\n\n centerToAsset() {\n this.formConfig.center = [\n this.config.device.c8y_Position.lat,\n this.config.device.c8y_Position.lng\n ];\n this.changeCenter();\n }\n\n updateRefreshOptions() {\n this.formConfig.realtime = this.refreshOptions === 'realtime';\n this.formConfig.refreshInterval = this.refreshOptions === 'interval' ? 5000 : null;\n if (!this.formConfig.realtime) {\n this.formConfig.follow = false;\n }\n }\n\n async openIconSelector() {\n try {\n const icon = await this.iconSelector.selectIcon({\n currentSelection: this.formConfig.icon\n });\n this.formConfig.icon = icon;\n this.config.mapConfig = { ...this.config.mapConfig, icon };\n } catch {\n // nothing to do\n }\n }\n\n removeIcon() {\n this.formConfig.icon = undefined;\n this.config.mapConfig.icon = undefined;\n this.previewMap.refreshMarkers();\n }\n\n private async updateAsset() {\n this.canAutoCenter = this.mapService.hasPosition(this.config.device);\n this.isPositionedDevice = this.mapService.isPositionedDevice(this.config.device);\n this.refreshOptions = this.getRefreshOptions();\n this.updateRefreshOptions();\n\n const { data, paging } = await this.mapService.getAllPositionsMOs(this.config.device);\n this.assets = data;\n if (paging.totalPages > 1) {\n this.alertService.danger(\n gettext(\n 'It might be possible that assets are not shown in the preview, as the current selection has more than 500 assets and the preview only supports a maximum of 500 assets.'\n )\n );\n }\n }\n\n private getRefreshOptions(): RefreshOptions {\n let option: RefreshOptions = 'none';\n if (this.formConfig.realtime) {\n option = 'realtime';\n } else if (this.formConfig.refreshInterval) {\n option = 'interval';\n }\n const isNotAllowedOption =\n (!this.isPositionedDevice && option === 'realtime') \|\|\n (this.isPositionedDevice && option === 'interval');\n option = isNotAllowedOption ? 'none' : option;\n return option;\n }\n\n private addCenterIcon(lat: number, lng: number) {\n const titleText = this.translateService.instant(gettext('Map center'));\n const icon = this.leaflet.divIcon({\n html: `<i style=\"pointer-events: none\" class=\"c8y-map-marker-icon text-muted dlt-c8y-icon-target icon-2x\" title=\"${titleText}\" />`\n });\n this.centerIcon = this.leaflet.marker([lat, lng], {\n icon\n });\n this.previewMap.addMarkerToMap(this.centerIcon);\n }\n}\n","<div class=\"row p-t-16\">\n <div class=\"col-xs-2\">\n <c8y-form-group class=\"m-b-0 text-center form-group-sm\">\n <label translate>Marker icon</label>\n <div class=\"icon-32 text-muted text-center p-b-8\" ngIf=\"formConfig.icon\">\n <i [c8yIcon]=\"formConfig.icon\"></i>\n </div>\n <div class=\"icon-32 text-muted text-center\" ngIf=\"!formConfig.icon\">\n <span class=\"d-block text-12 p-b-16 p-t-16\">\n <em>{{ 'Auto' \| translate }}</em>\n </span>\n </div>\n <button\n type=\"button\"\n title=\"{{ 'Select icon to override default behavior' \| translate }}\"\n class=\"btn btn-default btn-xs btn-block\"\n ngIf=\"!formConfig.icon\"\n (click)=\"openIconSelector()\"\n >\n {{ 'Select' \| translate }}\n </button>\n <button\n type=\"button\"\n title=\"{{ 'Change icon' \| translate }}\"\n class=\"btn btn-default btn-xs btn-block\"\n ngIf=\"formConfig.icon\"\n (click)=\"openIconSelector()\"\n >\n {{ 'Change' \| translate }}\n </button>\n <button\n type=\"button\"\n title=\"{{ 'Remove icon and use default behavior' \| translate }}\"\n class=\"btn btn-danger btn-xs btn-block\"\n ngIf=\"formConfig.icon\"\n (click)=\"removeIcon()\"\n >\n {{ 'Remove' \| translate }}\n </button>\n </c8y-form-group>\n </div>\n <div class=\"col-xs-10\">\n <div class=\"row tight-grid separator-bottom\">\n <div class=\"col-xs-4\">\n <div class=\"form-group form-group-sm\">\n <label translate>Zoom level</label>\n <c8y-range\n #range\n [(ngModel)]=\"formConfig.zoomLevel\"\n name=\"zoomLevel\"\n class=\"label-bottom\"\n (change)=\"zoomLevelChanged()\"\n >\n <input type=\"range\" min=\"2\" max=\"18\" step=\"1\" />\n </c8y-range>\n </div>\n </div>\n <div class=\"col-xs-8\">\n <c8y-form-group class=\"form-group-sm m-b-8\">\n <label translate>Center bound</label>\n <div class=\"input-group input-group-sm\">\n <input\n class=\"form-control\"\n type=\"number\"\n required\n placeholder=\"lat\"\n [(ngModel)]=\"formConfig.center[0]\"\n (change)=\"changeCenter()\"\n name=\"centerLat\"\n />\n <input\n class=\"form-control\"\n type=\"number\"\n required\n placeholder=\"lng\"\n [(ngModel)]=\"formConfig.center[1]\"\n (change)=\"changeCenter()\"\n name=\"centerLng\"\n />\n <div class=\"input-group-btn\">\n <button\n class=\"btn btn-default\"\n (click)=\"useOwnPosition()\"\n [attr.aria-label]=\"'Use your location' \| translate\"\n [tooltip]=\"'Use your location' \| translate\"\n container=\"body\"\n placement=\"top\"\n >\n <i c8yIcon=\"location-arrow\" class=\"icon-14\"></i>\n </button>\n </div>\n <div class=\"input-group-btn\" ngIf=\"canAutoCenter\">\n <button\n class=\"btn btn-default\"\n [attr.aria-label]=\"'Use selected asset location' \| translate\"\n [tooltip]=\"'Use selected asset location' \| translate\"\n placement=\"top\"\n container=\"body\"\n (click)=\"centerToAsset()\"\n >\n <i c8yIcon=\"location\" class=\"icon-14\"></i>\n </button>\n </div>\n </div>\n <div class=\"help-block\">\n {{ 'Drag the map below to the desired position' \| translate }}\n </div>\n </c8y-form-group>\n </div>\n </div>\n\n <div class=\"row tight-grid p-t-8 d-flex a-i-center\">\n <div class=\"col-xs-4\">\n <c8y-form-group class=\"m-b-0 form-group-sm\">\n <div class=\"c8y-select-wrapper\">\n <select\n id=\"selectExample\"\n class=\"form-control\"\n [(ngModel)]=\"refreshOptions\"\n name=\"refreshSelection\"\n title=\"{{ 'Refresh options' \| translate }}\"\n (change)=\"updateRefreshOptions()\"\n >\n <option value=\"none\" [title]=\"'Only refreshing on interaction' \| translate\" translate>\n No automatic refresh\n </option>\n <option\n value=\"interval\"\n ngIf=\"!isPositionedDevice\"\n [title]=\"'Refreshing after a give interval and on interaction' \| translate\"\n translate\n >\n Use refresh interval\n </option>\n <option\n value=\"realtime\"\n ngIf=\"isPositionedDevice\"\n [title]=\"'Live updating on each position change' \| translate\"\n translate\n >\n Realtime\n </option>\n </select>\n </div>\n </c8y-form-group>\n </div>\n <div class=\"col-xs-8\">\n <div class=\"form-group form-group-sm m-b-0\">\n <c8y-range\n #intervalRange\n [(ngModel)]=\"formConfig.refreshInterval\"\n name=\"refreshInterval\"\n class=\"label-bottom\"\n ngIf=\"refreshOptions === 'interval'\"\n >\n <ng-template #c8yRangeValue>\n <div>\n <span\n translate\n [translateParams]=\"{ interval: intervalRange.value 0.001 }\"\n ngNonBindable\n >\n {{ interval }}s\n </span>\n </div>\n </ng-template>\n <input type=\"range\" min=\"5000\" max=\"100000\" step=\"1000\" />\n </c8y-range>\n </div>\n <label class=\"c8y-switch c8y-switch--inline\" ngIf=\"refreshOptions === 'realtime'\">\n <input type=\"checkbox\" [(ngModel)]=\"formConfig.follow\" name=\"follow\" />\n <span></span>\n <span class=\"text-12\" translate>Follow selected</span>\n </label>\n </div>\n </div>\n </div>\n</div>\n\n<div class=\"p-t-16 p-b-16\" style=\"width: 100%; height: 240px\">\n <c8y-map\n [assets]=\"assets\"\n (onMove)=\"onPreviewMapMove($event)\"\n (onZoomStart)=\"onPreviewZoomStart()\"\n (onZoomEnd)=\"onPreviewZoomEnd($event)\"\n [config]=\"config.mapConfig\"\n ></c8y-map>\n</div>\n","import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';\nimport { IManagedObject } from '@c8y/client';\nimport { ClusterMapComponent, ClusterMapConfig } from '@c8y/ngx-components/map';\nimport { DashboardChildComponent } from '@c8y/ngx-components';\nimport { MapWidgetConfig } from './map-widget.model';\nimport { filter, takeUntil } from 'rxjs/operators';\nimport { Subject } from 'rxjs';\n\n@Component({\n selector: 'c8y-map-widget',\n templateUrl: './map-widget.component.html'\n})\nexport class MapWidgetComponent implements OnInit, OnDestroy {\n mapConfig: ClusterMapConfig = { center: [0, 0] };\n rootNode: IManagedObject;\n config: MapWidgetConfig;\n\n @ViewChild(ClusterMapComponent)\n clusterMap: ClusterMapComponent;\n\n private savedNode: IManagedObject;\n private destroy$ = new Subject();\n\n constructor(dashboardChild: DashboardChildComponent) {\n this.listenToWidgetResizeEvent(dashboardChild);\n }\n\n ngOnInit(): void {\n if (this.config.device) {\n this.rootNode = this.config.device;\n }\n this.mapConfig = { ...this.config.mapConfig };\n this.savedNode = this.rootNode;\n }\n\n startFollow(context) {\n if (context.id !== this.rootNode?.id) {\n this.rootNode = context;\n }\n this.mapConfig = {\n ...this.config.mapConfig,\n follow: true,\n realtime: true\n };\n }\n\n stopFollow() {\n this.mapConfig = {\n ...this.config.mapConfig,\n follow: false\n };\n this.rootNode = this.savedNode;\n }\n\n ngOnDestroy(): void {\n this.destroy$.next();\n }\n\n private listenToWidgetResizeEvent(dashboardChild: DashboardChildComponent) {\n dashboardChild.changeEnd\n .pipe(\n filter(child => child.lastChange === 'resize'),\n takeUntil(this.destroy$)\n )\n .subscribe(() => {\n this.clusterMap.reset();\n });\n }\n}\n","<c8y-map-status\n [clusterMap]=\"mapWidget\"\n [(config)]=\"mapConfig\"\n (onUnfollow)=\"stopFollow()\"\n></c8y-map-status>\n<c8y-cluster-map #mapWidget [rootNode]=\"rootNode\" [config]=\"mapConfig\">\n <div c8yMapPopup=\"let context\" class=\"map-marker\">\n <a class=\"text-truncate deviceLink text-12\" routerLink=\"/device/{{ context.id }}\">\n <strong>{{ context.name }}</strong>\n </a>\n <c8y-map-event-info [asset]=\"context\">\n <button\n type=\"button\"\n class=\"btn btn-default btn-xs btn-block m-t-8\"\n (click)=\"startFollow(context)\"\n [title]=\"'Activate realtime on this asset and follow it if it moves' \| translate\"\n ngIf=\"!mapConfig.follow\"\n translate\n >\n Follow\n </button>\n <button\n type=\"button\"\n class=\"btn btn-default btn-xs btn-block m-t-8\"\n (click)=\"stopFollow()\"\n [title]=\"'Stop following this asset.' \| translate\"\n ngIf=\"mapConfig.follow\"\n translate\n >\n Unfollow\n </button>\n </c8y-map-event-info>\n </div>\n</c8y-cluster-map>\n","import { CommonModule as NgCommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { FormsModule as NgFormsModule } from '@angular/forms';\nimport { RouterModule } from '@angular/router';\nimport { CommonModule, FormsModule } from '@c8y/ngx-components';\nimport { TooltipModule } from 'ngx-bootstrap/tooltip';\nimport { MapModule } from '@c8y/ngx-components/map';\nimport { MapEventInfoComponent } from './map-event-info.component';\nimport { MapWidgetConfigComponent } from './map-widget-config.component';\nimport { MapWidgetComponent } from './map-widget.component';\n\n@NgModule({\n declarations: [MapWidgetComponent, MapWidgetConfigComponent, MapEventInfoComponent],\n imports: [\n NgCommonModule,\n NgFormsModule,\n CommonModule,\n FormsModule,\n MapModule,\n RouterModule,\n TooltipModule.forRoot()\n ],\n exports: [MapWidgetComponent, MapWidgetConfigComponent, MapEventInfoComponent]\n})\nexport class MapWidgetModule {}\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":["i3","i1","i4","i5.MapEventInfoComponent","NgCommonModule","NgFormsModule","CommonModule","FormsModule"],"mappings":"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"}
1	+ {"version":3,"file":"c8y-ngx-components-widgets-implementations-map.mjs","sources":["../../widgets/implementations/map/map-event-info.component.ts","../../widgets/implementations/map/map-event-info.component.html","../../widgets/implementations/map/map-widget-config.component.ts","../../widgets/implementations/map/map-widget-config.component.html","../../widgets/implementations/map/map-widget.component.ts","../../widgets/implementations/map/map-widget.component.html","../../widgets/implementations/map/map-widget.module.ts","../../widgets/implementations/map/c8y-ngx-components-widgets-implementations-map.ts"],"sourcesContent":["import { Component, Input, OnChanges } from '@angular/core';\nimport { EventService, IEvent, IManagedObject } from '@c8y/client';\n\n@Component({\n selector: 'c8y-map-event-info',\n templateUrl: './map-event-info.component.html'\n})\nexport class MapEventInfoComponent implements OnChanges {\n @Input()\n asset: IManagedObject;\n\n loading = true;\n\n event: IEvent;\n\n constructor(private eventService: EventService) {}\n\n async ngOnChanges() {\n this.loading = true;\n const { data } = await this.eventService.list({\n dateFrom: '1970-01-01',\n dateTo: new Date(Date.now()).toISOString(),\n fragmentType: 'c8y_Position',\n pageSize: 1,\n source: this.asset.id\n });\n this.event = data[0];\n this.loading = false;\n }\n}\n","<div class=\"text-muted text-10 p-t-4 p-b-4\">\n <span translate>Last position update:</span>\n <br />\n <c8y-loading ngIf=\"loading\"></c8y-loading>\n <ng-container ngIf=\"!loading\">\n <i ngIf=\"!event\" translate>No information found</i>\n <ng-container ngIf=\"event\">\n <i>{{ event.time \| c8yDate }}</i>\n <ng-content></ng-content>\n </ng-container>\n </ng-container>\n</div>\n","import {\n AfterViewInit,\n Component,\n Inject,\n Input,\n OnChanges,\n OnInit,\n Optional,\n SimpleChanges,\n ViewChild\n} from '@angular/core';\nimport { ControlContainer, NgForm } from '@angular/forms';\nimport { AlertService, gettext } from '@c8y/ngx-components';\nimport { IconSelectorService } from '@c8y/ngx-components/icon-selector';\nimport {\n ClusterMapConfig,\n defaultMapConfig,\n MapComponent,\n MapDefaultConfig,\n MapService,\n MAP_DEFAULT_CONFIG,\n PositionManagedObject\n} from '@c8y/ngx-components/map';\nimport { TranslateService } from '@ngx-translate/core';\nimport type L from 'leaflet';\nimport { MapWidgetConfig, RefreshOptions } from './map-widget.model';\n\n@Component({\n selector: 'c8y-map-widget-config',\n templateUrl: './map-widget-config.component.html',\n viewProviders: [{ provide: ControlContainer, useExisting: NgForm }]\n})\nexport class MapWidgetConfigComponent implements OnInit, AfterViewInit, OnChanges {\n @Input() config: MapWidgetConfig = {\n mapConfig: undefined\n };\n\n formConfig: ClusterMapConfig;\n\n canAutoCenter = true;\n isPositionedDevice = false;\n assets: PositionManagedObject[];\n refreshOptions: RefreshOptions = 'none';\n\n private leaflet: typeof L;\n private centerIcon: L.Marker;\n\n @ViewChild(MapComponent)\n private previewMap: MapComponent;\n\n constructor(\n private mapService: MapService,\n private alertService: AlertService,\n private translateService: TranslateService,\n @Optional() @Inject(MAP_DEFAULT_CONFIG) private defaultConfig: MapDefaultConfig,\n private iconSelector: IconSelectorService\n ) {\n if (!this.defaultConfig) {\n this.defaultConfig = defaultMapConfig;\n }\n this.formConfig = {\n zoomLevel: this.defaultConfig.zoomLevel,\n center: this.defaultConfig.center\n };\n }\n\n async ngOnInit() {\n if (!this.config.mapConfig) {\n this.config.mapConfig = this.formConfig;\n }\n this.formConfig = {\n ...this.formConfig,\n ...this.config.mapConfig,\n disablePan: false\n };\n await this.updateAsset();\n }\n\n async ngOnChanges(changes: SimpleChanges) {\n if (\n changes.config.currentValue !== changes.config.previousValue &&\n !changes.config.firstChange\n ) {\n await this.updateAsset();\n }\n }\n\n async ngAfterViewInit() {\n this.leaflet = await this.mapService.getLeaflet();\n this.addCenterIcon(this.formConfig.center[0], this.formConfig.center[1]);\n }\n\n onBeforeSave() {\n this.config.mapConfig = this.formConfig;\n return true;\n }\n\n zoomLevelChanged() {\n this.config.mapConfig = {\n ...this.config.mapConfig,\n zoomLevel: this.formConfig.zoomLevel\n };\n }\n\n changeCenter() {\n this.config.mapConfig = { ...this.formConfig, center: this.formConfig.center };\n }\n\n onPreviewZoomStart() {\n this.centerIcon.remove();\n }\n\n onPreviewZoomEnd(event: L.LeafletEvent) {\n this.formConfig.zoomLevel = Math.floor(event.target.getZoom());\n }\n\n onPreviewMapMove(event: L.LeafletEvent) {\n if (this.centerIcon) {\n this.centerIcon.remove();\n }\n const { lat, lng } = event.target.getBounds().getCenter();\n this.addCenterIcon(lat, lng);\n this.formConfig.center = [lat, lng];\n }\n\n useOwnPosition() {\n navigator.geolocation.getCurrentPosition(({ coords }) => {\n this.formConfig.center = [coords.latitude, coords.longitude];\n this.changeCenter();\n });\n }\n\n centerToAsset() {\n this.formConfig.center = [\n this.config.device.c8y_Position.lat,\n this.config.device.c8y_Position.lng\n ];\n this.changeCenter();\n }\n\n updateRefreshOptions() {\n this.formConfig.realtime = this.refreshOptions === 'realtime';\n this.formConfig.refreshInterval = this.refreshOptions === 'interval' ? 5000 : null;\n if (!this.formConfig.realtime) {\n this.formConfig.follow = false;\n }\n }\n\n async openIconSelector() {\n try {\n const icon = await this.iconSelector.selectIcon({\n currentSelection: this.formConfig.icon\n });\n this.formConfig.icon = icon;\n this.config.mapConfig = { ...this.config.mapConfig, icon };\n } catch {\n // nothing to do\n }\n }\n\n removeIcon() {\n this.formConfig.icon = undefined;\n this.config.mapConfig.icon = undefined;\n this.previewMap.refreshMarkers();\n }\n\n private async updateAsset() {\n this.canAutoCenter = this.mapService.hasPosition(this.config.device);\n this.isPositionedDevice = this.mapService.isPositionedDevice(this.config.device);\n this.refreshOptions = this.getRefreshOptions();\n this.updateRefreshOptions();\n\n const { data, paging } = await this.mapService.getAllPositionsMOs(this.config.device);\n this.assets = data;\n if (paging.totalPages > 1) {\n this.alertService.danger(\n gettext(\n 'It might be possible that assets are not shown in the preview, as the current selection has more than 500 assets and the preview only supports a maximum of 500 assets.'\n )\n );\n }\n }\n\n private getRefreshOptions(): RefreshOptions {\n let option: RefreshOptions = 'none';\n if (this.formConfig.realtime) {\n option = 'realtime';\n } else if (this.formConfig.refreshInterval) {\n option = 'interval';\n }\n const isNotAllowedOption =\n (!this.isPositionedDevice && option === 'realtime') \|\|\n (this.isPositionedDevice && option === 'interval');\n option = isNotAllowedOption ? 'none' : option;\n return option;\n }\n\n private addCenterIcon(lat: number, lng: number) {\n const titleText = this.translateService.instant(gettext('Map center'));\n const icon = this.leaflet.divIcon({\n html: `<i style=\"pointer-events: none\" class=\"c8y-map-marker-icon text-muted dlt-c8y-icon-target icon-2x\" title=\"${titleText}\" />`\n });\n this.centerIcon = this.leaflet.marker([lat, lng], {\n icon\n });\n this.previewMap.addMarkerToMap(this.centerIcon);\n }\n}\n","<div class=\"row p-t-16\">\n <div class=\"col-xs-2\">\n <c8y-form-group class=\"m-b-0 text-center form-group-sm\">\n <label translate>Marker icon</label>\n <div class=\"icon-32 text-muted text-center p-b-8\" ngIf=\"formConfig.icon\">\n <i [c8yIcon]=\"formConfig.icon\"></i>\n </div>\n <div class=\"icon-32 text-muted text-center\" ngIf=\"!formConfig.icon\">\n <span class=\"d-block text-12 p-b-16 p-t-16\">\n <em>{{ 'Auto' \| translate }}</em>\n </span>\n </div>\n <button\n type=\"button\"\n title=\"{{ 'Select icon to override default behavior' \| translate }}\"\n class=\"btn btn-default btn-xs btn-block\"\n ngIf=\"!formConfig.icon\"\n (click)=\"openIconSelector()\"\n >\n {{ 'Select' \| translate }}\n </button>\n <button\n type=\"button\"\n title=\"{{ 'Change icon' \| translate }}\"\n class=\"btn btn-default btn-xs btn-block\"\n ngIf=\"formConfig.icon\"\n (click)=\"openIconSelector()\"\n >\n {{ 'Change' \| translate }}\n </button>\n <button\n type=\"button\"\n title=\"{{ 'Remove icon and use default behavior' \| translate }}\"\n class=\"btn btn-danger btn-xs btn-block\"\n ngIf=\"formConfig.icon\"\n (click)=\"removeIcon()\"\n >\n {{ 'Remove' \| translate }}\n </button>\n </c8y-form-group>\n </div>\n <div class=\"col-xs-10\">\n <div class=\"row tight-grid separator-bottom\">\n <div class=\"col-xs-4\">\n <div class=\"form-group form-group-sm\">\n <label translate>Zoom level</label>\n <c8y-range\n #range\n [(ngModel)]=\"formConfig.zoomLevel\"\n name=\"zoomLevel\"\n class=\"label-bottom\"\n (change)=\"zoomLevelChanged()\"\n >\n <input type=\"range\" min=\"2\" max=\"18\" step=\"1\" />\n </c8y-range>\n </div>\n </div>\n <div class=\"col-xs-8\">\n <c8y-form-group class=\"form-group-sm m-b-8\">\n <label translate>Center bound</label>\n <div class=\"input-group input-group-sm\">\n <input\n class=\"form-control\"\n type=\"number\"\n required\n placeholder=\"lat\"\n [(ngModel)]=\"formConfig.center[0]\"\n (change)=\"changeCenter()\"\n name=\"centerLat\"\n />\n <input\n class=\"form-control\"\n type=\"number\"\n required\n placeholder=\"lng\"\n [(ngModel)]=\"formConfig.center[1]\"\n (change)=\"changeCenter()\"\n name=\"centerLng\"\n />\n <div class=\"input-group-btn\">\n <button\n class=\"btn btn-default\"\n (click)=\"useOwnPosition()\"\n [attr.aria-label]=\"'Use your location' \| translate\"\n [tooltip]=\"'Use your location' \| translate\"\n container=\"body\"\n placement=\"top\"\n >\n <i c8yIcon=\"location-arrow\" class=\"icon-14\"></i>\n </button>\n </div>\n <div class=\"input-group-btn\" ngIf=\"canAutoCenter\">\n <button\n class=\"btn btn-default\"\n [attr.aria-label]=\"'Use selected asset location' \| translate\"\n [tooltip]=\"'Use selected asset location' \| translate\"\n placement=\"top\"\n container=\"body\"\n (click)=\"centerToAsset()\"\n >\n <i c8yIcon=\"location\" class=\"icon-14\"></i>\n </button>\n </div>\n </div>\n <div class=\"help-block\">\n {{ 'Drag the map to the desired position' \| translate }}\n </div>\n </c8y-form-group>\n </div>\n </div>\n\n <div class=\"row tight-grid p-t-8 d-flex a-i-center\">\n <div class=\"col-xs-4\">\n <c8y-form-group class=\"m-b-0 form-group-sm\">\n <div class=\"c8y-select-wrapper\">\n <select\n id=\"selectExample\"\n class=\"form-control\"\n [(ngModel)]=\"refreshOptions\"\n name=\"refreshSelection\"\n title=\"{{ 'Refresh options' \| translate }}\"\n (change)=\"updateRefreshOptions()\"\n >\n <option value=\"none\" [title]=\"'Only refreshing on interaction' \| translate\" translate>\n No automatic refresh\n </option>\n <option\n value=\"interval\"\n ngIf=\"!isPositionedDevice\"\n [title]=\"'Refreshing after a give interval and on interaction' \| translate\"\n translate\n >\n Use refresh interval\n </option>\n <option\n value=\"realtime\"\n ngIf=\"isPositionedDevice\"\n [title]=\"'Live updating on each position change' \| translate\"\n translate\n >\n Realtime\n </option>\n </select>\n </div>\n </c8y-form-group>\n </div>\n <div class=\"col-xs-8\">\n <div class=\"form-group form-group-sm m-b-0\">\n <c8y-range\n #intervalRange\n [(ngModel)]=\"formConfig.refreshInterval\"\n name=\"refreshInterval\"\n class=\"label-bottom\"\n ngIf=\"refreshOptions === 'interval'\"\n >\n <ng-template #c8yRangeValue>\n <div>\n <span\n translate\n [translateParams]=\"{ interval: intervalRange.value 0.001 }\"\n ngNonBindable\n >\n {{ interval }}s\n </span>\n </div>\n </ng-template>\n <input type=\"range\" min=\"5000\" max=\"100000\" step=\"1000\" />\n </c8y-range>\n </div>\n <label class=\"c8y-switch c8y-switch--inline\" ngIf=\"refreshOptions === 'realtime'\">\n <input type=\"checkbox\" [(ngModel)]=\"formConfig.follow\" name=\"follow\" />\n <span></span>\n <span class=\"text-12\" translate>Follow selected</span>\n </label>\n </div>\n </div>\n </div>\n</div>\n\n<div class=\"p-t-16 p-b-16\" style=\"width: 100%; height: 240px\">\n <c8y-map\n [assets]=\"assets\"\n (onMove)=\"onPreviewMapMove($event)\"\n (onZoomStart)=\"onPreviewZoomStart()\"\n (onZoomEnd)=\"onPreviewZoomEnd($event)\"\n [config]=\"config.mapConfig\"\n ></c8y-map>\n</div>\n","import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';\nimport { IManagedObject } from '@c8y/client';\nimport { ClusterMapComponent, ClusterMapConfig } from '@c8y/ngx-components/map';\nimport { DashboardChildComponent } from '@c8y/ngx-components';\nimport { MapWidgetConfig } from './map-widget.model';\nimport { filter, takeUntil } from 'rxjs/operators';\nimport { Subject } from 'rxjs';\n\n@Component({\n selector: 'c8y-map-widget',\n templateUrl: './map-widget.component.html'\n})\nexport class MapWidgetComponent implements OnInit, OnDestroy {\n mapConfig: ClusterMapConfig = { center: [0, 0] };\n rootNode: IManagedObject;\n config: MapWidgetConfig;\n\n @ViewChild(ClusterMapComponent)\n clusterMap: ClusterMapComponent;\n\n private savedNode: IManagedObject;\n private destroy$ = new Subject();\n\n constructor(dashboardChild: DashboardChildComponent) {\n this.listenToWidgetResizeEvent(dashboardChild);\n }\n\n ngOnInit(): void {\n if (this.config.device) {\n this.rootNode = this.config.device;\n }\n this.mapConfig = { ...this.config.mapConfig };\n this.savedNode = this.rootNode;\n }\n\n startFollow(context) {\n if (context.id !== this.rootNode?.id) {\n this.rootNode = context;\n }\n this.mapConfig = {\n ...this.config.mapConfig,\n follow: true,\n realtime: true\n };\n }\n\n stopFollow() {\n this.mapConfig = {\n ...this.config.mapConfig,\n follow: false\n };\n this.rootNode = this.savedNode;\n }\n\n ngOnDestroy(): void {\n this.destroy$.next();\n }\n\n private listenToWidgetResizeEvent(dashboardChild: DashboardChildComponent) {\n dashboardChild.changeEnd\n .pipe(\n filter(child => child.lastChange === 'resize'),\n takeUntil(this.destroy$)\n )\n .subscribe(() => {\n this.clusterMap.reset();\n });\n }\n}\n","<c8y-map-status\n [clusterMap]=\"mapWidget\"\n [(config)]=\"mapConfig\"\n (onUnfollow)=\"stopFollow()\"\n></c8y-map-status>\n<c8y-cluster-map #mapWidget [rootNode]=\"rootNode\" [config]=\"mapConfig\">\n <div c8yMapPopup=\"let context\" class=\"map-marker\">\n <a class=\"text-truncate deviceLink text-12\" routerLink=\"/device/{{ context.id }}\">\n <strong>{{ context.name }}</strong>\n </a>\n <c8y-map-event-info [asset]=\"context\">\n <button\n type=\"button\"\n class=\"btn btn-default btn-xs btn-block m-t-8\"\n (click)=\"startFollow(context)\"\n [title]=\"'Activate realtime on this asset and follow it if it moves' \| translate\"\n ngIf=\"!mapConfig.follow\"\n translate\n >\n Follow\n </button>\n <button\n type=\"button\"\n class=\"btn btn-default btn-xs btn-block m-t-8\"\n (click)=\"stopFollow()\"\n [title]=\"'Stop following this asset.' \| translate\"\n ngIf=\"mapConfig.follow\"\n translate\n >\n Unfollow\n </button>\n </c8y-map-event-info>\n </div>\n</c8y-cluster-map>\n","import { CommonModule as NgCommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { FormsModule as NgFormsModule } from '@angular/forms';\nimport { RouterModule } from '@angular/router';\nimport { CommonModule, FormsModule } from '@c8y/ngx-components';\nimport { TooltipModule } from 'ngx-bootstrap/tooltip';\nimport { MapModule } from '@c8y/ngx-components/map';\nimport { MapEventInfoComponent } from './map-event-info.component';\nimport { MapWidgetConfigComponent } from './map-widget-config.component';\nimport { MapWidgetComponent } from './map-widget.component';\n\n@NgModule({\n declarations: [MapWidgetComponent, MapWidgetConfigComponent, MapEventInfoComponent],\n imports: [\n NgCommonModule,\n NgFormsModule,\n CommonModule,\n FormsModule,\n MapModule,\n RouterModule,\n TooltipModule.forRoot()\n ],\n exports: [MapWidgetComponent, MapWidgetConfigComponent, MapEventInfoComponent]\n})\nexport class MapWidgetModule {}\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":["i3","i1","i4","i5.MapEventInfoComponent","NgCommonModule","NgFormsModule","CommonModule","FormsModule"],"mappings":";;;;;;;;;;;;;;;;;;;;;MAOa,qBAAqB,CAAA;AAQhC,IAAA,WAAA,CAAoB,YAA0B,EAAA;AAA1B,QAAA,IAAY,CAAA,YAAA,GAAZ,YAAY,CAAc;AAJ9C,QAAA,IAAO,CAAA,OAAA,GAAG,IAAI,CAAC;KAImC;IAE5C,WAAW,GAAA;;AACf,YAAA,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;YACpB,MAAM,EAAE,IAAI,EAAE,GAAG,MAAM,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;AAC5C,gBAAA,QAAQ,EAAE,YAAY;gBACtB,MAAM,EAAE,IAAI,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC,WAAW,EAAE;AAC1C,gBAAA,YAAY,EAAE,cAAc;AAC5B,gBAAA,QAAQ,EAAE,CAAC;AACX,gBAAA,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,EAAE;AACtB,aAAA,CAAC,CAAC;AACH,YAAA,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC;AACrB,YAAA,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;SACtB,CAAA,CAAA;AAAA,KAAA;;kHArBU,qBAAqB,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,YAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAArB,qBAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,qBAAqB,2GCPlC,4ZAYA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,IAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAAA,IAAA,CAAA,qBAAA,EAAA,QAAA,EAAA,6BAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAAA,IAAA,CAAA,gBAAA,EAAA,QAAA,EAAA,aAAA,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAAA,IAAA,CAAA,QAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,EAAA,CAAA,CAAA;2FDLa,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBAJjC,SAAS;+BACE,oBAAoB,EAAA,QAAA,EAAA,4ZAAA,EAAA,CAAA;mGAK9B,KAAK,EAAA,CAAA;sBADJ,KAAK;;;MEwBK,wBAAwB,CAAA;IAkBnC,WACU,CAAA,UAAsB,EACtB,YAA0B,EAC1B,gBAAkC,EACM,aAA+B,EACvE,YAAiC,EAAA;AAJjC,QAAA,IAAU,CAAA,UAAA,GAAV,UAAU,CAAY;AACtB,QAAA,IAAY,CAAA,YAAA,GAAZ,YAAY,CAAc;AAC1B,QAAA,IAAgB,CAAA,gBAAA,GAAhB,gBAAgB,CAAkB;AACM,QAAA,IAAa,CAAA,aAAA,GAAb,aAAa,CAAkB;AACvE,QAAA,IAAY,CAAA,YAAA,GAAZ,YAAY,CAAqB;QAtBlC,IAAA,CAAA,MAAM,GAAoB;AACjC,YAAA,SAAS,EAAE,SAAS;SACrB,CAAC;AAIF,QAAA,IAAa,CAAA,aAAA,GAAG,IAAI,CAAC;AACrB,QAAA,IAAkB,CAAA,kBAAA,GAAG,KAAK,CAAC;AAE3B,QAAA,IAAc,CAAA,cAAA,GAAmB,MAAM,CAAC;AAetC,QAAA,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE;AACvB,YAAA,IAAI,CAAC,aAAa,GAAG,gBAAgB,CAAC;AACvC,SAAA;QACD,IAAI,CAAC,UAAU,GAAG;AAChB,YAAA,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,SAAS;AACvC,YAAA,MAAM,EAAE,IAAI,CAAC,aAAa,CAAC,MAAM;SAClC,CAAC;KACH;IAEK,QAAQ,GAAA;;AACZ,YAAA,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,EAAE;gBAC1B,IAAI,CAAC,MAAM,CAAC,SAAS,GAAG,IAAI,CAAC,UAAU,CAAC;AACzC,aAAA;AACD,YAAA,IAAI,CAAC,UAAU,GAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACV,IAAI,CAAC,UAAU,CACf,EAAA,IAAI,CAAC,MAAM,CAAC,SAAS,CAAA,EAAA,EACxB,UAAU,EAAE,KAAK,GAClB,CAAC;AACF,YAAA,MAAM,IAAI,CAAC,WAAW,EAAE,CAAC;SAC1B,CAAA,CAAA;AAAA,KAAA;AAEK,IAAA,WAAW,CAAC,OAAsB,EAAA;;YACtC,IACE,OAAO,CAAC,MAAM,CAAC,YAAY,KAAK,OAAO,CAAC,MAAM,CAAC,aAAa;AAC5D,gBAAA,CAAC,OAAO,CAAC,MAAM,CAAC,WAAW,EAC3B;AACA,gBAAA,MAAM,IAAI,CAAC,WAAW,EAAE,CAAC;AAC1B,aAAA;SACF,CAAA,CAAA;AAAA,KAAA;IAEK,eAAe,GAAA;;YACnB,IAAI,CAAC,OAAO,GAAG,MAAM,IAAI,CAAC,UAAU,CAAC,UAAU,EAAE,CAAC;YAClD,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;SAC1E,CAAA,CAAA;AAAA,KAAA;IAED,YAAY,GAAA;QACV,IAAI,CAAC,MAAM,CAAC,SAAS,GAAG,IAAI,CAAC,UAAU,CAAC;AACxC,QAAA,OAAO,IAAI,CAAC;KACb;IAED,gBAAgB,GAAA;AACd,QAAA,IAAI,CAAC,MAAM,CAAC,SAAS,GAChB,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAA,IAAI,CAAC,MAAM,CAAC,SAAS,CACxB,EAAA,EAAA,SAAS,EAAE,IAAI,CAAC,UAAU,CAAC,SAAS,GACrC,CAAC;KACH;IAED,YAAY,GAAA;AACV,QAAA,IAAI,CAAC,MAAM,CAAC,SAAS,GAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAQ,IAAI,CAAC,UAAU,CAAE,EAAA,EAAA,MAAM,EAAE,IAAI,CAAC,UAAU,CAAC,MAAM,GAAE,CAAC;KAChF;IAED,kBAAkB,GAAA;AAChB,QAAA,IAAI,CAAC,UAAU,CAAC,MAAM,EAAE,CAAC;KAC1B;AAED,IAAA,gBAAgB,CAAC,KAAqB,EAAA;AACpC,QAAA,IAAI,CAAC,UAAU,CAAC,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,EAAE,CAAC,CAAC;KAChE;AAED,IAAA,gBAAgB,CAAC,KAAqB,EAAA;QACpC,IAAI,IAAI,CAAC,UAAU,EAAE;AACnB,YAAA,IAAI,CAAC,UAAU,CAAC,MAAM,EAAE,CAAC;AAC1B,SAAA;AACD,QAAA,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC,SAAS,EAAE,CAAC,SAAS,EAAE,CAAC;AAC1D,QAAA,IAAI,CAAC,aAAa,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;QAC7B,IAAI,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;KACrC;IAED,cAAc,GAAA;QACZ,SAAS,CAAC,WAAW,CAAC,kBAAkB,CAAC,CAAC,EAAE,MAAM,EAAE,KAAI;AACtD,YAAA,IAAI,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,MAAM,CAAC,QAAQ,EAAE,MAAM,CAAC,SAAS,CAAC,CAAC;YAC7D,IAAI,CAAC,YAAY,EAAE,CAAC;AACtB,SAAC,CAAC,CAAC;KACJ;IAED,aAAa,GAAA;AACX,QAAA,IAAI,CAAC,UAAU,CAAC,MAAM,GAAG;AACvB,YAAA,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,YAAY,CAAC,GAAG;AACnC,YAAA,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,YAAY,CAAC,GAAG;SACpC,CAAC;QACF,IAAI,CAAC,YAAY,EAAE,CAAC;KACrB;IAED,oBAAoB,GAAA;QAClB,IAAI,CAAC,UAAU,CAAC,QAAQ,GAAG,IAAI,CAAC,cAAc,KAAK,UAAU,CAAC;AAC9D,QAAA,IAAI,CAAC,UAAU,CAAC,eAAe,GAAG,IAAI,CAAC,cAAc,KAAK,UAAU,GAAG,IAAI,GAAG,IAAI,CAAC;AACnF,QAAA,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,QAAQ,EAAE;AAC7B,YAAA,IAAI,CAAC,UAAU,CAAC,MAAM,GAAG,KAAK,CAAC;AAChC,SAAA;KACF;IAEK,gBAAgB,GAAA;;YACpB,IAAI;gBACF,MAAM,IAAI,GAAG,MAAM,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC;AAC9C,oBAAA,gBAAgB,EAAE,IAAI,CAAC,UAAU,CAAC,IAAI;AACvC,iBAAA,CAAC,CAAC;AACH,gBAAA,IAAI,CAAC,UAAU,CAAC,IAAI,GAAG,IAAI,CAAC;AAC5B,gBAAA,IAAI,CAAC,MAAM,CAAC,SAAS,GAAQ,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAA,IAAI,CAAC,MAAM,CAAC,SAAS,CAAE,EAAA,EAAA,IAAI,GAAE,CAAC;AAC5D,aAAA;YAAC,OAAM,EAAA,EAAA;;AAEP,aAAA;SACF,CAAA,CAAA;AAAA,KAAA;IAED,UAAU,GAAA;AACR,QAAA,IAAI,CAAC,UAAU,CAAC,IAAI,GAAG,SAAS,CAAC;QACjC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,GAAG,SAAS,CAAC;AACvC,QAAA,IAAI,CAAC,UAAU,CAAC,cAAc,EAAE,CAAC;KAClC;IAEa,WAAW,GAAA;;AACvB,YAAA,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,UAAU,CAAC,WAAW,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;AACrE,YAAA,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,UAAU,CAAC,kBAAkB,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;AACjF,YAAA,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,iBAAiB,EAAE,CAAC;YAC/C,IAAI,CAAC,oBAAoB,EAAE,CAAC;AAE5B,YAAA,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,MAAM,IAAI,CAAC,UAAU,CAAC,kBAAkB,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;AACtF,YAAA,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;AACnB,YAAA,IAAI,MAAM,CAAC,UAAU,GAAG,CAAC,EAAE;gBACzB,IAAI,CAAC,YAAY,CAAC,MAAM,CACtB,OAAO,CACL,yKAAyK,CAC1K,CACF,CAAC;AACH,aAAA;SACF,CAAA,CAAA;AAAA,KAAA;IAEO,iBAAiB,GAAA;QACvB,IAAI,MAAM,GAAmB,MAAM,CAAC;AACpC,QAAA,IAAI,IAAI,CAAC,UAAU,CAAC,QAAQ,EAAE;YAC5B,MAAM,GAAG,UAAU,CAAC;AACrB,SAAA;AAAM,aAAA,IAAI,IAAI,CAAC,UAAU,CAAC,eAAe,EAAE;YAC1C,MAAM,GAAG,UAAU,CAAC;AACrB,SAAA;QACD,MAAM,kBAAkB,GACtB,CAAC,CAAC,IAAI,CAAC,kBAAkB,IAAI,MAAM,KAAK,UAAU;aACjD,IAAI,CAAC,kBAAkB,IAAI,MAAM,KAAK,UAAU,CAAC,CAAC;QACrD,MAAM,GAAG,kBAAkB,GAAG,MAAM,GAAG,MAAM,CAAC;AAC9C,QAAA,OAAO,MAAM,CAAC;KACf;IAEO,aAAa,CAAC,GAAW,EAAE,GAAW,EAAA;AAC5C,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC,CAAC;AACvE,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC;YAChC,IAAI,EAAE,CAA6G,0GAAA,EAAA,SAAS,CAAM,IAAA,CAAA;AACnI,SAAA,CAAC,CAAC;AACH,QAAA,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE;YAChD,IAAI;AACL,SAAA,CAAC,CAAC;QACH,IAAI,CAAC,UAAU,CAAC,cAAc,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;KACjD;;AA9KU,wBAAA,CAAA,IAAA,GAAA,EAAA,CAAA,kBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,wBAAwB,4GAsBb,kBAAkB,EAAA,QAAA,EAAA,IAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,mBAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAtB7B,wBAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,wBAAwB,EAexB,QAAA,EAAA,uBAAA,EAAA,MAAA,EAAA,EAAA,MAAA,EAAA,QAAA,EAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,YAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,YAAY,EC/CzB,WAAA,EAAA,IAAA,EAAA,CAAA,EAAA,aAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,6oNA4LA,utGD9JiB,CAAC,EAAE,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,EAAE,CAAC,EAAA,CAAA,CAAA;2FAExD,wBAAwB,EAAA,UAAA,EAAA,CAAA;kBALpC,SAAS;+BACE,uBAAuB,EAAA,aAAA,EAElB,CAAC,EAAE,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,EAAE,CAAC,EAAA,QAAA,EAAA,6oNAAA,EAAA,CAAA;;;8BAwBhE,QAAQ;;8BAAI,MAAM;+BAAC,kBAAkB,CAAA;;yBArB/B,MAAM,EAAA,CAAA;sBAAd,KAAK;gBAeE,UAAU,EAAA,CAAA;sBADjB,SAAS;uBAAC,YAAY,CAAA;;;MEnCZ,kBAAkB,CAAA;AAW7B,IAAA,WAAA,CAAY,cAAuC,EAAA;AAVnD,QAAA,IAAS,CAAA,SAAA,GAAqB,EAAE,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC;AAQzC,QAAA,IAAA,CAAA,QAAQ,GAAG,IAAI,OAAO,EAAE,CAAC;AAG/B,QAAA,IAAI,CAAC,yBAAyB,CAAC,cAAc,CAAC,CAAC;KAChD;IAED,QAAQ,GAAA;AACN,QAAA,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE;YACtB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC;AACpC,SAAA;QACD,IAAI,CAAC,SAAS,GAAQ,MAAA,CAAA,MAAA,CAAA,EAAA,EAAA,IAAI,CAAC,MAAM,CAAC,SAAS,CAAE,CAAC;AAC9C,QAAA,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,QAAQ,CAAC;KAChC;AAED,IAAA,WAAW,CAAC,OAAO,EAAA;;QACjB,IAAI,OAAO,CAAC,EAAE,MAAK,CAAA,EAAA,GAAA,IAAI,CAAC,QAAQ,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAE,EAAE,CAAA,EAAE;AACpC,YAAA,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC;AACzB,SAAA;AACD,QAAA,IAAI,CAAC,SAAS,GAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACT,IAAI,CAAC,MAAM,CAAC,SAAS,CACxB,EAAA,EAAA,MAAM,EAAE,IAAI,EACZ,QAAQ,EAAE,IAAI,GACf,CAAC;KACH;IAED,UAAU,GAAA;AACR,QAAA,IAAI,CAAC,SAAS,GACT,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAA,IAAI,CAAC,MAAM,CAAC,SAAS,CACxB,EAAA,EAAA,MAAM,EAAE,KAAK,GACd,CAAC;AACF,QAAA,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,SAAS,CAAC;KAChC;IAED,WAAW,GAAA;AACT,QAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;KACtB;AAEO,IAAA,yBAAyB,CAAC,cAAuC,EAAA;AACvE,QAAA,cAAc,CAAC,SAAS;aACrB,IAAI,CACH,MAAM,CAAC,KAAK,IAAI,KAAK,CAAC,UAAU,KAAK,QAAQ,CAAC,EAC9C,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC,CACzB;aACA,SAAS,CAAC,MAAK;AACd,YAAA,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,CAAC;AAC1B,SAAC,CAAC,CAAC;KACN;;+GAvDU,kBAAkB,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAAC,IAAA,CAAA,uBAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;mGAAlB,kBAAkB,EAAA,QAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,YAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAKlB,mBAAmB,EAAA,WAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECjBhC,knCAkCA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,IAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAAA,IAAA,CAAA,qBAAA,EAAA,QAAA,EAAA,6BAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAAD,IAAA,CAAA,kBAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,CAAA,QAAA,EAAA,YAAA,CAAA,EAAA,OAAA,EAAA,CAAA,cAAA,EAAA,YAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAAA,IAAA,CAAA,mBAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,CAAA,QAAA,EAAA,UAAA,EAAA,OAAA,EAAA,kBAAA,CAAA,EAAA,OAAA,EAAA,CAAA,WAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAAA,IAAA,CAAA,iBAAA,EAAA,QAAA,EAAA,eAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAAE,IAAA,CAAA,kBAAA,EAAA,QAAA,EAAA,gCAAA,EAAA,MAAA,EAAA,CAAA,QAAA,EAAA,aAAA,EAAA,UAAA,EAAA,qBAAA,EAAA,kBAAA,EAAA,oBAAA,EAAA,YAAA,EAAA,OAAA,EAAA,YAAA,EAAA,YAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAAC,qBAAA,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,OAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAAF,IAAA,CAAA,gBAAA,EAAA,IAAA,EAAA,WAAA,EAAA,CAAA,EAAA,CAAA,CAAA;2FDtBa,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAJ9B,SAAS;+BACE,gBAAgB,EAAA,QAAA,EAAA,knCAAA,EAAA,CAAA;gHAS1B,UAAU,EAAA,CAAA;sBADT,SAAS;uBAAC,mBAAmB,CAAA;;;MEOnB,eAAe,CAAA;;4GAAf,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;AAAf,eAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,eAAe,iBAZX,kBAAkB,EAAE,wBAAwB,EAAE,qBAAqB,aAEhFG,YAAc;QACdC,WAAa;QACbC,cAAY;QACZC,aAAW;QACX,SAAS;AACT,QAAA,YAAY,EAGJN,EAAA,CAAA,aAAA,CAAA,EAAA,OAAA,EAAA,CAAA,kBAAkB,EAAE,wBAAwB,EAAE,qBAAqB,CAAA,EAAA,CAAA,CAAA;AAElE,eAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,eAAe,YAVxBG,YAAc;QACdC,WAAa;QACbC,cAAY;QACZC,aAAW;QACX,SAAS;QACT,YAAY;AACZ,QAAA,aAAa,CAAC,OAAO,EAAE,CAAA,EAAA,CAAA,CAAA;2FAId,eAAe,EAAA,UAAA,EAAA,CAAA;kBAb3B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACR,oBAAA,YAAY,EAAE,CAAC,kBAAkB,EAAE,wBAAwB,EAAE,qBAAqB,CAAC;AACnF,oBAAA,OAAO,EAAE;wBACPH,YAAc;wBACdC,WAAa;wBACbC,cAAY;wBACZC,aAAW;wBACX,SAAS;wBACT,YAAY;wBACZ,aAAa,CAAC,OAAO,EAAE;AACxB,qBAAA;AACD,oBAAA,OAAO,EAAE,CAAC,kBAAkB,EAAE,wBAAwB,EAAE,qBAAqB,CAAC;iBAC/E,CAAA;;;ACvBD;;AAEG;;;;"}

package/fesm2015/c8y-ngx-components.mjs CHANGED Viewed

@@ -20684,16 +20684,16 @@ class FilePickerValidators {
         };
     }
     static fileCountMax(fileCountMax) {
-        const msg = gettext('Too many files selected. Limit: {{ limit }}');
+        const msg = gettext('Too many files selected. Limit: {{ fileCountMax }}.');
         return (control) => {
             if (Array.isArray(control.value)) {
-                return control.value.length > fileCountMax ? { [msg]: { limit: fileCountMax } } : null;
+                return control.value.length > fileCountMax ? { [msg]: { fileCountMax } } : null;
             }
             return null;
         };
     }
     static fileCountMin(fileCountMin) {
-        const msg = gettext('At least {{ fileCountMin }} file(s) required.');
+        const msg = gettext('Requires min. {{ fileCountMin }} file(s).');
         return (control) => {
             if (Array.isArray(control.value)) {
                 return control.value.length < fileCountMin ? { [msg]: { fileCountMin } } : null;
@@ -21164,7 +21164,7 @@ FilePickerNewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
             multi: true,
             useExisting: forwardRef(() => FilePickerNewComponent)
         }
-    ], viewQueries: [{ propertyName: "filePlaceholder", first: true, predicate: ["filePlaceholder"], descendants: true, static: true }], ngImport: i0, template: "<c8y-form-group class=\"m-0\">\n  <div\n    class=\"file-picker-drop-zone\"\n    [class.dragging]=\"isDropAreaEnlarged$ | async\"\n    [class.unsupported-format]=\"isDraggedFileUnsupported$ | async\"\n    tabindex=\"0\"\n  >\n    <div\n      #filePlaceholder\n      class=\"file-placeholder pointer\"\n      [class.drag-over]=\"isDraggingOverFilePlaceholder$ | async\"\n      (drop)=\"onDrop($event)\"\n      (click)=\"!uploadInProgress && picker.click()\"\n    >\n      <div\n        *ngIf=\"isDraggedFileUnsupported$ | async; else defaultHint\"\n        class=\"hint-placeholder pointer\"\n      >\n        <i c8yIcon=\"warning\" class=\"warning\"></i>\n        <p>\n          <b translate>Unsupported file format.</b>\n        </p>\n      </div>\n\n      <ng-template #defaultHint>\n        <div *ngIf=\"!uploadInProgress\" class=\"hint-placeholder\">\n          <i c8yIcon=\"upload\"></i>\n          <p>\n            <b>{{ 'Drop files here or click to browse' | translate }}</b>\n          </p>\n          <p *ngIf=\"accept\" class=\"m-t-8 text-12 text-muted\">\n            {{ 'Supported file formats:' | translate }} {{ accept }}\n          </p>\n          <div\n            class=\"c8y-messages has-error p-b-8 text-left\"\n            *ngIf=\"\n              controlInstance.touched && controlInstance.errors && controlInstance.errors\n                | filterNonArrayValidationErrors\n            \"\n          >\n            <ng-container\n              *ngFor=\"\n                let error of controlInstance.errors | filterNonArrayValidationErrors | keyvalue\n              \"\n            >\n              <small class=\"form-control-feedback-message\">\n                {{ error.key | humanizeValidationMessage | translate: error.value }}\n              </small>\n            </ng-container>\n          </div>\n        </div>\n        <div *ngIf=\"uploadInProgress\" class=\"d-flex d-col p-4 flex-center\">\n          <c8y-loading></c8y-loading>\n          <p class=\"m-t-auto m-b-auto m-r-8 text-center\">\n            {{ loadingMessage | translate }}\n          </p>\n        </div>\n      </ng-template>\n    </div>\n  </div>\n  <div class=\"file-container\">\n    <ul class=\"list-group\">\n      <ng-container *ngFor=\"let file of droppedFiles; let i = index\">\n        <li class=\"list-group-item p-4 a-i-center\">\n          <div class=\"d-flex a-i-center\">\n            <i [c8yIcon]=\"file | fileIcon\" class=\"icon-20 m-r-8\"></i>\n            <div class=\"m-r-16 text-truncate\" [title]=\"file.name\">\n              {{ file.name }}\n            </div>\n            <div class=\"m-r-16 text-nowrap\">({{ file.size | bytes }})</div>\n            <div class=\"m-l-auto\">\n              <button\n                *ngIf=\"!uploadInProgress\"\n                (click)=\"deleteAt(i)\"\n                class=\"btn btn-dot btn-dot--danger\"\n                type=\"button\"\n                [attr.aria-label]=\"'Remove' | translate\"\n                title=\"{{ 'Remove' | translate }}\"\n              >\n                <i c8yIcon=\"minus-circle\"></i>\n              </button>\n              <div class=\"btn-dot btn\" *ngIf=\"uploadInProgress\" disabled=\"disabled\">\n                <i c8yIcon=\"circled-notch\" class=\"icon-spin\"></i>\n              </div>\n            </div>\n          </div>\n          <ng-container\n            *ngFor=\"\n              let error of controlInstance.errors | extractArrayValidationErrors: i | keyvalue\n            \"\n          >\n            <div class=\"c8y-messages has-error p-b-24\">\n              <small class=\"form-control-feedback-message m-0\" style=\"margin-top: -6px !important\">\n                {{ error.key | humanizeValidationMessage | translate: error.value }}\n              </small>\n            </div>\n          </ng-container>\n        </li>\n      </ng-container>\n    </ul>\n  </div>\n  <input\n    #picker\n    (change)=\"filesSelected($event)\"\n    [accept]=\"acceptedExts\"\n    [multiple]=\"maxAllowedFiles > 1\"\n    type=\"file\"\n    class=\"hidden\"\n    id=\"file\"\n  />\n</c8y-form-group>\n", dependencies: [{ kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: LoadingComponent, selector: "c8y-loading" }, { kind: "pipe", type: ExtractArrayValidationErrorsPipe, name: "extractArrayValidationErrors" }, { kind: "pipe", type: FilterNonArrayValidationErrorsPipe, name: "filterNonArrayValidationErrors" }, { kind: "pipe", type: HumanizeValidationMessagePipe, name: "humanizeValidationMessage" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: BytesPipe, name: "bytes" }, { kind: "pipe", type: GenericFileIconPipe, name: "fileIcon" }] });
+    ], viewQueries: [{ propertyName: "filePlaceholder", first: true, predicate: ["filePlaceholder"], descendants: true, static: true }], ngImport: i0, template: "<c8y-form-group class=\"m-0\">\n  <div\n    class=\"file-picker-drop-zone\"\n    [class.dragging]=\"isDropAreaEnlarged$ | async\"\n    [class.unsupported-format]=\"isDraggedFileUnsupported$ | async\"\n    tabindex=\"0\"\n  >\n    <div\n      #filePlaceholder\n      class=\"file-placeholder pointer\"\n      [class.drag-over]=\"isDraggingOverFilePlaceholder$ | async\"\n      (drop)=\"onDrop($event)\"\n      (click)=\"!uploadInProgress && picker.click()\"\n    >\n      <div\n        *ngIf=\"isDraggedFileUnsupported$ | async; else defaultHint\"\n        class=\"hint-placeholder pointer\"\n      >\n        <i c8yIcon=\"warning\" class=\"warning\"></i>\n        <p>\n          <b translate>Unsupported file format.</b>\n        </p>\n      </div>\n\n      <ng-template #defaultHint>\n        <div *ngIf=\"!uploadInProgress\" class=\"hint-placeholder\">\n          <i c8yIcon=\"upload\"></i>\n          <p>\n            <b>{{ 'Drop files here or click to browse' | translate }}</b>\n          </p>\n          <p *ngIf=\"accept\" class=\"m-t-8 text-12 text-muted\">\n            {{ 'Supported file types:' | translate }} {{ accept }}\n          </p>\n          <div\n            class=\"c8y-messages has-error p-b-8 text-left\"\n            *ngIf=\"\n              controlInstance.touched && controlInstance.errors && controlInstance.errors\n                | filterNonArrayValidationErrors\n            \"\n          >\n            <ng-container\n              *ngFor=\"\n                let error of controlInstance.errors | filterNonArrayValidationErrors | keyvalue\n              \"\n            >\n              <small class=\"form-control-feedback-message\">\n                {{ error.key | humanizeValidationMessage | translate: error.value }}\n              </small>\n            </ng-container>\n          </div>\n        </div>\n        <div *ngIf=\"uploadInProgress\" class=\"d-flex d-col p-4 flex-center\">\n          <c8y-loading></c8y-loading>\n          <p class=\"m-t-auto m-b-auto m-r-8 text-center\">\n            {{ loadingMessage | translate }}\n          </p>\n        </div>\n      </ng-template>\n    </div>\n  </div>\n  <div class=\"file-container\">\n    <ul class=\"list-group\">\n      <ng-container *ngFor=\"let file of droppedFiles; let i = index\">\n        <li class=\"list-group-item p-4 a-i-center\">\n          <div class=\"d-flex a-i-center\">\n            <i [c8yIcon]=\"file | fileIcon\" class=\"icon-20 m-r-8\"></i>\n            <div class=\"m-r-16 text-truncate\" [title]=\"file.name\">\n              {{ file.name }}\n            </div>\n            <div class=\"m-r-16 text-nowrap\">({{ file.size | bytes }})</div>\n            <div class=\"m-l-auto\">\n              <button\n                *ngIf=\"!uploadInProgress\"\n                (click)=\"deleteAt(i)\"\n                class=\"btn btn-dot btn-dot--danger\"\n                type=\"button\"\n                [attr.aria-label]=\"'Remove' | translate\"\n                title=\"{{ 'Remove' | translate }}\"\n              >\n                <i c8yIcon=\"minus-circle\"></i>\n              </button>\n              <div class=\"btn-dot btn\" *ngIf=\"uploadInProgress\" disabled=\"disabled\">\n                <i c8yIcon=\"circled-notch\" class=\"icon-spin\"></i>\n              </div>\n            </div>\n          </div>\n          <ng-container\n            *ngFor=\"\n              let error of controlInstance.errors | extractArrayValidationErrors: i | keyvalue\n            \"\n          >\n            <div class=\"c8y-messages has-error p-b-24\">\n              <small class=\"form-control-feedback-message m-0\" style=\"margin-top: -6px !important\">\n                {{ error.key | humanizeValidationMessage | translate: error.value }}\n              </small>\n            </div>\n          </ng-container>\n        </li>\n      </ng-container>\n    </ul>\n  </div>\n  <input\n    #picker\n    (change)=\"filesSelected($event)\"\n    [accept]=\"acceptedExts\"\n    [multiple]=\"maxAllowedFiles > 1\"\n    type=\"file\"\n    class=\"hidden\"\n    id=\"file\"\n  />\n</c8y-form-group>\n", dependencies: [{ kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: LoadingComponent, selector: "c8y-loading" }, { kind: "pipe", type: ExtractArrayValidationErrorsPipe, name: "extractArrayValidationErrors" }, { kind: "pipe", type: FilterNonArrayValidationErrorsPipe, name: "filterNonArrayValidationErrors" }, { kind: "pipe", type: HumanizeValidationMessagePipe, name: "humanizeValidationMessage" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: BytesPipe, name: "bytes" }, { kind: "pipe", type: GenericFileIconPipe, name: "fileIcon" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: FilePickerNewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-file-picker-new', providers: [
@@ -21178,7 +21178,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImpor
                             multi: true,
                             useExisting: forwardRef(() => FilePickerNewComponent)
                         }
-                    ], template: "<c8y-form-group class=\"m-0\">\n  <div\n    class=\"file-picker-drop-zone\"\n    [class.dragging]=\"isDropAreaEnlarged$ | async\"\n    [class.unsupported-format]=\"isDraggedFileUnsupported$ | async\"\n    tabindex=\"0\"\n  >\n    <div\n      #filePlaceholder\n      class=\"file-placeholder pointer\"\n      [class.drag-over]=\"isDraggingOverFilePlaceholder$ | async\"\n      (drop)=\"onDrop($event)\"\n      (click)=\"!uploadInProgress && picker.click()\"\n    >\n      <div\n        *ngIf=\"isDraggedFileUnsupported$ | async; else defaultHint\"\n        class=\"hint-placeholder pointer\"\n      >\n        <i c8yIcon=\"warning\" class=\"warning\"></i>\n        <p>\n          <b translate>Unsupported file format.</b>\n        </p>\n      </div>\n\n      <ng-template #defaultHint>\n        <div *ngIf=\"!uploadInProgress\" class=\"hint-placeholder\">\n          <i c8yIcon=\"upload\"></i>\n          <p>\n            <b>{{ 'Drop files here or click to browse' | translate }}</b>\n          </p>\n          <p *ngIf=\"accept\" class=\"m-t-8 text-12 text-muted\">\n            {{ 'Supported file formats:' | translate }} {{ accept }}\n          </p>\n          <div\n            class=\"c8y-messages has-error p-b-8 text-left\"\n            *ngIf=\"\n              controlInstance.touched && controlInstance.errors && controlInstance.errors\n                | filterNonArrayValidationErrors\n            \"\n          >\n            <ng-container\n              *ngFor=\"\n                let error of controlInstance.errors | filterNonArrayValidationErrors | keyvalue\n              \"\n            >\n              <small class=\"form-control-feedback-message\">\n                {{ error.key | humanizeValidationMessage | translate: error.value }}\n              </small>\n            </ng-container>\n          </div>\n        </div>\n        <div *ngIf=\"uploadInProgress\" class=\"d-flex d-col p-4 flex-center\">\n          <c8y-loading></c8y-loading>\n          <p class=\"m-t-auto m-b-auto m-r-8 text-center\">\n            {{ loadingMessage | translate }}\n          </p>\n        </div>\n      </ng-template>\n    </div>\n  </div>\n  <div class=\"file-container\">\n    <ul class=\"list-group\">\n      <ng-container *ngFor=\"let file of droppedFiles; let i = index\">\n        <li class=\"list-group-item p-4 a-i-center\">\n          <div class=\"d-flex a-i-center\">\n            <i [c8yIcon]=\"file | fileIcon\" class=\"icon-20 m-r-8\"></i>\n            <div class=\"m-r-16 text-truncate\" [title]=\"file.name\">\n              {{ file.name }}\n            </div>\n            <div class=\"m-r-16 text-nowrap\">({{ file.size | bytes }})</div>\n            <div class=\"m-l-auto\">\n              <button\n                *ngIf=\"!uploadInProgress\"\n                (click)=\"deleteAt(i)\"\n                class=\"btn btn-dot btn-dot--danger\"\n                type=\"button\"\n                [attr.aria-label]=\"'Remove' | translate\"\n                title=\"{{ 'Remove' | translate }}\"\n              >\n                <i c8yIcon=\"minus-circle\"></i>\n              </button>\n              <div class=\"btn-dot btn\" *ngIf=\"uploadInProgress\" disabled=\"disabled\">\n                <i c8yIcon=\"circled-notch\" class=\"icon-spin\"></i>\n              </div>\n            </div>\n          </div>\n          <ng-container\n            *ngFor=\"\n              let error of controlInstance.errors | extractArrayValidationErrors: i | keyvalue\n            \"\n          >\n            <div class=\"c8y-messages has-error p-b-24\">\n              <small class=\"form-control-feedback-message m-0\" style=\"margin-top: -6px !important\">\n                {{ error.key | humanizeValidationMessage | translate: error.value }}\n              </small>\n            </div>\n          </ng-container>\n        </li>\n      </ng-container>\n    </ul>\n  </div>\n  <input\n    #picker\n    (change)=\"filesSelected($event)\"\n    [accept]=\"acceptedExts\"\n    [multiple]=\"maxAllowedFiles > 1\"\n    type=\"file\"\n    class=\"hidden\"\n    id=\"file\"\n  />\n</c8y-form-group>\n" }]
+                    ], template: "<c8y-form-group class=\"m-0\">\n  <div\n    class=\"file-picker-drop-zone\"\n    [class.dragging]=\"isDropAreaEnlarged$ | async\"\n    [class.unsupported-format]=\"isDraggedFileUnsupported$ | async\"\n    tabindex=\"0\"\n  >\n    <div\n      #filePlaceholder\n      class=\"file-placeholder pointer\"\n      [class.drag-over]=\"isDraggingOverFilePlaceholder$ | async\"\n      (drop)=\"onDrop($event)\"\n      (click)=\"!uploadInProgress && picker.click()\"\n    >\n      <div\n        *ngIf=\"isDraggedFileUnsupported$ | async; else defaultHint\"\n        class=\"hint-placeholder pointer\"\n      >\n        <i c8yIcon=\"warning\" class=\"warning\"></i>\n        <p>\n          <b translate>Unsupported file format.</b>\n        </p>\n      </div>\n\n      <ng-template #defaultHint>\n        <div *ngIf=\"!uploadInProgress\" class=\"hint-placeholder\">\n          <i c8yIcon=\"upload\"></i>\n          <p>\n            <b>{{ 'Drop files here or click to browse' | translate }}</b>\n          </p>\n          <p *ngIf=\"accept\" class=\"m-t-8 text-12 text-muted\">\n            {{ 'Supported file types:' | translate }} {{ accept }}\n          </p>\n          <div\n            class=\"c8y-messages has-error p-b-8 text-left\"\n            *ngIf=\"\n              controlInstance.touched && controlInstance.errors && controlInstance.errors\n                | filterNonArrayValidationErrors\n            \"\n          >\n            <ng-container\n              *ngFor=\"\n                let error of controlInstance.errors | filterNonArrayValidationErrors | keyvalue\n              \"\n            >\n              <small class=\"form-control-feedback-message\">\n                {{ error.key | humanizeValidationMessage | translate: error.value }}\n              </small>\n            </ng-container>\n          </div>\n        </div>\n        <div *ngIf=\"uploadInProgress\" class=\"d-flex d-col p-4 flex-center\">\n          <c8y-loading></c8y-loading>\n          <p class=\"m-t-auto m-b-auto m-r-8 text-center\">\n            {{ loadingMessage | translate }}\n          </p>\n        </div>\n      </ng-template>\n    </div>\n  </div>\n  <div class=\"file-container\">\n    <ul class=\"list-group\">\n      <ng-container *ngFor=\"let file of droppedFiles; let i = index\">\n        <li class=\"list-group-item p-4 a-i-center\">\n          <div class=\"d-flex a-i-center\">\n            <i [c8yIcon]=\"file | fileIcon\" class=\"icon-20 m-r-8\"></i>\n            <div class=\"m-r-16 text-truncate\" [title]=\"file.name\">\n              {{ file.name }}\n            </div>\n            <div class=\"m-r-16 text-nowrap\">({{ file.size | bytes }})</div>\n            <div class=\"m-l-auto\">\n              <button\n                *ngIf=\"!uploadInProgress\"\n                (click)=\"deleteAt(i)\"\n                class=\"btn btn-dot btn-dot--danger\"\n                type=\"button\"\n                [attr.aria-label]=\"'Remove' | translate\"\n                title=\"{{ 'Remove' | translate }}\"\n              >\n                <i c8yIcon=\"minus-circle\"></i>\n              </button>\n              <div class=\"btn-dot btn\" *ngIf=\"uploadInProgress\" disabled=\"disabled\">\n                <i c8yIcon=\"circled-notch\" class=\"icon-spin\"></i>\n              </div>\n            </div>\n          </div>\n          <ng-container\n            *ngFor=\"\n              let error of controlInstance.errors | extractArrayValidationErrors: i | keyvalue\n            \"\n          >\n            <div class=\"c8y-messages has-error p-b-24\">\n              <small class=\"form-control-feedback-message m-0\" style=\"margin-top: -6px !important\">\n                {{ error.key | humanizeValidationMessage | translate: error.value }}\n              </small>\n            </div>\n          </ng-container>\n        </li>\n      </ng-container>\n    </ul>\n  </div>\n  <input\n    #picker\n    (change)=\"filesSelected($event)\"\n    [accept]=\"acceptedExts\"\n    [multiple]=\"maxAllowedFiles > 1\"\n    type=\"file\"\n    class=\"hidden\"\n    id=\"file\"\n  />\n</c8y-form-group>\n" }]
         }], ctorParameters: function () {
         return [{ type: FilesService }, { type: i0.Injector, decorators: [{
                         type: Inject,
@@ -25423,10 +25423,10 @@ class HelpComponent {
     }
 }
 HelpComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: HelpComponent, deps: [{ token: DocsService }, { token: HelpService }], target: i0.ɵɵFactoryTarget.Component });
-HelpComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: HelpComponent, selector: "c8y-help", inputs: { src: "src", isCollapsed: "isCollapsed", priority: "priority", icon: "icon" }, ngImport: i0, template: "<c8y-action-bar-item\n  [placement]=\"'right'\"\n  itemClass=\"pull-right m-l-8\"\n  [priority]=\"priority\"\n  *ngIf=\"!!(helpService.contextHelp | async)\"\n>\n  <button\n    class=\"btn-help\"\n    type=\"button\"\n    [attr.aria-label]=\"'About this page' | translate\"\n    data-cy=\"help--help-btn\"\n    tooltip=\"{{ 'About this page' | translate }}\"\n    [delay]=\"750\"\n    placement=\"left\"\n    container=\"body\"\n    [attr.aria-expanded]=\"!isCollapsed\"\n    aria-controls=\"collapseHelp\"\n    (click)=\"toggle()\"\n    c8yProductExperience\n    [actionName]=\"isCollapsed ? 'helpOpened' : 'helpClosed'\"\n    [actionData]=\"{ src: src }\"\n  ></button>\n</c8y-action-bar-item>\n\n<div\n  id=\"collapseHelp\"\n  class=\"c8y-help-drawer\"\n  [collapse]=\"isCollapsed\"\n  [isAnimated]=\"true\"\n  (collapsed)=\"onCollapsed()\"\n>\n  <div\n    [ngClass]=\"{ 'c8y-help-drawer-block': isInit }\"\n    #docOutlet\n    data-cy=\"c8y-help--c8y-help-drawer-block\"\n  >\n    <div *ngIf=\"isLoading\">\n      <c8y-loading></c8y-loading>\n    </div>\n\n    <div *ngIf=\"!isLoading\">\n      <div class=\"d-flex\">\n        <i\n          [c8yIcon]=\"!hasError ? icon : 'unlink'\"\n          [ngClass]=\"{ 'text-warning': hasError, 'text-muted': !hasError }\"\n          class=\"c8y-icon-duocolor icon-48\"\n        ></i>\n        <div class=\"p-l-16 flex-grow\" *ngIf=\"!hasError\">\n          <div\n            class=\"alert alert-info m-b-16\"\n            *ngIf=\"\n              !helpService.isSupportedLanguage() &&\n              !showLangWarning &&\n              !helpService.isWarningAlertViewed\n            \"\n          >\n            <button\n              class=\"close\"\n              [attr.aria-label]=\"'Close' | translate\"\n              type=\"button\"\n              (click)=\"\n                showLangWarning = !showLangWarning;\n                helpService.isWarningAlertViewed = !helpService.isWarningAlertViewed\n              \"\n            >\n              <span aria-hidden=\"true\">\u00D7</span>\n              <span class=\"sr-only\">Close</span>\n            </button>\n            <p>\n              {{ 'Help content is only available in English.' | translate }}\n            </p>\n          </div>\n          <h4 class=\"text-bold text-primary p-t-16 m-b-16\">\n            {{ title }}\n          </h4>\n          <div id=\"helpContent\" class=\"help-content\" [innerHTML]=\"sectionContent\" data-cy=\"help--c8y-help-content\"></div>\n        </div>\n\n        <div class=\"p-l-16 p-t-16 flex-grow\" *ngIf=\"hasError\">\n          <h4 class=\"text-bold m-b-16\" translate>Content couldn't be loaded.</h4>\n          <div class=\"help-content\">\n            <p translate>Check connection or reload page.</p>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div\n    class=\"c8y-help-drawer-footer animated fadeIn\"\n    style=\"animation-delay: 0.35s\"\n    *ngIf=\"!isLoading && !hasError\"\n    data-cy=\"c8y-help--c8y-help-drawer-footer\"\n  >\n    <button\n      class=\"btn btn-default\"\n      type=\"button\"\n      [title]=\"'Close help' | translate\"\n      (click)=\"toggle()\"\n      [attr.aria-expanded]=\"!isCollapsed\"\n      aria-controls=\"collapseHelp\"\n      translate\n    >\n      Close\n    </button>\n    <a\n      data-cy=\"help--href-value\"\n      href=\"{{ hasError ? getUrl() : getUrl(src) }}\"\n      class=\"btn btn-primary\"\n      target=\"_blank\"\n      rel=\"noopener noreferrer\"\n    >\n      <span translate *ngIf=\"!hasError\">\n        Open the\n        <span>User guide`KEEP_ORIGINAL`</span>\n      </span>\n      <span translate *ngIf=\"hasError\">\n        Check the\n        <span>User guide`KEEP_ORIGINAL`</span>\n      </span>\n    </a>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LoadingComponent, selector: "c8y-loading" }, { kind: "directive", type: i1$a.CollapseDirective, selector: "[collapse]", inputs: ["display", "isAnimated", "collapse"], outputs: ["collapsed", "collapses", "expanded", "expands"], exportAs: ["bs-collapse"] }, { kind: "directive", type: i1$7.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "component", type: ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId"] }, { kind: "directive", type: ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit", "suppressDataOverriding"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }] });
+HelpComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: HelpComponent, selector: "c8y-help", inputs: { src: "src", isCollapsed: "isCollapsed", priority: "priority", icon: "icon" }, ngImport: i0, template: "<c8y-action-bar-item\n  [placement]=\"'right'\"\n  itemClass=\"pull-right m-l-8\"\n  [priority]=\"priority\"\n  *ngIf=\"!!(helpService.contextHelp | async)\"\n>\n  <button\n    class=\"btn-help\"\n    type=\"button\"\n    [attr.aria-label]=\"'About this page' | translate\"\n    data-cy=\"help--help-btn\"\n    tooltip=\"{{ 'About this page' | translate }}\"\n    [delay]=\"750\"\n    placement=\"left\"\n    container=\"body\"\n    [attr.aria-expanded]=\"!isCollapsed\"\n    aria-controls=\"collapseHelp\"\n    (click)=\"toggle()\"\n    c8yProductExperience\n    [actionName]=\"isCollapsed ? 'helpOpened' : 'helpClosed'\"\n    [actionData]=\"{ src: src }\"\n  ></button>\n</c8y-action-bar-item>\n\n<div\n  id=\"collapseHelp\"\n  class=\"c8y-help-drawer\"\n  [collapse]=\"isCollapsed\"\n  [isAnimated]=\"true\"\n  (collapsed)=\"onCollapsed()\"\n>\n  <div\n    [ngClass]=\"{ 'c8y-help-drawer-block': isInit }\"\n    #docOutlet\n    data-cy=\"c8y-help--c8y-help-drawer-block\"\n  >\n    <div *ngIf=\"isLoading\">\n      <c8y-loading></c8y-loading>\n    </div>\n\n    <div *ngIf=\"!isLoading\">\n      <div class=\"d-flex\">\n        <i\n          [c8yIcon]=\"!hasError ? icon : 'unlink'\"\n          [ngClass]=\"{ 'text-warning': hasError, 'text-muted': !hasError }\"\n          class=\"c8y-icon-duocolor icon-48\"\n        ></i>\n        <div class=\"p-l-16 flex-grow\" *ngIf=\"!hasError\">\n          <div\n            class=\"alert alert-info m-b-16\"\n            *ngIf=\"\n              !helpService.isSupportedLanguage() &&\n              !showLangWarning &&\n              !helpService.isWarningAlertViewed\n            \"\n          >\n            <button\n              class=\"close\"\n              [attr.aria-label]=\"'Close' | translate\"\n              type=\"button\"\n              (click)=\"\n                showLangWarning = !showLangWarning;\n                helpService.isWarningAlertViewed = !helpService.isWarningAlertViewed\n              \"\n            >\n              <span aria-hidden=\"true\">\u00D7</span>\n              <span class=\"sr-only\">Close</span>\n            </button>\n            <p>\n              {{ 'Help content is only available in English.' | translate }}\n            </p>\n          </div>\n          <h4 class=\"text-bold text-primary p-t-16 m-b-16\">\n            {{ title }}\n          </h4>\n          <div id=\"helpContent\" class=\"help-content\" [innerHTML]=\"sectionContent\" data-cy=\"help--c8y-help-content\"></div>\n        </div>\n\n        <div class=\"p-l-16 p-t-16 flex-grow\" *ngIf=\"hasError\">\n          <h4 class=\"text-bold m-b-16\" translate>Content couldn't be loaded.</h4>\n          <div class=\"help-content\">\n            <p translate>Check internet connection or reload page.</p>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div\n    class=\"c8y-help-drawer-footer animated fadeIn\"\n    style=\"animation-delay: 0.35s\"\n    *ngIf=\"!isLoading && !hasError\"\n    data-cy=\"c8y-help--c8y-help-drawer-footer\"\n  >\n    <button\n      class=\"btn btn-default\"\n      type=\"button\"\n      [title]=\"'Close help' | translate\"\n      (click)=\"toggle()\"\n      [attr.aria-expanded]=\"!isCollapsed\"\n      aria-controls=\"collapseHelp\"\n      translate\n    >\n      Close\n    </button>\n    <a\n      data-cy=\"help--href-value\"\n      href=\"{{ hasError ? getUrl() : getUrl(src) }}\"\n      class=\"btn btn-primary\"\n      target=\"_blank\"\n      rel=\"noopener noreferrer\"\n    >\n      <span translate *ngIf=\"!hasError\">\n        Open the\n        <span>User guide`KEEP_ORIGINAL`</span>\n      </span>\n      <span translate *ngIf=\"hasError\">\n        Check the\n        <span>User guide`KEEP_ORIGINAL`</span>\n      </span>\n    </a>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LoadingComponent, selector: "c8y-loading" }, { kind: "directive", type: i1$a.CollapseDirective, selector: "[collapse]", inputs: ["display", "isAnimated", "collapse"], outputs: ["collapsed", "collapses", "expanded", "expands"], exportAs: ["bs-collapse"] }, { kind: "directive", type: i1$7.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "component", type: ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId"] }, { kind: "directive", type: ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit", "suppressDataOverriding"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: HelpComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-help', template: "<c8y-action-bar-item\n  [placement]=\"'right'\"\n  itemClass=\"pull-right m-l-8\"\n  [priority]=\"priority\"\n  *ngIf=\"!!(helpService.contextHelp | async)\"\n>\n  <button\n    class=\"btn-help\"\n    type=\"button\"\n    [attr.aria-label]=\"'About this page' | translate\"\n    data-cy=\"help--help-btn\"\n    tooltip=\"{{ 'About this page' | translate }}\"\n    [delay]=\"750\"\n    placement=\"left\"\n    container=\"body\"\n    [attr.aria-expanded]=\"!isCollapsed\"\n    aria-controls=\"collapseHelp\"\n    (click)=\"toggle()\"\n    c8yProductExperience\n    [actionName]=\"isCollapsed ? 'helpOpened' : 'helpClosed'\"\n    [actionData]=\"{ src: src }\"\n  ></button>\n</c8y-action-bar-item>\n\n<div\n  id=\"collapseHelp\"\n  class=\"c8y-help-drawer\"\n  [collapse]=\"isCollapsed\"\n  [isAnimated]=\"true\"\n  (collapsed)=\"onCollapsed()\"\n>\n  <div\n    [ngClass]=\"{ 'c8y-help-drawer-block': isInit }\"\n    #docOutlet\n    data-cy=\"c8y-help--c8y-help-drawer-block\"\n  >\n    <div *ngIf=\"isLoading\">\n      <c8y-loading></c8y-loading>\n    </div>\n\n    <div *ngIf=\"!isLoading\">\n      <div class=\"d-flex\">\n        <i\n          [c8yIcon]=\"!hasError ? icon : 'unlink'\"\n          [ngClass]=\"{ 'text-warning': hasError, 'text-muted': !hasError }\"\n          class=\"c8y-icon-duocolor icon-48\"\n        ></i>\n        <div class=\"p-l-16 flex-grow\" *ngIf=\"!hasError\">\n          <div\n            class=\"alert alert-info m-b-16\"\n            *ngIf=\"\n              !helpService.isSupportedLanguage() &&\n              !showLangWarning &&\n              !helpService.isWarningAlertViewed\n            \"\n          >\n            <button\n              class=\"close\"\n              [attr.aria-label]=\"'Close' | translate\"\n              type=\"button\"\n              (click)=\"\n                showLangWarning = !showLangWarning;\n                helpService.isWarningAlertViewed = !helpService.isWarningAlertViewed\n              \"\n            >\n              <span aria-hidden=\"true\">\u00D7</span>\n              <span class=\"sr-only\">Close</span>\n            </button>\n            <p>\n              {{ 'Help content is only available in English.' | translate }}\n            </p>\n          </div>\n          <h4 class=\"text-bold text-primary p-t-16 m-b-16\">\n            {{ title }}\n          </h4>\n          <div id=\"helpContent\" class=\"help-content\" [innerHTML]=\"sectionContent\" data-cy=\"help--c8y-help-content\"></div>\n        </div>\n\n        <div class=\"p-l-16 p-t-16 flex-grow\" *ngIf=\"hasError\">\n          <h4 class=\"text-bold m-b-16\" translate>Content couldn't be loaded.</h4>\n          <div class=\"help-content\">\n            <p translate>Check connection or reload page.</p>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div\n    class=\"c8y-help-drawer-footer animated fadeIn\"\n    style=\"animation-delay: 0.35s\"\n    *ngIf=\"!isLoading && !hasError\"\n    data-cy=\"c8y-help--c8y-help-drawer-footer\"\n  >\n    <button\n      class=\"btn btn-default\"\n      type=\"button\"\n      [title]=\"'Close help' | translate\"\n      (click)=\"toggle()\"\n      [attr.aria-expanded]=\"!isCollapsed\"\n      aria-controls=\"collapseHelp\"\n      translate\n    >\n      Close\n    </button>\n    <a\n      data-cy=\"help--href-value\"\n      href=\"{{ hasError ? getUrl() : getUrl(src) }}\"\n      class=\"btn btn-primary\"\n      target=\"_blank\"\n      rel=\"noopener noreferrer\"\n    >\n      <span translate *ngIf=\"!hasError\">\n        Open the\n        <span>User guide`KEEP_ORIGINAL`</span>\n      </span>\n      <span translate *ngIf=\"hasError\">\n        Check the\n        <span>User guide`KEEP_ORIGINAL`</span>\n      </span>\n    </a>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'c8y-help', template: "<c8y-action-bar-item\n  [placement]=\"'right'\"\n  itemClass=\"pull-right m-l-8\"\n  [priority]=\"priority\"\n  *ngIf=\"!!(helpService.contextHelp | async)\"\n>\n  <button\n    class=\"btn-help\"\n    type=\"button\"\n    [attr.aria-label]=\"'About this page' | translate\"\n    data-cy=\"help--help-btn\"\n    tooltip=\"{{ 'About this page' | translate }}\"\n    [delay]=\"750\"\n    placement=\"left\"\n    container=\"body\"\n    [attr.aria-expanded]=\"!isCollapsed\"\n    aria-controls=\"collapseHelp\"\n    (click)=\"toggle()\"\n    c8yProductExperience\n    [actionName]=\"isCollapsed ? 'helpOpened' : 'helpClosed'\"\n    [actionData]=\"{ src: src }\"\n  ></button>\n</c8y-action-bar-item>\n\n<div\n  id=\"collapseHelp\"\n  class=\"c8y-help-drawer\"\n  [collapse]=\"isCollapsed\"\n  [isAnimated]=\"true\"\n  (collapsed)=\"onCollapsed()\"\n>\n  <div\n    [ngClass]=\"{ 'c8y-help-drawer-block': isInit }\"\n    #docOutlet\n    data-cy=\"c8y-help--c8y-help-drawer-block\"\n  >\n    <div *ngIf=\"isLoading\">\n      <c8y-loading></c8y-loading>\n    </div>\n\n    <div *ngIf=\"!isLoading\">\n      <div class=\"d-flex\">\n        <i\n          [c8yIcon]=\"!hasError ? icon : 'unlink'\"\n          [ngClass]=\"{ 'text-warning': hasError, 'text-muted': !hasError }\"\n          class=\"c8y-icon-duocolor icon-48\"\n        ></i>\n        <div class=\"p-l-16 flex-grow\" *ngIf=\"!hasError\">\n          <div\n            class=\"alert alert-info m-b-16\"\n            *ngIf=\"\n              !helpService.isSupportedLanguage() &&\n              !showLangWarning &&\n              !helpService.isWarningAlertViewed\n            \"\n          >\n            <button\n              class=\"close\"\n              [attr.aria-label]=\"'Close' | translate\"\n              type=\"button\"\n              (click)=\"\n                showLangWarning = !showLangWarning;\n                helpService.isWarningAlertViewed = !helpService.isWarningAlertViewed\n              \"\n            >\n              <span aria-hidden=\"true\">\u00D7</span>\n              <span class=\"sr-only\">Close</span>\n            </button>\n            <p>\n              {{ 'Help content is only available in English.' | translate }}\n            </p>\n          </div>\n          <h4 class=\"text-bold text-primary p-t-16 m-b-16\">\n            {{ title }}\n          </h4>\n          <div id=\"helpContent\" class=\"help-content\" [innerHTML]=\"sectionContent\" data-cy=\"help--c8y-help-content\"></div>\n        </div>\n\n        <div class=\"p-l-16 p-t-16 flex-grow\" *ngIf=\"hasError\">\n          <h4 class=\"text-bold m-b-16\" translate>Content couldn't be loaded.</h4>\n          <div class=\"help-content\">\n            <p translate>Check internet connection or reload page.</p>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div\n    class=\"c8y-help-drawer-footer animated fadeIn\"\n    style=\"animation-delay: 0.35s\"\n    *ngIf=\"!isLoading && !hasError\"\n    data-cy=\"c8y-help--c8y-help-drawer-footer\"\n  >\n    <button\n      class=\"btn btn-default\"\n      type=\"button\"\n      [title]=\"'Close help' | translate\"\n      (click)=\"toggle()\"\n      [attr.aria-expanded]=\"!isCollapsed\"\n      aria-controls=\"collapseHelp\"\n      translate\n    >\n      Close\n    </button>\n    <a\n      data-cy=\"help--href-value\"\n      href=\"{{ hasError ? getUrl() : getUrl(src) }}\"\n      class=\"btn btn-primary\"\n      target=\"_blank\"\n      rel=\"noopener noreferrer\"\n    >\n      <span translate *ngIf=\"!hasError\">\n        Open the\n        <span>User guide`KEEP_ORIGINAL`</span>\n      </span>\n      <span translate *ngIf=\"hasError\">\n        Check the\n        <span>User guide`KEEP_ORIGINAL`</span>\n      </span>\n    </a>\n  </div>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: DocsService }, { type: HelpService }]; }, propDecorators: { src: [{
                 type: Input
             }], isCollapsed: [{