mapa-library-ui 0.22.1 → 0.22.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2020/src/lib/components/capability/lib/components/capability/src/capability-detail/capability-detail.component.mjs +9 -4
- package/fesm2015/mapa-library-ui-src-lib-components-capability.mjs +7 -2
- package/fesm2015/mapa-library-ui-src-lib-components-capability.mjs.map +1 -1
- package/fesm2020/mapa-library-ui-src-lib-components-capability.mjs +7 -2
- package/fesm2020/mapa-library-ui-src-lib-components-capability.mjs.map +1 -1
- package/mapa-library-ui-0.22.2.tgz +0 -0
- package/package.json +1 -1
- package/src/lib/components/capability/lib/components/capability/src/capability-detail/capability-detail.component.d.ts +2 -0
- package/mapa-library-ui-0.22.1.tgz +0 -0
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Component, Input, ViewEncapsulation, } from "@angular/core";
|
|
1
|
+
import { Component, Input, ViewChild, ViewEncapsulation, } from "@angular/core";
|
|
2
2
|
import * as i0 from "@angular/core";
|
|
3
3
|
import * as i1 from "../../public-api";
|
|
4
4
|
import * as i2 from "@angular/common";
|
|
@@ -27,20 +27,25 @@ export class MapaCapabilityDetailComponent {
|
|
|
27
27
|
toggleAll() {
|
|
28
28
|
if (this.expanded.size === this.data.length) {
|
|
29
29
|
this.expanded.clear();
|
|
30
|
+
this.accordion.closeAll();
|
|
30
31
|
}
|
|
31
32
|
else {
|
|
32
33
|
this.expanded = new Set(this.data.map((_, i) => i));
|
|
34
|
+
this.accordion.openAll();
|
|
33
35
|
}
|
|
34
36
|
}
|
|
35
37
|
}
|
|
36
38
|
MapaCapabilityDetailComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityDetailComponent, deps: [{ token: i1.CapabilityClassificationService }], target: i0.ɵɵFactoryTarget.Component });
|
|
37
|
-
MapaCapabilityDetailComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaCapabilityDetailComponent, selector: "mapa-capability-detail", inputs: { data: "data", showTagInterval: "showTagInterval" }, ngImport: i0, template: "<mat-accordion>\n <mat-expansion-panel *ngFor=\"let capability of data; let i = index\">\n <mat-expansion-panel-header>\n <div class=\"capability__item--header\">\n <div class=\"capability__item--title-dots\">\n <div class=\"capability__item--title display-L\">\n {{ capability.name }}\n <span class=\"capability__item--title-tag\" *ngIf=\"showTagInterval\">\n <mapa-tag size=\"small\">\n <mapa-capability-dot\n [item]=\"capability\"\n [capability]=\"capability\"\n ></mapa-capability-dot>\n\n {{ classification.getByItem(capability).name }}\n </mapa-tag>\n </span>\n </div>\n\n <div class=\"capability__item--dots\">\n <mapa-capability-dot\n *ngFor=\"let item of sortItemsByinterval(capability.items)\"\n type=\"small\"\n [item]=\"item\"\n [capability]=\"capability\"\n [tooltip]=\"true\"\n ></mapa-capability-dot>\n </div>\n </div>\n\n <div [class.capability__item--interval]=\"showTagInterval\">\n <mapa-capability-interval-bar\n [data]=\"capability\"\n [expanded]=\"expanded.has(i)\"\n [showInterval]=\"!showTagInterval\"\n (clicked)=\"showMore(i)\"\n reusable-interval-bar\n ></mapa-capability-interval-bar>\n </div>\n </div>\n </mat-expansion-panel-header>\n <mapa-capability-expand [data]=\"capability\"></mapa-capability-expand>\n </mat-expansion-panel>\n</mat-accordion>\n\n<!--\n<section class=\"capability\">\n <div class=\"capability__core\">\n <div\n *ngFor=\"let capability of data; let i = index\"\n class=\"capability__item\"\n >\n <div class=\"capability__item--header\">\n <div class=\"capability__item--title-dots\">\n <div class=\"capability__item--title display-L\">\n {{ capability.name }}\n <span class=\"capability__item--title-tag\" *ngIf=\"showTagInterval\">\n <mapa-tag size=\"small\">\n <mapa-capability-dot\n [item]=\"capability\"\n [capability]=\"capability\"\n ></mapa-capability-dot>\n\n {{ classification.getByItem(capability).name }}\n </mapa-tag>\n </span>\n </div>\n\n <div class=\"capability__item--dots\">\n <mapa-capability-dot\n *ngFor=\"let item of sortItemsByinterval(capability.items)\"\n type=\"small\"\n [item]=\"item\"\n [capability]=\"capability\"\n [tooltip]=\"true\"\n ></mapa-capability-dot>\n </div>\n </div>\n\n <div [class.capability__item--interval]=\"showTagInterval\">\n <mapa-capability-interval-bar\n [data]=\"capability\"\n [expanded]=\"expanded.has(i)\"\n [showInterval]=\"!showTagInterval\"\n (clicked)=\"showMore(i)\"\n reusable-interval-bar\n ></mapa-capability-interval-bar>\n </div>\n </div>\n <div\n [class.capability__item--show]=\"expanded.has(i)\"\n [class.capability__item--hide]=\"!expanded.has(i)\"\n >\n <mapa-capability-expand [data]=\"capability\"></mapa-capability-expand>\n </div>\n </div>\n </div>\n</section>\n-->\n", styles: [".mat-expansion-panel{border-radius:0!important}.mat-expansion-panel-spacing{margin:unset!important}.mat-accordion .mat-expansion-panel:last-of-type{border-bottom-right-radius:16px!important;border-bottom-left-radius:16px!important}.mat-accordion .mat-expansion-panel:first-of-type{border-top-right-radius:16px!important;border-top-left-radius:16px!important}.mat-expansion-panel-header{height:unset!important;padding:16px 24px!important}.capability{border-radius:16px}.capability h1{font-family:SF-Pro;font-size:32px;font-style:normal;font-weight:400;line-height:40px}.capability__core{border:1px solid #DCDCDE;border-radius:16px;background-color:#fff}.capability__item{padding:24px;position:relative}.capability__item:hover{box-shadow:0 4px 4px #00000021}.capability__item:not(:only-child){border-bottom:1px solid #dcdcde}.capability__item:first-child{border-radius:16px 16px 0 0}.capability__item:last-child{border-bottom:unset;border-radius:0 0 16px 16px}.capability__item--hide{opacity:0;max-height:0;height:0}.capability__item--hide>*{display:none!important;opacity:0!important;max-height:0!important;height:0!important;margin:0!important;padding:0!important;flex:0}.capability__item--show{opacity:1;max-height:100%;height:100%}.capability__item--header{display:flex;align-items:center;justify-content:space-between;height:75px;width:98%}.capability__item--title{display:flex;align-items:center;white-space:nowrap}.capability__item--title-tag{margin-left:34px}.capability__item--title-dots{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;height:72px}.capability__item--title-dots .display-L{margin-bottom:10px}.capability__item--dots{display:flex}.capability__item--dots mapa-capability-dot .tooltip-dot{padding:8px 8px 8px 0}.capability__item--interval mapa-capability-interval-bar .capability-interval{width:267px}\n", ".classification-1{background-color:#073e92;color:#fff}.classification-2{background-color:#0e6ece;color:#fff}.classification-3{background-color:#2d9ced;color:#000}.classification-4{background-color:#68ceee;color:#000}.classification-5{background-color:#96f2ee;color:#000}.classification-6{background-color:#f598a7;color:#000}.classification-7{background-color:#f56580;color:#000}.classification-8{background-color:#f4284e;color:#fff}.classification-9{background-color:#c11c2f;color:#fff}.small-dot{width:12px;height:12px;border-radius:12px;padding:0;margin:0}.dot{width:16px;height:16px;border-radius:16px;padding:0;margin:0}.indicator{display:flex;padding:2px 4px 2px 16px;justify-content:space-between;align-items:center;border-radius:8px;font-family:SF-Pro;font-size:16px;font-style:normal;font-weight:400}.display-S{font-family:SF-Pro;font-size:20px;font-style:normal;font-weight:400}.display-L{font-family:SF-Pro;font-size:32px;font-style:normal;font-weight:400}.display-XG{font-family:SF-Pro;font-size:48px;font-style:normal;font-weight:400}*{transition:opacity .4s ease-out,max-height .4s ease-out}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MapaCapabilityDotComponent, selector: "mapa-capability-dot", inputs: ["type", "item", "tooltip", "capability"] }, { kind: "component", type: i4.MapaCapabilityIntervalBarComponent, selector: "mapa-capability-interval-bar", inputs: ["data", "expanded", "showInterval"], outputs: ["clicked"] }, { kind: "component", type: i5.MapaCapabilityExpandComponent, selector: "mapa-capability-expand", inputs: ["data"] }, { kind: "component", type: i6.TagComponent, selector: "mapa-tag", inputs: ["color", "size"] }, { kind: "directive", type: i7.MatAccordion, selector: "mat-accordion", inputs: ["multi", "hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i7.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i7.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
39
|
+
MapaCapabilityDetailComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaCapabilityDetailComponent, selector: "mapa-capability-detail", inputs: { data: "data", showTagInterval: "showTagInterval" }, viewQueries: [{ propertyName: "accordion", first: true, predicate: ["detailAccordion"], descendants: true }], ngImport: i0, template: "<mat-accordion #detailAccordion=\"matAccordion\" multi>\n <mat-expansion-panel *ngFor=\"let capability of data; let i = index\">\n <mat-expansion-panel-header>\n <div class=\"capability__item--header\">\n <div class=\"capability__item--title-dots\">\n <div class=\"capability__item--title display-L\">\n {{ capability.name }}\n <span class=\"capability__item--title-tag\" *ngIf=\"showTagInterval\">\n <mapa-tag size=\"small\">\n <mapa-capability-dot\n [item]=\"capability\"\n [capability]=\"capability\"\n ></mapa-capability-dot>\n\n {{ classification.getByItem(capability).name }}\n </mapa-tag>\n </span>\n </div>\n\n <div class=\"capability__item--dots\">\n <mapa-capability-dot\n *ngFor=\"let item of sortItemsByinterval(capability.items)\"\n type=\"small\"\n [item]=\"item\"\n [capability]=\"capability\"\n [tooltip]=\"true\"\n ></mapa-capability-dot>\n </div>\n </div>\n\n <div [class.capability__item--interval]=\"showTagInterval\">\n <mapa-capability-interval-bar\n [data]=\"capability\"\n [expanded]=\"expanded.has(i)\"\n [showInterval]=\"!showTagInterval\"\n (clicked)=\"showMore(i)\"\n reusable-interval-bar\n ></mapa-capability-interval-bar>\n </div>\n </div>\n </mat-expansion-panel-header>\n <mapa-capability-expand [data]=\"capability\"></mapa-capability-expand>\n </mat-expansion-panel>\n</mat-accordion>\n\n<!--\n<section class=\"capability\">\n <div class=\"capability__core\">\n <div\n *ngFor=\"let capability of data; let i = index\"\n class=\"capability__item\"\n >\n <div class=\"capability__item--header\">\n <div class=\"capability__item--title-dots\">\n <div class=\"capability__item--title display-L\">\n {{ capability.name }}\n <span class=\"capability__item--title-tag\" *ngIf=\"showTagInterval\">\n <mapa-tag size=\"small\">\n <mapa-capability-dot\n [item]=\"capability\"\n [capability]=\"capability\"\n ></mapa-capability-dot>\n\n {{ classification.getByItem(capability).name }}\n </mapa-tag>\n </span>\n </div>\n\n <div class=\"capability__item--dots\">\n <mapa-capability-dot\n *ngFor=\"let item of sortItemsByinterval(capability.items)\"\n type=\"small\"\n [item]=\"item\"\n [capability]=\"capability\"\n [tooltip]=\"true\"\n ></mapa-capability-dot>\n </div>\n </div>\n\n <div [class.capability__item--interval]=\"showTagInterval\">\n <mapa-capability-interval-bar\n [data]=\"capability\"\n [expanded]=\"expanded.has(i)\"\n [showInterval]=\"!showTagInterval\"\n (clicked)=\"showMore(i)\"\n reusable-interval-bar\n ></mapa-capability-interval-bar>\n </div>\n </div>\n <div\n [class.capability__item--show]=\"expanded.has(i)\"\n [class.capability__item--hide]=\"!expanded.has(i)\"\n >\n <mapa-capability-expand [data]=\"capability\"></mapa-capability-expand>\n </div>\n </div>\n </div>\n</section>\n-->\n", styles: [".mat-expansion-panel{border-radius:0!important}.mat-expansion-panel-spacing{margin:unset!important}.mat-accordion .mat-expansion-panel:last-of-type{border-bottom-right-radius:16px!important;border-bottom-left-radius:16px!important}.mat-accordion .mat-expansion-panel:first-of-type{border-top-right-radius:16px!important;border-top-left-radius:16px!important}.mat-expansion-panel-header{height:unset!important;padding:16px 24px!important}.capability{border-radius:16px}.capability h1{font-family:SF-Pro;font-size:32px;font-style:normal;font-weight:400;line-height:40px}.capability__core{border:1px solid #DCDCDE;border-radius:16px;background-color:#fff}.capability__item{padding:24px;position:relative}.capability__item:hover{box-shadow:0 4px 4px #00000021}.capability__item:not(:only-child){border-bottom:1px solid #dcdcde}.capability__item:first-child{border-radius:16px 16px 0 0}.capability__item:last-child{border-bottom:unset;border-radius:0 0 16px 16px}.capability__item--hide{opacity:0;max-height:0;height:0}.capability__item--hide>*{display:none!important;opacity:0!important;max-height:0!important;height:0!important;margin:0!important;padding:0!important;flex:0}.capability__item--show{opacity:1;max-height:100%;height:100%}.capability__item--header{display:flex;align-items:center;justify-content:space-between;height:75px;width:98%}.capability__item--title{display:flex;align-items:center;white-space:nowrap}.capability__item--title-tag{margin-left:34px}.capability__item--title-dots{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;height:72px}.capability__item--title-dots .display-L{margin-bottom:10px}.capability__item--dots{display:flex}.capability__item--dots mapa-capability-dot .tooltip-dot{padding:8px 8px 8px 0}.capability__item--interval mapa-capability-interval-bar .capability-interval{width:267px}\n", ".classification-1{background-color:#073e92;color:#fff}.classification-2{background-color:#0e6ece;color:#fff}.classification-3{background-color:#2d9ced;color:#000}.classification-4{background-color:#68ceee;color:#000}.classification-5{background-color:#96f2ee;color:#000}.classification-6{background-color:#f598a7;color:#000}.classification-7{background-color:#f56580;color:#000}.classification-8{background-color:#f4284e;color:#fff}.classification-9{background-color:#c11c2f;color:#fff}.small-dot{width:12px;height:12px;border-radius:12px;padding:0;margin:0}.dot{width:16px;height:16px;border-radius:16px;padding:0;margin:0}.indicator{display:flex;padding:2px 4px 2px 16px;justify-content:space-between;align-items:center;border-radius:8px;font-family:SF-Pro;font-size:16px;font-style:normal;font-weight:400}.display-S{font-family:SF-Pro;font-size:20px;font-style:normal;font-weight:400}.display-L{font-family:SF-Pro;font-size:32px;font-style:normal;font-weight:400}.display-XG{font-family:SF-Pro;font-size:48px;font-style:normal;font-weight:400}*{transition:opacity .4s ease-out,max-height .4s ease-out}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MapaCapabilityDotComponent, selector: "mapa-capability-dot", inputs: ["type", "item", "tooltip", "capability"] }, { kind: "component", type: i4.MapaCapabilityIntervalBarComponent, selector: "mapa-capability-interval-bar", inputs: ["data", "expanded", "showInterval"], outputs: ["clicked"] }, { kind: "component", type: i5.MapaCapabilityExpandComponent, selector: "mapa-capability-expand", inputs: ["data"] }, { kind: "component", type: i6.TagComponent, selector: "mapa-tag", inputs: ["color", "size"] }, { kind: "directive", type: i7.MatAccordion, selector: "mat-accordion", inputs: ["multi", "hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i7.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i7.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
38
40
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityDetailComponent, decorators: [{
|
|
39
41
|
type: Component,
|
|
40
|
-
args: [{ selector: "mapa-capability-detail", encapsulation: ViewEncapsulation.None, template: "<mat-accordion>\n <mat-expansion-panel *ngFor=\"let capability of data; let i = index\">\n <mat-expansion-panel-header>\n <div class=\"capability__item--header\">\n <div class=\"capability__item--title-dots\">\n <div class=\"capability__item--title display-L\">\n {{ capability.name }}\n <span class=\"capability__item--title-tag\" *ngIf=\"showTagInterval\">\n <mapa-tag size=\"small\">\n <mapa-capability-dot\n [item]=\"capability\"\n [capability]=\"capability\"\n ></mapa-capability-dot>\n\n {{ classification.getByItem(capability).name }}\n </mapa-tag>\n </span>\n </div>\n\n <div class=\"capability__item--dots\">\n <mapa-capability-dot\n *ngFor=\"let item of sortItemsByinterval(capability.items)\"\n type=\"small\"\n [item]=\"item\"\n [capability]=\"capability\"\n [tooltip]=\"true\"\n ></mapa-capability-dot>\n </div>\n </div>\n\n <div [class.capability__item--interval]=\"showTagInterval\">\n <mapa-capability-interval-bar\n [data]=\"capability\"\n [expanded]=\"expanded.has(i)\"\n [showInterval]=\"!showTagInterval\"\n (clicked)=\"showMore(i)\"\n reusable-interval-bar\n ></mapa-capability-interval-bar>\n </div>\n </div>\n </mat-expansion-panel-header>\n <mapa-capability-expand [data]=\"capability\"></mapa-capability-expand>\n </mat-expansion-panel>\n</mat-accordion>\n\n<!--\n<section class=\"capability\">\n <div class=\"capability__core\">\n <div\n *ngFor=\"let capability of data; let i = index\"\n class=\"capability__item\"\n >\n <div class=\"capability__item--header\">\n <div class=\"capability__item--title-dots\">\n <div class=\"capability__item--title display-L\">\n {{ capability.name }}\n <span class=\"capability__item--title-tag\" *ngIf=\"showTagInterval\">\n <mapa-tag size=\"small\">\n <mapa-capability-dot\n [item]=\"capability\"\n [capability]=\"capability\"\n ></mapa-capability-dot>\n\n {{ classification.getByItem(capability).name }}\n </mapa-tag>\n </span>\n </div>\n\n <div class=\"capability__item--dots\">\n <mapa-capability-dot\n *ngFor=\"let item of sortItemsByinterval(capability.items)\"\n type=\"small\"\n [item]=\"item\"\n [capability]=\"capability\"\n [tooltip]=\"true\"\n ></mapa-capability-dot>\n </div>\n </div>\n\n <div [class.capability__item--interval]=\"showTagInterval\">\n <mapa-capability-interval-bar\n [data]=\"capability\"\n [expanded]=\"expanded.has(i)\"\n [showInterval]=\"!showTagInterval\"\n (clicked)=\"showMore(i)\"\n reusable-interval-bar\n ></mapa-capability-interval-bar>\n </div>\n </div>\n <div\n [class.capability__item--show]=\"expanded.has(i)\"\n [class.capability__item--hide]=\"!expanded.has(i)\"\n >\n <mapa-capability-expand [data]=\"capability\"></mapa-capability-expand>\n </div>\n </div>\n </div>\n</section>\n-->\n", styles: [".mat-expansion-panel{border-radius:0!important}.mat-expansion-panel-spacing{margin:unset!important}.mat-accordion .mat-expansion-panel:last-of-type{border-bottom-right-radius:16px!important;border-bottom-left-radius:16px!important}.mat-accordion .mat-expansion-panel:first-of-type{border-top-right-radius:16px!important;border-top-left-radius:16px!important}.mat-expansion-panel-header{height:unset!important;padding:16px 24px!important}.capability{border-radius:16px}.capability h1{font-family:SF-Pro;font-size:32px;font-style:normal;font-weight:400;line-height:40px}.capability__core{border:1px solid #DCDCDE;border-radius:16px;background-color:#fff}.capability__item{padding:24px;position:relative}.capability__item:hover{box-shadow:0 4px 4px #00000021}.capability__item:not(:only-child){border-bottom:1px solid #dcdcde}.capability__item:first-child{border-radius:16px 16px 0 0}.capability__item:last-child{border-bottom:unset;border-radius:0 0 16px 16px}.capability__item--hide{opacity:0;max-height:0;height:0}.capability__item--hide>*{display:none!important;opacity:0!important;max-height:0!important;height:0!important;margin:0!important;padding:0!important;flex:0}.capability__item--show{opacity:1;max-height:100%;height:100%}.capability__item--header{display:flex;align-items:center;justify-content:space-between;height:75px;width:98%}.capability__item--title{display:flex;align-items:center;white-space:nowrap}.capability__item--title-tag{margin-left:34px}.capability__item--title-dots{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;height:72px}.capability__item--title-dots .display-L{margin-bottom:10px}.capability__item--dots{display:flex}.capability__item--dots mapa-capability-dot .tooltip-dot{padding:8px 8px 8px 0}.capability__item--interval mapa-capability-interval-bar .capability-interval{width:267px}\n", ".classification-1{background-color:#073e92;color:#fff}.classification-2{background-color:#0e6ece;color:#fff}.classification-3{background-color:#2d9ced;color:#000}.classification-4{background-color:#68ceee;color:#000}.classification-5{background-color:#96f2ee;color:#000}.classification-6{background-color:#f598a7;color:#000}.classification-7{background-color:#f56580;color:#000}.classification-8{background-color:#f4284e;color:#fff}.classification-9{background-color:#c11c2f;color:#fff}.small-dot{width:12px;height:12px;border-radius:12px;padding:0;margin:0}.dot{width:16px;height:16px;border-radius:16px;padding:0;margin:0}.indicator{display:flex;padding:2px 4px 2px 16px;justify-content:space-between;align-items:center;border-radius:8px;font-family:SF-Pro;font-size:16px;font-style:normal;font-weight:400}.display-S{font-family:SF-Pro;font-size:20px;font-style:normal;font-weight:400}.display-L{font-family:SF-Pro;font-size:32px;font-style:normal;font-weight:400}.display-XG{font-family:SF-Pro;font-size:48px;font-style:normal;font-weight:400}*{transition:opacity .4s ease-out,max-height .4s ease-out}\n"] }]
|
|
42
|
+
args: [{ selector: "mapa-capability-detail", encapsulation: ViewEncapsulation.None, template: "<mat-accordion #detailAccordion=\"matAccordion\" multi>\n <mat-expansion-panel *ngFor=\"let capability of data; let i = index\">\n <mat-expansion-panel-header>\n <div class=\"capability__item--header\">\n <div class=\"capability__item--title-dots\">\n <div class=\"capability__item--title display-L\">\n {{ capability.name }}\n <span class=\"capability__item--title-tag\" *ngIf=\"showTagInterval\">\n <mapa-tag size=\"small\">\n <mapa-capability-dot\n [item]=\"capability\"\n [capability]=\"capability\"\n ></mapa-capability-dot>\n\n {{ classification.getByItem(capability).name }}\n </mapa-tag>\n </span>\n </div>\n\n <div class=\"capability__item--dots\">\n <mapa-capability-dot\n *ngFor=\"let item of sortItemsByinterval(capability.items)\"\n type=\"small\"\n [item]=\"item\"\n [capability]=\"capability\"\n [tooltip]=\"true\"\n ></mapa-capability-dot>\n </div>\n </div>\n\n <div [class.capability__item--interval]=\"showTagInterval\">\n <mapa-capability-interval-bar\n [data]=\"capability\"\n [expanded]=\"expanded.has(i)\"\n [showInterval]=\"!showTagInterval\"\n (clicked)=\"showMore(i)\"\n reusable-interval-bar\n ></mapa-capability-interval-bar>\n </div>\n </div>\n </mat-expansion-panel-header>\n <mapa-capability-expand [data]=\"capability\"></mapa-capability-expand>\n </mat-expansion-panel>\n</mat-accordion>\n\n<!--\n<section class=\"capability\">\n <div class=\"capability__core\">\n <div\n *ngFor=\"let capability of data; let i = index\"\n class=\"capability__item\"\n >\n <div class=\"capability__item--header\">\n <div class=\"capability__item--title-dots\">\n <div class=\"capability__item--title display-L\">\n {{ capability.name }}\n <span class=\"capability__item--title-tag\" *ngIf=\"showTagInterval\">\n <mapa-tag size=\"small\">\n <mapa-capability-dot\n [item]=\"capability\"\n [capability]=\"capability\"\n ></mapa-capability-dot>\n\n {{ classification.getByItem(capability).name }}\n </mapa-tag>\n </span>\n </div>\n\n <div class=\"capability__item--dots\">\n <mapa-capability-dot\n *ngFor=\"let item of sortItemsByinterval(capability.items)\"\n type=\"small\"\n [item]=\"item\"\n [capability]=\"capability\"\n [tooltip]=\"true\"\n ></mapa-capability-dot>\n </div>\n </div>\n\n <div [class.capability__item--interval]=\"showTagInterval\">\n <mapa-capability-interval-bar\n [data]=\"capability\"\n [expanded]=\"expanded.has(i)\"\n [showInterval]=\"!showTagInterval\"\n (clicked)=\"showMore(i)\"\n reusable-interval-bar\n ></mapa-capability-interval-bar>\n </div>\n </div>\n <div\n [class.capability__item--show]=\"expanded.has(i)\"\n [class.capability__item--hide]=\"!expanded.has(i)\"\n >\n <mapa-capability-expand [data]=\"capability\"></mapa-capability-expand>\n </div>\n </div>\n </div>\n</section>\n-->\n", styles: [".mat-expansion-panel{border-radius:0!important}.mat-expansion-panel-spacing{margin:unset!important}.mat-accordion .mat-expansion-panel:last-of-type{border-bottom-right-radius:16px!important;border-bottom-left-radius:16px!important}.mat-accordion .mat-expansion-panel:first-of-type{border-top-right-radius:16px!important;border-top-left-radius:16px!important}.mat-expansion-panel-header{height:unset!important;padding:16px 24px!important}.capability{border-radius:16px}.capability h1{font-family:SF-Pro;font-size:32px;font-style:normal;font-weight:400;line-height:40px}.capability__core{border:1px solid #DCDCDE;border-radius:16px;background-color:#fff}.capability__item{padding:24px;position:relative}.capability__item:hover{box-shadow:0 4px 4px #00000021}.capability__item:not(:only-child){border-bottom:1px solid #dcdcde}.capability__item:first-child{border-radius:16px 16px 0 0}.capability__item:last-child{border-bottom:unset;border-radius:0 0 16px 16px}.capability__item--hide{opacity:0;max-height:0;height:0}.capability__item--hide>*{display:none!important;opacity:0!important;max-height:0!important;height:0!important;margin:0!important;padding:0!important;flex:0}.capability__item--show{opacity:1;max-height:100%;height:100%}.capability__item--header{display:flex;align-items:center;justify-content:space-between;height:75px;width:98%}.capability__item--title{display:flex;align-items:center;white-space:nowrap}.capability__item--title-tag{margin-left:34px}.capability__item--title-dots{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;height:72px}.capability__item--title-dots .display-L{margin-bottom:10px}.capability__item--dots{display:flex}.capability__item--dots mapa-capability-dot .tooltip-dot{padding:8px 8px 8px 0}.capability__item--interval mapa-capability-interval-bar .capability-interval{width:267px}\n", ".classification-1{background-color:#073e92;color:#fff}.classification-2{background-color:#0e6ece;color:#fff}.classification-3{background-color:#2d9ced;color:#000}.classification-4{background-color:#68ceee;color:#000}.classification-5{background-color:#96f2ee;color:#000}.classification-6{background-color:#f598a7;color:#000}.classification-7{background-color:#f56580;color:#000}.classification-8{background-color:#f4284e;color:#fff}.classification-9{background-color:#c11c2f;color:#fff}.small-dot{width:12px;height:12px;border-radius:12px;padding:0;margin:0}.dot{width:16px;height:16px;border-radius:16px;padding:0;margin:0}.indicator{display:flex;padding:2px 4px 2px 16px;justify-content:space-between;align-items:center;border-radius:8px;font-family:SF-Pro;font-size:16px;font-style:normal;font-weight:400}.display-S{font-family:SF-Pro;font-size:20px;font-style:normal;font-weight:400}.display-L{font-family:SF-Pro;font-size:32px;font-style:normal;font-weight:400}.display-XG{font-family:SF-Pro;font-size:48px;font-style:normal;font-weight:400}*{transition:opacity .4s ease-out,max-height .4s ease-out}\n"] }]
|
|
41
43
|
}], ctorParameters: function () { return [{ type: i1.CapabilityClassificationService }]; }, propDecorators: { data: [{
|
|
42
44
|
type: Input
|
|
43
45
|
}], showTagInterval: [{
|
|
44
46
|
type: Input
|
|
47
|
+
}], accordion: [{
|
|
48
|
+
type: ViewChild,
|
|
49
|
+
args: ["detailAccordion"]
|
|
45
50
|
}] } });
|
|
46
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
51
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2FwYWJpbGl0eS1kZXRhaWwuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbWFwYS1saWJyYXJ5LXVpL3NyYy9saWIvY29tcG9uZW50cy9jYXBhYmlsaXR5L3NyYy9jYXBhYmlsaXR5LWRldGFpbC9jYXBhYmlsaXR5LWRldGFpbC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9tYXBhLWxpYnJhcnktdWkvc3JjL2xpYi9jb21wb25lbnRzL2NhcGFiaWxpdHkvc3JjL2NhcGFiaWxpdHktZGV0YWlsL2NhcGFiaWxpdHktZGV0YWlsLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTCxTQUFTLEVBQ1QsS0FBSyxFQUNMLFNBQVMsRUFDVCxpQkFBaUIsR0FDbEIsTUFBTSxlQUFlLENBQUM7Ozs7Ozs7OztBQWN2QixNQUFNLE9BQU8sNkJBQTZCO0lBVXhDLFlBQW1CLGNBQStDO1FBQS9DLG1CQUFjLEdBQWQsY0FBYyxDQUFpQztRQUozRCxhQUFRLEdBQUcsSUFBSSxHQUFHLEVBQVUsQ0FBQztRQUM3QixpQkFBWSxHQUFHLElBQUksQ0FBQztJQUcwQyxDQUFDO0lBRXRFLG1CQUFtQixDQUFDLEtBQVk7UUFDOUIsT0FBTyxLQUFLLEVBQUUsSUFBSSxDQUFDLENBQUMsQ0FBTSxFQUFFLENBQU0sRUFBRSxFQUFFLENBQUMsQ0FBQyxDQUFDLFFBQVEsR0FBRyxDQUFDLENBQUMsUUFBUSxDQUFDLENBQUM7SUFDbEUsQ0FBQztJQUVELFFBQVEsQ0FBQyxLQUFhO1FBQ3BCLElBQUksSUFBSSxDQUFDLFFBQVEsQ0FBQyxHQUFHLENBQUMsS0FBSyxDQUFDLEVBQUU7WUFDNUIsSUFBSSxDQUFDLFFBQVEsQ0FBQyxNQUFNLENBQUMsS0FBSyxDQUFDLENBQUM7U0FDN0I7YUFBTTtZQUNMLElBQUksQ0FBQyxRQUFRLENBQUMsR0FBRyxDQUFDLEtBQUssQ0FBQyxDQUFDO1NBQzFCO0lBQ0gsQ0FBQztJQUVELFNBQVM7UUFDUCxJQUFJLElBQUksQ0FBQyxRQUFRLENBQUMsSUFBSSxLQUFLLElBQUksQ0FBQyxJQUFJLENBQUMsTUFBTSxFQUFFO1lBQzNDLElBQUksQ0FBQyxRQUFRLENBQUMsS0FBSyxFQUFFLENBQUM7WUFDdEIsSUFBSSxDQUFDLFNBQVMsQ0FBQyxRQUFRLEVBQUUsQ0FBQztTQUMzQjthQUFNO1lBQ0wsSUFBSSxDQUFDLFFBQVEsR0FBRyxJQUFJLEdBQUcsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLEdBQUcsQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDLEVBQUUsRUFBRSxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUM7WUFDcEQsSUFBSSxDQUFDLFNBQVMsQ0FBQyxPQUFPLEVBQUUsQ0FBQztTQUMxQjtJQUNILENBQUM7OzJIQWhDVSw2QkFBNkI7K0dBQTdCLDZCQUE2QiwwT0NuQjFDLDQ5R0FtR0E7NEZEaEZhLDZCQUE2QjtrQkFUekMsU0FBUzsrQkFDRSx3QkFBd0IsaUJBTW5CLGlCQUFpQixDQUFDLElBQUk7c0hBRzVCLElBQUk7c0JBQVosS0FBSztnQkFDRyxlQUFlO3NCQUF2QixLQUFLO2dCQUV3QixTQUFTO3NCQUF0QyxTQUFTO3VCQUFDLGlCQUFpQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIENvbXBvbmVudCxcbiAgSW5wdXQsXG4gIFZpZXdDaGlsZCxcbiAgVmlld0VuY2Fwc3VsYXRpb24sXG59IGZyb20gXCJAYW5ndWxhci9jb3JlXCI7XG5pbXBvcnQgeyBDYXBhYmlsaXR5IH0gZnJvbSBcIi4uL2Vzc2VudGlhbHMvaW50ZXJmYWNlcy9jYXBhYmlsaXR5LmludGVyZmFjZVwiO1xuaW1wb3J0IHsgQ2FwYWJpbGl0eUNsYXNzaWZpY2F0aW9uU2VydmljZSB9IGZyb20gXCIuLi8uLi9wdWJsaWMtYXBpXCI7XG5pbXBvcnQgeyBNYXRBY2NvcmRpb24gfSBmcm9tIFwiQGFuZ3VsYXIvbWF0ZXJpYWwvZXhwYW5zaW9uXCI7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogXCJtYXBhLWNhcGFiaWxpdHktZGV0YWlsXCIsXG4gIHRlbXBsYXRlVXJsOiBcIi4vY2FwYWJpbGl0eS1kZXRhaWwuY29tcG9uZW50Lmh0bWxcIixcbiAgc3R5bGVVcmxzOiBbXG4gICAgXCIuL2NhcGFiaWxpdHktZGV0YWlsLmNvbXBvbmVudC5zY3NzXCIsXG4gICAgXCIuLy4uLy4uL3N0eWxlcy9jYXBhYmlsaXR5LnNjc3NcIixcbiAgXSxcbiAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZSxcbn0pXG5leHBvcnQgY2xhc3MgTWFwYUNhcGFiaWxpdHlEZXRhaWxDb21wb25lbnQge1xuICBASW5wdXQoKSBkYXRhITogQ2FwYWJpbGl0eVtdO1xuICBASW5wdXQoKSBzaG93VGFnSW50ZXJ2YWwhOiBib29sZWFuO1xuICBcbiAgQFZpZXdDaGlsZChcImRldGFpbEFjY29yZGlvblwiKSBhY2NvcmRpb24hOiBNYXRBY2NvcmRpb247XG5cbiAgcHVibGljIGV4cGFuZGVkID0gbmV3IFNldDxudW1iZXI+KCk7XG4gIHB1YmxpYyBzaG93SW50ZXJ2YWwgPSB0cnVlO1xuICBcblxuICBjb25zdHJ1Y3RvcihwdWJsaWMgY2xhc3NpZmljYXRpb246IENhcGFiaWxpdHlDbGFzc2lmaWNhdGlvblNlcnZpY2UpIHt9XG5cbiAgc29ydEl0ZW1zQnlpbnRlcnZhbChpdGVtczogYW55W10pOiBhbnlbXSB7XG4gICAgcmV0dXJuIGl0ZW1zPy5zb3J0KChhOiBhbnksIGI6IGFueSkgPT4gYi5pbnRlcnZhbCAtIGEuaW50ZXJ2YWwpO1xuICB9XG5cbiAgc2hvd01vcmUoaW5kZXg6IG51bWJlcik6IHZvaWQge1xuICAgIGlmICh0aGlzLmV4cGFuZGVkLmhhcyhpbmRleCkpIHtcbiAgICAgIHRoaXMuZXhwYW5kZWQuZGVsZXRlKGluZGV4KTtcbiAgICB9IGVsc2Uge1xuICAgICAgdGhpcy5leHBhbmRlZC5hZGQoaW5kZXgpO1xuICAgIH1cbiAgfVxuXG4gIHRvZ2dsZUFsbCgpOiB2b2lkIHtcbiAgICBpZiAodGhpcy5leHBhbmRlZC5zaXplID09PSB0aGlzLmRhdGEubGVuZ3RoKSB7XG4gICAgICB0aGlzLmV4cGFuZGVkLmNsZWFyKCk7XG4gICAgICB0aGlzLmFjY29yZGlvbi5jbG9zZUFsbCgpO1xuICAgIH0gZWxzZSB7XG4gICAgICB0aGlzLmV4cGFuZGVkID0gbmV3IFNldCh0aGlzLmRhdGEubWFwKChfLCBpKSA9PiBpKSk7XG4gICAgICB0aGlzLmFjY29yZGlvbi5vcGVuQWxsKCk7XG4gICAgfVxuICB9XG59XG4iLCI8bWF0LWFjY29yZGlvbiAjZGV0YWlsQWNjb3JkaW9uPVwibWF0QWNjb3JkaW9uXCIgbXVsdGk+XG4gIDxtYXQtZXhwYW5zaW9uLXBhbmVsICpuZ0Zvcj1cImxldCBjYXBhYmlsaXR5IG9mIGRhdGE7IGxldCBpID0gaW5kZXhcIj5cbiAgICA8bWF0LWV4cGFuc2lvbi1wYW5lbC1oZWFkZXI+XG4gICAgICA8ZGl2IGNsYXNzPVwiY2FwYWJpbGl0eV9faXRlbS0taGVhZGVyXCI+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJjYXBhYmlsaXR5X19pdGVtLS10aXRsZS1kb3RzXCI+XG4gICAgICAgICAgPGRpdiBjbGFzcz1cImNhcGFiaWxpdHlfX2l0ZW0tLXRpdGxlIGRpc3BsYXktTFwiPlxuICAgICAgICAgICAge3sgY2FwYWJpbGl0eS5uYW1lIH19XG4gICAgICAgICAgICA8c3BhbiBjbGFzcz1cImNhcGFiaWxpdHlfX2l0ZW0tLXRpdGxlLXRhZ1wiICpuZ0lmPVwic2hvd1RhZ0ludGVydmFsXCI+XG4gICAgICAgICAgICAgIDxtYXBhLXRhZyBzaXplPVwic21hbGxcIj5cbiAgICAgICAgICAgICAgICA8bWFwYS1jYXBhYmlsaXR5LWRvdFxuICAgICAgICAgICAgICAgICAgW2l0ZW1dPVwiY2FwYWJpbGl0eVwiXG4gICAgICAgICAgICAgICAgICBbY2FwYWJpbGl0eV09XCJjYXBhYmlsaXR5XCJcbiAgICAgICAgICAgICAgICA+PC9tYXBhLWNhcGFiaWxpdHktZG90PlxuXG4gICAgICAgICAgICAgICAge3sgY2xhc3NpZmljYXRpb24uZ2V0QnlJdGVtKGNhcGFiaWxpdHkpLm5hbWUgfX1cbiAgICAgICAgICAgICAgPC9tYXBhLXRhZz5cbiAgICAgICAgICAgIDwvc3Bhbj5cbiAgICAgICAgICA8L2Rpdj5cblxuICAgICAgICAgIDxkaXYgY2xhc3M9XCJjYXBhYmlsaXR5X19pdGVtLS1kb3RzXCI+XG4gICAgICAgICAgICA8bWFwYS1jYXBhYmlsaXR5LWRvdFxuICAgICAgICAgICAgICAqbmdGb3I9XCJsZXQgaXRlbSBvZiBzb3J0SXRlbXNCeWludGVydmFsKGNhcGFiaWxpdHkuaXRlbXMpXCJcbiAgICAgICAgICAgICAgdHlwZT1cInNtYWxsXCJcbiAgICAgICAgICAgICAgW2l0ZW1dPVwiaXRlbVwiXG4gICAgICAgICAgICAgIFtjYXBhYmlsaXR5XT1cImNhcGFiaWxpdHlcIlxuICAgICAgICAgICAgICBbdG9vbHRpcF09XCJ0cnVlXCJcbiAgICAgICAgICAgID48L21hcGEtY2FwYWJpbGl0eS1kb3Q+XG4gICAgICAgICAgPC9kaXY+XG4gICAgICAgIDwvZGl2PlxuXG4gICAgICAgIDxkaXYgW2NsYXNzLmNhcGFiaWxpdHlfX2l0ZW0tLWludGVydmFsXT1cInNob3dUYWdJbnRlcnZhbFwiPlxuICAgICAgICAgIDxtYXBhLWNhcGFiaWxpdHktaW50ZXJ2YWwtYmFyXG4gICAgICAgICAgICBbZGF0YV09XCJjYXBhYmlsaXR5XCJcbiAgICAgICAgICAgIFtleHBhbmRlZF09XCJleHBhbmRlZC5oYXMoaSlcIlxuICAgICAgICAgICAgW3Nob3dJbnRlcnZhbF09XCIhc2hvd1RhZ0ludGVydmFsXCJcbiAgICAgICAgICAgIChjbGlja2VkKT1cInNob3dNb3JlKGkpXCJcbiAgICAgICAgICAgIHJldXNhYmxlLWludGVydmFsLWJhclxuICAgICAgICAgID48L21hcGEtY2FwYWJpbGl0eS1pbnRlcnZhbC1iYXI+XG4gICAgICAgIDwvZGl2PlxuICAgICAgPC9kaXY+XG4gICAgPC9tYXQtZXhwYW5zaW9uLXBhbmVsLWhlYWRlcj5cbiAgICA8bWFwYS1jYXBhYmlsaXR5LWV4cGFuZCBbZGF0YV09XCJjYXBhYmlsaXR5XCI+PC9tYXBhLWNhcGFiaWxpdHktZXhwYW5kPlxuICA8L21hdC1leHBhbnNpb24tcGFuZWw+XG48L21hdC1hY2NvcmRpb24+XG5cbjwhLS1cbjxzZWN0aW9uIGNsYXNzPVwiY2FwYWJpbGl0eVwiPlxuICA8ZGl2IGNsYXNzPVwiY2FwYWJpbGl0eV9fY29yZVwiPlxuICAgIDxkaXZcbiAgICAgICpuZ0Zvcj1cImxldCBjYXBhYmlsaXR5IG9mIGRhdGE7IGxldCBpID0gaW5kZXhcIlxuICAgICAgY2xhc3M9XCJjYXBhYmlsaXR5X19pdGVtXCJcbiAgICA+XG4gICAgICA8ZGl2IGNsYXNzPVwiY2FwYWJpbGl0eV9faXRlbS0taGVhZGVyXCI+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJjYXBhYmlsaXR5X19pdGVtLS10aXRsZS1kb3RzXCI+XG4gICAgICAgICAgPGRpdiBjbGFzcz1cImNhcGFiaWxpdHlfX2l0ZW0tLXRpdGxlIGRpc3BsYXktTFwiPlxuICAgICAgICAgICAge3sgY2FwYWJpbGl0eS5uYW1lIH19XG4gICAgICAgICAgICA8c3BhbiBjbGFzcz1cImNhcGFiaWxpdHlfX2l0ZW0tLXRpdGxlLXRhZ1wiICpuZ0lmPVwic2hvd1RhZ0ludGVydmFsXCI+XG4gICAgICAgICAgICAgIDxtYXBhLXRhZyBzaXplPVwic21hbGxcIj5cbiAgICAgICAgICAgICAgICA8bWFwYS1jYXBhYmlsaXR5LWRvdFxuICAgICAgICAgICAgICAgICAgW2l0ZW1dPVwiY2FwYWJpbGl0eVwiXG4gICAgICAgICAgICAgICAgICBbY2FwYWJpbGl0eV09XCJjYXBhYmlsaXR5XCJcbiAgICAgICAgICAgICAgICA+PC9tYXBhLWNhcGFiaWxpdHktZG90PlxuXG4gICAgICAgICAgICAgICAge3sgY2xhc3NpZmljYXRpb24uZ2V0QnlJdGVtKGNhcGFiaWxpdHkpLm5hbWUgfX1cbiAgICAgICAgICAgICAgPC9tYXBhLXRhZz5cbiAgICAgICAgICAgIDwvc3Bhbj5cbiAgICAgICAgICA8L2Rpdj5cblxuICAgICAgICAgIDxkaXYgY2xhc3M9XCJjYXBhYmlsaXR5X19pdGVtLS1kb3RzXCI+XG4gICAgICAgICAgICA8bWFwYS1jYXBhYmlsaXR5LWRvdFxuICAgICAgICAgICAgICAqbmdGb3I9XCJsZXQgaXRlbSBvZiBzb3J0SXRlbXNCeWludGVydmFsKGNhcGFiaWxpdHkuaXRlbXMpXCJcbiAgICAgICAgICAgICAgdHlwZT1cInNtYWxsXCJcbiAgICAgICAgICAgICAgW2l0ZW1dPVwiaXRlbVwiXG4gICAgICAgICAgICAgIFtjYXBhYmlsaXR5XT1cImNhcGFiaWxpdHlcIlxuICAgICAgICAgICAgICBbdG9vbHRpcF09XCJ0cnVlXCJcbiAgICAgICAgICAgID48L21hcGEtY2FwYWJpbGl0eS1kb3Q+XG4gICAgICAgICAgPC9kaXY+XG4gICAgICAgIDwvZGl2PlxuXG4gICAgICAgIDxkaXYgW2NsYXNzLmNhcGFiaWxpdHlfX2l0ZW0tLWludGVydmFsXT1cInNob3dUYWdJbnRlcnZhbFwiPlxuICAgICAgICAgIDxtYXBhLWNhcGFiaWxpdHktaW50ZXJ2YWwtYmFyXG4gICAgICAgICAgICBbZGF0YV09XCJjYXBhYmlsaXR5XCJcbiAgICAgICAgICAgIFtleHBhbmRlZF09XCJleHBhbmRlZC5oYXMoaSlcIlxuICAgICAgICAgICAgW3Nob3dJbnRlcnZhbF09XCIhc2hvd1RhZ0ludGVydmFsXCJcbiAgICAgICAgICAgIChjbGlja2VkKT1cInNob3dNb3JlKGkpXCJcbiAgICAgICAgICAgIHJldXNhYmxlLWludGVydmFsLWJhclxuICAgICAgICAgID48L21hcGEtY2FwYWJpbGl0eS1pbnRlcnZhbC1iYXI+XG4gICAgICAgIDwvZGl2PlxuICAgICAgPC9kaXY+XG4gICAgICA8ZGl2XG4gICAgICAgIFtjbGFzcy5jYXBhYmlsaXR5X19pdGVtLS1zaG93XT1cImV4cGFuZGVkLmhhcyhpKVwiXG4gICAgICAgIFtjbGFzcy5jYXBhYmlsaXR5X19pdGVtLS1oaWRlXT1cIiFleHBhbmRlZC5oYXMoaSlcIlxuICAgICAgPlxuICAgICAgICA8bWFwYS1jYXBhYmlsaXR5LWV4cGFuZCBbZGF0YV09XCJjYXBhYmlsaXR5XCI+PC9tYXBhLWNhcGFiaWxpdHktZXhwYW5kPlxuICAgICAgPC9kaXY+XG4gICAgPC9kaXY+XG4gIDwvZGl2PlxuPC9zZWN0aW9uPlxuLS0+XG4iXX0=
|
|
@@ -977,21 +977,26 @@ class MapaCapabilityDetailComponent {
|
|
|
977
977
|
toggleAll() {
|
|
978
978
|
if (this.expanded.size === this.data.length) {
|
|
979
979
|
this.expanded.clear();
|
|
980
|
+
this.accordion.closeAll();
|
|
980
981
|
}
|
|
981
982
|
else {
|
|
982
983
|
this.expanded = new Set(this.data.map((_, i) => i));
|
|
984
|
+
this.accordion.openAll();
|
|
983
985
|
}
|
|
984
986
|
}
|
|
985
987
|
}
|
|
986
988
|
MapaCapabilityDetailComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityDetailComponent, deps: [{ token: CapabilityClassificationService }], target: i0.ɵɵFactoryTarget.Component });
|
|
987
|
-
MapaCapabilityDetailComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaCapabilityDetailComponent, selector: "mapa-capability-detail", inputs: { data: "data", showTagInterval: "showTagInterval" }, ngImport: i0, template: "<mat-accordion>\n <mat-expansion-panel *ngFor=\"let capability of data; let i = index\">\n <mat-expansion-panel-header>\n <div class=\"capability__item--header\">\n <div class=\"capability__item--title-dots\">\n <div class=\"capability__item--title display-L\">\n {{ capability.name }}\n <span class=\"capability__item--title-tag\" *ngIf=\"showTagInterval\">\n <mapa-tag size=\"small\">\n <mapa-capability-dot\n [item]=\"capability\"\n [capability]=\"capability\"\n ></mapa-capability-dot>\n\n {{ classification.getByItem(capability).name }}\n </mapa-tag>\n </span>\n </div>\n\n <div class=\"capability__item--dots\">\n <mapa-capability-dot\n *ngFor=\"let item of sortItemsByinterval(capability.items)\"\n type=\"small\"\n [item]=\"item\"\n [capability]=\"capability\"\n [tooltip]=\"true\"\n ></mapa-capability-dot>\n </div>\n </div>\n\n <div [class.capability__item--interval]=\"showTagInterval\">\n <mapa-capability-interval-bar\n [data]=\"capability\"\n [expanded]=\"expanded.has(i)\"\n [showInterval]=\"!showTagInterval\"\n (clicked)=\"showMore(i)\"\n reusable-interval-bar\n ></mapa-capability-interval-bar>\n </div>\n </div>\n </mat-expansion-panel-header>\n <mapa-capability-expand [data]=\"capability\"></mapa-capability-expand>\n </mat-expansion-panel>\n</mat-accordion>\n\n<!--\n<section class=\"capability\">\n <div class=\"capability__core\">\n <div\n *ngFor=\"let capability of data; let i = index\"\n class=\"capability__item\"\n >\n <div class=\"capability__item--header\">\n <div class=\"capability__item--title-dots\">\n <div class=\"capability__item--title display-L\">\n {{ capability.name }}\n <span class=\"capability__item--title-tag\" *ngIf=\"showTagInterval\">\n <mapa-tag size=\"small\">\n <mapa-capability-dot\n [item]=\"capability\"\n [capability]=\"capability\"\n ></mapa-capability-dot>\n\n {{ classification.getByItem(capability).name }}\n </mapa-tag>\n </span>\n </div>\n\n <div class=\"capability__item--dots\">\n <mapa-capability-dot\n *ngFor=\"let item of sortItemsByinterval(capability.items)\"\n type=\"small\"\n [item]=\"item\"\n [capability]=\"capability\"\n [tooltip]=\"true\"\n ></mapa-capability-dot>\n </div>\n </div>\n\n <div [class.capability__item--interval]=\"showTagInterval\">\n <mapa-capability-interval-bar\n [data]=\"capability\"\n [expanded]=\"expanded.has(i)\"\n [showInterval]=\"!showTagInterval\"\n (clicked)=\"showMore(i)\"\n reusable-interval-bar\n ></mapa-capability-interval-bar>\n </div>\n </div>\n <div\n [class.capability__item--show]=\"expanded.has(i)\"\n [class.capability__item--hide]=\"!expanded.has(i)\"\n >\n <mapa-capability-expand [data]=\"capability\"></mapa-capability-expand>\n </div>\n </div>\n </div>\n</section>\n-->\n", styles: [".mat-expansion-panel{border-radius:0!important}.mat-expansion-panel-spacing{margin:unset!important}.mat-accordion .mat-expansion-panel:last-of-type{border-bottom-right-radius:16px!important;border-bottom-left-radius:16px!important}.mat-accordion .mat-expansion-panel:first-of-type{border-top-right-radius:16px!important;border-top-left-radius:16px!important}.mat-expansion-panel-header{height:unset!important;padding:16px 24px!important}.capability{border-radius:16px}.capability h1{font-family:SF-Pro;font-size:32px;font-style:normal;font-weight:400;line-height:40px}.capability__core{border:1px solid #DCDCDE;border-radius:16px;background-color:#fff}.capability__item{padding:24px;position:relative}.capability__item:hover{box-shadow:0 4px 4px #00000021}.capability__item:not(:only-child){border-bottom:1px solid #dcdcde}.capability__item:first-child{border-radius:16px 16px 0 0}.capability__item:last-child{border-bottom:unset;border-radius:0 0 16px 16px}.capability__item--hide{opacity:0;max-height:0;height:0}.capability__item--hide>*{display:none!important;opacity:0!important;max-height:0!important;height:0!important;margin:0!important;padding:0!important;flex:0}.capability__item--show{opacity:1;max-height:100%;height:100%}.capability__item--header{display:flex;align-items:center;justify-content:space-between;height:75px;width:98%}.capability__item--title{display:flex;align-items:center;white-space:nowrap}.capability__item--title-tag{margin-left:34px}.capability__item--title-dots{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;height:72px}.capability__item--title-dots .display-L{margin-bottom:10px}.capability__item--dots{display:flex}.capability__item--dots mapa-capability-dot .tooltip-dot{padding:8px 8px 8px 0}.capability__item--interval mapa-capability-interval-bar .capability-interval{width:267px}\n", ".classification-1{background-color:#073e92;color:#fff}.classification-2{background-color:#0e6ece;color:#fff}.classification-3{background-color:#2d9ced;color:#000}.classification-4{background-color:#68ceee;color:#000}.classification-5{background-color:#96f2ee;color:#000}.classification-6{background-color:#f598a7;color:#000}.classification-7{background-color:#f56580;color:#000}.classification-8{background-color:#f4284e;color:#fff}.classification-9{background-color:#c11c2f;color:#fff}.small-dot{width:12px;height:12px;border-radius:12px;padding:0;margin:0}.dot{width:16px;height:16px;border-radius:16px;padding:0;margin:0}.indicator{display:flex;padding:2px 4px 2px 16px;justify-content:space-between;align-items:center;border-radius:8px;font-family:SF-Pro;font-size:16px;font-style:normal;font-weight:400}.display-S{font-family:SF-Pro;font-size:20px;font-style:normal;font-weight:400}.display-L{font-family:SF-Pro;font-size:32px;font-style:normal;font-weight:400}.display-XG{font-family:SF-Pro;font-size:48px;font-style:normal;font-weight:400}*{transition:opacity .4s ease-out,max-height .4s ease-out}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MapaCapabilityDotComponent, selector: "mapa-capability-dot", inputs: ["type", "item", "tooltip", "capability"] }, { kind: "component", type: MapaCapabilityIntervalBarComponent, selector: "mapa-capability-interval-bar", inputs: ["data", "expanded", "showInterval"], outputs: ["clicked"] }, { kind: "component", type: MapaCapabilityExpandComponent, selector: "mapa-capability-expand", inputs: ["data"] }, { kind: "component", type: i6$1.TagComponent, selector: "mapa-tag", inputs: ["color", "size"] }, { kind: "directive", type: i7$1.MatAccordion, selector: "mat-accordion", inputs: ["multi", "hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i7$1.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i7$1.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
989
|
+
MapaCapabilityDetailComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaCapabilityDetailComponent, selector: "mapa-capability-detail", inputs: { data: "data", showTagInterval: "showTagInterval" }, viewQueries: [{ propertyName: "accordion", first: true, predicate: ["detailAccordion"], descendants: true }], ngImport: i0, template: "<mat-accordion #detailAccordion=\"matAccordion\" multi>\n <mat-expansion-panel *ngFor=\"let capability of data; let i = index\">\n <mat-expansion-panel-header>\n <div class=\"capability__item--header\">\n <div class=\"capability__item--title-dots\">\n <div class=\"capability__item--title display-L\">\n {{ capability.name }}\n <span class=\"capability__item--title-tag\" *ngIf=\"showTagInterval\">\n <mapa-tag size=\"small\">\n <mapa-capability-dot\n [item]=\"capability\"\n [capability]=\"capability\"\n ></mapa-capability-dot>\n\n {{ classification.getByItem(capability).name }}\n </mapa-tag>\n </span>\n </div>\n\n <div class=\"capability__item--dots\">\n <mapa-capability-dot\n *ngFor=\"let item of sortItemsByinterval(capability.items)\"\n type=\"small\"\n [item]=\"item\"\n [capability]=\"capability\"\n [tooltip]=\"true\"\n ></mapa-capability-dot>\n </div>\n </div>\n\n <div [class.capability__item--interval]=\"showTagInterval\">\n <mapa-capability-interval-bar\n [data]=\"capability\"\n [expanded]=\"expanded.has(i)\"\n [showInterval]=\"!showTagInterval\"\n (clicked)=\"showMore(i)\"\n reusable-interval-bar\n ></mapa-capability-interval-bar>\n </div>\n </div>\n </mat-expansion-panel-header>\n <mapa-capability-expand [data]=\"capability\"></mapa-capability-expand>\n </mat-expansion-panel>\n</mat-accordion>\n\n<!--\n<section class=\"capability\">\n <div class=\"capability__core\">\n <div\n *ngFor=\"let capability of data; let i = index\"\n class=\"capability__item\"\n >\n <div class=\"capability__item--header\">\n <div class=\"capability__item--title-dots\">\n <div class=\"capability__item--title display-L\">\n {{ capability.name }}\n <span class=\"capability__item--title-tag\" *ngIf=\"showTagInterval\">\n <mapa-tag size=\"small\">\n <mapa-capability-dot\n [item]=\"capability\"\n [capability]=\"capability\"\n ></mapa-capability-dot>\n\n {{ classification.getByItem(capability).name }}\n </mapa-tag>\n </span>\n </div>\n\n <div class=\"capability__item--dots\">\n <mapa-capability-dot\n *ngFor=\"let item of sortItemsByinterval(capability.items)\"\n type=\"small\"\n [item]=\"item\"\n [capability]=\"capability\"\n [tooltip]=\"true\"\n ></mapa-capability-dot>\n </div>\n </div>\n\n <div [class.capability__item--interval]=\"showTagInterval\">\n <mapa-capability-interval-bar\n [data]=\"capability\"\n [expanded]=\"expanded.has(i)\"\n [showInterval]=\"!showTagInterval\"\n (clicked)=\"showMore(i)\"\n reusable-interval-bar\n ></mapa-capability-interval-bar>\n </div>\n </div>\n <div\n [class.capability__item--show]=\"expanded.has(i)\"\n [class.capability__item--hide]=\"!expanded.has(i)\"\n >\n <mapa-capability-expand [data]=\"capability\"></mapa-capability-expand>\n </div>\n </div>\n </div>\n</section>\n-->\n", styles: [".mat-expansion-panel{border-radius:0!important}.mat-expansion-panel-spacing{margin:unset!important}.mat-accordion .mat-expansion-panel:last-of-type{border-bottom-right-radius:16px!important;border-bottom-left-radius:16px!important}.mat-accordion .mat-expansion-panel:first-of-type{border-top-right-radius:16px!important;border-top-left-radius:16px!important}.mat-expansion-panel-header{height:unset!important;padding:16px 24px!important}.capability{border-radius:16px}.capability h1{font-family:SF-Pro;font-size:32px;font-style:normal;font-weight:400;line-height:40px}.capability__core{border:1px solid #DCDCDE;border-radius:16px;background-color:#fff}.capability__item{padding:24px;position:relative}.capability__item:hover{box-shadow:0 4px 4px #00000021}.capability__item:not(:only-child){border-bottom:1px solid #dcdcde}.capability__item:first-child{border-radius:16px 16px 0 0}.capability__item:last-child{border-bottom:unset;border-radius:0 0 16px 16px}.capability__item--hide{opacity:0;max-height:0;height:0}.capability__item--hide>*{display:none!important;opacity:0!important;max-height:0!important;height:0!important;margin:0!important;padding:0!important;flex:0}.capability__item--show{opacity:1;max-height:100%;height:100%}.capability__item--header{display:flex;align-items:center;justify-content:space-between;height:75px;width:98%}.capability__item--title{display:flex;align-items:center;white-space:nowrap}.capability__item--title-tag{margin-left:34px}.capability__item--title-dots{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;height:72px}.capability__item--title-dots .display-L{margin-bottom:10px}.capability__item--dots{display:flex}.capability__item--dots mapa-capability-dot .tooltip-dot{padding:8px 8px 8px 0}.capability__item--interval mapa-capability-interval-bar .capability-interval{width:267px}\n", ".classification-1{background-color:#073e92;color:#fff}.classification-2{background-color:#0e6ece;color:#fff}.classification-3{background-color:#2d9ced;color:#000}.classification-4{background-color:#68ceee;color:#000}.classification-5{background-color:#96f2ee;color:#000}.classification-6{background-color:#f598a7;color:#000}.classification-7{background-color:#f56580;color:#000}.classification-8{background-color:#f4284e;color:#fff}.classification-9{background-color:#c11c2f;color:#fff}.small-dot{width:12px;height:12px;border-radius:12px;padding:0;margin:0}.dot{width:16px;height:16px;border-radius:16px;padding:0;margin:0}.indicator{display:flex;padding:2px 4px 2px 16px;justify-content:space-between;align-items:center;border-radius:8px;font-family:SF-Pro;font-size:16px;font-style:normal;font-weight:400}.display-S{font-family:SF-Pro;font-size:20px;font-style:normal;font-weight:400}.display-L{font-family:SF-Pro;font-size:32px;font-style:normal;font-weight:400}.display-XG{font-family:SF-Pro;font-size:48px;font-style:normal;font-weight:400}*{transition:opacity .4s ease-out,max-height .4s ease-out}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MapaCapabilityDotComponent, selector: "mapa-capability-dot", inputs: ["type", "item", "tooltip", "capability"] }, { kind: "component", type: MapaCapabilityIntervalBarComponent, selector: "mapa-capability-interval-bar", inputs: ["data", "expanded", "showInterval"], outputs: ["clicked"] }, { kind: "component", type: MapaCapabilityExpandComponent, selector: "mapa-capability-expand", inputs: ["data"] }, { kind: "component", type: i6$1.TagComponent, selector: "mapa-tag", inputs: ["color", "size"] }, { kind: "directive", type: i7$1.MatAccordion, selector: "mat-accordion", inputs: ["multi", "hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i7$1.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i7$1.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
988
990
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityDetailComponent, decorators: [{
|
|
989
991
|
type: Component,
|
|
990
|
-
args: [{ selector: "mapa-capability-detail", encapsulation: ViewEncapsulation.None, template: "<mat-accordion>\n <mat-expansion-panel *ngFor=\"let capability of data; let i = index\">\n <mat-expansion-panel-header>\n <div class=\"capability__item--header\">\n <div class=\"capability__item--title-dots\">\n <div class=\"capability__item--title display-L\">\n {{ capability.name }}\n <span class=\"capability__item--title-tag\" *ngIf=\"showTagInterval\">\n <mapa-tag size=\"small\">\n <mapa-capability-dot\n [item]=\"capability\"\n [capability]=\"capability\"\n ></mapa-capability-dot>\n\n {{ classification.getByItem(capability).name }}\n </mapa-tag>\n </span>\n </div>\n\n <div class=\"capability__item--dots\">\n <mapa-capability-dot\n *ngFor=\"let item of sortItemsByinterval(capability.items)\"\n type=\"small\"\n [item]=\"item\"\n [capability]=\"capability\"\n [tooltip]=\"true\"\n ></mapa-capability-dot>\n </div>\n </div>\n\n <div [class.capability__item--interval]=\"showTagInterval\">\n <mapa-capability-interval-bar\n [data]=\"capability\"\n [expanded]=\"expanded.has(i)\"\n [showInterval]=\"!showTagInterval\"\n (clicked)=\"showMore(i)\"\n reusable-interval-bar\n ></mapa-capability-interval-bar>\n </div>\n </div>\n </mat-expansion-panel-header>\n <mapa-capability-expand [data]=\"capability\"></mapa-capability-expand>\n </mat-expansion-panel>\n</mat-accordion>\n\n<!--\n<section class=\"capability\">\n <div class=\"capability__core\">\n <div\n *ngFor=\"let capability of data; let i = index\"\n class=\"capability__item\"\n >\n <div class=\"capability__item--header\">\n <div class=\"capability__item--title-dots\">\n <div class=\"capability__item--title display-L\">\n {{ capability.name }}\n <span class=\"capability__item--title-tag\" *ngIf=\"showTagInterval\">\n <mapa-tag size=\"small\">\n <mapa-capability-dot\n [item]=\"capability\"\n [capability]=\"capability\"\n ></mapa-capability-dot>\n\n {{ classification.getByItem(capability).name }}\n </mapa-tag>\n </span>\n </div>\n\n <div class=\"capability__item--dots\">\n <mapa-capability-dot\n *ngFor=\"let item of sortItemsByinterval(capability.items)\"\n type=\"small\"\n [item]=\"item\"\n [capability]=\"capability\"\n [tooltip]=\"true\"\n ></mapa-capability-dot>\n </div>\n </div>\n\n <div [class.capability__item--interval]=\"showTagInterval\">\n <mapa-capability-interval-bar\n [data]=\"capability\"\n [expanded]=\"expanded.has(i)\"\n [showInterval]=\"!showTagInterval\"\n (clicked)=\"showMore(i)\"\n reusable-interval-bar\n ></mapa-capability-interval-bar>\n </div>\n </div>\n <div\n [class.capability__item--show]=\"expanded.has(i)\"\n [class.capability__item--hide]=\"!expanded.has(i)\"\n >\n <mapa-capability-expand [data]=\"capability\"></mapa-capability-expand>\n </div>\n </div>\n </div>\n</section>\n-->\n", styles: [".mat-expansion-panel{border-radius:0!important}.mat-expansion-panel-spacing{margin:unset!important}.mat-accordion .mat-expansion-panel:last-of-type{border-bottom-right-radius:16px!important;border-bottom-left-radius:16px!important}.mat-accordion .mat-expansion-panel:first-of-type{border-top-right-radius:16px!important;border-top-left-radius:16px!important}.mat-expansion-panel-header{height:unset!important;padding:16px 24px!important}.capability{border-radius:16px}.capability h1{font-family:SF-Pro;font-size:32px;font-style:normal;font-weight:400;line-height:40px}.capability__core{border:1px solid #DCDCDE;border-radius:16px;background-color:#fff}.capability__item{padding:24px;position:relative}.capability__item:hover{box-shadow:0 4px 4px #00000021}.capability__item:not(:only-child){border-bottom:1px solid #dcdcde}.capability__item:first-child{border-radius:16px 16px 0 0}.capability__item:last-child{border-bottom:unset;border-radius:0 0 16px 16px}.capability__item--hide{opacity:0;max-height:0;height:0}.capability__item--hide>*{display:none!important;opacity:0!important;max-height:0!important;height:0!important;margin:0!important;padding:0!important;flex:0}.capability__item--show{opacity:1;max-height:100%;height:100%}.capability__item--header{display:flex;align-items:center;justify-content:space-between;height:75px;width:98%}.capability__item--title{display:flex;align-items:center;white-space:nowrap}.capability__item--title-tag{margin-left:34px}.capability__item--title-dots{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;height:72px}.capability__item--title-dots .display-L{margin-bottom:10px}.capability__item--dots{display:flex}.capability__item--dots mapa-capability-dot .tooltip-dot{padding:8px 8px 8px 0}.capability__item--interval mapa-capability-interval-bar .capability-interval{width:267px}\n", ".classification-1{background-color:#073e92;color:#fff}.classification-2{background-color:#0e6ece;color:#fff}.classification-3{background-color:#2d9ced;color:#000}.classification-4{background-color:#68ceee;color:#000}.classification-5{background-color:#96f2ee;color:#000}.classification-6{background-color:#f598a7;color:#000}.classification-7{background-color:#f56580;color:#000}.classification-8{background-color:#f4284e;color:#fff}.classification-9{background-color:#c11c2f;color:#fff}.small-dot{width:12px;height:12px;border-radius:12px;padding:0;margin:0}.dot{width:16px;height:16px;border-radius:16px;padding:0;margin:0}.indicator{display:flex;padding:2px 4px 2px 16px;justify-content:space-between;align-items:center;border-radius:8px;font-family:SF-Pro;font-size:16px;font-style:normal;font-weight:400}.display-S{font-family:SF-Pro;font-size:20px;font-style:normal;font-weight:400}.display-L{font-family:SF-Pro;font-size:32px;font-style:normal;font-weight:400}.display-XG{font-family:SF-Pro;font-size:48px;font-style:normal;font-weight:400}*{transition:opacity .4s ease-out,max-height .4s ease-out}\n"] }]
|
|
992
|
+
args: [{ selector: "mapa-capability-detail", encapsulation: ViewEncapsulation.None, template: "<mat-accordion #detailAccordion=\"matAccordion\" multi>\n <mat-expansion-panel *ngFor=\"let capability of data; let i = index\">\n <mat-expansion-panel-header>\n <div class=\"capability__item--header\">\n <div class=\"capability__item--title-dots\">\n <div class=\"capability__item--title display-L\">\n {{ capability.name }}\n <span class=\"capability__item--title-tag\" *ngIf=\"showTagInterval\">\n <mapa-tag size=\"small\">\n <mapa-capability-dot\n [item]=\"capability\"\n [capability]=\"capability\"\n ></mapa-capability-dot>\n\n {{ classification.getByItem(capability).name }}\n </mapa-tag>\n </span>\n </div>\n\n <div class=\"capability__item--dots\">\n <mapa-capability-dot\n *ngFor=\"let item of sortItemsByinterval(capability.items)\"\n type=\"small\"\n [item]=\"item\"\n [capability]=\"capability\"\n [tooltip]=\"true\"\n ></mapa-capability-dot>\n </div>\n </div>\n\n <div [class.capability__item--interval]=\"showTagInterval\">\n <mapa-capability-interval-bar\n [data]=\"capability\"\n [expanded]=\"expanded.has(i)\"\n [showInterval]=\"!showTagInterval\"\n (clicked)=\"showMore(i)\"\n reusable-interval-bar\n ></mapa-capability-interval-bar>\n </div>\n </div>\n </mat-expansion-panel-header>\n <mapa-capability-expand [data]=\"capability\"></mapa-capability-expand>\n </mat-expansion-panel>\n</mat-accordion>\n\n<!--\n<section class=\"capability\">\n <div class=\"capability__core\">\n <div\n *ngFor=\"let capability of data; let i = index\"\n class=\"capability__item\"\n >\n <div class=\"capability__item--header\">\n <div class=\"capability__item--title-dots\">\n <div class=\"capability__item--title display-L\">\n {{ capability.name }}\n <span class=\"capability__item--title-tag\" *ngIf=\"showTagInterval\">\n <mapa-tag size=\"small\">\n <mapa-capability-dot\n [item]=\"capability\"\n [capability]=\"capability\"\n ></mapa-capability-dot>\n\n {{ classification.getByItem(capability).name }}\n </mapa-tag>\n </span>\n </div>\n\n <div class=\"capability__item--dots\">\n <mapa-capability-dot\n *ngFor=\"let item of sortItemsByinterval(capability.items)\"\n type=\"small\"\n [item]=\"item\"\n [capability]=\"capability\"\n [tooltip]=\"true\"\n ></mapa-capability-dot>\n </div>\n </div>\n\n <div [class.capability__item--interval]=\"showTagInterval\">\n <mapa-capability-interval-bar\n [data]=\"capability\"\n [expanded]=\"expanded.has(i)\"\n [showInterval]=\"!showTagInterval\"\n (clicked)=\"showMore(i)\"\n reusable-interval-bar\n ></mapa-capability-interval-bar>\n </div>\n </div>\n <div\n [class.capability__item--show]=\"expanded.has(i)\"\n [class.capability__item--hide]=\"!expanded.has(i)\"\n >\n <mapa-capability-expand [data]=\"capability\"></mapa-capability-expand>\n </div>\n </div>\n </div>\n</section>\n-->\n", styles: [".mat-expansion-panel{border-radius:0!important}.mat-expansion-panel-spacing{margin:unset!important}.mat-accordion .mat-expansion-panel:last-of-type{border-bottom-right-radius:16px!important;border-bottom-left-radius:16px!important}.mat-accordion .mat-expansion-panel:first-of-type{border-top-right-radius:16px!important;border-top-left-radius:16px!important}.mat-expansion-panel-header{height:unset!important;padding:16px 24px!important}.capability{border-radius:16px}.capability h1{font-family:SF-Pro;font-size:32px;font-style:normal;font-weight:400;line-height:40px}.capability__core{border:1px solid #DCDCDE;border-radius:16px;background-color:#fff}.capability__item{padding:24px;position:relative}.capability__item:hover{box-shadow:0 4px 4px #00000021}.capability__item:not(:only-child){border-bottom:1px solid #dcdcde}.capability__item:first-child{border-radius:16px 16px 0 0}.capability__item:last-child{border-bottom:unset;border-radius:0 0 16px 16px}.capability__item--hide{opacity:0;max-height:0;height:0}.capability__item--hide>*{display:none!important;opacity:0!important;max-height:0!important;height:0!important;margin:0!important;padding:0!important;flex:0}.capability__item--show{opacity:1;max-height:100%;height:100%}.capability__item--header{display:flex;align-items:center;justify-content:space-between;height:75px;width:98%}.capability__item--title{display:flex;align-items:center;white-space:nowrap}.capability__item--title-tag{margin-left:34px}.capability__item--title-dots{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;height:72px}.capability__item--title-dots .display-L{margin-bottom:10px}.capability__item--dots{display:flex}.capability__item--dots mapa-capability-dot .tooltip-dot{padding:8px 8px 8px 0}.capability__item--interval mapa-capability-interval-bar .capability-interval{width:267px}\n", ".classification-1{background-color:#073e92;color:#fff}.classification-2{background-color:#0e6ece;color:#fff}.classification-3{background-color:#2d9ced;color:#000}.classification-4{background-color:#68ceee;color:#000}.classification-5{background-color:#96f2ee;color:#000}.classification-6{background-color:#f598a7;color:#000}.classification-7{background-color:#f56580;color:#000}.classification-8{background-color:#f4284e;color:#fff}.classification-9{background-color:#c11c2f;color:#fff}.small-dot{width:12px;height:12px;border-radius:12px;padding:0;margin:0}.dot{width:16px;height:16px;border-radius:16px;padding:0;margin:0}.indicator{display:flex;padding:2px 4px 2px 16px;justify-content:space-between;align-items:center;border-radius:8px;font-family:SF-Pro;font-size:16px;font-style:normal;font-weight:400}.display-S{font-family:SF-Pro;font-size:20px;font-style:normal;font-weight:400}.display-L{font-family:SF-Pro;font-size:32px;font-style:normal;font-weight:400}.display-XG{font-family:SF-Pro;font-size:48px;font-style:normal;font-weight:400}*{transition:opacity .4s ease-out,max-height .4s ease-out}\n"] }]
|
|
991
993
|
}], ctorParameters: function () { return [{ type: CapabilityClassificationService }]; }, propDecorators: { data: [{
|
|
992
994
|
type: Input
|
|
993
995
|
}], showTagInterval: [{
|
|
994
996
|
type: Input
|
|
997
|
+
}], accordion: [{
|
|
998
|
+
type: ViewChild,
|
|
999
|
+
args: ["detailAccordion"]
|
|
995
1000
|
}] } });
|
|
996
1001
|
|
|
997
1002
|
class ReusableCapabilityIntervalBarService {
|