mapa-library-ui 0.18.3 → 0.19.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2020/src/lib/components/capability/lib/components/capability/src/capability-comparative-header/capability-comparative-header.component.mjs +1 -1
- package/esm2020/src/lib/components/capability/lib/components/capability/src/capability-detail/capability-detail.component.mjs +15 -10
- package/esm2020/src/lib/components/capability/lib/components/capability/src/capability-detail/capability-detail.module.mjs +5 -1
- package/esm2020/src/lib/components/capability/lib/components/capability/src/capability-interval/capability-interval.component.mjs +5 -3
- package/esm2020/src/lib/components/capability/lib/components/capability/src/capability-interval-bar/capability-interval-bar.component.mjs +5 -3
- package/esm2020/src/lib/components/capability/tag.mjs +5 -0
- package/fesm2015/mapa-library-ui-src-lib-components-capability.mjs +21 -10
- package/fesm2015/mapa-library-ui-src-lib-components-capability.mjs.map +1 -1
- package/fesm2020/mapa-library-ui-src-lib-components-capability.mjs +21 -10
- package/fesm2020/mapa-library-ui-src-lib-components-capability.mjs.map +1 -1
- package/mapa-library-ui-0.19.0.tgz +0 -0
- package/package.json +1 -1
- package/src/lib/components/capability/lib/components/capability/src/capability-detail/capability-detail.component.d.ts +5 -1
- package/src/lib/components/capability/lib/components/capability/src/capability-detail/capability-detail.module.d.ts +4 -3
- package/src/lib/components/capability/lib/components/capability/src/capability-interval/capability-interval.component.d.ts +2 -1
- package/src/lib/components/capability/lib/components/capability/src/capability-interval-bar/capability-interval-bar.component.d.ts +2 -1
- package/src/lib/components/capability/tag.d.ts +1 -0
- package/mapa-library-ui-0.18.3.tgz +0 -0
|
@@ -29,6 +29,7 @@ import * as i4$1 from 'mapa-library-ui/src/lib/components/dropdown';
|
|
|
29
29
|
import { MapaDropdownModule as MapaDropdownModule$1 } from 'mapa-library-ui/src/lib/components/dropdown';
|
|
30
30
|
import * as i5$1 from 'mapa-library-ui/src/lib/components/input';
|
|
31
31
|
import { MapaInputModule } from 'mapa-library-ui/src/lib/components/input';
|
|
32
|
+
import { MapaTagModule as MapaTagModule$1 } from 'projects/mapa-library-ui/src/tag';
|
|
32
33
|
|
|
33
34
|
class ButtonComponent {
|
|
34
35
|
constructor() {
|
|
@@ -761,12 +762,14 @@ class MapaCapabilityIntervalComponent {
|
|
|
761
762
|
}
|
|
762
763
|
}
|
|
763
764
|
MapaCapabilityIntervalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityIntervalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
764
|
-
MapaCapabilityIntervalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaCapabilityIntervalComponent, selector: "mapa-capability-interval", inputs: { data: "data" }, usesOnChanges: true, 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 [class]=\"'svg_' + i + '_' + getWidth(i)\"\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{font-family:SF-Pro;font-size:38px;font-style:normal;font-weight:500;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 8px}.capability__interval--item{border-radius:6px;margin-right:2px;width:21px;height:34px;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"] }] });
|
|
765
|
+
MapaCapabilityIntervalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaCapabilityIntervalComponent, selector: "mapa-capability-interval", inputs: { data: "data", showInterval: "showInterval" }, usesOnChanges: true, 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 [class]=\"'svg_' + i + '_' + getWidth(i)\"\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\" *ngIf=\"showInterval\">\n {{ data.interval }}\n </li>\n</ul>\n", styles: [".capability__interval{font-family:SF-Pro;font-size:38px;font-style:normal;font-weight:500;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 8px}.capability__interval--item{border-radius:6px;margin-right:2px;width:21px;height:34px;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"] }] });
|
|
765
766
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityIntervalComponent, decorators: [{
|
|
766
767
|
type: Component,
|
|
767
|
-
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 [class]=\"'svg_' + i + '_' + getWidth(i)\"\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{font-family:SF-Pro;font-size:38px;font-style:normal;font-weight:500;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 8px}.capability__interval--item{border-radius:6px;margin-right:2px;width:21px;height:34px;position:relative}.capability__interval--item:last-of-type{margin-right:0}.capability__interval--percentage{background-color:#d9d9d9;height:34.57px}\n"] }]
|
|
768
|
+
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 [class]=\"'svg_' + i + '_' + getWidth(i)\"\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\" *ngIf=\"showInterval\">\n {{ data.interval }}\n </li>\n</ul>\n", styles: [".capability__interval{font-family:SF-Pro;font-size:38px;font-style:normal;font-weight:500;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 8px}.capability__interval--item{border-radius:6px;margin-right:2px;width:21px;height:34px;position:relative}.capability__interval--item:last-of-type{margin-right:0}.capability__interval--percentage{background-color:#d9d9d9;height:34.57px}\n"] }]
|
|
768
769
|
}], ctorParameters: function () { return []; }, propDecorators: { data: [{
|
|
769
770
|
type: Input
|
|
771
|
+
}], showInterval: [{
|
|
772
|
+
type: Input
|
|
770
773
|
}] } });
|
|
771
774
|
|
|
772
775
|
class MapaCapabilityIntervalModule {
|
|
@@ -827,7 +830,7 @@ class MapaCapabilityComparativeHeaderComponent {
|
|
|
827
830
|
}
|
|
828
831
|
}
|
|
829
832
|
MapaCapabilityComparativeHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityComparativeHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
830
|
-
MapaCapabilityComparativeHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaCapabilityComparativeHeaderComponent, selector: "mapa-capability-comparative-header", inputs: { data: "data" }, ngImport: i0, template: "<section class=\"capability-comparative__header\">\n <h1>{{ data.name }}</h1>\n\n <section>\n <div class=\"capability-comparative__avg\">\n <div class=\"capability-comparative__avg--title\">M\u00E9dia geral do grupo</div>\n <mapa-capability-interval\n [data]=\"getCapabilityData(data.groupAvg)\"\n reusable-interval-bar\n ></mapa-capability-interval>\n </div>\n <div class=\"capability-comparative__avg\">\n <div class=\"capability-comparative__avg--title\">M\u00E9dia geral do indiv\u00EDduo</div>\n <mapa-capability-interval\n [data]=\"getCapabilityData(data.individualAvg)\"\n reusable-interval-bar\n ></mapa-capability-interval>\n </div>\n </section>\n</section>\n", styles: [".capability-comparative__header{display:flex;align-items:center;justify-content:space-between;width:100%}.capability-comparative__header h1{color:var(--GlobalColors-Neutral-100, #000);font-family:SF-Pro;font-size:32px;font-style:normal;font-weight:400;line-height:40px}.capability-comparative__avg{border-radius:16px;border:1px solid #cdcdcd;padding:10px 16px;margin:24px 0;position:relative}.capability-comparative__avg--title{background-color:#fff;padding:0 2px;position:absolute;top:-8px;color:#8c8f94;font-family:SF-Pro;font-size:12px;font-style:normal;font-weight:500;line-height:16px;text-transform:uppercase}\n"], dependencies: [{ kind: "component", type: MapaCapabilityIntervalComponent, selector: "mapa-capability-interval", inputs: ["data"] }] });
|
|
833
|
+
MapaCapabilityComparativeHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaCapabilityComparativeHeaderComponent, selector: "mapa-capability-comparative-header", inputs: { data: "data" }, ngImport: i0, template: "<section class=\"capability-comparative__header\">\n <h1>{{ data.name }}</h1>\n\n <section>\n <div class=\"capability-comparative__avg\">\n <div class=\"capability-comparative__avg--title\">M\u00E9dia geral do grupo</div>\n <mapa-capability-interval\n [data]=\"getCapabilityData(data.groupAvg)\"\n reusable-interval-bar\n ></mapa-capability-interval>\n </div>\n <div class=\"capability-comparative__avg\">\n <div class=\"capability-comparative__avg--title\">M\u00E9dia geral do indiv\u00EDduo</div>\n <mapa-capability-interval\n [data]=\"getCapabilityData(data.individualAvg)\"\n reusable-interval-bar\n ></mapa-capability-interval>\n </div>\n </section>\n</section>\n", styles: [".capability-comparative__header{display:flex;align-items:center;justify-content:space-between;width:100%}.capability-comparative__header h1{color:var(--GlobalColors-Neutral-100, #000);font-family:SF-Pro;font-size:32px;font-style:normal;font-weight:400;line-height:40px}.capability-comparative__avg{border-radius:16px;border:1px solid #cdcdcd;padding:10px 16px;margin:24px 0;position:relative}.capability-comparative__avg--title{background-color:#fff;padding:0 2px;position:absolute;top:-8px;color:#8c8f94;font-family:SF-Pro;font-size:12px;font-style:normal;font-weight:500;line-height:16px;text-transform:uppercase}\n"], dependencies: [{ kind: "component", type: MapaCapabilityIntervalComponent, selector: "mapa-capability-interval", inputs: ["data", "showInterval"] }] });
|
|
831
834
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityComparativeHeaderComponent, decorators: [{
|
|
832
835
|
type: Component,
|
|
833
836
|
args: [{ selector: 'mapa-capability-comparative-header', template: "<section class=\"capability-comparative__header\">\n <h1>{{ data.name }}</h1>\n\n <section>\n <div class=\"capability-comparative__avg\">\n <div class=\"capability-comparative__avg--title\">M\u00E9dia geral do grupo</div>\n <mapa-capability-interval\n [data]=\"getCapabilityData(data.groupAvg)\"\n reusable-interval-bar\n ></mapa-capability-interval>\n </div>\n <div class=\"capability-comparative__avg\">\n <div class=\"capability-comparative__avg--title\">M\u00E9dia geral do indiv\u00EDduo</div>\n <mapa-capability-interval\n [data]=\"getCapabilityData(data.individualAvg)\"\n reusable-interval-bar\n ></mapa-capability-interval>\n </div>\n </section>\n</section>\n", styles: [".capability-comparative__header{display:flex;align-items:center;justify-content:space-between;width:100%}.capability-comparative__header h1{color:var(--GlobalColors-Neutral-100, #000);font-family:SF-Pro;font-size:32px;font-style:normal;font-weight:400;line-height:40px}.capability-comparative__avg{border-radius:16px;border:1px solid #cdcdcd;padding:10px 16px;margin:24px 0;position:relative}.capability-comparative__avg--title{background-color:#fff;padding:0 2px;position:absolute;top:-8px;color:#8c8f94;font-family:SF-Pro;font-size:12px;font-style:normal;font-weight:500;line-height:16px;text-transform:uppercase}\n"] }]
|
|
@@ -935,20 +938,23 @@ class MapaCapabilityIntervalBarComponent {
|
|
|
935
938
|
}
|
|
936
939
|
}
|
|
937
940
|
MapaCapabilityIntervalBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityIntervalBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
938
|
-
MapaCapabilityIntervalBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaCapabilityIntervalBarComponent, selector: "mapa-capability-interval-bar", inputs: { data: "data", expanded: "expanded" }, 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\"\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{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"] }] });
|
|
941
|
+
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 (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\" [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{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", "showInterval"] }] });
|
|
939
942
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityIntervalBarComponent, decorators: [{
|
|
940
943
|
type: Component,
|
|
941
|
-
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\"\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{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"] }]
|
|
944
|
+
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\" [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{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"] }]
|
|
942
945
|
}], ctorParameters: function () { return []; }, propDecorators: { data: [{
|
|
943
946
|
type: Input
|
|
944
947
|
}], expanded: [{
|
|
945
948
|
type: Input
|
|
949
|
+
}], showInterval: [{
|
|
950
|
+
type: Input
|
|
946
951
|
}], clicked: [{
|
|
947
952
|
type: Output
|
|
948
953
|
}] } });
|
|
949
954
|
|
|
950
955
|
class MapaCapabilityDetailComponent {
|
|
951
|
-
constructor() {
|
|
956
|
+
constructor(classification) {
|
|
957
|
+
this.classification = classification;
|
|
952
958
|
this.expanded = new Set();
|
|
953
959
|
}
|
|
954
960
|
sortItemsByinterval(items) {
|
|
@@ -971,12 +977,14 @@ class MapaCapabilityDetailComponent {
|
|
|
971
977
|
}
|
|
972
978
|
}
|
|
973
979
|
}
|
|
974
|
-
MapaCapabilityDetailComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
975
|
-
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
|
|
980
|
+
MapaCapabilityDetailComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityDetailComponent, deps: [{ token: CapabilityClassificationService }], target: i0.ɵɵFactoryTarget.Component });
|
|
981
|
+
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;padding-top:25px}.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: TagComponent, selector: "mapa-tag", inputs: ["color", "size"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
976
982
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityDetailComponent, decorators: [{
|
|
977
983
|
type: Component,
|
|
978
|
-
args: [{ selector: "mapa-capability-detail", encapsulation: ViewEncapsulation.None, template: "<section class=\"capability\">\n <div class=\"capability__core\">\n <div
|
|
979
|
-
}], propDecorators: { data: [{
|
|
984
|
+
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;padding-top:25px}.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"] }]
|
|
985
|
+
}], ctorParameters: function () { return [{ type: CapabilityClassificationService }]; }, propDecorators: { data: [{
|
|
986
|
+
type: Input
|
|
987
|
+
}], showTagInterval: [{
|
|
980
988
|
type: Input
|
|
981
989
|
}] } });
|
|
982
990
|
|
|
@@ -1095,6 +1103,7 @@ MapaCapabilityDetailModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.
|
|
|
1095
1103
|
MapaCapabilityIntervalModule,
|
|
1096
1104
|
MapaCapabilityIntervalBarModule,
|
|
1097
1105
|
MapaCapabilityExpandModule,
|
|
1106
|
+
MapaTagModule$1,
|
|
1098
1107
|
MapaButtonModule$1,
|
|
1099
1108
|
MatIconModule], exports: [MapaCapabilityDetailComponent] });
|
|
1100
1109
|
MapaCapabilityDetailModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityDetailModule, providers: [
|
|
@@ -1105,6 +1114,7 @@ MapaCapabilityDetailModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.
|
|
|
1105
1114
|
MapaCapabilityIntervalModule,
|
|
1106
1115
|
MapaCapabilityIntervalBarModule,
|
|
1107
1116
|
MapaCapabilityExpandModule,
|
|
1117
|
+
MapaTagModule$1,
|
|
1108
1118
|
MapaButtonModule$1,
|
|
1109
1119
|
MatIconModule] });
|
|
1110
1120
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityDetailModule, decorators: [{
|
|
@@ -1121,6 +1131,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
1121
1131
|
MapaCapabilityIntervalModule,
|
|
1122
1132
|
MapaCapabilityIntervalBarModule,
|
|
1123
1133
|
MapaCapabilityExpandModule,
|
|
1134
|
+
MapaTagModule$1,
|
|
1124
1135
|
MapaButtonModule$1,
|
|
1125
1136
|
MatIconModule
|
|
1126
1137
|
],
|