mapa-library-ui 0.3.6 → 0.3.7
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-comparative-indicator/capability-comparative-indicator.component.mjs +2 -2
- package/esm2020/src/lib/components/capability/lib/components/capability/src/capability-detail/capability-detail.component.mjs +3 -3
- package/esm2020/src/lib/components/capability/lib/components/capability/src/capability-dot/capability-dot.component.mjs +3 -3
- package/esm2020/src/lib/components/capability/lib/components/capability/src/capability-expand/capability-expand.component.mjs +3 -3
- package/esm2020/src/lib/components/capability/lib/components/capability/src/capability-indicator/capability-indicator.component.mjs +2 -2
- package/esm2020/src/lib/components/capability/lib/components/capability/src/capability-indicator-chart/capability-indicator-chart.component.mjs +2 -2
- package/esm2020/src/lib/components/capability/lib/components/capability/src/capability-indicator-list/capability-indicator-list.component.mjs +2 -2
- package/esm2020/src/lib/components/capability/lib/components/capability/src/capability-interval/capability-interval.component.mjs +54 -4
- package/esm2020/src/lib/components/capability/lib/components/capability/src/capability-interval-bar/capability-interval-bar.component.mjs +3 -3
- package/esm2020/src/lib/components/capability/lib/components/tooltip/src/tooltip.component.mjs +2 -2
- package/esm2020/src/lib/components/tooltip/src/tooltip.component.mjs +2 -2
- package/fesm2015/mapa-library-ui-src-lib-components-capability.mjs +71 -21
- package/fesm2015/mapa-library-ui-src-lib-components-capability.mjs.map +1 -1
- package/fesm2015/mapa-library-ui-src-lib-components-tooltip.mjs +2 -2
- package/fesm2015/mapa-library-ui-src-lib-components-tooltip.mjs.map +1 -1
- package/fesm2020/mapa-library-ui-src-lib-components-capability.mjs +71 -21
- package/fesm2020/mapa-library-ui-src-lib-components-capability.mjs.map +1 -1
- package/fesm2020/mapa-library-ui-src-lib-components-tooltip.mjs +2 -2
- package/fesm2020/mapa-library-ui-src-lib-components-tooltip.mjs.map +1 -1
- package/mapa-library-ui-0.3.7.tgz +0 -0
- package/package.json +1 -1
- package/src/lib/components/capability/lib/components/capability/src/capability-interval/capability-interval.component.d.ts +19 -1
- package/mapa-library-ui-0.3.6.tgz +0 -0
|
@@ -18,6 +18,7 @@ import { MatListModule } from '@angular/material/list';
|
|
|
18
18
|
import * as i1$1 from '@angular/material/icon';
|
|
19
19
|
import { MatIconModule } from '@angular/material/icon';
|
|
20
20
|
import * as i2$1 from '@angular/platform-browser';
|
|
21
|
+
import { Md5 } from 'ts-md5';
|
|
21
22
|
import * as i1$2 from '@angular/router';
|
|
22
23
|
import { NavigationStart } from '@angular/router';
|
|
23
24
|
import * as i2$2 from 'mapa-library-ui/src/lib/components/button';
|
|
@@ -286,10 +287,10 @@ class MapaTooltipComponent {
|
|
|
286
287
|
ngOnInit() { }
|
|
287
288
|
}
|
|
288
289
|
MapaTooltipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
289
|
-
MapaTooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaTooltipComponent, selector: "lib-tooltip", ngImport: i0, template: "<div\n class=\"tooltip\"\n [ngClass]=\"['tooltip--'+position, 'tooltip--'+theme]\"\n [class.tooltip--visible]=\"visible\"\n [style.left]=\"left + 'px'\"\n [style.top]=\"top + 'px'\"\n>\n <ng-template [ngTemplateOutlet]=\"tooltip\"></ng-template>\n</div>\n", styles: [".tooltip{position:fixed;background-color:#000;border-radius:
|
|
290
|
+
MapaTooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaTooltipComponent, selector: "lib-tooltip", ngImport: i0, template: "<div\n class=\"tooltip\"\n [ngClass]=\"['tooltip--'+position, 'tooltip--'+theme]\"\n [class.tooltip--visible]=\"visible\"\n [style.left]=\"left + 'px'\"\n [style.top]=\"top + 'px'\"\n>\n <ng-template [ngTemplateOutlet]=\"tooltip\"></ng-template>\n</div>\n", styles: [".tooltip{position:fixed;background-color:#000;border-radius:8px;color:#fff;font-family:Arial;padding:3px 6px;font-size:13px;opacity:0;z-index:999;box-shadow:#0000000d 0 6px 24px,#00000014 0 0 0 1px}.tooltip :before,.tooltip :after{content:\"\";display:block;position:absolute;bottom:100%;width:1px;height:0}.tooltip :before{left:49%;border:8px solid transparent;border-bottom-color:#ddd}.tooltip :after{left:49.6%;border:7px solid transparent;border-bottom-color:#fff}.tooltip--visible{opacity:1;transition:opacity .3s}.tooltip--light{background-color:#fff;color:#000}.tooltip--dark{background-color:#000;color:#fff}.tooltip--below{transform:translate(-50%);margin-top:7px}.tooltip--below:before{border-left-color:transparent;border-right-color:transparent;border-top:none;left:calc(50% - 5px);top:-5px}.tooltip--above{transform:translate(-50%,-100%);margin-bottom:7px}.tooltip--above:before{border-left-color:transparent;border-right-color:transparent;border-bottom:none;left:calc(50% - 5px);bottom:-5px}.tooltip--left{transform:translate(calc(-100% - 7px),-50%)}.tooltip--left:before{border-top-color:transparent;border-bottom-color:transparent;border-right:none;right:-5px;top:calc(50% - 5px)}.tooltip--right{transform:translateY(-50%);margin-left:7px}.tooltip--right:before{border-top-color:transparent;border-bottom-color:transparent;border-left:none;left:-5px;top:calc(50% - 5px)}.tooltip--dynamic{margin-left:20px}.tooltip--dynamic:before{display:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
290
291
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaTooltipComponent, decorators: [{
|
|
291
292
|
type: Component,
|
|
292
|
-
args: [{ selector: 'lib-tooltip', encapsulation: ViewEncapsulation.None, template: "<div\n class=\"tooltip\"\n [ngClass]=\"['tooltip--'+position, 'tooltip--'+theme]\"\n [class.tooltip--visible]=\"visible\"\n [style.left]=\"left + 'px'\"\n [style.top]=\"top + 'px'\"\n>\n <ng-template [ngTemplateOutlet]=\"tooltip\"></ng-template>\n</div>\n", styles: [".tooltip{position:fixed;background-color:#000;border-radius:
|
|
293
|
+
args: [{ selector: 'lib-tooltip', encapsulation: ViewEncapsulation.None, template: "<div\n class=\"tooltip\"\n [ngClass]=\"['tooltip--'+position, 'tooltip--'+theme]\"\n [class.tooltip--visible]=\"visible\"\n [style.left]=\"left + 'px'\"\n [style.top]=\"top + 'px'\"\n>\n <ng-template [ngTemplateOutlet]=\"tooltip\"></ng-template>\n</div>\n", styles: [".tooltip{position:fixed;background-color:#000;border-radius:8px;color:#fff;font-family:Arial;padding:3px 6px;font-size:13px;opacity:0;z-index:999;box-shadow:#0000000d 0 6px 24px,#00000014 0 0 0 1px}.tooltip :before,.tooltip :after{content:\"\";display:block;position:absolute;bottom:100%;width:1px;height:0}.tooltip :before{left:49%;border:8px solid transparent;border-bottom-color:#ddd}.tooltip :after{left:49.6%;border:7px solid transparent;border-bottom-color:#fff}.tooltip--visible{opacity:1;transition:opacity .3s}.tooltip--light{background-color:#fff;color:#000}.tooltip--dark{background-color:#000;color:#fff}.tooltip--below{transform:translate(-50%);margin-top:7px}.tooltip--below:before{border-left-color:transparent;border-right-color:transparent;border-top:none;left:calc(50% - 5px);top:-5px}.tooltip--above{transform:translate(-50%,-100%);margin-bottom:7px}.tooltip--above:before{border-left-color:transparent;border-right-color:transparent;border-bottom:none;left:calc(50% - 5px);bottom:-5px}.tooltip--left{transform:translate(calc(-100% - 7px),-50%)}.tooltip--left:before{border-top-color:transparent;border-bottom-color:transparent;border-right:none;right:-5px;top:calc(50% - 5px)}.tooltip--right{transform:translateY(-50%);margin-left:7px}.tooltip--right:before{border-top-color:transparent;border-bottom-color:transparent;border-left:none;left:-5px;top:calc(50% - 5px)}.tooltip--dynamic{margin-left:20px}.tooltip--dynamic:before{display:none}\n"] }]
|
|
293
294
|
}], ctorParameters: function () { return []; } });
|
|
294
295
|
|
|
295
296
|
class MapaTooltipDirective {
|
|
@@ -533,10 +534,10 @@ class MapaCapabilityDotComponent {
|
|
|
533
534
|
}
|
|
534
535
|
}
|
|
535
536
|
MapaCapabilityDotComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityDotComponent, deps: [{ token: CapabilityClassificationService }], target: i0.ɵɵFactoryTarget.Component });
|
|
536
|
-
MapaCapabilityDotComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaCapabilityDotComponent, selector: "mapa-capability-dot", inputs: { type: "type", item: "item", tooltip: "tooltip", capability: "capability" }, ngImport: i0, template: "<p\n *ngIf=\"!tooltip\"\n [class.dot]=\"type !== 'small'\"\n [class.small-dot]=\"type === 'small'\"\n [ngClass]=\"'classification-' + item.classificationId\"\n></p>\n<
|
|
537
|
+
MapaCapabilityDotComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaCapabilityDotComponent, selector: "mapa-capability-dot", inputs: { type: "type", item: "item", tooltip: "tooltip", capability: "capability" }, ngImport: i0, template: "<p\n *ngIf=\"!tooltip\"\n [class.dot]=\"type !== 'small'\"\n [class.small-dot]=\"type === 'small'\"\n [ngClass]=\"'classification-' + item.classificationId\"\n></p>\n<div *ngIf=\"tooltip\" [tooltip]=\"tooltipTemplate\" class=\"tooltip-dot\">\n <p\n [class.dot]=\"type !== 'small'\"\n [class.small-dot]=\"type === 'small'\"\n [ngClass]=\"'classification-' + item.classificationId\"\n ></p>\n</div>\n<ng-template #tooltipTemplate>\n <div class=\"tooltip-info\">\n <strong\n class=\"tooltip-info--direction\"\n *ngIf=\"!classification.getByItem(item).positive\"\n >\u2198\uFE0E</strong\n >\n <strong\n class=\"tooltip-info--direction\"\n *ngIf=\"classification.getByItem(item).positive\"\n >\u2197</strong\n >\n\n <h5>{{ item.name }}</h5>\n\n <mapa-tag size=\"small\">\n <p\n class=\"small-dot\"\n [ngClass]=\"'classification-' + item.classificationId\"\n ></p>\n {{ classification.getByItem(item).name }}\n </mapa-tag>\n </div>\n</ng-template>\n", styles: [".tooltip-info{display:flex;align-items:center}.tooltip-info strong{margin-right:2px}.tooltip-info h5{margin:0 5px 0 0;font-family:SF-Pro;font-size:14px;font-style:normal;font-weight:600}.tooltip-info--title{color:#50575e;font-family:SF Pro Display;font-size:14px;font-style:normal;font-weight:600}.tooltip-info--direction{padding-right:6px;font-family:SF-Pro;font-size:12px;font-style:normal;font-weight:600}.tooltip-info mapa-tag{color:#000}\n", ".classification-1{background-color:#073e92;color:#fff}.classification-2{background-color:#0e6ece;color:#fff}.classification-3{background-color:#2d9ced;color:#fff}.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}.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"] }, { kind: "directive", type: MapaTooltipDirective, selector: "[tooltip]", inputs: ["tooltip", "position", "theme", "showDelay", "hideDelay"] }, { kind: "component", type: TagComponent, selector: "mapa-tag", inputs: ["color", "size"] }] });
|
|
537
538
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityDotComponent, decorators: [{
|
|
538
539
|
type: Component,
|
|
539
|
-
args: [{ selector: "mapa-capability-dot", template: "<p\n *ngIf=\"!tooltip\"\n [class.dot]=\"type !== 'small'\"\n [class.small-dot]=\"type === 'small'\"\n [ngClass]=\"'classification-' + item.classificationId\"\n></p>\n<
|
|
540
|
+
args: [{ selector: "mapa-capability-dot", template: "<p\n *ngIf=\"!tooltip\"\n [class.dot]=\"type !== 'small'\"\n [class.small-dot]=\"type === 'small'\"\n [ngClass]=\"'classification-' + item.classificationId\"\n></p>\n<div *ngIf=\"tooltip\" [tooltip]=\"tooltipTemplate\" class=\"tooltip-dot\">\n <p\n [class.dot]=\"type !== 'small'\"\n [class.small-dot]=\"type === 'small'\"\n [ngClass]=\"'classification-' + item.classificationId\"\n ></p>\n</div>\n<ng-template #tooltipTemplate>\n <div class=\"tooltip-info\">\n <strong\n class=\"tooltip-info--direction\"\n *ngIf=\"!classification.getByItem(item).positive\"\n >\u2198\uFE0E</strong\n >\n <strong\n class=\"tooltip-info--direction\"\n *ngIf=\"classification.getByItem(item).positive\"\n >\u2197</strong\n >\n\n <h5>{{ item.name }}</h5>\n\n <mapa-tag size=\"small\">\n <p\n class=\"small-dot\"\n [ngClass]=\"'classification-' + item.classificationId\"\n ></p>\n {{ classification.getByItem(item).name }}\n </mapa-tag>\n </div>\n</ng-template>\n", styles: [".tooltip-info{display:flex;align-items:center}.tooltip-info strong{margin-right:2px}.tooltip-info h5{margin:0 5px 0 0;font-family:SF-Pro;font-size:14px;font-style:normal;font-weight:600}.tooltip-info--title{color:#50575e;font-family:SF Pro Display;font-size:14px;font-style:normal;font-weight:600}.tooltip-info--direction{padding-right:6px;font-family:SF-Pro;font-size:12px;font-style:normal;font-weight:600}.tooltip-info mapa-tag{color:#000}\n", ".classification-1{background-color:#073e92;color:#fff}.classification-2{background-color:#0e6ece;color:#fff}.classification-3{background-color:#2d9ced;color:#fff}.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}.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"] }]
|
|
540
541
|
}], ctorParameters: function () { return [{ type: CapabilityClassificationService }]; }, propDecorators: { type: [{
|
|
541
542
|
type: Input
|
|
542
543
|
}], item: [{
|
|
@@ -592,10 +593,10 @@ class MapaCapabilityExpandComponent {
|
|
|
592
593
|
}
|
|
593
594
|
}
|
|
594
595
|
MapaCapabilityExpandComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityExpandComponent, deps: [{ token: CapabilityClassificationService }], target: i0.ɵɵFactoryTarget.Component });
|
|
595
|
-
MapaCapabilityExpandComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaCapabilityExpandComponent, selector: "mapa-capability-expand", inputs: { data: "data" }, ngImport: i0, template: "<div class=\"capability__concept\">\n <div>\n <
|
|
596
|
+
MapaCapabilityExpandComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaCapabilityExpandComponent, selector: "mapa-capability-expand", inputs: { data: "data" }, ngImport: i0, template: "<div class=\"capability__concept\">\n <div class=\"capability__concept--content\">\n <div class=\"capability__concept--title\">Conceito</div>\n <div class=\"capability__concept--text\">\n {{ data.concept }}\n </div>\n </div>\n <div class=\"capability__concept--content\">\n <div class=\"capability__concept--title\">Resultado</div>\n <div class=\"capability__concept--text\">\n {{ data.result }}\n </div>\n </div>\n</div>\n<div class=\"capability__expanded\">\n <div *ngFor=\"let item of data.items\" class=\"capability__expanded--item\">\n <div class=\"name\">\n <div class=\"display-S\">{{ item.name }}</div>\n <mapa-tag size=\"small\">\n <mapa-capability-dot\n [item]=\"item\"\n ></mapa-capability-dot>\n {{ classification.getByItem(item).name }}\n </mapa-tag>\n </div>\n\n <p class=\"classificationName\">\n <strong *ngIf=\"!classification.getByItem(item).positive\">\u2198\uFE0E Dire\u00E7\u00E3o Negativa</strong> \n <strong *ngIf=\"classification.getByItem(item).positive\">\u2197 Dire\u00E7\u00E3o Positiva</strong>\n | {{ item.description }}\n </p>\n </div>\n</div>\n", styles: [".capability__concept{display:flex;flex:1 1 48%;gap:42px;margin:24px 0 60px}.capability__concept--content{width:48%}.capability__concept--title{color:#000;font-family:SF Pro Display;font-size:16px;font-style:normal;font-weight:600;line-height:24px;margin-bottom:8px}.capability__concept--text{color:#676767;font-family:SF-Pro;font-size:16px;font-style:normal;font-weight:400;line-height:24px}.capability__expanded{border-top:1px solid #CDCDCD;padding:36px 16px 16px;display:flex;flex-wrap:wrap;flex:0 0 30%;justify-content:flex-start;gap:30px}.capability__expanded--item{width:30%}.capability__expanded--item .name{display:flex;justify-content:space-between;margin-bottom:16px}.capability__expanded--item .classificationName{color:#8c8f94}.capability__expanded--item mapa-tag .mapa-tag--small{display:flex;align-items:center;gap:8px;padding:2px 8px 2px 3px!important;font-size:14px!important;font-style:normal;font-weight:400;height:18px}\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: TagComponent, selector: "mapa-tag", inputs: ["color", "size"] }, { kind: "component", type: MapaCapabilityDotComponent, selector: "mapa-capability-dot", inputs: ["type", "item", "tooltip", "capability"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
596
597
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityExpandComponent, decorators: [{
|
|
597
598
|
type: Component,
|
|
598
|
-
args: [{ selector: "mapa-capability-expand", encapsulation: ViewEncapsulation.None, template: "<div class=\"capability__concept\">\n <div>\n <
|
|
599
|
+
args: [{ selector: "mapa-capability-expand", encapsulation: ViewEncapsulation.None, template: "<div class=\"capability__concept\">\n <div class=\"capability__concept--content\">\n <div class=\"capability__concept--title\">Conceito</div>\n <div class=\"capability__concept--text\">\n {{ data.concept }}\n </div>\n </div>\n <div class=\"capability__concept--content\">\n <div class=\"capability__concept--title\">Resultado</div>\n <div class=\"capability__concept--text\">\n {{ data.result }}\n </div>\n </div>\n</div>\n<div class=\"capability__expanded\">\n <div *ngFor=\"let item of data.items\" class=\"capability__expanded--item\">\n <div class=\"name\">\n <div class=\"display-S\">{{ item.name }}</div>\n <mapa-tag size=\"small\">\n <mapa-capability-dot\n [item]=\"item\"\n ></mapa-capability-dot>\n {{ classification.getByItem(item).name }}\n </mapa-tag>\n </div>\n\n <p class=\"classificationName\">\n <strong *ngIf=\"!classification.getByItem(item).positive\">\u2198\uFE0E Dire\u00E7\u00E3o Negativa</strong> \n <strong *ngIf=\"classification.getByItem(item).positive\">\u2197 Dire\u00E7\u00E3o Positiva</strong>\n | {{ item.description }}\n </p>\n </div>\n</div>\n", styles: [".capability__concept{display:flex;flex:1 1 48%;gap:42px;margin:24px 0 60px}.capability__concept--content{width:48%}.capability__concept--title{color:#000;font-family:SF Pro Display;font-size:16px;font-style:normal;font-weight:600;line-height:24px;margin-bottom:8px}.capability__concept--text{color:#676767;font-family:SF-Pro;font-size:16px;font-style:normal;font-weight:400;line-height:24px}.capability__expanded{border-top:1px solid #CDCDCD;padding:36px 16px 16px;display:flex;flex-wrap:wrap;flex:0 0 30%;justify-content:flex-start;gap:30px}.capability__expanded--item{width:30%}.capability__expanded--item .name{display:flex;justify-content:space-between;margin-bottom:16px}.capability__expanded--item .classificationName{color:#8c8f94}.capability__expanded--item mapa-tag .mapa-tag--small{display:flex;align-items:center;gap:8px;padding:2px 8px 2px 3px!important;font-size:14px!important;font-style:normal;font-weight:400;height:18px}\n"] }]
|
|
599
600
|
}], ctorParameters: function () { return [{ type: CapabilityClassificationService }]; }, propDecorators: { data: [{
|
|
600
601
|
type: Input
|
|
601
602
|
}] } });
|
|
@@ -621,10 +622,10 @@ class MapaCapabilityIndicatorComponent {
|
|
|
621
622
|
}
|
|
622
623
|
}
|
|
623
624
|
MapaCapabilityIndicatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
624
|
-
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:#fff}.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}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
625
|
+
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:#fff}.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}.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"] }] });
|
|
625
626
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityIndicatorComponent, decorators: [{
|
|
626
627
|
type: Component,
|
|
627
|
-
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:#fff}.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}\n"] }]
|
|
628
|
+
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:#fff}.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}.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"] }]
|
|
628
629
|
}], propDecorators: { item: [{
|
|
629
630
|
type: Input
|
|
630
631
|
}], fullWidth: [{
|
|
@@ -646,6 +647,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
646
647
|
}] });
|
|
647
648
|
|
|
648
649
|
class MapaCapabilityIntervalComponent {
|
|
650
|
+
;
|
|
651
|
+
constructor() {
|
|
652
|
+
this.SVG = [
|
|
653
|
+
{ x: 0, y: 0.710938, width: 19.7594, height: 34.5789 },
|
|
654
|
+
{ x: 22.5039, y: 0.710938, width: 19.7594, height: 34.5789 },
|
|
655
|
+
{ x: 45.0078, y: 0.710938, width: 19.2105, height: 34.5789 },
|
|
656
|
+
{ x: 66.9629, y: 0.710938, width: 19.2105, height: 34.5789 },
|
|
657
|
+
{ x: 88.917, y: 0.710938, width: 19.2105, height: 34.5789 },
|
|
658
|
+
{ x: 110.872, y: 0.710938, width: 19.2105, height: 34.5789 },
|
|
659
|
+
{ x: 132.827, y: 0.710938, width: 19.2105, height: 34.5789 },
|
|
660
|
+
{ x: 154.782, y: 0.710938, width: 19.2105, height: 34.5789 },
|
|
661
|
+
{ x: 176.736, y: 0.710938, width: 19.7594, height: 34.5789 },
|
|
662
|
+
{ x: 199.24, y: 0.710938, width: 19.7594, height: 34.5789 },
|
|
663
|
+
];
|
|
664
|
+
this.hasTransform = false;
|
|
665
|
+
this.indexTransform = 0;
|
|
666
|
+
}
|
|
667
|
+
ngOnInit() {
|
|
668
|
+
const interval = this.data.interval || 0;
|
|
669
|
+
this.hasTransform = interval % 10 > 0;
|
|
670
|
+
this.indexTransform = (Math.floor(interval / 10) % 10);
|
|
671
|
+
this.paintLinear = `linear_${Md5.hashStr(`svg_${interval}`)}`;
|
|
672
|
+
}
|
|
649
673
|
getWidth(index) {
|
|
650
674
|
if (!this.data)
|
|
651
675
|
return 0;
|
|
@@ -657,13 +681,39 @@ class MapaCapabilityIntervalComponent {
|
|
|
657
681
|
? (interval % 10) * 10
|
|
658
682
|
: 0;
|
|
659
683
|
}
|
|
684
|
+
getFill(i) {
|
|
685
|
+
const width = this.getWidth(i);
|
|
686
|
+
if (width === 100)
|
|
687
|
+
return "#8C8F94";
|
|
688
|
+
return "#DCDCDE";
|
|
689
|
+
}
|
|
690
|
+
getFillGradient() {
|
|
691
|
+
return `url(#${this.paintLinear})`;
|
|
692
|
+
}
|
|
693
|
+
getTransform(i) {
|
|
694
|
+
const width = this.getWidth(i);
|
|
695
|
+
if (width === 0 || width === 100)
|
|
696
|
+
return "";
|
|
697
|
+
return `rotate(-180 ${this.SVG[i].x} ${this.SVG[i].y})`;
|
|
698
|
+
}
|
|
699
|
+
getStartOffset() {
|
|
700
|
+
const interval = this.data.interval || 0;
|
|
701
|
+
return Number(`0.${interval % 10}73005`);
|
|
702
|
+
}
|
|
703
|
+
getStopOffset() {
|
|
704
|
+
const interval = this.data.interval || 0;
|
|
705
|
+
return Number(`0.${interval % 10}73105`);
|
|
706
|
+
}
|
|
707
|
+
getGradientX() {
|
|
708
|
+
return Math.floor(this.SVG[this.indexTransform].x);
|
|
709
|
+
}
|
|
660
710
|
}
|
|
661
711
|
MapaCapabilityIntervalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityIntervalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
662
|
-
MapaCapabilityIntervalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaCapabilityIntervalComponent, selector: "mapa-capability-interval", inputs: { data: "data" }, ngImport: i0, template: "<ul class=\"capability__interval\">\n <li
|
|
712
|
+
MapaCapabilityIntervalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaCapabilityIntervalComponent, selector: "mapa-capability-interval", inputs: { data: "data" }, ngImport: i0, template: "<ul class=\"capability__interval\">\n <li\n class=\"capability__interval--item\"\n *ngFor=\"let block of SVG; let i = index\"\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"19.7594\"\n height=\"34.5789\"\n fill=\"none\"\n >\n <defs *ngIf=\"hasTransform && i === indexTransform\">\n <linearGradient [attr.id]=\"paintLinear\" gradientUnits=\"userSpaceOnUse\">\n <stop [attr.offset]=\"getStartOffset()\" stop-color=\"#8C8F94\"/>\n <stop [attr.offset]=\"getStopOffset()\" stop-color=\"#D9D9D9\"/> \n </linearGradient>\n </defs>\n <rect\n rx=\"6\"\n x=\"0\"\n y=\"0.710938\"\n [attr.width]=\"SVG[i].width\"\n [attr.height]=\"SVG[i].height\"\n [attr.fill]=\"getFill(i)\"\n />\n <rect\n *ngIf=\"hasTransform && i === indexTransform\"\n rx=\"6\"\n x=\"0\"\n y=\"0.710938\"\n [attr.width]=\"SVG[i].width\"\n [attr.height]=\"SVG[i].height\"\n [attr.fill]=\"getFillGradient()\"\n />\n </svg>\n </li>\n <li class=\"capability__interval--interval display-XG\">\n {{ data.interval }}\n </li>\n</ul>\n", styles: [".capability__interval{display:flex;align-items:center;list-style-type:none;margin-block-start:0px;margin-block-end:0px;padding-inline-start:0px}.capability__interval--interval{margin:0 0 0 16px}.capability__interval--item{border-radius:6px;margin-right:2px;width:21px;height:34.57px;position:relative}.capability__interval--item:last-of-type{margin-right:0}.capability__interval--percentage{background-color:#d9d9d9;height:34.57px}\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"] }] });
|
|
663
713
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityIntervalComponent, decorators: [{
|
|
664
714
|
type: Component,
|
|
665
|
-
args: [{ selector: "mapa-capability-interval", template: "<ul class=\"capability__interval\">\n <li
|
|
666
|
-
}], propDecorators: { data: [{
|
|
715
|
+
args: [{ selector: "mapa-capability-interval", template: "<ul class=\"capability__interval\">\n <li\n class=\"capability__interval--item\"\n *ngFor=\"let block of SVG; let i = index\"\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"19.7594\"\n height=\"34.5789\"\n fill=\"none\"\n >\n <defs *ngIf=\"hasTransform && i === indexTransform\">\n <linearGradient [attr.id]=\"paintLinear\" gradientUnits=\"userSpaceOnUse\">\n <stop [attr.offset]=\"getStartOffset()\" stop-color=\"#8C8F94\"/>\n <stop [attr.offset]=\"getStopOffset()\" stop-color=\"#D9D9D9\"/> \n </linearGradient>\n </defs>\n <rect\n rx=\"6\"\n x=\"0\"\n y=\"0.710938\"\n [attr.width]=\"SVG[i].width\"\n [attr.height]=\"SVG[i].height\"\n [attr.fill]=\"getFill(i)\"\n />\n <rect\n *ngIf=\"hasTransform && i === indexTransform\"\n rx=\"6\"\n x=\"0\"\n y=\"0.710938\"\n [attr.width]=\"SVG[i].width\"\n [attr.height]=\"SVG[i].height\"\n [attr.fill]=\"getFillGradient()\"\n />\n </svg>\n </li>\n <li class=\"capability__interval--interval display-XG\">\n {{ data.interval }}\n </li>\n</ul>\n", styles: [".capability__interval{display:flex;align-items:center;list-style-type:none;margin-block-start:0px;margin-block-end:0px;padding-inline-start:0px}.capability__interval--interval{margin:0 0 0 16px}.capability__interval--item{border-radius:6px;margin-right:2px;width:21px;height:34.57px;position:relative}.capability__interval--item:last-of-type{margin-right:0}.capability__interval--percentage{background-color:#d9d9d9;height:34.57px}\n"] }]
|
|
716
|
+
}], ctorParameters: function () { return []; }, propDecorators: { data: [{
|
|
667
717
|
type: Input
|
|
668
718
|
}] } });
|
|
669
719
|
|
|
@@ -741,10 +791,10 @@ class MapaCapabilityComparativeIndicatorComponent {
|
|
|
741
791
|
}
|
|
742
792
|
}
|
|
743
793
|
MapaCapabilityComparativeIndicatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityComparativeIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
744
|
-
MapaCapabilityComparativeIndicatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaCapabilityComparativeIndicatorComponent, selector: "mapa-capability-comparative-indicator", inputs: { item: "item", fullWidth: "fullWidth" }, ngImport: i0, template: "<div\n class=\"comparative-indicator\"\n [style.width]=\"fullWidth ? '100%' : getWidth(item)\"\n>\n <div class=\"comparative-indicator__interval\" *ngIf=\"item.interval\">\n {{ item.interval }}%\n </div>\n <div\n class=\"comparative-indicator__classification\"\n [ngClass]=\"'classification-' + item.classificationId\"\n *ngIf=\"item.classificationId\"\n ></div>\n</div>\n", styles: [".comparative-indicator{display:flex;flex-direction:column}.comparative-indicator__interval{font-size:12px;font-family:SF-Pro,sans-serif;text-align:center;width:100%}.comparative-indicator__classification{border-radius:16px;padding:2px 4px;height:24px}\n", ".classification-1{background-color:#073e92;color:#fff}.classification-2{background-color:#0e6ece;color:#fff}.classification-3{background-color:#2d9ced;color:#fff}.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}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
794
|
+
MapaCapabilityComparativeIndicatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaCapabilityComparativeIndicatorComponent, selector: "mapa-capability-comparative-indicator", inputs: { item: "item", fullWidth: "fullWidth" }, ngImport: i0, template: "<div\n class=\"comparative-indicator\"\n [style.width]=\"fullWidth ? '100%' : getWidth(item)\"\n>\n <div class=\"comparative-indicator__interval\" *ngIf=\"item.interval\">\n {{ item.interval }}%\n </div>\n <div\n class=\"comparative-indicator__classification\"\n [ngClass]=\"'classification-' + item.classificationId\"\n *ngIf=\"item.classificationId\"\n ></div>\n</div>\n", styles: [".comparative-indicator{display:flex;flex-direction:column}.comparative-indicator__interval{font-size:12px;font-family:SF-Pro,sans-serif;text-align:center;width:100%}.comparative-indicator__classification{border-radius:16px;padding:2px 4px;height:24px}\n", ".classification-1{background-color:#073e92;color:#fff}.classification-2{background-color:#0e6ece;color:#fff}.classification-3{background-color:#2d9ced;color:#fff}.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}.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"] }] });
|
|
745
795
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityComparativeIndicatorComponent, decorators: [{
|
|
746
796
|
type: Component,
|
|
747
|
-
args: [{ selector: "mapa-capability-comparative-indicator", template: "<div\n class=\"comparative-indicator\"\n [style.width]=\"fullWidth ? '100%' : getWidth(item)\"\n>\n <div class=\"comparative-indicator__interval\" *ngIf=\"item.interval\">\n {{ item.interval }}%\n </div>\n <div\n class=\"comparative-indicator__classification\"\n [ngClass]=\"'classification-' + item.classificationId\"\n *ngIf=\"item.classificationId\"\n ></div>\n</div>\n", styles: [".comparative-indicator{display:flex;flex-direction:column}.comparative-indicator__interval{font-size:12px;font-family:SF-Pro,sans-serif;text-align:center;width:100%}.comparative-indicator__classification{border-radius:16px;padding:2px 4px;height:24px}\n", ".classification-1{background-color:#073e92;color:#fff}.classification-2{background-color:#0e6ece;color:#fff}.classification-3{background-color:#2d9ced;color:#fff}.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}\n"] }]
|
|
797
|
+
args: [{ selector: "mapa-capability-comparative-indicator", template: "<div\n class=\"comparative-indicator\"\n [style.width]=\"fullWidth ? '100%' : getWidth(item)\"\n>\n <div class=\"comparative-indicator__interval\" *ngIf=\"item.interval\">\n {{ item.interval }}%\n </div>\n <div\n class=\"comparative-indicator__classification\"\n [ngClass]=\"'classification-' + item.classificationId\"\n *ngIf=\"item.classificationId\"\n ></div>\n</div>\n", styles: [".comparative-indicator{display:flex;flex-direction:column}.comparative-indicator__interval{font-size:12px;font-family:SF-Pro,sans-serif;text-align:center;width:100%}.comparative-indicator__classification{border-radius:16px;padding:2px 4px;height:24px}\n", ".classification-1{background-color:#073e92;color:#fff}.classification-2{background-color:#0e6ece;color:#fff}.classification-3{background-color:#2d9ced;color:#fff}.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}.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"] }]
|
|
748
798
|
}], propDecorators: { item: [{
|
|
749
799
|
type: Input
|
|
750
800
|
}], fullWidth: [{
|
|
@@ -899,10 +949,10 @@ class MapaCapabilityIntervalBarComponent {
|
|
|
899
949
|
}
|
|
900
950
|
}
|
|
901
951
|
MapaCapabilityIntervalBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityIntervalBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
902
|
-
MapaCapabilityIntervalBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaCapabilityIntervalBarComponent, selector: "mapa-capability-interval-bar", inputs: { data: "data" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<section
|
|
952
|
+
MapaCapabilityIntervalBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaCapabilityIntervalBarComponent, selector: "mapa-capability-interval-bar", inputs: { data: "data" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<section\n (mouseover)=\"onHover()\"\n (mouseout)=\"onMouseOut()\"\n reusable-outlet\n class=\"capability-interval\"\n>\n <section\n class=\"capability-interval__bar\"\n [ngClass]=\"{'capability-interval--hide': isHovering}\"\n >\n <mapa-capability-interval [data]=\"data\"></mapa-capability-interval>\n </section>\n <section\n class=\"capability-interval__show-more capability-interval--hide\"\n [ngClass]=\"{'capability-interval--show': isHovering}\"\n >\n <mapa-button color=\"basic\" (click)=\"showMore()\">Veja mais</mapa-button>\n </section>\n</section>\n", styles: [".capability-interval{position:relative;height:72px;width:327px}.capability-interval__bar{border:1px solid #DCDCDE;border-radius:16px;display:flex;align-items:center;justify-content:center;padding:0 16px;max-height:72px;height:100%}.capability-interval__show-more{display:flex;align-items:center;justify-content:flex-end;max-height:72px;height:100%}.capability-interval--hide{opacity:0;max-height:0}.capability-interval--show{opacity:1;max-height:72px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "mapa-button", inputs: ["color", "disabled"], outputs: ["clicked"] }, { kind: "component", type: MapaCapabilityIntervalComponent, selector: "mapa-capability-interval", inputs: ["data"] }] });
|
|
903
953
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityIntervalBarComponent, decorators: [{
|
|
904
954
|
type: Component,
|
|
905
|
-
args: [{ selector: "mapa-capability-interval-bar", template: "<section
|
|
955
|
+
args: [{ selector: "mapa-capability-interval-bar", template: "<section\n (mouseover)=\"onHover()\"\n (mouseout)=\"onMouseOut()\"\n reusable-outlet\n class=\"capability-interval\"\n>\n <section\n class=\"capability-interval__bar\"\n [ngClass]=\"{'capability-interval--hide': isHovering}\"\n >\n <mapa-capability-interval [data]=\"data\"></mapa-capability-interval>\n </section>\n <section\n class=\"capability-interval__show-more capability-interval--hide\"\n [ngClass]=\"{'capability-interval--show': isHovering}\"\n >\n <mapa-button color=\"basic\" (click)=\"showMore()\">Veja mais</mapa-button>\n </section>\n</section>\n", styles: [".capability-interval{position:relative;height:72px;width:327px}.capability-interval__bar{border:1px solid #DCDCDE;border-radius:16px;display:flex;align-items:center;justify-content:center;padding:0 16px;max-height:72px;height:100%}.capability-interval__show-more{display:flex;align-items:center;justify-content:flex-end;max-height:72px;height:100%}.capability-interval--hide{opacity:0;max-height:0}.capability-interval--show{opacity:1;max-height:72px}\n"] }]
|
|
906
956
|
}], propDecorators: { data: [{
|
|
907
957
|
type: Input
|
|
908
958
|
}], clicked: [{
|
|
@@ -927,10 +977,10 @@ class MapaCapabilityDetailComponent {
|
|
|
927
977
|
}
|
|
928
978
|
}
|
|
929
979
|
MapaCapabilityDetailComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
930
|
-
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>\n <
|
|
980
|
+
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:last-child{border-bottom:unset}.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:#fff}.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}.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 });
|
|
931
981
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityDetailComponent, decorators: [{
|
|
932
982
|
type: Component,
|
|
933
|
-
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>\n <
|
|
983
|
+
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:last-child{border-bottom:unset}.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:#fff}.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}.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"] }]
|
|
934
984
|
}], propDecorators: { data: [{
|
|
935
985
|
type: Input
|
|
936
986
|
}] } });
|
|
@@ -1095,10 +1145,10 @@ class MapaCapabilityIndicatorListComponent {
|
|
|
1095
1145
|
}
|
|
1096
1146
|
}
|
|
1097
1147
|
MapaCapabilityIndicatorListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityIndicatorListComponent, deps: [{ token: CapabilityClassificationService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1098
|
-
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:#fff}.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}\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"] }] });
|
|
1148
|
+
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:#fff}.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}.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"] }] });
|
|
1099
1149
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityIndicatorListComponent, decorators: [{
|
|
1100
1150
|
type: Component,
|
|
1101
|
-
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:#fff}.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}\n"] }]
|
|
1151
|
+
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:#fff}.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}.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"] }]
|
|
1102
1152
|
}], ctorParameters: function () { return [{ type: CapabilityClassificationService }]; }, propDecorators: { data: [{
|
|
1103
1153
|
type: Input
|
|
1104
1154
|
}] } });
|
|
@@ -1130,10 +1180,10 @@ class MapaCapabilityIndicatorChartComponent {
|
|
|
1130
1180
|
}
|
|
1131
1181
|
}
|
|
1132
1182
|
MapaCapabilityIndicatorChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityIndicatorChartComponent, deps: [{ token: CapabilityClassificationService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1133
|
-
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__column--description{width:1%;white-space:nowrap;padding-right:24px}.indicator-chart__column--negative{display:flex;justify-content:flex-end}.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:#fff}.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}\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 });
|
|
1183
|
+
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__column--description{width:1%;white-space:nowrap;padding-right:24px}.indicator-chart__column--negative{display:flex;justify-content:flex-end}.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:#fff}.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}.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 });
|
|
1134
1184
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityIndicatorChartComponent, decorators: [{
|
|
1135
1185
|
type: Component,
|
|
1136
|
-
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__column--description{width:1%;white-space:nowrap;padding-right:24px}.indicator-chart__column--negative{display:flex;justify-content:flex-end}.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:#fff}.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}\n"] }]
|
|
1186
|
+
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__column--description{width:1%;white-space:nowrap;padding-right:24px}.indicator-chart__column--negative{display:flex;justify-content:flex-end}.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:#fff}.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}.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"] }]
|
|
1137
1187
|
}], ctorParameters: function () { return [{ type: CapabilityClassificationService }]; }, propDecorators: { data: [{
|
|
1138
1188
|
type: Input
|
|
1139
1189
|
}] } });
|