Update vector tile layers, styling of layer control and simplify updates/usage

.github/workflows/package-pre-release.yml

@@ -42,7 +42,7 @@ jobs:
       - uses: actions/setup-node@v2
         with:
           node-version: 16
-      - uses: ./.github/actions/build-test
+      - uses: ./.github/actions/build
       - name: Archive dist artifacts
         uses: actions/upload-artifact@v2
         with:

CHANGELOG.md

@@ -11,6 +11,7 @@
   - Fix style: remove right border on tabsbody for layers inside a group.
 
 * **@dlr-eoc/layer-control:**
+  - Do not use `<label for>` with `<input id>` to prevent binding to the same element for duplicate IDs.
   - Do not change the group object binding in `layerentry-group` when creating a dynamic component from the group.
   - Do not change the layer object binding in `layerentry` when creating a dynamic component from the layer.
   - For Baselayers also show button to switch to the settings tab if layer has action [Issue #135](https://github.com/dlr-eoc/ukis-frontend-libraries/issues/135).
@@ -19,10 +20,14 @@
   - Add missing time value in function `setMapState` on state initialization [Issue #133](https://github.com/dlr-eoc/ukis-frontend-libraries/issues/133).
 
 * **@dlr-eoc/map-ol:**
+  - Update `TmsLayer` for vector tile style update.
+  - Update `Params` and `Source` for `baselayers`.
   - Replace deprecated ComponentFactory in `createDynamicPopupComponent` [angular 45263](https://github.com/angular/angular/issues/45263).
   - Set urls for vector tile layers after apply style to override them when tilejson is not provided. This is helpful to use `tms` services where no tilejson is available. Then set the url of the sourceId in your style file to `"url": ""` and add `"tiles": []`. This [skips the request](https://github.com/openlayers/ol-mapbox-style/blob/v8.2.1/src/util.js#L109) to tilejson.
 
 ### Breaking Changes
+- Package dependencies are set to allow Minor releases (which normally shouldn't break anything but can sometimes be) to simplify updates and usage when creating new apps.
+- Remove class `floating` from `clr-main-container`, this is now set on `content-container` e.g. in a route component `@HostBinding('class') class = 'content-container floating';`
 - Update angular from `^13.3.5` to `^14.0.2` automatic migrations are made by ng update and forms use types now.
 
 # [9.0.0](https://github.com/dlr-eoc/ukis-frontend-libraries/tree/v9.0.0) (2022-05-20) (Update dependencies and documentation)

DEVELOPMENT.md

@@ -153,7 +153,9 @@ There are two ways to include libraries in a frontend-project:
         }
         ...
     ```
-
+  - add `frontend-libraries` to `.gitignore` so you do not commit it unintentionally to your code.
+  - temporarily add all missing dependencies from `frontend-libraries` in your project's package.json (so you have all dependencies installed which the project needs for the transpilation)
+  - check that the tsconfig file from your project is compatible with that of `frontend-libraries`
 ### 2nd method: build libraries and project side by side
 - compile the library on changes and link the compiled library into the frontend-projects `node_modules/@dlr-eoc` directory. 
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ukis-frontend-libraries",
-  "version": "9.0.0",
+  "version": "10.0.0-alpha.0",
   "license": "Apache-2.0",
   "author": "Team UKIS",
   "bugs": {
@@ -43,23 +43,23 @@
     "@angular/platform-browser": "^14.1.1",
     "@angular/platform-browser-dynamic": "^14.1.1",
     "@angular/router": "^14.1.1",
-    "@cds/core": "~6.1.0",
-    "@clr/angular": "~13.7.0",
-    "@clr/icons": "~13.0.2",
-    "@clr/ui": "~13.7.0",
+    "@cds/core": "^6.1.0",
+    "@clr/angular": "^13.7.0",
+    "@clr/icons": "^13.0.2",
+    "@clr/ui": "^13.7.0",
     "@michaellangbein/jsonix": "3.0.1-SNAPSHOT-3",
     "@schematics/angular": "^14.1.1",
     "@webcomponents/webcomponentsjs": "^2.5.0",
     "delaunator": "^5.0.0",
     "luxon": "^2.5.0",
     "md5": "^2.2.1",
     "ogc-schemas": "^2.6.1",
-    "ol": "~6.14.1",
+    "ol": "^6.14.1",
     "ol-mapbox-style": "^8.2.1",
     "opensearch-browser": "^2.0.0-alpha.5",
     "parse5-html-rewriting-stream": "^6.0.1",
     "proj4": "^2.8.0",
-    "rxjs": "~6.6.7",
+    "rxjs": "^6.6.7",
     "three": "^0.137.5",
     "tslib": "^2.4.0",
     "w3c-schemas": "^1.4.0",
@@ -93,30 +93,30 @@
     "@compodoc/compodoc": "^1.1.19",
     "@types/cpx": "^1.5.2",
     "@types/geojson": "^7946.0.10",
-    "@types/jasmine": "~3.6.11",
-    "@types/jasminewd2": "~2.0.3",
+    "@types/jasmine": "^3.6.11",
+    "@types/jasminewd2": "^2.0.3",
     "@types/node": "^14.18.23",
     "@types/offscreencanvas": "^2019.7.0",
     "codelyzer": "^6.0.2",
     "cpx": "^1.5.0",
     "jasmine": "^3.99.0",
     "jasmine-core": "^3.99.1",
-    "jasmine-spec-reporter": "~5.0.0",
+    "jasmine-spec-reporter": "^5.0.0",
     "jsonc-parser": "^3.1.0",
     "karma": "^6.4.0",
-    "karma-chrome-launcher": "~3.1.1",
-    "karma-coverage": "~2.0.3",
-    "karma-jasmine": "~4.0.2",
+    "karma-chrome-launcher": "^3.1.1",
+    "karma-coverage": "^2.0.3",
+    "karma-jasmine": "^4.0.2",
     "karma-jasmine-html-reporter": "^1.6.0",
     "karma-junit-reporter": "^1.2.0",
     "minimist": "^1.2.0",
     "ng-packagr": "^14.1.0",
     "path-browserify": "^1.0.1",
-    "protractor": "~7.0.0",
+    "protractor": "^7.0.0",
     "terser": "^5.14.2",
-    "ts-node": "~8.3.0",
-    "tslint": "~6.1.0",
-    "typescript": "~4.6.4"
+    "ts-node": "^8.3.0",
+    "tslint": "^6.1.0",
+    "typescript": "^4.6.4"
   },
   "devDependenciesFromProjects": [
     "@compodoc/compodoc",

projects/core-ui/README.md

@@ -43,7 +43,7 @@ It uses the angular components from Clarity to get a responsive navigation.
 ### For an application with routes:
 Use a basic layout like the following, containing the router-outlet which then shows route components as the Clarity `content-container`.
 ```
-<clr-main-container [ngClass]="{'floating':ui.floating}">
+<clr-main-container>
   <ukis-global-alert *ngIf="ui.alert" [(alert)]="ui.alert"></ukis-global-alert>
   <ukis-global-progress *ngIf="ui.progress" [(progress)]="ui.progress"></ukis-global-progress>
   <ukis-header [ukis-title]="title">
@@ -56,7 +56,7 @@ Use a basic layout like the following, containing the router-outlet which then s
 ### For an application without routes:
 Replace the router-outlet with a view component which also adds the Clarity `content-container` class as HostBinding.
 ```
-<clr-main-container [ngClass]="{'floating':ui.floating}">
+<clr-main-container>
   <ukis-global-alert *ngIf="ui.alert" [(alert)]="ui.alert"></ukis-global-alert>
   <ukis-global-progress *ngIf="ui.progress" [(progress)]="ui.progress"></ukis-global-progress>
   <ukis-header [ukis-title]="title">
@@ -66,7 +66,7 @@ Replace the router-outlet with a view component which also adds the Clarity `con
 </clr-main-container>
 ```
 
-- The css class `floating` on the `main-container` makes the [Clarity Vertical Nav](https://clarity.design/documentation/vertical-nav/collapsible-nav/normal) floating above the `content-container` so it takes less space. For this, however, you have to worry about the placement of the elements in the `content-container` if the `vertical-nav` is expanded.
+- A css class `floating` on the `content-container` (which is mostly placed in your route components) makes the [Clarity Vertical Nav](https://clarity.design/documentation/vertical-nav/collapsible-nav/normal) floating above the `content-container` so it takes less space. For this, however, you have to worry about the placement of the elements in the `content-container` if the `vertical-nav` is expanded.
 - The `global-alert` and `global-progress` can be activated with their responsible services which you can inject in your components.
 - For more doku about the `ukis-header` [see the header README](src/lib/header/README.md)
 

projects/core-ui/package.json

@@ -23,7 +23,7 @@
     "@angular-devkit/core": "0.0.0-PLACEHOLDER-VENDOR",
     "@angular-devkit/schematics": "0.0.0-PLACEHOLDER-VENDOR",
     "@schematics/angular": "0.0.0-PLACEHOLDER-VENDOR",
-    "parse5-html-rewriting-stream": "^6.0.1",
+    "parse5-html-rewriting-stream": "0.0.0-PLACEHOLDER-VENDOR",
     "tslib": "0.0.0-PLACEHOLDER-VENDOR"
   },
   "peerDependencies": {
@@ -39,7 +39,7 @@
     "cpx": "0.0.0-PLACEHOLDER-VENDOR",
     "@types/cpx": "0.0.0-PLACEHOLDER-VENDOR",
     "typescript": "0.0.0-PLACEHOLDER-VENDOR",
-    "jasmine": "^2.8.0",
+    "jasmine": "0.0.0-PLACEHOLDER-VENDOR",
     "zone.js": "0.0.0-PLACEHOLDER-VENDOR",
     "@angular/platform-browser-dynamic": "0.0.0-PLACEHOLDER-VENDOR",
     "@angular-devkit/architect": "0.0.0-PLACEHOLDER-VENDOR"

projects/core-ui/schematics/add-routing/files/src/app/app.component.html

@@ -1,4 +1,4 @@
-<clr-main-container [ngClass]="{'floating':ui.floating}">
+<clr-main-container>
   <ukis-global-alert *ngIf="ui.alert" [(alert)]="ui.alert"></ukis-global-alert>
   <ukis-global-progress *ngIf="ui.progress" [(progress)]="ui.progress"></ukis-global-progress>
 

projects/core-ui/schematics/add-routing/files/src/app/app.component.ts.template

@@ -8,8 +8,6 @@ import { Router } from '@angular/router';
 import { Subscription } from 'rxjs';
 
 interface IUi {
-  floating: boolean;
-  flipped: boolean;
   alert: null | IAlert;
   progress: null | IProgress;
   subs: Subscription[];
@@ -25,8 +23,6 @@ export class AppComponent {
   shortTitle = '';
 
   ui: IUi = {
-    floating: false,
-    flipped: false,
     alert: null,
     progress: null,
     subs: []

projects/core-ui/schematics/ng-add/files/src/app/app.component.html

@@ -1,4 +1,4 @@
-<clr-main-container [ngClass]="{'floating':ui.floating}">
+<clr-main-container>
   <ukis-global-alert *ngIf="ui.alert" [(alert)]="ui.alert"></ukis-global-alert>
   <ukis-global-progress *ngIf="ui.progress" [(progress)]="ui.progress"></ukis-global-progress>
 

projects/core-ui/schematics/ng-add/files/src/app/app.component.ts.template

@@ -7,8 +7,6 @@ import { ProgressService, IProgress } from './components/global-progress/progres
 import { Subscription } from 'rxjs';
 
 interface IUi {
-  floating: boolean;
-  flipped: boolean;
   alert: null | IAlert;
   progress: null | IProgress;
   subs: Subscription[];
@@ -24,8 +22,6 @@ export class AppComponent implements OnDestroy {
   shortTitle = '';
 
   ui: IUi = {
-    floating: false,
-    flipped: false,
     alert: null,
     progress: null,
     subs: []

projects/core-ui/schematics/ng-add/files/src/styles/_clr-vertival-nav-layout.scss

@@ -95,39 +95,37 @@
 
 /** floating vertical nav only not mobile -------------------------- */
 @media screen and (min-width: 768px) {
-  .floating {
-    .content-container {
-      display: block;
-      position: relative;
-
-      .content-area {
-        position: absolute;
-        width: 100%;
-        height: 100%;
-      }
+  .content-container.floating {
+    display: block;
+    position: relative;
+
+    .content-area {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+    }
 
-      .clr-vertical-nav.right {
-        position: absolute;
-        margin: 0.5rem;
-        max-height: calc(100% - 2.5rem); //0.5 for map-controls
-        left: auto;
-        right: 0;
-      }
+    .clr-vertical-nav.right {
+      position: absolute;
+      margin: 0.5rem;
+      max-height: calc(100% - 2.5rem); //0.5 for map-controls
+      left: auto;
+      right: 0;
+    }
 
-      .clr-vertical-nav {
-        position: absolute;
-        margin: 0.5rem;
-        max-height: calc(100% - 2.5rem); //0.5 for map-controls
-        left: 0;
-      }
+    .clr-vertical-nav {
+      position: absolute;
+      margin: 0.5rem;
+      max-height: calc(100% - 2.5rem); //0.5 for map-controls
+      left: 0;
+    }
 
-      nav.sidenav {
-        position: absolute;
-        //right: 0;
-        left: 0;
-        height: calc(100vh - (24px * 2.5));
-        background: var(--clr-vertical-nav-bg-color, --fallback-color-no-clr);
-      }
+    nav.sidenav {
+      position: absolute;
+      //right: 0;
+      left: 0;
+      height: calc(100vh - (24px * 2.5));
+      background: var(--clr-vertical-nav-bg-color, --fallback-color-no-clr);
     }
   }
 }

projects/core-ui/src/lib/header/README.md

@@ -10,7 +10,7 @@ For examples [see demo maps](../demo-maps/README.md)
 
 #### in the app.component.html 
 ```
-<clr-main-container [ngClass]="{'floating':ui.floating}">
+<clr-main-container>
   ...
   <ukis-header [ukis-title]="title">
     <a class="nav-link nav-text header-nav-el" routerLink="/{{route.path}}" routerLinkActive="active">{{route.data.title}}</a>

projects/demo-auth/src/app/app.component.html

@@ -1,4 +1,4 @@
-<clr-main-container [ngClass]="{'floating':ui.floating}">
+<clr-main-container>
   <ukis-global-alert *ngIf="ui.alert" [(alert)]="ui.alert"></ukis-global-alert>
   <ukis-global-progress *ngIf="ui.progress" [(progress)]="ui.progress"></ukis-global-progress>
   <ukis-cookie-alert [alert-text]="'my alert text'" [privacy-link]="'link to privacy'"></ukis-cookie-alert>