⬆️ upgrade HSL to develop version

angular.json

@@ -36,6 +36,9 @@
             ],
             "preserveSymlinks": true,
             "styles": [
+              "./node_modules/ol/ol.css",
+              "./node_modules/hslayers-ng/src/css/hslayers-bootstrap.scss",
+              "./node_modules/hslayers-ng/src/css/whhg-font/css/whhg.css"
             ],
             "scripts": [],
             "vendorChunk": true,

package.json

@@ -1,7 +1,7 @@
 {
   "name": "rural-attractiveness-cz",
   "version": "0.2.2",
-  "description": "Rural attractiveness aplication",
+  "description": "Rural attractiveness application",
   "main": "build/index.html",
   "scripts": {
     "build": "ng build --configuration production",
@@ -36,14 +36,14 @@
     "@ng-bootstrap/ng-bootstrap": "^10.0.0",
     "@ngx-translate/core": "^13.0.0",
     "@ngx-translate/http-loader": "^6.0.0",
-    "bootstrap": "^4.5.3",
+    "bootstrap": "^5.1.3",
     "csvtojson": "^2.0.10",
     "dayjs": "^1.10.7",
     "deepmerge": "^4.2.2",
-    "geostyler-openlayers-parser": "^2.5.0",
-    "geostyler-sld-parser": "^2.5.0",
-    "geostyler-style": "^4.0.3",
-    "hslayers-ng": "^6.1.0",
+    "geostyler-openlayers-parser": "^3.0.0",
+    "geostyler-sld-parser": "^3.0.1",
+    "geostyler-style": "^5.0.0",
+    "hslayers-ng": "https://gitpkg.now.sh/hslayers/hslayers-ng/projects/hslayers?develop",
     "hsv2rgb": "^1.1.0",
     "http-server": "^0.12.3",
     "ngx-color": "^7.2.0",

src/adjuster/adjuster-loader.component.html

@@ -4,7 +4,7 @@
     <h1 [hidden]="!adjusterService.isCalculatingRAI()">{{'ADJUSTER.calcAttractivity' | translate}}</h1>
     <h1 [hidden]="!adjusterService.isClustering()">{{'ADJUSTER.calcClusters' | translate}}</h1>
     <div class="spinner-border spinner" role="status">
-      <span class="sr-only">{{'ADJUSTER.loading' | translate}}...</span>
+      <span class="visually-hidden">{{'ADJUSTER.loading' | translate}}...</span>
     </div>
   </div>
 </div>

src/adjuster/adjuster-loader.component.scss

@@ -1,7 +1,7 @@
-@import "~bootstrap/scss/_functions";
-@import "~bootstrap/scss/_variables";
-@import "~bootstrap/scss/_mixins";
-@import "~bootstrap/scss/spinners";
+@import "bootstrap/scss/functions";
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/mixins";
+@import "bootstrap/scss/spinners";
 
 .loader-splash {
   font-family: Arial, Helvetica, sans-serif; /* temporary workaround for HSL 2.x */

src/adjuster/adjuster.component.html

@@ -11,13 +11,13 @@
           <button type="button" class="btn btn-sm btn-light hs-lm-item-visibility"
             [ngClass]="adjusterService.allowIndex ? 'hs-checkmark' : 'hs-uncheckmark'"
             (click)="adjusterService.allowIndex = !adjusterService.allowIndex; $event.stopPropagation()"></button>
-          <label class="pl-2 text-secondary">{{'ADJUSTER.index' | translate}}</label>
+          <label class="ps-2 text-secondary">{{'ADJUSTER.index' | translate}}</label>
         </div>
         <div>
           <button type="button" class="btn btn-sm btn-light hs-lm-item-visibility"
             [ngClass]="adjusterService.allowClusters ? 'hs-checkmark' : 'hs-uncheckmark'"
             (click)="adjusterService.allowClusters = !adjusterService.allowClusters; $event.stopPropagation()"></button>
-            <label class="pl-2 text-secondary">{{'ADJUSTER.clusters' | translate}}</label>
+            <label class="ps-2 text-secondary">{{'ADJUSTER.clusters' | translate}}</label>
         </div>
       </div>
       <div class="text-warning pt-2" [hidden]="!noDataSelected() || errorMsg">{{'ADJUSTER.noDataSelectedMsg' | translate}}</div>
@@ -25,7 +25,7 @@
     </div>
     <div class="p-2 center-block" [hidden]="!adjusterService.allowClusters">
       <div class="pt-2 text-secondary">{{'ADJUSTER.numberOfClusters' | translate}}: {{adjusterService.numberOfClusters}}</div>
-      <input type="range" class="custom-range" [(ngModel)]="adjusterService.numberOfClusters" min="5" max="15" step="1">
+      <input type="range" class="form-range" [(ngModel)]="adjusterService.numberOfClusters" min="5" max="15" step="1">
     </div>
     <div *ngFor="let factor of adjusterService.factors">
       <pra-dataset-list [factor]="factor"></pra-dataset-list>

src/adjuster/adjuster.component.scss

@@ -1,7 +1,7 @@
-@import "~bootstrap/scss/_functions";
-@import "~bootstrap/scss/_variables";
-@import "~bootstrap/scss/_mixins";
-@import "~bootstrap/scss/custom-forms";
+@import "bootstrap/scss/functions";
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/mixins";
+@import "bootstrap/scss/forms";
 
 .center-block {
   text-align: center;
@@ -11,3 +11,11 @@
 .cursor-pointer {
   cursor: pointer;
 }
+
+.non-underlined-link {
+  text-decoration: none;
+}
+
+.non-underlined-link:hover {
+  text-decoration: underline;
+}

src/adjuster/dataset-list.component.html

@@ -3,11 +3,11 @@
     <span class="glyphicon cursor-pointer"
       [ngClass]="datasetlistVisible ? 'icon-chevron-down' : 'icon-chevron-right'"
       (click)="datasetlistVisible = !datasetlistVisible"></span>
-    <label class="pl-2 cursor-pointer" (click)="datasetlistVisible = !datasetlistVisible">{{factor.name}}</label>
+    <label class="ps-2 cursor-pointer" (click)="datasetlistVisible = !datasetlistVisible">{{factor.name}}</label>
   </div>
   <div class="p-2">{{(factor.weight * 100).toFixed(0)}}&nbsp;%</div>
 </div>
-<input type="range" class="custom-range" [(ngModel)]="factor.weight" min="0"
+<input type="range" class="form-range" [(ngModel)]="factor.weight" min="0"
   max="1.0" step="0.05">
 <div [hidden]="!datasetlistVisible">
   <div *ngFor="let dataset of factor.datasets">
@@ -18,10 +18,10 @@
     <!--span class="glyphicon cursor-pointer text-secondary"
       [ngClass]="descriptionVisible ? 'icon-chevron-down' : 'icon-chevron-right'"
       (click)="descriptionVisible = !descriptionVisible"></span-->
-    <!--label class="pl-2 cursor-pointer text-secondary"
+    <!--label class="ps-2 cursor-pointer text-secondary"
       (click)="descriptionVisible = !descriptionVisible">{{dataset.name}}</label-->
-      <label><a class="text-info" (click)="showMetadataWindow()">{{dataset.name}}</a></label>
-    <!--div class="p-2 mb-2 text-justify text-info" [hidden]="!descriptionVisible">
+      <label><a class="text-info non-underlined-link" (click)="showMetadataWindow()">{{dataset.name}}</a></label>
+    <!--div class="p-2 mb-2 text-info" [hidden]="!descriptionVisible">
       {{dataset.desc}}
     </div-->
   </div>

src/custom.scss

@@ -1,7 +1,7 @@
-@import "~bootstrap/scss/_functions";
-@import "~bootstrap/scss/_variables";
-@import "~bootstrap/scss/_mixins";
-@import "~bootstrap/scss/custom-forms";
+@import "bootstrap/scss/functions";
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/mixins";
+@import "bootstrap/scss/forms";
 
 
 html, body {

tsconfig.app.json

@@ -3,6 +3,11 @@
   "compilerOptions": {
     "outDir": "./out-tsc/app",
     "types": ["node"],
+    "paths": {
+      "hslayers-ng": [
+        "./node_modules/hslayers-ng/src/public-api.ts"
+      ]
+    }
   },
   "files": [
     "src/main.ts",
@@ -10,5 +15,11 @@
   ],
   "include": [
     "./**/*.d.ts",
+    "./node_modules/hslayers-ng/src/**/*.ts"
   ],
+  "exclude": [
+    "./node_modules/hslayers-ng/src/**/*.spec.ts",
+    "./node_modules/hslayers-ng/src/**/*.mock.ts",
+    "./node_modules/hslayers-ng/src/testing-utils.ts"
+  ]
 }

tsconfig.json

@@ -17,7 +17,6 @@
     "target": "es5",
   },
   "angularCompilerOptions": {
-    "strictTemplates": true,
     "enableResourceInlining": true,
     "fullTemplateTypeCheck": true,
     "strictInjectionParameters": true