@dlr-eoc/core-ui
Version:
This project includes schematics to add the base UKIS-Layout to an angular application. The Layout is based on Clarity so [add this first](https://clarity.design/get-started/developing/angular)!
265 lines (254 loc) • 21.1 kB
JavaScript
import * as i0 from '@angular/core';
import { EventEmitter, Output, Input, Component, Injectable, Directive, ViewChild } from '@angular/core';
import { NgClass } from '@angular/common';
import { Subject } from 'rxjs';
import { ClarityIcons, infoCircleIcon, windowCloseIcon, timesIcon } from '@cds/core/icon';
import * as i1 from '@clr/angular';
import { ClrIconModule, ClrAlertModule, ClrNavigationModule, ClrStandaloneCdkTrapFocus } from '@clr/angular';
class GlobalProgressComponent {
constructor() {
this.progressChange = new EventEmitter();
}
ngOnInit() {
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: GlobalProgressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.12", type: GlobalProgressComponent, isStandalone: true, selector: "ukis-global-progress", inputs: { progress: "progress" }, outputs: { progressChange: "progressChange" }, ngImport: i0, template: "@if (progress && progress.indeterminate) {\n <span>\n @if (progress.class) {\n <div class=\"progress loop\" [ngClass]=\"progress.class\"><progress></progress></div>\n }\n </span>\n}\n@if (progress && !progress.indeterminate) {\n <span>\n @if (progress.class) {\n <div class=\"progress\" [ngClass]=\"progress.class\"><progress max=\"{{progress.max}}\"\n value=\"{{progress.value}}\"></progress></div>\n }\n </span>\n}\n", styles: [".progress{height:.5em}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: GlobalProgressComponent, decorators: [{
type: Component,
args: [{ selector: 'ukis-global-progress', imports: [NgClass], template: "@if (progress && progress.indeterminate) {\n <span>\n @if (progress.class) {\n <div class=\"progress loop\" [ngClass]=\"progress.class\"><progress></progress></div>\n }\n </span>\n}\n@if (progress && !progress.indeterminate) {\n <span>\n @if (progress.class) {\n <div class=\"progress\" [ngClass]=\"progress.class\"><progress max=\"{{progress.max}}\"\n value=\"{{progress.value}}\"></progress></div>\n }\n </span>\n}\n", styles: [".progress{height:.5em}\n"] }]
}], ctorParameters: () => [], propDecorators: { progress: [{
type: Input
}], progressChange: [{
type: Output
}] } });
class ProgressService {
constructor() {
this.progressSource = new Subject();
this.progress$ = this.progressSource.asObservable();
}
progress(progress) {
this.progressSource.next(progress);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: ProgressService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: ProgressService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: ProgressService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}], ctorParameters: () => [] });
ClarityIcons.addIcons(...[infoCircleIcon, windowCloseIcon]);
class GlobalAlertComponent {
constructor() {
this.alertChange = new EventEmitter();
}
close() {
this.alert = null;
this.alertChange.emit(this.alert);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: GlobalAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.12", type: GlobalAlertComponent, isStandalone: true, selector: "ukis-global-alert", inputs: { alert: "alert" }, outputs: { alertChange: "alertChange" }, ngImport: i0, template: "@if (alert) {\n <div class=\"alert alert-app-level\" [ngClass]=\"'alert-'+alert.type\" role=\"alert\">\n <div class=\"alert-items\">\n <div class=\"alert-item static\">\n <div class=\"alert-icon-wrapper\">\n <cds-icon class=\"alert-icon\" shape=\"info-circle\"></cds-icon>\n </div>\n <div class=\"alert-text\" [innerHTML]=alert.text></div>\n @if (alert.actions) {\n <div class=\"alert-actions\">\n @for (action of alert.actions; track action) {\n <button class=\"btn alert-action\" aria-label=\"alert action\"\n (click)=\"action.callback()\">{{action.title}}</button>\n }\n </div>\n }\n </div>\n </div>\n @if (alert.closeable) {\n <button type=\"button\" class=\"close\" aria-label=\"alert close\" (click)=\"close()\">\n <cds-icon aria-hidden=\"true\" shape=\"window-close\"></cds-icon>\n </button>\n }\n </div>\n}\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ClrIconModule }, { kind: "directive", type: i1.CdsIconCustomTag, selector: "cds-icon" }, { kind: "ngmodule", type: ClrAlertModule }, { kind: "directive", type: i1.ClrAlertText, selector: ".alert-text" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: GlobalAlertComponent, decorators: [{
type: Component,
args: [{ selector: 'ukis-global-alert', imports: [NgClass, ClrIconModule, ClrAlertModule], template: "@if (alert) {\n <div class=\"alert alert-app-level\" [ngClass]=\"'alert-'+alert.type\" role=\"alert\">\n <div class=\"alert-items\">\n <div class=\"alert-item static\">\n <div class=\"alert-icon-wrapper\">\n <cds-icon class=\"alert-icon\" shape=\"info-circle\"></cds-icon>\n </div>\n <div class=\"alert-text\" [innerHTML]=alert.text></div>\n @if (alert.actions) {\n <div class=\"alert-actions\">\n @for (action of alert.actions; track action) {\n <button class=\"btn alert-action\" aria-label=\"alert action\"\n (click)=\"action.callback()\">{{action.title}}</button>\n }\n </div>\n }\n </div>\n </div>\n @if (alert.closeable) {\n <button type=\"button\" class=\"close\" aria-label=\"alert close\" (click)=\"close()\">\n <cds-icon aria-hidden=\"true\" shape=\"window-close\"></cds-icon>\n </button>\n }\n </div>\n}\n" }]
}], ctorParameters: () => [], propDecorators: { alert: [{
type: Input
}], alertChange: [{
type: Output
}] } });
class AlertService {
constructor() {
this.alertSource = new Subject();
this.alert$ = this.alertSource.asObservable();
}
alert(alert) {
this.alertSource.next(alert);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: AlertService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: AlertService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: AlertService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}], ctorParameters: () => [] });
const ukisIcon = ['ukis-icon', `<svg version="1.1" viewBox="0 0 36 36" preserveAspectRatio="xMidYMid meet" class="has-solid"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" focusable="false" role="img">
<title>ukis</title>
<path class="clr-i-solid clr-i-solid-path-1" d="M18,31.5c4.7,0,8.9-2.4,11.3-6.1H6.7C9.1,29.1,13.3,31.5,18,31.5z"/>
<path class="clr-i-solid clr-i-solid-path-2" d="M4.5,17.1c0,0.3,0,0.6,0,0.9c0,1.7,0.3,3.4,0.9,4.9h21.2L4.5,17.1z"/>
<path class="clr-i-solid clr-i-solid-path-3" d="M31,21.5c0.3-1.1,0.5-2.3,0.5-3.5c0-3-1-5.7-2.6-7.9L8.7,15.6L31,21.5z"/>
<path class="clr-i-solid clr-i-solid-path-4" d="M18,4.5c-6,0-11.2,4-12.9,9.5l22-6C24.7,5.8,21.5,4.5,18,4.5z"/>
</svg>`];
const eocIcon = ['eoc-icon', `<svg version="1.1" viewBox="0 -180 580 580" preserveAspectRatio="xMidYMid meet" class="has-solid"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" focusable="false" role="img">
<title>eoc</title>
<path class="clr-i-solid clr-i-solid-path-1" d="M284,210c-55.1,0-100-44.9-100-100S228.9,10,284,10s100,44.9,100,100S339.1,210,284,210z M284,28.2
c-45.1,0-81.8,36.7-81.8,81.8s36.7,81.8,81.8,81.8s81.8-36.7,81.8-81.8S329.1,28.2,284,28.2z M566,180.7l-12.9-12.9
c-31.9,31.9-83.8,31.9-115.7,0c-31.9-31.9-31.9-83.8,0-115.7c31.9-31.9,83.8-31.9,115.7,0L566,39.3c-39-39-102.5-39-141.5,0
s-39,102.5,0,141.5c19.5,19.5,45.1,29.3,70.7,29.3S546.5,200.2,566,180.7z M184.7,180.7l-12.9-12.9c-31.9,31.9-83.8,31.9-115.7,0
c-15.5-15.5-24-36-24-57.8c0-21.9,8.5-42.4,24-57.8c28.6-28.6,73.4-31.8,105.5-8.7l-67.8,75.2l13.5,12.2l80.3-89.1l-6.7-6.1
C141.4,0.1,80.9,1.7,43.3,39.3C24.4,58.2,14,83.3,14,110c0,26.7,10.4,51.8,29.3,70.7C62.8,200.2,88.4,210,114,210
C139.6,210,165.2,200.2,184.7,180.7z"/>
</svg>`];
const dlrIcon = ['dlr-icon', `<svg version="1.1" viewBox="0 0 36 36" preserveAspectRatio="xMidYMid meet" class="has-solid"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" focusable="false" role="img">
<title>dlr</title>
<path class="clr-i-solid clr-i-solid-path-1" d="M25.8,13.2V3.8l-9.4,9.4h-8l-7.7,7.7l9.4,0v9.4l9.4-9.4h8l7.7-7.7H25.8L25.8,13.2z M23.9,8.5v4.7h-4.7L23.9,8.5
L23.9,8.5z M5.4,18.9l3.8-3.8h5.3l-3.8,3.8H5.4L5.4,18.9z M12.1,25.6v-4.8h4.8L12.1,25.6L12.1,25.6z M18.8,18.9h-5.4l3.8-3.8h5.4
L18.8,18.9L18.8,18.9z M26.8,18.9h-5.2l3.8-3.8h5.2L26.8,18.9L26.8,18.9z M19.6,26.5h1.6c1.8,0,3.3,0.6,3.3,2.9
c0,2.3-1.6,2.9-3.3,2.9h-1.6V26.5L19.6,26.5z M20.8,31.3h0.6c1,0,1.9-0.7,1.9-2c0-1.2-0.9-2-1.9-2h-0.6V31.3L20.8,31.3z M25.7,26.5
h1.1v4.8h2.2v0.9h-3.4V26.5L25.7,26.5z M30.1,26.5h1.2c1.2,0,2.7,0,2.7,1.6c0,0.7-0.5,1.2-1.2,1.3v0c0.3,0,0.5,0.3,0.6,0.6l0.9,2.2
h-1.3l-0.7-1.8c-0.2-0.4-0.3-0.6-0.8-0.6h-0.4v2.4h-1.1V26.5L30.1,26.5z M31.3,28.9h0.4c0.6,0,1.2-0.1,1.2-0.8
c0-0.7-0.6-0.7-1.2-0.7h-0.4V28.9L31.3,28.9z"/>
</svg>`];
ClarityIcons.addIcons(ukisIcon, dlrIcon, timesIcon);
class HeaderComponent {
constructor() {
this.title = '';
this.shortTitle = '';
this.version = '';
}
ngOnInit() {
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: HeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.12", type: HeaderComponent, isStandalone: true, selector: "ukis-header", inputs: { title: ["ukis-title", "title"], shortTitle: ["ukis-short-title", "shortTitle"], version: ["ukis-version", "version"] }, ngImport: i0, template: "<clr-header class=\"header-1\">\n <div class=\"branding\" [ngClass]=\"{'short-title':shortTitle}\">\n <a href=\"https://www.dlr.de\" target=\"_blank\" alt=\"link to dlr\">\n <cds-icon shape=\"dlr-icon\" solid=\"true\" size=\"48\" alt=\"dlr icon\"></cds-icon>\n </a>\n <a href=\"https://www.dlr.de/de/eoc/ueber-uns/deutsches_fernerkundungsdatenzentrum/georisiken-und-zivile-sicherheit/informationssysteme-und-geomatik/ukis-umwelt-und-kriseninformationssysteme\" target=\"_blank\"\n alt=\"link to dlr ukis\">\n <cds-icon shape=\"ukis-icon\" solid=\"true\" size=\"33\" alt=\"ukis icon\"></cds-icon>\n </a>\n <a class=\"nav-link\" routerLink=\"/\" routerLinkActive=\"active\">\n <span class=\"title\" [title]=\"title\">{{title}}</span>\n <span class=\"title short\" [title]=\"title\">{{shortTitle}}</span>\n </a>\n @if (version) {\n <span class=\"version\">{{version}}</span>\n }\n </div>\n <div class=\"header-nav\" [clr-nav-level]=\"1\">\n <ng-content select=\".header-nav-el\"></ng-content>\n </div>\n\n <ng-content></ng-content>\n\n <div class=\"header-actions\">\n <ng-content select=\".header-action-el\"></ng-content>\n </div>\n</clr-header>", styles: [""], dependencies: [{ kind: "ngmodule", type: ClrNavigationModule }, { kind: "component", type: i1.ClrHeader, selector: "clr-header", inputs: ["role"] }, { kind: "directive", type: i1.ClrNavLevel, selector: "[clr-nav-level]", inputs: ["clr-nav-level", "closeAriaLabel"] }, { kind: "directive", type: i1.NavDetectionOompaLoompa, selector: "clr-header" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ClrIconModule }, { kind: "directive", type: i1.CdsIconCustomTag, selector: "cds-icon" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: HeaderComponent, decorators: [{
type: Component,
args: [{ selector: 'ukis-header', imports: [ClrNavigationModule, NgClass, ClrIconModule, ClrStandaloneCdkTrapFocus], template: "<clr-header class=\"header-1\">\n <div class=\"branding\" [ngClass]=\"{'short-title':shortTitle}\">\n <a href=\"https://www.dlr.de\" target=\"_blank\" alt=\"link to dlr\">\n <cds-icon shape=\"dlr-icon\" solid=\"true\" size=\"48\" alt=\"dlr icon\"></cds-icon>\n </a>\n <a href=\"https://www.dlr.de/de/eoc/ueber-uns/deutsches_fernerkundungsdatenzentrum/georisiken-und-zivile-sicherheit/informationssysteme-und-geomatik/ukis-umwelt-und-kriseninformationssysteme\" target=\"_blank\"\n alt=\"link to dlr ukis\">\n <cds-icon shape=\"ukis-icon\" solid=\"true\" size=\"33\" alt=\"ukis icon\"></cds-icon>\n </a>\n <a class=\"nav-link\" routerLink=\"/\" routerLinkActive=\"active\">\n <span class=\"title\" [title]=\"title\">{{title}}</span>\n <span class=\"title short\" [title]=\"title\">{{shortTitle}}</span>\n </a>\n @if (version) {\n <span class=\"version\">{{version}}</span>\n }\n </div>\n <div class=\"header-nav\" [clr-nav-level]=\"1\">\n <ng-content select=\".header-nav-el\"></ng-content>\n </div>\n\n <ng-content></ng-content>\n\n <div class=\"header-actions\">\n <ng-content select=\".header-action-el\"></ng-content>\n </div>\n</clr-header>" }]
}], ctorParameters: () => [], propDecorators: { title: [{
type: Input,
args: ['ukis-title']
}], shortTitle: [{
type: Input,
args: ['ukis-short-title']
}], version: [{
type: Input,
args: ['ukis-version']
}] } });
class ViewRefDirective {
constructor(viewContainerRef) {
this.viewContainerRef = viewContainerRef;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: ViewRefDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.12", type: ViewRefDirective, isStandalone: true, selector: "[ukisAddHost]", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: ViewRefDirective, decorators: [{
type: Directive,
args: [{
selector: '[ukisAddHost]'
}]
}], ctorParameters: () => [{ type: i0.ViewContainerRef }] });
class DynamicComponentComponent {
constructor() {
this.dynamicComponentChange = new EventEmitter();
this.subs = [];
}
// TODO: check if this can be enhanced https://angular.dev/api/core/createComponent#createComponent_0
loadComponent() {
if (this.dynamicComponent) {
this.viewContainerRef = this.ukisAddHost.viewContainerRef;
this.viewContainerRef.clear();
this.componentRef = this.viewContainerRef.createComponent(this.dynamicComponent.component);
this.setInputOutputs();
}
}
/**
* Set's the inputs defined in IDynamicComponent
*
* To subscribe to the outputs of the IDynamicComponent.component use '<name>Change' as output name in your component.
* e.g.
* @Input() set value()...
* get value()...
* @Output() valueChange = new EventEmitter<number>();
*
*
* To reset the Inputs after ngOnInit, change to Object binding for the input 'dynamicComponent' in the parent which creates the dynamic component.
* e.g.
* this.Comp.inputs.test = 'value';
* CustomLayer.action = this.Comp = Object.assign({}, this.Comp);
*/
setInputOutputs() {
if (this.componentRef && this.dynamicComponent.inputs) {
const inputs = Object.keys(this.dynamicComponent.inputs);
inputs.map(i => {
const inputname = i;
if (this.dynamicComponent.inputs) {
this.componentRef.instance[inputname] = this.dynamicComponent.inputs[inputname];
const outupName = `${inputname}Change`;
/** subscribe to output for same name as input */
if (this.componentRef.instance[outupName] && this.componentRef.instance[outupName] instanceof EventEmitter) {
const sub = this.componentRef.instance[outupName].subscribe((val) => {
if (this.dynamicComponent.inputs) {
this.dynamicComponent.inputs[inputname] = val;
/** if outputs are defined on IDynamicComponent pass the value to there functions */
}
if (this.dynamicComponent.outputs) {
if (this.dynamicComponent.outputs[outupName]) {
this.dynamicComponent.outputs[outupName](val);
}
}
this.dynamicComponentChange.emit(this.dynamicComponent);
});
this.subs.push(sub);
}
}
});
}
}
ngOnChanges(changes) {
if (changes.dynamicComponent) {
if (Array.isArray(this.subs)) {
this.subs.map(s => s.unsubscribe());
}
// unsub befor new sub on changes
this.subs.map(s => s.unsubscribe());
this.subs = [];
this.setInputOutputs();
}
}
ngOnInit() {
this.loadComponent();
}
ngOnDestroy() {
if (this.componentRef) {
this.subs.map(s => s.unsubscribe());
this.componentRef.destroy();
this.componentRef = null;
}
if (this.viewContainerRef) {
this.viewContainerRef.clear();
this.viewContainerRef = null;
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: DynamicComponentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.12", type: DynamicComponentComponent, isStandalone: true, selector: "ukis-dynamic-component", inputs: { dynamicComponent: "dynamicComponent" }, outputs: { dynamicComponentChange: "dynamicComponentChange" }, viewQueries: [{ propertyName: "ukisAddHost", first: true, predicate: ViewRefDirective, descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `<ng-template ukisAddHost></ng-template>`, isInline: true, dependencies: [{ kind: "directive", type: ViewRefDirective, selector: "[ukisAddHost]" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: DynamicComponentComponent, decorators: [{
type: Component,
args: [{
selector: 'ukis-dynamic-component',
template: `<ng-template ukisAddHost></ng-template>`,
imports: [ViewRefDirective]
}]
}], ctorParameters: () => [], propDecorators: { dynamicComponent: [{
type: Input
}], dynamicComponentChange: [{
type: Output
}], ukisAddHost: [{
type: ViewChild,
args: [ViewRefDirective, { static: true }]
}] } });
/*
* Public API Surface of core-ui
*/
/**
* Generated bundle index. Do not edit.
*/
export { AlertService, DynamicComponentComponent, GlobalAlertComponent, GlobalProgressComponent, HeaderComponent, ProgressService, ViewRefDirective, dlrIcon, eocIcon, ukisIcon };
//# sourceMappingURL=dlr-eoc-core-ui.mjs.map