mapa-library-ui 0.22.0 → 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/esm2020/src/lib/components/capability/lib/components/capability/src/capability-interval-bar/capability-interval-bar.component.mjs +1 -29
- package/fesm2015/mapa-library-ui-src-lib-components-capability.mjs +7 -29
- package/fesm2015/mapa-library-ui-src-lib-components-capability.mjs.map +1 -1
- package/fesm2020/mapa-library-ui-src-lib-components-capability.mjs +7 -29
- 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/src/lib/components/capability/lib/components/capability/src/capability-interval-bar/capability-interval-bar.component.d.ts +2 -6
- package/mapa-library-ui-0.22.0.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:
|
|
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:
|
|
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=
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { Component, EventEmitter, Input, Output, ViewEncapsulation } from "@angular/core";
|
|
2
|
-
import { Md5 } from "ts-md5";
|
|
3
2
|
import * as i0 from "@angular/core";
|
|
4
3
|
import * as i1 from "../capability-interval/capability-interval.component";
|
|
5
4
|
export class MapaCapabilityIntervalBarComponent {
|
|
@@ -11,33 +10,6 @@ export class MapaCapabilityIntervalBarComponent {
|
|
|
11
10
|
this.isClicked = !this.isClicked;
|
|
12
11
|
});
|
|
13
12
|
}
|
|
14
|
-
ngOnInit() {
|
|
15
|
-
if (this.data) {
|
|
16
|
-
this.id = `capability-interval__${Md5.hashStr(this.data.name + "_" + Math.random().toString())}`;
|
|
17
|
-
setTimeout(() => {
|
|
18
|
-
const object = document.getElementById(this.id);
|
|
19
|
-
object.addEventListener("mouseenter", (e) => {
|
|
20
|
-
this.onHover();
|
|
21
|
-
}, {
|
|
22
|
-
passive: true,
|
|
23
|
-
});
|
|
24
|
-
object.addEventListener("mouseleave", (e) => {
|
|
25
|
-
this.onMouseOut();
|
|
26
|
-
}, {
|
|
27
|
-
passive: true,
|
|
28
|
-
});
|
|
29
|
-
}, 100);
|
|
30
|
-
}
|
|
31
|
-
}
|
|
32
|
-
onHover() {
|
|
33
|
-
this.isHovering = true;
|
|
34
|
-
}
|
|
35
|
-
onMouseOut() {
|
|
36
|
-
this.isHovering = false;
|
|
37
|
-
}
|
|
38
|
-
showMore() {
|
|
39
|
-
this.clicked.emit();
|
|
40
|
-
}
|
|
41
13
|
}
|
|
42
14
|
MapaCapabilityIntervalBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityIntervalBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
43
15
|
MapaCapabilityIntervalBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaCapabilityIntervalBarComponent, selector: "mapa-capability-interval-bar", inputs: { data: "data", expanded: "expanded", showInterval: "showInterval" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<section reusable-outlet class=\"capability-interval\">\n <section class=\"capability-interval__bar\">\n <mapa-capability-interval\n [data]=\"data\"\n [showInterval]=\"showInterval\"\n ></mapa-capability-interval>\n </section>\n</section>\n", styles: [".capability-interval{display:block;position:relative;height:72px;width:327px}.capability-interval__bar{border:1px solid #DCDCDE;border-radius:16px;display:flex;align-items:center;justify-content:center;padding:0 16px;max-height:72px;height:100%}.capability-interval__show-more{display:flex;align-items:center;justify-content:flex-end;max-height:72px;height:100%;width:100%}.capability-interval__show-more mapa-button,.capability-interval__show-more button{width:100%;justify-content:flex-end!important}.capability-interval--hide{opacity:0;max-height:0}.capability-interval--hide>*{opacity:0;max-height:0}.capability-interval--show{opacity:1;max-height:72px}\n"], dependencies: [{ kind: "component", type: i1.MapaCapabilityIntervalComponent, selector: "mapa-capability-interval", inputs: ["data", "showInterval"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
@@ -53,4 +25,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
53
25
|
}], clicked: [{
|
|
54
26
|
type: Output
|
|
55
27
|
}] } });
|
|
56
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
28
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2FwYWJpbGl0eS1pbnRlcnZhbC1iYXIuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbWFwYS1saWJyYXJ5LXVpL3NyYy9saWIvY29tcG9uZW50cy9jYXBhYmlsaXR5L3NyYy9jYXBhYmlsaXR5LWludGVydmFsLWJhci9jYXBhYmlsaXR5LWludGVydmFsLWJhci5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9tYXBhLWxpYnJhcnktdWkvc3JjL2xpYi9jb21wb25lbnRzL2NhcGFiaWxpdHkvc3JjL2NhcGFiaWxpdHktaW50ZXJ2YWwtYmFyL2NhcGFiaWxpdHktaW50ZXJ2YWwtYmFyLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBVSxNQUFNLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxlQUFlLENBQUM7OztBQVVsRyxNQUFNLE9BQU8sa0NBQWtDO0lBVzdDO1FBUFUsWUFBTyxHQUF1QixJQUFJLFlBQVksRUFBUSxDQUFDO1FBSTFELGVBQVUsR0FBRyxLQUFLLENBQUM7UUFDbkIsY0FBUyxHQUFHLEtBQUssQ0FBQztRQUd2QixJQUFJLENBQUMsT0FBTyxDQUFDLFNBQVMsQ0FBQyxDQUFDLEdBQUcsRUFBRSxFQUFFO1lBQzdCLElBQUksQ0FBQyxTQUFTLEdBQUcsQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDO1FBQ25DLENBQUMsQ0FBQyxDQUFDO0lBQ0wsQ0FBQzs7Z0lBZlUsa0NBQWtDO29IQUFsQyxrQ0FBa0MsbUxDVi9DLG9RQVFBOzRGREVhLGtDQUFrQztrQkFOOUMsU0FBUzsrQkFDRSw4QkFBOEIsaUJBR3pCLGlCQUFpQixDQUFDLElBQUk7MEVBRzVCLElBQUk7c0JBQVosS0FBSztnQkFDRyxRQUFRO3NCQUFoQixLQUFLO2dCQUNHLFlBQVk7c0JBQXBCLEtBQUs7Z0JBQ0ksT0FBTztzQkFBaEIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT25Jbml0LCBPdXRwdXQsIFZpZXdFbmNhcHN1bGF0aW9uIH0gZnJvbSBcIkBhbmd1bGFyL2NvcmVcIjtcbmltcG9ydCB7IENhcGFiaWxpdHkgfSBmcm9tIFwiLi4vZXNzZW50aWFscy9pbnRlcmZhY2VzL2NhcGFiaWxpdHkuaW50ZXJmYWNlXCI7XG5pbXBvcnQgeyBNZDUgfSBmcm9tIFwidHMtbWQ1XCI7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogXCJtYXBhLWNhcGFiaWxpdHktaW50ZXJ2YWwtYmFyXCIsXG4gIHRlbXBsYXRlVXJsOiBcIi4vY2FwYWJpbGl0eS1pbnRlcnZhbC1iYXIuY29tcG9uZW50Lmh0bWxcIixcbiAgc3R5bGVVcmxzOiBbXCIuL2NhcGFiaWxpdHktaW50ZXJ2YWwtYmFyLmNvbXBvbmVudC5zY3NzXCJdLFxuICBlbmNhcHN1bGF0aW9uOiBWaWV3RW5jYXBzdWxhdGlvbi5Ob25lLFxufSlcbmV4cG9ydCBjbGFzcyBNYXBhQ2FwYWJpbGl0eUludGVydmFsQmFyQ29tcG9uZW50IHtcbiAgQElucHV0KCkgZGF0YSE6IENhcGFiaWxpdHk7XG4gIEBJbnB1dCgpIGV4cGFuZGVkPzogYm9vbGVhbjtcbiAgQElucHV0KCkgc2hvd0ludGVydmFsITogYm9vbGVhbjtcbiAgQE91dHB1dCgpIGNsaWNrZWQ6IEV2ZW50RW1pdHRlcjx2b2lkPiA9IG5ldyBFdmVudEVtaXR0ZXI8dm9pZD4oKTtcblxuICBpZCE6IHN0cmluZztcblxuICBwdWJsaWMgaXNIb3ZlcmluZyA9IGZhbHNlO1xuICBwdWJsaWMgaXNDbGlja2VkID0gZmFsc2U7XG5cbiAgY29uc3RydWN0b3IoKSB7XG4gICAgdGhpcy5jbGlja2VkLnN1YnNjcmliZSgocmVzKSA9PiB7XG4gICAgICB0aGlzLmlzQ2xpY2tlZCA9ICF0aGlzLmlzQ2xpY2tlZDtcbiAgICB9KTtcbiAgfVxufVxuIiwiPHNlY3Rpb24gcmV1c2FibGUtb3V0bGV0IGNsYXNzPVwiY2FwYWJpbGl0eS1pbnRlcnZhbFwiPlxuICA8c2VjdGlvbiBjbGFzcz1cImNhcGFiaWxpdHktaW50ZXJ2YWxfX2JhclwiPlxuICAgIDxtYXBhLWNhcGFiaWxpdHktaW50ZXJ2YWxcbiAgICAgIFtkYXRhXT1cImRhdGFcIlxuICAgICAgW3Nob3dJbnRlcnZhbF09XCJzaG93SW50ZXJ2YWxcIlxuICAgID48L21hcGEtY2FwYWJpbGl0eS1pbnRlcnZhbD5cbiAgPC9zZWN0aW9uPlxuPC9zZWN0aW9uPlxuIl19
|
|
@@ -941,33 +941,6 @@ class MapaCapabilityIntervalBarComponent {
|
|
|
941
941
|
this.isClicked = !this.isClicked;
|
|
942
942
|
});
|
|
943
943
|
}
|
|
944
|
-
ngOnInit() {
|
|
945
|
-
if (this.data) {
|
|
946
|
-
this.id = `capability-interval__${Md5.hashStr(this.data.name + "_" + Math.random().toString())}`;
|
|
947
|
-
setTimeout(() => {
|
|
948
|
-
const object = document.getElementById(this.id);
|
|
949
|
-
object.addEventListener("mouseenter", (e) => {
|
|
950
|
-
this.onHover();
|
|
951
|
-
}, {
|
|
952
|
-
passive: true,
|
|
953
|
-
});
|
|
954
|
-
object.addEventListener("mouseleave", (e) => {
|
|
955
|
-
this.onMouseOut();
|
|
956
|
-
}, {
|
|
957
|
-
passive: true,
|
|
958
|
-
});
|
|
959
|
-
}, 100);
|
|
960
|
-
}
|
|
961
|
-
}
|
|
962
|
-
onHover() {
|
|
963
|
-
this.isHovering = true;
|
|
964
|
-
}
|
|
965
|
-
onMouseOut() {
|
|
966
|
-
this.isHovering = false;
|
|
967
|
-
}
|
|
968
|
-
showMore() {
|
|
969
|
-
this.clicked.emit();
|
|
970
|
-
}
|
|
971
944
|
}
|
|
972
945
|
MapaCapabilityIntervalBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityIntervalBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
973
946
|
MapaCapabilityIntervalBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaCapabilityIntervalBarComponent, selector: "mapa-capability-interval-bar", inputs: { data: "data", expanded: "expanded", showInterval: "showInterval" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<section reusable-outlet class=\"capability-interval\">\n <section class=\"capability-interval__bar\">\n <mapa-capability-interval\n [data]=\"data\"\n [showInterval]=\"showInterval\"\n ></mapa-capability-interval>\n </section>\n</section>\n", styles: [".capability-interval{display:block;position:relative;height:72px;width:327px}.capability-interval__bar{border:1px solid #DCDCDE;border-radius:16px;display:flex;align-items:center;justify-content:center;padding:0 16px;max-height:72px;height:100%}.capability-interval__show-more{display:flex;align-items:center;justify-content:flex-end;max-height:72px;height:100%;width:100%}.capability-interval__show-more mapa-button,.capability-interval__show-more button{width:100%;justify-content:flex-end!important}.capability-interval--hide{opacity:0;max-height:0}.capability-interval--hide>*{opacity:0;max-height:0}.capability-interval--show{opacity:1;max-height:72px}\n"], dependencies: [{ kind: "component", type: MapaCapabilityIntervalComponent, selector: "mapa-capability-interval", inputs: ["data", "showInterval"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
@@ -1004,21 +977,26 @@ class MapaCapabilityDetailComponent {
|
|
|
1004
977
|
toggleAll() {
|
|
1005
978
|
if (this.expanded.size === this.data.length) {
|
|
1006
979
|
this.expanded.clear();
|
|
980
|
+
this.accordion.closeAll();
|
|
1007
981
|
}
|
|
1008
982
|
else {
|
|
1009
983
|
this.expanded = new Set(this.data.map((_, i) => i));
|
|
984
|
+
this.accordion.openAll();
|
|
1010
985
|
}
|
|
1011
986
|
}
|
|
1012
987
|
}
|
|
1013
988
|
MapaCapabilityDetailComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityDetailComponent, deps: [{ token: CapabilityClassificationService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1014
|
-
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:
|
|
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 });
|
|
1015
990
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityDetailComponent, decorators: [{
|
|
1016
991
|
type: Component,
|
|
1017
|
-
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:
|
|
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"] }]
|
|
1018
993
|
}], ctorParameters: function () { return [{ type: CapabilityClassificationService }]; }, propDecorators: { data: [{
|
|
1019
994
|
type: Input
|
|
1020
995
|
}], showTagInterval: [{
|
|
1021
996
|
type: Input
|
|
997
|
+
}], accordion: [{
|
|
998
|
+
type: ViewChild,
|
|
999
|
+
args: ["detailAccordion"]
|
|
1022
1000
|
}] } });
|
|
1023
1001
|
|
|
1024
1002
|
class ReusableCapabilityIntervalBarService {
|