mapa-library-ui 0.6.0 → 0.8.0
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/chart/lib/components/chart/src/chart.component.mjs +3 -3
- package/fesm2015/mapa-library-ui-src-lib-components-capability.mjs +2 -2
- package/fesm2015/mapa-library-ui-src-lib-components-capability.mjs.map +1 -1
- package/fesm2015/mapa-library-ui-src-lib-components-chart.mjs +2 -2
- package/fesm2015/mapa-library-ui-src-lib-components-chart.mjs.map +1 -1
- package/fesm2020/mapa-library-ui-src-lib-components-capability.mjs +2 -2
- package/fesm2020/mapa-library-ui-src-lib-components-capability.mjs.map +1 -1
- package/fesm2020/mapa-library-ui-src-lib-components-chart.mjs +2 -2
- package/fesm2020/mapa-library-ui-src-lib-components-chart.mjs.map +1 -1
- package/mapa-library-ui-0.8.0.tgz +0 -0
- package/package.json +1 -1
- package/mapa-library-ui-0.6.0.tgz +0 -0
|
@@ -22,10 +22,10 @@ export class MapaCapabilityDetailComponent {
|
|
|
22
22
|
}
|
|
23
23
|
}
|
|
24
24
|
MapaCapabilityDetailComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
25
|
-
MapaCapabilityDetailComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaCapabilityDetailComponent, selector: "mapa-capability-detail", inputs: { data: "data" }, ngImport: i0, template: "<section class=\"capability\">\n <div class=\"capability__core\">\n <div *ngFor=\"let capability of data; let i = index\" class=\"capability__item\">\n <div class=\"capability__item--header\">\n <div class=\"capability__item--title-dots\">\n <div class=\"display-L\">{{ capability.name }}</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\">\n <mapa-capability-interval-bar\n [data]=\"capability\"\n (clicked)=\"showMore(i)\"\n reusable-interval-bar\n ></mapa-capability-interval-bar>\n </div>\n </div>\n <div [class.capability__item--show]=\"expanded.has(i)\" [class.capability__item--hide]=\"!expanded.has(i)\">\n <mapa-capability-expand\n [data]=\"capability\"\n ></mapa-capability-expand>\n </div>\n </div>\n </div>\n</section>", styles: [".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:16px 16px 0;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 mapa-capability-expand{height:0;display:inline-flex}.capability__item--show{opacity:1;max-height:100%;height:100%}.capability__item--header{display:flex;align-items:center;justify-content:space-between;padding-bottom:16px}.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}\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 Display;font-size:20px;font-style:normal;font-weight:400}.display-L{font-family:SF Pro Display;font-size:32px;font-style:normal;font-weight:400}.display-XG{font-family:SF Pro Display;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: "component", type: i2.MapaCapabilityDotComponent, selector: "mapa-capability-dot", inputs: ["type", "item", "tooltip", "capability"] }, { kind: "component", type: i3.MapaCapabilityIntervalBarComponent, selector: "mapa-capability-interval-bar", inputs: ["data"], outputs: ["clicked"] }, { kind: "component", type: i4.MapaCapabilityExpandComponent, selector: "mapa-capability-expand", inputs: ["data"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
25
|
+
MapaCapabilityDetailComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaCapabilityDetailComponent, selector: "mapa-capability-detail", inputs: { data: "data" }, ngImport: i0, template: "<section class=\"capability\">\n <div class=\"capability__core\">\n <div *ngFor=\"let capability of data; let i = index\" class=\"capability__item\">\n <div class=\"capability__item--header\">\n <div class=\"capability__item--title-dots\">\n <div class=\"display-L\">{{ capability.name }}</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\">\n <mapa-capability-interval-bar\n [data]=\"capability\"\n (clicked)=\"showMore(i)\"\n reusable-interval-bar\n ></mapa-capability-interval-bar>\n </div>\n </div>\n <div [class.capability__item--show]=\"expanded.has(i)\" [class.capability__item--hide]=\"!expanded.has(i)\">\n <mapa-capability-expand\n [data]=\"capability\"\n ></mapa-capability-expand>\n </div>\n </div>\n </div>\n</section>", styles: [".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:16px 16px 0;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 mapa-capability-expand{height:0;display:inline-flex}.capability__item--hide mapa-capability-expand>*{opacity:0;max-height:0;height:0;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;padding-bottom:16px}.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}\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 Display;font-size:20px;font-style:normal;font-weight:400}.display-L{font-family:SF Pro Display;font-size:32px;font-style:normal;font-weight:400}.display-XG{font-family:SF Pro Display;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: "component", type: i2.MapaCapabilityDotComponent, selector: "mapa-capability-dot", inputs: ["type", "item", "tooltip", "capability"] }, { kind: "component", type: i3.MapaCapabilityIntervalBarComponent, selector: "mapa-capability-interval-bar", inputs: ["data"], outputs: ["clicked"] }, { kind: "component", type: i4.MapaCapabilityExpandComponent, selector: "mapa-capability-expand", inputs: ["data"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
26
26
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityDetailComponent, decorators: [{
|
|
27
27
|
type: Component,
|
|
28
|
-
args: [{ selector: "mapa-capability-detail", encapsulation: ViewEncapsulation.None, template: "<section class=\"capability\">\n <div class=\"capability__core\">\n <div *ngFor=\"let capability of data; let i = index\" class=\"capability__item\">\n <div class=\"capability__item--header\">\n <div class=\"capability__item--title-dots\">\n <div class=\"display-L\">{{ capability.name }}</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\">\n <mapa-capability-interval-bar\n [data]=\"capability\"\n (clicked)=\"showMore(i)\"\n reusable-interval-bar\n ></mapa-capability-interval-bar>\n </div>\n </div>\n <div [class.capability__item--show]=\"expanded.has(i)\" [class.capability__item--hide]=\"!expanded.has(i)\">\n <mapa-capability-expand\n [data]=\"capability\"\n ></mapa-capability-expand>\n </div>\n </div>\n </div>\n</section>", styles: [".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:16px 16px 0;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 mapa-capability-expand{height:0;display:inline-flex}.capability__item--show{opacity:1;max-height:100%;height:100%}.capability__item--header{display:flex;align-items:center;justify-content:space-between;padding-bottom:16px}.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}\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 Display;font-size:20px;font-style:normal;font-weight:400}.display-L{font-family:SF Pro Display;font-size:32px;font-style:normal;font-weight:400}.display-XG{font-family:SF Pro Display;font-size:48px;font-style:normal;font-weight:400}*{transition:opacity .4s ease-out,max-height .4s ease-out}\n"] }]
|
|
28
|
+
args: [{ selector: "mapa-capability-detail", encapsulation: ViewEncapsulation.None, template: "<section class=\"capability\">\n <div class=\"capability__core\">\n <div *ngFor=\"let capability of data; let i = index\" class=\"capability__item\">\n <div class=\"capability__item--header\">\n <div class=\"capability__item--title-dots\">\n <div class=\"display-L\">{{ capability.name }}</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\">\n <mapa-capability-interval-bar\n [data]=\"capability\"\n (clicked)=\"showMore(i)\"\n reusable-interval-bar\n ></mapa-capability-interval-bar>\n </div>\n </div>\n <div [class.capability__item--show]=\"expanded.has(i)\" [class.capability__item--hide]=\"!expanded.has(i)\">\n <mapa-capability-expand\n [data]=\"capability\"\n ></mapa-capability-expand>\n </div>\n </div>\n </div>\n</section>", styles: [".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:16px 16px 0;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 mapa-capability-expand{height:0;display:inline-flex}.capability__item--hide mapa-capability-expand>*{opacity:0;max-height:0;height:0;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;padding-bottom:16px}.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}\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 Display;font-size:20px;font-style:normal;font-weight:400}.display-L{font-family:SF Pro Display;font-size:32px;font-style:normal;font-weight:400}.display-XG{font-family:SF Pro Display;font-size:48px;font-style:normal;font-weight:400}*{transition:opacity .4s ease-out,max-height .4s ease-out}\n"] }]
|
|
29
29
|
}], propDecorators: { data: [{
|
|
30
30
|
type: Input
|
|
31
31
|
}] } });
|
|
@@ -89,11 +89,11 @@ export class MapaChartComponent {
|
|
|
89
89
|
}
|
|
90
90
|
}
|
|
91
91
|
MapaChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
92
|
-
MapaChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaChartComponent, selector: "mapa-chart", inputs: { options: "options" }, ngImport: i0, template: "<section>\n <div class=\"chart\" *ngIf=\"chartOptions\">\n <div class=\"chart__dropdown\" *ngIf=\"options.dropdown\">\n <mapa-dropdown\n [formControl]=\"options.dropdown.formControl\"\n [element]=\"options.dropdown.element\"\n ></mapa-dropdown>\n </div>\n <apx-chart\n [series]=\"chartOptions.series!\"\n [chart]=\"chartOptions.chart!\"\n [xaxis]=\"chartOptions.xaxis!\"\n [yaxis]=\"chartOptions.yaxis!\"\n [stroke]=\"chartOptions.stroke!\"\n [markers]=\"chartOptions.markers!\"\n [fill]=\"chartOptions.fill!\"\n [title]=\"chartOptions.title!\"\n [legend]=\"chartOptions.legend!\"\n [responsive]=\"chartOptions.responsive!\"\n ></apx-chart>\n </div>\n</section>\n", styles: [".chart{margin:35px auto}.chart__dropdown{position:absolute;z-index:999}.chart .apexcharts-legend.apx-legend-position-right{justify-content:center!important}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.ChartComponent, selector: "apx-chart", inputs: ["chart", "annotations", "colors", "dataLabels", "series", "stroke", "labels", "legend", "markers", "noData", "fill", "tooltip", "plotOptions", "responsive", "xaxis", "yaxis", "forecastDataPoints", "grid", "states", "title", "subtitle", "theme", "autoUpdateSeries"] }, { kind: "component", type: i3.MapaDropdownComponent, selector: "mapa-dropdown", inputs: ["formControl", "formControlSearch", "element", "border"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
92
|
+
MapaChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaChartComponent, selector: "mapa-chart", inputs: { options: "options" }, ngImport: i0, template: "<section>\n <div class=\"chart\" *ngIf=\"chartOptions\">\n <div class=\"chart__dropdown\" *ngIf=\"options.dropdown\">\n <mapa-dropdown\n [formControl]=\"options.dropdown.formControl\"\n [element]=\"options.dropdown.element\"\n ></mapa-dropdown>\n </div>\n <apx-chart\n [series]=\"chartOptions.series!\"\n [chart]=\"chartOptions.chart!\"\n [xaxis]=\"chartOptions.xaxis!\"\n [yaxis]=\"chartOptions.yaxis!\"\n [stroke]=\"chartOptions.stroke!\"\n [markers]=\"chartOptions.markers!\"\n [fill]=\"chartOptions.fill!\"\n [title]=\"chartOptions.title!\"\n [legend]=\"chartOptions.legend!\"\n [responsive]=\"chartOptions.responsive!\"width\n ></apx-chart>\n </div>\n</section>\n", styles: [".chart{margin:35px auto}.chart__dropdown{position:absolute;z-index:999}.chart .apexcharts-legend.apx-legend-position-right{justify-content:center!important}.chart apx-chart .apexcharts-canvas{width:100%!important}.chart apx-chart .apexcharts-canvas svg{width:100%!important}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.ChartComponent, selector: "apx-chart", inputs: ["chart", "annotations", "colors", "dataLabels", "series", "stroke", "labels", "legend", "markers", "noData", "fill", "tooltip", "plotOptions", "responsive", "xaxis", "yaxis", "forecastDataPoints", "grid", "states", "title", "subtitle", "theme", "autoUpdateSeries"] }, { kind: "component", type: i3.MapaDropdownComponent, selector: "mapa-dropdown", inputs: ["formControl", "formControlSearch", "element", "border"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
93
93
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaChartComponent, decorators: [{
|
|
94
94
|
type: Component,
|
|
95
|
-
args: [{ selector: "mapa-chart", encapsulation: ViewEncapsulation.None, template: "<section>\n <div class=\"chart\" *ngIf=\"chartOptions\">\n <div class=\"chart__dropdown\" *ngIf=\"options.dropdown\">\n <mapa-dropdown\n [formControl]=\"options.dropdown.formControl\"\n [element]=\"options.dropdown.element\"\n ></mapa-dropdown>\n </div>\n <apx-chart\n [series]=\"chartOptions.series!\"\n [chart]=\"chartOptions.chart!\"\n [xaxis]=\"chartOptions.xaxis!\"\n [yaxis]=\"chartOptions.yaxis!\"\n [stroke]=\"chartOptions.stroke!\"\n [markers]=\"chartOptions.markers!\"\n [fill]=\"chartOptions.fill!\"\n [title]=\"chartOptions.title!\"\n [legend]=\"chartOptions.legend!\"\n [responsive]=\"chartOptions.responsive!\"\n ></apx-chart>\n </div>\n</section>\n", styles: [".chart{margin:35px auto}.chart__dropdown{position:absolute;z-index:999}.chart .apexcharts-legend.apx-legend-position-right{justify-content:center!important}\n"] }]
|
|
95
|
+
args: [{ selector: "mapa-chart", encapsulation: ViewEncapsulation.None, template: "<section>\n <div class=\"chart\" *ngIf=\"chartOptions\">\n <div class=\"chart__dropdown\" *ngIf=\"options.dropdown\">\n <mapa-dropdown\n [formControl]=\"options.dropdown.formControl\"\n [element]=\"options.dropdown.element\"\n ></mapa-dropdown>\n </div>\n <apx-chart\n [series]=\"chartOptions.series!\"\n [chart]=\"chartOptions.chart!\"\n [xaxis]=\"chartOptions.xaxis!\"\n [yaxis]=\"chartOptions.yaxis!\"\n [stroke]=\"chartOptions.stroke!\"\n [markers]=\"chartOptions.markers!\"\n [fill]=\"chartOptions.fill!\"\n [title]=\"chartOptions.title!\"\n [legend]=\"chartOptions.legend!\"\n [responsive]=\"chartOptions.responsive!\"width\n ></apx-chart>\n </div>\n</section>\n", styles: [".chart{margin:35px auto}.chart__dropdown{position:absolute;z-index:999}.chart .apexcharts-legend.apx-legend-position-right{justify-content:center!important}.chart apx-chart .apexcharts-canvas{width:100%!important}.chart apx-chart .apexcharts-canvas svg{width:100%!important}\n"] }]
|
|
96
96
|
}], ctorParameters: function () { return []; }, propDecorators: { options: [{
|
|
97
97
|
type: Input
|
|
98
98
|
}] } });
|
|
99
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
99
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2hhcnQuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbWFwYS1saWJyYXJ5LXVpL3NyYy9saWIvY29tcG9uZW50cy9jaGFydC9zcmMvY2hhcnQuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbWFwYS1saWJyYXJ5LXVpL3NyYy9saWIvY29tcG9uZW50cy9jaGFydC9zcmMvY2hhcnQuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNMLFNBQVMsRUFFVCxLQUFLLEVBR0wsaUJBQWlCLEdBQ2xCLE1BQU0sZUFBZSxDQUFDOzs7OztBQVl2QixNQUFNLE9BQU8sa0JBQWtCO0lBTTdCO1FBSFEsV0FBTSxHQUFHLENBQUMsU0FBUyxFQUFFLFNBQVMsRUFBRSxTQUFTLEVBQUUsU0FBUyxDQUFDLENBQUM7SUFHL0MsQ0FBQztJQUVoQixRQUFRO1FBQ04sSUFBSSxDQUFDLGFBQWEsRUFBRSxDQUFDO0lBQ3ZCLENBQUM7SUFFTyxhQUFhO1FBQ25CLElBQUksSUFBSSxDQUFDLE9BQU8sRUFBRTtZQUNoQixJQUFJLENBQUMsWUFBWSxHQUFHO2dCQUNsQixNQUFNLEVBQUUsSUFBSSxDQUFDLE9BQU8sQ0FBQyxNQUFNO2dCQUMzQixLQUFLLEVBQUU7b0JBQ0wsTUFBTSxFQUFFLEdBQUc7b0JBQ1gsS0FBSyxFQUFFLEtBQUs7b0JBQ1osSUFBSSxFQUFFLElBQUksQ0FBQyxPQUFPLENBQUMsS0FBSyxFQUFFLElBQUksSUFBSSxPQUFPO29CQUN6QyxNQUFNLEVBQUU7d0JBQ04sV0FBVyxFQUFFLENBQUMsS0FBSyxFQUFFLEVBQUU7NEJBQ3JCLEtBQUssQ0FBQyxtQkFBbUIsRUFBRSxDQUFDO3dCQUM5QixDQUFDO3FCQUNGO2lCQUNGO2dCQUNELE1BQU0sRUFBRTtvQkFDTixLQUFLLEVBQUUsQ0FBQztvQkFDUixNQUFNLEVBQUUsSUFBSSxDQUFDLE1BQU07aUJBQ3BCO2dCQUNELElBQUksRUFBRTtvQkFDSixPQUFPLEVBQUUsR0FBRztvQkFDWixNQUFNLEVBQUUsSUFBSSxDQUFDLE1BQU07aUJBQ3BCO2dCQUNELE9BQU8sRUFBRTtvQkFDUCxJQUFJLEVBQUUsQ0FBQztvQkFDUCxLQUFLLEVBQUUsUUFBUTtvQkFDZixNQUFNLEVBQUUsSUFBSSxDQUFDLE1BQU07b0JBQ25CLFlBQVksRUFBRSxJQUFJLENBQUMsTUFBTTtpQkFDMUI7Z0JBQ0QsS0FBSyxFQUFFO29CQUNMLFVBQVUsRUFBRSxJQUFJLENBQUMsT0FBTyxDQUFDLEtBQUssRUFBRSxVQUFVO29CQUMxQyxNQUFNLEVBQUU7d0JBQ04sS0FBSyxFQUFFOzRCQUNMLE1BQU0sRUFBRSxJQUFJLEtBQUssQ0FBQyxJQUFJLENBQUMsT0FBTyxDQUFDLEtBQUssRUFBRSxVQUFVLENBQUMsTUFBTSxDQUFDLENBQUMsSUFBSSxDQUMzRCxTQUFTLENBQ1Y7NEJBQ0QsUUFBUSxFQUFFLE1BQU07NEJBQ2hCLFVBQVUsRUFBRSxRQUFRO3lCQUNyQjtxQkFDRjtpQkFDRjtnQkFDRCxLQUFLLEVBQUU7b0JBQ0wsTUFBTSxFQUFFO3dCQUNOLEtBQUssRUFBRTs0QkFDTCxNQUFNLEVBQUUsU0FBUzs0QkFDakIsUUFBUSxFQUFFLE1BQU07NEJBQ2hCLFVBQVUsRUFBRSxRQUFRO3lCQUNyQjtxQkFDRjtpQkFDRjtnQkFDRCxNQUFNLEVBQUU7b0JBQ04sUUFBUSxFQUFFLE9BQU87b0JBQ2pCLGVBQWUsRUFBRSxRQUFRO29CQUN6QixNQUFNLEVBQUUsR0FBRztvQkFDWCxRQUFRLEVBQUUsTUFBTTtvQkFDaEIsVUFBVSxFQUFFLFFBQVE7b0JBQ3BCLGVBQWUsRUFBRSxFQUFFLElBQUksRUFBRSxFQUFFLEVBQUU7b0JBQzdCLE9BQU8sRUFBRTt3QkFDUCxVQUFVLEVBQUUsSUFBSSxDQUFDLE1BQU07cUJBQ3hCO2lCQUNGO2dCQUNELFVBQVUsRUFBRTtvQkFDVjt3QkFDRSxVQUFVLEVBQUUsSUFBSTt3QkFDaEIsT0FBTyxFQUFFOzRCQUNQLEtBQUssRUFBRTtnQ0FDTCxLQUFLLEVBQUUsTUFBTTtnQ0FDYixNQUFNLEVBQUUsR0FBRzs2QkFDWjs0QkFDRCxNQUFNLEVBQUU7Z0NBQ04sUUFBUSxFQUFFLFFBQVE7Z0NBQ2xCLGVBQWUsRUFBRSxRQUFRO2dDQUN6QixNQUFNLEVBQUUsR0FBRzs2QkFDWjt5QkFDRjtxQkFDRjtpQkFDRjthQUNGLENBQUM7U0FDSDtJQUNILENBQUM7O2dIQTFGVSxrQkFBa0I7b0dBQWxCLGtCQUFrQixrRkNuQi9CLHN2QkFzQkE7NEZESGEsa0JBQWtCO2tCQU45QixTQUFTOytCQUNFLFlBQVksaUJBR1AsaUJBQWlCLENBQUMsSUFBSTswRUFHNUIsT0FBTztzQkFBZixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ29tcG9uZW50LFxuICBFdmVudEVtaXR0ZXIsXG4gIElucHV0LFxuICBPbkluaXQsXG4gIE91dHB1dCxcbiAgVmlld0VuY2Fwc3VsYXRpb24sXG59IGZyb20gXCJAYW5ndWxhci9jb3JlXCI7XG5pbXBvcnQgeyBGb3JtQ29udHJvbCB9IGZyb20gXCJAYW5ndWxhci9mb3Jtc1wiO1xuXG5pbXBvcnQgeyBDaGFydE9wdGlvbnMgfSBmcm9tIFwiLi4vLi4vLi4vY29yZS9pbnRlcmZhY2VzL2NoYXJ0LW9wdGlvbnMuaW50ZXJmYWNlXCI7XG5pbXBvcnQgeyBFbGVtZW50T3B0aW9uIH0gZnJvbSBcIi4uLy4uLy4uL2NvcmUvaW50ZXJmYWNlcy9lbGVtZW50LW9wdGlvbi5pbnRlcmZhY2VcIjtcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiBcIm1hcGEtY2hhcnRcIixcbiAgdGVtcGxhdGVVcmw6IFwiLi9jaGFydC5jb21wb25lbnQuaHRtbFwiLFxuICBzdHlsZVVybHM6IFtcIi4vY2hhcnQuY29tcG9uZW50LnNjc3NcIl0sXG4gIGVuY2Fwc3VsYXRpb246IFZpZXdFbmNhcHN1bGF0aW9uLk5vbmUsXG59KVxuZXhwb3J0IGNsYXNzIE1hcGFDaGFydENvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XG4gIEBJbnB1dCgpIG9wdGlvbnMhOiBQYXJ0aWFsPENoYXJ0T3B0aW9ucz47XG5cbiAgcHJpdmF0ZSBjb2xvcnMgPSBbXCIjRUE1NjFEXCIsIFwiIzYxOTVGQlwiLCBcIiMyRUQ0N0FcIiwgXCIjRUVEQjJBXCJdO1xuICBwdWJsaWMgY2hhcnRPcHRpb25zITogUGFydGlhbDxDaGFydE9wdGlvbnM+O1xuXG4gIGNvbnN0cnVjdG9yKCkge31cblxuICBuZ09uSW5pdCgpOiB2b2lkIHtcbiAgICB0aGlzLmdlbmVyYXRlQ2hhcnQoKTtcbiAgfVxuXG4gIHByaXZhdGUgZ2VuZXJhdGVDaGFydCgpOiB2b2lkIHtcbiAgICBpZiAodGhpcy5vcHRpb25zKSB7XG4gICAgICB0aGlzLmNoYXJ0T3B0aW9ucyA9IHtcbiAgICAgICAgc2VyaWVzOiB0aGlzLm9wdGlvbnMuc2VyaWVzLFxuICAgICAgICBjaGFydDoge1xuICAgICAgICAgIGhlaWdodDogNTAwLFxuICAgICAgICAgIHdpZHRoOiBcIjcwJVwiLFxuICAgICAgICAgIHR5cGU6IHRoaXMub3B0aW9ucy5jaGFydD8udHlwZSB8fCBcInJhZGFyXCIsXG4gICAgICAgICAgZXZlbnRzOiB7XG4gICAgICAgICAgICBiZWZvcmVNb3VudDogKGNoYXJ0KSA9PiB7XG4gICAgICAgICAgICAgIGNoYXJ0LndpbmRvd1Jlc2l6ZUhhbmRsZXIoKTtcbiAgICAgICAgICAgIH1cbiAgICAgICAgICB9XG4gICAgICAgIH0sXG4gICAgICAgIHN0cm9rZToge1xuICAgICAgICAgIHdpZHRoOiAxLFxuICAgICAgICAgIGNvbG9yczogdGhpcy5jb2xvcnMsXG4gICAgICAgIH0sXG4gICAgICAgIGZpbGw6IHtcbiAgICAgICAgICBvcGFjaXR5OiAwLjMsXG4gICAgICAgICAgY29sb3JzOiB0aGlzLmNvbG9ycyxcbiAgICAgICAgfSxcbiAgICAgICAgbWFya2Vyczoge1xuICAgICAgICAgIHNpemU6IDIsXG4gICAgICAgICAgc2hhcGU6IFwiY2lyY2xlXCIsXG4gICAgICAgICAgY29sb3JzOiB0aGlzLmNvbG9ycyxcbiAgICAgICAgICBzdHJva2VDb2xvcnM6IHRoaXMuY29sb3JzLFxuICAgICAgICB9LFxuICAgICAgICB4YXhpczoge1xuICAgICAgICAgIGNhdGVnb3JpZXM6IHRoaXMub3B0aW9ucy54YXhpcz8uY2F0ZWdvcmllcyxcbiAgICAgICAgICBsYWJlbHM6IHtcbiAgICAgICAgICAgIHN0eWxlOiB7XG4gICAgICAgICAgICAgIGNvbG9yczogbmV3IEFycmF5KHRoaXMub3B0aW9ucy54YXhpcz8uY2F0ZWdvcmllcy5sZW5ndGgpLmZpbGwoXG4gICAgICAgICAgICAgICAgXCIjNjY2NjY2XCJcbiAgICAgICAgICAgICAgKSxcbiAgICAgICAgICAgICAgZm9udFNpemU6IFwiMTJweFwiLFxuICAgICAgICAgICAgICBmb250RmFtaWx5OiBcIlNGLVByb1wiLFxuICAgICAgICAgICAgfSxcbiAgICAgICAgICB9LFxuICAgICAgICB9LFxuICAgICAgICB5YXhpczoge1xuICAgICAgICAgIGxhYmVsczoge1xuICAgICAgICAgICAgc3R5bGU6IHtcbiAgICAgICAgICAgICAgY29sb3JzOiBcIiM5QjlCOUJcIixcbiAgICAgICAgICAgICAgZm9udFNpemU6IFwiMTJweFwiLFxuICAgICAgICAgICAgICBmb250RmFtaWx5OiBcIlNGLVByb1wiLFxuICAgICAgICAgICAgfSxcbiAgICAgICAgICB9LFxuICAgICAgICB9LFxuICAgICAgICBsZWdlbmQ6IHtcbiAgICAgICAgICBwb3NpdGlvbjogXCJyaWdodFwiLFxuICAgICAgICAgIGhvcml6b250YWxBbGlnbjogXCJjZW50ZXJcIixcbiAgICAgICAgICBoZWlnaHQ6IDUwMCxcbiAgICAgICAgICBmb250U2l6ZTogXCIxMnB4XCIsXG4gICAgICAgICAgZm9udEZhbWlseTogXCJTRi1Qcm9cIixcbiAgICAgICAgICBjb250YWluZXJNYXJnaW46IHsgbGVmdDogMzAgfSxcbiAgICAgICAgICBtYXJrZXJzOiB7XG4gICAgICAgICAgICBmaWxsQ29sb3JzOiB0aGlzLmNvbG9ycyxcbiAgICAgICAgICB9LFxuICAgICAgICB9LFxuICAgICAgICByZXNwb25zaXZlOiBbXG4gICAgICAgICAge1xuICAgICAgICAgICAgYnJlYWtwb2ludDogMTMwMCxcbiAgICAgICAgICAgIG9wdGlvbnM6IHtcbiAgICAgICAgICAgICAgY2hhcnQ6IHtcbiAgICAgICAgICAgICAgICB3aWR0aDogXCIxMDAlXCIsXG4gICAgICAgICAgICAgICAgaGVpZ2h0OiA1NTAsXG4gICAgICAgICAgICAgIH0sXG4gICAgICAgICAgICAgIGxlZ2VuZDoge1xuICAgICAgICAgICAgICAgIHBvc2l0aW9uOiBcImJvdHRvbVwiLFxuICAgICAgICAgICAgICAgIGhvcml6b250YWxBbGlnbjogXCJjZW50ZXJcIixcbiAgICAgICAgICAgICAgICBoZWlnaHQ6IDEwMCxcbiAgICAgICAgICAgICAgfSxcbiAgICAgICAgICAgIH0sXG4gICAgICAgICAgfSxcbiAgICAgICAgXSxcbiAgICAgIH07XG4gICAgfVxuICB9XG59XG4iLCI8c2VjdGlvbj5cbiAgPGRpdiBjbGFzcz1cImNoYXJ0XCIgKm5nSWY9XCJjaGFydE9wdGlvbnNcIj5cbiAgICA8ZGl2IGNsYXNzPVwiY2hhcnRfX2Ryb3Bkb3duXCIgKm5nSWY9XCJvcHRpb25zLmRyb3Bkb3duXCI+XG4gICAgICA8bWFwYS1kcm9wZG93blxuICAgICAgICBbZm9ybUNvbnRyb2xdPVwib3B0aW9ucy5kcm9wZG93bi5mb3JtQ29udHJvbFwiXG4gICAgICAgIFtlbGVtZW50XT1cIm9wdGlvbnMuZHJvcGRvd24uZWxlbWVudFwiXG4gICAgICA+PC9tYXBhLWRyb3Bkb3duPlxuICAgIDwvZGl2PlxuICAgIDxhcHgtY2hhcnRcbiAgICAgIFtzZXJpZXNdPVwiY2hhcnRPcHRpb25zLnNlcmllcyFcIlxuICAgICAgW2NoYXJ0XT1cImNoYXJ0T3B0aW9ucy5jaGFydCFcIlxuICAgICAgW3hheGlzXT1cImNoYXJ0T3B0aW9ucy54YXhpcyFcIlxuICAgICAgW3lheGlzXT1cImNoYXJ0T3B0aW9ucy55YXhpcyFcIlxuICAgICAgW3N0cm9rZV09XCJjaGFydE9wdGlvbnMuc3Ryb2tlIVwiXG4gICAgICBbbWFya2Vyc109XCJjaGFydE9wdGlvbnMubWFya2VycyFcIlxuICAgICAgW2ZpbGxdPVwiY2hhcnRPcHRpb25zLmZpbGwhXCJcbiAgICAgIFt0aXRsZV09XCJjaGFydE9wdGlvbnMudGl0bGUhXCJcbiAgICAgIFtsZWdlbmRdPVwiY2hhcnRPcHRpb25zLmxlZ2VuZCFcIlxuICAgICAgW3Jlc3BvbnNpdmVdPVwiY2hhcnRPcHRpb25zLnJlc3BvbnNpdmUhXCJ3aWR0aFxuICAgID48L2FweC1jaGFydD5cbiAgPC9kaXY+XG48L3NlY3Rpb24+XG4iXX0=
|
|
@@ -1022,10 +1022,10 @@ class MapaCapabilityDetailComponent {
|
|
|
1022
1022
|
}
|
|
1023
1023
|
}
|
|
1024
1024
|
MapaCapabilityDetailComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1025
|
-
MapaCapabilityDetailComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaCapabilityDetailComponent, selector: "mapa-capability-detail", inputs: { data: "data" }, ngImport: i0, template: "<section class=\"capability\">\n <div class=\"capability__core\">\n <div *ngFor=\"let capability of data; let i = index\" class=\"capability__item\">\n <div class=\"capability__item--header\">\n <div class=\"capability__item--title-dots\">\n <div class=\"display-L\">{{ capability.name }}</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\">\n <mapa-capability-interval-bar\n [data]=\"capability\"\n (clicked)=\"showMore(i)\"\n reusable-interval-bar\n ></mapa-capability-interval-bar>\n </div>\n </div>\n <div [class.capability__item--show]=\"expanded.has(i)\" [class.capability__item--hide]=\"!expanded.has(i)\">\n <mapa-capability-expand\n [data]=\"capability\"\n ></mapa-capability-expand>\n </div>\n </div>\n </div>\n</section>", styles: [".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:16px 16px 0;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 mapa-capability-expand{height:0;display:inline-flex}.capability__item--show{opacity:1;max-height:100%;height:100%}.capability__item--header{display:flex;align-items:center;justify-content:space-between;padding-bottom:16px}.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}\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 Display;font-size:20px;font-style:normal;font-weight:400}.display-L{font-family:SF Pro Display;font-size:32px;font-style:normal;font-weight:400}.display-XG{font-family:SF Pro Display;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: "component", type: MapaCapabilityDotComponent, selector: "mapa-capability-dot", inputs: ["type", "item", "tooltip", "capability"] }, { kind: "component", type: MapaCapabilityIntervalBarComponent, selector: "mapa-capability-interval-bar", inputs: ["data"], outputs: ["clicked"] }, { kind: "component", type: MapaCapabilityExpandComponent, selector: "mapa-capability-expand", inputs: ["data"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
1025
|
+
MapaCapabilityDetailComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaCapabilityDetailComponent, selector: "mapa-capability-detail", inputs: { data: "data" }, ngImport: i0, template: "<section class=\"capability\">\n <div class=\"capability__core\">\n <div *ngFor=\"let capability of data; let i = index\" class=\"capability__item\">\n <div class=\"capability__item--header\">\n <div class=\"capability__item--title-dots\">\n <div class=\"display-L\">{{ capability.name }}</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\">\n <mapa-capability-interval-bar\n [data]=\"capability\"\n (clicked)=\"showMore(i)\"\n reusable-interval-bar\n ></mapa-capability-interval-bar>\n </div>\n </div>\n <div [class.capability__item--show]=\"expanded.has(i)\" [class.capability__item--hide]=\"!expanded.has(i)\">\n <mapa-capability-expand\n [data]=\"capability\"\n ></mapa-capability-expand>\n </div>\n </div>\n </div>\n</section>", styles: [".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:16px 16px 0;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 mapa-capability-expand{height:0;display:inline-flex}.capability__item--hide mapa-capability-expand>*{opacity:0;max-height:0;height:0;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;padding-bottom:16px}.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}\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 Display;font-size:20px;font-style:normal;font-weight:400}.display-L{font-family:SF Pro Display;font-size:32px;font-style:normal;font-weight:400}.display-XG{font-family:SF Pro Display;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: "component", type: MapaCapabilityDotComponent, selector: "mapa-capability-dot", inputs: ["type", "item", "tooltip", "capability"] }, { kind: "component", type: MapaCapabilityIntervalBarComponent, selector: "mapa-capability-interval-bar", inputs: ["data"], outputs: ["clicked"] }, { kind: "component", type: MapaCapabilityExpandComponent, selector: "mapa-capability-expand", inputs: ["data"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
1026
1026
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityDetailComponent, decorators: [{
|
|
1027
1027
|
type: Component,
|
|
1028
|
-
args: [{ selector: "mapa-capability-detail", encapsulation: ViewEncapsulation.None, template: "<section class=\"capability\">\n <div class=\"capability__core\">\n <div *ngFor=\"let capability of data; let i = index\" class=\"capability__item\">\n <div class=\"capability__item--header\">\n <div class=\"capability__item--title-dots\">\n <div class=\"display-L\">{{ capability.name }}</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\">\n <mapa-capability-interval-bar\n [data]=\"capability\"\n (clicked)=\"showMore(i)\"\n reusable-interval-bar\n ></mapa-capability-interval-bar>\n </div>\n </div>\n <div [class.capability__item--show]=\"expanded.has(i)\" [class.capability__item--hide]=\"!expanded.has(i)\">\n <mapa-capability-expand\n [data]=\"capability\"\n ></mapa-capability-expand>\n </div>\n </div>\n </div>\n</section>", styles: [".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:16px 16px 0;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 mapa-capability-expand{height:0;display:inline-flex}.capability__item--show{opacity:1;max-height:100%;height:100%}.capability__item--header{display:flex;align-items:center;justify-content:space-between;padding-bottom:16px}.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}\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 Display;font-size:20px;font-style:normal;font-weight:400}.display-L{font-family:SF Pro Display;font-size:32px;font-style:normal;font-weight:400}.display-XG{font-family:SF Pro Display;font-size:48px;font-style:normal;font-weight:400}*{transition:opacity .4s ease-out,max-height .4s ease-out}\n"] }]
|
|
1028
|
+
args: [{ selector: "mapa-capability-detail", encapsulation: ViewEncapsulation.None, template: "<section class=\"capability\">\n <div class=\"capability__core\">\n <div *ngFor=\"let capability of data; let i = index\" class=\"capability__item\">\n <div class=\"capability__item--header\">\n <div class=\"capability__item--title-dots\">\n <div class=\"display-L\">{{ capability.name }}</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\">\n <mapa-capability-interval-bar\n [data]=\"capability\"\n (clicked)=\"showMore(i)\"\n reusable-interval-bar\n ></mapa-capability-interval-bar>\n </div>\n </div>\n <div [class.capability__item--show]=\"expanded.has(i)\" [class.capability__item--hide]=\"!expanded.has(i)\">\n <mapa-capability-expand\n [data]=\"capability\"\n ></mapa-capability-expand>\n </div>\n </div>\n </div>\n</section>", styles: [".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:16px 16px 0;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 mapa-capability-expand{height:0;display:inline-flex}.capability__item--hide mapa-capability-expand>*{opacity:0;max-height:0;height:0;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;padding-bottom:16px}.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}\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 Display;font-size:20px;font-style:normal;font-weight:400}.display-L{font-family:SF Pro Display;font-size:32px;font-style:normal;font-weight:400}.display-XG{font-family:SF Pro Display;font-size:48px;font-style:normal;font-weight:400}*{transition:opacity .4s ease-out,max-height .4s ease-out}\n"] }]
|
|
1029
1029
|
}], propDecorators: { data: [{
|
|
1030
1030
|
type: Input
|
|
1031
1031
|
}] } });
|