MaDgIK
/
metadata-validator-ui
13
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Validator]: Added fair guideline | Updated how results are displayed | Added RuleInfo class with structured response | Added icon and modal files in shared/utils | Added commented code for file uploading.

This commit is contained in:
Konstantina Galouni 2022-11-30 12:24:00 +02:00
parent c55af200ea
commit 3ef3dcd590
21 changed files with 1270 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/app.module.ts
View File

@ -9,6 +9,8 @@ import { SingleRecordValidatorComponent } from './pages/single-record-validator/
import {FormsModule, ReactiveFormsModule} from "@angular/forms";
import {HttpClient, HttpClientModule} from "@angular/common/http";
import {InputModule} from "./shared/utils/input/input.module";
import {AlertModalModule} from "./shared/utils/modal/alertModal.module";
import {IconsModule} from "./shared/utils/icons/icons.module";
@NgModule({
declarations: [
@ -23,7 +25,9 @@ import {InputModule} from "./shared/utils/input/input.module";
FormsModule,
ReactiveFormsModule,
HttpClientModule,
InputModule
InputModule,
AlertModalModule,
IconsModule
],
providers: [],
bootstrap: [AppComponent]

15
src/app/pages/entities/RuleInfo.ts Normal file
View File

@ -0,0 +1,15 @@
export class RuleInfo {
name: string;
description: string;
warnings: string[];
errors: string[];
internalError: string;
status: Status;
score: number;
}
export enum Status {
SUCCESS,
FAILURE,
ERROR
}

72
src/app/pages/single-record-validator/single-record-validator.component.html
View File

@ -8,6 +8,19 @@
<h6>2. Paste metadata record (*)</h6>
<div input class="uk-width-1-1 uk-margin-top" [formInput]="form.get('xml')" placeholder="Paste your xml here" type="textarea" [rows]="15"></div>
<!-- <ngx-dropzone #drop class="" (change)="fileChangeEvent($event, true)"-->
<!-- [multiple]="false" [accept]="xml">-->
<!-- <ngx-dropzone-preview *ngIf="form.value.value && form.value.value.name" class="file-preview"-->
<!-- [removable]="true" (removed)="onRemove()">-->
<!-- <ngx-dropzone-label class="file-label">{{ form.value.value.name }}</ngx-dropzone-label>-->
<!-- </ngx-dropzone-preview>-->
<!-- </ngx-dropzone>-->
<!-- <button *ngIf="!form.value.value || filesToUpload" mat-button (click)="drop.showFileSelector()" type="button" class="attach-file-btn"-->
<!-- [disabled]="!!form.value.value">-->
<!-- <mat-icon class="mr-2">upload</mat-icon>-->
<!-- <mat-label>{{ (form.get('data').value.label | translate)}}</mat-label>-->
<!-- </button>-->
<div class="uk-margin-medium-top">
<button class="uk-button uk-flex uk-flex-middle uk-flex-wrap"
[class.uk-button-primary]="form.valid" [class.uk-disabled]="!form.valid" (click)="validate()">
@ -23,9 +36,62 @@
<div *ngIf="!result" class="uk-alert uk-alert-primary">
No validated metadata record yet
</div>
<div *ngFor="let resultString of result">
{{resultString}}
</div>
<table *ngIf="result" class="uk-table uk-table-striped">
<thead>
<tr>
<th>Rule Name</th>
<th>Score</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let ruleResult of result">
<td>
<div>{{ruleResult.name ? ruleResult.name : '-'}}</div>
<div *ngIf="ruleResult.description" class="uk-text-small uk-text-meta">{{ruleResult.description}}</div>
</td>
<td>{{(ruleResult.score != undefined && ruleResult.score != null) ? ruleResult.score : '-'}}</td>
<td *ngIf="!ruleResult.status">-</td>
<td *ngIf="ruleResult.status">
<div *ngIf="(!ruleResult.errors || ruleResult.errors.length == 0) &&
(!ruleResult.warnings || ruleResult.warnings.length == 0) &&
(!ruleResult.internalError)" class="uk-text-success">{{ruleResult.status}}</div>
<a *ngIf="ruleResult.warnings?.length > 0 || ruleResult.errors?.length > 0 || ruleResult.internalError" (click)="openMessagesModal(ruleResult)">
<div *ngIf="ruleResult.warnings?.length > 0" class="uk-link-text uk-text-warning">warnings</div>
<div *ngIf="ruleResult.errors?.length > 0" class="uk-link-text uk-text-danger">errors</div>
<div *ngIf="ruleResult.internalError" class="uk-link-text uk-text-danger">error</div>
</a>
</td>
</tr>
</tbody>
</table>
<modal-alert #modal large="true" (alertOutput)="modalOpen=false">
<div *ngIf="modalOpen" class="uk-modal-body uk-height-min-medium uk-width-expand">
<div *ngIf="currentRule.warnings?.length > 0" class="uk-margin-bottom">
<span class="uk-text-warning">Warnings</span>
<div *ngFor="let message of currentRule.warnings">{{message}}</div>
</div>
<div *ngIf="currentRule.errors?.length > 0" class="uk-margin-bottom">
<span class="uk-text-error">Errors</span>
<div *ngFor="let message of currentRule.errors">{{message}}</div>
</div>
<div *ngIf="currentRule.internalError">Internal error: {{currentRule.internalError}}</div>
</div>
</modal-alert>
<!-- <div class="uk-margin-top uk-section-muted uk-padding-small">-->
<!-- Comments-->
<!-- <ul class="uk-list uk-list-bullet">-->
<!-- <li>returns success, not warning status</li>-->
<!-- <li>what is the score?</li>-->
<!-- <li>do we have rule weight?</li>-->
<!-- <li>no description or user friendly name provided</li>-->
<!-- <li>errors/ warning not user friendly</li>-->
<!-- <li>can return errors & warnings</li>-->
<!-- <li>on errors, only the 1st one is returned (this is what comments in code say)</li>-->
<!-- </ul>-->
<!-- </div>-->
</div>
</div>
</div>

79
src/app/pages/single-record-validator/single-record-validator.component.ts
View File

@ -1,7 +1,8 @@
import { Component, OnInit } from '@angular/core';
import {Component, OnInit, ViewChild} from '@angular/core';
import {UntypedFormBuilder, UntypedFormGroup, Validators} from "@angular/forms";
import {SingleRecordValidatorService} from "./single-record-validator.service";
import {Option} from "../../shared/utils/input/input.component";
import {RuleInfo, Status} from "../entities/RuleInfo";
@Component({
selector: 'app-single-record-validator',
@ -12,10 +13,14 @@ export class SingleRecordValidatorComponent implements OnInit {
public options: Option[] = [
{label: 'Data Archive Guidelines V2 Profile', value: 'dataArchiveGuidelinesV2Profile'},
{label: 'Literature Guidelines V3 Profile', value: 'literatureGuidelinesV3Profile'},
{label: 'Literature Guidelines V4 Profile', value: 'literatureGuidelinesV4Profile'}
{label: 'Literature Guidelines V4 Profile', value: 'literatureGuidelinesV4Profile'},
{label: 'FAIR Data Guidelines Profile', value: 'fairDataGuidelinesProfile'}
];
public form: UntypedFormGroup;
public result: any;
public modalOpen: boolean = false;
public currentRule: RuleInfo;
@ViewChild('modal') modal;
constructor(private fb: UntypedFormBuilder, private validator: SingleRecordValidatorService) {
this.form = this.fb.group({
@ -33,4 +38,74 @@ export class SingleRecordValidatorComponent implements OnInit {
}
)
}
public openMessagesModal(rule: RuleInfo) {
this.modalOpen = true;
this.currentRule = rule;
this.modal.cancelButton = false;
this.modal.okButton = false;
this.modal.alertTitle = "Warnings & Errors";
this.modal.open();
}
// fileChangeEvent(fileInput: any, dropped: boolean = false) {
// if(this.form.value.value) {
// this.onRemove(false);
// }
//
// if(dropped) {
// this.filesToUpload = fileInput.addedFiles;
// } else {
// this.filesToUpload = fileInput.target.files;
// }
//
//
// let messages: string[] = [];
// if (this.filesToUpload.length == 0) {
// messages.push(this.language.instant('DATASET-WIZARD.MESSAGES.NO-FILES-SELECTED'));
// return;
// } else {
// let fileToUpload = this.filesToUpload[0];
// if (this.form.get("data") && this.form.get("data").value.types
// && this.form.get("data").value.types.map(type => type.value).includes(fileToUpload.type)
// && this.form.get("data").value.maxFileSizeInMB
// && this.form.get("data").value.maxFileSizeInMB*1048576 >= fileToUpload.size) {
// this.upload();
// } else {
// this.filesToUpload = null;
// messages.push(this.language.instant('DATASET-WIZARD.MESSAGES.LARGE-FILE-OR-UNACCEPTED-TYPE'));
// messages.push(this.language.instant('DATASET-WIZARD.MESSAGES.MAX-FILE-SIZE', {'maxfilesize': this.form.get("data").value.maxFileSizeInMB}));
// messages.push(this.language.instant('DATASET-WIZARD.MESSAGES.ACCEPTED-FILE-TYPES')+ this.form.get("data").value.types.map(type => type.value).join(", "));
// }
//
// if(messages && messages.length > 0) {
// this.dialog.open(FormValidationErrorsDialogComponent, {
// data: {
// errorMessages: messages
// }
// })
// }
// }
// }
// onRemove(makeFilesNull: boolean = true) {
// // delete from tmp folder - subscribe call
// this.fileService.deleteFromTempFolder(this.form.value.value.id).subscribe(res => {
// if(makeFilesNull) {
// this.makeFilesNull();
// }
// this.cdr.detectChanges();
// }, error => {
// if(makeFilesNull) {
// this.makeFilesNull();
// }
// })
// }
//
// makeFilesNull() {
// this.filesToUpload = null;
// this.form.value.value = null;
// this.form.get("value").patchValue(null);
// }
}

10
src/app/pages/single-record-validator/single-record-validator.service.ts
View File

@ -15,4 +15,14 @@ export class SingleRecordValidatorService {
let headers = new HttpHeaders({'Content-Type': 'application/json', 'accept': 'application/json'});
return this.http.post<any>(url, xml, {headers: headers});
}
uploadAndValidateFile(file: FileList, guidelinesName: string): Observable<any> {
let url = environment.validatorAPI + "validate-file";
let headers = new HttpHeaders({'Content-Type': 'application/json', 'accept': 'application/json'});
const formData = new FormData();
formData.append('file', file[0]);
formData.append('guidelines', guidelinesName);
return this.http.post(url, formData, { headers: headers });
}
}

97
src/app/shared/utils/icons/icons-preview/icons-preview.component.ts Normal file
View File

@ -0,0 +1,97 @@
import {Component} from "@angular/core";
@Component({
selector: 'icons-preview',
template: `
<div class="uk-section uk-container uk-container-large" style="font-size: 14px;">
<h4 class="uk-text-bold">Icons</h4>
<div class="uk-grid uk-grid-small uk-child-width-1-6" uk-grid>
<div class="uk-text-center">
<icon name="book"></icon>
<div class="uk-text-bold uk-margin-small-top">book</div>
</div>
<div class="uk-text-center">
<icon name="database"></icon>
<div class="uk-text-bold uk-margin-small-top">database</div>
</div>
<div class="uk-text-center">
<icon name="cog"></icon>
<div class="uk-text-bold uk-margin-small-top">cog</div>
</div>
<div class="uk-text-center">
<icon name="earth"></icon>
<div class="uk-text-bold uk-margin-small-top">earth</div>
</div>
<div class="uk-text-center">
<icon name="incognito"></icon>
<div class="uk-text-bold uk-margin-small-top">incognito</div>
</div>
<div class="uk-text-center">
<icon name="restricted"></icon>
<div class="uk-text-bold uk-margin-small-top">restricted</div>
</div>
<div class="uk-text-center">
<icon name="graph"></icon>
<div class="uk-text-bold uk-margin-small-top">graph</div>
</div>
<div class="uk-text-center">
<icon name="orcid_add"></icon>
<div class="uk-text-bold uk-margin-small-top">orcid_add</div>
</div>
<div class="uk-text-center">
<icon name="orcid_bin"></icon>
<div class="uk-text-bold uk-margin-small-top">orcid_bin</div>
</div>
<div class="uk-text-center">
<icon name="link"></icon>
<div class="uk-text-bold uk-margin-small-top">link</div>
</div>
<div class="uk-text-center">
<icon name="quotes"></icon>
<div class="uk-text-bold uk-margin-small-top">quotes</div>
</div>
<div class="uk-text-center">
<icon name="mining"></icon>
<div class="uk-text-bold uk-margin-small-top">mining</div>
</div>
</div>
<div class="uk-margin-medium-top">
<h4 class="uk-text-bold">Usage</h4>
<ul class="uk-list">
<li>1. Import IconsModule</li>
<li>2. Add this to your module with these icons you will need<br>
<div class="uk-margin-top">
<pre><code>constructor(private iconsService: IconsService) {{ "{" }}
this.iconsService.registerIcons([edit]);
{{ "}" }}</code></pre>
</div>
</li>
<li>3. Use an icon with icon tag. Add parameter ratio to scale this icon. Default size 20x20 (ratio: 1)<br>
<div class="uk-margin-top">
<pre><code>{{'<'}}icon name="edit"{{'><'}}/icon{{'>'}}</code></pre>
</div>
</li>
<li>4. Add a color class in parent of icon to give your icon a color.<br>
<div class="uk-margin-top">
<pre><code>{{'<'}}div class="uk-text-secondary"{{'>'}}
{{'<'}}icon name="edit"{{'><'}}/icon{{'>'}}
{{'<'}}/div{{'>'}}</code></pre>
</div>
</li>
</ul>
</div>
<div class="uk-margin-medium-top">
<h4 class="uk-text-bold">Add a new icon</h4>
<ul class="uk-list">
<li>1. Go to <a href="https://material.io/resources/icons/?style=baseline">Material Icons</a></li>
<li>2. Find your icon and download it as svg.</li>
<li>3. Open svg file with an editor and change width and height to 20</li>
<li>4. Create an entry on icons file with your new icon.</li>
</ul>
</div>
</div>
`
})
export class IconsPreviewComponent {
}

32
src/app/shared/utils/icons/icons-preview/icons-preview.module.ts Normal file
View File

@ -0,0 +1,32 @@
import {NgModule} from "@angular/core";
import {CommonModule} from "@angular/common";
import {RouterModule} from "@angular/router";
import {IconsPreviewComponent} from "./icons-preview.component";
import {IconsService} from "../icons.service";
import {IconsModule} from "../icons.module";
import {
book,
cog,
database,
earth,
filters,
graph,
incognito, link, mining,
orcid_add,
orcid_bin,
quotes,
restricted
} from "../icons";
@NgModule({
imports: [CommonModule, RouterModule.forChild([
{path: '', component: IconsPreviewComponent}
]), IconsModule],
declarations: [IconsPreviewComponent],
exports: [IconsPreviewComponent]
})
export class IconsPreviewModule {
constructor(private iconsService: IconsService) {
this.iconsService.registerIcons([book, database, cog, earth, incognito, restricted, graph, filters, orcid_add, orcid_bin, link, quotes, mining])
}
}

192
src/app/shared/utils/icons/icons.component.ts Normal file
View File

@ -0,0 +1,192 @@
import {
AfterViewInit,
ChangeDetectorRef,
Component,
ElementRef,
Input,
OnChanges,
SimpleChanges,
ViewChild
} from "@angular/core";
import {IconsService} from "./icons.service";
export interface StopRule {
class: string,
offset: number
}
/**
* By default, this component uses Material Icons Library to render an icon with
* a specific @name. For custom icons you should:
*
* - Add your icon in icons.ts and register it to Icon registry, by adding this to your component Module.
*
* e.g export class ExampleModule {
* constructor(private iconsService: IconsService) {
* this.iconsService.registerIcons([arrow_right])
* }
* }
*
* If the name of your icon is the same with a Material Icon name, yours will be used instead of the default.
*
* - Custom SVG Icon. Define a variable in your component with an SVG and give it as Input @svg.
*
* In case of SVGs, there is an opportunity to add gradient color by define at least a start and end stop-color rules
* and an id to support them. This option is enabled by giving id as input in @gradient (Optional @degrees for gradient direction)
*
* e.g #gradient .start {
* stop-color: red;
* }
*
* e.g #gradient .end {
* stop-color: orange;
* }
*
* */
@Component({
selector: 'icon',
template: `
<span #icon *ngIf="svg" class="uk-icon" [class.uk-preserve]="gradient" [class.uk-flex]="flex" [ngClass]="customClass" [ngStyle]="style" [innerHTML]="svg | safeHtml"></span>
<span *ngIf="!svg && iconName" [class.uk-flex]="flex" [ngClass]="customClass" [class.uk-display-inline-block]="!flex">
<span class="material-icons" [ngClass]="type" [ngStyle]="style">{{iconName}}</span>
</span>
<span *ngIf="visuallyHidden" class="visually-hidden">{{visuallyHidden}}</span>
`
})
export class IconsComponent implements AfterViewInit, OnChanges {
private static DEFAULT_ICON_SIZE = 20;
public iconName: string;
public style;
/**
* Custom icon as SVG
*/
@Input()
public svg;
@Input()
public defaultSize = false;
/**
* True if this icon should have display flex (Optional, Default: false)
*
* */
@Input()
public flex = false;
/**
*
* Add custom class(es)(Optional)
* */
@Input()
public customClass = '';
/**
* Color of svg (Optional)
* */
@Input()
public fill;
/**
* Color of svg stroke (Optional)
* */
@Input()
public stroke;
/**
* Size of icon (Default: 1)
*
* Disabled if defaultSize = true
* */
@Input()
public ratio = 1;
/**
* In case of Material icon only. Type of icon (Optional)
* */
@Input()
public type: "outlined" | "round" | "sharp" | "two-tone" | null = null;
/**
* Name of icon in registry (Required)
* */
@Input()
set name(iconName: string) {
this.iconName = iconName;
this.svg = this.iconsService.getIcon(iconName);
}
/**
* Set visually hidden name for accessibility
* */
@Input()
public visuallyHidden: string = null;
/**
* Gradient rules
* Available only for SVG!
*
* Define your css rules for stop-colors
* */
@Input()
public gradient: string = null;
@Input()
public degrees: number = 0;
@Input()
public stopRules: StopRule[]= [{class: 'start', offset: 0}, {class: 'end', offset: 100}];
@ViewChild("icon")
public icon: ElementRef;
constructor(private iconsService: IconsService,
private cdr: ChangeDetectorRef) {}
ngAfterViewInit() {
this.initIcon();
}
ngOnChanges(changes: SimpleChanges) {
this.initIcon();
}
initIcon() {
if(this.svg && this.icon) {
this.cdr.detectChanges();
let svg: Element = this.icon.nativeElement.getElementsByTagName('svg').item(0);
if(!this.defaultSize && svg) {
svg.setAttribute("width", (this.ratio * IconsComponent.DEFAULT_ICON_SIZE).toString());
svg.setAttribute("height", (this.ratio * IconsComponent.DEFAULT_ICON_SIZE).toString());
}
if(this.gradient && svg) {
this.addGradient(svg);
} else {
this.style = {
fill: this.fill,
stroke: this.stroke
};
}
} else {
this.style = {
"font-size.px": this.ratio*IconsComponent.DEFAULT_ICON_SIZE
};
}
this.cdr.detectChanges();
}
addGradient(svg: Element) {
if(svg.children.length > 0 && typeof document !== "undefined") {
let gradientDefinition = document.createElementNS('http://www.w3.org/2000/svg', 'linearGradient');
gradientDefinition.setAttribute('id', this.gradient);
if(this.degrees !== 0) {
let angle = (this.degrees) * (Math.PI / 180);
gradientDefinition.setAttribute('x1', Math.round(50 + Math.sin(angle + Math.PI) * 50) + '%');
gradientDefinition.setAttribute('y1', Math.round(50 + Math.cos(angle + Math.PI) * 50) + '%');
gradientDefinition.setAttribute('x2', Math.round(50 + Math.sin(angle) * 50) + '%');
gradientDefinition.setAttribute('y2', Math.round(50 + Math.cos(angle) * 50) + '%');
}
for(let rule of this.stopRules) {
let item = document.createElementNS('http://www.w3.org/2000/svg','stop');
item.setAttribute('class', rule.class);
item.setAttribute('offset', rule.offset + '%');
gradientDefinition.appendChild(item);
}
let defs = document.createElementNS('http://www.w3.org/2000/svg','defs');
defs.appendChild(gradientDefinition);
for(let i = 0; i < svg.children.length; i++) {
let item = svg.children.item(i);
if(!item.hasAttribute('fill')) {
item.setAttribute('fill', "url('#" + this.gradient + "')");
}
}
svg.insertBefore(defs, svg.childNodes[0]);
}
}
}

10
src/app/shared/utils/icons/icons.module.ts Normal file
View File

@ -0,0 +1,10 @@
import {NgModule} from "@angular/core";
import {CommonModule} from "@angular/common";
import {IconsComponent} from "./icons.component";
@NgModule({
imports: [CommonModule],
declarations: [IconsComponent],
exports: [IconsComponent]
})
export class IconsModule {}

18
src/app/shared/utils/icons/icons.service.ts Normal file
View File

@ -0,0 +1,18 @@
import {Injectable} from "@angular/core";
import {Icon} from "./icons";
@Injectable({
providedIn: 'root'
})
export class IconsService {
private registry = new Map<string, string>();
public registerIcons(icons: any[]): void {
icons.forEach((icon: Icon) => this.registry.set(icon.name, icon.data));
}
public getIcon(iconName: string): string | undefined {
return this.registry.get(iconName);
}
}

226
src/app/shared/utils/icons/icons.ts Normal file
View File

@ -0,0 +1,226 @@
export interface Icon {
name: string,
data: string
}
/** @deprecated */
export const arrow_left: Icon = {
name: 'arrow_left',
data: '<svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 0 24 24" width="20"><path d="M20 11H6.83l2.88-2.88c.39-.39.39-1.02 0-1.41-.39-.39-1.02-.39-1.41 0L3.71 11.3c-.39.39-.39 1.02 0 1.41L8.3 17.3c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L6.83 13H20c.55 0 1-.45 1-1s-.45-1-1-1z"/></svg>'
}
/** @deprecated */
export const arrow_right: Icon = {
name: 'arrow_right',
data: '<svg height="20" viewBox="0 0 16 16" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M12.578,4.244,5.667,11.155V8.167A.833.833,0,1,0,4,8.167v5A.832.832,0,0,0,4.833,14h5a.833.833,0,0,0,0-1.667H6.845l6.911-6.911a.833.833,0,1,0-1.178-1.178h0Z" transform="translate(7.071 19.799) rotate(-135)"></path></svg>'
};
/** @deprecated */
export const arrow_up: Icon = {
name: 'arrow_up',
data: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 17.155 17.155"><g transform="translate(0)"><path d="M10.405,11.834,2.022,3.451V7.076A1.011,1.011,0,0,1,0,7.076V1.011A1.009,1.009,0,0,1,1.011,0H7.076a1.011,1.011,0,1,1,0,2.022H3.451l8.383,8.383a1.011,1.011,0,1,1-1.429,1.429h0Z" transform="translate(8.578 0) rotate(45)"/></g></svg>'
}
/** @deprecated */
export const arrow_down: Icon = {
name: 'arrow_down',
data: '<svg height="20" viewBox="0 0 17.155 17.155" width="20" xmlns="http://www.w3.org/2000/svg"><g transform="translate(-1221 -675)"><path d="M14.405,4.3,6.022,12.68V9.055A1.011,1.011,0,0,0,4,9.055V15.12a1.009,1.009,0,0,0,1.011,1.01h6.065a1.011,1.011,0,1,0,0-2.022H7.451l8.383-8.383A1.011,1.011,0,0,0,14.405,4.3h0Z" transform="translate(1215.343 683.578) rotate(-45)"></path></g></svg>'
}
export const book: Icon = {
name: 'book',
data: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 22.106 30"><path id="book" d="M26.9,9.405V25.749c0,.824-.713,1.218-1.579,1.832a1.034,1.034,0,0,1-1.579-.927V10.685a.877.877,0,0,0-.5-.845c-.379-.194-12.218-6.418-12.218-6.418A2.239,2.239,0,0,0,8.9,3.4,4.487,4.487,0,0,0,7.119,4.808l12.916,7.077a.917.917,0,0,1,.555.815V29.755a1.057,1.057,0,0,1-.582.924,1.209,1.209,0,0,1-1.136-.042c-.339-.207-12.274-7.526-13.063-8-.379-.227-.823-.693-.832-1.039L4.8,5.355a2.612,2.612,0,0,1,.456-1.629c1.1-1.711,4.94-3.658,6.884-2.65L26.348,8.268A1.151,1.151,0,0,1,26.9,9.405Z" transform="translate(-4.799 -0.8)"/></svg>'
};
export const database: Icon = {
name: 'database',
data: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 23.864 30"><path id="database" d="M28.2,21.443c-1.437,2.324-6.026,4.025-11.465,4.025S6.7,23.767,5.266,21.443c-.3-.494-.466-.23-.466.012v3.412c0,3.307,5.342,6.733,11.932,6.733s11.932-3.426,11.932-6.731V21.457C28.664,21.213,28.5,20.949,28.2,21.443Zm.018-8.721c-1.415,2.054-6.02,3.562-11.483,3.562S6.661,14.776,5.246,12.722c-.292-.423-.446-.193-.446,0v4.017c0,3,5.342,5.435,11.932,5.435s11.932-2.434,11.932-5.435V12.719c0-.19-.157-.42-.449,0ZM16.732,1.6C10.142,1.6,4.8,3.611,4.8,6.088V8.236c0,2.627,5.342,4.758,11.932,4.758s11.932-2.131,11.932-4.758V6.088C28.664,3.611,23.322,1.6,16.732,1.6Z" transform="translate(-4.8 -1.6)"/></svg>'
};
export const cog: Icon = {
name: 'cog',
data: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 30.001 30"><path id="cog" d="M29.67,17.558A5.108,5.108,0,0,1,32.557,13.2a15.981,15.981,0,0,0-1.235-2.985A4.827,4.827,0,0,1,26.48,8.634a4.665,4.665,0,0,1-1.22-4.841,15.611,15.611,0,0,0-2.985-1.234,5.655,5.655,0,0,1-4.717,2.884,5.658,5.658,0,0,1-4.719-2.884A15.571,15.571,0,0,0,9.855,3.793,4.661,4.661,0,0,1,8.634,8.634a4.824,4.824,0,0,1-4.841,1.577A15.756,15.756,0,0,0,2.559,13.2a5.106,5.106,0,0,1,2.884,4.362,5.661,5.661,0,0,1-2.884,4.719,15.89,15.89,0,0,0,1.234,2.985A4.667,4.667,0,0,1,8.634,26.48a4.669,4.669,0,0,1,1.221,4.841,15.779,15.779,0,0,0,2.985,1.238,5.647,5.647,0,0,1,4.719-2.887,5.658,5.658,0,0,1,4.719,2.887,16.052,16.052,0,0,0,2.985-1.238,4.667,4.667,0,0,1,1.22-4.841A4.84,4.84,0,0,1,31.325,24.9a15.741,15.741,0,0,0,1.235-2.985A5.106,5.106,0,0,1,29.67,17.558Zm-12.111,6.52a6.522,6.522,0,1,1,6.52-6.52A6.521,6.521,0,0,1,17.558,24.079Z" transform="translate(-2.559 -2.559)"/></svg>'
};
export const earth: Icon = {
name: 'earth',
data: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 30 30"><path id="earth" d="M15,0A15,15,0,1,0,30,15,15,15,0,0,0,15,0Zm0,28.125a13.086,13.086,0,0,1-5.192-1.068l6.831-7.685a.935.935,0,0,0,.237-.622V15.938A.938.938,0,0,0,15.938,15c-3.31,0-6.8-3.442-6.837-3.475a.937.937,0,0,0-.663-.275H4.688a.938.938,0,0,0-.937.937v5.625a.936.936,0,0,0,.518.838L7.5,20.267v5.5A13.132,13.132,0,0,1,3.14,9.375H6.563A.935.935,0,0,0,7.226,9.1l3.75-3.75a.937.937,0,0,0,.275-.663V2.42a13.164,13.164,0,0,1,9.5.779c-.122.1-.24.21-.353.323a5.626,5.626,0,0,0,3.974,9.6c.093,0,.186,0,.278-.007A22.007,22.007,0,0,1,24.4,24.027a.878.878,0,0,0-.024.153A13.084,13.084,0,0,1,15,28.125Z"/></svg>'
}
/** @deprecated */
export const edit: Icon = {
name: 'edit',
data: '<svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 0 24 24" width="20"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M3 17.46v3.04c0 .28.22.5.5.5h3.04c.13 0 .26-.05.35-.15L17.81 9.94l-3.75-3.75L3.15 17.1c-.1.1-.15.22-.15.36zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>'
}
/** @deprecated
*
* Use delete
* */
export const remove: Icon = {
name: 'remove',
data: '<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 9.91 11.01"><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path d="M8.83,1.85V9.41A1.58,1.58,0,0,1,7.26,11H2.62a1.6,1.6,0,0,1-1.57-1.6V1.85H.28A.26.26,0,0,1,0,1.57.27.27,0,0,1,.28,1.3H2.59v-1A.26.26,0,0,1,2.87,0H7a.28.28,0,0,1,.27.28v1H9.63a.28.28,0,0,1,.28.27.3.3,0,0,1-.28.28Zm-7.23,0V9.41a1,1,0,0,0,1,1.05H7.26a1,1,0,0,0,1-1.05V1.85ZM6.76,1.3V.55H3.15V1.3Z"/><path class="cls-1" d="M3.06,3.73a.28.28,0,0,1,.28-.28.29.29,0,0,1,.27.28V8.58a.29.29,0,0,1-.27.28.28.28,0,0,1-.28-.28Z"/><path class="cls-1" d="M6.29,3.73a.28.28,0,0,1,.28-.28.29.29,0,0,1,.27.28V8.58a.29.29,0,0,1-.27.28.28.28,0,0,1-.28-.28Z"/><path class="cls-1" d="M4.66,3.73a.3.3,0,0,1,.28-.28.29.29,0,0,1,.28.28V8.58a.29.29,0,0,1-.28.28.3.3,0,0,1-.28-.28Z"/></g></g></svg>'
}
/** @deprecated
* Use visibility
* */
export const preview: Icon = {
name: 'preview',
data: '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/></svg>'
}
/** @deprecated */
export const bullet: Icon = {
name: 'bullet',
data: '<svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 0 24 24" width="20"><path d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="10"/></svg>'
}
/** @deprecated */
export const remove_circle = {
name: 'remove_circle',
data: '<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="20" viewBox="0 0 24 24" width="20"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><path d="M12,2C6.47,2,2,6.47,2,12c0,5.53,4.47,10,10,10s10-4.47,10-10C22,6.47,17.53,2,12,2z M16.29,14.89 c0.39,0.39,0.39,1.02,0,1.41c-0.39,0.39-1.02,0.39-1.41,0L12,13.41l-2.89,2.89c-0.39,0.39-1.02,0.39-1.41,0 c-0.39-0.39-0.39-1.02,0-1.41L10.59,12L7.71,9.11c-0.39-0.39-0.39-1.02,0-1.41c0.39-0.39,1.02-0.39,1.41,0L12,10.59l2.89-2.89 c0.39-0.39,1.02-0.39,1.41,0c0.39,0.39,0.39,1.02,0,1.41L13.41,12L16.29,14.89z"/></g></svg>'
}
/** @deprecated */
export const remove_circle_outline = {
name: 'remove_circle_outline',
data: '<svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 0 24 24" width="20"><path d="M0 0h24v24H0V0z" fill="none" opacity=".87"/><path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.59-13L12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59 13.41 12 17 8.41z"/></svg>'
}
/** @deprecated */
export const person_add = {
name: 'person_add',
data: '<svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 0 24 24" width="20"><path d="M0 0h24v24H0z" fill="none"/><path d="M15 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm-9-2V7H4v3H1v2h3v3h2v-3h3v-2H6zm9 4c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>'
}
/** @deprecated */
export const cloud_upload = {
name: 'cloud_upload',
data: '<svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 0 24 24" width="20"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l4.65-4.65c.2-.2.51-.2.71 0L17 13h-3z"/></svg>'
}
/** @deprecated */
export const add = {
name: 'add',
data: '<svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 0 24 24" width="20"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M18 13h-5v5c0 .55-.45 1-1 1s-1-.45-1-1v-5H6c-.55 0-1-.45-1-1s.45-1 1-1h5V6c0-.55.45-1 1-1s1 .45 1 1v5h5c.55 0 1 .45 1 1s-.45 1-1 1z"/></svg>'
}
/** @deprecated */
export const group = {
name: 'group',
data: '<svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 0 24 24" width="20"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5s-3 1.34-3 3 1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V18c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-1.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05.02.01.03.03.04.04 1.14.83 1.93 1.94 1.93 3.41V18c0 .35-.07.69-.18 1H22c.55 0 1-.45 1-1v-1.5c0-2.33-4.67-3.5-7-3.5z"/></svg>'
}
/** @deprecated */
export const lock = {
name: 'lock',
data: '<svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 0 24 24" width="20"><g fill="none"><path d="M0 0h24v24H0V0z"/><path d="M0 0h24v24H0V0z" opacity=".87"/></g><path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zM9 8V6c0-1.66 1.34-3 3-3s3 1.34 3 3v2H9z"/></svg>'
}
/** @deprecated */
export const search = {
name: 'search',
data: '<svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 0 24 24" width="20"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M15.5 14h-.79l-.28-.27c1.2-1.4 1.82-3.31 1.48-5.34-.47-2.78-2.79-5-5.59-5.34-4.23-.52-7.79 3.04-7.27 7.27.34 2.8 2.56 5.12 5.34 5.59 2.03.34 3.94-.28 5.34-1.48l.27.28v.79l4.25 4.25c.41.41 1.08.41 1.49 0 .41-.41.41-1.08 0-1.49L15.5 14zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>'
}
/** @deprecated */
export const refresh = {
name: 'refresh',
data: '<svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 0 24 24" width="20"><path d="M0 0h24v24H0z" fill="none"/><path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/></svg>'
}
/** @deprecated */
export const close = {
name: 'close',
data: '<svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 0 24 24" width="20"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M18.3 5.71c-.39-.39-1.02-.39-1.41 0L12 10.59 7.11 5.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L10.59 12 5.7 16.89c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 13.41l4.89 4.89c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z"/></svg>'
}
/** @deprecated */
export const done = {
name: 'done',
data: '<svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 0 24 24" width="20"><path d="M0 0h24v24H0z" fill="none"/><path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/></svg>'
}
/** @deprecated */
export const mail = {
name: 'mail',
data: '<svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 0 24 24" width="20"><path d="M0 0h24v24H0z" fill="none"/><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg>'
}
/** @deprecated */
export const photo = {
name: 'photo',
data: '<svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 0 24 24" width="20"><path d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="3.2"/><path d="M9 2L7.17 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-3.17L15 2H9zm3 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z"/></svg>'
}
/** @deprecated */
export const check_circle_outlined = {
name: 'check_circle_outlined',
data: '<svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 0 24 24" width="20"><path d="M0 0h24v24H0V0zm0 0h24v24H0V0z" fill="none"/><path d="M16.59 7.58L10 14.17l-3.59-3.58L5 12l5 5 8-8zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"/></svg>'
}
/** @deprecated */
export const reset = {
name: 'reset',
data: '<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><polyline fill="#000" points="1 2 2 2 2 6 6 6 6 7 1 7 1 2"></polyline><path fill="none" stroke="#000" stroke-width="1.1" d="M2.1,6.548 C3.391,3.29 6.746,1 10.5,1 C15.5,1 19.5,5 19.5,10 C19.5,15 15.5,19 10.5,19 C5.5,19 1.5,15 1.5,10"></path></svg>'
}
/** @deprecated */
export const send = {
name: 'send',
data: '<svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 0 24 24" width="20" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/></svg>'
}
/** @deprecated */
export const print = {
name: 'print',
data: '<svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 0 24 24" width="240" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6v4h12V3z"/></svg>'
}
export const incognito = {
name: 'incognito',
data: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24.51 19.525"><g id="Group_13376" data-name="Group 13376" transform="translate(-428.81 -3863.018)"><path id="Path_104500" data-name="Path 104500" d="M44.68,105.185H43.024a23.507,23.507,0,0,0-9.194-.158V106a3.909,3.909,0,0,1,1.264,1.668c.455,1.119.2,3.05,4.148,3.289s4-4.041,4.034-4.438.577-.372.577-.372.541-.021.579.372.09,4.673,4.034,4.438,3.693-2.17,4.146-3.289A3.9,3.9,0,0,1,53.879,106v-.969A23.686,23.686,0,0,0,44.68,105.185Z" transform="translate(397.218 3771.582)" fill="#2c2c2c"/><path id="Path_104501" data-name="Path 104501" d="M41.867,35.784H40.326s-1.95-6.217-2.207-6.735a2.8,2.8,0,0,0-2.591-2.061c-1.92-.266-2.138,1.225-3.544,1.268-1.406-.049-1.617-1.546-3.542-1.268a2.817,2.817,0,0,0-2.592,2.061c-.246.518-2.205,6.735-2.205,6.735H22.1a2.31,2.31,0,0,0-2.371,2.245H44.24A2.311,2.311,0,0,0,41.867,35.784Z" transform="translate(409.08 3836.064)" fill="#2c2c2c"/></g></svg>'
}
export const restricted = {
name: 'restricted',
data: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><g id="noun-remove-file-3557544" transform="translate(-176.397 -106.4)"><path id="Path_104600" data-name="Path 104600" d="M181.881,274.166A5.485,5.485,0,1,0,178,272.559,5.484,5.484,0,0,0,181.881,274.166Zm-3.548-5.484a3.531,3.531,0,0,1,.452-1.729l4.839,4.839a3.548,3.548,0,0,1-5.29-3.11Zm7.1,0a3.527,3.527,0,0,1-.452,1.729l-4.839-4.839a3.548,3.548,0,0,1,5.29,3.11Z" transform="translate(0 -147.766)"/><path id="Path_104601" data-name="Path 104601" d="M245.859,106.4a2.258,2.258,0,0,0-2.258,2.258v4.516h1.936v-4.516a.323.323,0,0,1,.323-.323h8.064v3.871h3.871v11.935a.323.323,0,0,1-.323.323h-5.484V126.4h5.484a2.259,2.259,0,0,0,2.258-2.258v-13.3l-4.439-4.439Z" transform="translate(-63.333)"/></g></svg>'
}
export const graph = {
name: 'graph',
data: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 21.744"><g transform="translate(0)"><g transform="translate(0 0)"><path d="M18.772,15.578a2.718,2.718,0,0,0-.427-.368,3.629,3.629,0,0,0-3.291-.5,3.445,3.445,0,0,0-.962.5c-.07.051-.139.1-.2.161a2.335,2.335,0,0,0-.23.207.3.3,0,0,0-.047.051c-.011.013-.027.028-.036.042a1.611,1.611,0,0,0-.163.19L7.039,12.133a8.04,8.04,0,0,1,8.352-5.007h0a3.681,3.681,0,0,0,.93.133h.046a3.633,3.633,0,0,0,2.008-.605,3.57,3.57,0,0,0,.926-.9A3.63,3.63,0,1,0,13.368,1.57a3.491,3.491,0,0,0-.38.71,3.589,3.589,0,0,0-.26,1.35c0,.065,0,.125,0,.19a4.146,4.146,0,0,0,.051.459,3.721,3.721,0,0,0,.125.486L6.369,8.542a3.546,3.546,0,0,0-.649-.59,3.629,3.629,0,0,0-4.2,0,3.675,3.675,0,0,0-.894.9,3.483,3.483,0,0,0-.38.71,3.35,3.35,0,0,0-.137.41,3.563,3.563,0,0,0-.123.949v.19a3.57,3.57,0,0,0,.038.38.635.635,0,0,0,.013.08,3.641,3.641,0,0,0,.634,1.469h0a3.7,3.7,0,0,0,.934.894,3.606,3.606,0,0,0,2.008.607,3.732,3.732,0,0,0,.55-.038l-.044.036a8.037,8.037,0,0,1,8.6,4.556v-.021a3.606,3.606,0,0,0,2.836,2.61,3.472,3.472,0,0,0,1.26,0,3.629,3.629,0,0,0,2.879-2.58.228.228,0,0,0,0-.038,3.606,3.606,0,0,0-.6-3.111,2.769,2.769,0,0,0-.344-.393M14.129,3.515a2.19,2.19,0,0,1,.254-.928,2.323,2.323,0,0,1,.885-.907A2.24,2.24,0,0,1,16.359,1.4a2.206,2.206,0,0,1,1.1.285,2.234,2.234,0,0,1,.886.909,2.179,2.179,0,0,1,.252,1.038,2.213,2.213,0,0,1-.306,1.116,2.181,2.181,0,0,1-.949.888,2.255,2.255,0,0,1-.983.23h-.04a2.158,2.158,0,0,1-.949-.228,2.278,2.278,0,0,1-.569-.406,1.912,1.912,0,0,1-.156-.171,2.314,2.314,0,0,1-.224-.313.078.078,0,0,1-.015-.027,2.226,2.226,0,0,1-.287-1.091.76.76,0,0,1,0-.114M2.638,12.921a2.24,2.24,0,0,1-.731-.569,2.327,2.327,0,0,1-.22-.307,2.24,2.24,0,0,1-.3-1.118,1.122,1.122,0,0,1,0-.114,2.183,2.183,0,0,1,.258-.941,2.316,2.316,0,0,1,.885-.909,2.278,2.278,0,0,1,1.09-.283,2.232,2.232,0,0,1,1.5.59,2.19,2.19,0,0,1,.437.55.313.313,0,0,1,.038.059,2.1,2.1,0,0,1,.207.562,2.149,2.149,0,0,1,.053.484,2.056,2.056,0,0,1-.057.488,2.105,2.105,0,0,1-.226.6.277.277,0,0,1-.017.028,2.183,2.183,0,0,1-.435.535,2.158,2.158,0,0,1-.514.349,2.265,2.265,0,0,1-.985.23,2.23,2.23,0,0,1-.983-.23m15.8,5.44a2.219,2.219,0,0,1-.642,1.346,2.169,2.169,0,0,1-.22.19,2.261,2.261,0,0,1-.746.38,2.175,2.175,0,0,1-1.26-.019,2.12,2.12,0,0,1-.917-.549A2.185,2.185,0,0,1,14,18.1h0a.9.9,0,0,1,.015-.2c.015-.066,0-.076.015-.116a1.575,1.575,0,0,1,.055-.241,1.993,1.993,0,0,1,.2-.48c.011-.025.027-.049.04-.074a2.291,2.291,0,0,1,.321-.4h0c.034-.034.066-.063.1-.093a1.627,1.627,0,0,1,.142-.114,1.693,1.693,0,0,1,.2-.139,2.253,2.253,0,0,1,2.245,0,2.446,2.446,0,0,1,.45.345,2.371,2.371,0,0,1,.323.412,2.266,2.266,0,0,1,.319,1.388" transform="translate(0.01 0)"/><path d="M78.35,12.262a.338.338,0,0,0,.319.222h.8v.845a.2.2,0,0,0,.013.085.325.325,0,0,0,.173.216.268.268,0,0,0,.156.046.294.294,0,0,0,.1-.019.34.34,0,0,0,.245-.328v-.845h.9a.345.345,0,0,0,.347-.344.355.355,0,0,0-.156-.287.349.349,0,0,0-.19-.057h-.9v-.848a.325.325,0,0,0-.082-.216.305.305,0,0,0-.044-.042l-.038-.023-.068-.036a.237.237,0,0,0-.112-.023.3.3,0,0,0-.156.038.19.19,0,0,0-.055.036.323.323,0,0,0-.129.268V11.8h-.8a.363.363,0,0,0-.19.057.38.38,0,0,0-.123.167.247.247,0,0,0-.027.12.3.3,0,0,0,.011.084.315.315,0,0,0,.015.038" transform="translate(-63.459 -8.595)"/></g></g></svg>'
}
export const filters = {
name: 'filters',
data: '<svg id="Group_13364" data-name="Group 13364" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 24.648 21.128"><defs><linearGradient id="linear-gradient" x2="1" y2="0.961" gradientUnits="objectBoundingBox"><stop offset="0" /><stop offset="1" /></linearGradient><linearGradient id="linear-gradient-2" x1="-0.029" y1="0.037" x2="1" y2="0.928" xlink:href="#linear-gradient"/></defs><g id="Group_13361" data-name="Group 13361" transform="translate(0 10.564)"><line id="Line_420" data-name="Line 420" x2="24.648" transform="translate(0 5.774)" fill="none" stroke="#707070" stroke-width="1"/><g id="Ellipse_515" data-name="Ellipse 515" transform="translate(2.078)" stroke="#fafafa" stroke-width="0.6"><ellipse cx="5.282" cy="5.282" rx="5.282" ry="5.282" stroke="none"/><ellipse cx="5.282" cy="5.282" rx="4.982" ry="4.982" fill="none"/></g></g><g id="Group_13362" data-name="Group 13362"><line id="Line_418" data-name="Line 418" x2="24.648" transform="translate(0 5.388)" fill="none" stroke="#707070" stroke-width="1"/><g id="Path_104494" data-name="Path 104494" transform="translate(11.444)"><path d="M 5.281623840332031 10.26361751556396 C 2.534753799438477 10.26361751556396 0.3000038266181946 8.028787612915039 0.3000038266181946 5.281807899475098 C 0.3000038266181946 2.534827947616577 2.534753799438477 0.2999978959560394 5.281623840332031 0.2999978959560394 C 8.028493881225586 0.2999978959560394 10.26324367523193 2.534827947616577 10.26324367523193 5.281807899475098 C 10.26324367523193 8.028787612915039 8.028493881225586 10.26361751556396 5.281623840332031 10.26361751556396 Z" stroke="none"/><path d="M 5.281623840332031 0.5999975204467773 C 2.700173854827881 0.5999975204467773 0.6000041961669922 2.700247764587402 0.6000041961669922 5.281807899475098 C 0.6000041961669922 7.863368034362793 2.700173854827881 9.963618278503418 5.281623840332031 9.963618278503418 C 7.863073825836182 9.963618278503418 9.96324348449707 7.863368034362793 9.96324348449707 5.281807899475098 C 9.96324348449707 2.700247764587402 7.863073825836182 0.5999975204467773 5.281623840332031 0.5999975204467773 M 5.281623840332031 -1.9073486328125e-06 C 8.198583602905273 -1.9073486328125e-06 10.5632438659668 2.364748001098633 10.5632438659668 5.281807899475098 C 10.5632438659668 8.198867797851562 8.198583602905273 10.56361770629883 5.281623840332031 10.56361770629883 C 2.364664077758789 10.56361770629883 3.814697265625e-06 8.198867797851562 3.814697265625e-06 5.281807899475098 C 3.814697265625e-06 2.364748001098633 2.364664077758789 -1.9073486328125e-06 5.281623840332031 -1.9073486328125e-06 Z" stroke="none" fill="#fafafa"/></g></g></svg>'
}
export const orcid_add = {
name: 'orcid_add',
data: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42.13 40.77"><defs><style>.cls-2{fill:#fff;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><circle cx="18.09" cy="18.09" r="18.09"/><rect class="cls-2" x="9.86" y="11.03" width="2.49" height="15.27"/><ellipse class="cls-2" cx="11.07" cy="8.16" rx="1.63" ry="1.6"/><path class="cls-2" d="M23.07,11.17A6.57,6.57,0,0,0,21.81,11H15.28V13.2h0V24.09h0v2.15h6.34a7.75,7.75,0,0,0,1.45-.14,7.61,7.61,0,0,0,0-14.93ZM25,23l-.26.19a4.3,4.3,0,0,1-.45.29,4.41,4.41,0,0,1-1.64.62H17.63V13.2h4.42a5.63,5.63,0,0,1,2.62.81,4.12,4.12,0,0,1,.47.38A5.74,5.74,0,0,1,25,23Z"/><path d="M41.33,34.62H37.57V30.86a.79.79,0,0,0-.79-.79h0a.79.79,0,0,0-.8.78h0v3.76H32.22a.79.79,0,0,0-.79.79h0a.79.79,0,0,0,.79.79H36V40a.8.8,0,1,0,1.59,0h0V36.21h3.76a.79.79,0,0,0,.8-.78h0A.8.8,0,0,0,41.33,34.62Z"/></g></g></svg>'
}
export const orcid_bin = {
name: 'orcid_bin',
data: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 41.58 41.07"><defs><style>.cls-3{fill:#fff;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><g id="Layer_2-2" data-name="Layer 2"><g id="Layer_1-2-2" data-name="Layer 1-2"><path d="M40.55,31.91v7.56A1.58,1.58,0,0,1,39,41.07H34.3a1.59,1.59,0,0,1-1.57-1.6V31.91H32a.25.25,0,0,1-.27-.23v0h0a.28.28,0,0,1,.27-.23h2.32v-1a.25.25,0,0,1,.22-.28h4.22a.3.3,0,0,1,.28.28v1h2.32c.15,0,.22.13.22.28h0c0,.14-.08.18-.22.19Zm-7.23,0v7.56a1,1,0,0,0,1,1H39a1,1,0,0,0,1-1V31.91Zm5.12-.5v-.74H34.82v.74Z"/><path d="M34.74,33.79a.29.29,0,0,1,.28-.28.29.29,0,0,1,.27.28v4.85a.29.29,0,0,1-.27.28.29.29,0,0,1-.28-.28Z"/><path d="M38,33.79a.29.29,0,0,1,.28-.28.29.29,0,0,1,.27.28v4.85a.29.29,0,0,1-.27.28.29.29,0,0,1-.28-.28Z"/><path d="M36.34,33.79a.3.3,0,0,1,.28-.28.28.28,0,0,1,.27.28v4.85a.28.28,0,0,1-.27.28.3.3,0,0,1-.28-.28Z"/><circle cx="18.09" cy="18.09" r="18.09"/><rect class="cls-3" x="9.86" y="11.03" width="2.49" height="15.27"/><ellipse class="cls-3" cx="11.07" cy="8.16" rx="1.63" ry="1.6"/><path class="cls-3" d="M23.07,11.17A6.7,6.7,0,0,0,21.81,11H15.28v2.2h0V24.09h0v2.15h6.34a7.83,7.83,0,0,0,1.45-.14,7.61,7.61,0,0,0,0-14.93ZM25,23l-.26.19a3.46,3.46,0,0,1-.45.29,4.42,4.42,0,0,1-1.64.62h-5V13.2h4.42a5.63,5.63,0,0,1,2.62.81,3.4,3.4,0,0,1,.47.38,5.75,5.75,0,0,1,.38,8.11A6.14,6.14,0,0,1,25,23Z"/></g></g></g></g></svg>'
}
export const link = {
name: 'link',
data: '<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="link"><path fill="none" stroke="#000" stroke-width="1.1" d="M10.625,12.375 L7.525,15.475 C6.825,16.175 5.925,16.175 5.225,15.475 L4.525,14.775 C3.825,14.074 3.825,13.175 4.525,12.475 L7.625,9.375"></path><path fill="none" stroke="#000" stroke-width="1.1" d="M9.325,7.375 L12.425,4.275 C13.125,3.575 14.025,3.575 14.724,4.275 L15.425,4.975 C16.125,5.675 16.125,6.575 15.425,7.275 L12.325,10.375"></path><path fill="none" stroke="#000" stroke-width="1.1" d="M7.925,11.875 L11.925,7.975"></path></svg>'
}
export const quotes = {
name: 'quotes',
data: '<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="quote-right"><path d="M17.27,7.79 C17.27,9.45 16.97,10.43 15.99,12.02 C14.98,13.64 13,15.23 11.56,15.97 L11.1,15.08 C12.34,14.2 13.14,13.51 14.02,11.82 C14.27,11.34 14.41,10.92 14.49,10.54 C14.3,10.58 14.09,10.6 13.88,10.6 C12.06,10.6 10.59,9.12 10.59,7.3 C10.59,5.48 12.06,4 13.88,4 C15.39,4 16.67,5.02 17.05,6.42 C17.19,6.82 17.27,7.27 17.27,7.79 L17.27,7.79 Z"></path><path d="M8.68,7.79 C8.68,9.45 8.38,10.43 7.4,12.02 C6.39,13.64 4.41,15.23 2.97,15.97 L2.51,15.08 C3.75,14.2 4.55,13.51 5.43,11.82 C5.68,11.34 5.82,10.92 5.9,10.54 C5.71,10.58 5.5,10.6 5.29,10.6 C3.47,10.6 2,9.12 2,7.3 C2,5.48 3.47,4 5.29,4 C6.8,4 8.08,5.02 8.46,6.42 C8.6,6.82 8.68,7.27 8.68,7.79 L8.68,7.79 Z"></path></svg>'
}
export const mining = {
name: 'mining',
data: '<svg width="20" height="20" viewBox="0 0 600 500" xmlns="http://www.w3.org/2000/svg"><g><path d="m449.68 334.84-90.93-52.5c-5.4258-3.1133-12.074-3.1133-17.5 0l-90.93 52.5c-5.4258 3.1328-8.75 8.9062-8.75 15.156v105c0 6.2461 3.3242 12.039 8.75 15.156l90.93 52.5c2.7109 1.5547 5.7227 2.3438 8.75 2.3438s6.0391-0.78906 8.75-2.3438l90.93-52.5c5.4258-3.1328 8.75-8.9062 8.75-15.156v-105c0-6.2461-3.3242-12.023-8.75-15.156zm-99.68 120.16c-28.945 0-52.5-23.555-52.5-52.5s23.555-52.5 52.5-52.5 52.5 23.555 52.5 52.5-23.555 52.5-52.5 52.5z"/><path d="m545.93 35h-391.86c-27.055 0-49.07 22.016-49.07 49.07v20.93h490v-20.93c0-27.055-22.016-49.07-49.07-49.07z"/><path d="m105 370.93c0 27.055 22.016 49.07 49.07 49.07h70v-70c0-12.477 6.7031-24.078 17.5-30.309l90.93-52.5c5.3359-3.0625 11.375-4.6914 17.5-4.6914s12.164 1.6289 17.465 4.6719l90.965 52.516c10.797 6.2305 17.5 17.852 17.5 30.309v70h70c27.055 0.003906 49.07-22.012 49.07-49.066v-230.93h-490zm57.629-138.3 52.5-52.5c6.8438-6.8438 17.902-6.8438 24.746 0l42.84 42.84 75.793-45.484c6.8945-4.1289 15.715-3.0469 21.387 2.625l58.922 58.922 75.266-60.219c7.543-6.0391 18.551-4.8125 24.586 2.7305 6.0391 7.543 4.8125 18.566-2.7305 24.605l-87.5 70c-3.2188 2.5898-7.0859 3.8516-10.938 3.8516-4.4961 0-8.9961-1.7344-12.391-5.1289l-60.34-60.34-75.793 45.484c-6.8789 4.1289-15.68 3.0625-21.387-2.625l-40.09-40.145-40.129 40.129c-6.8438 6.8438-17.902 6.8438-24.746 0-6.8398-6.8438-6.8398-17.906 0.003906-24.746z"/></g></svg>'
}
/** Add new icon under this line to be sure that it will be added on preview */

191
src/app/shared/utils/modal/alert.ts Normal file
View File

@ -0,0 +1,191 @@
import {Component, ElementRef, EventEmitter, Input, Output, ViewChild, ViewEncapsulation} from '@angular/core';
declare var UIkit: any;
@Component({
selector: 'modal-alert',
template: `
<div #element class="uk-modal" [class.uk-modal-container]="large" [id]="id" uk-modal="container: #modal-container">
<div class="uk-modal-dialog">
<div class="uk-modal-header uk-flex uk-flex-middle uk-flex-between" [ngClass]="classTitle">
<div [class.uk-invisible]="!alertHeader">
<h5 class="uk-margin-remove">{{alertTitle}}</h5>
</div>
<button class="uk-close uk-icon uk-margin-left" (click)="cancel()">
<icon name="close" ratio="1.5"></icon>
</button>
</div>
<div class="uk-modal-body uk-animation-fast uk-text-left"
[ngClass]="classBody" [attr.uk-overflow-auto]="overflowBody?'':null">
<div *ngIf="message" [hidden]=!alertMessage [innerHTML]="message"></div>
<ng-content></ng-content>
</div>
<div *ngIf="(choice || okButton || cancelButton) && alertFooter" class="uk-modal-footer">
<div class="uk-grid uk-flex uk-flex-middle" uk-grid>
<label *ngIf="choice" class="uk-width-expand">
<input type="checkbox" [(ngModel)]="select">
<span class="uk-margin-small-left">Don't show this message again</span>
</label>
<div [ngClass]="(choice)?'uk-width-auto':'uk-width-1-1'">
<div class="uk-flex-right uk-grid uk-grid-small" uk-grid>
<span *ngIf="okButton" [class.uk-flex-last]="!okButtonLeft">
<button class="uk-button uk-button-primary" [disabled]="okDisabled"
[class.uk-disabled]="okDisabled" (click)="ok()">{{okButtonText}}</button>
</span>
<span *ngIf="cancelButton">
<button class="uk-button uk-button-default uk-margin-small-left"
(click)="cancel()">{{cancelButtonText}}</button>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
`,
encapsulation: ViewEncapsulation.None,
})
/**
* API to an open alert window.
*/
export class AlertModal {
private static MODAL_COUNTER: number = 0;
id: string = "modal";
@Input() classTitle: string = "uk-background-primary-opacity";
@Input() classBody: string = "";
@Input() large: boolean = false;
@Input() overflowBody: boolean = true;
/**
* Caption for the title.
*/
public alertTitle: string;
/**
* Describes if the alert contains Ok Button.
* The default Ok button will close the alert and emit the callback.
* Defaults to true.
*/
public okButton: boolean = true;
/**
* Caption for the OK button.
* Default: Ok
*/
public okButtonText: string = 'OK';
/**
* Describes if the alert contains cancel Button.
* The default Cancelbutton will close the alert.
* Defaults to true.
*/
public cancelButton: boolean = true;
/**
* Caption for the Cancel button.
* Default: Cancel
*/
public cancelButtonText: string = 'Cancel';
/**
* if the alertMessage is true it will show the contentString inside alert body.
*/
public alertMessage: boolean = true;
/**
* Some message/content can be set in message which will be shown in alert body.
*/
public message: string;
/**
* if the value is true alert footer will be visible or else it will be hidden.
*/
public alertFooter: boolean = true;
/**
* shows alert header if the value is true.
*/
public alertHeader: boolean = true;
/**
* if the value is true ok button align on the left, else on the right
*/
public okButtonLeft: boolean = true;
/**
* if the value is true ok button is disabled
*/
@Input()
public okDisabled: boolean = false;
/**
* If the value is true, a checkbox option will be appeared on the right side of footer
*/
@Input()
public choice: boolean = false;
/**
* if the value is true then on ok clicked, modal will stay open.
*/
public stayOpen: boolean = false;
/**
* Value will be emitted if @choice is true
*/
public select: boolean = true;
/**
* Emitted when ok button was clicked
* or when Ok method is called.
*/
@Output() public alertOutput: EventEmitter<any> = new EventEmitter();
/**
* Emitted when cancel button was clicked
* or when cancel method is called.
*/
@Output() public cancelOutput: EventEmitter<any> = new EventEmitter();
@ViewChild('element') element: ElementRef;
constructor() {
}
ngOnInit() {
AlertModal.MODAL_COUNTER++;
this.id = 'modal-' + AlertModal.MODAL_COUNTER;
}
ngOnDestroy() {
if(typeof document !== "undefined") {
const element = document.getElementById("modal-container");
for (let i = element.childNodes.length - 1; i >= 0; --i) {
let child: ChildNode = element.childNodes[i];
if (child['id'] == this.id) {
child.remove();
}
}
}
}
/**
* Opens an alert window creating backdrop.
*/
open() {
UIkit.modal(this.element.nativeElement).show();
}
/**
* ok method closes the modal and emits modalOutput.
*/
ok() {
if (!this.stayOpen) {
UIkit.modal(this.element.nativeElement).hide();
}
if (!this.choice) {
this.alertOutput.emit(true);
} else {
this.alertOutput.emit({
value: true,
choice: this.select
});
}
}
/**
* cancel method closes the modal.
*/
cancel() {
UIkit.modal(this.element.nativeElement).hide();
this.cancelOutput.emit(true);
}
}

18
src/app/shared/utils/modal/alertModal.module.ts Normal file
View File

@ -0,0 +1,18 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import {AlertModal} from './alert';
import {ModalModule} from './modal.module';
import {IconsModule} from "../icons/icons.module";
@NgModule({
imports: [CommonModule, FormsModule, ModalModule, IconsModule],
declarations: [
AlertModal
],
exports: [
AlertModal
]
})
export class AlertModalModule { }

144
src/app/shared/utils/modal/full-screen-modal/full-screen-modal.component.ts Normal file
View File

@ -0,0 +1,144 @@
import {
AfterViewInit, ChangeDetectorRef,
Component,
ElementRef,
EventEmitter, HostListener,
Input,
OnDestroy,
OnInit,
Output,
ViewChild
} from "@angular/core";
import {fromEvent, Subscription} from 'rxjs';
import {delay} from "rxjs/operators";
import {HelperFunctions} from "../../HelperFunctions.class";
declare var UIkit;
declare var ResizeObserver;
@Component({
selector: 'fs-modal',
template: `
<div #modal class="uk-modal-full" [id]="id" uk-modal="container: #modal-container">
<div class="uk-modal-dialog">
<div #header class="uk-modal-header uk-flex uk-flex-middle" [ngClass]="classTitle">
<div [class.uk-invisible]="!back" class="uk-width-medium@l uk-width-auto uk-flex uk-flex-center">
<button class="uk-button uk-button-link" [disabled]="!back" (click)="cancel()">
<icon name="west" [flex]="true" ratio="3"></icon>
</button>
</div>
<div [class.uk-invisible]="!title"
class="uk-width-expand uk-padding-small uk-padding-remove-vertical uk-flex uk-flex-center">
<h2 class="uk-margin-remove">{{title}}</h2>
</div>
<div class="uk-width-medium@l uk-width-auto uk-flex" [class.uk-flex-center]="okButton" [class.uk-flex-right]="!okButton">
<button *ngIf="okButton" class="uk-button uk-button-default" [disabled]="okButtonDisabled"
[class.uk-disabled]="okButtonDisabled" (click)="ok()">
{{okButtonText}}
</button>
<button *ngIf="!okButton" class="uk-close uk-icon" (click)="cancel()">
<icon name="close" ratio="2"></icon>
</button>
</div>
</div>
<div #body class="uk-modal-body uk-overflow-auto" [ngStyle]="{'height.px': bodyHeight}">
<div class="uk-container uk-height-1-1" [ngClass]="classBody">
<ng-content></ng-content>
</div>
</div>
</div>
</div>
`
})
export class FullScreenModalComponent implements AfterViewInit, OnDestroy {
private static FS_MODAL_COUNTER: number = 0;
id: string = "fs-modal";
@Input() classTitle: string = "uk-background-primary uk-light";
@Input() classBody: string = 'uk-container-large';
back: boolean = false;
title: string;
okButton: boolean = false;
okButtonText = 'OK';
@Input()
okButtonDisabled = false;
@Output()
okEmitter: EventEmitter<boolean> = new EventEmitter<boolean>();
@Output()
cancelEmitter: EventEmitter<boolean> = new EventEmitter<boolean>();
@ViewChild('modal') modal: ElementRef;
@ViewChild('header') header: ElementRef;
@ViewChild('body') body: ElementRef;
observer: any;
headerHeight: number;
bodyHeight: number;
constructor(private cdr: ChangeDetectorRef) {
}
@HostListener('window:resize', ['$event'])
onResize() {
this.changeHeight();
}
ngOnInit() {
FullScreenModalComponent.FS_MODAL_COUNTER++;
this.id = 'fs-modal-' + FullScreenModalComponent.FS_MODAL_COUNTER;
}
ngAfterViewInit() {
if(typeof window !== "undefined") {
this.observer = new ResizeObserver(entries => {
for (let entry of entries) {
this.changeHeight();
}
});
this.observer.observe(this.header.nativeElement);
}
}
/* Height = Viewport - header - (Body padding) */
changeHeight() {
if(typeof window !== "undefined" && this.header) {
this.bodyHeight = window.innerHeight - this.header.nativeElement.clientHeight - 80;
this.cdr.detectChanges();
}
}
ngOnDestroy() {
if(this.observer && this.observer instanceof ResizeObserver) {
this.observer.disconnect();
}
if(typeof document !== "undefined") {
const element = document.getElementById("modal-container");
for (let i = element.childNodes.length - 1; i >= 0; --i) {
let child: ChildNode = element.childNodes[i];
if (child['id'] == this.id) {
child.remove();
}
}
}
}
get isOpen() {
return this.modal && UIkit.modal(this.modal.nativeElement).isToggled();
}
open() {
UIkit.modal(this.modal.nativeElement).show();
HelperFunctions.scroll();
}
cancel() {
UIkit.modal(this.modal.nativeElement).hide();
HelperFunctions.scroll();
this.cancelEmitter.emit();
}
ok() {
UIkit.modal(this.modal.nativeElement).hide();
HelperFunctions.scroll();
this.okEmitter.emit(true);
}
}

12
src/app/shared/utils/modal/full-screen-modal/full-screen-modal.module.ts Normal file
View File

@ -0,0 +1,12 @@
import {NgModule} from "@angular/core";
import {CommonModule} from "@angular/common";
import {FullScreenModalComponent} from "./full-screen-modal.component";
import {IconsModule} from "../../icons/icons.module";
@NgModule({
imports: [CommonModule, IconsModule],
declarations: [FullScreenModalComponent],
exports: [FullScreenModalComponent]
})
export class FullScreenModalModule {
}

61
src/app/shared/utils/modal/loading.component.ts Normal file
View File

@ -0,0 +1,61 @@
import {Component, ViewEncapsulation, ComponentRef, ElementRef, Input, EventEmitter, Output} from '@angular/core';
@Component({
selector: 'modal-loading',
template: `
<!--uk-modal="center:true"-->
<div [class]="(!isOpen)?'uk-modal ':'uk-modal uk-open uk-animation-fade'" [open]="!isOpen" tabindex="-1" role="dialog" >
<div class="uk-modal-dialog" role="">
<!--div class="modal-content"-->
<div class="uk-modal-body">
<div >
<h4 class="text-center" >{{message}}</h4>
<!-- <div class="uk-spinner"></div>-->
<div class="uk-animation-fade uk-margin-top uk-width-1-1" role="alert">
<span class="loading-gif uk-align-center" ></span>
</div>
<ng-content></ng-content>
</div>
</div>
</div>
<!--/div-->
</div>
<!--div class="uk-modal uk-open" aria-hidden="false" style="display: block; overflow-y: scroll;">
<div class="uk-modal-dialog" tabindex="">
<div class="uk-modal-spinner"></div>
</div>
</div-->
`,
encapsulation: ViewEncapsulation.None,
})
/**
* API to an open alert window.
*/
export class ModalLoading{
@Input() public message:string ="Loading";
/**
* if the value is true alert will be visible or else it will be hidden.
*/
public isOpen:boolean=false;
/**
* Emitted when a ok button was clicked
* or when Ok method is called.
*/
@Output() public alertOutput:EventEmitter<any> = new EventEmitter();
constructor( public _elementRef: ElementRef){}
/**
* Opens a alert window creating backdrop.
*/
open(){
this.isOpen= true;
}
close(){
this.isOpen = false;
}
}

19
src/app/shared/utils/modal/loadingModal.module.ts Normal file
View File

@ -0,0 +1,19 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import {ModalLoading} from './loading.component';
import {ModalModule} from './modal.module';
//helpers
@NgModule({
imports: [ CommonModule, FormsModule,ModalModule ],
declarations: [
ModalLoading
],
exports: [
ModalLoading
]
})
export class LoadingModalModule { }

15
src/app/shared/utils/modal/modal.module.ts Normal file
View File

@ -0,0 +1,15 @@
/* common components of modal components */
import {NgModule} from '@angular/core';
import {Open} from './open.component';
@NgModule({
imports: [],
declarations: [
Open
],
exports: [
Open
]
})
export class ModalModule {
}

57
src/app/shared/utils/modal/open.component.ts Normal file
View File

@ -0,0 +1,57 @@
import {Directive, Input, HostBinding} from '@angular/core';
// todo: add animate
// todo: add init and on change
@Directive({selector: '[open]'})
export class Open {
@HostBinding('style.display')
public display:string;
@HostBinding('class.in')
@HostBinding('attr.aria-expanded')
public isExpanded:boolean = true;
@Input()
public set open(value:boolean) {
this.isExpanded = value;
this.toggle();
}
public get open():boolean {
return this.isExpanded;
}
constructor() {
}
init() {
this.isExpanded = false;
this.display = 'none';
}
toggle() {
if (this.isExpanded) {
this.hide();
} else {
this.show();
}
}
hide() {
this.isExpanded = false;
this.display = 'none';
if (typeof document !== 'undefined') {
let backDrop = document.getElementsByClassName("modal-backdrop");
if(backDrop.length>0){
document.body.removeChild(backDrop[0]);
}
}
}
show() {
if (typeof document !== 'undefined') {
// let backDrop = document.createElement('div');
// backDrop.className="modal-backdrop fade in";
// document.body.appendChild(backDrop);
}
this.isExpanded = true;
this.display = 'block';
}
}

2
src/assets/common-assets

@ -1 +1 @@
Subproject commit 936fac297322fa252af930cab3c0e69efe57c1a5
Subproject commit 658d017b02df4786e9b221f51eb39ef9a42c6d88

2
src/assets/openaire-theme

@ -1 +1 @@
Subproject commit 8bb758b340d05b50b65da48863ff7ed69fdc122b
Subproject commit fb1d7149654415dd6b848b86ab5187401f50975e