mapa-library-ui 0.8.0 → 0.9.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.
Files changed (35) hide show
  1. package/esm2020/lib/core/interfaces/button-icon.interface.mjs +1 -1
  2. package/esm2020/src/lib/components/button-icon/lib/components/button-icon/src/button-icon.component.mjs +3 -3
  3. package/esm2020/src/lib/components/button-icon/lib/core/interfaces/button-icon.interface.mjs +1 -1
  4. package/esm2020/src/lib/components/capability/lib/components/capability/src/capability-detail/capability-detail.component.mjs +2 -2
  5. package/esm2020/src/lib/components/capability/lib/components/capability/src/capability-indicator/capability-indicator.component.mjs +3 -8
  6. package/esm2020/src/lib/components/capability/lib/components/capability/src/capability-indicator-chart/capability-indicator-chart.component.mjs +10 -3
  7. package/esm2020/src/lib/components/capability/lib/components/capability/src/capability-indicator-list/capability-indicator-list.component.mjs +3 -3
  8. package/esm2020/src/lib/components/capability/lib/core/interfaces/button-icon.interface.mjs +1 -1
  9. package/esm2020/src/lib/components/chart/lib/components/chart/src/chart.component.mjs +2 -2
  10. package/esm2020/src/lib/components/report-item/src/report-item.component.mjs +3 -5
  11. package/fesm2015/mapa-library-ui-src-lib-components-button-icon.mjs +2 -2
  12. package/fesm2015/mapa-library-ui-src-lib-components-button-icon.mjs.map +1 -1
  13. package/fesm2015/mapa-library-ui-src-lib-components-capability.mjs +15 -13
  14. package/fesm2015/mapa-library-ui-src-lib-components-capability.mjs.map +1 -1
  15. package/fesm2015/mapa-library-ui-src-lib-components-chart.mjs +2 -2
  16. package/fesm2015/mapa-library-ui-src-lib-components-chart.mjs.map +1 -1
  17. package/fesm2015/mapa-library-ui-src-lib-components-report-item.mjs +2 -4
  18. package/fesm2015/mapa-library-ui-src-lib-components-report-item.mjs.map +1 -1
  19. package/fesm2020/mapa-library-ui-src-lib-components-button-icon.mjs +2 -2
  20. package/fesm2020/mapa-library-ui-src-lib-components-button-icon.mjs.map +1 -1
  21. package/fesm2020/mapa-library-ui-src-lib-components-capability.mjs +15 -13
  22. package/fesm2020/mapa-library-ui-src-lib-components-capability.mjs.map +1 -1
  23. package/fesm2020/mapa-library-ui-src-lib-components-chart.mjs +2 -2
  24. package/fesm2020/mapa-library-ui-src-lib-components-chart.mjs.map +1 -1
  25. package/fesm2020/mapa-library-ui-src-lib-components-report-item.mjs +2 -4
  26. package/fesm2020/mapa-library-ui-src-lib-components-report-item.mjs.map +1 -1
  27. package/lib/core/interfaces/button-icon.interface.d.ts +0 -1
  28. package/mapa-library-ui-0.9.0.tgz +0 -0
  29. package/package.json +1 -1
  30. package/src/lib/components/button-icon/lib/core/interfaces/button-icon.interface.d.ts +0 -1
  31. package/src/lib/components/capability/lib/components/capability/src/capability-indicator/capability-indicator.component.d.ts +1 -3
  32. package/src/lib/components/capability/lib/components/capability/src/capability-indicator-chart/capability-indicator-chart.component.d.ts +1 -0
  33. package/src/lib/components/capability/lib/core/interfaces/button-icon.interface.d.ts +0 -1
  34. package/src/lib/components/report-item/src/report-item.component.d.ts +0 -2
  35. package/mapa-library-ui-0.8.0.tgz +0 -0
@@ -662,19 +662,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
662
662
  }] });
663
663
 
664
664
  class MapaCapabilityIndicatorComponent {
665
- getWidth(item) {
666
- return 32 + ((item.interval || 0) * 2) + 'px';
667
- }
668
665
  }
669
666
  MapaCapabilityIndicatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
670
- MapaCapabilityIndicatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaCapabilityIndicatorComponent, selector: "mapa-capability-indicator", inputs: { item: "item", fullWidth: "fullWidth" }, ngImport: i0, template: "<div\n class=\"indicator\"\n [ngClass]=\"'classification-' + item.classificationId\"\n [style.width]=\"fullWidth ? '100%' : getWidth(item)\"\n>\n <span *ngIf=\"item.name\">{{ item.name }}</span>\n <div class=\"indicator__classification\" *ngIf=\"item.interval\">\n {{ item.interval }}%\n </div>\n</div>\n", styles: [".indicator{color:#fff;margin:3px 0}.indicator__classification{background-color:#fff;border-radius:16px;color:#000;padding:4px 8px;margin-right:4px}\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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
667
+ MapaCapabilityIndicatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaCapabilityIndicatorComponent, selector: "mapa-capability-indicator", inputs: { item: "item" }, ngImport: i0, template: "<div\n class=\"indicator\"\n [ngClass]=\"'classification-' + item.classificationId\"\n>\n <span *ngIf=\"item.name\">{{ item.name }}</span>\n <div class=\"indicator__classification\" *ngIf=\"item.interval\">\n {{ item.interval }}%\n </div>\n</div>\n", styles: [".indicator{color:#fff;margin:3px 0}.indicator__classification{background-color:#fff;border-radius:16px;color:#000;padding:4px 8px;margin-right:4px}\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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
671
668
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityIndicatorComponent, decorators: [{
672
669
  type: Component,
673
- args: [{ selector: "mapa-capability-indicator", template: "<div\n class=\"indicator\"\n [ngClass]=\"'classification-' + item.classificationId\"\n [style.width]=\"fullWidth ? '100%' : getWidth(item)\"\n>\n <span *ngIf=\"item.name\">{{ item.name }}</span>\n <div class=\"indicator__classification\" *ngIf=\"item.interval\">\n {{ item.interval }}%\n </div>\n</div>\n", styles: [".indicator{color:#fff;margin:3px 0}.indicator__classification{background-color:#fff;border-radius:16px;color:#000;padding:4px 8px;margin-right:4px}\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"] }]
670
+ args: [{ selector: "mapa-capability-indicator", template: "<div\n class=\"indicator\"\n [ngClass]=\"'classification-' + item.classificationId\"\n>\n <span *ngIf=\"item.name\">{{ item.name }}</span>\n <div class=\"indicator__classification\" *ngIf=\"item.interval\">\n {{ item.interval }}%\n </div>\n</div>\n", styles: [".indicator{color:#fff;margin:3px 0}.indicator__classification{background-color:#fff;border-radius:16px;color:#000;padding:4px 8px;margin-right:4px}\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"] }]
674
671
  }], propDecorators: { item: [{
675
672
  type: Input
676
- }], fullWidth: [{
677
- type: Input
678
673
  }] } });
679
674
 
680
675
  class MapaCapabilityIndicatorModule {
@@ -1022,10 +1017,10 @@ class MapaCapabilityDetailComponent {
1022
1017
  }
1023
1018
  }
1024
1019
  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--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 });
1020
+ 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: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 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}.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
1021
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityDetailComponent, decorators: [{
1027
1022
  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--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"] }]
1023
+ 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: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 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}.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
1024
  }], propDecorators: { data: [{
1030
1025
  type: Input
1031
1026
  }] } });
@@ -1190,10 +1185,10 @@ class MapaCapabilityIndicatorListComponent {
1190
1185
  }
1191
1186
  }
1192
1187
  MapaCapabilityIndicatorListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityIndicatorListComponent, deps: [{ token: CapabilityClassificationService }], target: i0.ɵɵFactoryTarget.Component });
1193
- MapaCapabilityIndicatorListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaCapabilityIndicatorListComponent, selector: "mapa-capability-indicator-list", inputs: { data: "data" }, ngImport: i0, template: "<section class=\"indicator-list\">\n <article class=\"indicator-list__column\">\n <h2>Indicadores positivos</h2>\n <mapa-capability-indicator\n *ngFor=\"let item of dataPositive\"\n [item]=\"item\"\n [fullWidth]=\"true\">\n </mapa-capability-indicator>\n </article>\n <article class=\"indicator-list__column\">\n <h2>Indicadores negativos</h2>\n <mapa-capability-indicator\n *ngFor=\"let item of dataNegative\"\n [item]=\"item\"\n [fullWidth]=\"true\">\n </mapa-capability-indicator>\n </article>\n <article class=\"indicator-list__column\">\n <h2>Indicadores de risco</h2>\n <h3>Risco de acidente por precipita\u00E7\u00E3o</h3>\n <mapa-capability-indicator\n *ngFor=\"let item of dataRiskPrecipitation\"\n [item]=\"item\"\n [fullWidth]=\"true\">\n </mapa-capability-indicator>\n <h3>Risco de acidente por neglig\u00EAncia</h3>\n <mapa-capability-indicator\n *ngFor=\"let item of dataRiskNegligence\"\n [item]=\"item\"\n [fullWidth]=\"true\">\n </mapa-capability-indicator>\n </article>\n</section>\n", styles: [".indicator-list{display:flex;gap:42px;justify-content:space-between;margin-bottom:42px}.indicator-list__column{width:33%}.indicator-list__column h2{font-family:SF-Pro;font-size:24px;font-style:normal;font-weight:400;line-height:32px;margin-bottom:24px}.indicator-list__column h3{font-family:SF-Pro;font-size:20px;font-style:normal;font-weight:400;line-height:32px;margin-bottom:24px}\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: MapaCapabilityIndicatorComponent, selector: "mapa-capability-indicator", inputs: ["item", "fullWidth"] }] });
1188
+ MapaCapabilityIndicatorListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaCapabilityIndicatorListComponent, selector: "mapa-capability-indicator-list", inputs: { data: "data" }, ngImport: i0, template: "<section class=\"indicator-list\">\n <article class=\"indicator-list__column\">\n <h2>Indicadores positivos</h2>\n <mapa-capability-indicator\n *ngFor=\"let item of dataPositive\"\n [item]=\"item\">\n </mapa-capability-indicator>\n </article>\n <article class=\"indicator-list__column\">\n <h2>Indicadores negativos</h2>\n <mapa-capability-indicator\n *ngFor=\"let item of dataNegative\"\n [item]=\"item\">\n </mapa-capability-indicator>\n </article>\n <article class=\"indicator-list__column\">\n <h2>Indicadores de risco</h2>\n <h3>Risco de acidente por precipita\u00E7\u00E3o</h3>\n <mapa-capability-indicator\n *ngFor=\"let item of dataRiskPrecipitation\"\n [item]=\"item\">\n </mapa-capability-indicator>\n <h3>Risco de acidente por neglig\u00EAncia</h3>\n <mapa-capability-indicator\n *ngFor=\"let item of dataRiskNegligence\"\n [item]=\"item\">\n </mapa-capability-indicator>\n </article>\n</section>\n", styles: [".indicator-list{display:flex;gap:42px;justify-content:space-between;margin-bottom:42px}.indicator-list__column{width:33%}.indicator-list__column h2{font-family:SF-Pro;font-size:24px;font-style:normal;font-weight:400;line-height:32px;margin-bottom:24px}.indicator-list__column h3{font-family:SF-Pro;font-size:20px;font-style:normal;font-weight:400;line-height:32px;margin-bottom:24px}\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: MapaCapabilityIndicatorComponent, selector: "mapa-capability-indicator", inputs: ["item"] }] });
1194
1189
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityIndicatorListComponent, decorators: [{
1195
1190
  type: Component,
1196
- args: [{ selector: "mapa-capability-indicator-list", template: "<section class=\"indicator-list\">\n <article class=\"indicator-list__column\">\n <h2>Indicadores positivos</h2>\n <mapa-capability-indicator\n *ngFor=\"let item of dataPositive\"\n [item]=\"item\"\n [fullWidth]=\"true\">\n </mapa-capability-indicator>\n </article>\n <article class=\"indicator-list__column\">\n <h2>Indicadores negativos</h2>\n <mapa-capability-indicator\n *ngFor=\"let item of dataNegative\"\n [item]=\"item\"\n [fullWidth]=\"true\">\n </mapa-capability-indicator>\n </article>\n <article class=\"indicator-list__column\">\n <h2>Indicadores de risco</h2>\n <h3>Risco de acidente por precipita\u00E7\u00E3o</h3>\n <mapa-capability-indicator\n *ngFor=\"let item of dataRiskPrecipitation\"\n [item]=\"item\"\n [fullWidth]=\"true\">\n </mapa-capability-indicator>\n <h3>Risco de acidente por neglig\u00EAncia</h3>\n <mapa-capability-indicator\n *ngFor=\"let item of dataRiskNegligence\"\n [item]=\"item\"\n [fullWidth]=\"true\">\n </mapa-capability-indicator>\n </article>\n</section>\n", styles: [".indicator-list{display:flex;gap:42px;justify-content:space-between;margin-bottom:42px}.indicator-list__column{width:33%}.indicator-list__column h2{font-family:SF-Pro;font-size:24px;font-style:normal;font-weight:400;line-height:32px;margin-bottom:24px}.indicator-list__column h3{font-family:SF-Pro;font-size:20px;font-style:normal;font-weight:400;line-height:32px;margin-bottom:24px}\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"] }]
1191
+ args: [{ selector: "mapa-capability-indicator-list", template: "<section class=\"indicator-list\">\n <article class=\"indicator-list__column\">\n <h2>Indicadores positivos</h2>\n <mapa-capability-indicator\n *ngFor=\"let item of dataPositive\"\n [item]=\"item\">\n </mapa-capability-indicator>\n </article>\n <article class=\"indicator-list__column\">\n <h2>Indicadores negativos</h2>\n <mapa-capability-indicator\n *ngFor=\"let item of dataNegative\"\n [item]=\"item\">\n </mapa-capability-indicator>\n </article>\n <article class=\"indicator-list__column\">\n <h2>Indicadores de risco</h2>\n <h3>Risco de acidente por precipita\u00E7\u00E3o</h3>\n <mapa-capability-indicator\n *ngFor=\"let item of dataRiskPrecipitation\"\n [item]=\"item\">\n </mapa-capability-indicator>\n <h3>Risco de acidente por neglig\u00EAncia</h3>\n <mapa-capability-indicator\n *ngFor=\"let item of dataRiskNegligence\"\n [item]=\"item\">\n </mapa-capability-indicator>\n </article>\n</section>\n", styles: [".indicator-list{display:flex;gap:42px;justify-content:space-between;margin-bottom:42px}.indicator-list__column{width:33%}.indicator-list__column h2{font-family:SF-Pro;font-size:24px;font-style:normal;font-weight:400;line-height:32px;margin-bottom:24px}.indicator-list__column h3{font-family:SF-Pro;font-size:20px;font-style:normal;font-weight:400;line-height:32px;margin-bottom:24px}\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"] }]
1197
1192
  }], ctorParameters: function () { return [{ type: CapabilityClassificationService }]; }, propDecorators: { data: [{
1198
1193
  type: Input
1199
1194
  }] } });
@@ -1223,12 +1218,19 @@ class MapaCapabilityIndicatorChartComponent {
1223
1218
  interval: item.interval,
1224
1219
  };
1225
1220
  }
1221
+ getWidth(item) {
1222
+ const minWidth = 48;
1223
+ const interval = (item.interval || 0);
1224
+ if (interval < minWidth)
1225
+ minWidth + 'px';
1226
+ return interval + '%';
1227
+ }
1226
1228
  }
1227
1229
  MapaCapabilityIndicatorChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityIndicatorChartComponent, deps: [{ token: CapabilityClassificationService }], target: i0.ɵɵFactoryTarget.Component });
1228
- MapaCapabilityIndicatorChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaCapabilityIndicatorChartComponent, selector: "mapa-capability-indicator-chart", inputs: { data: "data" }, ngImport: i0, template: "<table class=\"indicator-chart\">\n <tr *ngFor=\"let item of data\">\n <td class=\"indicator-chart__column--description\">{{ item.name }}</td>\n <td class=\"indicator-chart__column indicator-chart__column--negative\">\n <mapa-capability-indicator\n *ngIf=\"!classification.getByItem(item).positive\"\n [item]=\"setUnlabeledItem(item)\"\n ></mapa-capability-indicator>\n </td>\n <td class=\"indicator-chart__column indicator-chart__column--positive\">\n <mapa-capability-indicator\n *ngIf=\"classification.getByItem(item).positive\"\n [item]=\"setUnlabeledItem(item)\"\n ></mapa-capability-indicator>\n </td>\n </tr>\n</table>\n", styles: [".indicator-chart{width:100%;border-collapse:collapse}.indicator-chart tr{border-bottom:1px solid #DCDCDE}.indicator-chart tr:first-child{border-top:1px solid #DCDCDE}.indicator-chart__column--description{width:1%;padding-right:24px}.indicator-chart__column--positive{border-left:1px solid #DCDCDE;border-spacing:0px;padding:8px 0!important}.indicator-chart__column--negative{display:flex;justify-content:flex-end;border-right:1px solid #DCDCDE;border-spacing:0px;padding:8px 0!important}.indicator-chart__column--negative .indicator{border-radius:18px 0 0 18px!important;justify-content:flex-start!important;padding:2px!important}.indicator-chart__column--negative .indicator__classification{margin-left:1px!important}.indicator-chart__column--positive .indicator{border-radius:0 18px 18px 0!important;padding:2px!important}.indicator-chart__column--positive .indicator__classification{margin-right:1px!important}\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: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MapaCapabilityIndicatorComponent, selector: "mapa-capability-indicator", inputs: ["item", "fullWidth"] }], encapsulation: i0.ViewEncapsulation.None });
1230
+ MapaCapabilityIndicatorChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaCapabilityIndicatorChartComponent, selector: "mapa-capability-indicator-chart", inputs: { data: "data" }, ngImport: i0, template: "<table class=\"indicator-chart\">\n <tr *ngFor=\"let item of data\">\n <td class=\"indicator-chart__column--description\">{{ item.name }}</td>\n <td class=\"indicator-chart__column\">\n <div class=\"indicator-chart__column--negative\">\n <mapa-capability-indicator\n *ngIf=\"!classification.getByItem(item).positive\"\n [item]=\"setUnlabeledItem(item)\"\n [style.width]=\"getWidth(item)\"\n ></mapa-capability-indicator>\n </div>\n </td>\n <td class=\"indicator-chart__column\">\n <div class=\"indicator-chart__column--positive\">\n <mapa-capability-indicator\n *ngIf=\"classification.getByItem(item).positive\"\n [item]=\"setUnlabeledItem(item)\"\n [style.width]=\"getWidth(item)\"\n ></mapa-capability-indicator>\n </div>\n </td>\n </tr>\n</table>\n", styles: [".indicator-chart{width:100%;border-collapse:collapse}.indicator-chart tr{border-bottom:1px solid #DCDCDE}.indicator-chart tr:first-child{border-top:1px solid #DCDCDE}.indicator-chart__column--description{width:1%;padding-right:24px}.indicator-chart__column--positive{display:flex;border-left:1px solid #DCDCDE;border-spacing:0px;padding:8px 0!important}.indicator-chart__column--negative{display:flex;justify-content:flex-end;border-right:1px solid #DCDCDE;border-spacing:0px;padding:8px 0!important}.indicator-chart__column--negative .indicator{border-radius:18px 0 0 18px!important;justify-content:flex-start!important;padding:2px!important}.indicator-chart__column--negative .indicator__classification{margin-left:1px!important}.indicator-chart__column--positive .indicator{border-radius:0 18px 18px 0!important;padding:2px!important}.indicator-chart__column--positive .indicator__classification{margin-right:1px!important}\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: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MapaCapabilityIndicatorComponent, selector: "mapa-capability-indicator", inputs: ["item"] }], encapsulation: i0.ViewEncapsulation.None });
1229
1231
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityIndicatorChartComponent, decorators: [{
1230
1232
  type: Component,
1231
- args: [{ selector: "mapa-capability-indicator-chart", encapsulation: ViewEncapsulation.None, template: "<table class=\"indicator-chart\">\n <tr *ngFor=\"let item of data\">\n <td class=\"indicator-chart__column--description\">{{ item.name }}</td>\n <td class=\"indicator-chart__column indicator-chart__column--negative\">\n <mapa-capability-indicator\n *ngIf=\"!classification.getByItem(item).positive\"\n [item]=\"setUnlabeledItem(item)\"\n ></mapa-capability-indicator>\n </td>\n <td class=\"indicator-chart__column indicator-chart__column--positive\">\n <mapa-capability-indicator\n *ngIf=\"classification.getByItem(item).positive\"\n [item]=\"setUnlabeledItem(item)\"\n ></mapa-capability-indicator>\n </td>\n </tr>\n</table>\n", styles: [".indicator-chart{width:100%;border-collapse:collapse}.indicator-chart tr{border-bottom:1px solid #DCDCDE}.indicator-chart tr:first-child{border-top:1px solid #DCDCDE}.indicator-chart__column--description{width:1%;padding-right:24px}.indicator-chart__column--positive{border-left:1px solid #DCDCDE;border-spacing:0px;padding:8px 0!important}.indicator-chart__column--negative{display:flex;justify-content:flex-end;border-right:1px solid #DCDCDE;border-spacing:0px;padding:8px 0!important}.indicator-chart__column--negative .indicator{border-radius:18px 0 0 18px!important;justify-content:flex-start!important;padding:2px!important}.indicator-chart__column--negative .indicator__classification{margin-left:1px!important}.indicator-chart__column--positive .indicator{border-radius:0 18px 18px 0!important;padding:2px!important}.indicator-chart__column--positive .indicator__classification{margin-right:1px!important}\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"] }]
1233
+ args: [{ selector: "mapa-capability-indicator-chart", encapsulation: ViewEncapsulation.None, template: "<table class=\"indicator-chart\">\n <tr *ngFor=\"let item of data\">\n <td class=\"indicator-chart__column--description\">{{ item.name }}</td>\n <td class=\"indicator-chart__column\">\n <div class=\"indicator-chart__column--negative\">\n <mapa-capability-indicator\n *ngIf=\"!classification.getByItem(item).positive\"\n [item]=\"setUnlabeledItem(item)\"\n [style.width]=\"getWidth(item)\"\n ></mapa-capability-indicator>\n </div>\n </td>\n <td class=\"indicator-chart__column\">\n <div class=\"indicator-chart__column--positive\">\n <mapa-capability-indicator\n *ngIf=\"classification.getByItem(item).positive\"\n [item]=\"setUnlabeledItem(item)\"\n [style.width]=\"getWidth(item)\"\n ></mapa-capability-indicator>\n </div>\n </td>\n </tr>\n</table>\n", styles: [".indicator-chart{width:100%;border-collapse:collapse}.indicator-chart tr{border-bottom:1px solid #DCDCDE}.indicator-chart tr:first-child{border-top:1px solid #DCDCDE}.indicator-chart__column--description{width:1%;padding-right:24px}.indicator-chart__column--positive{display:flex;border-left:1px solid #DCDCDE;border-spacing:0px;padding:8px 0!important}.indicator-chart__column--negative{display:flex;justify-content:flex-end;border-right:1px solid #DCDCDE;border-spacing:0px;padding:8px 0!important}.indicator-chart__column--negative .indicator{border-radius:18px 0 0 18px!important;justify-content:flex-start!important;padding:2px!important}.indicator-chart__column--negative .indicator__classification{margin-left:1px!important}.indicator-chart__column--positive .indicator{border-radius:0 18px 18px 0!important;padding:2px!important}.indicator-chart__column--positive .indicator__classification{margin-right:1px!important}\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"] }]
1232
1234
  }], ctorParameters: function () { return [{ type: CapabilityClassificationService }]; }, propDecorators: { data: [{
1233
1235
  type: Input
1234
1236
  }] } });