hslayers-ng
Version:
HSLayers-NG mapping library
139 lines (133 loc) • 30.3 kB
JavaScript
import * as i0 from '@angular/core';
import { inject, ElementRef, HostBinding, Directive, EventEmitter, Output, Input, Component } from '@angular/core';
import * as i1 from '@angular/forms';
import { FormsModule } from '@angular/forms';
import { NgClass, SlicePipe } from '@angular/common';
import { TranslatePipe } from '@ngx-translate/core';
import { HsUrlWmsService, HsAddDataUrlService, HsAddDataService, HsAddDataCommonService } from 'hslayers-ng/services/add-data';
import { HsLanguageService } from 'hslayers-ng/services/language';
import { isOverflown } from 'hslayers-ng/services/utils';
class WmsLayerHighlightDirective {
constructor() {
this.elRef = inject(ElementRef);
this.highlighted = false;
setTimeout(() => {
this.highlighted = isOverflown(this.elRef.nativeElement);
}, 500);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WmsLayerHighlightDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.3", type: WmsLayerHighlightDirective, isStandalone: true, selector: "[hsWmsLayerHighlight]", host: { properties: { "class.hs-wms-highlighted": "this.highlighted" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WmsLayerHighlightDirective, decorators: [{
type: Directive,
args: [{
selector: '[hsWmsLayerHighlight]',
standalone: true,
}]
}], ctorParameters: () => [], propDecorators: { highlighted: [{
type: HostBinding,
args: ['class.hs-wms-highlighted']
}] } });
class HsNestedLayersTableComponent {
constructor() {
this.hsUrlWmsService = inject(HsUrlWmsService);
this.layerChecked = new EventEmitter();
}
checked(layer) {
this.layerChecked.emit(layer);
}
isArray(maybeArray) {
return Array.isArray(maybeArray);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: HsNestedLayersTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: HsNestedLayersTableComponent, isStandalone: true, selector: "hs-nested-layers-table", inputs: { layers: "layers" }, outputs: { layerChecked: "layerChecked" }, ngImport: i0, template: "<table class=\"table table-sm table-striped table-bordered hs-url-table\" style=\"width: 100%\">\n @for (sub_layer of layers; track sub_layer['Name']) {\n <tbody>\n <tr>\n <td style=\"width: 1em\"><input type=\"checkbox\" [(ngModel)]=\"sub_layer.checked\" (change)=\"checked(sub_layer)\"\n [ngModelOptions]=\"{standalone: true}\" style=\"cursor: pointer;\" /></td>\n <td hsWmsLayerHighlight class=\"text-truncate\" style=\"max-width: 12em;\"\n [title]=\"'Title: ' + sub_layer.Title + '\\nName: ' + sub_layer.Name\"\n (click)=\"hsUrlWmsService.expandTableRow($event)\"><span>{{sub_layer.Title}}</span>\n </td>\n <!-- <td class=\"text-truncate\" style=\"width: 30%; padding-left: 1em\">{{sub_layer.Name}}</td> -->\n <td hsWmsLayerHighlight class=\"text-truncate\" style=\"max-width: 10.875em;width: 30%;\" [title]=\"sub_layer.Abstract\"\n (click)=\"hsUrlWmsService.expandTableRow($event)\">{{sub_layer.Abstract}}\n </td>\n </tr>\n @if (sub_layer.Style?.length > 1 && sub_layer.checked) {\n <tr>\n <td colspan=\"3\">\n <div class=\"d-flex align-items-baseline px-2 w-100\">\n <div class=\"d-flex align-items-baseline\" style=\"flex-grow: 1;\">\n <label class=\"control-label\">{{'COMMON.style' | translate }}:</label>\n <select class=\"form-control form-select-sm form-select\" [(ngModel)]=\"sub_layer.styleSelected\"\n [ngModelOptions]=\"{standalone: true}\">\n @for (style of sub_layer.Style; track style) {\n <option>{{style.Name}}</option>\n }\n </select>\n </div>\n </div>\n </td>\n </tr>\n }\n @if (!!sub_layer.Dimension) {\n <tr>\n <td colspan=\"3\">\n <form class=\"form\">\n @for (dimension of sub_layer.Dimension; track dimension) {\n <div class=\"form-group\">\n @if (isArray(dimension.values)) {\n <!-- TODO: Remove function call from template -->\n <label class=\"control-label\">{{dimension.name}}:</label>\n <div>\n <select class=\"form-control form-select\" [(ngModel)]=\"dimension.value\"\n [ngModelOptions]=\"{standalone: true}\">\n @for (dimension_value of dimension.values; track dimension_value) {\n <option [value]=\"dimension_value\">\n {{dimension_value}}</option>\n }\n </select>\n </div>\n } @else {\n <span class=\"text-muted\">{{'ADDLAYERS.unknownDimesion'\n | translate }}: {{dimension.name}}</span>\n }\n </div>\n }\n </form>\n </td>\n </tr>\n }\n @if (!!sub_layer.Layer) {\n <tr>\n <td colspan=\"3\" style=\"padding-left: 1em\">\n <hs-nested-layers-table style=\"display: block;\" (layerChecked)=\"checked($event)\"\n [layers]=\"sub_layer.Layer\"></hs-nested-layers-table>\n </td>\n </tr>\n }\n </tbody>\n }\n</table>\n", dependencies: [{ kind: "component", type: HsNestedLayersTableComponent, selector: "hs-nested-layers-table", inputs: ["layers"], outputs: ["layerChecked"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: WmsLayerHighlightDirective, selector: "[hsWmsLayerHighlight]" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: HsNestedLayersTableComponent, decorators: [{
type: Component,
args: [{ selector: 'hs-nested-layers-table', imports: [FormsModule, TranslatePipe, WmsLayerHighlightDirective], template: "<table class=\"table table-sm table-striped table-bordered hs-url-table\" style=\"width: 100%\">\n @for (sub_layer of layers; track sub_layer['Name']) {\n <tbody>\n <tr>\n <td style=\"width: 1em\"><input type=\"checkbox\" [(ngModel)]=\"sub_layer.checked\" (change)=\"checked(sub_layer)\"\n [ngModelOptions]=\"{standalone: true}\" style=\"cursor: pointer;\" /></td>\n <td hsWmsLayerHighlight class=\"text-truncate\" style=\"max-width: 12em;\"\n [title]=\"'Title: ' + sub_layer.Title + '\\nName: ' + sub_layer.Name\"\n (click)=\"hsUrlWmsService.expandTableRow($event)\"><span>{{sub_layer.Title}}</span>\n </td>\n <!-- <td class=\"text-truncate\" style=\"width: 30%; padding-left: 1em\">{{sub_layer.Name}}</td> -->\n <td hsWmsLayerHighlight class=\"text-truncate\" style=\"max-width: 10.875em;width: 30%;\" [title]=\"sub_layer.Abstract\"\n (click)=\"hsUrlWmsService.expandTableRow($event)\">{{sub_layer.Abstract}}\n </td>\n </tr>\n @if (sub_layer.Style?.length > 1 && sub_layer.checked) {\n <tr>\n <td colspan=\"3\">\n <div class=\"d-flex align-items-baseline px-2 w-100\">\n <div class=\"d-flex align-items-baseline\" style=\"flex-grow: 1;\">\n <label class=\"control-label\">{{'COMMON.style' | translate }}:</label>\n <select class=\"form-control form-select-sm form-select\" [(ngModel)]=\"sub_layer.styleSelected\"\n [ngModelOptions]=\"{standalone: true}\">\n @for (style of sub_layer.Style; track style) {\n <option>{{style.Name}}</option>\n }\n </select>\n </div>\n </div>\n </td>\n </tr>\n }\n @if (!!sub_layer.Dimension) {\n <tr>\n <td colspan=\"3\">\n <form class=\"form\">\n @for (dimension of sub_layer.Dimension; track dimension) {\n <div class=\"form-group\">\n @if (isArray(dimension.values)) {\n <!-- TODO: Remove function call from template -->\n <label class=\"control-label\">{{dimension.name}}:</label>\n <div>\n <select class=\"form-control form-select\" [(ngModel)]=\"dimension.value\"\n [ngModelOptions]=\"{standalone: true}\">\n @for (dimension_value of dimension.values; track dimension_value) {\n <option [value]=\"dimension_value\">\n {{dimension_value}}</option>\n }\n </select>\n </div>\n } @else {\n <span class=\"text-muted\">{{'ADDLAYERS.unknownDimesion'\n | translate }}: {{dimension.name}}</span>\n }\n </div>\n }\n </form>\n </td>\n </tr>\n }\n @if (!!sub_layer.Layer) {\n <tr>\n <td colspan=\"3\" style=\"padding-left: 1em\">\n <hs-nested-layers-table style=\"display: block;\" (layerChecked)=\"checked($event)\"\n [layers]=\"sub_layer.Layer\"></hs-nested-layers-table>\n </td>\n </tr>\n }\n </tbody>\n }\n</table>\n" }]
}], propDecorators: { layers: [{
type: Input
}], layerChecked: [{
type: Output
}] } });
class HsLayerTableComponent {
constructor() {
this.hsAddDataUrlService = inject(HsAddDataUrlService);
this.hsAddDataService = inject(HsAddDataService);
this.hsLanguageService = inject(HsLanguageService);
this.hsUrlWmsService = inject(HsUrlWmsService);
this.hsAddDataCommonService = inject(HsAddDataCommonService);
this.checkedSubLayers = {};
this.limitShown = 100;
}
ngAfterContentInit() {
this.data = this.injectedService.data;
this.getDimensionValues = this.hsAddDataCommonService.getDimensionValues;
}
reachedLimit() {
if (this.data.layers?.length > this.limitShown ||
this.data.services?.length > this.limitShown) {
return true;
}
return false;
}
/**
* Checked property event handler
*/
changed(whichArray, e, layer) {
this.hsAddDataUrlService.searchForChecked(this.data[whichArray]);
/**
* If possible calls side effect handling function defined on type service
* e.g. query getFeature-hits for WFS
*/
if (this.injectedService.tableLayerChecked) {
this.injectedService.tableLayerChecked(e, layer);
}
}
/**
* Collapse ArcGIS MapServer expanded service. Used as a way to step back
*/
collapseServices() {
if (this.injectedService.collapseServices) {
this.injectedService.collapseServices();
}
}
async expandService(service) {
if (this.injectedService.expandService) {
this.injectedService.expandService(service);
if (this.injectedService.isImageService &&
this.injectedService.isImageService()) {
const layers = await this.injectedService.getLayers();
this.injectedService.addLayers(layers);
}
}
}
searchForChecked(layer) {
this.checkedSubLayers[layer.Name] = layer.checked;
this.hsAddDataUrlService.addingAllowed = Object.values(this.checkedSubLayers).some((value) => value === true);
}
getLimitTextTranslation() {
return this.hsLanguageService.getTranslation('ADDDATA.CATALOGUE.showingSubset', { limitShown: this.limitShown, total: this.data.layers.length });
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: HsLayerTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: HsLayerTableComponent, isStandalone: true, selector: "hs-layer-table", inputs: { injectedService: "injectedService", type: "type" }, ngImport: i0, template: "<div>\n @if (type === \"wms\") {\n <table class=\"table table-sm table-striped table-bordered hs-url-table\">\n <thead class=\"bg-secondary text-light\">\n <th style=\"width: 1.5em\"> </th>\n <th>{{ \"COMMON.title\" | translate }}</th>\n <!-- <th style=\"width:30%\">{{'COMMON.name' | translate }}</th> -->\n <th>{{ \"COMMON.abstract\" | translate }}</th>\n </thead>\n @for ( layer of data.layers | slice: 0 : limitShown; track layer.Name ) {\n <tbody>\n <tr>\n <td [attr.rowspan]=\"layer.Style?.length ? 3 : 2\" [ngClass]=\"{ 'align-middle': !layer.Layer }\">\n <input type=\"checkbox\" class=\"checkbox-lg\" [(ngModel)]=\"layer.checked\" name=\"layer\" style=\"cursor: pointer\"\n (change)=\"searchForChecked(layer)\" />\n </td>\n <td hsWmsLayerHighlight style=\"max-width: 25.375em\" class=\"text-truncate\"\n [title]=\"'Title: ' + layer.Title + '\\nName: ' + layer.Name\" (click)=\"hsUrlWmsService.expandTableRow($event)\">\n <span>{{ layer.Title }}</span>\n </td>\n <!-- <td style=\"max-width: 13.75em\" class=\"text-truncate\" [title]=\"layer.Name\">{{layer.Name}}</td> -->\n <td hsWmsLayerHighlight style=\"max-width: 10.875em; width: 30%\" class=\"text-truncate\" [title]=\"layer.Abstract\"\n (click)=\"hsUrlWmsService.expandTableRow($event)\">\n {{ layer.Abstract }}\n </td>\n </tr>\n @if (layer.Style?.length > 1 && layer.checked) {\n <tr>\n <td colspan=\"3\">\n <div class=\"d-flex align-items-baseline px-2 w-100\">\n <div class=\"d-flex align-items-baseline\" style=\"flex-grow: 1\">\n <label class=\"control-label\">{{ \"COMMON.style\" | translate }}:</label>\n <select class=\"form-control form-select-sm form-select\" [(ngModel)]=\"layer.styleSelected\"\n [ngModelOptions]=\"{ standalone: true }\">\n @for (style of layer.Style; track $index) {\n <option [ngValue]=\"style\">{{ style.Name }}</option>\n }\n </select>\n </div>\n </div>\n </td>\n </tr>\n }\n <tr [hidden]=\"!layer.Layer\">\n <td colspan=\"3\" style=\"padding-left: 1em\">\n <hs-nested-layers-table style=\"display: block\" [layers]=\"layer.Layer\"\n (layerChecked)=\"searchForChecked($event)\">\n </hs-nested-layers-table>\n </td>\n </tr>\n </tbody>\n }\n </table>\n } @else {\n <table class=\"table table-sm table-striped table-bordered\">\n <thead>\n <th class=\"border-0\" style=\"width: 1em\"> </th>\n <div class=\"d-flex justify-content-between\">\n <th class=\"border-0\">{{ \"COMMON.name\" | translate }}</th>\n @if (type === \"arcgis\" && data.serviceExpanded) {\n <button type=\"button\" class=\"btn btn-sm px-2 border-0 d-flex align-items-baseline gap-1\" (click)=\"collapseServices()\"\n [title]=\"'COMMON.back' | translate\">\n <i class=\"fa-solid fa-chevron-left text-black-50\"></i>\n <span class=\"text-black-50 fw-bold\">{{\n \"COMMON.back\" | translate\n }}</span>\n </button>\n }\n </div>\n </thead>\n @for ( service of data.services; track service.name ) {\n <tbody>\n <tr>\n <td>\n <input class=\"checkbox-lg\" type=\"checkbox\" name=\"service\" (change)=\"changed('services', $event, service)\"\n style=\"cursor: pointer\" [(ngModel)]=\"service.checked\" />\n </td>\n <td (click)=\"expandService(service)\" data-toggle=\"tooltip\"\n [title]=\"'ADDDATA.requestServiceLayers' | translate\" style=\"cursor: pointer\">\n @if(service.icon){\n <i class=\"fa-solid px-1\" [ngClass]=\"service.icon\" [title]=\"service.type\"></i>\n }\n {{ service.name }}\n <span style=\"font-size: x-small\"><i class=\"fa-solid fa-chevron-right\"></i></span>\n </td>\n </tr>\n </tbody>\n }\n @for ( layer of data.layers; track layer[data.table.trackBy] ) {\n <tbody>\n <tr>\n <td>\n <input class=\"checkbox-lg\" type=\"checkbox\" name=\"layer\" style=\"cursor: pointer\"\n (change)=\"changed('layers', $event, layer)\" [(ngModel)]=\"layer.checked\" />\n </td>\n <td hsWmsLayerHighlight (click)=\"hsUrlWmsService.expandTableRow($event)\" class=\"text-truncate position-relative\"\n style=\"max-width: 45ch\">\n @if(layer.icon){\n <i class=\"fa-solid px-1\" [ngClass]=\"layer.icon\"></i>\n }\n <span>{{ layer[data.table.nameProperty] }}</span>\n <span class=\"hs-loader hs-loader-dark position-absolute end-0 bottom-0 me-3\" [hidden]=\"!layer.loading\"></span>\n @if (layer.featureCount === -9999) {\n <span style=\"transform: translateY(50%)\" [title]=\"'ADDLAYERS.WFS.featureCountError' | translate\"\n class=\"align-items-center bottom-50 d-flex end-0 h-75 me-3 p-2 position-absolute rounded-1 text-bg-warning\">i</span>\n }\n @if (layer.checked && type === \"wmts\") {\n <div class=\"d-flex flex-row justify-content-end align-items-baseline mt-1\">\n {{ \"COMMON.addAs\" | translate }}\n <div class=\"btn-group ms-2\">\n <button type=\"button\" class=\"btn btn-sm btn-light btn-outline-secondary\" (click)=\"layer.base = true\"\n [ngClass]=\"{ active: layer.base }\">\n {{ \"COMPOSITONKEYWORDS.Basemap\" | translate }}\n </button>\n <button type=\"button\" class=\"btn btn-sm btn-light btn-outline-secondary\" (click)=\"layer.base = false\"\n [ngClass]=\"{ active: !layer.base }\">\n {{ \"COMMON.layer\" | translate }}\n </button>\n </div>\n </div>\n }\n @if ( layer.featureCount > 1000 && layer.checked && type === \"wfs\" ) {\n <div class=\"alert alert-primary d-flex m-1\" role=\"alert\">\n <div class=\"w-100\">\n <p class=\"mb-0\" style=\"white-space: normal\" [hidden]=\"!layer.limitFeatureCount\">\n {{ \"ADDLAYERS.WFS.selectedLayerContains\" | translate }}\n {{ layer.featureCount }}\n {{ \"ADDLAYERS.WFS.loadingToManyAtOnce\" | translate }}\n </p>\n </div>\n </div>\n }\n </td>\n </tr>\n </tbody>\n }\n </table>\n }\n @if (type === \"wms\" && reachedLimit()) {\n <div class=\"d-flex justify-content-around align-items-center m-3\">\n <span> {{ getLimitTextTranslation() }}</span>\n <div class=\"btn-group ms-2\">\n <button type=\"button\" class=\"btn btn-sm btn-light btn-outline-secondary\" (click)=\"limitShown = limitShown + 100\">\n {{ \"ADDDATA.CATALOGUE.showNext100\" | translate }}\n </button>\n <button type=\"button\" class=\"btn btn-sm btn-light btn-outline-secondary\"\n (click)=\"limitShown = data.layers.length\">\n {{ \"ADDDATA.CATALOGUE.showAll\" | translate }}\n </button>\n </div>\n </div>\n }\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: HsNestedLayersTableComponent, selector: "hs-nested-layers-table", inputs: ["layers"], outputs: ["layerChecked"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: SlicePipe, name: "slice" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: HsLayerTableComponent, decorators: [{
type: Component,
args: [{ selector: 'hs-layer-table', imports: [
TranslatePipe,
FormsModule,
SlicePipe,
NgClass,
HsNestedLayersTableComponent,
], template: "<div>\n @if (type === \"wms\") {\n <table class=\"table table-sm table-striped table-bordered hs-url-table\">\n <thead class=\"bg-secondary text-light\">\n <th style=\"width: 1.5em\"> </th>\n <th>{{ \"COMMON.title\" | translate }}</th>\n <!-- <th style=\"width:30%\">{{'COMMON.name' | translate }}</th> -->\n <th>{{ \"COMMON.abstract\" | translate }}</th>\n </thead>\n @for ( layer of data.layers | slice: 0 : limitShown; track layer.Name ) {\n <tbody>\n <tr>\n <td [attr.rowspan]=\"layer.Style?.length ? 3 : 2\" [ngClass]=\"{ 'align-middle': !layer.Layer }\">\n <input type=\"checkbox\" class=\"checkbox-lg\" [(ngModel)]=\"layer.checked\" name=\"layer\" style=\"cursor: pointer\"\n (change)=\"searchForChecked(layer)\" />\n </td>\n <td hsWmsLayerHighlight style=\"max-width: 25.375em\" class=\"text-truncate\"\n [title]=\"'Title: ' + layer.Title + '\\nName: ' + layer.Name\" (click)=\"hsUrlWmsService.expandTableRow($event)\">\n <span>{{ layer.Title }}</span>\n </td>\n <!-- <td style=\"max-width: 13.75em\" class=\"text-truncate\" [title]=\"layer.Name\">{{layer.Name}}</td> -->\n <td hsWmsLayerHighlight style=\"max-width: 10.875em; width: 30%\" class=\"text-truncate\" [title]=\"layer.Abstract\"\n (click)=\"hsUrlWmsService.expandTableRow($event)\">\n {{ layer.Abstract }}\n </td>\n </tr>\n @if (layer.Style?.length > 1 && layer.checked) {\n <tr>\n <td colspan=\"3\">\n <div class=\"d-flex align-items-baseline px-2 w-100\">\n <div class=\"d-flex align-items-baseline\" style=\"flex-grow: 1\">\n <label class=\"control-label\">{{ \"COMMON.style\" | translate }}:</label>\n <select class=\"form-control form-select-sm form-select\" [(ngModel)]=\"layer.styleSelected\"\n [ngModelOptions]=\"{ standalone: true }\">\n @for (style of layer.Style; track $index) {\n <option [ngValue]=\"style\">{{ style.Name }}</option>\n }\n </select>\n </div>\n </div>\n </td>\n </tr>\n }\n <tr [hidden]=\"!layer.Layer\">\n <td colspan=\"3\" style=\"padding-left: 1em\">\n <hs-nested-layers-table style=\"display: block\" [layers]=\"layer.Layer\"\n (layerChecked)=\"searchForChecked($event)\">\n </hs-nested-layers-table>\n </td>\n </tr>\n </tbody>\n }\n </table>\n } @else {\n <table class=\"table table-sm table-striped table-bordered\">\n <thead>\n <th class=\"border-0\" style=\"width: 1em\"> </th>\n <div class=\"d-flex justify-content-between\">\n <th class=\"border-0\">{{ \"COMMON.name\" | translate }}</th>\n @if (type === \"arcgis\" && data.serviceExpanded) {\n <button type=\"button\" class=\"btn btn-sm px-2 border-0 d-flex align-items-baseline gap-1\" (click)=\"collapseServices()\"\n [title]=\"'COMMON.back' | translate\">\n <i class=\"fa-solid fa-chevron-left text-black-50\"></i>\n <span class=\"text-black-50 fw-bold\">{{\n \"COMMON.back\" | translate\n }}</span>\n </button>\n }\n </div>\n </thead>\n @for ( service of data.services; track service.name ) {\n <tbody>\n <tr>\n <td>\n <input class=\"checkbox-lg\" type=\"checkbox\" name=\"service\" (change)=\"changed('services', $event, service)\"\n style=\"cursor: pointer\" [(ngModel)]=\"service.checked\" />\n </td>\n <td (click)=\"expandService(service)\" data-toggle=\"tooltip\"\n [title]=\"'ADDDATA.requestServiceLayers' | translate\" style=\"cursor: pointer\">\n @if(service.icon){\n <i class=\"fa-solid px-1\" [ngClass]=\"service.icon\" [title]=\"service.type\"></i>\n }\n {{ service.name }}\n <span style=\"font-size: x-small\"><i class=\"fa-solid fa-chevron-right\"></i></span>\n </td>\n </tr>\n </tbody>\n }\n @for ( layer of data.layers; track layer[data.table.trackBy] ) {\n <tbody>\n <tr>\n <td>\n <input class=\"checkbox-lg\" type=\"checkbox\" name=\"layer\" style=\"cursor: pointer\"\n (change)=\"changed('layers', $event, layer)\" [(ngModel)]=\"layer.checked\" />\n </td>\n <td hsWmsLayerHighlight (click)=\"hsUrlWmsService.expandTableRow($event)\" class=\"text-truncate position-relative\"\n style=\"max-width: 45ch\">\n @if(layer.icon){\n <i class=\"fa-solid px-1\" [ngClass]=\"layer.icon\"></i>\n }\n <span>{{ layer[data.table.nameProperty] }}</span>\n <span class=\"hs-loader hs-loader-dark position-absolute end-0 bottom-0 me-3\" [hidden]=\"!layer.loading\"></span>\n @if (layer.featureCount === -9999) {\n <span style=\"transform: translateY(50%)\" [title]=\"'ADDLAYERS.WFS.featureCountError' | translate\"\n class=\"align-items-center bottom-50 d-flex end-0 h-75 me-3 p-2 position-absolute rounded-1 text-bg-warning\">i</span>\n }\n @if (layer.checked && type === \"wmts\") {\n <div class=\"d-flex flex-row justify-content-end align-items-baseline mt-1\">\n {{ \"COMMON.addAs\" | translate }}\n <div class=\"btn-group ms-2\">\n <button type=\"button\" class=\"btn btn-sm btn-light btn-outline-secondary\" (click)=\"layer.base = true\"\n [ngClass]=\"{ active: layer.base }\">\n {{ \"COMPOSITONKEYWORDS.Basemap\" | translate }}\n </button>\n <button type=\"button\" class=\"btn btn-sm btn-light btn-outline-secondary\" (click)=\"layer.base = false\"\n [ngClass]=\"{ active: !layer.base }\">\n {{ \"COMMON.layer\" | translate }}\n </button>\n </div>\n </div>\n }\n @if ( layer.featureCount > 1000 && layer.checked && type === \"wfs\" ) {\n <div class=\"alert alert-primary d-flex m-1\" role=\"alert\">\n <div class=\"w-100\">\n <p class=\"mb-0\" style=\"white-space: normal\" [hidden]=\"!layer.limitFeatureCount\">\n {{ \"ADDLAYERS.WFS.selectedLayerContains\" | translate }}\n {{ layer.featureCount }}\n {{ \"ADDLAYERS.WFS.loadingToManyAtOnce\" | translate }}\n </p>\n </div>\n </div>\n }\n </td>\n </tr>\n </tbody>\n }\n </table>\n }\n @if (type === \"wms\" && reachedLimit()) {\n <div class=\"d-flex justify-content-around align-items-center m-3\">\n <span> {{ getLimitTextTranslation() }}</span>\n <div class=\"btn-group ms-2\">\n <button type=\"button\" class=\"btn btn-sm btn-light btn-outline-secondary\" (click)=\"limitShown = limitShown + 100\">\n {{ \"ADDDATA.CATALOGUE.showNext100\" | translate }}\n </button>\n <button type=\"button\" class=\"btn btn-sm btn-light btn-outline-secondary\"\n (click)=\"limitShown = data.layers.length\">\n {{ \"ADDDATA.CATALOGUE.showAll\" | translate }}\n </button>\n </div>\n </div>\n }\n</div>\n" }]
}], propDecorators: { injectedService: [{
type: Input
}], type: [{
type: Input
}] } });
/**
* Generated bundle index. Do not edit.
*/
export { HsLayerTableComponent, HsNestedLayersTableComponent, WmsLayerHighlightDirective };
//# sourceMappingURL=hslayers-ng-common-layer-table.mjs.map