MaDgIK
/
openaire-library
13
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Monitor release 16th May 2023 #4

Merged
k.triantafyllou merged 6 commits from develop into master 2023-05-16 16:24:11 +02:00
Conversation 0 Commits 6 Files Changed 9 +153 -441
9 changed files with 153 additions and 441 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

299
monitor/how/how.component.less
View File

@ -1,299 +0,0 @@
@import "~src/assets/openaire-theme/less/_import-variables";
@media only screen and (min-width: @breakpoint-small) {
.how .first > div:first-child {
position: relative;
}
.how .first > div:first-child:after {
content: "we";
font-size: 20px;
font-weight: 600;
text-align: center;
padding-bottom: 5%;
position: absolute;
background-image: url("~src/assets/common-assets/monitor-assets/green-arrows/1.svg");
right: -21%;
top: 33%;
width: 20%;
background-size: contain;
background-repeat: no-repeat;
background-position: bottom center;
}
.how .second > div:first-child {
position: relative;
padding: 0 10% 0 20%;
}
.how .second > div:first-child:after {
content: "and";
font-size: 20px;
font-weight: 600;
text-align: center;
padding-bottom: 5%;
position: absolute;
background-image: url("~src/assets/common-assets/monitor-assets/green-arrows/2.svg");
right: -17%;
top: 33%;
width: 30%;
background-size: contain;
background-repeat: no-repeat;
background-position: bottom center;
}
.how .third {
position: relative;
}
.how .third > div:first-child {
padding: 0 14% 0 13%;
}
.how .third:after {
content: "on which";
font-size: 20px;
font-weight: 600;
padding-right: 30%;
padding-top: 5%;
padding-bottom: 5%;
position: absolute;
background-image: url("~src/assets/common-assets/monitor-assets/green-arrows/3.svg");
bottom: -6%;
left: 13%;
transform: translateY(100%);
width: 140px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.how .fourth {
padding: 10% 3% 0 3%;
}
.how .fourth > div:first-child {
position: relative;
padding: 0 16% 0 16%;
}
.how .fourth> div:first-child:after {
content: "and";
font-size: 20px;
font-weight: 600;
text-align: center;
padding-bottom: 5%;
position: absolute;
background-image: url("~src/assets/common-assets/monitor-assets/green-arrows/4.svg");
left: -18%;
top: 36%;
width: 30%;
background-size: contain;
background-repeat: no-repeat;
background-position: bottom center;
}
.how .fifth {
padding: 11% 2% 0 2%;
}
.how .fifth > div:first-child {
position: relative;
}
.how .fifth > div:first-child:after {
content: "We";
font-size: 20px;
font-weight: 600;
text-align: center;
padding-bottom: 5%;
position: absolute;
background-image: url("~src/assets/common-assets/monitor-assets/green-arrows/5.svg");
left: -35%;
top: 36%;
width: 30%;
background-size: contain;
background-repeat: no-repeat;
background-position: bottom center;
}
.how .sixth {
padding: 10% 5% 0 0;
}
.how .sixth > div:first-child {
padding: 0 15% 0 15%;
}
.how .final {
padding: 10% 20% 0 20%;
}
.how .final > div:first-child {
position: relative;
}
.how .final > div:first-child:before {
content: "";
position: absolute;
background-image: url("~src/assets/common-assets/monitor-assets/green-arrows/6.svg");
left: -26%;
top: -20%;
height: 70%;
width: 30%;
background-size: contain;
background-repeat: no-repeat;
background-position: bottom center;
}
.how .final > div:first-child:after {
content: "We make visualizations, graphs, reports and deliver all in a customisable tool";
font-size: 20px;
position: absolute;
top: 30%;
width: 250px;
padding: 8% 0 5% 0;
background-size: contain;
background-repeat: no-repeat;
background-position: bottom center;
}
}
@media only screen and (max-width: @breakpoint-xsmall-max) {
.how .first {
position: relative;
padding-bottom: 30%;
}
.how .first:after {
content: "we";
text-align: center;
padding: 10% 34% 10% 0;
position: absolute;
background-image: url("~src/assets/common-assets/monitor-assets/green-arrows/3.svg");
left: 26%;
top: 79%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.how .second {
position: relative;
padding: 0 10% 30% 10%;
}
.how .second:after {
content: "and";
text-align: center;
padding: 10% 34% 10% 0;
position: absolute;
background-image: url("~src/assets/common-assets/monitor-assets/green-arrows/3.svg");
left: 25%;
top: 80%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.how .third {
position: relative;
padding: 0 5% 30% 5%;
}
.how .third:after {
content: "on which";
font-weight: bold;
text-align: center;
padding: 10% 41% 10% 0;
position: absolute;
background-image: url("~src/assets/common-assets/monitor-assets/green-arrows/3.svg");
left: 15%;
top: 83%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.how .fourth {
position: relative;
padding: 0 0 30% 0;
}
.how .fourth > div:first-child {
padding: 0 10% 0 10%;
}
.how .fourth:after {
content: "and";
text-align: center;
padding: 10% 34% 10% 0;
position: absolute;
background-image: url("~src/assets/common-assets/monitor-assets/green-arrows/3.svg");
left: 26%;
top: 79%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.how .fifth {
position: relative;
padding: 0 2% 30% 2%;
}
.how .fifth:after {
content: "We";
text-align: center;
padding: 10% 34% 10% 0;
position: absolute;
background-image: url("~src/assets/common-assets/monitor-assets/green-arrows/3.svg");
left: 27%;
top: 76%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.how .sixth {
padding: 0 5% 30% 0;
}
.how .sixth > div:first-child {
padding: 0 15% 0 15%;
}
.how .final {
padding: 20% 0 20% 0;
}
.how .final > div:first-child {
position: relative;
}
.how .final > div:first-child:before {
content: "";
position: absolute;
background-image: url("~src/assets/common-assets/monitor-assets/green-arrows/6.svg");
left: 34%;
top: -70%;
height: 70%;
width: 30%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.how .final > div:first-child:after {
content: "We make visualizations, graphs, reports and deliver all in a customisable tool";
text-align: center;
position: absolute;
left: -62%;
top: 85%;
width: 300px;
padding: 12% 0 0 54%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
}

72
monitor/how/how.component.ts
View File

@ -1,72 +0,0 @@
import {Component} from "@angular/core";
@Component({
selector: 'how',
template: `
<div class="how" uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-fade; delay: 100">
<div class="uk-flex uk-flex-wrap">
<div class="uk-width-1-3@s first" uk-scrollspy-class>
<div>
<img src="assets/common-assets/monitor-assets/how/1.png" loading="lazy">
</div>
<div class="uk-text-center uk-text-large">
<span class="uk-text-uppercase uk-text-bold">Starting</span> from existing<br>research-related data sources
</div>
</div>
<div class="uk-width-1-3@s second" uk-scrollspy-class>
<div>
<img src="assets/common-assets/monitor-assets/how/2.png" loading="lazy">
</div>
</div>
<div class="uk-width-1-3@s third" uk-scrollspy-class>
<div>
<img src="assets/common-assets/monitor-assets/how/3.png" loading="lazy">
</div>
<div class="uk-text-center uk-text-large">
build an open, global<br>and trusted Research graph
</div>
</div>
</div>
<div class="uk-flex uk-flex-wrap">
<div class="uk-width-1-3@s fourth uk-flex-last@s" uk-scrollspy-class>
<div>
<img src="assets/common-assets/monitor-assets/how/4.png" loading="lazy">
</div>
<div class="uk-text-center">
we perform <span class="uk-text-uppercase uk-text-bold">Statistical <br> Analysis</span> and produce <br>
<span class="uk-text-primary">Open Science Indicators</span>
</div>
</div>
<div class="uk-width-1-3@s fifth" uk-scrollspy-class>
<div>
<img src="assets/common-assets/monitor-assets/how/5.png" loading="lazy">
</div>
<div class="uk-text-center">
furthermore <span class="uk-text-uppercase uk-text-bold">Network<br>Analysis</span> producing <br>
<span class="uk-text-primary">Collaboration Indicators</span>
</div>
</div>
<div class="uk-width-1-3@s sixth uk-flex-first@s" uk-scrollspy-class>
<div>
<img src="assets/common-assets/monitor-assets/how/6.png" loading="lazy">
</div>
<div class="uk-text-center">
Often combine with external data <br>
(patents, social, company) and
perform <br><span class="uk-text-uppercase uk-text-bold">Impact Analysis</span> to
produce <br><span class="uk-text-primary">Innovation Indicators</span>
</div>
</div>
</div>
<div class="final" uk-scrollspy-class>
<div>
<img src="assets/common-assets/monitor-assets/how/7.png" loading="lazy">
</div>
</div>
</div>
`,
styleUrls: ['how.component.less']
})
export class HowComponent {
}

12
monitor/how/how.module.ts
View File

@ -1,12 +0,0 @@
import {NgModule} from "@angular/core";
import {CommonModule} from "@angular/common";
import {HowComponent} from "./how.component";
@NgModule({
imports: [CommonModule],
declarations: [HowComponent],
exports: [HowComponent]
})
export class HowModule {
}

4
monitor/indicators/indicator-themes.component.ts
View File

@ -26,7 +26,7 @@ import {Subscriber} from "rxjs";
<div> <div>
<h5>Indicator themes that we are covering in the Monitor dashboards.</h5> <h5>Indicator themes that we are covering in the Monitor dashboards.</h5>
<p> <p>
This is the current set of indicator themes we cover. We’ll keep enriching it as new requests and data are coming into the <a href="https://graph.openaire.eu" class="text-graph" target="_blank">OpenAIRE Research Graph</a>. We are at your disposal, should you have any recommendations! This is the current set of indicator themes we cover. We’ll keep enriching it as new requests and data are coming into the <a href="https://graph.openaire.eu" class="text-graph" target="_blank">OpenAIRE Graph</a>. We are at your disposal, should you have any recommendations!
</p> </p>
<p> <p>
Check out the indicator pages (for <a [routerLink]="['../funder']" [relativeTo]="route">funders</a>, Check out the indicator pages (for <a [routerLink]="['../funder']" [relativeTo]="route">funders</a>,
@ -50,7 +50,7 @@ import {Subscriber} from "rxjs";
<div> <div>
<h5 class="uk-margin-large-top uk-margin-large-bottom">Indicator themes that we are covering in the Monitor dashboards.</h5> <h5 class="uk-margin-large-top uk-margin-large-bottom">Indicator themes that we are covering in the Monitor dashboards.</h5>
<p> <p>
This is the current set of indicator themes we cover. We’ll keep enriching it as new requests and data are coming into the <a href="https://graph.openaire.eu" class="text-graph" target="_blank">OpenAIRE Research Graph</a>. We are at your disposal, should you have any recommendations! This is the current set of indicator themes we cover. We’ll keep enriching it as new requests and data are coming into the <a href="https://graph.openaire.eu" class="text-graph" target="_blank">OpenAIRE Graph</a>. We are at your disposal, should you have any recommendations!
</p> </p>
<p> <p>
Check out the indicator pages (for <a [routerLink]="['../funder']" [relativeTo]="route">funders</a>, Check out the indicator pages (for <a [routerLink]="['../funder']" [relativeTo]="route">funders</a>,

12
monitor/methodology/methodological-approach.component.ts
View File

@ -32,7 +32,7 @@ import {Breadcrumb} from "../../utils/breadcrumbs/breadcrumbs.component";
</li> </li>
<li><span class="uk-text-bold">Coverage and accuracy:</span> As detailed in <a <li><span class="uk-text-bold">Coverage and accuracy:</span> As detailed in <a
href="https://graph.openaire.eu/" target="_blank">graph.openaire.eu</a> href="https://graph.openaire.eu/" target="_blank">graph.openaire.eu</a>
multiple data sources are ingested in the OpenAIRE research graph for coverage to the fullest extent multiple data sources are ingested in the OpenAIRE Graph for coverage to the fullest extent
possible, in order to provide meaningful indicators. possible, in order to provide meaningful indicators.
</li> </li>
<li><span class="uk-text-bold">Clarity and replicability:</span> We describe our construction methodology in <li><span class="uk-text-bold">Clarity and replicability:</span> We describe our construction methodology in
@ -69,7 +69,7 @@ import {Breadcrumb} from "../../utils/breadcrumbs/breadcrumbs.component";
<h2 class="uk-margin-small-top">How? It’s about open data and collaboration<span class="text-graph">.</span></h2> <h2 class="uk-margin-small-top">How? It’s about open data and collaboration<span class="text-graph">.</span></h2>
<ul class="uk-list uk-list-bullet uk-margin-large-top"> <ul class="uk-list uk-list-bullet uk-margin-large-top">
<li class="uk-flex uk-flex-column uk-margin-medium-bottom"> <li class="uk-flex uk-flex-column uk-margin-medium-bottom">
<span class="uk-text-large uk-margin-small-bottom">Built on the <span class="uk-text-bold">OpenAire Research Graph</span></span> <span class="uk-text-large uk-margin-small-bottom">Built on the <span class="uk-text-bold">OpenAire Graph</span></span>
<span>Linked scholarly information from open initiatives around the world. Beyond publications.</span> <span>Linked scholarly information from open initiatives around the world. Beyond publications.</span>
</li> </li>
<li class="uk-flex uk-flex-column uk-margin-medium-bottom"> <li class="uk-flex uk-flex-column uk-margin-medium-bottom">
@ -84,7 +84,7 @@ import {Breadcrumb} from "../../utils/breadcrumbs/breadcrumbs.component";
</div> </div>
</div> </div>
<div class="uk-position-relative"> <div class="uk-position-relative">
<img class="uk-visible@m uk-height-1-1 uk-position-center-right" src="assets/common-assets/common/graph-nodes.svg" alt="OpenAIRE Research Graph" loading="lazy"> <img class="uk-visible@m uk-height-1-1 uk-position-center-right" src="assets/common-assets/common/graph-nodes.svg" alt="OpenAIRE Graph" loading="lazy">
</div> </div>
</div> </div>
</div> </div>
@ -105,7 +105,7 @@ import {Breadcrumb} from "../../utils/breadcrumbs/breadcrumbs.component";
</li> </li>
<li class="uk-margin-small-bottom"><span class="uk-text-bold">Coverage and accuracy:</span> As detailed in <a <li class="uk-margin-small-bottom"><span class="uk-text-bold">Coverage and accuracy:</span> As detailed in <a
href="https://graph.openaire.eu/" target="_blank">graph.openaire.eu</a> href="https://graph.openaire.eu/" target="_blank">graph.openaire.eu</a>
multiple data sources are ingested in the OpenAIRE research graph for coverage to the fullest extent multiple data sources are ingested in the OpenAIRE Graph for coverage to the fullest extent
possible, in order to provide meaningful indicators. possible, in order to provide meaningful indicators.
</li> </li>
<li class="uk-margin-small-bottom"><span class="uk-text-bold">Clarity and replicability:</span> We describe our construction methodology in <li class="uk-margin-small-bottom"><span class="uk-text-bold">Clarity and replicability:</span> We describe our construction methodology in
@ -131,7 +131,7 @@ import {Breadcrumb} from "../../utils/breadcrumbs/breadcrumbs.component";
</div> </div>
</div> </div>
<div class="uk-margin-xlarge-top uk-padding-large"> <div class="uk-margin-xlarge-top uk-padding-large">
<img src="assets/common-assets/common/graph-nodes.svg" alt="OpenAIRE Research Graph" loading="lazy"> <img src="assets/common-assets/common/graph-nodes.svg" alt="OpenAIRE Graph" loading="lazy">
</div> </div>
<div class="uk-margin-top uk-margin-large-bottom"> <div class="uk-margin-top uk-margin-large-bottom">
<span class="uk-text-large text-graph">Completeness, inclusion, transparency and replicability</span> <span class="uk-text-large text-graph">Completeness, inclusion, transparency and replicability</span>
@ -139,7 +139,7 @@ import {Breadcrumb} from "../../utils/breadcrumbs/breadcrumbs.component";
<h2 class="uk-margin-remove-top uk-padding uk-padding-remove-vertical uk-padding-remove-left">It’s about open data and collaboration<span class="text-graph">.</span></h2> <h2 class="uk-margin-remove-top uk-padding uk-padding-remove-vertical uk-padding-remove-left">It’s about open data and collaboration<span class="text-graph">.</span></h2>
<ul class="uk-list uk-list-bullet uk-margin-large-top"> <ul class="uk-list uk-list-bullet uk-margin-large-top">
<li class="uk-flex uk-flex-column uk-margin-medium-bottom"> <li class="uk-flex uk-flex-column uk-margin-medium-bottom">
<span class="uk-text-large uk-margin-small-bottom">Built on the <span class="uk-text-bold">OpenAire Research Graph</span></span> <span class="uk-text-large uk-margin-small-bottom">Built on the <span class="uk-text-bold">OpenAire Graph</span></span>
<span>Linked scholarly information from open initiatives around the world. Beyond publications.</span> <span>Linked scholarly information from open initiatives around the world. Beyond publications.</span>
</li> </li>
<li class="uk-flex uk-flex-column uk-margin-medium-bottom"> <li class="uk-flex uk-flex-column uk-margin-medium-bottom">

8
monitor/methodology/methodology.module.ts
View File

@ -5,10 +5,7 @@ import {MethodolocigalApproachComponent} from "./methodological-approach.compone
import {RouterModule} from "@angular/router"; import {RouterModule} from "@angular/router";
import {PreviousRouteRecorder} from "../../utils/piwik/previousRouteRecorder.guard"; import {PreviousRouteRecorder} from "../../utils/piwik/previousRouteRecorder.guard";
import {PageContentModule} from "../../dashboard/sharedComponents/page-content/page-content.module"; import {PageContentModule} from "../../dashboard/sharedComponents/page-content/page-content.module";
import {HowModule} from "../how/how.module";
import {IconsModule} from "../../utils/icons/icons.module"; import {IconsModule} from "../../utils/icons/icons.module";
import {IconsService} from "../../utils/icons/icons.service";
import {graph} from "../../utils/icons/icons";
import {BreadcrumbsModule} from "../../utils/breadcrumbs/breadcrumbs.module"; import {BreadcrumbsModule} from "../../utils/breadcrumbs/breadcrumbs.module";
import {SliderTabsModule} from "../../sharedComponents/tabs/slider-tabs.module"; import {SliderTabsModule} from "../../sharedComponents/tabs/slider-tabs.module";
import {HelperModule} from "../../utils/helper/helper.module"; import {HelperModule} from "../../utils/helper/helper.module";
@ -32,11 +29,8 @@ import {HelperModule} from "../../utils/helper/helper.module";
component: MethodolocigalApproachComponent, component: MethodolocigalApproachComponent,
canDeactivate: [PreviousRouteRecorder] canDeactivate: [PreviousRouteRecorder]
} }
]), PageContentModule, HowModule, IconsModule, BreadcrumbsModule, SliderTabsModule, HelperModule], ]), PageContentModule, IconsModule, BreadcrumbsModule, SliderTabsModule, HelperModule],
exports: [TerminologyComponent, MethodolocigalApproachComponent] exports: [TerminologyComponent, MethodolocigalApproachComponent]
}) })
export class MethodologyModule { export class MethodologyModule {
constructor(private iconsService: IconsService) {
this.iconsService.registerIcons([graph]);
}
} }

14
monitor/methodology/terminology.component.ts
View File

@ -42,10 +42,9 @@ declare var ResizeObserver;
<div id="graph_element" #graph_element class="uk-blur-background" uk-sticky="bottom: true" <div id="graph_element" #graph_element class="uk-blur-background" uk-sticky="bottom: true"
[attr.offset]="graph_offset"> [attr.offset]="graph_offset">
<div class="uk-container uk-container-large uk-margin-small-top uk-margin-small-bottom"> <div class="uk-container uk-container-large uk-margin-small-top uk-margin-small-bottom">
<icon name="graph" customClass="text-graph"></icon> <a href="https://graph.openaire.eu" target="_blank" class="uk-width-1-1 uk-width-auto@m">
<span class="uk-margin-small-left uk-text-meta">More information for </span> <img src="assets/common-assets/openaire-badge-1.png" alt="Powered by OpenAIRE graph" style="height: 17px;">
<a href="https://graph.openaire.eu" target="_blank" class="text-graph">OpenAIRE Research Graph</a> </a>
<span class="uk-text-meta">.</span>
</div> </div>
</div> </div>
<div class="uk-section uk-container uk-container-large" uk-scrollspy-class> <div class="uk-section uk-container uk-container-large" uk-scrollspy-class>
@ -87,10 +86,9 @@ declare var ResizeObserver;
<div id="graph_element" #graph_element class="uk-blur-background" uk-sticky="bottom: true" <div id="graph_element" #graph_element class="uk-blur-background" uk-sticky="bottom: true"
[attr.offset]="graph_offset"> [attr.offset]="graph_offset">
<div class="uk-container uk-container-large uk-margin-small-top uk-margin-small-bottom uk-text-xsmall uk-text-right"> <div class="uk-container uk-container-large uk-margin-small-top uk-margin-small-bottom uk-text-xsmall uk-text-right">
<icon name="graph" customClass="text-graph"></icon> <a href="https://graph.openaire.eu" target="_blank" class="uk-width-1-1 uk-width-auto@m">
<span class="uk-margin-small-left uk-text-meta">More information for </span> <img src="assets/common-assets/openaire-badge-1.png" alt="Powered by OpenAIRE graph" style="height: 17px;">
<a href="https://graph.openaire.eu" target="_blank" class="text-graph">OpenAIRE Research Graph</a> </a>
<span class="uk-text-meta">.</span>
</div> </div>
</div> </div>
<div> <div>

163
sharedComponents/input/input.component.ts
View File

@ -15,13 +15,12 @@ import {
ViewChild, ViewChild,
ViewChildren ViewChildren
} from "@angular/core"; } from "@angular/core";
import {AbstractControl, UntypedFormArray, UntypedFormControl, ValidatorFn} from "@angular/forms"; import {AbstractControl, UntypedFormArray, UntypedFormControl, UntypedFormGroup, ValidatorFn} from "@angular/forms";
import {HelperFunctions} from "../../utils/HelperFunctions.class"; import {HelperFunctions} from "../../utils/HelperFunctions.class";
import {BehaviorSubject, Subscription} from "rxjs"; import {BehaviorSubject, Subscription} from "rxjs";
import {EnvProperties} from "../../utils/properties/env-properties"; import {EnvProperties} from "../../utils/properties/env-properties";
import {properties} from "../../../../environments/environment"; import {properties} from "../../../../environments/environment";
import {ClickEvent} from "../../utils/click/click-outside-or-esc.directive"; import {ClickEvent} from "../../utils/click/click-outside-or-esc.directive";
import {element} from "protractor";
export type InputType = export type InputType =
'text' 'text'
@ -31,7 +30,8 @@ export type InputType =
| 'autocomplete_soft' | 'autocomplete_soft'
| 'textarea' | 'textarea'
| 'select' | 'select'
| 'chips'; | 'chips'
| 'year-range';
export interface Option { export interface Option {
icon?: string, icon?: string,
@ -48,6 +48,16 @@ export interface Placeholder {
static?: boolean static?: boolean
} }
export interface YearRange {
from: ControlConfiguration,
to: ControlConfiguration
}
export interface ControlConfiguration {
control: string,
placeholder: string
}
declare var UIkit; declare var UIkit;
/** /**
@ -63,11 +73,11 @@ declare var UIkit;
<div *ngIf="formControl" [id]="id"> <div *ngIf="formControl" [id]="id">
<div class="input-wrapper" [class.disabled]="formControl.disabled" [class.opened]="opened" <div class="input-wrapper" [class.disabled]="formControl.disabled" [class.opened]="opened"
[class.focused]="focused" [ngClass]="inputClass" [class.hint]="hint" [class.focused]="focused" [ngClass]="inputClass" [class.hint]="hint"
[class.active]="(formAsControl?.value || selectable || formAsArray?.length > 0 || getLabel(formAsControl?.value)) && !focused" [class.active]="!focused && (formAsControl?.value || selectable || formAsArray?.length > 0 || getLabel(formAsControl?.value) || yearRangeActive)"
[class.danger]="(formControl.invalid && (formControl.touched || !!searchControl?.touched)) || (!!searchControl?.invalid && !!searchControl?.touched)"> [class.danger]="(formControl.invalid && (formControl.touched || !!searchControl?.touched)) || (!!searchControl?.invalid && !!searchControl?.touched)">
<div #inputBox class="input-box" [class.select]="selectable" click-outside-or-esc <div #inputBox class="input-box" [class.select]="selectable" click-outside-or-esc
[class.static]="placeholderInfo?.static" (clickOutside)="click($event)"> [class.static]="placeholderInfo?.static" (clickOutside)="click($event)">
<div *ngIf="!placeholderInfo?.static && placeholderInfo.label" class="placeholder"> <div *ngIf="!placeholderInfo?.static && placeholderInfo?.label" class="placeholder">
<label>{{placeholderInfo.label}} <sup *ngIf="required">*</sup></label> <label>{{placeholderInfo.label}} <sup *ngIf="required">*</sup></label>
</div> </div>
<div class="uk-flex" [class.uk-flex-middle]="type !== 'textarea'" <div class="uk-flex" [class.uk-flex-middle]="type !== 'textarea'"
@ -140,6 +150,17 @@ declare var UIkit;
</div> </div>
</div> </div>
</ng-template> </ng-template>
<ng-template [ngIf]="type === 'year-range' && yearRange && formAsGroup">
<div class="uk-width-2-5">
<input #input class="input uk-text-center uk-text-truncate" [attr.placeholder]="yearRange.from.placeholder"
maxlength="4" (click)="activeIndex = 0;$event.preventDefault()" [formControl]="getFormByName(yearRange.from.control)">
</div>
<div class="uk-width-1-5 uk-text-center">-</div>
<div class="uk-width-2-5">
<input #input class="input uk-text-center uk-text-truncate" [attr.placeholder]="yearRange.to.placeholder"
maxlength="4" (click)="activeIndex = 1;$event.preventDefault()" [formControl]="getFormByName(yearRange.to.control)">
</div>
</ng-template>
<div <div
*ngIf="(formControl.disabled && disabledIcon) || icon || (selectable && selectArrow) || type === 'autocomplete' || searchable" *ngIf="(formControl.disabled && disabledIcon) || icon || (selectable && selectArrow) || type === 'autocomplete' || searchable"
class="uk-margin-small-left icon"> class="uk-margin-small-left icon">
@ -157,6 +178,7 @@ declare var UIkit;
</button> </button>
</ng-template> </ng-template>
</div> </div>
<!-- use action-icon class in order to apply css in your icon button-->
<ng-content select="[action]"></ng-content> <ng-content select="[action]"></ng-content>
</div> </div>
<div class="tools"> <div class="tools">
@ -179,7 +201,7 @@ declare var UIkit;
</div> </div>
</div> </div>
<span *ngIf="formControl?.invalid && formControl?.touched" class="uk-text-danger"> <span *ngIf="formControl?.invalid && formControl?.touched" class="uk-text-danger">
<span *ngIf="formControl.errors.error">{{formControl.errors.error}}</span> <span *ngIf="errors?.error">{{errors?.error}}</span>
<span *ngIf="type === 'URL' || type === 'logoURL'">Please provide a valid URL (e.g. https://example.com)</span> <span *ngIf="type === 'URL' || type === 'logoURL'">Please provide a valid URL (e.g. https://example.com)</span>
</span> </span>
<span class="uk-text-small uk-text-danger"> <span class="uk-text-small uk-text-danger">
@ -213,7 +235,7 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
@Input() tooltip: boolean = false; @Input() tooltip: boolean = false;
@Input() searchable: boolean = false; @Input() searchable: boolean = false;
/** Text */ /** Text */
@ViewChild('input') input: ElementRef; @ViewChildren('input') input: QueryList<ElementRef>;
/** Textarea options */ /** Textarea options */
@ViewChild('textArea') textArea: ElementRef; @ViewChild('textArea') textArea: ElementRef;
@Input('rows') rows: number = 3; @Input('rows') rows: number = 3;
@ -236,6 +258,10 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
@Input() visibleChips: number = 1; @Input() visibleChips: number = 1;
@Input() separators: string[] = []; @Input() separators: string[] = [];
@Input() noWrap: boolean = false; @Input() noWrap: boolean = false;
/** Year Range Configuration */
@Input() yearRange: YearRange;
public activeIndex: 0 | 1 | null = null;
@Input() visibleRows: number = -1; @Input() visibleRows: number = -1;
@Input() extendEnter: () => void = null; @Input() extendEnter: () => void = null;
@Output() focusEmitter: EventEmitter<boolean> = new EventEmitter<boolean>(); @Output() focusEmitter: EventEmitter<boolean> = new EventEmitter<boolean>();
@ -259,7 +285,9 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
@Input() @Input()
set placeholder(placeholder: string | Placeholder) { set placeholder(placeholder: string | Placeholder) {
if (typeof placeholder === 'string') { if(this.type === 'year-range') {
this.placeholderInfo = null;
} else if (typeof placeholder === 'string') {
this.placeholderInfo = {label: placeholder, static: false}; this.placeholderInfo = {label: placeholder, static: false};
} else { } else {
if (placeholder.static && (this.type === 'autocomplete' || this.hint)) { if (placeholder.static && (this.type === 'autocomplete' || this.hint)) {
@ -325,9 +353,9 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
@HostListener('window:keydown.arrowLeft', ['$event']) @HostListener('window:keydown.arrowLeft', ['$event'])
arrowLeft(event: KeyboardEvent) { arrowLeft(event: KeyboardEvent) {
if (this.focused) { if (this.type === 'chips' && this.focused) {
event.preventDefault();
if (this.activeElement.getValue()) { if (this.activeElement.getValue()) {
event.preventDefault();
let index = this.chips.toArray().indexOf(this.activeElement.getValue()); let index = this.chips.toArray().indexOf(this.activeElement.getValue());
if (index > 0) { if (index > 0) {
this.activeElement.next(this.chips.get(index - 1)); this.activeElement.next(this.chips.get(index - 1));
@ -339,9 +367,9 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
@HostListener('window:keydown.arrowRight', ['$event']) @HostListener('window:keydown.arrowRight', ['$event'])
arrowRight(event: KeyboardEvent) { arrowRight(event: KeyboardEvent) {
if (this.focused) { if (this.type === 'chips' && this.focused) {
event.preventDefault();
if (this.activeElement.getValue()) { if (this.activeElement.getValue()) {
event.preventDefault();
let index = this.chips.toArray().indexOf(this.activeElement.getValue()); let index = this.chips.toArray().indexOf(this.activeElement.getValue());
if (index < this.chips.length - 1) { if (index < this.chips.length - 1) {
this.activeElement.next(this.chips.get(index + 1)); this.activeElement.next(this.chips.get(index + 1));
@ -432,6 +460,22 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
this.unsubscribe(); this.unsubscribe();
} }
getFormByName(name: string): UntypedFormControl {
if (this.formControl instanceof UntypedFormGroup) {
return <UntypedFormControl>this.formControl.get(name);
} else {
return null;
}
}
get formAsGroup(): UntypedFormGroup {
if (this.formControl instanceof UntypedFormGroup) {
return this.formControl;
} else {
return null;
}
}
get formAsControl(): UntypedFormControl { get formAsControl(): UntypedFormControl {
if (this.formControl instanceof UntypedFormControl) { if (this.formControl instanceof UntypedFormControl) {
return this.formControl; return this.formControl;
@ -448,6 +492,25 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
} }
} }
get yearRangeActive(): boolean {
if(this.yearRange) {
return this.formAsGroup && (this.getFormByName(this.yearRange.from.control)?.value || this.getFormByName(this.yearRange.to.control)?.value);
}
return false;
}
get errors(): any {
if(this.formAsGroup) {
return (this.formAsGroup.errors
?this.formAsGroup.errors:(this.getFormByName(this.yearRange.from.control).errors
?this.getFormByName(this.yearRange.from.control).errors:this.getFormByName(this.yearRange.to.control).errors));
} else if(this.formAsControl) {
return this.formAsControl.errors;
} else {
return this.searchControl.errors;
}
}
reset() { reset() {
this.secure = true; this.secure = true;
this.unsubscribe(); this.unsubscribe();
@ -455,7 +518,7 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
if (this.type === 'logoURL') { if (this.type === 'logoURL') {
this.secure = (!this.initValue || this.initValue.includes('https://')); this.secure = (!this.initValue || this.initValue.includes('https://'));
} }
if (this.optionsArray) { if (this.optionsArray?.length > 0) {
this.filteredOptions = this.filter(''); this.filteredOptions = this.filter('');
this.cdr.detectChanges(); this.cdr.detectChanges();
} }
@ -475,26 +538,28 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
} }
})); }));
} }
if (this.formControl.validator) { if (this.formAsControl?.validator) {
let validator = this.formControl.validator({} as AbstractControl); let validator = this.formControl.validator({} as AbstractControl);
this.required = (validator && validator.required); this.required = (validator && validator.required);
} }
this.subscriptions.push(this.formControl.valueChanges.subscribe(value => { this.subscriptions.push(this.formControl.valueChanges.subscribe(value => {
if (this.formControl.enabled) { if (this.formControl.enabled) {
value = (value === '') ? null : value; if(this.type !== 'year-range') {
if (this.type === 'logoURL') { value = (value === '') ? null : value;
this.secure = (!value || value.includes('https://')); if (this.type === 'logoURL') {
} this.secure = (!value || value.includes('https://'));
if (this.initValue === value || (this.initValue === '' && value === null)) { }
this.formControl.markAsPristine(); if (this.initValue === value || (this.initValue === '' && value === null)) {
} else { this.formControl.markAsPristine();
this.formControl.markAsDirty(); } else {
} this.formControl.markAsDirty();
if (this.type === 'autocomplete_soft') { }
this.filteredOptions = this.filter(value); if (this.type === 'autocomplete_soft') {
this.cdr.detectChanges(); this.filteredOptions = this.filter(value);
if (this.focused) { this.cdr.detectChanges();
this.open(true); if (this.focused) {
this.open(true);
}
} }
} }
if ((this.value && value && this.value !== value) || (!this.value && value) || this.value && !value) { if ((this.value && value && this.value !== value) || (!this.value && value) || this.value && !value) {
@ -502,8 +567,36 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
} }
} }
})); }));
if(this.formAsGroup) {
let fromControl = this.formAsGroup.get(this.yearRange.from.control);
this.subscriptions.push(fromControl.valueChanges.subscribe(value => {
let from = this.initValue[this.yearRange.from.control];
if (from === value || (from === '' && value === null)) {
fromControl.markAsPristine();
} else {
fromControl.markAsDirty();
}
if(fromControl.valid) {
if(this.activeIndex === 0 && value) {
this.activeIndex = 1;
this.input.get(this.activeIndex).nativeElement.focus();
}
}
}));
let toControl = this.formAsGroup.get(this.yearRange.to.control);
this.subscriptions.push(toControl.valueChanges.subscribe(value => {
let to = this.initValue[this.yearRange.to.control];
if (to === value || (to === '' && value === null)) {
toControl.markAsPristine();
} else {
toControl.markAsDirty();
}
}));
}
if (this.input) { if (this.input) {
this.input.nativeElement.disabled = this.formControl.disabled; this.input.forEach(input => {
input.nativeElement.disabled = this.formControl.disabled;
});
} }
} }
@ -598,14 +691,17 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
} }
focus(value: boolean, event = null) { focus(value: boolean, event = null) {
if(!this.activeIndex) {
this.activeIndex = 0;
}
if (this.focused) { if (this.focused) {
this.formControl.markAsTouched(); this.formControl.markAsTouched();
} }
this.focused = value; this.focused = value;
this.cdr.detectChanges(); this.cdr.detectChanges();
if (this.focused) { if (this.focused) {
if (this.input) { if (this.input?.length > 0) {
this.input.nativeElement.focus(); this.input.get(this.activeIndex).nativeElement.focus();
} else if (this.textArea) { } else if (this.textArea) {
this.textArea.nativeElement.focus(); this.textArea.nativeElement.focus();
} else if (this.searchInput) { } else if (this.searchInput) {
@ -618,9 +714,12 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
this.open(true); this.open(true);
} }
} else { } else {
this.activeIndex = null;
this.open(false); this.open(false);
if (this.input) { if (this.input) {
this.input.nativeElement.blur(); this.input.forEach(input => {
input.nativeElement.blur();
})
} else if (this.textArea) { } else if (this.textArea) {
this.textArea.nativeElement.blur(); this.textArea.nativeElement.blur();
} else if (this.searchInput) { } else if (this.searchInput) {

10
utils/modal/alert.ts
View File

@ -185,14 +185,16 @@ export class AlertModal implements OnInit, AfterViewInit, OnDestroy {
* Opens an alert window creating backdrop. * Opens an alert window creating backdrop.
*/ */
open() { open() {
UIkit.modal(this.element.nativeElement).show(); if(typeof UIkit !== "undefined") {
UIkit.modal(this.element.nativeElement).show();
}
} }
/** /**
* ok method closes the modal and emits modalOutput. * ok method closes the modal and emits modalOutput.
*/ */
ok() { ok() {
if (!this.stayOpen) { if (!this.stayOpen && typeof UIkit !== "undefined") {
UIkit.modal(this.element.nativeElement).hide(); UIkit.modal(this.element.nativeElement).hide();
} }
if (!this.choice) { if (!this.choice) {
@ -209,6 +211,8 @@ export class AlertModal implements OnInit, AfterViewInit, OnDestroy {
* cancel method closes the modal. * cancel method closes the modal.
*/ */
cancel() { cancel() {
UIkit.modal(this.element.nativeElement).hide(); if(typeof UIkit !== "undefined") {
UIkit.modal(this.element.nativeElement).hide();
}
} }
} }