diff --git a/searchPages/find/searchAll.component.html b/searchPages/find/searchAll.component.html index c3f33bf8..9d0c5b67 100644 --- a/searchPages/find/searchAll.component.html +++ b/searchPages/find/searchAll.component.html @@ -1,72 +1,67 @@ -
+
-
- - -
+
+
+ +
+
+
+
+
-
+
-
- -
    +
    -
    - -
    - +
    + + +
    +
    +
    +
    +
    diff --git a/searchPages/searchUtils/advancedSearchForm.module.ts b/searchPages/searchUtils/advancedSearchForm.module.ts index 6ca7e67b..0b6a5dd6 100644 --- a/searchPages/searchUtils/advancedSearchForm.module.ts +++ b/searchPages/searchUtils/advancedSearchForm.module.ts @@ -13,11 +13,13 @@ import {EntitiesSelectionModule} from "./entitiesSelection.module"; import { MatSelectModule } from "@angular/material/select"; import {IconsModule} from "../../utils/icons/icons.module"; import {SearchInputModule} from "../../sharedComponents/search-input/search-input.module"; +import {AdvancedSearchInputModule} from "../../sharedComponents/advanced-search-input/advanced-search-input.module"; +import {InputModule} from "../../sharedComponents/input/input.module"; @NgModule({ imports: [ - CommonModule, FormsModule, RouterModule, EntitiesAutocompleteModule, StaticAutocompleteModule, DateFilterModule, SearchFormModule, QuickSelectionsModule, EntitiesSelectionModule, MatSelectModule, IconsModule, SearchInputModule + CommonModule, FormsModule, RouterModule, EntitiesAutocompleteModule, StaticAutocompleteModule, DateFilterModule, SearchFormModule, QuickSelectionsModule, EntitiesSelectionModule, MatSelectModule, IconsModule, SearchInputModule, AdvancedSearchInputModule, InputModule ], declarations: [ AdvancedSearchFormComponent, diff --git a/searchPages/searchUtils/entitiesSelection.component.ts b/searchPages/searchUtils/entitiesSelection.component.ts index 79255865..3dc56b06 100644 --- a/searchPages/searchUtils/entitiesSelection.component.ts +++ b/searchPages/searchUtils/entitiesSelection.component.ts @@ -1,206 +1,119 @@ import {Component, EventEmitter, Input, Output, ViewChild} from '@angular/core'; -import {FormBuilder} from "@angular/forms"; import {EnvProperties} from "../../utils/properties/env-properties"; import {SearchCustomFilter} from "./searchUtils.class"; import {ConfigurationService} from "../../utils/configuration/configuration.service"; import {Router} from "@angular/router"; -import { MatSelect } from "@angular/material/select"; import {Subscription} from "rxjs"; import {properties} from '../../../../environments/environment'; +import {InputComponent, Option} from "../../sharedComponents/input/input.component"; +import {OpenaireEntities} from "../../utils/properties/searchFields"; @Component({ selector: 'entities-selection', template: ` - - - All content - - Research outcomes - Projects - Content providers - Organizations - - - All research outcomes - - Publications - Datasets - Software - Other Research products - - - - -
    - {{onlyresults ? 'All research outcomes' : 'All content'}} - Research outcomes - Projects - Content providers - Organizations - Publications - Datasets - Software - Other Research products -
    -
    - - - - - + +
    +
    ` }) - export class EntitiesSelectionComponent { - - showResearchOutcomes: boolean = false; - showPublications: boolean = false; - showDatasets: boolean = false; - showSoftware: boolean = false; - showOther: boolean = false; - showProjects: boolean = false; - showDataProviders: boolean = false; - showOrganizations: boolean = false; - showAll: boolean = true; - @Input() allEnable = false; - @Input() properties: EnvProperties = properties; + @Input() onlyresults: boolean = false; @Input() customFilter: SearchCustomFilter = null; - @Input() @Output() selectedEntity = "Research Outcomes"; - @Input() currentEntity = "Research Outcomes"; + @Input() selectedEntity = "result"; + @Input() currentEntity = "result"; @Input() simpleView: boolean = true; @Input() onChangeNavigate: boolean = true; - @Output() selectionChange = new EventEmitter(); - @Input() onlyresults: boolean = false; - @Input() matPanelClass = "matSelectionPanel"; @Input() disableSelect: boolean = false; - show = 0; - @ViewChild(MatSelect) matSelect: MatSelect; - - subs: Subscription[] = []; - - constructor(private _fb: FormBuilder, private config: ConfigurationService, private router: Router) {} + @Output() selectionChange = new EventEmitter(); + @ViewChild('input') input: InputComponent; + public entities: Option[] = []; + public properties: EnvProperties = properties; + private subscriptions: Subscription[] = []; + + constructor(private config: ConfigurationService, private router: Router) { + } ngOnInit() { - this.show = 0; - if(!this.allEnable) { - if((this.customFilter && this.customFilter.queryFieldName == "communityId") || (this.properties.adminToolsCommunity !== "monitor")) { - //this.config.getCommunityInformation(this.properties, (this.customFilter && this.customFilter.queryFieldName == "communityId") ? this.customFilter.valueId : this.properties.adminToolsCommunity).subscribe(data => { - this.subs.push(this.config.communityInformationState.subscribe(data => { - if(data) { - let showEntity = {}; - let showPage = {}; - if(data['entities']) { - for (let i = 0; i < data['entities'].length; i++) { - - showEntity["" + data['entities'][i]["pid"] + ""] = data['entities'][i]["isEnabled"]; - } - } - if(data['pages']) { - for (let i = 0; i < data['pages'].length; i++) { - showPage["" + data['pages'][i]["route"] + ""] = data['pages'][i]["isEnabled"]; - } - } - this.showResearchOutcomes = showPage[this.simpleView?this.properties.searchLinkToResults:this.properties.searchLinkToAdvancedResults] && (showEntity["publication"] || showEntity["dataset"] || showEntity["software"] || showEntity["orp"]); - this.showPublications = showPage[this.simpleView?this.properties.searchLinkToResults:this.properties.searchLinkToAdvancedResults] && showEntity["publication"]; - this.showDatasets = showPage[this.simpleView?this.properties.searchLinkToResults:this.properties.searchLinkToAdvancedResults] && showEntity["dataset"]; - this.showSoftware = showPage[this.simpleView?this.properties.searchLinkToResults:this.properties.searchLinkToAdvancedResults] && showEntity["software"]; - this.showOther = showPage[this.simpleView?this.properties.searchLinkToResults:this.properties.searchLinkToAdvancedResults] && showEntity["orp"]; - this.showProjects = showPage[this.simpleView?this.properties.searchLinkToProjects:this.properties.searchLinkToAdvancedProjects] && showEntity["project"]; - this.showOrganizations = showPage[this.simpleView?this.properties.searchLinkToOrganizations:this.properties.searchLinkToAdvancedOrganizations] && showEntity["organization"]; - this.showDataProviders = showPage[this.simpleView?this.properties.searchLinkToDataProviders:this.properties.searchLinkToAdvancedDataProviders] && showEntity["datasource"]; - if (this.customFilter && this.customFilter.queryFieldName == "communityId" || this.properties.adminToolsCommunity === "connect") { - //for community pages: no organization in simple search, only results in advanced - this.showAll = false; - this.showOrganizations = false; - if (!this.simpleView) { - this.showProjects = false; - this.showDataProviders = false; - } - } - if (this.showResearchOutcomes) { - this.show++; - } - if (this.showDataProviders) { - this.show++; - } - if (this.showOrganizations) { - this.show++; - } - if (this.showProjects) { - this.show++; - } - if (this.show == 1) { - this.disableSelect = true; + if ((this.customFilter && this.customFilter.queryFieldName == "communityId") || (this.properties.adminToolsCommunity !== "monitor")) { + //this.config.getCommunityInformation(this.properties, (this.customFilter && this.customFilter.queryFieldName == "communityId") ? this.customFilter.valueId : this.properties.adminToolsCommunity).subscribe(data => { + this.subscriptions.push(this.config.communityInformationState.subscribe(data => { + if (data) { + let showEntity = {}; + let showPage = {}; + if (data['entities']) { + for (let i = 0; i < data['entities'].length; i++) { + + showEntity["" + data['entities'][i]["pid"] + ""] = data['entities'][i]["isEnabled"]; } } - })); - } else if((this.customFilter && this.customFilter.queryFieldName == "community") && this.properties.adminToolsCommunity === "monitor") { - this.show = 1; - this.disableSelect = true; - } else if(this.customFilter && (this.customFilter.queryFieldName == "relfunder" || this.customFilter.queryFieldName == "funder")) { - /*this.showResearchOutcomes = true; - this.showPublications = true; - this.showDatasets = true; - this.showSoftware = true; - this.showOther = true; - this.showProjects = true; - this.showAll = false; - this.show = 2;*/ - this.show = 1; - this.disableSelect = true; - } else if(this.customFilter && this.customFilter.queryFieldName == "relorganizationid") { - /*this.showResearchOutcomes = true; - this.showPublications = true; - this.showDatasets = true; - this.showSoftware = true; - this.showOther = true; - this.showProjects = true; - this.showDataProviders = true; - this.showAll = false; - this.show = 3;*/ - this.show = 1; - this.disableSelect = true; - } else { - this.showResearchOutcomes = true; - this.showPublications = true; - this.showDatasets = true; - this.showSoftware = true; - this.showOther = true; - this.showProjects = true; - this.showOrganizations = true; - this.showDataProviders = true; - this.showAll = false; - this.show = 4; - } + if (data['pages']) { + for (let i = 0; i < data['pages'].length; i++) { + showPage["" + data['pages'][i]["route"] + ""] = data['pages'][i]["isEnabled"]; + } + } + if(this.onlyresults) { + this.entities.push({label: 'All ' + OpenaireEntities.RESULTS.toLowerCase(), value: 'all'}); + if(showPage[this.simpleView ? this.properties.searchLinkToResults : this.properties.searchLinkToAdvancedResults] && showEntity["publication"]) { + this.entities.push({label: OpenaireEntities.PUBLICATIONS, value: 'publications'}); + } + if(showPage[this.simpleView ? this.properties.searchLinkToResults : this.properties.searchLinkToAdvancedResults] && showEntity["dataset"]) { + this.entities.push({label: OpenaireEntities.DATASETS, value: 'datasets'}); + } + if(showPage[this.simpleView ? this.properties.searchLinkToResults : this.properties.searchLinkToAdvancedResults] && showEntity["software"]) { + this.entities.push({label: OpenaireEntities.SOFTWARE, value: 'software'}); + } + if(showPage[this.simpleView ? this.properties.searchLinkToResults : this.properties.searchLinkToAdvancedResults] && showEntity["orp"]) { + this.entities.push({label: OpenaireEntities.OTHER, value: 'other'}); + } + } else { + this.entities.push({label: 'All Content', value: 'all'}); + if(showPage[this.simpleView ? this.properties.searchLinkToResults : this.properties.searchLinkToAdvancedResults] + && (showEntity["publication"] || showEntity["dataset"] || showEntity["software"] || showEntity["orp"])) { + this.entities.push({label: OpenaireEntities.RESULTS, value: 'result'}); + } + + if(showPage[this.simpleView ? this.properties.searchLinkToProjects : this.properties.searchLinkToAdvancedProjects] && showEntity["project"]) { + this.entities.push({label: OpenaireEntities.PROJECTS, value: 'project'}); + } + if(showPage[this.simpleView ? this.properties.searchLinkToOrganizations : this.properties.searchLinkToAdvancedOrganizations] && showEntity["organization"]) { + this.entities.push({label: OpenaireEntities.ORGANIZATIONS, value: 'organization'}); + } + if(showPage[this.simpleView ? this.properties.searchLinkToDataProviders : this.properties.searchLinkToAdvancedDataProviders] && showEntity["datasource"]) { + this.entities.push({label: OpenaireEntities.DATASOURCES, value: 'dataprovider'}); + } + } + if (this.customFilter && this.customFilter.queryFieldName == "communityId" || this.properties.adminToolsCommunity === "connect") { + //for community pages: no organization in simple search, only results in advanced + this.entities = this.entities.filter(option => option.value !== 'organization' && option.value !== 'all'); + if (!this.simpleView) { + this.entities = this.entities.filter(option => option.value !== 'project' && option.value !== 'dataprovider'); + } + } + this.disableSelect = this.entities.length == 1; + } + })); + } else if ((this.customFilter && this.customFilter.queryFieldName == "community") && this.properties.adminToolsCommunity === "monitor") { + this.disableSelect = true; + } else if (this.customFilter && (this.customFilter.queryFieldName == "relfunder" || this.customFilter.queryFieldName == "funder")) { + this.disableSelect = true; + } else if (this.customFilter && this.customFilter.queryFieldName == "relorganizationid") { + this.disableSelect = true; } else { - this.showResearchOutcomes = true; - this.showPublications = true; - this.showDatasets = true; - this.showSoftware = true; - this.showOther = true; - this.showProjects = true; - this.showOrganizations = true; - this.showDataProviders = true; - this.showAll = true; - this.show = 5; + if(this.onlyresults) { + this.entities.push({label: 'All ' + OpenaireEntities.RESULTS.toLowerCase(), value: 'all'}); + this.entities.push({label: OpenaireEntities.PUBLICATIONS, value: 'publications'}); + this.entities.push({label: OpenaireEntities.DATASETS, value: 'datasets'}); + this.entities.push({label: OpenaireEntities.SOFTWARE, value: 'software'}); + this.entities.push({label: OpenaireEntities.OTHER, value: 'other'}); + } else { + this.entities.push({label: 'All Content', value: 'all'}); + this.entities.push({label: OpenaireEntities.RESULTS, value: 'result'}); + this.entities.push({label: OpenaireEntities.PROJECTS, value: 'project'}); + this.entities.push({label: OpenaireEntities.ORGANIZATIONS, value: 'organization'}); + this.entities.push({label: OpenaireEntities.DATASOURCES, value: 'dataprovider'}); + } + console.log(this.entities); } this.selectedEntity = this.currentEntity; this.selectionChange.emit({ @@ -209,16 +122,16 @@ export class EntitiesSelectionComponent { advancedUrl: this.getUrl(false) }); } - + public ngOnDestroy() { - for (let sub of this.subs) { - sub.unsubscribe(); + for (let subscription of this.subscriptions) { + subscription.unsubscribe(); } } entityChanged() { if (!this.simpleView || this.onChangeNavigate) { - this.router.navigate([this.getUrl(this.simpleView)], {queryParams: this.customFilter?this.customFilter.getParameters():{}}); + this.router.navigate([this.getUrl(this.simpleView)], {queryParams: this.customFilter ? this.customFilter.getParameters() : {}}); } else { this.selectionChange.emit({ entity: this.selectedEntity, @@ -229,36 +142,21 @@ export class EntitiesSelectionComponent { } - getUrl(simpleView: boolean) { - let url = ""; + getUrl(simpleView: boolean): string { if (!this.onlyresults) { if (this.selectedEntity == "all") { - url = (simpleView ? "/search/find/" : null); + return (simpleView ? "/search/find/" : null); } else if (this.selectedEntity == "result") { - url = (simpleView ? this.properties.searchLinkToResults : this.properties.searchLinkToAdvancedResults); + return (simpleView ? this.properties.searchLinkToResults : this.properties.searchLinkToAdvancedResults); } else if (this.selectedEntity == "project") { - url = (simpleView ? this.properties.searchLinkToProjects : this.properties.searchLinkToAdvancedProjects); + return (simpleView ? this.properties.searchLinkToProjects : this.properties.searchLinkToAdvancedProjects); } else if (this.selectedEntity == "dataprovider") { - url = (simpleView ? this.properties.searchLinkToDataProviders : this.properties.searchLinkToAdvancedDataProviders); + return (simpleView ? this.properties.searchLinkToDataProviders : this.properties.searchLinkToAdvancedDataProviders); } else if (this.selectedEntity == "organization") { - url = (simpleView ? this.properties.searchLinkToOrganizations : this.properties.searchLinkToAdvancedOrganizations); + return (simpleView ? this.properties.searchLinkToOrganizations : this.properties.searchLinkToAdvancedOrganizations); } } else { - url = (simpleView ? this.properties.searchLinkToResults : this.properties.searchLinkToAdvancedResults); - } - return url; - } - - toggle() { - if (this.matSelect) { - this.matSelect.toggle(); + return (simpleView ? this.properties.searchLinkToResults : this.properties.searchLinkToAdvancedResults); } } - - open() { - if (this.matSelect && !this.matSelect.focused) { - this.matSelect.open(); - } - } - } diff --git a/searchPages/searchUtils/entitiesSelection.module.ts b/searchPages/searchUtils/entitiesSelection.module.ts index 829bba3f..9a281ee4 100644 --- a/searchPages/searchUtils/entitiesSelection.module.ts +++ b/searchPages/searchUtils/entitiesSelection.module.ts @@ -4,11 +4,12 @@ import {FormsModule, ReactiveFormsModule} from '@angular/forms'; import {RouterModule} from '@angular/router'; import {EntitiesSelectionComponent} from "./entitiesSelection.component"; import { MatSelectModule } from "@angular/material/select"; +import {InputModule} from "../../sharedComponents/input/input.module"; @NgModule({ imports: [ CommonModule, FormsModule, - RouterModule, ReactiveFormsModule, MatSelectModule + RouterModule, ReactiveFormsModule, MatSelectModule, InputModule ], declarations: [ EntitiesSelectionComponent, diff --git a/searchPages/searchUtils/newSearchPage.component.html b/searchPages/searchUtils/newSearchPage.component.html index 4dfac0f5..bf20e52c 100644 --- a/searchPages/searchUtils/newSearchPage.component.html +++ b/searchPages/searchUtils/newSearchPage.component.html @@ -9,7 +9,7 @@ - + @@ -71,8 +71,7 @@ class="uk-margin-top" role="alert">
    -
    No filters available Filters temporarily unavailable. Please try again later. @@ -85,12 +84,6 @@ (onFilterChange)="filterChanged($event)" [quickFilter]="quickFilter" [actionRoute]="true"> -
  • - - -
  • @@ -162,6 +155,11 @@ - -
    +
    OpenAIRE - Explore.
    -
    +
    @@ -319,7 +317,7 @@
    -

    For more results please try a new, more specific query

    +

    For more results please try a new, more specific query

    -
    +
    -
    - graph - Powered by OpenAIRE Research Graph +
    + + + Powered by OpenAIRE Research Graph
    - - - Last update - - Last update - - of records in OpenAIRE: {{indexUpdateDate | date: 'MMM dd, yyyy'}} + Last update + Last update + of records in OpenAIRE: {{indexUpdateDate | date: 'MMM dd, yyyy'}}
    diff --git a/searchPages/searchUtils/newSearchPage.module.ts b/searchPages/searchUtils/newSearchPage.module.ts index 1be16af2..9be5ebd5 100644 --- a/searchPages/searchUtils/newSearchPage.module.ts +++ b/searchPages/searchUtils/newSearchPage.module.ts @@ -30,6 +30,8 @@ import {SearchResultsForOrcidModule} from "../../orcid/recommend-orcid-links/sea import {IconsModule} from "../../utils/icons/icons.module"; import {LoadingModule} from "../../utils/loading/loading.module"; import {InputModule} from '../../sharedComponents/input/input.module'; +import {IconsService} from "../../utils/icons/icons.service"; +import {graph} from "../../utils/icons/icons"; @NgModule({ imports: [ @@ -40,17 +42,20 @@ import {InputModule} from '../../sharedComponents/input/input.module'; PiwikServiceModule, HelperModule, Schema2jsonldModule, SEOServiceModule, SearchResultsModule, SearchResultsInDepositModule, SearchResultsForOrcidModule, AdvancedSearchFormModule, QuickSelectionsModule, BreadcrumbsModule, AlertModalModule, ClickModule, IconsModule, LoadingModule, - InputModule + InputModule ], declarations: [ NewSearchPageComponent -], - - providers:[ + ], + providers: [ PreviousRouteRecorder ], exports: [ NewSearchPageComponent - ] + ] }) -export class NewSearchPageModule { } +export class NewSearchPageModule { + constructor(private iconsService: IconsService) { + this.iconsService.registerIcons([graph]) + } +} diff --git a/searchPages/searchUtils/quick-selections.component.ts b/searchPages/searchUtils/quick-selections.component.ts index 560d5257..9d1c5571 100644 --- a/searchPages/searchUtils/quick-selections.component.ts +++ b/searchPages/searchUtils/quick-selections.component.ts @@ -5,52 +5,35 @@ import {EnvProperties} from "../../utils/properties/env-properties"; import {ConfigurationService} from "../../utils/configuration/configuration.service"; import {Subscription} from "rxjs"; import {ActivatedRoute, Router} from "@angular/router"; +import {properties} from "../../../../environments/environment"; @Component({ selector: 'quick-selections', template: ` -
    -
    - {{quickFilter.value}} - - -
    -
    - Include: - - - - - {{value.name}} - - - -
    +
    +
    Include:
    + +
    + + +
    +
    -
    - -
    - ` }) - export class QuickSelectionsComponent { @Input() resultTypes:Filter; @Output() typeChange = new EventEmitter(); @Input() isDisabled; @Input() quickFilter: { filter: Filter, selected: boolean, filterId: string, value: string }; + @Input() actionRoute:boolean = false; initialized = false; - @Input() properties: EnvProperties; - @Input() vertical: boolean=false; + properties: EnvProperties = properties; showPublications:boolean= false; showDatasets:boolean= false; showSoftware: boolean = false; showOrp: boolean = false; showEntities = false; - @Input() actionRoute:boolean = false; queryParams = {}; subs: Subscription[] = []; diff --git a/sharedComponents/advanced-search-input/advanced-search-input.component.ts b/sharedComponents/advanced-search-input/advanced-search-input.component.ts index da78903b..7592717f 100644 --- a/sharedComponents/advanced-search-input/advanced-search-input.component.ts +++ b/sharedComponents/advanced-search-input/advanced-search-input.component.ts @@ -9,14 +9,15 @@ import { QueryList } from "@angular/core"; import {InputComponent} from "../input/input.component"; +import {EntitiesSelectionComponent} from "../../searchPages/searchUtils/entitiesSelection.component"; @Component({ selector: 'advanced-search-input', template: ` -
    +
    -
    +
    @@ -31,17 +32,26 @@ import {InputComponent} from "../input/input.component"; }) export class AdvancedSearchInputComponent implements AfterContentInit, OnDestroy { @ContentChildren(InputComponent) inputs: QueryList; + @ContentChildren(EntitiesSelectionComponent) entities: QueryList; @Input() disabled: boolean = false; - @Input() searchInputClass: string = 'inner' + @Input() searchInputClass: string = 'inner'; + @Input() dark: boolean; @Input() smallVertical: boolean = false; @Output() searchEmitter: EventEmitter = new EventEmitter(); @HostListener('window:keydown', ['$event']) keyEvent(event: KeyboardEvent) { - let input = this.inputs.toArray().find(input => input.focused); + let input: InputComponent | EntitiesSelectionComponent = this.inputs.toArray().find(input => input.focused); + if(!input) { + input = this.entities.toArray().find(input => input.input.focused); + } if(input) { if(event.code === 'Enter') { - input.focus(false, event); + if(input instanceof EntitiesSelectionComponent) { + input.input.focus(false, event); + } else { + input.focus(false, event); + } event.preventDefault(); this.searchEmitter.emit(); } @@ -59,4 +69,8 @@ export class AdvancedSearchInputComponent implements AfterContentInit, OnDestroy ngOnDestroy() { } + + get length() { + return this.inputs.length + this.entities.length; + } } diff --git a/sharedComponents/navigationBar.component.html b/sharedComponents/navigationBar.component.html index 3fb77e2e..42e48bff 100644 --- a/sharedComponents/navigationBar.component.html +++ b/sharedComponents/navigationBar.component.html @@ -142,7 +142,7 @@ href="{{menu.rootItem.url}}" target="{{menu.rootItem.url.includes('http') ? '_blank' : '_self'}}" aria-expanded="false">{{menu.rootItem.title}} {{menu.rootItem.title}} -
    +
      diff --git a/sharedComponents/searchBar/searchBar.component.html b/sharedComponents/searchBar/searchBar.component.html index 3926810b..ba8256c1 100644 --- a/sharedComponents/searchBar/searchBar.component.html +++ b/sharedComponents/searchBar/searchBar.component.html @@ -8,7 +8,6 @@ [properties]="properties" (selectionChange)=" entityChanged($event)" [customFilter]="customFilter" - [onlyresults]="false" matPanelClass="navbarMatSelectPanelClass" [onChangeNavigate]="false" >
    diff --git a/utils/pagingFormatter.component.ts b/utils/pagingFormatter.component.ts index 35d9d320..e3a38c81 100644 --- a/utils/pagingFormatter.component.ts +++ b/utils/pagingFormatter.component.ts @@ -7,7 +7,7 @@ import {properties} from "../../../environments/environment"; selector: 'paging', template: `
      + [class.uk-disabled]="isDisabled" class="uk-pagination uk-margin-remove" [ngClass]="'uk-flex-' + position">