Monitor release 16th May 2023 #4
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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 {
|
||||
|
||||
}
|
||||
|
|
@ -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 {
|
||||
|
||||
}
|
||||
|
|
@ -26,7 +26,7 @@ import {Subscriber} from "rxjs";
|
|||
<div>
|
||||
<h5>Indicator themes that we are covering in the Monitor dashboards.</h5>
|
||||
<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>
|
||||
Check out the indicator pages (for <a [routerLink]="['../funder']" [relativeTo]="route">funders</a>,
|
||||
|
|
@ -50,7 +50,7 @@ import {Subscriber} from "rxjs";
|
|||
<div>
|
||||
<h5 class="uk-margin-large-top uk-margin-large-bottom">Indicator themes that we are covering in the Monitor dashboards.</h5>
|
||||
<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>
|
||||
Check out the indicator pages (for <a [routerLink]="['../funder']" [relativeTo]="route">funders</a>,
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@ import {Breadcrumb} from "../../utils/breadcrumbs/breadcrumbs.component";
|
|||
</li>
|
||||
<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>
|
||||
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.
|
||||
</li>
|
||||
<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>
|
||||
<ul class="uk-list uk-list-bullet uk-margin-large-top">
|
||||
<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>
|
||||
</li>
|
||||
<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 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>
|
||||
|
|
@ -105,7 +105,7 @@ import {Breadcrumb} from "../../utils/breadcrumbs/breadcrumbs.component";
|
|||
</li>
|
||||
<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>
|
||||
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.
|
||||
</li>
|
||||
<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 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 class="uk-margin-top uk-margin-large-bottom">
|
||||
<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>
|
||||
<ul class="uk-list uk-list-bullet uk-margin-large-top">
|
||||
<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>
|
||||
</li>
|
||||
<li class="uk-flex uk-flex-column uk-margin-medium-bottom">
|
||||
|
|
|
|||
|
|
@ -5,10 +5,7 @@ import {MethodolocigalApproachComponent} from "./methodological-approach.compone
|
|||
import {RouterModule} from "@angular/router";
|
||||
import {PreviousRouteRecorder} from "../../utils/piwik/previousRouteRecorder.guard";
|
||||
import {PageContentModule} from "../../dashboard/sharedComponents/page-content/page-content.module";
|
||||
import {HowModule} from "../how/how.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 {SliderTabsModule} from "../../sharedComponents/tabs/slider-tabs.module";
|
||||
import {HelperModule} from "../../utils/helper/helper.module";
|
||||
|
|
@ -32,11 +29,8 @@ import {HelperModule} from "../../utils/helper/helper.module";
|
|||
component: MethodolocigalApproachComponent,
|
||||
canDeactivate: [PreviousRouteRecorder]
|
||||
}
|
||||
]), PageContentModule, HowModule, IconsModule, BreadcrumbsModule, SliderTabsModule, HelperModule],
|
||||
]), PageContentModule, IconsModule, BreadcrumbsModule, SliderTabsModule, HelperModule],
|
||||
exports: [TerminologyComponent, MethodolocigalApproachComponent]
|
||||
})
|
||||
export class MethodologyModule {
|
||||
constructor(private iconsService: IconsService) {
|
||||
this.iconsService.registerIcons([graph]);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -42,10 +42,9 @@ declare var ResizeObserver;
|
|||
<div id="graph_element" #graph_element class="uk-blur-background" uk-sticky="bottom: true"
|
||||
[attr.offset]="graph_offset">
|
||||
<div class="uk-container uk-container-large uk-margin-small-top uk-margin-small-bottom">
|
||||
<icon name="graph" customClass="text-graph"></icon>
|
||||
<span class="uk-margin-small-left uk-text-meta">More information for </span>
|
||||
<a href="https://graph.openaire.eu" target="_blank" class="text-graph">OpenAIRE Research Graph</a>
|
||||
<span class="uk-text-meta">.</span>
|
||||
<a href="https://graph.openaire.eu" target="_blank" class="uk-width-1-1 uk-width-auto@m">
|
||||
<img src="assets/common-assets/openaire-badge-1.png" alt="Powered by OpenAIRE graph" style="height: 17px;">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<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"
|
||||
[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">
|
||||
<icon name="graph" customClass="text-graph"></icon>
|
||||
<span class="uk-margin-small-left uk-text-meta">More information for </span>
|
||||
<a href="https://graph.openaire.eu" target="_blank" class="text-graph">OpenAIRE Research Graph</a>
|
||||
<span class="uk-text-meta">.</span>
|
||||
<a href="https://graph.openaire.eu" target="_blank" class="uk-width-1-1 uk-width-auto@m">
|
||||
<img src="assets/common-assets/openaire-badge-1.png" alt="Powered by OpenAIRE graph" style="height: 17px;">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -15,13 +15,12 @@ import {
|
|||
ViewChild,
|
||||
ViewChildren
|
||||
} 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 {BehaviorSubject, Subscription} from "rxjs";
|
||||
import {EnvProperties} from "../../utils/properties/env-properties";
|
||||
import {properties} from "../../../../environments/environment";
|
||||
import {ClickEvent} from "../../utils/click/click-outside-or-esc.directive";
|
||||
import {element} from "protractor";
|
||||
|
||||
export type InputType =
|
||||
'text'
|
||||
|
|
@ -31,7 +30,8 @@ export type InputType =
|
|||
| 'autocomplete_soft'
|
||||
| 'textarea'
|
||||
| 'select'
|
||||
| 'chips';
|
||||
| 'chips'
|
||||
| 'year-range';
|
||||
|
||||
export interface Option {
|
||||
icon?: string,
|
||||
|
|
@ -48,6 +48,16 @@ export interface Placeholder {
|
|||
static?: boolean
|
||||
}
|
||||
|
||||
export interface YearRange {
|
||||
from: ControlConfiguration,
|
||||
to: ControlConfiguration
|
||||
}
|
||||
|
||||
export interface ControlConfiguration {
|
||||
control: string,
|
||||
placeholder: string
|
||||
}
|
||||
|
||||
declare var UIkit;
|
||||
|
||||
/**
|
||||
|
|
@ -63,11 +73,11 @@ declare var UIkit;
|
|||
<div *ngIf="formControl" [id]="id">
|
||||
<div class="input-wrapper" [class.disabled]="formControl.disabled" [class.opened]="opened"
|
||||
[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)">
|
||||
<div #inputBox class="input-box" [class.select]="selectable" click-outside-or-esc
|
||||
[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>
|
||||
</div>
|
||||
<div class="uk-flex" [class.uk-flex-middle]="type !== 'textarea'"
|
||||
|
|
@ -140,6 +150,17 @@ declare var UIkit;
|
|||
</div>
|
||||
</div>
|
||||
</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
|
||||
*ngIf="(formControl.disabled && disabledIcon) || icon || (selectable && selectArrow) || type === 'autocomplete' || searchable"
|
||||
class="uk-margin-small-left icon">
|
||||
|
|
@ -157,6 +178,7 @@ declare var UIkit;
|
|||
</button>
|
||||
</ng-template>
|
||||
</div>
|
||||
<!-- use action-icon class in order to apply css in your icon button-->
|
||||
<ng-content select="[action]"></ng-content>
|
||||
</div>
|
||||
<div class="tools">
|
||||
|
|
@ -179,7 +201,7 @@ declare var UIkit;
|
|||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<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() searchable: boolean = false;
|
||||
/** Text */
|
||||
@ViewChild('input') input: ElementRef;
|
||||
@ViewChildren('input') input: QueryList<ElementRef>;
|
||||
/** Textarea options */
|
||||
@ViewChild('textArea') textArea: ElementRef;
|
||||
@Input('rows') rows: number = 3;
|
||||
|
|
@ -236,6 +258,10 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
|
|||
@Input() visibleChips: number = 1;
|
||||
@Input() separators: string[] = [];
|
||||
@Input() noWrap: boolean = false;
|
||||
/** Year Range Configuration */
|
||||
@Input() yearRange: YearRange;
|
||||
public activeIndex: 0 | 1 | null = null;
|
||||
|
||||
@Input() visibleRows: number = -1;
|
||||
@Input() extendEnter: () => void = null;
|
||||
@Output() focusEmitter: EventEmitter<boolean> = new EventEmitter<boolean>();
|
||||
|
|
@ -259,7 +285,9 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
|
|||
|
||||
@Input()
|
||||
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};
|
||||
} else {
|
||||
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'])
|
||||
arrowLeft(event: KeyboardEvent) {
|
||||
if (this.focused) {
|
||||
event.preventDefault();
|
||||
if (this.type === 'chips' && this.focused) {
|
||||
if (this.activeElement.getValue()) {
|
||||
event.preventDefault();
|
||||
let index = this.chips.toArray().indexOf(this.activeElement.getValue());
|
||||
if (index > 0) {
|
||||
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'])
|
||||
arrowRight(event: KeyboardEvent) {
|
||||
if (this.focused) {
|
||||
event.preventDefault();
|
||||
if (this.type === 'chips' && this.focused) {
|
||||
if (this.activeElement.getValue()) {
|
||||
event.preventDefault();
|
||||
let index = this.chips.toArray().indexOf(this.activeElement.getValue());
|
||||
if (index < this.chips.length - 1) {
|
||||
this.activeElement.next(this.chips.get(index + 1));
|
||||
|
|
@ -432,6 +460,22 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
|
|||
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 {
|
||||
if (this.formControl instanceof UntypedFormControl) {
|
||||
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() {
|
||||
this.secure = true;
|
||||
this.unsubscribe();
|
||||
|
|
@ -455,7 +518,7 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
|
|||
if (this.type === 'logoURL') {
|
||||
this.secure = (!this.initValue || this.initValue.includes('https://'));
|
||||
}
|
||||
if (this.optionsArray) {
|
||||
if (this.optionsArray?.length > 0) {
|
||||
this.filteredOptions = this.filter('');
|
||||
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);
|
||||
this.required = (validator && validator.required);
|
||||
}
|
||||
this.subscriptions.push(this.formControl.valueChanges.subscribe(value => {
|
||||
if (this.formControl.enabled) {
|
||||
value = (value === '') ? null : value;
|
||||
if (this.type === 'logoURL') {
|
||||
this.secure = (!value || value.includes('https://'));
|
||||
}
|
||||
if (this.initValue === value || (this.initValue === '' && value === null)) {
|
||||
this.formControl.markAsPristine();
|
||||
} else {
|
||||
this.formControl.markAsDirty();
|
||||
}
|
||||
if (this.type === 'autocomplete_soft') {
|
||||
this.filteredOptions = this.filter(value);
|
||||
this.cdr.detectChanges();
|
||||
if (this.focused) {
|
||||
this.open(true);
|
||||
if(this.type !== 'year-range') {
|
||||
value = (value === '') ? null : value;
|
||||
if (this.type === 'logoURL') {
|
||||
this.secure = (!value || value.includes('https://'));
|
||||
}
|
||||
if (this.initValue === value || (this.initValue === '' && value === null)) {
|
||||
this.formControl.markAsPristine();
|
||||
} else {
|
||||
this.formControl.markAsDirty();
|
||||
}
|
||||
if (this.type === 'autocomplete_soft') {
|
||||
this.filteredOptions = this.filter(value);
|
||||
this.cdr.detectChanges();
|
||||
if (this.focused) {
|
||||
this.open(true);
|
||||
}
|
||||
}
|
||||
}
|
||||
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) {
|
||||
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) {
|
||||
if(!this.activeIndex) {
|
||||
this.activeIndex = 0;
|
||||
}
|
||||
if (this.focused) {
|
||||
this.formControl.markAsTouched();
|
||||
}
|
||||
this.focused = value;
|
||||
this.cdr.detectChanges();
|
||||
if (this.focused) {
|
||||
if (this.input) {
|
||||
this.input.nativeElement.focus();
|
||||
if (this.input?.length > 0) {
|
||||
this.input.get(this.activeIndex).nativeElement.focus();
|
||||
} else if (this.textArea) {
|
||||
this.textArea.nativeElement.focus();
|
||||
} else if (this.searchInput) {
|
||||
|
|
@ -618,9 +714,12 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
|
|||
this.open(true);
|
||||
}
|
||||
} else {
|
||||
this.activeIndex = null;
|
||||
this.open(false);
|
||||
if (this.input) {
|
||||
this.input.nativeElement.blur();
|
||||
this.input.forEach(input => {
|
||||
input.nativeElement.blur();
|
||||
})
|
||||
} else if (this.textArea) {
|
||||
this.textArea.nativeElement.blur();
|
||||
} else if (this.searchInput) {
|
||||
|
|
|
|||
|
|
@ -185,14 +185,16 @@ export class AlertModal implements OnInit, AfterViewInit, OnDestroy {
|
|||
* Opens an alert window creating backdrop.
|
||||
*/
|
||||
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() {
|
||||
if (!this.stayOpen) {
|
||||
if (!this.stayOpen && typeof UIkit !== "undefined") {
|
||||
UIkit.modal(this.element.nativeElement).hide();
|
||||
}
|
||||
if (!this.choice) {
|
||||
|
|
@ -209,6 +211,8 @@ export class AlertModal implements OnInit, AfterViewInit, OnDestroy {
|
|||
* cancel method closes the modal.
|
||||
*/
|
||||
cancel() {
|
||||
UIkit.modal(this.element.nativeElement).hide();
|
||||
if(typeof UIkit !== "undefined") {
|
||||
UIkit.modal(this.element.nativeElement).hide();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue