diff --git a/claims/claim-utils/claimContextSearchForm.component.html b/claims/claim-utils/claimContextSearchForm.component.html index 64973557..e8430153 100644 --- a/claims/claim-utils/claimContextSearchForm.component.html +++ b/claims/claim-utils/claimContextSearchForm.component.html @@ -4,32 +4,27 @@
-
- Select communities to link to -
-
-
-
- - - - - -
+
+
+ + + + + +
-
-
diff --git a/claims/claim-utils/claimContextSearchForm.component.ts b/claims/claim-utils/claimContextSearchForm.component.ts index 3990df87..9584455c 100644 --- a/claims/claim-utils/claimContextSearchForm.component.ts +++ b/claims/claim-utils/claimContextSearchForm.component.ts @@ -21,6 +21,7 @@ export class ClaimContextSearchFormComponent { @Input() communityId: string = null; @Input() public inlineClaim: boolean = false; @Input() basketLimit; + @Input() showOptions; public selectedCommunityId: string = "0"; public selectedCategoryId: string = "0"; diff --git a/claims/claim-utils/claimContextSearchForm.module.ts b/claims/claim-utils/claimContextSearchForm.module.ts index 1f49f66c..8d9c390a 100644 --- a/claims/claim-utils/claimContextSearchForm.module.ts +++ b/claims/claim-utils/claimContextSearchForm.module.ts @@ -5,12 +5,13 @@ import { ClaimContextSearchFormComponent } from './claimContextSearchForm.compon import {StaticAutocompleteModule} from '../../utils/staticAutoComplete/staticAutoComplete.module'; import { RouterModule } from '@angular/router'; import {HelperModule} from '../../utils/helper/helper.module'; +import {ClaimProjectsSearchFormModule} from "./claimProjectSearchForm.module"; @NgModule({ imports: [ - SharedModule,RouterModule, + SharedModule, RouterModule, StaticAutocompleteModule, - HelperModule + HelperModule, ClaimProjectsSearchFormModule ], declarations: [ diff --git a/claims/claim-utils/claimEntitiesSelection.component.ts b/claims/claim-utils/claimEntitiesSelection.component.ts new file mode 100644 index 00000000..eb51e258 --- /dev/null +++ b/claims/claim-utils/claimEntitiesSelection.component.ts @@ -0,0 +1,37 @@ +import {Component, Input, ViewChild} from '@angular/core'; +import {ShowOptions} from './claimHelper.class'; +import {MatSelect} from "@angular/material/select"; + + +@Component({ + selector: 'claim-enities-selection', + + template:` + + + + Research outcomes + Projects + Research communities + + + + + + `, + +}) +export class ClaimEntitiesSelectionComponent{ + @ViewChild(MatSelect) matSelect: MatSelect; + @Input() showOptions:ShowOptions = new ShowOptions(); + + open() { + if (this.matSelect && !this.matSelect.focused) { + this.matSelect.open(); + } + } + +} diff --git a/claims/claim-utils/claimHelper.class.ts b/claims/claim-utils/claimHelper.class.ts index a2630379..bc72ecee 100644 --- a/claims/claim-utils/claimHelper.class.ts +++ b/claims/claim-utils/claimHelper.class.ts @@ -142,9 +142,9 @@ export class ShowOptions { show: string; //show values: source, result, project, context, claim linkTo: string; // linkTo /values: result, project, context linkToEntities: string[]; // show linkToEntities /values: result, project, context - basketShowSources: boolean; - basketShowLinksTo: boolean; - + basketShowSources: boolean = true; + basketShowLinksTo: boolean = false; + constructor() { this.show = "source"; this.linkTo = "project"; @@ -155,23 +155,24 @@ export class ShowOptions { showSource() { this.show = "source"; + this.basketswitchToSources(); + HelperFunctions.scroll(); + } + basketswitchToSources() { this.basketShowLinksTo = false; - this.basketShowSources = true; - HelperFunctions.scroll(); + this.basketShowSources = true; } - - showLinkTo() { - this.show = this.linkTo; + basketswitchToLinkTo() { this.basketShowLinksTo = true; - this.basketShowSources = false; + this.basketShowSources = false; + } + showLinkTo() { + console.log(this.linkTo, "showLinkTo") + this.show = this.linkTo; + this.basketswitchToLinkTo(); HelperFunctions.scroll(); } - showBasketSources() { - if (this.show != 'source') { - this.basketShowSources = !this.basketShowSources; - this.basketShowLinksTo = !this.basketShowSources; - } - } + } diff --git a/claims/claim-utils/claimProjectSearchForm.component.html b/claims/claim-utils/claimProjectSearchForm.component.html index 8fa5fda3..8c567946 100644 --- a/claims/claim-utils/claimProjectSearchForm.component.html +++ b/claims/claim-utils/claimProjectSearchForm.component.html @@ -1,10 +1,8 @@
-
Start searching for projects and add them to the basket to link them to your sources - -
+ - -
+
+ @@ -93,10 +91,12 @@
- + + [showQuickButtons]="false" + > +
@@ -107,11 +107,13 @@
-
- +
+ +
diff --git a/claims/claim-utils/claimProjectSearchForm.component.ts b/claims/claim-utils/claimProjectSearchForm.component.ts index 6ed5616d..42a56e55 100644 --- a/claims/claim-utils/claimProjectSearchForm.component.ts +++ b/claims/claim-utils/claimProjectSearchForm.component.ts @@ -39,6 +39,7 @@ export class ClaimProjectsSearchFormComponent { @Input() public inlineClaim:boolean=false; @Input() localStoragePrefix:string = ""; @Input() basketLimit; + @Input() showOptions; public errorCodes:ErrorCodes = new ErrorCodes(); public projects:string[]; diff --git a/claims/claim-utils/claimProjectSearchForm.module.ts b/claims/claim-utils/claimProjectSearchForm.module.ts index 90384234..4ce1326e 100644 --- a/claims/claim-utils/claimProjectSearchForm.module.ts +++ b/claims/claim-utils/claimProjectSearchForm.module.ts @@ -16,20 +16,23 @@ import {ClaimResultsModule} from './claimResults.module'; import {PagingModule } from '../../utils/paging.module'; import {SearchFilterModule} from '../../searchPages/searchUtils/searchFilter.module'; import {RangeFilterModule} from "../../utils/rangeFilter/rangeFilter.module"; +import {ClaimEntitiesSelectionComponent} from "./claimEntitiesSelection.component"; +import {MatSelectModule} from "@angular/material/select"; @NgModule({ imports: [ SharedModule, CommonModule, // LoadingModalModule, ProjectServiceModule, ProjectsServiceModule, EntitiesAutocompleteModule, HelperModule, - PagingModule, SearchFilterModule, ClaimResultsModule, RangeFilterModule + PagingModule, SearchFilterModule, ClaimResultsModule, RangeFilterModule, MatSelectModule ], providers:[ ], - declarations: [ - ClaimProjectsSearchFormComponent + declarations: [ + ClaimProjectsSearchFormComponent, + ClaimEntitiesSelectionComponent - ], - exports: [ClaimProjectsSearchFormComponent ] -}) + ], + exports: [ClaimProjectsSearchFormComponent, ClaimEntitiesSelectionComponent] + }) export class ClaimProjectsSearchFormModule { } diff --git a/claims/claim-utils/claimResultSearchForm.component.html b/claims/claim-utils/claimResultSearchForm.component.html index 5c187606..6c955842 100644 --- a/claims/claim-utils/claimResultSearchForm.component.html +++ b/claims/claim-utils/claimResultSearchForm.component.html @@ -5,6 +5,8 @@
+ @@ -148,10 +150,12 @@
- +
+ +
@@ -163,10 +167,12 @@
- +
+ +
diff --git a/claims/claim-utils/claimResultSearchForm.component.ts b/claims/claim-utils/claimResultSearchForm.component.ts index 4ea59e23..45d4922c 100644 --- a/claims/claim-utils/claimResultSearchForm.component.ts +++ b/claims/claim-utils/claimResultSearchForm.component.ts @@ -29,6 +29,7 @@ export class ClaimResultSearchFormComponent { @Input() public properties: EnvProperties; @Input() localStoragePrefix: string = ""; @Input() basketLimit; + @Input() showOptions; public errorCodes: ErrorCodes = new ErrorCodes(); diff --git a/claims/claim-utils/claimResultSearchForm.module.ts b/claims/claim-utils/claimResultSearchForm.module.ts index 263a4419..34f19c5f 100644 --- a/claims/claim-utils/claimResultSearchForm.module.ts +++ b/claims/claim-utils/claimResultSearchForm.module.ts @@ -17,10 +17,11 @@ import {HelperModule} from '../../utils/helper/helper.module'; import {SearchFilterModule} from '../../searchPages/searchUtils/searchFilter.module'; import {QuickSelectionsModule} from "../../searchPages/searchUtils/quick-selections.module"; import {RangeFilterModule} from "../../utils/rangeFilter/rangeFilter.module"; +import {ClaimProjectsSearchFormModule} from "./claimProjectSearchForm.module"; @NgModule({ imports: [SharedModule, CommonModule, SearchResearchResultsServiceModule, PagingModule, SearchCrossrefServiceModule, - SearchDataciteServiceModule, HelperModule, SearchFilterModule, ClaimResultsModule, MatSelectModule, QuickSelectionsModule, RangeFilterModule], + SearchDataciteServiceModule, HelperModule, SearchFilterModule, ClaimResultsModule, MatSelectModule, QuickSelectionsModule, RangeFilterModule, ClaimProjectsSearchFormModule], providers:[ SearchOrcidService ], diff --git a/claims/claim-utils/claimResults.component.ts b/claims/claim-utils/claimResults.component.ts index e687fab3..1d68dba9 100644 --- a/claims/claim-utils/claimResults.component.ts +++ b/claims/claim-utils/claimResults.component.ts @@ -7,10 +7,10 @@ declare var UIkit: any; selector: 'claim-results', template: ` -
    -
  • +
    +
    -
    +
    {{(!entity.result) ? entity.type : ((entity.result && entity.result.source == 'openaire') ? entity.type : (entity.result && entity.result.source + ' result'))}}
    @@ -19,7 +19,7 @@ declare var UIkit: any;
    -
    +
    @@ -37,8 +37,8 @@ declare var UIkit: any;
    -
    • -
`, +
+
`, }) export class ClaimResultsComponent { diff --git a/claims/linking/insertClaim/insertClaim.component.ts b/claims/linking/insertClaim/insertClaim.component.ts index 0e5a673b..ebd98c0b 100644 --- a/claims/linking/insertClaim/insertClaim.component.ts +++ b/claims/linking/insertClaim/insertClaim.component.ts @@ -38,7 +38,7 @@ import {Subscriber} from "rxjs";
CONFIRM LINKING + class="uk-text-center ">CONFIRM LINKING diff --git a/claims/linking/linkingGeneric.component.html b/claims/linking/linkingGeneric.component.html index b852aa9c..94e04283 100644 --- a/claims/linking/linkingGeneric.component.html +++ b/claims/linking/linkingGeneric.component.html @@ -1,38 +1,20 @@ - -
-
-
-
- - - 1 - - - Find Sources - -
-
-
- - 2 - - - - Link Sources to Entities -
-
-
- 3 - Summarize and finish -
-
-
- + + + + + + + + +
- +
-
@@ -60,41 +39,8 @@ [class]="((showOptions.show == 'claim')?'':' uk-margin-top ')+' uk-container uk-container-large '">
-
-
- - - - - - -
+
+
-
+
- + style="z-index: 0" class="uk-card uk-card-default">
-
-
    -
  • Sources to link ({{(sources.length) | number}})
    • -
  • Link to +
      - - +
    • -
      - +
      -
      +
      No Sources added yet. Start adding sources from the left panel. Or upload a DOI's CSV file.
      Basket reached the size limit. No more sources can be added.
      - + + -
      -
      +
      +
      • - - +
    • -
      - -
      CONTINUE TO - LINK TO ({{(results.length) | number}}) + [class]="((sources.length)>0?'uk-background-secondary uk-light ':'uk-disabled uk-background-muted ')+ ' linksbaskettitles uk-padding-small'" + (click)="stepHasChanged('source') "> +
      + STEP 2 - LINK SOURCES TO ENTITIES
      -
      - Entities to link with the sources -
      +
      + [class]="((results.length)>0?'uk-background-secondary uk-light ':'uk-disabled uk-background-muted ')+ + ' linksbaskettitles uk-margin-small-top uk-padding-small'" + style="height:auto !important; " (click)="stepHasChanged('source')"> -
      - FINISH LINKING +
      + STEP {{inlineEntity?'2':'3'}} - FINALISE AND FINISH
      +
      diff --git a/claims/linking/linkingGeneric.component.ts b/claims/linking/linkingGeneric.component.ts index 23b41780..747b1e36 100644 --- a/claims/linking/linkingGeneric.component.ts +++ b/claims/linking/linkingGeneric.component.ts @@ -1,4 +1,4 @@ -import {Component, Input, ViewChild} from '@angular/core'; +import {ChangeDetectorRef, Component, Input, ViewChild} from '@angular/core'; import {ActivatedRoute, Router} from '@angular/router'; import {Meta, Title} from '@angular/platform-browser'; import {EnvProperties} from '../../utils/properties/env-properties'; @@ -12,25 +12,16 @@ import {PiwikService} from "../../utils/piwik/piwik.service"; import {Subscriber} from "rxjs"; import {properties} from "../../../../environments/environment"; import {Breadcrumb} from "../../utils/breadcrumbs/breadcrumbs.component"; +import {MetricsService} from "../../services/metrics.service"; declare var UIkit:any; @Component({ selector: 'linking-generic', templateUrl: 'linkingGeneric.component.html', - styles:[ ` - .mat-stepper-horizontal-line { - border-top-width: 1px; - border-top-style: solid; - flex: auto; - height: 0; - margin: 0 -16px; - margin-left: -16px; - min-width: 32px; -} -.mat-horizontal-stepper-header::before, .mat-horizontal-stepper-header::after, .mat-stepper-horizontal-line { - border-top-color: rgba(0, 0, 0, 0.12); -} + styles:[ ` + + `] @@ -63,7 +54,7 @@ export class LinkingGenericComponent { constructor (private _router: Router, private route: ActivatedRoute, private entitySearch:EntitiesSearchService, private _meta: Meta, private _title: Title, private _piwikService:PiwikService, - private seoService: SEOService, private helper: HelperService ) { + private seoService: SEOService, private helper: HelperService, private cdr: ChangeDetectorRef ) { } subscriptions = []; @@ -74,8 +65,8 @@ export class LinkingGenericComponent { } this.showOptions.show = 'source'; if(this.inlineEntity){ - this.showOptions.basketShowSources = false; - this.showOptions.basketShowLinksTo = true; + this.showOptions.showLinkTo(); + // this.showOptions.basketShowLinksTo = true; this.showOptions.show = this.showOptions.linkTo; } @@ -161,4 +152,52 @@ export class LinkingGenericComponent { private updateUrl(url:string) { this._meta.updateTag({content:url},"property='og:url'"); } + + stepHasChanged(stepId){ + + if(stepId == 'source'){ + console.log("show source") + this.showOptions.showSource(); + }else if(stepId == 'target'){ + console.log("show target") + this.showOptions.show = this.showOptions.linkTo; + this.showOptions.showLinkTo(); + }else if(stepId == 'claim'){ + console.log("show target") + this.showOptions.show = 'claim'; + } + this.cdr.detectChanges(); + console.log('stepHasChanged', stepId, this.showOptions.show) + } + + stepStatus(stepId){ + if(stepId == 'source'){ + if(this.showOptions.show == 'source'){ + return 'active'; + }else if(this.sources.length > 0){ + return 'done'; + }else{ + return 'default'; + } + }else if(stepId=='target'){ + if(this.showOptions.show != 'source' && this.showOptions.show != 'claim'){ + return 'active'; + }else if(this.results.length > 0){ + return 'done'; + }else if(this.sources.length == 0){ + return 'disabled'; + }else{ + return 'default'; + } + }else if(stepId=='claim'){ + if(this.showOptions.show == 'claim'){ + return 'active'; + }else if(this.results.length > 0 && (this.inlineEntity || this.sources.length > 0)){ + return 'default'; + }else if(!(this.results.length > 0 && (this.inlineEntity || this.sources.length > 0))){ + return 'disabled'; + } + } + } + } diff --git a/claims/linking/linkingGeneric.module.ts b/claims/linking/linkingGeneric.module.ts index 25de2f5a..d1bcd4e2 100644 --- a/claims/linking/linkingGeneric.module.ts +++ b/claims/linking/linkingGeneric.module.ts @@ -22,6 +22,7 @@ import {ClaimEntitiesMetadataModule} from "./selected/ClaimEntitiesMetadata.modu import {AlertModalModule} from '../../utils/modal/alertModal.module'; import {PiwikServiceModule} from "../../utils/piwik/piwikService.module"; import {BreadcrumbsModule} from "../../utils/breadcrumbs/breadcrumbs.module"; +import {StepperModule} from "../../sharedComponents/stepper/stepper.module"; @NgModule({ imports: [ @@ -31,7 +32,7 @@ import {BreadcrumbsModule} from "../../utils/breadcrumbs/breadcrumbs.module"; ClaimContextSearchFormModule, ClaimProjectsSearchFormModule, BulkClaimModule, ClaimResultSearchFormModule, HelperModule, Schema2jsonldModule, SEOServiceModule, MetadataPreviewModule, ClaimEntitiesMetadataModule, AlertModalModule, PiwikServiceModule, - MatSelectModule, BreadcrumbsModule + MatSelectModule, BreadcrumbsModule, StepperModule ], providers:[LoginGuard, PreviousRouteRecorder, IsRouteEnabled], declarations: [ diff --git a/claims/linking/selected/ClaimEntityProjectMetadata.component.ts b/claims/linking/selected/ClaimEntityProjectMetadata.component.ts index 70b7060b..5ac502af 100644 --- a/claims/linking/selected/ClaimEntityProjectMetadata.component.ts +++ b/claims/linking/selected/ClaimEntityProjectMetadata.component.ts @@ -8,16 +8,16 @@ import {ClaimEntity} from '../../claim-utils/claimHelper.class';
      - Funder {{entity.project.funderName}} + Funder: {{entity.project.funderName}} +
      +
      + GrandID: {{entity.project.code}}
      -
      - GrandId {{entity.project.code}} -
      Duration {{(entity.project.startDate) ? entity.project.startDate : 'Unknown'}}{{'-' + ((entity.project.endDate) ? entity.project.endDate : 'Unknown')}} + class="uk-text-muted uk-margin-small-right">Duration: {{(entity.project.startDate) ? entity.project.startDate : 'Unknown'}}{{'-' + ((entity.project.endDate) ? entity.project.endDate : 'Unknown')}}
      diff --git a/claims/linking/selected/ClaimEntityResultMetadata.component.ts b/claims/linking/selected/ClaimEntityResultMetadata.component.ts index 2addc8c8..a8be5cef 100644 --- a/claims/linking/selected/ClaimEntityResultMetadata.component.ts +++ b/claims/linking/selected/ClaimEntityResultMetadata.component.ts @@ -6,23 +6,23 @@ import {ClaimEntity} from '../../claim-utils/claimHelper.class'; template: `
      -
      - Authors +
      + Authors: {{sliceArray(entity.result.authors)}}
      -
      - Editors +
      + Editors: {{sliceArray(entity.result.editors)}}
      -
      +
      Publisher {{entity.result.publisher}} + class="uk-text-muted uk-margin-small-right uk-margin-small-bottom">Publisher: {{entity.result.publisher}} Journal {{entity.result.journal}} + class="uk-text-muted uk-margin-small-right uk-margin-small-bottom">Journal: {{entity.result.journal}}
      - Published in Published: {{entity.result.date}}
      {{getProjectDurationMessage(entity)}}
      diff --git a/claims/linking/selected/ClaimEntityTitle.component.ts b/claims/linking/selected/ClaimEntityTitle.component.ts index debcc7a3..44c56264 100644 --- a/claims/linking/selected/ClaimEntityTitle.component.ts +++ b/claims/linking/selected/ClaimEntityTitle.component.ts @@ -6,7 +6,7 @@ import {StringUtils} from "../../../utils/string-utils.class"; selector: 'claim-title', template: ` - +
      {{entity.title ? sliceString(entity.title) : '[No title available]'}} {{entity.context.concept.label}} - +
      ` diff --git a/claims/linking/selected/metadataPreview.component.html b/claims/linking/selected/metadataPreview.component.html index 91e7069f..14613363 100644 --- a/claims/linking/selected/metadataPreview.component.html +++ b/claims/linking/selected/metadataPreview.component.html @@ -10,31 +10,23 @@
      -
      +
      +
      +
      -
      +
      - SOURCES ({{sources.length + (inlineEntity ? 1 : 0) | number}}) - + SOURCES ({{sources.length + (inlineEntity ? 1 : 0) | number}}) - Edit sources
      -
        -
      • +
          +
        • {{(!inlineEntity.result) ? inlineEntity.type : ((inlineEntity.result && inlineEntity.result.source == 'openaire') ? inlineEntity.type : (inlineEntity.result && inlineEntity.result.source + ' result'))}} @@ -47,7 +39,7 @@
          - +
          @@ -56,17 +48,13 @@
          - SOURCES cannot be empty. + SOURCES cannot be empty.
          Start by adding your linking sources first, go to - sources - page. + step 1.
          -
            -
          • +
              +
            • @@ -80,7 +68,7 @@
          - +
          - - - - +
          @@ -168,68 +153,27 @@
      -
      +
      - LINK TO ({{results.length | number}}) + LINK TO ({{results.length | number}}) - Edit entities
      - LINK TO list cannot be empty. - Select an entity type to link to: -
      - -
      - -
      Projects
      -
      -
      - -
      Research results
      -
      -
      - -
      Communities
      -
      - -
      + LINK TO list cannot be empty.
      + Start by adding sources to link to first, go to + step 2. +
      -
        +
        • + style="z-index: 0 !important;">
          {{(!entity.result) ? entity.type : ((entity.result && entity.result.source == 'openaire') ? entity.type : (entity.result && entity.result.source + ' result'))}} @@ -242,7 +186,7 @@
          - +
          - - - - +
          @@ -312,10 +253,12 @@
      -
      +
      +
      +
      -
      + [class]="((results.length > 0 && (sources.length > 0 || inlineEntity))?'uk-background-secondary uk-light':'uk-background-muted uk-disabled ')+' uk-padding-small'"> +
      diff --git a/claims/linking/selected/selectedResults.component.html b/claims/linking/selected/selectedResults.component.html index e81d9d4e..9eadfcab 100644 --- a/claims/linking/selected/selectedResults.component.html +++ b/claims/linking/selected/selectedResults.component.html @@ -10,10 +10,8 @@
      - - - - + +
      diff --git a/searchPages/searchUtils/searchFilter.component.html b/searchPages/searchUtils/searchFilter.component.html index a3d7f4ac..a3980f09 100644 --- a/searchPages/searchUtils/searchFilter.component.html +++ b/searchPages/searchUtils/searchFilter.component.html @@ -11,15 +11,15 @@
      -
      - +
      + + View all - + - diff --git a/searchPages/searchUtils/searchFilter.component.ts b/searchPages/searchUtils/searchFilter.component.ts index 846a459b..0a5e1881 100644 --- a/searchPages/searchUtils/searchFilter.component.ts +++ b/searchPages/searchUtils/searchFilter.component.ts @@ -32,14 +32,14 @@ export class SearchFilterComponent implements OnInit, OnChanges { @Output() modalChange = new EventEmitter(); @Output() onFilterChange = new EventEmitter(); keyword = ""; - sortBy = "name"; + sortBy: "name" | "num" = "name"; queryParams = {}; paramPosition = 0; @Input() actionRoute: boolean = false; @Input() quickFilter: { filter: Filter, selected: boolean, filterId: string, value: string }; sub; public isOpen: boolean = false; - + sortedValues; constructor(private _router: Router, private route: ActivatedRoute) { } @@ -50,11 +50,18 @@ export class SearchFilterComponent implements OnInit, OnChanges { } ngOnInit() { + if(this.filterValuesNum == 0){ + this.isOpen = true; + this.sortBy = "num"; + }else{ + this.isOpen = false; + } this.sub = this.route.queryParams.subscribe(params => { this.queryParams = Object.assign({}, params); this.paramPosition = SearchFields.getParameterOrder(this.filter.filterId, this.getEntries(params)); }); this.filter.values = this.filter.values.filter(value => !value.name.toLowerCase().includes('unknown') && !value.name.toLowerCase().includes('not available')); + this.sort(this.filter.values); if (this.filter.filterType == "radio") { this.filter.radioValue = ""; this.filter.values.forEach(value => { @@ -236,11 +243,13 @@ export class SearchFilterComponent implements OnInit, OnChanges { return 0; }); } - return sorted; + event.stopPropagation(); + this.sortedValues = Object.assign(sorted); } toggle() { this.isOpen = !this.isOpen; + event.stopPropagation(); } disabled(value) {