mapa-library-ui 0.21.0 → 0.21.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2020/src/lib/components/capability/lib/components/capability/src/capability-detail/capability-detail.component.mjs +2 -2
- 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-interval-bar/capability-interval-bar.component.mjs +23 -4
- package/fesm2015/mapa-library-ui-src-lib-components-capability.mjs +24 -6
- package/fesm2015/mapa-library-ui-src-lib-components-capability.mjs.map +1 -1
- package/fesm2020/mapa-library-ui-src-lib-components-capability.mjs +24 -6
- package/fesm2020/mapa-library-ui-src-lib-components-capability.mjs.map +1 -1
- package/mapa-library-ui-0.21.2.tgz +0 -0
- package/package.json +1 -1
- package/src/lib/components/capability/lib/components/capability/src/capability-interval-bar/capability-interval-bar.component.d.ts +4 -2
- package/mapa-library-ui-0.21.0.tgz +0 -0
|
@@ -32,10 +32,10 @@ export class MapaCapabilityDetailComponent {
|
|
|
32
32
|
}
|
|
33
33
|
}
|
|
34
34
|
MapaCapabilityDetailComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityDetailComponent, deps: [{ token: i1.CapabilityClassificationService }], target: i0.ɵɵFactoryTarget.Component });
|
|
35
|
-
MapaCapabilityDetailComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaCapabilityDetailComponent, selector: "mapa-capability-detail", inputs: { data: "data", showTagInterval: "showTagInterval" }, ngImport: i0, template: "<section class=\"capability\">\n <div class=\"capability__core\">\n <div\n *ngFor=\"let capability of data; let i = index\"\n class=\"capability__item\"\n >\n <div class=\"capability__item--header\">\n <div class=\"capability__item--title-dots\">\n <div class=\"capability__item--title display-L\">\n {{ capability.name }}\n <span class=\"capability__item--title-tag\" *ngIf=\"showTagInterval\">\n <mapa-tag size=\"small\">\n <mapa-capability-dot\n [item]=\"capability\"\n [capability]=\"capability\"\n ></mapa-capability-dot>\n\n {{ classification.getByItem(capability).name }}\n </mapa-tag>\n </span>\n </div>\n\n <div class=\"capability__item--dots\">\n <mapa-capability-dot\n *ngFor=\"let item of sortItemsByinterval(capability.items)\"\n type=\"small\"\n [item]=\"item\"\n [capability]=\"capability\"\n [tooltip]=\"true\"\n ></mapa-capability-dot>\n </div>\n </div>\n\n <div [class.capability__item--interval]=\"showTagInterval\">\n <mapa-capability-interval-bar\n [data]=\"capability\"\n [expanded]=\"expanded.has(i)\"\n [showInterval]=\"!showTagInterval\"\n (clicked)=\"showMore(i)\"\n reusable-interval-bar\n ></mapa-capability-interval-bar>\n </div>\n </div>\n <div\n [class.capability__item--show]=\"expanded.has(i)\"\n [class.capability__item--hide]=\"!expanded.has(i)\"\n >\n <mapa-capability-expand [data]=\"capability\"></mapa-capability-expand>\n </div>\n </div>\n </div>\n</section>\n", 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
|
|
35
|
+
MapaCapabilityDetailComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaCapabilityDetailComponent, selector: "mapa-capability-detail", inputs: { data: "data", showTagInterval: "showTagInterval" }, ngImport: i0, template: "<section class=\"capability\">\n <div class=\"capability__core\">\n <div\n *ngFor=\"let capability of data; let i = index\"\n class=\"capability__item\"\n >\n <div class=\"capability__item--header\">\n <div class=\"capability__item--title-dots\">\n <div class=\"capability__item--title display-L\">\n {{ capability.name }}\n <span class=\"capability__item--title-tag\" *ngIf=\"showTagInterval\">\n <mapa-tag size=\"small\">\n <mapa-capability-dot\n [item]=\"capability\"\n [capability]=\"capability\"\n ></mapa-capability-dot>\n\n {{ classification.getByItem(capability).name }}\n </mapa-tag>\n </span>\n </div>\n\n <div class=\"capability__item--dots\">\n <mapa-capability-dot\n *ngFor=\"let item of sortItemsByinterval(capability.items)\"\n type=\"small\"\n [item]=\"item\"\n [capability]=\"capability\"\n [tooltip]=\"true\"\n ></mapa-capability-dot>\n </div>\n </div>\n\n <div [class.capability__item--interval]=\"showTagInterval\">\n <mapa-capability-interval-bar\n [data]=\"capability\"\n [expanded]=\"expanded.has(i)\"\n [showInterval]=\"!showTagInterval\"\n (clicked)=\"showMore(i)\"\n reusable-interval-bar\n ></mapa-capability-interval-bar>\n </div>\n </div>\n <div\n [class.capability__item--show]=\"expanded.has(i)\"\n [class.capability__item--hide]=\"!expanded.has(i)\"\n >\n <mapa-capability-expand [data]=\"capability\"></mapa-capability-expand>\n </div>\n </div>\n </div>\n</section>\n", 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>*{display:none!important;opacity:0!important;max-height:0!important;height:0!important;margin:0!important;padding:0!important;flex:0}.capability__item--show{opacity:1;max-height:100%;height:100%}.capability__item--header{display:flex;align-items:center;justify-content:space-between}.capability__item--title{display:flex;align-items:center}.capability__item--title-tag{margin-left:34px}.capability__item--title-dots{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;height:72px}.capability__item--title-dots .display-L{margin-bottom:10px}.capability__item--dots{display:flex}.capability__item--dots mapa-capability-dot .tooltip-dot{padding:8px 8px 8px 0}.capability__item--interval mapa-capability-interval-bar .capability-interval{width:267px}\n", ".classification-1{background-color:#073e92;color:#fff}.classification-2{background-color:#0e6ece;color:#fff}.classification-3{background-color:#2d9ced;color:#000}.classification-4{background-color:#68ceee;color:#000}.classification-5{background-color:#96f2ee;color:#000}.classification-6{background-color:#f598a7;color:#000}.classification-7{background-color:#f56580;color:#000}.classification-8{background-color:#f4284e;color:#fff}.classification-9{background-color:#c11c2f;color:#fff}.small-dot{width:12px;height:12px;border-radius:12px;padding:0;margin:0}.dot{width:16px;height:16px;border-radius:16px;padding:0;margin:0}.indicator{display:flex;padding:2px 4px 2px 16px;justify-content:space-between;align-items:center;border-radius:8px;font-family:SF-Pro;font-size:16px;font-style:normal;font-weight:400}.display-S{font-family:SF-Pro;font-size:20px;font-style:normal;font-weight:400}.display-L{font-family:SF-Pro;font-size:32px;font-style:normal;font-weight:400}.display-XG{font-family:SF-Pro;font-size:48px;font-style:normal;font-weight:400}*{transition:opacity .4s ease-out,max-height .4s ease-out}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MapaCapabilityDotComponent, selector: "mapa-capability-dot", inputs: ["type", "item", "tooltip", "capability"] }, { kind: "component", type: i4.MapaCapabilityIntervalBarComponent, selector: "mapa-capability-interval-bar", inputs: ["data", "expanded", "showInterval"], outputs: ["clicked"] }, { kind: "component", type: i5.MapaCapabilityExpandComponent, selector: "mapa-capability-expand", inputs: ["data"] }, { kind: "component", type: i6.TagComponent, selector: "mapa-tag", inputs: ["color", "size"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
36
36
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityDetailComponent, decorators: [{
|
|
37
37
|
type: Component,
|
|
38
|
-
args: [{ selector: "mapa-capability-detail", encapsulation: ViewEncapsulation.None, template: "<section class=\"capability\">\n <div class=\"capability__core\">\n <div\n *ngFor=\"let capability of data; let i = index\"\n class=\"capability__item\"\n >\n <div class=\"capability__item--header\">\n <div class=\"capability__item--title-dots\">\n <div class=\"capability__item--title display-L\">\n {{ capability.name }}\n <span class=\"capability__item--title-tag\" *ngIf=\"showTagInterval\">\n <mapa-tag size=\"small\">\n <mapa-capability-dot\n [item]=\"capability\"\n [capability]=\"capability\"\n ></mapa-capability-dot>\n\n {{ classification.getByItem(capability).name }}\n </mapa-tag>\n </span>\n </div>\n\n <div class=\"capability__item--dots\">\n <mapa-capability-dot\n *ngFor=\"let item of sortItemsByinterval(capability.items)\"\n type=\"small\"\n [item]=\"item\"\n [capability]=\"capability\"\n [tooltip]=\"true\"\n ></mapa-capability-dot>\n </div>\n </div>\n\n <div [class.capability__item--interval]=\"showTagInterval\">\n <mapa-capability-interval-bar\n [data]=\"capability\"\n [expanded]=\"expanded.has(i)\"\n [showInterval]=\"!showTagInterval\"\n (clicked)=\"showMore(i)\"\n reusable-interval-bar\n ></mapa-capability-interval-bar>\n </div>\n </div>\n <div\n [class.capability__item--show]=\"expanded.has(i)\"\n [class.capability__item--hide]=\"!expanded.has(i)\"\n >\n <mapa-capability-expand [data]=\"capability\"></mapa-capability-expand>\n </div>\n </div>\n </div>\n</section>\n", 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
|
|
38
|
+
args: [{ selector: "mapa-capability-detail", encapsulation: ViewEncapsulation.None, template: "<section class=\"capability\">\n <div class=\"capability__core\">\n <div\n *ngFor=\"let capability of data; let i = index\"\n class=\"capability__item\"\n >\n <div class=\"capability__item--header\">\n <div class=\"capability__item--title-dots\">\n <div class=\"capability__item--title display-L\">\n {{ capability.name }}\n <span class=\"capability__item--title-tag\" *ngIf=\"showTagInterval\">\n <mapa-tag size=\"small\">\n <mapa-capability-dot\n [item]=\"capability\"\n [capability]=\"capability\"\n ></mapa-capability-dot>\n\n {{ classification.getByItem(capability).name }}\n </mapa-tag>\n </span>\n </div>\n\n <div class=\"capability__item--dots\">\n <mapa-capability-dot\n *ngFor=\"let item of sortItemsByinterval(capability.items)\"\n type=\"small\"\n [item]=\"item\"\n [capability]=\"capability\"\n [tooltip]=\"true\"\n ></mapa-capability-dot>\n </div>\n </div>\n\n <div [class.capability__item--interval]=\"showTagInterval\">\n <mapa-capability-interval-bar\n [data]=\"capability\"\n [expanded]=\"expanded.has(i)\"\n [showInterval]=\"!showTagInterval\"\n (clicked)=\"showMore(i)\"\n reusable-interval-bar\n ></mapa-capability-interval-bar>\n </div>\n </div>\n <div\n [class.capability__item--show]=\"expanded.has(i)\"\n [class.capability__item--hide]=\"!expanded.has(i)\"\n >\n <mapa-capability-expand [data]=\"capability\"></mapa-capability-expand>\n </div>\n </div>\n </div>\n</section>\n", 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>*{display:none!important;opacity:0!important;max-height:0!important;height:0!important;margin:0!important;padding:0!important;flex:0}.capability__item--show{opacity:1;max-height:100%;height:100%}.capability__item--header{display:flex;align-items:center;justify-content:space-between}.capability__item--title{display:flex;align-items:center}.capability__item--title-tag{margin-left:34px}.capability__item--title-dots{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;height:72px}.capability__item--title-dots .display-L{margin-bottom:10px}.capability__item--dots{display:flex}.capability__item--dots mapa-capability-dot .tooltip-dot{padding:8px 8px 8px 0}.capability__item--interval mapa-capability-interval-bar .capability-interval{width:267px}\n", ".classification-1{background-color:#073e92;color:#fff}.classification-2{background-color:#0e6ece;color:#fff}.classification-3{background-color:#2d9ced;color:#000}.classification-4{background-color:#68ceee;color:#000}.classification-5{background-color:#96f2ee;color:#000}.classification-6{background-color:#f598a7;color:#000}.classification-7{background-color:#f56580;color:#000}.classification-8{background-color:#f4284e;color:#fff}.classification-9{background-color:#c11c2f;color:#fff}.small-dot{width:12px;height:12px;border-radius:12px;padding:0;margin:0}.dot{width:16px;height:16px;border-radius:16px;padding:0;margin:0}.indicator{display:flex;padding:2px 4px 2px 16px;justify-content:space-between;align-items:center;border-radius:8px;font-family:SF-Pro;font-size:16px;font-style:normal;font-weight:400}.display-S{font-family:SF-Pro;font-size:20px;font-style:normal;font-weight:400}.display-L{font-family:SF-Pro;font-size:32px;font-style:normal;font-weight:400}.display-XG{font-family:SF-Pro;font-size:48px;font-style:normal;font-weight:400}*{transition:opacity .4s ease-out,max-height .4s ease-out}\n"] }]
|
|
39
39
|
}], ctorParameters: function () { return [{ type: i1.CapabilityClassificationService }]; }, propDecorators: { data: [{
|
|
40
40
|
type: Input
|
|
41
41
|
}], showTagInterval: [{
|
|
@@ -10,11 +10,11 @@ export class MapaCapabilityExpandComponent {
|
|
|
10
10
|
}
|
|
11
11
|
}
|
|
12
12
|
MapaCapabilityExpandComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityExpandComponent, deps: [{ token: i1.CapabilityClassificationService }], target: i0.ɵɵFactoryTarget.Component });
|
|
13
|
-
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.capabilityConcept?.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.capabilityConcept?.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=\"
|
|
13
|
+
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\" *ngIf=\"data.capabilityConcept?.concept\">\n <div class=\"capability__concept--title\">Conceito</div>\n <div class=\"capability__concept--text\">\n {{ data.capabilityConcept?.concept! }}\n </div>\n </div>\n <div class=\"capability__concept--content\" *ngIf=\"data.capabilityConcept?.result\">\n <div class=\"capability__concept--title\">Resultado</div>\n <div class=\"capability__concept--text\">\n {{ data.capabilityConcept?.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=\"capability__expanded--name\">\n <span *ngIf=\"!item.description\">\n <strong *ngIf=\"!classification.getByItem(item).positive\">\u2198\uFE0E </strong> \n <strong *ngIf=\"classification.getByItem(item).positive\">\u2197 </strong>\n </span>\n {{ item.name }}\n </div>\n <mapa-tag size=\"small\" class=\"capability__expanded--tag\">\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\" *ngIf=\"item.description\">\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: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.TagComponent, selector: "mapa-tag", inputs: ["color", "size"] }, { kind: "component", type: i4.MapaCapabilityDotComponent, selector: "mapa-capability-dot", inputs: ["type", "item", "tooltip", "capability"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
14
14
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityExpandComponent, decorators: [{
|
|
15
15
|
type: Component,
|
|
16
|
-
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.capabilityConcept?.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.capabilityConcept?.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=\"
|
|
16
|
+
args: [{ selector: "mapa-capability-expand", encapsulation: ViewEncapsulation.None, template: "<div class=\"capability__concept\">\n <div class=\"capability__concept--content\" *ngIf=\"data.capabilityConcept?.concept\">\n <div class=\"capability__concept--title\">Conceito</div>\n <div class=\"capability__concept--text\">\n {{ data.capabilityConcept?.concept! }}\n </div>\n </div>\n <div class=\"capability__concept--content\" *ngIf=\"data.capabilityConcept?.result\">\n <div class=\"capability__concept--title\">Resultado</div>\n <div class=\"capability__concept--text\">\n {{ data.capabilityConcept?.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=\"capability__expanded--name\">\n <span *ngIf=\"!item.description\">\n <strong *ngIf=\"!classification.getByItem(item).positive\">\u2198\uFE0E </strong> \n <strong *ngIf=\"classification.getByItem(item).positive\">\u2197 </strong>\n </span>\n {{ item.name }}\n </div>\n <mapa-tag size=\"small\" class=\"capability__expanded--tag\">\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\" *ngIf=\"item.description\">\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"] }]
|
|
17
17
|
}], ctorParameters: function () { return [{ type: i1.CapabilityClassificationService }]; }, propDecorators: { data: [{
|
|
18
18
|
type: Input
|
|
19
19
|
}] } });
|
|
20
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
20
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2FwYWJpbGl0eS1leHBhbmQuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbWFwYS1saWJyYXJ5LXVpL3NyYy9saWIvY29tcG9uZW50cy9jYXBhYmlsaXR5L3NyYy9jYXBhYmlsaXR5LWV4cGFuZC9jYXBhYmlsaXR5LWV4cGFuZC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9tYXBhLWxpYnJhcnktdWkvc3JjL2xpYi9jb21wb25lbnRzL2NhcGFiaWxpdHkvc3JjL2NhcGFiaWxpdHktZXhwYW5kL2NhcGFiaWxpdHktZXhwYW5kLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sZUFBZSxDQUFDOzs7Ozs7QUFXcEUsTUFBTSxPQUFPLDZCQUE2QjtJQUd4QyxZQUFtQixjQUErQztRQUEvQyxtQkFBYyxHQUFkLGNBQWMsQ0FBaUM7SUFBRyxDQUFDOzsySEFIM0QsNkJBQTZCOytHQUE3Qiw2QkFBNkIsd0ZDWDFDLDhtREF1Q0E7NEZENUJhLDZCQUE2QjtrQkFOekMsU0FBUzsrQkFDRSx3QkFBd0IsaUJBR25CLGlCQUFpQixDQUFDLElBQUk7c0hBRzVCLElBQUk7c0JBQVosS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgSW5wdXQsIFZpZXdFbmNhcHN1bGF0aW9uIH0gZnJvbSBcIkBhbmd1bGFyL2NvcmVcIjtcblxuaW1wb3J0IHsgQ2FwYWJpbGl0eSB9IGZyb20gXCIuLi9lc3NlbnRpYWxzL2ludGVyZmFjZXMvY2FwYWJpbGl0eS5pbnRlcmZhY2VcIjtcbmltcG9ydCB7IENhcGFiaWxpdHlDbGFzc2lmaWNhdGlvblNlcnZpY2UgfSBmcm9tIFwiLi4vZXNzZW50aWFscy9zZXJ2aWNlcy9jYXBhYmlsaXR5LWNsYXNzaWZpY2F0aW9uLnNlcnZpY2VcIjtcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiBcIm1hcGEtY2FwYWJpbGl0eS1leHBhbmRcIixcbiAgdGVtcGxhdGVVcmw6IFwiLi9jYXBhYmlsaXR5LWV4cGFuZC5jb21wb25lbnQuaHRtbFwiLFxuICBzdHlsZVVybHM6IFtcIi4vY2FwYWJpbGl0eS1leHBhbmQuY29tcG9uZW50LnNjc3NcIl0sXG4gIGVuY2Fwc3VsYXRpb246IFZpZXdFbmNhcHN1bGF0aW9uLk5vbmUsXG59KVxuZXhwb3J0IGNsYXNzIE1hcGFDYXBhYmlsaXR5RXhwYW5kQ29tcG9uZW50IHtcbiAgQElucHV0KCkgZGF0YSE6IENhcGFiaWxpdHk7XG4gIFxuICBjb25zdHJ1Y3RvcihwdWJsaWMgY2xhc3NpZmljYXRpb246IENhcGFiaWxpdHlDbGFzc2lmaWNhdGlvblNlcnZpY2UpIHt9XG59XG4iLCI8ZGl2IGNsYXNzPVwiY2FwYWJpbGl0eV9fY29uY2VwdFwiPlxuICA8ZGl2IGNsYXNzPVwiY2FwYWJpbGl0eV9fY29uY2VwdC0tY29udGVudFwiICpuZ0lmPVwiZGF0YS5jYXBhYmlsaXR5Q29uY2VwdD8uY29uY2VwdFwiPlxuICAgIDxkaXYgY2xhc3M9XCJjYXBhYmlsaXR5X19jb25jZXB0LS10aXRsZVwiPkNvbmNlaXRvPC9kaXY+XG4gICAgPGRpdiBjbGFzcz1cImNhcGFiaWxpdHlfX2NvbmNlcHQtLXRleHRcIj5cbiAgICAgIHt7IGRhdGEuY2FwYWJpbGl0eUNvbmNlcHQ/LmNvbmNlcHQhIH19XG4gICAgPC9kaXY+XG4gIDwvZGl2PlxuICA8ZGl2IGNsYXNzPVwiY2FwYWJpbGl0eV9fY29uY2VwdC0tY29udGVudFwiICpuZ0lmPVwiZGF0YS5jYXBhYmlsaXR5Q29uY2VwdD8ucmVzdWx0XCI+XG4gICAgPGRpdiBjbGFzcz1cImNhcGFiaWxpdHlfX2NvbmNlcHQtLXRpdGxlXCI+UmVzdWx0YWRvPC9kaXY+XG4gICAgPGRpdiBjbGFzcz1cImNhcGFiaWxpdHlfX2NvbmNlcHQtLXRleHRcIj5cbiAgICAgIHt7IGRhdGEuY2FwYWJpbGl0eUNvbmNlcHQ/LnJlc3VsdCEgfX1cbiAgICA8L2Rpdj5cbiAgPC9kaXY+XG48L2Rpdj5cbjxkaXYgY2xhc3M9XCJjYXBhYmlsaXR5X19leHBhbmRlZFwiPlxuICA8ZGl2ICpuZ0Zvcj1cImxldCBpdGVtIG9mIGRhdGEuaXRlbXNcIiBjbGFzcz1cImNhcGFiaWxpdHlfX2V4cGFuZGVkLS1pdGVtXCI+XG4gICAgPGRpdiBjbGFzcz1cIm5hbWVcIj5cbiAgICAgIDxkaXYgY2xhc3M9XCJjYXBhYmlsaXR5X19leHBhbmRlZC0tbmFtZVwiPlxuICAgICAgICA8c3BhbiAqbmdJZj1cIiFpdGVtLmRlc2NyaXB0aW9uXCI+XG4gICAgICAgICAgPHN0cm9uZyAqbmdJZj1cIiFjbGFzc2lmaWNhdGlvbi5nZXRCeUl0ZW0oaXRlbSkucG9zaXRpdmVcIj7ihpjvuI4gPC9zdHJvbmc+IFxuICAgICAgICAgIDxzdHJvbmcgKm5nSWY9XCJjbGFzc2lmaWNhdGlvbi5nZXRCeUl0ZW0oaXRlbSkucG9zaXRpdmVcIj7ihpcgPC9zdHJvbmc+XG4gICAgICAgIDwvc3Bhbj5cbiAgICAgICAge3sgaXRlbS5uYW1lIH19XG4gICAgICA8L2Rpdj5cbiAgICAgIDxtYXBhLXRhZyBzaXplPVwic21hbGxcIiBjbGFzcz1cImNhcGFiaWxpdHlfX2V4cGFuZGVkLS10YWdcIj5cbiAgICAgICAgPG1hcGEtY2FwYWJpbGl0eS1kb3RcbiAgICAgICAgICBbaXRlbV09XCJpdGVtXCJcbiAgICAgICAgPjwvbWFwYS1jYXBhYmlsaXR5LWRvdD5cbiAgICAgICAge3sgY2xhc3NpZmljYXRpb24uZ2V0QnlJdGVtKGl0ZW0pLm5hbWUgfX1cbiAgICAgIDwvbWFwYS10YWc+XG4gICAgPC9kaXY+XG5cbiAgICA8cCBjbGFzcz1cImNsYXNzaWZpY2F0aW9uTmFtZVwiICpuZ0lmPVwiaXRlbS5kZXNjcmlwdGlvblwiPlxuICAgICAgPHN0cm9uZyAqbmdJZj1cIiFjbGFzc2lmaWNhdGlvbi5nZXRCeUl0ZW0oaXRlbSkucG9zaXRpdmVcIj7ihpjvuI4gRGlyZcOnw6NvIE5lZ2F0aXZhPC9zdHJvbmc+IFxuICAgICAgPHN0cm9uZyAqbmdJZj1cImNsYXNzaWZpY2F0aW9uLmdldEJ5SXRlbShpdGVtKS5wb3NpdGl2ZVwiPuKGlyBEaXJlw6fDo28gUG9zaXRpdmE8L3N0cm9uZz5cbiAgICAgIHwge3sgaXRlbS5kZXNjcmlwdGlvbiB9fVxuICAgIDwvcD5cbiAgPC9kaXY+XG48L2Rpdj5cbiJdfQ==
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import { Component, EventEmitter, Input, Output } from "@angular/core";
|
|
1
|
+
import { Component, EventEmitter, Input, Output, ViewEncapsulation } from "@angular/core";
|
|
2
|
+
import { Md5 } from "ts-md5";
|
|
2
3
|
import * as i0 from "@angular/core";
|
|
3
4
|
import * as i1 from "@angular/common";
|
|
4
5
|
import * as i2 from "../../../button/src/button.component";
|
|
@@ -12,6 +13,24 @@ export class MapaCapabilityIntervalBarComponent {
|
|
|
12
13
|
this.isClicked = !this.isClicked;
|
|
13
14
|
});
|
|
14
15
|
}
|
|
16
|
+
ngOnInit() {
|
|
17
|
+
if (this.data) {
|
|
18
|
+
this.id = `capability-interval__${Md5.hashStr(this.data.name + "_" + Math.random().toString())}`;
|
|
19
|
+
setTimeout(() => {
|
|
20
|
+
const object = document.getElementById(this.id);
|
|
21
|
+
object.addEventListener("mouseenter", (e) => {
|
|
22
|
+
this.onHover();
|
|
23
|
+
}, {
|
|
24
|
+
passive: true,
|
|
25
|
+
});
|
|
26
|
+
object.addEventListener("mouseleave", (e) => {
|
|
27
|
+
this.onMouseOut();
|
|
28
|
+
}, {
|
|
29
|
+
passive: true,
|
|
30
|
+
});
|
|
31
|
+
}, 100);
|
|
32
|
+
}
|
|
33
|
+
}
|
|
15
34
|
onHover() {
|
|
16
35
|
this.isHovering = true;
|
|
17
36
|
}
|
|
@@ -23,10 +42,10 @@ export class MapaCapabilityIntervalBarComponent {
|
|
|
23
42
|
}
|
|
24
43
|
}
|
|
25
44
|
MapaCapabilityIntervalBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityIntervalBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
26
|
-
MapaCapabilityIntervalBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaCapabilityIntervalBarComponent, selector: "mapa-capability-interval-bar", inputs: { data: "data", expanded: "expanded", showInterval: "showInterval" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<section\n
|
|
45
|
+
MapaCapabilityIntervalBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaCapabilityIntervalBarComponent, selector: "mapa-capability-interval-bar", inputs: { data: "data", expanded: "expanded", showInterval: "showInterval" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<section\n reusable-outlet\n class=\"capability-interval\"\n [id]=\"id\"\n>\n <section\n class=\"capability-interval__bar\"\n [ngClass]=\"{'capability-interval--hide': isHovering}\"\n >\n <mapa-capability-interval [data]=\"data\" [showInterval]=\"showInterval\"></mapa-capability-interval>\n </section>\n <section\n class=\"capability-interval__show-more\"\n [class.capability-interval--hide]=\"!isHovering\"\n [class.capability-interval--show]=\"isHovering\"\n >\n <mapa-button color=\"basic\" (click)=\"showMore()\">{{ expanded ? 'Ver menos' : 'Veja mais' }}</mapa-button>\n </section>\n</section>\n", styles: [".capability-interval{display:block;position:relative;height:72px;width:327px}.capability-interval__bar{border:1px solid #DCDCDE;border-radius:16px;display:flex;align-items:center;justify-content:center;padding:0 16px;max-height:72px;height:100%}.capability-interval__show-more{display:flex;align-items:center;justify-content:flex-end;max-height:72px;height:100%;width:100%}.capability-interval__show-more mapa-button,.capability-interval__show-more button{width:100%;justify-content:flex-end!important}.capability-interval--hide{opacity:0;max-height:0}.capability-interval--hide>*{opacity:0;max-height:0}.capability-interval--show{opacity:1;max-height:72px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.ButtonComponent, selector: "mapa-button", inputs: ["color", "disabled"], outputs: ["clicked"] }, { kind: "component", type: i3.MapaCapabilityIntervalComponent, selector: "mapa-capability-interval", inputs: ["data", "showInterval"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
27
46
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityIntervalBarComponent, decorators: [{
|
|
28
47
|
type: Component,
|
|
29
|
-
args: [{ selector: "mapa-capability-interval-bar", template: "<section\n
|
|
48
|
+
args: [{ selector: "mapa-capability-interval-bar", encapsulation: ViewEncapsulation.None, template: "<section\n reusable-outlet\n class=\"capability-interval\"\n [id]=\"id\"\n>\n <section\n class=\"capability-interval__bar\"\n [ngClass]=\"{'capability-interval--hide': isHovering}\"\n >\n <mapa-capability-interval [data]=\"data\" [showInterval]=\"showInterval\"></mapa-capability-interval>\n </section>\n <section\n class=\"capability-interval__show-more\"\n [class.capability-interval--hide]=\"!isHovering\"\n [class.capability-interval--show]=\"isHovering\"\n >\n <mapa-button color=\"basic\" (click)=\"showMore()\">{{ expanded ? 'Ver menos' : 'Veja mais' }}</mapa-button>\n </section>\n</section>\n", styles: [".capability-interval{display:block;position:relative;height:72px;width:327px}.capability-interval__bar{border:1px solid #DCDCDE;border-radius:16px;display:flex;align-items:center;justify-content:center;padding:0 16px;max-height:72px;height:100%}.capability-interval__show-more{display:flex;align-items:center;justify-content:flex-end;max-height:72px;height:100%;width:100%}.capability-interval__show-more mapa-button,.capability-interval__show-more button{width:100%;justify-content:flex-end!important}.capability-interval--hide{opacity:0;max-height:0}.capability-interval--hide>*{opacity:0;max-height:0}.capability-interval--show{opacity:1;max-height:72px}\n"] }]
|
|
30
49
|
}], ctorParameters: function () { return []; }, propDecorators: { data: [{
|
|
31
50
|
type: Input
|
|
32
51
|
}], expanded: [{
|
|
@@ -36,4 +55,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
36
55
|
}], clicked: [{
|
|
37
56
|
type: Output
|
|
38
57
|
}] } });
|
|
39
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
58
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2FwYWJpbGl0eS1pbnRlcnZhbC1iYXIuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbWFwYS1saWJyYXJ5LXVpL3NyYy9saWIvY29tcG9uZW50cy9jYXBhYmlsaXR5L3NyYy9jYXBhYmlsaXR5LWludGVydmFsLWJhci9jYXBhYmlsaXR5LWludGVydmFsLWJhci5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9tYXBhLWxpYnJhcnktdWkvc3JjL2xpYi9jb21wb25lbnRzL2NhcGFiaWxpdHkvc3JjL2NhcGFiaWxpdHktaW50ZXJ2YWwtYmFyL2NhcGFiaWxpdHktaW50ZXJ2YWwtYmFyLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBVSxNQUFNLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFFbEcsT0FBTyxFQUFFLEdBQUcsRUFBRSxNQUFNLFFBQVEsQ0FBQzs7Ozs7QUFRN0IsTUFBTSxPQUFPLGtDQUFrQztJQVc3QztRQVBVLFlBQU8sR0FBdUIsSUFBSSxZQUFZLEVBQVEsQ0FBQztRQUkxRCxlQUFVLEdBQUcsS0FBSyxDQUFDO1FBQ25CLGNBQVMsR0FBRyxLQUFLLENBQUM7UUFHdkIsSUFBSSxDQUFDLE9BQU8sQ0FBQyxTQUFTLENBQUMsQ0FBQyxHQUFHLEVBQUUsRUFBRTtZQUM3QixJQUFJLENBQUMsU0FBUyxHQUFHLENBQUMsSUFBSSxDQUFDLFNBQVMsQ0FBQztRQUNuQyxDQUFDLENBQUMsQ0FBQztJQUNMLENBQUM7SUFFRCxRQUFRO1FBQ04sSUFBSSxJQUFJLENBQUMsSUFBSSxFQUFFO1lBQ2IsSUFBSSxDQUFDLEVBQUUsR0FBRyx3QkFBd0IsR0FBRyxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLElBQUssR0FBRyxHQUFHLEdBQUcsSUFBSSxDQUFDLE1BQU0sRUFBRSxDQUFDLFFBQVEsRUFBRSxDQUFDLEVBQUUsQ0FBQztZQUVsRyxVQUFVLENBQUMsR0FBRyxFQUFFO2dCQUNkLE1BQU0sTUFBTSxHQUFHLFFBQVEsQ0FBQyxjQUFjLENBQUMsSUFBSSxDQUFDLEVBQUUsQ0FBQyxDQUFDO2dCQUVoRCxNQUFPLENBQUMsZ0JBQWdCLENBQ3RCLFlBQVksRUFDWixDQUFDLENBQU0sRUFBRSxFQUFFO29CQUNULElBQUksQ0FBQyxPQUFPLEVBQUUsQ0FBQztnQkFDakIsQ0FBQyxFQUNEO29CQUNFLE9BQU8sRUFBRSxJQUFJO2lCQUNkLENBQ0YsQ0FBQztnQkFFRixNQUFPLENBQUMsZ0JBQWdCLENBQ3RCLFlBQVksRUFDWixDQUFDLENBQU0sRUFBRSxFQUFFO29CQUNULElBQUksQ0FBQyxVQUFVLEVBQUUsQ0FBQztnQkFDcEIsQ0FBQyxFQUNEO29CQUNFLE9BQU8sRUFBRSxJQUFJO2lCQUNkLENBQ0YsQ0FBQztZQUNKLENBQUMsRUFBRSxHQUFHLENBQUMsQ0FBQztTQUNUO0lBQ0gsQ0FBQztJQUVELE9BQU87UUFDTCxJQUFJLENBQUMsVUFBVSxHQUFHLElBQUksQ0FBQztJQUN6QixDQUFDO0lBRUQsVUFBVTtRQUNSLElBQUksQ0FBQyxVQUFVLEdBQUcsS0FBSyxDQUFDO0lBQzFCLENBQUM7SUFFRCxRQUFRO1FBQ04sSUFBSSxDQUFDLE9BQU8sQ0FBQyxJQUFJLEVBQUUsQ0FBQztJQUN0QixDQUFDOztnSUF6RFUsa0NBQWtDO29IQUFsQyxrQ0FBa0MsbUxDVi9DLHluQkFtQkE7NEZEVGEsa0NBQWtDO2tCQU45QyxTQUFTOytCQUNFLDhCQUE4QixpQkFHekIsaUJBQWlCLENBQUMsSUFBSTswRUFHNUIsSUFBSTtzQkFBWixLQUFLO2dCQUNHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBQ0csWUFBWTtzQkFBcEIsS0FBSztnQkFDSSxPQUFPO3NCQUFoQixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIElucHV0LCBPbkluaXQsIE91dHB1dCwgVmlld0VuY2Fwc3VsYXRpb24gfSBmcm9tIFwiQGFuZ3VsYXIvY29yZVwiO1xuaW1wb3J0IHsgQ2FwYWJpbGl0eSB9IGZyb20gXCIuLi9lc3NlbnRpYWxzL2ludGVyZmFjZXMvY2FwYWJpbGl0eS5pbnRlcmZhY2VcIjtcbmltcG9ydCB7IE1kNSB9IGZyb20gXCJ0cy1tZDVcIjtcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiBcIm1hcGEtY2FwYWJpbGl0eS1pbnRlcnZhbC1iYXJcIixcbiAgdGVtcGxhdGVVcmw6IFwiLi9jYXBhYmlsaXR5LWludGVydmFsLWJhci5jb21wb25lbnQuaHRtbFwiLFxuICBzdHlsZVVybHM6IFtcIi4vY2FwYWJpbGl0eS1pbnRlcnZhbC1iYXIuY29tcG9uZW50LnNjc3NcIl0sXG4gIGVuY2Fwc3VsYXRpb246IFZpZXdFbmNhcHN1bGF0aW9uLk5vbmUsXG59KVxuZXhwb3J0IGNsYXNzIE1hcGFDYXBhYmlsaXR5SW50ZXJ2YWxCYXJDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xuICBASW5wdXQoKSBkYXRhITogQ2FwYWJpbGl0eTtcbiAgQElucHV0KCkgZXhwYW5kZWQ/OiBib29sZWFuO1xuICBASW5wdXQoKSBzaG93SW50ZXJ2YWwhOiBib29sZWFuO1xuICBAT3V0cHV0KCkgY2xpY2tlZDogRXZlbnRFbWl0dGVyPHZvaWQ+ID0gbmV3IEV2ZW50RW1pdHRlcjx2b2lkPigpO1xuXG4gIGlkITogc3RyaW5nO1xuXG4gIHB1YmxpYyBpc0hvdmVyaW5nID0gZmFsc2U7XG4gIHB1YmxpYyBpc0NsaWNrZWQgPSBmYWxzZTtcblxuICBjb25zdHJ1Y3RvcigpIHtcbiAgICB0aGlzLmNsaWNrZWQuc3Vic2NyaWJlKChyZXMpID0+IHtcbiAgICAgIHRoaXMuaXNDbGlja2VkID0gIXRoaXMuaXNDbGlja2VkO1xuICAgIH0pO1xuICB9XG5cbiAgbmdPbkluaXQoKTogdm9pZCB7XG4gICAgaWYgKHRoaXMuZGF0YSkge1xuICAgICAgdGhpcy5pZCA9IGBjYXBhYmlsaXR5LWludGVydmFsX18ke01kNS5oYXNoU3RyKHRoaXMuZGF0YS5uYW1lISArIFwiX1wiICsgTWF0aC5yYW5kb20oKS50b1N0cmluZygpKX1gO1xuXG4gICAgICBzZXRUaW1lb3V0KCgpID0+IHtcbiAgICAgICAgY29uc3Qgb2JqZWN0ID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQodGhpcy5pZCk7XG5cbiAgICAgICAgb2JqZWN0IS5hZGRFdmVudExpc3RlbmVyKFxuICAgICAgICAgIFwibW91c2VlbnRlclwiLFxuICAgICAgICAgIChlOiBhbnkpID0+IHtcbiAgICAgICAgICAgIHRoaXMub25Ib3ZlcigpO1xuICAgICAgICAgIH0sXG4gICAgICAgICAge1xuICAgICAgICAgICAgcGFzc2l2ZTogdHJ1ZSxcbiAgICAgICAgICB9XG4gICAgICAgICk7XG5cbiAgICAgICAgb2JqZWN0IS5hZGRFdmVudExpc3RlbmVyKFxuICAgICAgICAgIFwibW91c2VsZWF2ZVwiLFxuICAgICAgICAgIChlOiBhbnkpID0+IHtcbiAgICAgICAgICAgIHRoaXMub25Nb3VzZU91dCgpO1xuICAgICAgICAgIH0sXG4gICAgICAgICAge1xuICAgICAgICAgICAgcGFzc2l2ZTogdHJ1ZSxcbiAgICAgICAgICB9XG4gICAgICAgICk7XG4gICAgICB9LCAxMDApO1xuICAgIH1cbiAgfVxuXG4gIG9uSG92ZXIoKTogdm9pZCB7XG4gICAgdGhpcy5pc0hvdmVyaW5nID0gdHJ1ZTtcbiAgfVxuXG4gIG9uTW91c2VPdXQoKTogdm9pZCB7XG4gICAgdGhpcy5pc0hvdmVyaW5nID0gZmFsc2U7XG4gIH1cblxuICBzaG93TW9yZSgpOiB2b2lkIHtcbiAgICB0aGlzLmNsaWNrZWQuZW1pdCgpO1xuICB9XG59XG4iLCI8c2VjdGlvblxuICByZXVzYWJsZS1vdXRsZXRcbiAgY2xhc3M9XCJjYXBhYmlsaXR5LWludGVydmFsXCJcbiAgW2lkXT1cImlkXCJcbj5cbiAgPHNlY3Rpb25cbiAgICBjbGFzcz1cImNhcGFiaWxpdHktaW50ZXJ2YWxfX2JhclwiXG4gICAgW25nQ2xhc3NdPVwieydjYXBhYmlsaXR5LWludGVydmFsLS1oaWRlJzogaXNIb3ZlcmluZ31cIlxuICA+XG4gICAgPG1hcGEtY2FwYWJpbGl0eS1pbnRlcnZhbCBbZGF0YV09XCJkYXRhXCIgW3Nob3dJbnRlcnZhbF09XCJzaG93SW50ZXJ2YWxcIj48L21hcGEtY2FwYWJpbGl0eS1pbnRlcnZhbD5cbiAgPC9zZWN0aW9uPlxuICA8c2VjdGlvblxuICAgIGNsYXNzPVwiY2FwYWJpbGl0eS1pbnRlcnZhbF9fc2hvdy1tb3JlXCJcbiAgICBbY2xhc3MuY2FwYWJpbGl0eS1pbnRlcnZhbC0taGlkZV09XCIhaXNIb3ZlcmluZ1wiXG4gICAgW2NsYXNzLmNhcGFiaWxpdHktaW50ZXJ2YWwtLXNob3ddPVwiaXNIb3ZlcmluZ1wiXG4gID5cbiAgICA8bWFwYS1idXR0b24gY29sb3I9XCJiYXNpY1wiIChjbGljayk9XCJzaG93TW9yZSgpXCI+e3sgZXhwYW5kZWQgPyAnVmVyIG1lbm9zJyA6ICdWZWphIG1haXMnIH19PC9tYXBhLWJ1dHRvbj5cbiAgPC9zZWN0aW9uPlxuPC9zZWN0aW9uPlxuIl19
|
|
@@ -662,10 +662,10 @@ class MapaCapabilityExpandComponent {
|
|
|
662
662
|
}
|
|
663
663
|
}
|
|
664
664
|
MapaCapabilityExpandComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityExpandComponent, deps: [{ token: CapabilityClassificationService }], target: i0.ɵɵFactoryTarget.Component });
|
|
665
|
-
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.capabilityConcept?.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.capabilityConcept?.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=\"
|
|
665
|
+
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\" *ngIf=\"data.capabilityConcept?.concept\">\n <div class=\"capability__concept--title\">Conceito</div>\n <div class=\"capability__concept--text\">\n {{ data.capabilityConcept?.concept! }}\n </div>\n </div>\n <div class=\"capability__concept--content\" *ngIf=\"data.capabilityConcept?.result\">\n <div class=\"capability__concept--title\">Resultado</div>\n <div class=\"capability__concept--text\">\n {{ data.capabilityConcept?.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=\"capability__expanded--name\">\n <span *ngIf=\"!item.description\">\n <strong *ngIf=\"!classification.getByItem(item).positive\">\u2198\uFE0E </strong> \n <strong *ngIf=\"classification.getByItem(item).positive\">\u2197 </strong>\n </span>\n {{ item.name }}\n </div>\n <mapa-tag size=\"small\" class=\"capability__expanded--tag\">\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\" *ngIf=\"item.description\">\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 });
|
|
666
666
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityExpandComponent, decorators: [{
|
|
667
667
|
type: Component,
|
|
668
|
-
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.capabilityConcept?.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.capabilityConcept?.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=\"
|
|
668
|
+
args: [{ selector: "mapa-capability-expand", encapsulation: ViewEncapsulation.None, template: "<div class=\"capability__concept\">\n <div class=\"capability__concept--content\" *ngIf=\"data.capabilityConcept?.concept\">\n <div class=\"capability__concept--title\">Conceito</div>\n <div class=\"capability__concept--text\">\n {{ data.capabilityConcept?.concept! }}\n </div>\n </div>\n <div class=\"capability__concept--content\" *ngIf=\"data.capabilityConcept?.result\">\n <div class=\"capability__concept--title\">Resultado</div>\n <div class=\"capability__concept--text\">\n {{ data.capabilityConcept?.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=\"capability__expanded--name\">\n <span *ngIf=\"!item.description\">\n <strong *ngIf=\"!classification.getByItem(item).positive\">\u2198\uFE0E </strong> \n <strong *ngIf=\"classification.getByItem(item).positive\">\u2197 </strong>\n </span>\n {{ item.name }}\n </div>\n <mapa-tag size=\"small\" class=\"capability__expanded--tag\">\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\" *ngIf=\"item.description\">\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"] }]
|
|
669
669
|
}], ctorParameters: function () { return [{ type: CapabilityClassificationService }]; }, propDecorators: { data: [{
|
|
670
670
|
type: Input
|
|
671
671
|
}] } });
|
|
@@ -939,6 +939,24 @@ class MapaCapabilityIntervalBarComponent {
|
|
|
939
939
|
this.isClicked = !this.isClicked;
|
|
940
940
|
});
|
|
941
941
|
}
|
|
942
|
+
ngOnInit() {
|
|
943
|
+
if (this.data) {
|
|
944
|
+
this.id = `capability-interval__${Md5.hashStr(this.data.name + "_" + Math.random().toString())}`;
|
|
945
|
+
setTimeout(() => {
|
|
946
|
+
const object = document.getElementById(this.id);
|
|
947
|
+
object.addEventListener("mouseenter", (e) => {
|
|
948
|
+
this.onHover();
|
|
949
|
+
}, {
|
|
950
|
+
passive: true,
|
|
951
|
+
});
|
|
952
|
+
object.addEventListener("mouseleave", (e) => {
|
|
953
|
+
this.onMouseOut();
|
|
954
|
+
}, {
|
|
955
|
+
passive: true,
|
|
956
|
+
});
|
|
957
|
+
}, 100);
|
|
958
|
+
}
|
|
959
|
+
}
|
|
942
960
|
onHover() {
|
|
943
961
|
this.isHovering = true;
|
|
944
962
|
}
|
|
@@ -950,10 +968,10 @@ class MapaCapabilityIntervalBarComponent {
|
|
|
950
968
|
}
|
|
951
969
|
}
|
|
952
970
|
MapaCapabilityIntervalBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityIntervalBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
953
|
-
MapaCapabilityIntervalBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaCapabilityIntervalBarComponent, selector: "mapa-capability-interval-bar", inputs: { data: "data", expanded: "expanded", showInterval: "showInterval" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<section\n
|
|
971
|
+
MapaCapabilityIntervalBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaCapabilityIntervalBarComponent, selector: "mapa-capability-interval-bar", inputs: { data: "data", expanded: "expanded", showInterval: "showInterval" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<section\n reusable-outlet\n class=\"capability-interval\"\n [id]=\"id\"\n>\n <section\n class=\"capability-interval__bar\"\n [ngClass]=\"{'capability-interval--hide': isHovering}\"\n >\n <mapa-capability-interval [data]=\"data\" [showInterval]=\"showInterval\"></mapa-capability-interval>\n </section>\n <section\n class=\"capability-interval__show-more\"\n [class.capability-interval--hide]=\"!isHovering\"\n [class.capability-interval--show]=\"isHovering\"\n >\n <mapa-button color=\"basic\" (click)=\"showMore()\">{{ expanded ? 'Ver menos' : 'Veja mais' }}</mapa-button>\n </section>\n</section>\n", styles: [".capability-interval{display:block;position:relative;height:72px;width:327px}.capability-interval__bar{border:1px solid #DCDCDE;border-radius:16px;display:flex;align-items:center;justify-content:center;padding:0 16px;max-height:72px;height:100%}.capability-interval__show-more{display:flex;align-items:center;justify-content:flex-end;max-height:72px;height:100%;width:100%}.capability-interval__show-more mapa-button,.capability-interval__show-more button{width:100%;justify-content:flex-end!important}.capability-interval--hide{opacity:0;max-height:0}.capability-interval--hide>*{opacity:0;max-height:0}.capability-interval--show{opacity:1;max-height:72px}\n"], dependencies: [{ kind: "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", "showInterval"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
954
972
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityIntervalBarComponent, decorators: [{
|
|
955
973
|
type: Component,
|
|
956
|
-
args: [{ selector: "mapa-capability-interval-bar", template: "<section\n
|
|
974
|
+
args: [{ selector: "mapa-capability-interval-bar", encapsulation: ViewEncapsulation.None, template: "<section\n reusable-outlet\n class=\"capability-interval\"\n [id]=\"id\"\n>\n <section\n class=\"capability-interval__bar\"\n [ngClass]=\"{'capability-interval--hide': isHovering}\"\n >\n <mapa-capability-interval [data]=\"data\" [showInterval]=\"showInterval\"></mapa-capability-interval>\n </section>\n <section\n class=\"capability-interval__show-more\"\n [class.capability-interval--hide]=\"!isHovering\"\n [class.capability-interval--show]=\"isHovering\"\n >\n <mapa-button color=\"basic\" (click)=\"showMore()\">{{ expanded ? 'Ver menos' : 'Veja mais' }}</mapa-button>\n </section>\n</section>\n", styles: [".capability-interval{display:block;position:relative;height:72px;width:327px}.capability-interval__bar{border:1px solid #DCDCDE;border-radius:16px;display:flex;align-items:center;justify-content:center;padding:0 16px;max-height:72px;height:100%}.capability-interval__show-more{display:flex;align-items:center;justify-content:flex-end;max-height:72px;height:100%;width:100%}.capability-interval__show-more mapa-button,.capability-interval__show-more button{width:100%;justify-content:flex-end!important}.capability-interval--hide{opacity:0;max-height:0}.capability-interval--hide>*{opacity:0;max-height:0}.capability-interval--show{opacity:1;max-height:72px}\n"] }]
|
|
957
975
|
}], ctorParameters: function () { return []; }, propDecorators: { data: [{
|
|
958
976
|
type: Input
|
|
959
977
|
}], expanded: [{
|
|
@@ -990,10 +1008,10 @@ class MapaCapabilityDetailComponent {
|
|
|
990
1008
|
}
|
|
991
1009
|
}
|
|
992
1010
|
MapaCapabilityDetailComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityDetailComponent, deps: [{ token: CapabilityClassificationService }], target: i0.ɵɵFactoryTarget.Component });
|
|
993
|
-
MapaCapabilityDetailComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaCapabilityDetailComponent, selector: "mapa-capability-detail", inputs: { data: "data", showTagInterval: "showTagInterval" }, ngImport: i0, template: "<section class=\"capability\">\n <div class=\"capability__core\">\n <div\n *ngFor=\"let capability of data; let i = index\"\n class=\"capability__item\"\n >\n <div class=\"capability__item--header\">\n <div class=\"capability__item--title-dots\">\n <div class=\"capability__item--title display-L\">\n {{ capability.name }}\n <span class=\"capability__item--title-tag\" *ngIf=\"showTagInterval\">\n <mapa-tag size=\"small\">\n <mapa-capability-dot\n [item]=\"capability\"\n [capability]=\"capability\"\n ></mapa-capability-dot>\n\n {{ classification.getByItem(capability).name }}\n </mapa-tag>\n </span>\n </div>\n\n <div class=\"capability__item--dots\">\n <mapa-capability-dot\n *ngFor=\"let item of sortItemsByinterval(capability.items)\"\n type=\"small\"\n [item]=\"item\"\n [capability]=\"capability\"\n [tooltip]=\"true\"\n ></mapa-capability-dot>\n </div>\n </div>\n\n <div [class.capability__item--interval]=\"showTagInterval\">\n <mapa-capability-interval-bar\n [data]=\"capability\"\n [expanded]=\"expanded.has(i)\"\n [showInterval]=\"!showTagInterval\"\n (clicked)=\"showMore(i)\"\n reusable-interval-bar\n ></mapa-capability-interval-bar>\n </div>\n </div>\n <div\n [class.capability__item--show]=\"expanded.has(i)\"\n [class.capability__item--hide]=\"!expanded.has(i)\"\n >\n <mapa-capability-expand [data]=\"capability\"></mapa-capability-expand>\n </div>\n </div>\n </div>\n</section>\n", 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
|
|
1011
|
+
MapaCapabilityDetailComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaCapabilityDetailComponent, selector: "mapa-capability-detail", inputs: { data: "data", showTagInterval: "showTagInterval" }, ngImport: i0, template: "<section class=\"capability\">\n <div class=\"capability__core\">\n <div\n *ngFor=\"let capability of data; let i = index\"\n class=\"capability__item\"\n >\n <div class=\"capability__item--header\">\n <div class=\"capability__item--title-dots\">\n <div class=\"capability__item--title display-L\">\n {{ capability.name }}\n <span class=\"capability__item--title-tag\" *ngIf=\"showTagInterval\">\n <mapa-tag size=\"small\">\n <mapa-capability-dot\n [item]=\"capability\"\n [capability]=\"capability\"\n ></mapa-capability-dot>\n\n {{ classification.getByItem(capability).name }}\n </mapa-tag>\n </span>\n </div>\n\n <div class=\"capability__item--dots\">\n <mapa-capability-dot\n *ngFor=\"let item of sortItemsByinterval(capability.items)\"\n type=\"small\"\n [item]=\"item\"\n [capability]=\"capability\"\n [tooltip]=\"true\"\n ></mapa-capability-dot>\n </div>\n </div>\n\n <div [class.capability__item--interval]=\"showTagInterval\">\n <mapa-capability-interval-bar\n [data]=\"capability\"\n [expanded]=\"expanded.has(i)\"\n [showInterval]=\"!showTagInterval\"\n (clicked)=\"showMore(i)\"\n reusable-interval-bar\n ></mapa-capability-interval-bar>\n </div>\n </div>\n <div\n [class.capability__item--show]=\"expanded.has(i)\"\n [class.capability__item--hide]=\"!expanded.has(i)\"\n >\n <mapa-capability-expand [data]=\"capability\"></mapa-capability-expand>\n </div>\n </div>\n </div>\n</section>\n", 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>*{display:none!important;opacity:0!important;max-height:0!important;height:0!important;margin:0!important;padding:0!important;flex:0}.capability__item--show{opacity:1;max-height:100%;height:100%}.capability__item--header{display:flex;align-items:center;justify-content:space-between}.capability__item--title{display:flex;align-items:center}.capability__item--title-tag{margin-left:34px}.capability__item--title-dots{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;height:72px}.capability__item--title-dots .display-L{margin-bottom:10px}.capability__item--dots{display:flex}.capability__item--dots mapa-capability-dot .tooltip-dot{padding:8px 8px 8px 0}.capability__item--interval mapa-capability-interval-bar .capability-interval{width:267px}\n", ".classification-1{background-color:#073e92;color:#fff}.classification-2{background-color:#0e6ece;color:#fff}.classification-3{background-color:#2d9ced;color:#000}.classification-4{background-color:#68ceee;color:#000}.classification-5{background-color:#96f2ee;color:#000}.classification-6{background-color:#f598a7;color:#000}.classification-7{background-color:#f56580;color:#000}.classification-8{background-color:#f4284e;color:#fff}.classification-9{background-color:#c11c2f;color:#fff}.small-dot{width:12px;height:12px;border-radius:12px;padding:0;margin:0}.dot{width:16px;height:16px;border-radius:16px;padding:0;margin:0}.indicator{display:flex;padding:2px 4px 2px 16px;justify-content:space-between;align-items:center;border-radius:8px;font-family:SF-Pro;font-size:16px;font-style:normal;font-weight:400}.display-S{font-family:SF-Pro;font-size:20px;font-style:normal;font-weight:400}.display-L{font-family:SF-Pro;font-size:32px;font-style:normal;font-weight:400}.display-XG{font-family:SF-Pro;font-size:48px;font-style:normal;font-weight:400}*{transition:opacity .4s ease-out,max-height .4s ease-out}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MapaCapabilityDotComponent, selector: "mapa-capability-dot", inputs: ["type", "item", "tooltip", "capability"] }, { kind: "component", type: MapaCapabilityIntervalBarComponent, selector: "mapa-capability-interval-bar", inputs: ["data", "expanded", "showInterval"], outputs: ["clicked"] }, { kind: "component", type: MapaCapabilityExpandComponent, selector: "mapa-capability-expand", inputs: ["data"] }, { kind: "component", type: i6$1.TagComponent, selector: "mapa-tag", inputs: ["color", "size"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
994
1012
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityDetailComponent, decorators: [{
|
|
995
1013
|
type: Component,
|
|
996
|
-
args: [{ selector: "mapa-capability-detail", encapsulation: ViewEncapsulation.None, template: "<section class=\"capability\">\n <div class=\"capability__core\">\n <div\n *ngFor=\"let capability of data; let i = index\"\n class=\"capability__item\"\n >\n <div class=\"capability__item--header\">\n <div class=\"capability__item--title-dots\">\n <div class=\"capability__item--title display-L\">\n {{ capability.name }}\n <span class=\"capability__item--title-tag\" *ngIf=\"showTagInterval\">\n <mapa-tag size=\"small\">\n <mapa-capability-dot\n [item]=\"capability\"\n [capability]=\"capability\"\n ></mapa-capability-dot>\n\n {{ classification.getByItem(capability).name }}\n </mapa-tag>\n </span>\n </div>\n\n <div class=\"capability__item--dots\">\n <mapa-capability-dot\n *ngFor=\"let item of sortItemsByinterval(capability.items)\"\n type=\"small\"\n [item]=\"item\"\n [capability]=\"capability\"\n [tooltip]=\"true\"\n ></mapa-capability-dot>\n </div>\n </div>\n\n <div [class.capability__item--interval]=\"showTagInterval\">\n <mapa-capability-interval-bar\n [data]=\"capability\"\n [expanded]=\"expanded.has(i)\"\n [showInterval]=\"!showTagInterval\"\n (clicked)=\"showMore(i)\"\n reusable-interval-bar\n ></mapa-capability-interval-bar>\n </div>\n </div>\n <div\n [class.capability__item--show]=\"expanded.has(i)\"\n [class.capability__item--hide]=\"!expanded.has(i)\"\n >\n <mapa-capability-expand [data]=\"capability\"></mapa-capability-expand>\n </div>\n </div>\n </div>\n</section>\n", 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
|
|
1014
|
+
args: [{ selector: "mapa-capability-detail", encapsulation: ViewEncapsulation.None, template: "<section class=\"capability\">\n <div class=\"capability__core\">\n <div\n *ngFor=\"let capability of data; let i = index\"\n class=\"capability__item\"\n >\n <div class=\"capability__item--header\">\n <div class=\"capability__item--title-dots\">\n <div class=\"capability__item--title display-L\">\n {{ capability.name }}\n <span class=\"capability__item--title-tag\" *ngIf=\"showTagInterval\">\n <mapa-tag size=\"small\">\n <mapa-capability-dot\n [item]=\"capability\"\n [capability]=\"capability\"\n ></mapa-capability-dot>\n\n {{ classification.getByItem(capability).name }}\n </mapa-tag>\n </span>\n </div>\n\n <div class=\"capability__item--dots\">\n <mapa-capability-dot\n *ngFor=\"let item of sortItemsByinterval(capability.items)\"\n type=\"small\"\n [item]=\"item\"\n [capability]=\"capability\"\n [tooltip]=\"true\"\n ></mapa-capability-dot>\n </div>\n </div>\n\n <div [class.capability__item--interval]=\"showTagInterval\">\n <mapa-capability-interval-bar\n [data]=\"capability\"\n [expanded]=\"expanded.has(i)\"\n [showInterval]=\"!showTagInterval\"\n (clicked)=\"showMore(i)\"\n reusable-interval-bar\n ></mapa-capability-interval-bar>\n </div>\n </div>\n <div\n [class.capability__item--show]=\"expanded.has(i)\"\n [class.capability__item--hide]=\"!expanded.has(i)\"\n >\n <mapa-capability-expand [data]=\"capability\"></mapa-capability-expand>\n </div>\n </div>\n </div>\n</section>\n", 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>*{display:none!important;opacity:0!important;max-height:0!important;height:0!important;margin:0!important;padding:0!important;flex:0}.capability__item--show{opacity:1;max-height:100%;height:100%}.capability__item--header{display:flex;align-items:center;justify-content:space-between}.capability__item--title{display:flex;align-items:center}.capability__item--title-tag{margin-left:34px}.capability__item--title-dots{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;height:72px}.capability__item--title-dots .display-L{margin-bottom:10px}.capability__item--dots{display:flex}.capability__item--dots mapa-capability-dot .tooltip-dot{padding:8px 8px 8px 0}.capability__item--interval mapa-capability-interval-bar .capability-interval{width:267px}\n", ".classification-1{background-color:#073e92;color:#fff}.classification-2{background-color:#0e6ece;color:#fff}.classification-3{background-color:#2d9ced;color:#000}.classification-4{background-color:#68ceee;color:#000}.classification-5{background-color:#96f2ee;color:#000}.classification-6{background-color:#f598a7;color:#000}.classification-7{background-color:#f56580;color:#000}.classification-8{background-color:#f4284e;color:#fff}.classification-9{background-color:#c11c2f;color:#fff}.small-dot{width:12px;height:12px;border-radius:12px;padding:0;margin:0}.dot{width:16px;height:16px;border-radius:16px;padding:0;margin:0}.indicator{display:flex;padding:2px 4px 2px 16px;justify-content:space-between;align-items:center;border-radius:8px;font-family:SF-Pro;font-size:16px;font-style:normal;font-weight:400}.display-S{font-family:SF-Pro;font-size:20px;font-style:normal;font-weight:400}.display-L{font-family:SF-Pro;font-size:32px;font-style:normal;font-weight:400}.display-XG{font-family:SF-Pro;font-size:48px;font-style:normal;font-weight:400}*{transition:opacity .4s ease-out,max-height .4s ease-out}\n"] }]
|
|
997
1015
|
}], ctorParameters: function () { return [{ type: CapabilityClassificationService }]; }, propDecorators: { data: [{
|
|
998
1016
|
type: Input
|
|
999
1017
|
}], showTagInterval: [{
|