mapa-library-ui 0.73.0 → 0.73.1

package/esm2020/src/lib/components/capability/lib/components/capability/src/capability-interval/capability-interval.component.mjs

@@ -69,10 +69,10 @@ export class MapaCapabilityIntervalComponent {
     }
 }
 MapaCapabilityIntervalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityIntervalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-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\" *ngIf=\"isSVG(); else progressBar\">\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=\"16\"\n      height=\"30\"\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\" *ngIf=\"showInterval\">\n    {{ data.interval }}%\n  </li>\n</ul>\n<ng-template #progressBar>\n  <div class=\"capability__progress-bar\">\n    <div class=\"capability__progress-bar--bg\">\n      <div\n        class=\"capability__progress-bar--filled\"\n        [style.width.%]=\"data.interval\"\n      ></div>\n    </div>\n    <div class=\"capability__interval--result\" *ngIf=\"showInterval\">\n      {{data.interval}}%\n    </div>\n  </div>\n</ng-template>\n", styles: [".capability__interval{font-family:Inter,sans-serif;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{display:flex;align-items:flex-start;text-align:right;font-size:24px;font-style:normal;font-weight:500;height:36px;padding-left:16px}.capability__interval--item{border-radius:6px;margin-right:2px;width:18px;height:34px;position:relative}.capability__interval--item:last-of-type{margin-right:0}.capability__interval--percentage{background-color:#d9d9d9;height:34.57px}.capability__progress-bar{display:flex;align-items:center;justify-content:space-between;color:#2e2a2a;font-size:18px;font-style:normal;font-weight:400;width:310px}.capability__progress-bar--bg{position:relative;background-color:#eee;border-radius:6px;height:8px;width:247px}.capability__progress-bar--filled{position:absolute;top:0;left:0;background-color:#ea561d;border-radius:6px;height:8px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+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\" *ngIf=\"isSVG(); else progressBar\">\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=\"16\"\n      height=\"30\"\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\" *ngIf=\"showInterval\">\n    {{ data.interval }}%\n  </li>\n</ul>\n<ng-template #progressBar>\n  <div class=\"capability__progress-bar\">\n    <div class=\"capability__progress-bar--bg\">\n      <div\n        class=\"capability__progress-bar--filled\"\n        [style.width.%]=\"data.interval\"\n      ></div>\n    </div>\n    <div class=\"capability__interval--result\" *ngIf=\"showInterval\">\n      {{data.interval}}%\n    </div>\n  </div>\n</ng-template>\n", styles: [".capability__interval{font-family:Inter,sans-serif;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{display:flex;align-items:flex-start;justify-content:flex-end;text-align:right;font-size:24px;font-style:normal;font-weight:500;height:36px;padding-left:16px;width:68px}.capability__interval--item{border-radius:6px;margin-right:2px;width:18px;height:34px;position:relative}.capability__interval--item:last-of-type{margin-right:0}.capability__interval--percentage{background-color:#d9d9d9;height:34.57px}.capability__progress-bar{display:flex;align-items:center;justify-content:space-between;color:#2e2a2a;font-size:18px;font-style:normal;font-weight:400;width:310px}.capability__progress-bar--bg{position:relative;background-color:#eee;border-radius:6px;height:8px;width:247px}.capability__progress-bar--filled{position:absolute;top:0;left:0;background-color:#ea561d;border-radius:6px;height:8px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityIntervalComponent, decorators: [{
             type: Component,
-            args: [{ selector: "mapa-capability-interval", template: "<ul class=\"capability__interval\" *ngIf=\"isSVG(); else progressBar\">\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=\"16\"\n      height=\"30\"\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\" *ngIf=\"showInterval\">\n    {{ data.interval }}%\n  </li>\n</ul>\n<ng-template #progressBar>\n  <div class=\"capability__progress-bar\">\n    <div class=\"capability__progress-bar--bg\">\n      <div\n        class=\"capability__progress-bar--filled\"\n        [style.width.%]=\"data.interval\"\n      ></div>\n    </div>\n    <div class=\"capability__interval--result\" *ngIf=\"showInterval\">\n      {{data.interval}}%\n    </div>\n  </div>\n</ng-template>\n", styles: [".capability__interval{font-family:Inter,sans-serif;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{display:flex;align-items:flex-start;text-align:right;font-size:24px;font-style:normal;font-weight:500;height:36px;padding-left:16px}.capability__interval--item{border-radius:6px;margin-right:2px;width:18px;height:34px;position:relative}.capability__interval--item:last-of-type{margin-right:0}.capability__interval--percentage{background-color:#d9d9d9;height:34.57px}.capability__progress-bar{display:flex;align-items:center;justify-content:space-between;color:#2e2a2a;font-size:18px;font-style:normal;font-weight:400;width:310px}.capability__progress-bar--bg{position:relative;background-color:#eee;border-radius:6px;height:8px;width:247px}.capability__progress-bar--filled{position:absolute;top:0;left:0;background-color:#ea561d;border-radius:6px;height:8px}\n"] }]
+            args: [{ selector: "mapa-capability-interval", template: "<ul class=\"capability__interval\" *ngIf=\"isSVG(); else progressBar\">\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=\"16\"\n      height=\"30\"\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\" *ngIf=\"showInterval\">\n    {{ data.interval }}%\n  </li>\n</ul>\n<ng-template #progressBar>\n  <div class=\"capability__progress-bar\">\n    <div class=\"capability__progress-bar--bg\">\n      <div\n        class=\"capability__progress-bar--filled\"\n        [style.width.%]=\"data.interval\"\n      ></div>\n    </div>\n    <div class=\"capability__interval--result\" *ngIf=\"showInterval\">\n      {{data.interval}}%\n    </div>\n  </div>\n</ng-template>\n", styles: [".capability__interval{font-family:Inter,sans-serif;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{display:flex;align-items:flex-start;justify-content:flex-end;text-align:right;font-size:24px;font-style:normal;font-weight:500;height:36px;padding-left:16px;width:68px}.capability__interval--item{border-radius:6px;margin-right:2px;width:18px;height:34px;position:relative}.capability__interval--item:last-of-type{margin-right:0}.capability__interval--percentage{background-color:#d9d9d9;height:34.57px}.capability__progress-bar{display:flex;align-items:center;justify-content:space-between;color:#2e2a2a;font-size:18px;font-style:normal;font-weight:400;width:310px}.capability__progress-bar--bg{position:relative;background-color:#eee;border-radius:6px;height:8px;width:247px}.capability__progress-bar--filled{position:absolute;top:0;left:0;background-color:#ea561d;border-radius:6px;height:8px}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { data: [{
                 type: Input
             }], showInterval: [{

package/esm2020/src/lib/components/group-report/lib/components/capability/src/capability-interval/capability-interval.component.mjs

@@ -69,10 +69,10 @@ export class MapaCapabilityIntervalComponent {
     }
 }
 MapaCapabilityIntervalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityIntervalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-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\" *ngIf=\"isSVG(); else progressBar\">\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=\"16\"\n      height=\"30\"\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\" *ngIf=\"showInterval\">\n    {{ data.interval }}%\n  </li>\n</ul>\n<ng-template #progressBar>\n  <div class=\"capability__progress-bar\">\n    <div class=\"capability__progress-bar--bg\">\n      <div\n        class=\"capability__progress-bar--filled\"\n        [style.width.%]=\"data.interval\"\n      ></div>\n    </div>\n    <div class=\"capability__interval--result\" *ngIf=\"showInterval\">\n      {{data.interval}}%\n    </div>\n  </div>\n</ng-template>\n", styles: [".capability__interval{font-family:Inter,sans-serif;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{display:flex;align-items:flex-start;text-align:right;font-size:24px;font-style:normal;font-weight:500;height:36px;padding-left:16px}.capability__interval--item{border-radius:6px;margin-right:2px;width:18px;height:34px;position:relative}.capability__interval--item:last-of-type{margin-right:0}.capability__interval--percentage{background-color:#d9d9d9;height:34.57px}.capability__progress-bar{display:flex;align-items:center;justify-content:space-between;color:#2e2a2a;font-size:18px;font-style:normal;font-weight:400;width:310px}.capability__progress-bar--bg{position:relative;background-color:#eee;border-radius:6px;height:8px;width:247px}.capability__progress-bar--filled{position:absolute;top:0;left:0;background-color:#ea561d;border-radius:6px;height:8px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+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\" *ngIf=\"isSVG(); else progressBar\">\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=\"16\"\n      height=\"30\"\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\" *ngIf=\"showInterval\">\n    {{ data.interval }}%\n  </li>\n</ul>\n<ng-template #progressBar>\n  <div class=\"capability__progress-bar\">\n    <div class=\"capability__progress-bar--bg\">\n      <div\n        class=\"capability__progress-bar--filled\"\n        [style.width.%]=\"data.interval\"\n      ></div>\n    </div>\n    <div class=\"capability__interval--result\" *ngIf=\"showInterval\">\n      {{data.interval}}%\n    </div>\n  </div>\n</ng-template>\n", styles: [".capability__interval{font-family:Inter,sans-serif;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{display:flex;align-items:flex-start;justify-content:flex-end;text-align:right;font-size:24px;font-style:normal;font-weight:500;height:36px;padding-left:16px;width:68px}.capability__interval--item{border-radius:6px;margin-right:2px;width:18px;height:34px;position:relative}.capability__interval--item:last-of-type{margin-right:0}.capability__interval--percentage{background-color:#d9d9d9;height:34.57px}.capability__progress-bar{display:flex;align-items:center;justify-content:space-between;color:#2e2a2a;font-size:18px;font-style:normal;font-weight:400;width:310px}.capability__progress-bar--bg{position:relative;background-color:#eee;border-radius:6px;height:8px;width:247px}.capability__progress-bar--filled{position:absolute;top:0;left:0;background-color:#ea561d;border-radius:6px;height:8px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityIntervalComponent, decorators: [{
             type: Component,
-            args: [{ selector: "mapa-capability-interval", template: "<ul class=\"capability__interval\" *ngIf=\"isSVG(); else progressBar\">\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=\"16\"\n      height=\"30\"\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\" *ngIf=\"showInterval\">\n    {{ data.interval }}%\n  </li>\n</ul>\n<ng-template #progressBar>\n  <div class=\"capability__progress-bar\">\n    <div class=\"capability__progress-bar--bg\">\n      <div\n        class=\"capability__progress-bar--filled\"\n        [style.width.%]=\"data.interval\"\n      ></div>\n    </div>\n    <div class=\"capability__interval--result\" *ngIf=\"showInterval\">\n      {{data.interval}}%\n    </div>\n  </div>\n</ng-template>\n", styles: [".capability__interval{font-family:Inter,sans-serif;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{display:flex;align-items:flex-start;text-align:right;font-size:24px;font-style:normal;font-weight:500;height:36px;padding-left:16px}.capability__interval--item{border-radius:6px;margin-right:2px;width:18px;height:34px;position:relative}.capability__interval--item:last-of-type{margin-right:0}.capability__interval--percentage{background-color:#d9d9d9;height:34.57px}.capability__progress-bar{display:flex;align-items:center;justify-content:space-between;color:#2e2a2a;font-size:18px;font-style:normal;font-weight:400;width:310px}.capability__progress-bar--bg{position:relative;background-color:#eee;border-radius:6px;height:8px;width:247px}.capability__progress-bar--filled{position:absolute;top:0;left:0;background-color:#ea561d;border-radius:6px;height:8px}\n"] }]
+            args: [{ selector: "mapa-capability-interval", template: "<ul class=\"capability__interval\" *ngIf=\"isSVG(); else progressBar\">\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=\"16\"\n      height=\"30\"\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\" *ngIf=\"showInterval\">\n    {{ data.interval }}%\n  </li>\n</ul>\n<ng-template #progressBar>\n  <div class=\"capability__progress-bar\">\n    <div class=\"capability__progress-bar--bg\">\n      <div\n        class=\"capability__progress-bar--filled\"\n        [style.width.%]=\"data.interval\"\n      ></div>\n    </div>\n    <div class=\"capability__interval--result\" *ngIf=\"showInterval\">\n      {{data.interval}}%\n    </div>\n  </div>\n</ng-template>\n", styles: [".capability__interval{font-family:Inter,sans-serif;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{display:flex;align-items:flex-start;justify-content:flex-end;text-align:right;font-size:24px;font-style:normal;font-weight:500;height:36px;padding-left:16px;width:68px}.capability__interval--item{border-radius:6px;margin-right:2px;width:18px;height:34px;position:relative}.capability__interval--item:last-of-type{margin-right:0}.capability__interval--percentage{background-color:#d9d9d9;height:34.57px}.capability__progress-bar{display:flex;align-items:center;justify-content:space-between;color:#2e2a2a;font-size:18px;font-style:normal;font-weight:400;width:310px}.capability__progress-bar--bg{position:relative;background-color:#eee;border-radius:6px;height:8px;width:247px}.capability__progress-bar--filled{position:absolute;top:0;left:0;background-color:#ea561d;border-radius:6px;height:8px}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { data: [{
                 type: Input
             }], showInterval: [{

package/esm2020/src/lib/components/scale/lib/components/capability/src/capability-interval/capability-interval.component.mjs

@@ -69,10 +69,10 @@ export class MapaCapabilityIntervalComponent {
     }
 }
 MapaCapabilityIntervalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityIntervalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-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\" *ngIf=\"isSVG(); else progressBar\">\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=\"16\"\n      height=\"30\"\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\" *ngIf=\"showInterval\">\n    {{ data.interval }}%\n  </li>\n</ul>\n<ng-template #progressBar>\n  <div class=\"capability__progress-bar\">\n    <div class=\"capability__progress-bar--bg\">\n      <div\n        class=\"capability__progress-bar--filled\"\n        [style.width.%]=\"data.interval\"\n      ></div>\n    </div>\n    <div class=\"capability__interval--result\" *ngIf=\"showInterval\">\n      {{data.interval}}%\n    </div>\n  </div>\n</ng-template>\n", styles: [".capability__interval{font-family:Inter,sans-serif;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{display:flex;align-items:flex-start;text-align:right;font-size:24px;font-style:normal;font-weight:500;height:36px;padding-left:16px}.capability__interval--item{border-radius:6px;margin-right:2px;width:18px;height:34px;position:relative}.capability__interval--item:last-of-type{margin-right:0}.capability__interval--percentage{background-color:#d9d9d9;height:34.57px}.capability__progress-bar{display:flex;align-items:center;justify-content:space-between;color:#2e2a2a;font-size:18px;font-style:normal;font-weight:400;width:310px}.capability__progress-bar--bg{position:relative;background-color:#eee;border-radius:6px;height:8px;width:247px}.capability__progress-bar--filled{position:absolute;top:0;left:0;background-color:#ea561d;border-radius:6px;height:8px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+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\" *ngIf=\"isSVG(); else progressBar\">\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=\"16\"\n      height=\"30\"\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\" *ngIf=\"showInterval\">\n    {{ data.interval }}%\n  </li>\n</ul>\n<ng-template #progressBar>\n  <div class=\"capability__progress-bar\">\n    <div class=\"capability__progress-bar--bg\">\n      <div\n        class=\"capability__progress-bar--filled\"\n        [style.width.%]=\"data.interval\"\n      ></div>\n    </div>\n    <div class=\"capability__interval--result\" *ngIf=\"showInterval\">\n      {{data.interval}}%\n    </div>\n  </div>\n</ng-template>\n", styles: [".capability__interval{font-family:Inter,sans-serif;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{display:flex;align-items:flex-start;justify-content:flex-end;text-align:right;font-size:24px;font-style:normal;font-weight:500;height:36px;padding-left:16px;width:68px}.capability__interval--item{border-radius:6px;margin-right:2px;width:18px;height:34px;position:relative}.capability__interval--item:last-of-type{margin-right:0}.capability__interval--percentage{background-color:#d9d9d9;height:34.57px}.capability__progress-bar{display:flex;align-items:center;justify-content:space-between;color:#2e2a2a;font-size:18px;font-style:normal;font-weight:400;width:310px}.capability__progress-bar--bg{position:relative;background-color:#eee;border-radius:6px;height:8px;width:247px}.capability__progress-bar--filled{position:absolute;top:0;left:0;background-color:#ea561d;border-radius:6px;height:8px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityIntervalComponent, decorators: [{
             type: Component,
-            args: [{ selector: "mapa-capability-interval", template: "<ul class=\"capability__interval\" *ngIf=\"isSVG(); else progressBar\">\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=\"16\"\n      height=\"30\"\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\" *ngIf=\"showInterval\">\n    {{ data.interval }}%\n  </li>\n</ul>\n<ng-template #progressBar>\n  <div class=\"capability__progress-bar\">\n    <div class=\"capability__progress-bar--bg\">\n      <div\n        class=\"capability__progress-bar--filled\"\n        [style.width.%]=\"data.interval\"\n      ></div>\n    </div>\n    <div class=\"capability__interval--result\" *ngIf=\"showInterval\">\n      {{data.interval}}%\n    </div>\n  </div>\n</ng-template>\n", styles: [".capability__interval{font-family:Inter,sans-serif;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{display:flex;align-items:flex-start;text-align:right;font-size:24px;font-style:normal;font-weight:500;height:36px;padding-left:16px}.capability__interval--item{border-radius:6px;margin-right:2px;width:18px;height:34px;position:relative}.capability__interval--item:last-of-type{margin-right:0}.capability__interval--percentage{background-color:#d9d9d9;height:34.57px}.capability__progress-bar{display:flex;align-items:center;justify-content:space-between;color:#2e2a2a;font-size:18px;font-style:normal;font-weight:400;width:310px}.capability__progress-bar--bg{position:relative;background-color:#eee;border-radius:6px;height:8px;width:247px}.capability__progress-bar--filled{position:absolute;top:0;left:0;background-color:#ea561d;border-radius:6px;height:8px}\n"] }]
+            args: [{ selector: "mapa-capability-interval", template: "<ul class=\"capability__interval\" *ngIf=\"isSVG(); else progressBar\">\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=\"16\"\n      height=\"30\"\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\" *ngIf=\"showInterval\">\n    {{ data.interval }}%\n  </li>\n</ul>\n<ng-template #progressBar>\n  <div class=\"capability__progress-bar\">\n    <div class=\"capability__progress-bar--bg\">\n      <div\n        class=\"capability__progress-bar--filled\"\n        [style.width.%]=\"data.interval\"\n      ></div>\n    </div>\n    <div class=\"capability__interval--result\" *ngIf=\"showInterval\">\n      {{data.interval}}%\n    </div>\n  </div>\n</ng-template>\n", styles: [".capability__interval{font-family:Inter,sans-serif;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{display:flex;align-items:flex-start;justify-content:flex-end;text-align:right;font-size:24px;font-style:normal;font-weight:500;height:36px;padding-left:16px;width:68px}.capability__interval--item{border-radius:6px;margin-right:2px;width:18px;height:34px;position:relative}.capability__interval--item:last-of-type{margin-right:0}.capability__interval--percentage{background-color:#d9d9d9;height:34.57px}.capability__progress-bar{display:flex;align-items:center;justify-content:space-between;color:#2e2a2a;font-size:18px;font-style:normal;font-weight:400;width:310px}.capability__progress-bar--bg{position:relative;background-color:#eee;border-radius:6px;height:8px;width:247px}.capability__progress-bar--filled{position:absolute;top:0;left:0;background-color:#ea561d;border-radius:6px;height:8px}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { data: [{
                 type: Input
             }], showInterval: [{

package/esm2020/src/lib/components/scale-parameterization/lib/components/capability/src/capability-interval/capability-interval.component.mjs

@@ -69,10 +69,10 @@ export class MapaCapabilityIntervalComponent {
     }
 }
 MapaCapabilityIntervalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityIntervalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-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\" *ngIf=\"isSVG(); else progressBar\">\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=\"16\"\n      height=\"30\"\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\" *ngIf=\"showInterval\">\n    {{ data.interval }}%\n  </li>\n</ul>\n<ng-template #progressBar>\n  <div class=\"capability__progress-bar\">\n    <div class=\"capability__progress-bar--bg\">\n      <div\n        class=\"capability__progress-bar--filled\"\n        [style.width.%]=\"data.interval\"\n      ></div>\n    </div>\n    <div class=\"capability__interval--result\" *ngIf=\"showInterval\">\n      {{data.interval}}%\n    </div>\n  </div>\n</ng-template>\n", styles: [".capability__interval{font-family:Inter,sans-serif;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{display:flex;align-items:flex-start;text-align:right;font-size:24px;font-style:normal;font-weight:500;height:36px;padding-left:16px}.capability__interval--item{border-radius:6px;margin-right:2px;width:18px;height:34px;position:relative}.capability__interval--item:last-of-type{margin-right:0}.capability__interval--percentage{background-color:#d9d9d9;height:34.57px}.capability__progress-bar{display:flex;align-items:center;justify-content:space-between;color:#2e2a2a;font-size:18px;font-style:normal;font-weight:400;width:310px}.capability__progress-bar--bg{position:relative;background-color:#eee;border-radius:6px;height:8px;width:247px}.capability__progress-bar--filled{position:absolute;top:0;left:0;background-color:#ea561d;border-radius:6px;height:8px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+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\" *ngIf=\"isSVG(); else progressBar\">\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=\"16\"\n      height=\"30\"\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\" *ngIf=\"showInterval\">\n    {{ data.interval }}%\n  </li>\n</ul>\n<ng-template #progressBar>\n  <div class=\"capability__progress-bar\">\n    <div class=\"capability__progress-bar--bg\">\n      <div\n        class=\"capability__progress-bar--filled\"\n        [style.width.%]=\"data.interval\"\n      ></div>\n    </div>\n    <div class=\"capability__interval--result\" *ngIf=\"showInterval\">\n      {{data.interval}}%\n    </div>\n  </div>\n</ng-template>\n", styles: [".capability__interval{font-family:Inter,sans-serif;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{display:flex;align-items:flex-start;justify-content:flex-end;text-align:right;font-size:24px;font-style:normal;font-weight:500;height:36px;padding-left:16px;width:68px}.capability__interval--item{border-radius:6px;margin-right:2px;width:18px;height:34px;position:relative}.capability__interval--item:last-of-type{margin-right:0}.capability__interval--percentage{background-color:#d9d9d9;height:34.57px}.capability__progress-bar{display:flex;align-items:center;justify-content:space-between;color:#2e2a2a;font-size:18px;font-style:normal;font-weight:400;width:310px}.capability__progress-bar--bg{position:relative;background-color:#eee;border-radius:6px;height:8px;width:247px}.capability__progress-bar--filled{position:absolute;top:0;left:0;background-color:#ea561d;border-radius:6px;height:8px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityIntervalComponent, decorators: [{
             type: Component,
-            args: [{ selector: "mapa-capability-interval", template: "<ul class=\"capability__interval\" *ngIf=\"isSVG(); else progressBar\">\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=\"16\"\n      height=\"30\"\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\" *ngIf=\"showInterval\">\n    {{ data.interval }}%\n  </li>\n</ul>\n<ng-template #progressBar>\n  <div class=\"capability__progress-bar\">\n    <div class=\"capability__progress-bar--bg\">\n      <div\n        class=\"capability__progress-bar--filled\"\n        [style.width.%]=\"data.interval\"\n      ></div>\n    </div>\n    <div class=\"capability__interval--result\" *ngIf=\"showInterval\">\n      {{data.interval}}%\n    </div>\n  </div>\n</ng-template>\n", styles: [".capability__interval{font-family:Inter,sans-serif;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{display:flex;align-items:flex-start;text-align:right;font-size:24px;font-style:normal;font-weight:500;height:36px;padding-left:16px}.capability__interval--item{border-radius:6px;margin-right:2px;width:18px;height:34px;position:relative}.capability__interval--item:last-of-type{margin-right:0}.capability__interval--percentage{background-color:#d9d9d9;height:34.57px}.capability__progress-bar{display:flex;align-items:center;justify-content:space-between;color:#2e2a2a;font-size:18px;font-style:normal;font-weight:400;width:310px}.capability__progress-bar--bg{position:relative;background-color:#eee;border-radius:6px;height:8px;width:247px}.capability__progress-bar--filled{position:absolute;top:0;left:0;background-color:#ea561d;border-radius:6px;height:8px}\n"] }]
+            args: [{ selector: "mapa-capability-interval", template: "<ul class=\"capability__interval\" *ngIf=\"isSVG(); else progressBar\">\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=\"16\"\n      height=\"30\"\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\" *ngIf=\"showInterval\">\n    {{ data.interval }}%\n  </li>\n</ul>\n<ng-template #progressBar>\n  <div class=\"capability__progress-bar\">\n    <div class=\"capability__progress-bar--bg\">\n      <div\n        class=\"capability__progress-bar--filled\"\n        [style.width.%]=\"data.interval\"\n      ></div>\n    </div>\n    <div class=\"capability__interval--result\" *ngIf=\"showInterval\">\n      {{data.interval}}%\n    </div>\n  </div>\n</ng-template>\n", styles: [".capability__interval{font-family:Inter,sans-serif;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{display:flex;align-items:flex-start;justify-content:flex-end;text-align:right;font-size:24px;font-style:normal;font-weight:500;height:36px;padding-left:16px;width:68px}.capability__interval--item{border-radius:6px;margin-right:2px;width:18px;height:34px;position:relative}.capability__interval--item:last-of-type{margin-right:0}.capability__interval--percentage{background-color:#d9d9d9;height:34.57px}.capability__progress-bar{display:flex;align-items:center;justify-content:space-between;color:#2e2a2a;font-size:18px;font-style:normal;font-weight:400;width:310px}.capability__progress-bar--bg{position:relative;background-color:#eee;border-radius:6px;height:8px;width:247px}.capability__progress-bar--filled{position:absolute;top:0;left:0;background-color:#ea561d;border-radius:6px;height:8px}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { data: [{
                 type: Input
             }], showInterval: [{

package/fesm2015/mapa-library-ui-src-lib-components-capability.mjs

@@ -809,10 +809,10 @@ class MapaCapabilityIntervalComponent {
     }
 }
 MapaCapabilityIntervalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityIntervalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-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\" *ngIf=\"isSVG(); else progressBar\">\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=\"16\"\n      height=\"30\"\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\" *ngIf=\"showInterval\">\n    {{ data.interval }}%\n  </li>\n</ul>\n<ng-template #progressBar>\n  <div class=\"capability__progress-bar\">\n    <div class=\"capability__progress-bar--bg\">\n      <div\n        class=\"capability__progress-bar--filled\"\n        [style.width.%]=\"data.interval\"\n      ></div>\n    </div>\n    <div class=\"capability__interval--result\" *ngIf=\"showInterval\">\n      {{data.interval}}%\n    </div>\n  </div>\n</ng-template>\n", styles: [".capability__interval{font-family:Inter,sans-serif;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{display:flex;align-items:flex-start;text-align:right;font-size:24px;font-style:normal;font-weight:500;height:36px;padding-left:16px}.capability__interval--item{border-radius:6px;margin-right:2px;width:18px;height:34px;position:relative}.capability__interval--item:last-of-type{margin-right:0}.capability__interval--percentage{background-color:#d9d9d9;height:34.57px}.capability__progress-bar{display:flex;align-items:center;justify-content:space-between;color:#2e2a2a;font-size:18px;font-style:normal;font-weight:400;width:310px}.capability__progress-bar--bg{position:relative;background-color:#eee;border-radius:6px;height:8px;width:247px}.capability__progress-bar--filled{position:absolute;top:0;left:0;background-color:#ea561d;border-radius:6px;height:8px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+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\" *ngIf=\"isSVG(); else progressBar\">\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=\"16\"\n      height=\"30\"\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\" *ngIf=\"showInterval\">\n    {{ data.interval }}%\n  </li>\n</ul>\n<ng-template #progressBar>\n  <div class=\"capability__progress-bar\">\n    <div class=\"capability__progress-bar--bg\">\n      <div\n        class=\"capability__progress-bar--filled\"\n        [style.width.%]=\"data.interval\"\n      ></div>\n    </div>\n    <div class=\"capability__interval--result\" *ngIf=\"showInterval\">\n      {{data.interval}}%\n    </div>\n  </div>\n</ng-template>\n", styles: [".capability__interval{font-family:Inter,sans-serif;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{display:flex;align-items:flex-start;justify-content:flex-end;text-align:right;font-size:24px;font-style:normal;font-weight:500;height:36px;padding-left:16px;width:68px}.capability__interval--item{border-radius:6px;margin-right:2px;width:18px;height:34px;position:relative}.capability__interval--item:last-of-type{margin-right:0}.capability__interval--percentage{background-color:#d9d9d9;height:34.57px}.capability__progress-bar{display:flex;align-items:center;justify-content:space-between;color:#2e2a2a;font-size:18px;font-style:normal;font-weight:400;width:310px}.capability__progress-bar--bg{position:relative;background-color:#eee;border-radius:6px;height:8px;width:247px}.capability__progress-bar--filled{position:absolute;top:0;left:0;background-color:#ea561d;border-radius:6px;height:8px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityIntervalComponent, decorators: [{
             type: Component,
-            args: [{ selector: "mapa-capability-interval", template: "<ul class=\"capability__interval\" *ngIf=\"isSVG(); else progressBar\">\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=\"16\"\n      height=\"30\"\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\" *ngIf=\"showInterval\">\n    {{ data.interval }}%\n  </li>\n</ul>\n<ng-template #progressBar>\n  <div class=\"capability__progress-bar\">\n    <div class=\"capability__progress-bar--bg\">\n      <div\n        class=\"capability__progress-bar--filled\"\n        [style.width.%]=\"data.interval\"\n      ></div>\n    </div>\n    <div class=\"capability__interval--result\" *ngIf=\"showInterval\">\n      {{data.interval}}%\n    </div>\n  </div>\n</ng-template>\n", styles: [".capability__interval{font-family:Inter,sans-serif;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{display:flex;align-items:flex-start;text-align:right;font-size:24px;font-style:normal;font-weight:500;height:36px;padding-left:16px}.capability__interval--item{border-radius:6px;margin-right:2px;width:18px;height:34px;position:relative}.capability__interval--item:last-of-type{margin-right:0}.capability__interval--percentage{background-color:#d9d9d9;height:34.57px}.capability__progress-bar{display:flex;align-items:center;justify-content:space-between;color:#2e2a2a;font-size:18px;font-style:normal;font-weight:400;width:310px}.capability__progress-bar--bg{position:relative;background-color:#eee;border-radius:6px;height:8px;width:247px}.capability__progress-bar--filled{position:absolute;top:0;left:0;background-color:#ea561d;border-radius:6px;height:8px}\n"] }]
+            args: [{ selector: "mapa-capability-interval", template: "<ul class=\"capability__interval\" *ngIf=\"isSVG(); else progressBar\">\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=\"16\"\n      height=\"30\"\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\" *ngIf=\"showInterval\">\n    {{ data.interval }}%\n  </li>\n</ul>\n<ng-template #progressBar>\n  <div class=\"capability__progress-bar\">\n    <div class=\"capability__progress-bar--bg\">\n      <div\n        class=\"capability__progress-bar--filled\"\n        [style.width.%]=\"data.interval\"\n      ></div>\n    </div>\n    <div class=\"capability__interval--result\" *ngIf=\"showInterval\">\n      {{data.interval}}%\n    </div>\n  </div>\n</ng-template>\n", styles: [".capability__interval{font-family:Inter,sans-serif;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{display:flex;align-items:flex-start;justify-content:flex-end;text-align:right;font-size:24px;font-style:normal;font-weight:500;height:36px;padding-left:16px;width:68px}.capability__interval--item{border-radius:6px;margin-right:2px;width:18px;height:34px;position:relative}.capability__interval--item:last-of-type{margin-right:0}.capability__interval--percentage{background-color:#d9d9d9;height:34.57px}.capability__progress-bar{display:flex;align-items:center;justify-content:space-between;color:#2e2a2a;font-size:18px;font-style:normal;font-weight:400;width:310px}.capability__progress-bar--bg{position:relative;background-color:#eee;border-radius:6px;height:8px;width:247px}.capability__progress-bar--filled{position:absolute;top:0;left:0;background-color:#ea561d;border-radius:6px;height:8px}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { data: [{
                 type: Input
             }], showInterval: [{