mapa-library-ui 0.22.0 → 0.22.1
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 +2 -2
- 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 +2 -29
- package/fesm2015/mapa-library-ui-src-lib-components-capability.mjs.map +1 -1
- package/fesm2020/mapa-library-ui-src-lib-components-capability.mjs +2 -29
- package/fesm2020/mapa-library-ui-src-lib-components-capability.mjs.map +1 -1
- package/mapa-library-ui-0.22.1.tgz +0 -0
- package/package.json +1 -1
- 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
|
@@ -937,33 +937,6 @@ class MapaCapabilityIntervalBarComponent {
|
|
|
937
937
|
this.isClicked = !this.isClicked;
|
|
938
938
|
});
|
|
939
939
|
}
|
|
940
|
-
ngOnInit() {
|
|
941
|
-
if (this.data) {
|
|
942
|
-
this.id = `capability-interval__${Md5.hashStr(this.data.name + "_" + Math.random().toString())}`;
|
|
943
|
-
setTimeout(() => {
|
|
944
|
-
const object = document.getElementById(this.id);
|
|
945
|
-
object.addEventListener("mouseenter", (e) => {
|
|
946
|
-
this.onHover();
|
|
947
|
-
}, {
|
|
948
|
-
passive: true,
|
|
949
|
-
});
|
|
950
|
-
object.addEventListener("mouseleave", (e) => {
|
|
951
|
-
this.onMouseOut();
|
|
952
|
-
}, {
|
|
953
|
-
passive: true,
|
|
954
|
-
});
|
|
955
|
-
}, 100);
|
|
956
|
-
}
|
|
957
|
-
}
|
|
958
|
-
onHover() {
|
|
959
|
-
this.isHovering = true;
|
|
960
|
-
}
|
|
961
|
-
onMouseOut() {
|
|
962
|
-
this.isHovering = false;
|
|
963
|
-
}
|
|
964
|
-
showMore() {
|
|
965
|
-
this.clicked.emit();
|
|
966
|
-
}
|
|
967
940
|
}
|
|
968
941
|
MapaCapabilityIntervalBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityIntervalBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
969
942
|
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 });
|
|
@@ -1007,10 +980,10 @@ class MapaCapabilityDetailComponent {
|
|
|
1007
980
|
}
|
|
1008
981
|
}
|
|
1009
982
|
MapaCapabilityDetailComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityDetailComponent, deps: [{ token: CapabilityClassificationService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1010
|
-
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:
|
|
983
|
+
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 });
|
|
1011
984
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityDetailComponent, decorators: [{
|
|
1012
985
|
type: Component,
|
|
1013
|
-
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:
|
|
986
|
+
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"] }]
|
|
1014
987
|
}], ctorParameters: function () { return [{ type: CapabilityClassificationService }]; }, propDecorators: { data: [{
|
|
1015
988
|
type: Input
|
|
1016
989
|
}], showTagInterval: [{
|