mapa-library-ui 2.5.1 → 2.5.3
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.
|
@@ -8436,6 +8436,7 @@ class MapaResultTrackComponent {
|
|
|
8436
8436
|
this.color = input('#ff560b', ...(ngDevMode ? [{ debugName: "color" }] : []));
|
|
8437
8437
|
this.mode = input('linear', ...(ngDevMode ? [{ debugName: "mode" }] : []));
|
|
8438
8438
|
this.appearance = input('rounded', ...(ngDevMode ? [{ debugName: "appearance" }] : []));
|
|
8439
|
+
this.style = input('thick', ...(ngDevMode ? [{ debugName: "style" }] : []));
|
|
8439
8440
|
this.direction = input('positive', ...(ngDevMode ? [{ debugName: "direction" }] : []));
|
|
8440
8441
|
this.showValue = input(true, ...(ngDevMode ? [{ debugName: "showValue" }] : []));
|
|
8441
8442
|
this.ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : []));
|
|
@@ -8465,12 +8466,12 @@ class MapaResultTrackComponent {
|
|
|
8465
8466
|
return Math.min(100, Math.max(0, (this.safeValue() - step * 10) * 10));
|
|
8466
8467
|
}
|
|
8467
8468
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaResultTrackComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8468
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.21", type: MapaResultTrackComponent, isStandalone: true, selector: "mapa-result-track", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n class=\"mapa-result-track\"\n [class.mapa-result-track--plain]=\"!showValue()\"\n [class.mapa-result-track--segmented]=\"appearance() === 'segmented'\"\n [class.mapa-result-track--stepped]=\"appearance() === 'stepped'\"\n role=\"meter\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n [attr.aria-valuenow]=\"safeValue()\"\n [attr.aria-label]=\"label()\"\n [style.--mapa-result-color]=\"color()\"\n [style.--mapa-result-left]=\"fillLeft() + '%'\"\n [style.--mapa-result-width]=\"fillWidth() + '%'\"\n [style.--mapa-result-position]=\"badgePosition() + '%'\"\n>\n @if (appearance() === \"stepped\") {\n <span class=\"mapa-result-track__steps\" aria-hidden=\"true\">\n @for (step of steps; track step) {\n <i\n [class.mapa-result-track__step--filled]=\"step < filledSteps()\"\n [style.--mapa-result-step-fill]=\"stepFill(step) + '%'\"\n ></i>\n }\n </span>\n @if (showValue()) {\n <strong class=\"mapa-result-track__value\" aria-hidden=\"true\"\n >{{ safeValue() }}%</strong\n >\n }\n } @else {\n <span class=\"mapa-result-track__rail\" aria-hidden=\"true\">\n @if (mode() === \"diverging\") {\n <span class=\"mapa-result-track__midpoint\"></span>\n }\n <span\n class=\"mapa-result-track__fill\"\n [class.negative]=\"mode() === 'diverging' && direction() === 'negative'\"\n [class.positive]=\"mode() === 'diverging' && direction() === 'positive'\"\n ></span>\n </span>\n @if (showValue()) {\n <span class=\"mapa-result-track__badge\" aria-hidden=\"true\"\n >{{ safeValue() }}%</span\n >\n }\n }\n</div>\n", styles: [".mapa-result-track{--mapa-result-badge-height: 24px;--mapa-result-fill-height: calc(var(--mapa-result-track-height, 14px) - 2px);min-height:28px;padding:10px 0 8px;position:relative}.mapa-result-track .negative{border-top-right-radius:0%;border-bottom-right-radius:0%}.mapa-result-track .positive{border-top-left-radius:0%;border-bottom-left-radius:0%}.mapa-result-track__rail{background:#e7ebed;border-radius:999px;display:block;height:var(--mapa-result-track-height, 14px);overflow:visible;position:relative}.mapa-result-track__fill{background:var(--mapa-result-color);border-radius:999px;height:var(--mapa-result-fill-height);left:var(--mapa-result-left);position:absolute;top:50%;transform:translateY(-50%);width:var(--mapa-result-width)}.mapa-result-track__midpoint{background:#aeb7bc;height:10px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:1px}.mapa-result-track__badge{align-items:center;background:#fff;border:2px solid var(--mapa-result-color);border-radius:999px;box-sizing:border-box;color:var(--mapa-result-color);display:inline-flex;font:650 10px/1 var(--mapa-font-body, \"Asap\", sans-serif);height:var(--mapa-result-badge-height);justify-content:center;left:clamp(18px,var(--mapa-result-position),100% - 18px);min-width:34px;padding:0 5px;position:absolute;text-align:center;top:6px;transform:translate(-50%);z-index:1}.mapa-result-track--plain{min-height:0;padding:0}.mapa-result-track--segmented{--mapa-result-badge-height: 22px;--mapa-result-fill-height: 12px;min-height:24px;padding:3px 0}.mapa-result-track--segmented .mapa-result-track__rail{background:repeating-linear-gradient(90deg,#fff 0 calc(20% - 1px),#d9e0e3 calc(20% - 1px) 20%);border:1px solid #d9e0e3;border-radius:0;height:18px}.mapa-result-track--segmented .mapa-result-track__fill{border-radius:0}.mapa-result-track--segmented .mapa-result-track__badge{background:#fff;border-width:1px;min-width:29px;padding:0 4px;top:50%;transform:translate(-50%,-50%)}.mapa-result-track--stepped{align-items:center;display:grid;gap:12px;grid-template-columns:minmax(0,1fr) auto;min-height:40px;padding:0;width:100%}.mapa-result-track--stepped .mapa-result-track__steps{display:grid;gap:5px;grid-template-columns:repeat(10,minmax(0,
|
|
8469
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.21", type: MapaResultTrackComponent, isStandalone: true, selector: "mapa-result-track", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n class=\"mapa-result-track\"\n [class.mapa-result-track--plain]=\"!showValue()\"\n [class.mapa-result-track--segmented]=\"appearance() === 'segmented'\"\n [class.mapa-result-track--stepped]=\"appearance() === 'stepped'\"\n [class.mapa-result-track--thin]=\"style() === 'thin'\"\n role=\"meter\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n [attr.aria-valuenow]=\"safeValue()\"\n [attr.aria-label]=\"label()\"\n [style.--mapa-result-color]=\"color()\"\n [style.--mapa-result-left]=\"fillLeft() + '%'\"\n [style.--mapa-result-width]=\"fillWidth() + '%'\"\n [style.--mapa-result-position]=\"badgePosition() + '%'\"\n>\n @if (appearance() === \"stepped\") {\n <span class=\"mapa-result-track__steps\" aria-hidden=\"true\">\n @for (step of steps; track step) {\n <i\n [class.mapa-result-track__step--filled]=\"step < filledSteps()\"\n [style.--mapa-result-step-fill]=\"stepFill(step) + '%'\"\n ></i>\n }\n </span>\n @if (showValue()) {\n <strong class=\"mapa-result-track__value\" aria-hidden=\"true\"\n >{{ safeValue() }}%</strong\n >\n }\n } @else {\n <span class=\"mapa-result-track__rail\" aria-hidden=\"true\">\n @if (mode() === \"diverging\") {\n <span class=\"mapa-result-track__midpoint\"></span>\n }\n <span\n class=\"mapa-result-track__fill\"\n [class.negative]=\"mode() === 'diverging' && direction() === 'negative'\"\n [class.positive]=\"mode() === 'diverging' && direction() === 'positive'\"\n ></span>\n </span>\n @if (showValue()) {\n <span class=\"mapa-result-track__badge\" aria-hidden=\"true\"\n >{{ safeValue() }}%</span\n >\n }\n }\n</div>\n", styles: [".mapa-result-track{--mapa-result-badge-height: 24px;--mapa-result-fill-height: calc(var(--mapa-result-track-height, 14px) - 2px);min-height:28px;padding:10px 0 8px;position:relative}.mapa-result-track .negative{border-top-right-radius:0%;border-bottom-right-radius:0%}.mapa-result-track .positive{border-top-left-radius:0%;border-bottom-left-radius:0%}.mapa-result-track__rail{background:#e7ebed;border-radius:999px;display:block;height:var(--mapa-result-track-height, 14px);overflow:visible;position:relative}.mapa-result-track__fill{background:var(--mapa-result-color);border-radius:999px;height:var(--mapa-result-fill-height);left:var(--mapa-result-left);position:absolute;top:50%;transform:translateY(-50%);width:var(--mapa-result-width)}.mapa-result-track__midpoint{background:#aeb7bc;height:10px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:1px}.mapa-result-track__badge{align-items:center;background:#fff;border:2px solid var(--mapa-result-color);border-radius:999px;box-sizing:border-box;color:var(--mapa-result-color);display:inline-flex;font:650 10px/1 var(--mapa-font-body, \"Asap\", sans-serif);height:var(--mapa-result-badge-height);justify-content:center;left:clamp(18px,var(--mapa-result-position),100% - 18px);min-width:34px;padding:0 5px;position:absolute;text-align:center;top:6px;transform:translate(-50%);z-index:1}.mapa-result-track--plain{min-height:0;padding:0}.mapa-result-track--segmented{--mapa-result-badge-height: 22px;--mapa-result-fill-height: 12px;min-height:24px;padding:3px 0}.mapa-result-track--segmented .mapa-result-track__rail{background:repeating-linear-gradient(90deg,#fff 0 calc(20% - 1px),#d9e0e3 calc(20% - 1px) 20%);border:1px solid #d9e0e3;border-radius:0;height:18px}.mapa-result-track--segmented .mapa-result-track__fill{border-radius:0}.mapa-result-track--segmented .mapa-result-track__badge{background:#fff;border-width:1px;min-width:29px;padding:0 4px;top:50%;transform:translate(-50%,-50%)}.mapa-result-track--stepped{--mapa-result-step-height: 40px;--mapa-result-step-radius: 7px;--mapa-result-step-width: 18px;--mapa-result-value-font-size: 17px;--mapa-result-value-min-width: 44px;align-items:center;display:grid;gap:12px;grid-template-columns:minmax(0,1fr) auto;min-height:40px;padding:0;width:100%}.mapa-result-track--stepped .mapa-result-track__steps{display:grid;gap:5px;grid-template-columns:repeat(10,minmax(0,var(--mapa-result-step-width)));min-width:0;width:100%}.mapa-result-track--stepped .mapa-result-track__steps i{background:#d8dee7;border-radius:var(--mapa-result-step-radius);display:block;height:var(--mapa-result-step-height);min-width:0;overflow:hidden}.mapa-result-track--stepped .mapa-result-track__steps i:before{background:var(--mapa-result-color);content:\"\";display:block;height:100%;width:var(--mapa-result-step-fill, 0%)}.mapa-result-track--stepped .mapa-result-track__value{color:var(--mapa-result-color);font-size:var(--mapa-result-value-font-size);min-width:var(--mapa-result-value-min-width)}.mapa-result-track--stepped.mapa-result-track--thin{--mapa-result-step-height: 30px;--mapa-result-step-radius: 5px;--mapa-result-step-width: 10px;--mapa-result-value-font-size: 14px;--mapa-result-value-min-width: 36px;min-height:30px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8469
8470
|
}
|
|
8470
8471
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaResultTrackComponent, decorators: [{
|
|
8471
8472
|
type: Component,
|
|
8472
|
-
args: [{ selector: 'mapa-result-track', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"mapa-result-track\"\n [class.mapa-result-track--plain]=\"!showValue()\"\n [class.mapa-result-track--segmented]=\"appearance() === 'segmented'\"\n [class.mapa-result-track--stepped]=\"appearance() === 'stepped'\"\n role=\"meter\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n [attr.aria-valuenow]=\"safeValue()\"\n [attr.aria-label]=\"label()\"\n [style.--mapa-result-color]=\"color()\"\n [style.--mapa-result-left]=\"fillLeft() + '%'\"\n [style.--mapa-result-width]=\"fillWidth() + '%'\"\n [style.--mapa-result-position]=\"badgePosition() + '%'\"\n>\n @if (appearance() === \"stepped\") {\n <span class=\"mapa-result-track__steps\" aria-hidden=\"true\">\n @for (step of steps; track step) {\n <i\n [class.mapa-result-track__step--filled]=\"step < filledSteps()\"\n [style.--mapa-result-step-fill]=\"stepFill(step) + '%'\"\n ></i>\n }\n </span>\n @if (showValue()) {\n <strong class=\"mapa-result-track__value\" aria-hidden=\"true\"\n >{{ safeValue() }}%</strong\n >\n }\n } @else {\n <span class=\"mapa-result-track__rail\" aria-hidden=\"true\">\n @if (mode() === \"diverging\") {\n <span class=\"mapa-result-track__midpoint\"></span>\n }\n <span\n class=\"mapa-result-track__fill\"\n [class.negative]=\"mode() === 'diverging' && direction() === 'negative'\"\n [class.positive]=\"mode() === 'diverging' && direction() === 'positive'\"\n ></span>\n </span>\n @if (showValue()) {\n <span class=\"mapa-result-track__badge\" aria-hidden=\"true\"\n >{{ safeValue() }}%</span\n >\n }\n }\n</div>\n", styles: [".mapa-result-track{--mapa-result-badge-height: 24px;--mapa-result-fill-height: calc(var(--mapa-result-track-height, 14px) - 2px);min-height:28px;padding:10px 0 8px;position:relative}.mapa-result-track .negative{border-top-right-radius:0%;border-bottom-right-radius:0%}.mapa-result-track .positive{border-top-left-radius:0%;border-bottom-left-radius:0%}.mapa-result-track__rail{background:#e7ebed;border-radius:999px;display:block;height:var(--mapa-result-track-height, 14px);overflow:visible;position:relative}.mapa-result-track__fill{background:var(--mapa-result-color);border-radius:999px;height:var(--mapa-result-fill-height);left:var(--mapa-result-left);position:absolute;top:50%;transform:translateY(-50%);width:var(--mapa-result-width)}.mapa-result-track__midpoint{background:#aeb7bc;height:10px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:1px}.mapa-result-track__badge{align-items:center;background:#fff;border:2px solid var(--mapa-result-color);border-radius:999px;box-sizing:border-box;color:var(--mapa-result-color);display:inline-flex;font:650 10px/1 var(--mapa-font-body, \"Asap\", sans-serif);height:var(--mapa-result-badge-height);justify-content:center;left:clamp(18px,var(--mapa-result-position),100% - 18px);min-width:34px;padding:0 5px;position:absolute;text-align:center;top:6px;transform:translate(-50%);z-index:1}.mapa-result-track--plain{min-height:0;padding:0}.mapa-result-track--segmented{--mapa-result-badge-height: 22px;--mapa-result-fill-height: 12px;min-height:24px;padding:3px 0}.mapa-result-track--segmented .mapa-result-track__rail{background:repeating-linear-gradient(90deg,#fff 0 calc(20% - 1px),#d9e0e3 calc(20% - 1px) 20%);border:1px solid #d9e0e3;border-radius:0;height:18px}.mapa-result-track--segmented .mapa-result-track__fill{border-radius:0}.mapa-result-track--segmented .mapa-result-track__badge{background:#fff;border-width:1px;min-width:29px;padding:0 4px;top:50%;transform:translate(-50%,-50%)}.mapa-result-track--stepped{align-items:center;display:grid;gap:12px;grid-template-columns:minmax(0,1fr) auto;min-height:40px;padding:0;width:100%}.mapa-result-track--stepped .mapa-result-track__steps{display:grid;gap:5px;grid-template-columns:repeat(10,minmax(0,
|
|
8473
|
-
}], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], showValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValue", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
|
|
8473
|
+
args: [{ selector: 'mapa-result-track', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"mapa-result-track\"\n [class.mapa-result-track--plain]=\"!showValue()\"\n [class.mapa-result-track--segmented]=\"appearance() === 'segmented'\"\n [class.mapa-result-track--stepped]=\"appearance() === 'stepped'\"\n [class.mapa-result-track--thin]=\"style() === 'thin'\"\n role=\"meter\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n [attr.aria-valuenow]=\"safeValue()\"\n [attr.aria-label]=\"label()\"\n [style.--mapa-result-color]=\"color()\"\n [style.--mapa-result-left]=\"fillLeft() + '%'\"\n [style.--mapa-result-width]=\"fillWidth() + '%'\"\n [style.--mapa-result-position]=\"badgePosition() + '%'\"\n>\n @if (appearance() === \"stepped\") {\n <span class=\"mapa-result-track__steps\" aria-hidden=\"true\">\n @for (step of steps; track step) {\n <i\n [class.mapa-result-track__step--filled]=\"step < filledSteps()\"\n [style.--mapa-result-step-fill]=\"stepFill(step) + '%'\"\n ></i>\n }\n </span>\n @if (showValue()) {\n <strong class=\"mapa-result-track__value\" aria-hidden=\"true\"\n >{{ safeValue() }}%</strong\n >\n }\n } @else {\n <span class=\"mapa-result-track__rail\" aria-hidden=\"true\">\n @if (mode() === \"diverging\") {\n <span class=\"mapa-result-track__midpoint\"></span>\n }\n <span\n class=\"mapa-result-track__fill\"\n [class.negative]=\"mode() === 'diverging' && direction() === 'negative'\"\n [class.positive]=\"mode() === 'diverging' && direction() === 'positive'\"\n ></span>\n </span>\n @if (showValue()) {\n <span class=\"mapa-result-track__badge\" aria-hidden=\"true\"\n >{{ safeValue() }}%</span\n >\n }\n }\n</div>\n", styles: [".mapa-result-track{--mapa-result-badge-height: 24px;--mapa-result-fill-height: calc(var(--mapa-result-track-height, 14px) - 2px);min-height:28px;padding:10px 0 8px;position:relative}.mapa-result-track .negative{border-top-right-radius:0%;border-bottom-right-radius:0%}.mapa-result-track .positive{border-top-left-radius:0%;border-bottom-left-radius:0%}.mapa-result-track__rail{background:#e7ebed;border-radius:999px;display:block;height:var(--mapa-result-track-height, 14px);overflow:visible;position:relative}.mapa-result-track__fill{background:var(--mapa-result-color);border-radius:999px;height:var(--mapa-result-fill-height);left:var(--mapa-result-left);position:absolute;top:50%;transform:translateY(-50%);width:var(--mapa-result-width)}.mapa-result-track__midpoint{background:#aeb7bc;height:10px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:1px}.mapa-result-track__badge{align-items:center;background:#fff;border:2px solid var(--mapa-result-color);border-radius:999px;box-sizing:border-box;color:var(--mapa-result-color);display:inline-flex;font:650 10px/1 var(--mapa-font-body, \"Asap\", sans-serif);height:var(--mapa-result-badge-height);justify-content:center;left:clamp(18px,var(--mapa-result-position),100% - 18px);min-width:34px;padding:0 5px;position:absolute;text-align:center;top:6px;transform:translate(-50%);z-index:1}.mapa-result-track--plain{min-height:0;padding:0}.mapa-result-track--segmented{--mapa-result-badge-height: 22px;--mapa-result-fill-height: 12px;min-height:24px;padding:3px 0}.mapa-result-track--segmented .mapa-result-track__rail{background:repeating-linear-gradient(90deg,#fff 0 calc(20% - 1px),#d9e0e3 calc(20% - 1px) 20%);border:1px solid #d9e0e3;border-radius:0;height:18px}.mapa-result-track--segmented .mapa-result-track__fill{border-radius:0}.mapa-result-track--segmented .mapa-result-track__badge{background:#fff;border-width:1px;min-width:29px;padding:0 4px;top:50%;transform:translate(-50%,-50%)}.mapa-result-track--stepped{--mapa-result-step-height: 40px;--mapa-result-step-radius: 7px;--mapa-result-step-width: 18px;--mapa-result-value-font-size: 17px;--mapa-result-value-min-width: 44px;align-items:center;display:grid;gap:12px;grid-template-columns:minmax(0,1fr) auto;min-height:40px;padding:0;width:100%}.mapa-result-track--stepped .mapa-result-track__steps{display:grid;gap:5px;grid-template-columns:repeat(10,minmax(0,var(--mapa-result-step-width)));min-width:0;width:100%}.mapa-result-track--stepped .mapa-result-track__steps i{background:#d8dee7;border-radius:var(--mapa-result-step-radius);display:block;height:var(--mapa-result-step-height);min-width:0;overflow:hidden}.mapa-result-track--stepped .mapa-result-track__steps i:before{background:var(--mapa-result-color);content:\"\";display:block;height:100%;width:var(--mapa-result-step-fill, 0%)}.mapa-result-track--stepped .mapa-result-track__value{color:var(--mapa-result-color);font-size:var(--mapa-result-value-font-size);min-width:var(--mapa-result-value-min-width)}.mapa-result-track--stepped.mapa-result-track--thin{--mapa-result-step-height: 30px;--mapa-result-step-radius: 5px;--mapa-result-step-width: 10px;--mapa-result-value-font-size: 14px;--mapa-result-value-min-width: 36px;min-height:30px}\n"] }]
|
|
8474
|
+
}], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], showValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValue", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
|
|
8474
8475
|
function clamp(value) {
|
|
8475
8476
|
if (!Number.isFinite(value))
|
|
8476
8477
|
return 0;
|
|
@@ -8574,7 +8575,7 @@ class MapaReportGroupProfileWidgetComponent {
|
|
|
8574
8575
|
: this.i18n.texts.report.positiveDirectionLabel;
|
|
8575
8576
|
}
|
|
8576
8577
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaReportGroupProfileWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8577
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.21", type: MapaReportGroupProfileWidgetComponent, isStandalone: true, selector: "mapa-report-group-profile-widget", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, palette: { classPropertyName: "palette", publicName: "palette", isSignal: true, isRequired: false, transformFunction: null }, showAverage: { classPropertyName: "showAverage", publicName: "showAverage", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null }, legend: { classPropertyName: "legend", publicName: "legend", isSignal: true, isRequired: false, transformFunction: null }, distributionLabel: { classPropertyName: "distributionLabel", publicName: "distributionLabel", isSignal: true, isRequired: false, transformFunction: null }, averageLabel: { classPropertyName: "averageLabel", publicName: "averageLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<section class=\"mapa-report-widget\" [attr.data-palette]=\"palette()\">\n @if (heading(); as head) {\n <header class=\"mapa-report-widget__header\">\n <div class=\"mapa-report-widget__heading\">\n <h2>{{ head.title }}</h2>\n @if (head.description) {\n <div\n class=\"mapa-report-widget__description\"\n [innerHTML]=\"head.description | safeHtml\"\n ></div>\n }\n </div>\n </header>\n }\n\n <div class=\"mapa-report-group-profile__filters\">\n <ng-content select=\"[mapaReportGroupProfileFilters]\"></ng-content>\n </div>\n\n @if (!dimensions().length) {\n <p class=\"mapa-report-widget__empty\">{{ i18n.texts.report.emptyState }}</p>\n } @else {\n <header class=\"mapa-report-group-profile__scale\">\n <h3>\n {{ data()?.name }}\n @if (direction()) {\n <span\n class=\"mapa-direction-indicator\"\n [attr.title]=\"directionLabel()\"\n [attr.aria-label]=\"directionLabel()\"\n >{{ directionArrow() }}</span\n >\n }\n </h3>\n @if (showAverage() && average() !== null) {\n <div class=\"mapa-report-group-profile__average\">\n <span class=\"mapa-report-group-profile__average-label\">{{\n averageCaption()\n }}</span>\n <div class=\"mapa-report-group-profile__average-value\">\n <mapa-result-track\n [name]=\"averageCaption()\"\n [showValue]=\"false\"\n [value]=\"average()!\"\n />\n <strong>{{ averageText() }}</strong>\n </div>\n </div>\n }\n </header>\n\n <div class=\"mapa-report-group-profile__rows\">\n @for (dimension of dimensions(); track dimension.id ?? dimension.name) {\n <article class=\"mapa-report-group-profile__row\">\n <h4 class=\"mapa-report-group-profile__row-name\">\n {{ dimension.name }}\n @if (direction(dimension)) {\n <span\n class=\"mapa-direction-indicator\"\n [attr.title]=\"directionLabel(dimension)\"\n [attr.aria-label]=\"directionLabel(dimension)\"\n >{{ directionArrow(dimension) }}</span\n >\n }\n </h4>\n <div class=\"mapa-report-group-profile__bar\">\n <span class=\"mapa-report-group-profile__caption\">{{\n distributionCaption()\n }}</span>\n <div class=\"mapa-report-group-profile__values\" aria-hidden=\"true\">\n @for (slice of slices(dimension); track $index) {\n <b [style.width.%]=\"width(slice)\">{{ sliceValue(slice) }}</b>\n }\n </div>\n <div\n class=\"mapa-report-group-profile__pill\"\n role=\"img\"\n [attr.aria-label]=\"pillLabel(dimension)\"\n >\n @for (slice of slices(dimension); track $index) {\n <span\n class=\"mapa-report-group-profile__slice\"\n [class.mapa-report-group-profile__slice--highlighted]=\"\n slice.highlighted\n \"\n [style.width.%]=\"width(slice)\"\n [style.background-color]=\"sliceColor(slice)\"\n [attr.title]=\"sliceTitle(slice)\"\n ></span>\n }\n </div>\n </div>\n </article>\n }\n </div>\n\n @if (showLegend() && legendItems().length) {\n <ul class=\"mapa-report-group-profile__legend\">\n @for (item of legendItems(); track item.id ?? item.label) {\n <li>\n <i\n class=\"mapa-report-group-profile__swatch\"\n [style.background-color]=\"item.color\"\n aria-hidden=\"true\"\n ></i>\n {{ item.label }}\n </li>\n }\n </ul>\n }\n }\n</section>\n", styles: ["@charset \"UTF-8\";:host{--mapa-report-accent: #ff560b;--mapa-report-accent-soft: #fff0e9;--mapa-report-surface: #fff;--mapa-report-surface-muted: #eef2f3;--mapa-report-border: #e1e5e7;--mapa-report-text: #263238;--mapa-report-muted: #68747a;--mapa-report-pill-width: 104px;--mapa-report-radius: 8px;--mapa-report-space: 20px;color:var(--mapa-report-text);display:block;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", sans-serif)}.mapa-report-widget{display:grid;gap:var(--mapa-report-space)}.mapa-report-widget__header{align-items:flex-start;column-gap:16px;display:grid;grid-template-columns:minmax(0,1fr) auto}.mapa-report-widget__heading{display:contents}.mapa-report-widget__heading h2{color:var(--mapa-report-accent);font-size:20px;font-weight:650;grid-column:1;grid-row:1;line-height:1.25;margin:0}.mapa-report-widget__description{color:var(--mapa-report-muted);font-size:13px;grid-column:1/-1;grid-row:2;line-height:1.5;margin:5px 0 0}.mapa-report-widget__description ::ng-deep ol,.mapa-report-widget__description ::ng-deep p,.mapa-report-widget__description ::ng-deep ul{margin:0 0 8px}.mapa-report-widget__description ::ng-deep ol,.mapa-report-widget__description ::ng-deep ul{padding-left:20px}.mapa-report-widget__description ::ng-deep li{margin:0 0 3px}.mapa-report-widget__description ::ng-deep b,.mapa-report-widget__description ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-report-widget__description ::ng-deep :last-child{margin-bottom:0}.mapa-report-widget__modes{--mat-button-toggle-background-color: var(--mapa-report-surface);--mat-button-toggle-divider-color: #cbd5da;--mat-button-toggle-height: 32px;--mat-button-toggle-label-text-font: var( --mapa-font-body, \"Asap\", sans-serif );--mat-button-toggle-label-text-size: 13px;--mat-button-toggle-label-text-weight: 500;--mat-button-toggle-selected-state-background-color: #59636a;--mat-button-toggle-selected-state-text-color: #fffaf7;--mat-button-toggle-shape: 4px;--mat-button-toggle-text-color: #344b5e;border:1px solid #cbd5da;border-radius:4px;grid-column:2;grid-row:1;overflow:hidden}.mapa-report-widget__modes mat-button-toggle{font:500 13px/1 var(--mapa-font-body, \"Asap\", sans-serif)}.mapa-report-widget__modes mat-icon{font-size:14px;height:14px;margin-right:5px;width:14px}.mapa-report-widget__empty{color:var(--mapa-report-muted);margin:0;padding:24px 0;text-align:center}@media(max-width:760px){.mapa-report-widget__header{align-items:stretch;grid-template-columns:minmax(0,1fr)}.mapa-report-widget__modes{grid-column:1;grid-row:3;justify-self:start;margin-top:12px}}.mapa-direction-indicator{background:var(--mapa-report-surface, var(--mapa-color-surface, #fafbfc));border:1px solid currentColor;border-radius:50%;box-sizing:border-box;color:var(--mapa-report-muted, var(--mapa-color-text-subtle, #68747a));display:inline-grid;flex:0 0 20px;font-size:11px;font-weight:700;height:20px;line-height:1;place-items:center;width:20px}:host{--mapa-report-pill-height: 21px;--mapa-report-line-soft: #edf1f3}.mapa-report-group-profile__filters{border-bottom:1px solid var(--mapa-report-border);display:grid;gap:12px;grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;padding-bottom:var(--mapa-report-space)}.mapa-report-group-profile__filters:empty{display:none}.mapa-report-group-profile__scale{align-items:center;display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between}.mapa-report-group-profile__scale h3{align-items:center;display:flex;font-size:26px;font-weight:500;gap:8px;letter-spacing:-.02em;line-height:1.15;margin:0}.mapa-report-group-profile__average{border:1px solid var(--mapa-report-border);border-radius:var(--mapa-report-radius);min-width:230px;padding:10px 14px}.mapa-report-group-profile__average-label{color:var(--mapa-report-muted);display:block;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}.mapa-report-group-profile__average-value{align-items:center;display:flex;gap:10px}.mapa-report-group-profile__average-value mapa-result-track{--mapa-result-track-height: 8px;flex:1}.mapa-report-group-profile__average-value strong{font-size:20px;font-weight:500}.mapa-report-group-profile__rows{display:grid}.mapa-report-group-profile__row{align-items:center;border-top:1px solid var(--mapa-report-line-soft);display:grid;gap:16px;grid-template-columns:minmax(120px,20%) minmax(0,1fr);padding:15px 0}.mapa-report-group-profile__row-name{align-items:center;display:flex;font-size:14px;font-weight:500;gap:7px;margin:0}.mapa-report-group-profile__bar{min-width:0}.mapa-report-group-profile__caption{color:var(--mapa-report-muted);display:block;font-size:11px;margin-bottom:2px}.mapa-report-group-profile__values{display:flex;gap:2px;margin-bottom:4px;width:100%}.mapa-report-group-profile__values b{color:var(--mapa-report-text);flex:0 1 auto;font-size:11px;font-weight:600;min-width:8px;text-align:center;white-space:nowrap}.mapa-report-group-profile__pill{background:var(--mapa-report-surface-muted);border-radius:999px;display:flex;gap:2px;height:var(--mapa-report-pill-height);overflow:hidden;width:100%}.mapa-report-group-profile__slice{display:block;flex:0 1 auto;height:100%;min-width:8px;overflow:hidden}.mapa-report-group-profile__slice--highlighted{align-items:center;display:flex;justify-content:center}.mapa-report-group-profile__slice--highlighted:after{color:var(--mapa-report-surface);content:\"\\25bc\";font-size:9px;line-height:1}.mapa-report-group-profile__legend{display:flex;flex-wrap:wrap;gap:8px 16px;list-style:none;margin:0;padding:0}.mapa-report-group-profile__legend li{align-items:center;color:var(--mapa-report-muted);display:inline-flex;font-size:12px;gap:6px}.mapa-report-group-profile__swatch{border-radius:999px;flex:0 0 auto;height:10px;width:10px}:host ::ng-deep .mapa-report-group-profile__filters>*{min-width:0;width:100%}@media(max-width:760px){.mapa-report-group-profile__filters{grid-auto-flow:row}.mapa-report-group-profile__average{min-width:0;width:100%}.mapa-report-group-profile__row{gap:8px;grid-template-columns:minmax(0,1fr)}}\n"], dependencies: [{ kind: "component", type: MapaResultTrackComponent, selector: "mapa-result-track", inputs: ["name", "value", "color", "mode", "appearance", "direction", "showValue", "ariaLabel"] }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8578
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.21", type: MapaReportGroupProfileWidgetComponent, isStandalone: true, selector: "mapa-report-group-profile-widget", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, palette: { classPropertyName: "palette", publicName: "palette", isSignal: true, isRequired: false, transformFunction: null }, showAverage: { classPropertyName: "showAverage", publicName: "showAverage", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null }, legend: { classPropertyName: "legend", publicName: "legend", isSignal: true, isRequired: false, transformFunction: null }, distributionLabel: { classPropertyName: "distributionLabel", publicName: "distributionLabel", isSignal: true, isRequired: false, transformFunction: null }, averageLabel: { classPropertyName: "averageLabel", publicName: "averageLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<section class=\"mapa-report-widget\" [attr.data-palette]=\"palette()\">\n @if (heading(); as head) {\n <header class=\"mapa-report-widget__header\">\n <div class=\"mapa-report-widget__heading\">\n <h2>{{ head.title }}</h2>\n @if (head.description) {\n <div\n class=\"mapa-report-widget__description\"\n [innerHTML]=\"head.description | safeHtml\"\n ></div>\n }\n </div>\n </header>\n }\n\n <div class=\"mapa-report-group-profile__filters\">\n <ng-content select=\"[mapaReportGroupProfileFilters]\"></ng-content>\n </div>\n\n @if (!dimensions().length) {\n <p class=\"mapa-report-widget__empty\">{{ i18n.texts.report.emptyState }}</p>\n } @else {\n <header class=\"mapa-report-group-profile__scale\">\n <h3>\n {{ data()?.name }}\n @if (direction()) {\n <span\n class=\"mapa-direction-indicator\"\n [attr.title]=\"directionLabel()\"\n [attr.aria-label]=\"directionLabel()\"\n >{{ directionArrow() }}</span\n >\n }\n </h3>\n @if (showAverage() && average() !== null) {\n <div class=\"mapa-report-group-profile__average\">\n <span class=\"mapa-report-group-profile__average-label\">{{\n averageCaption()\n }}</span>\n <div class=\"mapa-report-group-profile__average-value\">\n <mapa-result-track\n [name]=\"averageCaption()\"\n [showValue]=\"false\"\n [value]=\"average()!\"\n />\n <strong>{{ averageText() }}</strong>\n </div>\n </div>\n }\n </header>\n\n <div class=\"mapa-report-group-profile__rows\">\n @for (dimension of dimensions(); track dimension.id ?? dimension.name) {\n <article class=\"mapa-report-group-profile__row\">\n <h4 class=\"mapa-report-group-profile__row-name\">\n {{ dimension.name }}\n @if (direction(dimension)) {\n <span\n class=\"mapa-direction-indicator\"\n [attr.title]=\"directionLabel(dimension)\"\n [attr.aria-label]=\"directionLabel(dimension)\"\n >{{ directionArrow(dimension) }}</span\n >\n }\n </h4>\n <div class=\"mapa-report-group-profile__bar\">\n <span class=\"mapa-report-group-profile__caption\">{{\n distributionCaption()\n }}</span>\n <div class=\"mapa-report-group-profile__values\" aria-hidden=\"true\">\n @for (slice of slices(dimension); track $index) {\n <b [style.width.%]=\"width(slice)\">{{ sliceValue(slice) }}</b>\n }\n </div>\n <div\n class=\"mapa-report-group-profile__pill\"\n role=\"img\"\n [attr.aria-label]=\"pillLabel(dimension)\"\n >\n @for (slice of slices(dimension); track $index) {\n <span\n class=\"mapa-report-group-profile__slice\"\n [class.mapa-report-group-profile__slice--highlighted]=\"\n slice.highlighted\n \"\n [style.width.%]=\"width(slice)\"\n [style.background-color]=\"sliceColor(slice)\"\n [attr.title]=\"sliceTitle(slice)\"\n ></span>\n }\n </div>\n </div>\n </article>\n }\n </div>\n\n @if (showLegend() && legendItems().length) {\n <ul class=\"mapa-report-group-profile__legend\">\n @for (item of legendItems(); track item.id ?? item.label) {\n <li>\n <i\n class=\"mapa-report-group-profile__swatch\"\n [style.background-color]=\"item.color\"\n aria-hidden=\"true\"\n ></i>\n {{ item.label }}\n </li>\n }\n </ul>\n }\n }\n</section>\n", styles: ["@charset \"UTF-8\";:host{--mapa-report-accent: #ff560b;--mapa-report-accent-soft: #fff0e9;--mapa-report-surface: #fff;--mapa-report-surface-muted: #eef2f3;--mapa-report-border: #e1e5e7;--mapa-report-text: #263238;--mapa-report-muted: #68747a;--mapa-report-pill-width: 104px;--mapa-report-radius: 8px;--mapa-report-space: 20px;color:var(--mapa-report-text);display:block;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", sans-serif)}.mapa-report-widget{display:grid;gap:var(--mapa-report-space)}.mapa-report-widget__header{align-items:flex-start;column-gap:16px;display:grid;grid-template-columns:minmax(0,1fr) auto}.mapa-report-widget__heading{display:contents}.mapa-report-widget__heading h2{color:var(--mapa-report-accent);font-size:20px;font-weight:650;grid-column:1;grid-row:1;line-height:1.25;margin:0}.mapa-report-widget__description{color:var(--mapa-report-muted);font-size:13px;grid-column:1/-1;grid-row:2;line-height:1.5;margin:5px 0 0}.mapa-report-widget__description ::ng-deep ol,.mapa-report-widget__description ::ng-deep p,.mapa-report-widget__description ::ng-deep ul{margin:0 0 8px}.mapa-report-widget__description ::ng-deep ol,.mapa-report-widget__description ::ng-deep ul{padding-left:20px}.mapa-report-widget__description ::ng-deep li{margin:0 0 3px}.mapa-report-widget__description ::ng-deep b,.mapa-report-widget__description ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-report-widget__description ::ng-deep :last-child{margin-bottom:0}.mapa-report-widget__modes{--mat-button-toggle-background-color: var(--mapa-report-surface);--mat-button-toggle-divider-color: #cbd5da;--mat-button-toggle-height: 32px;--mat-button-toggle-label-text-font: var( --mapa-font-body, \"Asap\", sans-serif );--mat-button-toggle-label-text-size: 13px;--mat-button-toggle-label-text-weight: 500;--mat-button-toggle-selected-state-background-color: #59636a;--mat-button-toggle-selected-state-text-color: #fffaf7;--mat-button-toggle-shape: 4px;--mat-button-toggle-text-color: #344b5e;border:1px solid #cbd5da;border-radius:4px;grid-column:2;grid-row:1;overflow:hidden}.mapa-report-widget__modes mat-button-toggle{font:500 13px/1 var(--mapa-font-body, \"Asap\", sans-serif)}.mapa-report-widget__modes mat-icon{font-size:14px;height:14px;margin-right:5px;width:14px}.mapa-report-widget__empty{color:var(--mapa-report-muted);margin:0;padding:24px 0;text-align:center}@media(max-width:760px){.mapa-report-widget__header{align-items:stretch;grid-template-columns:minmax(0,1fr)}.mapa-report-widget__modes{grid-column:1;grid-row:3;justify-self:start;margin-top:12px}}.mapa-direction-indicator{background:var(--mapa-report-surface, var(--mapa-color-surface, #fafbfc));border:1px solid currentColor;border-radius:50%;box-sizing:border-box;color:var(--mapa-report-muted, var(--mapa-color-text-subtle, #68747a));display:inline-grid;flex:0 0 20px;font-size:11px;font-weight:700;height:20px;line-height:1;place-items:center;width:20px}:host{--mapa-report-pill-height: 21px;--mapa-report-line-soft: #edf1f3}.mapa-report-group-profile__filters{border-bottom:1px solid var(--mapa-report-border);display:grid;gap:12px;grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;padding-bottom:var(--mapa-report-space)}.mapa-report-group-profile__filters:empty{display:none}.mapa-report-group-profile__scale{align-items:center;display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between}.mapa-report-group-profile__scale h3{align-items:center;display:flex;font-size:26px;font-weight:500;gap:8px;letter-spacing:-.02em;line-height:1.15;margin:0}.mapa-report-group-profile__average{border:1px solid var(--mapa-report-border);border-radius:var(--mapa-report-radius);min-width:230px;padding:10px 14px}.mapa-report-group-profile__average-label{color:var(--mapa-report-muted);display:block;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}.mapa-report-group-profile__average-value{align-items:center;display:flex;gap:10px}.mapa-report-group-profile__average-value mapa-result-track{--mapa-result-track-height: 8px;flex:1}.mapa-report-group-profile__average-value strong{font-size:20px;font-weight:500}.mapa-report-group-profile__rows{display:grid}.mapa-report-group-profile__row{align-items:center;border-top:1px solid var(--mapa-report-line-soft);display:grid;gap:16px;grid-template-columns:minmax(120px,20%) minmax(0,1fr);padding:15px 0}.mapa-report-group-profile__row-name{align-items:center;display:flex;font-size:14px;font-weight:500;gap:7px;margin:0}.mapa-report-group-profile__bar{min-width:0}.mapa-report-group-profile__caption{color:var(--mapa-report-muted);display:block;font-size:11px;margin-bottom:2px}.mapa-report-group-profile__values{display:flex;gap:2px;margin-bottom:4px;width:100%}.mapa-report-group-profile__values b{color:var(--mapa-report-text);flex:0 1 auto;font-size:11px;font-weight:600;min-width:8px;text-align:center;white-space:nowrap}.mapa-report-group-profile__pill{background:var(--mapa-report-surface-muted);border-radius:999px;display:flex;gap:2px;height:var(--mapa-report-pill-height);overflow:hidden;width:100%}.mapa-report-group-profile__slice{display:block;flex:0 1 auto;height:100%;min-width:8px;overflow:hidden}.mapa-report-group-profile__slice--highlighted{align-items:center;display:flex;justify-content:center}.mapa-report-group-profile__slice--highlighted:after{color:var(--mapa-report-surface);content:\"\\25bc\";font-size:9px;line-height:1}.mapa-report-group-profile__legend{display:flex;flex-wrap:wrap;gap:8px 16px;list-style:none;margin:0;padding:0}.mapa-report-group-profile__legend li{align-items:center;color:var(--mapa-report-muted);display:inline-flex;font-size:12px;gap:6px}.mapa-report-group-profile__swatch{border-radius:999px;flex:0 0 auto;height:10px;width:10px}:host ::ng-deep .mapa-report-group-profile__filters>*{min-width:0;width:100%}@media(max-width:760px){.mapa-report-group-profile__filters{grid-auto-flow:row}.mapa-report-group-profile__average{min-width:0;width:100%}.mapa-report-group-profile__row{gap:8px;grid-template-columns:minmax(0,1fr)}}\n"], dependencies: [{ kind: "component", type: MapaResultTrackComponent, selector: "mapa-result-track", inputs: ["name", "value", "color", "mode", "appearance", "style", "direction", "showValue", "ariaLabel"] }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8578
8579
|
}
|
|
8579
8580
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaReportGroupProfileWidgetComponent, decorators: [{
|
|
8580
8581
|
type: Component,
|
|
@@ -8668,7 +8669,7 @@ class MapaReportIndicatorsWidgetComponent {
|
|
|
8668
8669
|
: this.i18n.texts.report.positiveDirectionLabel;
|
|
8669
8670
|
}
|
|
8670
8671
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaReportIndicatorsWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8671
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.21", type: MapaReportIndicatorsWidgetComponent, isStandalone: true, selector: "mapa-report-indicators-widget", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: true, transformFunction: null }, groups: { classPropertyName: "groups", publicName: "groups", isSignal: true, isRequired: false, transformFunction: null }, legendGroups: { classPropertyName: "legendGroups", publicName: "legendGroups", isSignal: true, isRequired: false, transformFunction: null }, legendTitle: { classPropertyName: "legendTitle", publicName: "legendTitle", isSignal: true, isRequired: false, transformFunction: null }, legendIntro: { classPropertyName: "legendIntro", publicName: "legendIntro", isSignal: true, isRequired: false, transformFunction: null }, legendExpanded: { classPropertyName: "legendExpanded", publicName: "legendExpanded", isSignal: true, isRequired: false, transformFunction: null }, detailedViewLabel: { classPropertyName: "detailedViewLabel", publicName: "detailedViewLabel", isSignal: true, isRequired: false, transformFunction: null }, compactDetailedViewLabel: { classPropertyName: "compactDetailedViewLabel", publicName: "compactDetailedViewLabel", isSignal: true, isRequired: false, transformFunction: null }, palette: { classPropertyName: "palette", publicName: "palette", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { mode: "modeChange" }, ngImport: i0, template: "<section class=\"mapa-report-widget\" [attr.data-palette]=\"palette()\">\n <header class=\"mapa-report-widget__header\">\n <div class=\"mapa-report-widget__heading\">\n <h2>{{ heading().title }}</h2>\n @if (heading().description) {\n <div\n class=\"mapa-report-widget__description\"\n [innerHTML]=\"heading().description | safeHtml\"\n ></div>\n }\n </div>\n <mat-button-toggle-group\n class=\"mapa-report-widget__modes\"\n hideSingleSelectionIndicator\n [attr.aria-label]=\"i18n.texts.report.viewModeLabel\"\n [value]=\"mode()\"\n (change)=\"mode.set($event.value)\"\n >\n <mat-button-toggle value=\"list\">\n <span class=\"mapa-report-indicator__mode-icon\" aria-hidden=\"true\"\n >\u25A5</span\n >\n {{ i18n.texts.report.list }}\n </mat-button-toggle>\n <mat-button-toggle value=\"chart\">\n <span class=\"mapa-report-indicator__mode-icon\" aria-hidden=\"true\"\n >\u25A6</span\n >\n {{ i18n.texts.report.chart }}\n </mat-button-toggle>\n <mat-button-toggle value=\"detailed\">\n <span class=\"mapa-report-indicator__mode-icon\" aria-hidden=\"true\"\n >\u25A4</span\n >\n <span\n class=\"mapa-report-indicator__mode-label mapa-report-indicator__mode-label--full\"\n >{{ detailedViewCaption() }}</span\n >\n <span\n class=\"mapa-report-indicator__mode-label mapa-report-indicator__mode-label--compact\"\n >{{ compactDetailedViewCaption() }}</span\n >\n </mat-button-toggle>\n </mat-button-toggle-group>\n </header>\n\n @if (legendGroups().length || legendIntro()) {\n <mapa-report-legend\n appearance=\"psychosocial\"\n [expanded]=\"legendExpanded()\"\n [groups]=\"legendGroups()\"\n [intro]=\"legendIntro()\"\n [title]=\"legendTitle()\"\n />\n }\n\n @if (!indicators().length) {\n <p class=\"mapa-report-widget__empty\">{{ i18n.texts.report.emptyState }}</p>\n } @else if (mode() === \"list\") {\n <div\n class=\"mapa-report-indicators mapa-report-indicators--list\"\n [class.mapa-report-indicators--single-column]=\"\n indicatorColumns().length === 1\n \"\n [class.mapa-report-indicators--two-columns]=\"\n indicatorColumns().length === 2\n \"\n >\n @for (column of indicatorColumns(); track $index) {\n <div class=\"mapa-report-indicators__column\">\n @for (group of column; track group.id) {\n <section\n class=\"mapa-report-indicator-group mapa-report-indicator-group--list\"\n >\n <h3>{{ group.name }}</h3>\n <div class=\"mapa-report-indicator-group__list\">\n @for (indicator of group.indicators; track indicator.id) {\n <article\n class=\"mapa-report-indicator mapa-report-indicator--list\"\n [style.--mapa-indicator-background]=\"color(indicator)\"\n [style.--mapa-indicator-foreground]=\"foreground(indicator)\"\n >\n <span\n class=\"mapa-direction-indicator\"\n [attr.aria-label]=\"directionLabel(indicator)\"\n >{{ directionArrow(indicator) }}</span\n >\n <h4>{{ indicator.name }}</h4>\n <strong>{{ value(indicator) }}%</strong>\n </article>\n }\n </div>\n </section>\n }\n </div>\n }\n </div>\n } @else {\n <div class=\"mapa-report-indicators mapa-report-indicators--rows\">\n @for (group of groups(); track group.id) {\n <section\n class=\"mapa-report-indicator-group mapa-report-indicator-group--rows\"\n >\n <h3>{{ group.name }}</h3>\n <div class=\"mapa-report-indicator-group__rows\">\n @for (indicator of group.indicators; track indicator.id) {\n <article class=\"mapa-report-indicator mapa-report-indicator--row\">\n <div class=\"mapa-report-indicator__graph\">\n <div class=\"mapa-report-indicator__name\">\n <span\n class=\"mapa-direction-indicator\"\n [attr.aria-label]=\"directionLabel(indicator)\"\n >{{ directionArrow(indicator) }}</span\n >\n <h4>{{ indicator.name }}</h4>\n </div>\n <mapa-classification-tag\n appearance=\"solid\"\n [classification]=\"indicator.classification\"\n />\n <mapa-result-track\n appearance=\"segmented\"\n mode=\"linear\"\n [color]=\"color(indicator)\"\n [name]=\"indicator.name\"\n [value]=\"value(indicator)\"\n />\n <strong class=\"mapa-report-indicator__percent\"\n >{{ value(indicator) }}%</strong\n >\n </div>\n\n @if (mode() === \"detailed\" && indicator.concept) {\n <div class=\"mapa-report-indicator__detail\">\n <strong>{{ i18n.texts.report.conceptTitle }}:</strong>\n <div\n class=\"mapa-report-indicator__copy\"\n [innerHTML]=\"indicator.concept | safeHtml\"\n ></div>\n </div>\n }\n @if (mode() === \"detailed\" && indicator.description) {\n <div class=\"mapa-report-indicator__detail\">\n <strong>{{ i18n.texts.report.resultTitle }}:</strong>\n <div\n class=\"mapa-report-indicator__copy\"\n [innerHTML]=\"indicator.description | safeHtml\"\n ></div>\n </div>\n }\n </article>\n }\n </div>\n </section>\n }\n </div>\n }\n</section>\n", styles: [":host{--mapa-report-accent: #ff560b;--mapa-report-accent-soft: #fff0e9;--mapa-report-surface: #fff;--mapa-report-surface-muted: #eef2f3;--mapa-report-border: #e1e5e7;--mapa-report-text: #263238;--mapa-report-muted: #68747a;--mapa-report-pill-width: 104px;--mapa-report-radius: 8px;--mapa-report-space: 20px;color:var(--mapa-report-text);display:block;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", sans-serif)}.mapa-report-widget{display:grid;gap:var(--mapa-report-space)}.mapa-report-widget__header{align-items:flex-start;column-gap:16px;display:grid;grid-template-columns:minmax(0,1fr) auto}.mapa-report-widget__heading{display:contents}.mapa-report-widget__heading h2{color:var(--mapa-report-accent);font-size:20px;font-weight:650;grid-column:1;grid-row:1;line-height:1.25;margin:0}.mapa-report-widget__description{color:var(--mapa-report-muted);font-size:13px;grid-column:1/-1;grid-row:2;line-height:1.5;margin:5px 0 0}.mapa-report-widget__description ::ng-deep ol,.mapa-report-widget__description ::ng-deep p,.mapa-report-widget__description ::ng-deep ul{margin:0 0 8px}.mapa-report-widget__description ::ng-deep ol,.mapa-report-widget__description ::ng-deep ul{padding-left:20px}.mapa-report-widget__description ::ng-deep li{margin:0 0 3px}.mapa-report-widget__description ::ng-deep b,.mapa-report-widget__description ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-report-widget__description ::ng-deep :last-child{margin-bottom:0}.mapa-report-widget__modes{--mat-button-toggle-background-color: var(--mapa-report-surface);--mat-button-toggle-divider-color: #cbd5da;--mat-button-toggle-height: 32px;--mat-button-toggle-label-text-font: var( --mapa-font-body, \"Asap\", sans-serif );--mat-button-toggle-label-text-size: 13px;--mat-button-toggle-label-text-weight: 500;--mat-button-toggle-selected-state-background-color: #59636a;--mat-button-toggle-selected-state-text-color: #fffaf7;--mat-button-toggle-shape: 4px;--mat-button-toggle-text-color: #344b5e;border:1px solid #cbd5da;border-radius:4px;grid-column:2;grid-row:1;overflow:hidden}.mapa-report-widget__modes mat-button-toggle{font:500 13px/1 var(--mapa-font-body, \"Asap\", sans-serif)}.mapa-report-widget__modes mat-icon{font-size:14px;height:14px;margin-right:5px;width:14px}.mapa-report-widget__empty{color:var(--mapa-report-muted);margin:0;padding:24px 0;text-align:center}@media(max-width:760px){.mapa-report-widget__header{align-items:stretch;grid-template-columns:minmax(0,1fr)}.mapa-report-widget__modes{grid-column:1;grid-row:3;justify-self:start;margin-top:12px}}.mapa-direction-indicator{background:var(--mapa-report-surface, var(--mapa-color-surface, #fafbfc));border:1px solid currentColor;border-radius:50%;box-sizing:border-box;color:var(--mapa-report-muted, var(--mapa-color-text-subtle, #68747a));display:inline-grid;flex:0 0 20px;font-size:11px;font-weight:700;height:20px;line-height:1;place-items:center;width:20px}.mapa-report-indicators{display:grid;gap:20px}.mapa-report-indicators--list{align-items:start;grid-template-columns:repeat(3,minmax(0,1fr))}.mapa-report-indicators--single-column{grid-template-columns:1fr}.mapa-report-indicators--two-columns{grid-template-columns:repeat(2,minmax(0,1fr))}.mapa-report-indicators--rows{padding-top:2px}.mapa-report-indicators__column{display:grid;gap:23px;min-width:0}.mapa-report-indicator-group{min-width:0}.mapa-report-indicator-group>h3{color:var(--mapa-report-text);font-size:15px;font-weight:600;line-height:1.3;margin:0 0 11px}.mapa-report-indicator-group__list{display:grid;gap:8px}.mapa-report-indicator-group__rows{background:var(--mapa-report-surface);border:1px solid var(--mapa-report-border);border-radius:12px;overflow:hidden}.mapa-report-indicator{min-width:0}.mapa-report-indicator--list{align-items:center;background:var(--mapa-indicator-background);border:1px solid rgba(26,26,26,.08);border-radius:9px;color:var(--mapa-indicator-foreground);display:grid;gap:9px;grid-template-columns:20px minmax(0,1fr) auto;min-height:38px;padding:5px 10px 5px 9px}.mapa-report-indicator--list h4{font-size:12px;font-weight:400;line-height:1.25;margin:0;overflow-wrap:anywhere}.mapa-report-indicator--list>strong{align-items:center;background:#fff;border:1px solid rgba(99,114,124,.16);border-radius:999px;color:#1f3850;display:inline-flex;font-size:10px;font-weight:600;height:25px;justify-content:center;min-width:38px;padding:0 6px}.mapa-report-indicator--row{padding:13px 13px 14px}.mapa-report-indicator--row+.mapa-report-indicator--row{border-top:1px solid var(--mapa-report-border)}.mapa-report-indicator__graph{align-items:center;display:grid;gap:14px;grid-template-columns:minmax(0,250px) var(--mapa-report-pill-width) minmax(0,1fr) 42px}.mapa-report-indicator__name{align-items:center;color:var(--mapa-report-text);display:flex;gap:7px;min-width:0}.mapa-report-indicator__name h4{font-size:12px;font-weight:400;line-height:1.25;margin:0;overflow-wrap:anywhere}.mapa-report-indicator__graph mapa-classification-tag{--mapa-classification-tag-min-width: var(--mapa-report-pill-width);justify-self:start;max-width:var(--mapa-report-pill-width)}.mapa-report-indicator__percent{color:#1f3850;font-size:12px;font-weight:400;text-align:right}.mapa-report-indicator__mode-label--compact{display:none}.mapa-report-indicator__detail{border-top:1px solid var(--mapa-report-border);color:var(--mapa-report-muted);display:flex;font-size:11px;gap:4px;line-height:1.45;margin-top:11px;padding-top:10px}.mapa-report-indicator__detail>strong{color:var(--mapa-report-text);flex:0 0 auto;font-weight:600}.mapa-report-indicator__detail .mapa-report-indicator__copy{min-width:0}.mapa-report-indicator__detail .mapa-report-indicator__copy ::ng-deep ol,.mapa-report-indicator__detail .mapa-report-indicator__copy ::ng-deep p,.mapa-report-indicator__detail .mapa-report-indicator__copy ::ng-deep ul{margin:0 0 8px}.mapa-report-indicator__detail .mapa-report-indicator__copy ::ng-deep ol,.mapa-report-indicator__detail .mapa-report-indicator__copy ::ng-deep ul{padding-left:20px}.mapa-report-indicator__detail .mapa-report-indicator__copy ::ng-deep li{margin:0 0 3px}.mapa-report-indicator__detail .mapa-report-indicator__copy ::ng-deep b,.mapa-report-indicator__detail .mapa-report-indicator__copy ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-report-indicator__detail .mapa-report-indicator__copy ::ng-deep :last-child{margin-bottom:0}.mapa-report-indicator__detail div{min-width:0}.mapa-report-indicator__detail :last-child{margin-bottom:0}@media(max-width:760px){.mapa-report-indicator__graph{gap:8px;grid-template-columns:minmax(0,1fr) var(--mapa-report-pill-width) 40px}.mapa-report-indicator__graph mapa-result-track{grid-column:1/-1;grid-row:2;margin-top:3px}}@media(max-width:560px){.mapa-report-widget__modes{--mat-button-toggle-label-text-size: 11px;align-self:stretch;display:flex;justify-self:stretch}.mapa-report-widget__modes mat-button-toggle{flex:1 1 0;font:500 10px/1 var(--mapa-font-body, \"Asap\", sans-serif);min-width:0}.mapa-report-indicator__mode-icon,.mapa-report-indicator__mode-label--full{display:none}.mapa-report-indicator__mode-label--compact{display:inline}.mapa-report-indicators--list:not(.mapa-report-indicators--single-column){grid-template-columns:1fr}.mapa-report-indicator--list{min-height:36px}.mapa-report-indicator--row{padding:12px}.mapa-report-indicator__detail{display:block}.mapa-report-indicator__detail>strong{display:block;margin-bottom:3px}}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i1$6.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i1$6.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: MapaClassificationTagComponent, selector: "mapa-classification-tag", inputs: ["classification", "size", "appearance", "shape", "casing", "fallbackLabel"] }, { kind: "component", type: MapaReportLegendComponent, selector: "mapa-report-legend", inputs: ["title", "intro", "groupsTitle", "groups", "expanded", "appearance"] }, { kind: "component", type: MapaResultTrackComponent, selector: "mapa-result-track", inputs: ["name", "value", "color", "mode", "appearance", "direction", "showValue", "ariaLabel"] }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8672
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.21", type: MapaReportIndicatorsWidgetComponent, isStandalone: true, selector: "mapa-report-indicators-widget", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: true, transformFunction: null }, groups: { classPropertyName: "groups", publicName: "groups", isSignal: true, isRequired: false, transformFunction: null }, legendGroups: { classPropertyName: "legendGroups", publicName: "legendGroups", isSignal: true, isRequired: false, transformFunction: null }, legendTitle: { classPropertyName: "legendTitle", publicName: "legendTitle", isSignal: true, isRequired: false, transformFunction: null }, legendIntro: { classPropertyName: "legendIntro", publicName: "legendIntro", isSignal: true, isRequired: false, transformFunction: null }, legendExpanded: { classPropertyName: "legendExpanded", publicName: "legendExpanded", isSignal: true, isRequired: false, transformFunction: null }, detailedViewLabel: { classPropertyName: "detailedViewLabel", publicName: "detailedViewLabel", isSignal: true, isRequired: false, transformFunction: null }, compactDetailedViewLabel: { classPropertyName: "compactDetailedViewLabel", publicName: "compactDetailedViewLabel", isSignal: true, isRequired: false, transformFunction: null }, palette: { classPropertyName: "palette", publicName: "palette", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { mode: "modeChange" }, ngImport: i0, template: "<section class=\"mapa-report-widget\" [attr.data-palette]=\"palette()\">\n <header class=\"mapa-report-widget__header\">\n <div class=\"mapa-report-widget__heading\">\n <h2>{{ heading().title }}</h2>\n @if (heading().description) {\n <div\n class=\"mapa-report-widget__description\"\n [innerHTML]=\"heading().description | safeHtml\"\n ></div>\n }\n </div>\n <mat-button-toggle-group\n class=\"mapa-report-widget__modes\"\n hideSingleSelectionIndicator\n [attr.aria-label]=\"i18n.texts.report.viewModeLabel\"\n [value]=\"mode()\"\n (change)=\"mode.set($event.value)\"\n >\n <mat-button-toggle value=\"list\">\n <span class=\"mapa-report-indicator__mode-icon\" aria-hidden=\"true\"\n >\u25A5</span\n >\n {{ i18n.texts.report.list }}\n </mat-button-toggle>\n <mat-button-toggle value=\"chart\">\n <span class=\"mapa-report-indicator__mode-icon\" aria-hidden=\"true\"\n >\u25A6</span\n >\n {{ i18n.texts.report.chart }}\n </mat-button-toggle>\n <mat-button-toggle value=\"detailed\">\n <span class=\"mapa-report-indicator__mode-icon\" aria-hidden=\"true\"\n >\u25A4</span\n >\n <span\n class=\"mapa-report-indicator__mode-label mapa-report-indicator__mode-label--full\"\n >{{ detailedViewCaption() }}</span\n >\n <span\n class=\"mapa-report-indicator__mode-label mapa-report-indicator__mode-label--compact\"\n >{{ compactDetailedViewCaption() }}</span\n >\n </mat-button-toggle>\n </mat-button-toggle-group>\n </header>\n\n @if (legendGroups().length || legendIntro()) {\n <mapa-report-legend\n appearance=\"psychosocial\"\n [expanded]=\"legendExpanded()\"\n [groups]=\"legendGroups()\"\n [intro]=\"legendIntro()\"\n [title]=\"legendTitle()\"\n />\n }\n\n @if (!indicators().length) {\n <p class=\"mapa-report-widget__empty\">{{ i18n.texts.report.emptyState }}</p>\n } @else if (mode() === \"list\") {\n <div\n class=\"mapa-report-indicators mapa-report-indicators--list\"\n [class.mapa-report-indicators--single-column]=\"\n indicatorColumns().length === 1\n \"\n [class.mapa-report-indicators--two-columns]=\"\n indicatorColumns().length === 2\n \"\n >\n @for (column of indicatorColumns(); track $index) {\n <div class=\"mapa-report-indicators__column\">\n @for (group of column; track group.id) {\n <section\n class=\"mapa-report-indicator-group mapa-report-indicator-group--list\"\n >\n <h3>{{ group.name }}</h3>\n <div class=\"mapa-report-indicator-group__list\">\n @for (indicator of group.indicators; track indicator.id) {\n <article\n class=\"mapa-report-indicator mapa-report-indicator--list\"\n [style.--mapa-indicator-background]=\"color(indicator)\"\n [style.--mapa-indicator-foreground]=\"foreground(indicator)\"\n >\n <span\n class=\"mapa-direction-indicator\"\n [attr.aria-label]=\"directionLabel(indicator)\"\n >{{ directionArrow(indicator) }}</span\n >\n <h4>{{ indicator.name }}</h4>\n <strong>{{ value(indicator) }}%</strong>\n </article>\n }\n </div>\n </section>\n }\n </div>\n }\n </div>\n } @else {\n <div class=\"mapa-report-indicators mapa-report-indicators--rows\">\n @for (group of groups(); track group.id) {\n <section\n class=\"mapa-report-indicator-group mapa-report-indicator-group--rows\"\n >\n <h3>{{ group.name }}</h3>\n <div class=\"mapa-report-indicator-group__rows\">\n @for (indicator of group.indicators; track indicator.id) {\n <article class=\"mapa-report-indicator mapa-report-indicator--row\">\n <div class=\"mapa-report-indicator__graph\">\n <div class=\"mapa-report-indicator__name\">\n <span\n class=\"mapa-direction-indicator\"\n [attr.aria-label]=\"directionLabel(indicator)\"\n >{{ directionArrow(indicator) }}</span\n >\n <h4>{{ indicator.name }}</h4>\n </div>\n <mapa-classification-tag\n appearance=\"solid\"\n [classification]=\"indicator.classification\"\n />\n <mapa-result-track\n appearance=\"segmented\"\n mode=\"linear\"\n [color]=\"color(indicator)\"\n [name]=\"indicator.name\"\n [value]=\"value(indicator)\"\n />\n <strong class=\"mapa-report-indicator__percent\"\n >{{ value(indicator) }}%</strong\n >\n </div>\n\n @if (mode() === \"detailed\" && indicator.concept) {\n <div class=\"mapa-report-indicator__detail\">\n <strong>{{ i18n.texts.report.conceptTitle }}:</strong>\n <div\n class=\"mapa-report-indicator__copy\"\n [innerHTML]=\"indicator.concept | safeHtml\"\n ></div>\n </div>\n }\n @if (mode() === \"detailed\" && indicator.description) {\n <div class=\"mapa-report-indicator__detail\">\n <strong>{{ i18n.texts.report.resultTitle }}:</strong>\n <div\n class=\"mapa-report-indicator__copy\"\n [innerHTML]=\"indicator.description | safeHtml\"\n ></div>\n </div>\n }\n </article>\n }\n </div>\n </section>\n }\n </div>\n }\n</section>\n", styles: [":host{--mapa-report-accent: #ff560b;--mapa-report-accent-soft: #fff0e9;--mapa-report-surface: #fff;--mapa-report-surface-muted: #eef2f3;--mapa-report-border: #e1e5e7;--mapa-report-text: #263238;--mapa-report-muted: #68747a;--mapa-report-pill-width: 104px;--mapa-report-radius: 8px;--mapa-report-space: 20px;color:var(--mapa-report-text);display:block;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", sans-serif)}.mapa-report-widget{display:grid;gap:var(--mapa-report-space)}.mapa-report-widget__header{align-items:flex-start;column-gap:16px;display:grid;grid-template-columns:minmax(0,1fr) auto}.mapa-report-widget__heading{display:contents}.mapa-report-widget__heading h2{color:var(--mapa-report-accent);font-size:20px;font-weight:650;grid-column:1;grid-row:1;line-height:1.25;margin:0}.mapa-report-widget__description{color:var(--mapa-report-muted);font-size:13px;grid-column:1/-1;grid-row:2;line-height:1.5;margin:5px 0 0}.mapa-report-widget__description ::ng-deep ol,.mapa-report-widget__description ::ng-deep p,.mapa-report-widget__description ::ng-deep ul{margin:0 0 8px}.mapa-report-widget__description ::ng-deep ol,.mapa-report-widget__description ::ng-deep ul{padding-left:20px}.mapa-report-widget__description ::ng-deep li{margin:0 0 3px}.mapa-report-widget__description ::ng-deep b,.mapa-report-widget__description ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-report-widget__description ::ng-deep :last-child{margin-bottom:0}.mapa-report-widget__modes{--mat-button-toggle-background-color: var(--mapa-report-surface);--mat-button-toggle-divider-color: #cbd5da;--mat-button-toggle-height: 32px;--mat-button-toggle-label-text-font: var( --mapa-font-body, \"Asap\", sans-serif );--mat-button-toggle-label-text-size: 13px;--mat-button-toggle-label-text-weight: 500;--mat-button-toggle-selected-state-background-color: #59636a;--mat-button-toggle-selected-state-text-color: #fffaf7;--mat-button-toggle-shape: 4px;--mat-button-toggle-text-color: #344b5e;border:1px solid #cbd5da;border-radius:4px;grid-column:2;grid-row:1;overflow:hidden}.mapa-report-widget__modes mat-button-toggle{font:500 13px/1 var(--mapa-font-body, \"Asap\", sans-serif)}.mapa-report-widget__modes mat-icon{font-size:14px;height:14px;margin-right:5px;width:14px}.mapa-report-widget__empty{color:var(--mapa-report-muted);margin:0;padding:24px 0;text-align:center}@media(max-width:760px){.mapa-report-widget__header{align-items:stretch;grid-template-columns:minmax(0,1fr)}.mapa-report-widget__modes{grid-column:1;grid-row:3;justify-self:start;margin-top:12px}}.mapa-direction-indicator{background:var(--mapa-report-surface, var(--mapa-color-surface, #fafbfc));border:1px solid currentColor;border-radius:50%;box-sizing:border-box;color:var(--mapa-report-muted, var(--mapa-color-text-subtle, #68747a));display:inline-grid;flex:0 0 20px;font-size:11px;font-weight:700;height:20px;line-height:1;place-items:center;width:20px}.mapa-report-indicators{display:grid;gap:20px}.mapa-report-indicators--list{align-items:start;grid-template-columns:repeat(3,minmax(0,1fr))}.mapa-report-indicators--single-column{grid-template-columns:1fr}.mapa-report-indicators--two-columns{grid-template-columns:repeat(2,minmax(0,1fr))}.mapa-report-indicators--rows{padding-top:2px}.mapa-report-indicators__column{display:grid;gap:23px;min-width:0}.mapa-report-indicator-group{min-width:0}.mapa-report-indicator-group>h3{color:var(--mapa-report-text);font-size:15px;font-weight:600;line-height:1.3;margin:0 0 11px}.mapa-report-indicator-group__list{display:grid;gap:8px}.mapa-report-indicator-group__rows{background:var(--mapa-report-surface);border:1px solid var(--mapa-report-border);border-radius:12px;overflow:hidden}.mapa-report-indicator{min-width:0}.mapa-report-indicator--list{align-items:center;background:var(--mapa-indicator-background);border:1px solid rgba(26,26,26,.08);border-radius:9px;color:var(--mapa-indicator-foreground);display:grid;gap:9px;grid-template-columns:20px minmax(0,1fr) auto;min-height:38px;padding:5px 10px 5px 9px}.mapa-report-indicator--list h4{font-size:12px;font-weight:400;line-height:1.25;margin:0;overflow-wrap:anywhere}.mapa-report-indicator--list>strong{align-items:center;background:#fff;border:1px solid rgba(99,114,124,.16);border-radius:999px;color:#1f3850;display:inline-flex;font-size:10px;font-weight:600;height:25px;justify-content:center;min-width:38px;padding:0 6px}.mapa-report-indicator--row{padding:13px 13px 14px}.mapa-report-indicator--row+.mapa-report-indicator--row{border-top:1px solid var(--mapa-report-border)}.mapa-report-indicator__graph{align-items:center;display:grid;gap:14px;grid-template-columns:minmax(0,250px) var(--mapa-report-pill-width) minmax(0,1fr) 42px}.mapa-report-indicator__name{align-items:center;color:var(--mapa-report-text);display:flex;gap:7px;min-width:0}.mapa-report-indicator__name h4{font-size:12px;font-weight:400;line-height:1.25;margin:0;overflow-wrap:anywhere}.mapa-report-indicator__graph mapa-classification-tag{--mapa-classification-tag-min-width: var(--mapa-report-pill-width);justify-self:start;max-width:var(--mapa-report-pill-width)}.mapa-report-indicator__percent{color:#1f3850;font-size:12px;font-weight:400;text-align:right}.mapa-report-indicator__mode-label--compact{display:none}.mapa-report-indicator__detail{border-top:1px solid var(--mapa-report-border);color:var(--mapa-report-muted);display:flex;font-size:11px;gap:4px;line-height:1.45;margin-top:11px;padding-top:10px}.mapa-report-indicator__detail>strong{color:var(--mapa-report-text);flex:0 0 auto;font-weight:600}.mapa-report-indicator__detail .mapa-report-indicator__copy{min-width:0}.mapa-report-indicator__detail .mapa-report-indicator__copy ::ng-deep ol,.mapa-report-indicator__detail .mapa-report-indicator__copy ::ng-deep p,.mapa-report-indicator__detail .mapa-report-indicator__copy ::ng-deep ul{margin:0 0 8px}.mapa-report-indicator__detail .mapa-report-indicator__copy ::ng-deep ol,.mapa-report-indicator__detail .mapa-report-indicator__copy ::ng-deep ul{padding-left:20px}.mapa-report-indicator__detail .mapa-report-indicator__copy ::ng-deep li{margin:0 0 3px}.mapa-report-indicator__detail .mapa-report-indicator__copy ::ng-deep b,.mapa-report-indicator__detail .mapa-report-indicator__copy ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-report-indicator__detail .mapa-report-indicator__copy ::ng-deep :last-child{margin-bottom:0}.mapa-report-indicator__detail div{min-width:0}.mapa-report-indicator__detail :last-child{margin-bottom:0}@media(max-width:760px){.mapa-report-indicator__graph{gap:8px;grid-template-columns:minmax(0,1fr) var(--mapa-report-pill-width) 40px}.mapa-report-indicator__graph mapa-result-track{grid-column:1/-1;grid-row:2;margin-top:3px}}@media(max-width:560px){.mapa-report-widget__modes{--mat-button-toggle-label-text-size: 11px;align-self:stretch;display:flex;justify-self:stretch}.mapa-report-widget__modes mat-button-toggle{flex:1 1 0;font:500 10px/1 var(--mapa-font-body, \"Asap\", sans-serif);min-width:0}.mapa-report-indicator__mode-icon,.mapa-report-indicator__mode-label--full{display:none}.mapa-report-indicator__mode-label--compact{display:inline}.mapa-report-indicators--list:not(.mapa-report-indicators--single-column){grid-template-columns:1fr}.mapa-report-indicator--list{min-height:36px}.mapa-report-indicator--row{padding:12px}.mapa-report-indicator__detail{display:block}.mapa-report-indicator__detail>strong{display:block;margin-bottom:3px}}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i1$6.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i1$6.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: MapaClassificationTagComponent, selector: "mapa-classification-tag", inputs: ["classification", "size", "appearance", "shape", "casing", "fallbackLabel"] }, { kind: "component", type: MapaReportLegendComponent, selector: "mapa-report-legend", inputs: ["title", "intro", "groupsTitle", "groups", "expanded", "appearance"] }, { kind: "component", type: MapaResultTrackComponent, selector: "mapa-result-track", inputs: ["name", "value", "color", "mode", "appearance", "style", "direction", "showValue", "ariaLabel"] }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8672
8673
|
}
|
|
8673
8674
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaReportIndicatorsWidgetComponent, decorators: [{
|
|
8674
8675
|
type: Component,
|
|
@@ -8728,7 +8729,7 @@ class MapaReportScaleWidgetComponent {
|
|
|
8728
8729
|
: this.i18n.texts.report.positiveDirectionLabel;
|
|
8729
8730
|
}
|
|
8730
8731
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaReportScaleWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8731
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.21", type: MapaReportScaleWidgetComponent, isStandalone: true, selector: "mapa-report-scale-widget", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: true, transformFunction: null }, groups: { classPropertyName: "groups", publicName: "groups", isSignal: true, isRequired: false, transformFunction: null }, legendGroups: { classPropertyName: "legendGroups", publicName: "legendGroups", isSignal: true, isRequired: false, transformFunction: null }, legendTitle: { classPropertyName: "legendTitle", publicName: "legendTitle", isSignal: true, isRequired: false, transformFunction: null }, legendIntro: { classPropertyName: "legendIntro", publicName: "legendIntro", isSignal: true, isRequired: false, transformFunction: null }, legendGroupsTitle: { classPropertyName: "legendGroupsTitle", publicName: "legendGroupsTitle", isSignal: true, isRequired: false, transformFunction: null }, legendExpanded: { classPropertyName: "legendExpanded", publicName: "legendExpanded", isSignal: true, isRequired: false, transformFunction: null }, palette: { classPropertyName: "palette", publicName: "palette", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { mode: "modeChange" }, ngImport: i0, template: "<section class=\"mapa-report-widget\" [attr.data-palette]=\"palette()\">\n <header class=\"mapa-report-widget__header\">\n <div class=\"mapa-report-widget__heading\">\n <h2>{{ heading().title }}</h2>\n @if (heading().description) {\n <div\n class=\"mapa-report-widget__description\"\n [innerHTML]=\"heading().description | safeHtml\"\n ></div>\n }\n </div>\n <mat-button-toggle-group\n class=\"mapa-report-widget__modes\"\n hideSingleSelectionIndicator\n [attr.aria-label]=\"i18n.texts.report.viewModeLabel\"\n [value]=\"mode()\"\n (change)=\"mode.set($event.value)\"\n >\n <mat-button-toggle value=\"summarized\">\n <span class=\"mapa-report-scale__mode-icon\" aria-hidden=\"true\">\u25A5</span>\n {{ i18n.texts.report.summarized }}\n </mat-button-toggle>\n <mat-button-toggle value=\"detailed\">\n <span class=\"mapa-report-scale__mode-icon\" aria-hidden=\"true\">\u25A4</span>\n {{ i18n.texts.report.detailed }}\n </mat-button-toggle>\n </mat-button-toggle-group>\n </header>\n\n @if (legendGroups().length || legendIntro()) {\n <mapa-report-legend\n appearance=\"psychosocial\"\n [expanded]=\"legendExpanded()\"\n [groups]=\"legendGroups()\"\n [groupsTitle]=\"legendGroupsTitle()\"\n [intro]=\"legendIntro()\"\n [title]=\"legendTitle()\"\n />\n }\n\n @if (!scales().length) {\n <p class=\"mapa-report-widget__empty\">{{ i18n.texts.report.emptyState }}</p>\n } @else if (mode() === \"summarized\") {\n <div class=\"mapa-report-scales mapa-report-scales--summary\">\n @for (group of groups(); track group.id) {\n <section class=\"mapa-report-scale-group\">\n @if (group.name) {\n <div class=\"mapa-report-scale-group__head\">\n <h3>{{ group.name }}</h3>\n </div>\n }\n <div class=\"mapa-report-scale-group__grid\">\n @for (scale of group.scales; track scale.id) {\n <article\n class=\"mapa-report-scale-card mapa-report-scale-card--summary\"\n >\n <header class=\"mapa-report-scale-card__head\">\n <h4>{{ scale.name }}</h4>\n <!-- Instrumentos que so pontuam no nivel da dimensao\n (Personalidade, Socioemocional) nao classificam a escala:\n omitimos a tag em vez de cair no rotulo \"sem\n classificacao\". Mesma regra do valor, logo abaixo. -->\n @if (scale.classification) {\n <mapa-classification-tag\n appearance=\"solid\"\n [classification]=\"scale.classification\"\n />\n }\n </header>\n @if (scale.value !== undefined) {\n <div class=\"mapa-report-scale-card__score\">\n <mapa-result-track\n [color]=\"color(scale)\"\n [direction]=\"direction(scale)\"\n [name]=\"scale.name\"\n [showValue]=\"false\"\n [value]=\"scale.value\"\n />\n <span class=\"mapa-report-scale-card__percent\"\n >{{ value(scale) }}%</span\n >\n </div>\n }\n @if (scale.dimensions?.length) {\n <ul class=\"mapa-report-scale-card__dimensions\">\n @for (dimension of scale.dimensions; track dimension.id) {\n <li>\n <span class=\"mapa-report-scale-card__dimension-name\">\n <span\n class=\"mapa-direction-indicator\"\n [attr.aria-label]=\"directionLabel(dimension, scale)\"\n >{{ directionArrow(dimension, scale) }}</span\n >\n <span>{{ dimension.name }}</span>\n </span>\n <mapa-classification-tag\n appearance=\"solid\"\n [classification]=\"dimension.classification\"\n />\n </li>\n }\n </ul>\n }\n </article>\n }\n </div>\n </section>\n }\n </div>\n } @else {\n <div class=\"mapa-report-scales mapa-report-scales--detailed\">\n @for (group of groups(); track group.id) {\n <section class=\"mapa-report-scale-group\">\n @if (group.name) {\n <div class=\"mapa-report-scale-group__head\">\n <h3>{{ group.name }}</h3>\n </div>\n }\n <div class=\"mapa-report-scale-group__rows\">\n @for (scale of group.scales; track scale.id) {\n <article\n class=\"mapa-report-scale-card mapa-report-scale-card--detailed\"\n >\n <header class=\"mapa-report-scale-card__head\">\n <div class=\"mapa-report-scale-card__title\">\n <h4>{{ scale.name }}</h4>\n @if (scale.classification) {\n <mapa-classification-tag\n appearance=\"solid\"\n [classification]=\"scale.classification\"\n />\n }\n </div>\n @if (scale.value !== undefined) {\n <div class=\"mapa-report-scale-card__score\">\n <mapa-result-track\n [color]=\"color(scale)\"\n [direction]=\"direction(scale)\"\n [name]=\"scale.name\"\n [showValue]=\"false\"\n [value]=\"scale.value\"\n />\n <span class=\"mapa-report-scale-card__percent\"\n >{{ value(scale) }}%</span\n >\n </div>\n }\n </header>\n @if (scale.concept) {\n <section class=\"mapa-report-scale-card__concept\">\n <h5>{{ i18n.texts.report.conceptTitle }}:</h5>\n <div\n class=\"mapa-report-scale-card__concept-copy\"\n [innerHTML]=\"scale.concept | safeHtml\"\n ></div>\n </section>\n }\n @if (scale.dimensions?.length) {\n <ul class=\"mapa-report-scale-card__dimension-list\">\n @for (dimension of scale.dimensions; track dimension.id) {\n <li>\n <span class=\"mapa-report-scale-card__dimension-name\">\n <span\n class=\"mapa-direction-indicator\"\n [attr.aria-label]=\"directionLabel(dimension, scale)\"\n >{{ directionArrow(dimension, scale) }}</span\n >\n <span>{{ dimension.name }}</span>\n </span>\n <mapa-classification-tag\n appearance=\"solid\"\n [classification]=\"dimension.classification\"\n />\n @if (dimension.description) {\n <div\n class=\"mapa-report-scale-card__copy\"\n [innerHTML]=\"dimension.description | safeHtml\"\n ></div>\n }\n </li>\n }\n </ul>\n }\n </article>\n }\n </div>\n </section>\n }\n </div>\n }\n</section>\n", styles: [":host{--mapa-report-accent: #ff560b;--mapa-report-accent-soft: #fff0e9;--mapa-report-surface: #fff;--mapa-report-surface-muted: #eef2f3;--mapa-report-border: #e1e5e7;--mapa-report-text: #263238;--mapa-report-muted: #68747a;--mapa-report-pill-width: 104px;--mapa-report-radius: 8px;--mapa-report-space: 20px;color:var(--mapa-report-text);display:block;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", sans-serif)}.mapa-report-widget{display:grid;gap:var(--mapa-report-space)}.mapa-report-widget__header{align-items:flex-start;column-gap:16px;display:grid;grid-template-columns:minmax(0,1fr) auto}.mapa-report-widget__heading{display:contents}.mapa-report-widget__heading h2{color:var(--mapa-report-accent);font-size:20px;font-weight:650;grid-column:1;grid-row:1;line-height:1.25;margin:0}.mapa-report-widget__description{color:var(--mapa-report-muted);font-size:13px;grid-column:1/-1;grid-row:2;line-height:1.5;margin:5px 0 0}.mapa-report-widget__description ::ng-deep ol,.mapa-report-widget__description ::ng-deep p,.mapa-report-widget__description ::ng-deep ul{margin:0 0 8px}.mapa-report-widget__description ::ng-deep ol,.mapa-report-widget__description ::ng-deep ul{padding-left:20px}.mapa-report-widget__description ::ng-deep li{margin:0 0 3px}.mapa-report-widget__description ::ng-deep b,.mapa-report-widget__description ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-report-widget__description ::ng-deep :last-child{margin-bottom:0}.mapa-report-widget__modes{--mat-button-toggle-background-color: var(--mapa-report-surface);--mat-button-toggle-divider-color: #cbd5da;--mat-button-toggle-height: 32px;--mat-button-toggle-label-text-font: var( --mapa-font-body, \"Asap\", sans-serif );--mat-button-toggle-label-text-size: 13px;--mat-button-toggle-label-text-weight: 500;--mat-button-toggle-selected-state-background-color: #59636a;--mat-button-toggle-selected-state-text-color: #fffaf7;--mat-button-toggle-shape: 4px;--mat-button-toggle-text-color: #344b5e;border:1px solid #cbd5da;border-radius:4px;grid-column:2;grid-row:1;overflow:hidden}.mapa-report-widget__modes mat-button-toggle{font:500 13px/1 var(--mapa-font-body, \"Asap\", sans-serif)}.mapa-report-widget__modes mat-icon{font-size:14px;height:14px;margin-right:5px;width:14px}.mapa-report-widget__empty{color:var(--mapa-report-muted);margin:0;padding:24px 0;text-align:center}@media(max-width:760px){.mapa-report-widget__header{align-items:stretch;grid-template-columns:minmax(0,1fr)}.mapa-report-widget__modes{grid-column:1;grid-row:3;justify-self:start;margin-top:12px}}.mapa-direction-indicator{background:var(--mapa-report-surface, var(--mapa-color-surface, #fafbfc));border:1px solid currentColor;border-radius:50%;box-sizing:border-box;color:var(--mapa-report-muted, var(--mapa-color-text-subtle, #68747a));display:inline-grid;flex:0 0 20px;font-size:11px;font-weight:700;height:20px;line-height:1;place-items:center;width:20px}:host{--mapa-report-line-soft: #edf1f3;--mapa-report-surface-soft: #fafbfc;--mapa-report-card-radius: 10px}.mapa-report-scale__mode-icon{font-size:12px;margin-right:5px}.mapa-report-scales{display:grid;gap:26px}.mapa-report-scale-group{min-width:0}.mapa-report-scale-group__head{align-items:center;border-bottom:1px solid var(--mapa-report-border);display:flex;gap:11px;margin:0 0 14px;padding:2px 2px 12px}.mapa-report-scale-group__head:before{background:var(--mapa-report-accent);border-radius:4px;content:\"\";flex:0 0 4px;height:24px;width:4px}.mapa-report-scale-group__head h3{font-size:18px;font-weight:600;letter-spacing:-.2px;line-height:1.25;margin:0}.mapa-report-scale-group__grid{align-items:start;display:grid;gap:14px;grid-template-columns:repeat(3,minmax(0,1fr))}.mapa-report-scale-group__rows{display:grid;gap:14px}.mapa-report-scale-card{background:var(--mapa-report-surface);border:1px solid var(--mapa-report-border);border-radius:var(--mapa-report-card-radius);min-width:0}.mapa-report-scale-card mapa-classification-tag{--mapa-classification-tag-min-width: var(--mapa-report-pill-width);flex:0 0 auto;max-width:var(--mapa-report-pill-width)}.mapa-report-scale-card__score{align-items:center;display:flex;gap:9px}.mapa-report-scale-card__score mapa-result-track{flex:1;min-width:0}.mapa-report-scale-card__percent{color:#1f3850;font-size:15px;line-height:1.1}.mapa-report-scale-card__dimension-name{align-items:center;display:flex;gap:7px;min-width:0}.mapa-report-scale-card__dimension-name span:last-child{overflow-wrap:anywhere}.mapa-report-scale-card--summary{padding:16px 14px 13px}.mapa-report-scale-card--summary .mapa-report-scale-card__head{align-items:flex-start;display:flex;gap:10px;justify-content:space-between;min-height:39px}.mapa-report-scale-card--summary .mapa-report-scale-card__head h4{color:#234b68;font-size:16px;font-weight:500;line-height:1.2;margin:0}.mapa-report-scale-card--summary .mapa-report-scale-card__score{margin:15px 0 13px}.mapa-report-scale-card--summary .mapa-report-scale-card__score mapa-result-track{--mapa-result-track-height: 7px}.mapa-report-scale-card--summary .mapa-report-scale-card__dimensions{border-top:1px solid var(--mapa-report-line-soft);display:grid;gap:7px;list-style:none;margin:0;padding:12px 0 0}.mapa-report-scale-card--summary .mapa-report-scale-card__dimensions li{align-items:center;background:var(--mapa-report-surface-soft);border:1px solid var(--mapa-report-line-soft);border-radius:9px;display:grid;gap:8px;grid-template-columns:minmax(0,1fr) auto;min-height:39px;padding:8px 9px}.mapa-report-scale-card--summary .mapa-report-scale-card__dimension-name{color:#3f5870;font-size:11px;line-height:1.25}.mapa-report-scale-card--detailed{padding:21px 20px 18px}.mapa-report-scale-card--detailed .mapa-report-scale-card__head{align-items:center;display:grid;gap:20px;grid-template-columns:minmax(220px,1fr) minmax(300px,390px)}.mapa-report-scale-card--detailed .mapa-report-scale-card__title{align-items:center;display:flex;gap:12px;min-width:0}.mapa-report-scale-card--detailed .mapa-report-scale-card__title h4{font-size:21px;font-weight:500;line-height:1.2;margin:0}.mapa-report-scale-card--detailed .mapa-report-scale-card__score{gap:11px}.mapa-report-scale-card--detailed .mapa-report-scale-card__score mapa-result-track{--mapa-result-track-height: 8px}.mapa-report-scale-card--detailed .mapa-report-scale-card__percent{font-size:21px;min-width:38px;text-align:right}.mapa-report-scale-card--detailed .mapa-report-scale-card__concept{background:var(--mapa-report-surface-soft);border-radius:var(--mapa-report-card-radius);color:var(--mapa-report-muted);font-size:13px;line-height:1.6;margin-top:16px;padding:13px 14px}.mapa-report-scale-card--detailed .mapa-report-scale-card__concept h5{align-items:center;color:#53646e;display:flex;font-size:10px;font-weight:800;gap:10px;letter-spacing:.06em;line-height:1.2;margin:0 0 8px;text-transform:uppercase}.mapa-report-scale-card--detailed .mapa-report-scale-card__concept h5:after{background:var(--mapa-report-border);content:\"\";flex:1;height:1px}.mapa-report-scale-card--detailed .mapa-report-scale-card__concept :last-child{margin-bottom:0}.mapa-report-scale-card--detailed .mapa-report-scale-card__dimension-list{display:grid;gap:8px;list-style:none;margin:14px 0 0;padding:0}.mapa-report-scale-card--detailed .mapa-report-scale-card__dimension-list li{align-items:center;background:var(--mapa-report-surface-soft);border:1px solid var(--mapa-report-line-soft);border-radius:9px;display:grid;gap:16px;grid-template-columns:minmax(180px,240px) var(--mapa-report-pill-width) minmax(0,1fr);min-height:54px;padding:10px 14px}.mapa-report-scale-card--detailed .mapa-report-scale-card__dimension-name{font-size:13px;gap:9px}.mapa-report-scale-card--detailed .mapa-report-scale-card__copy{color:var(--mapa-report-muted);font-size:12px;line-height:1.45}.mapa-report-scale-card--detailed .mapa-report-scale-card__copy ::ng-deep ol,.mapa-report-scale-card--detailed .mapa-report-scale-card__copy ::ng-deep p,.mapa-report-scale-card--detailed .mapa-report-scale-card__copy ::ng-deep ul{margin:0 0 8px}.mapa-report-scale-card--detailed .mapa-report-scale-card__copy ::ng-deep ol,.mapa-report-scale-card--detailed .mapa-report-scale-card__copy ::ng-deep ul{padding-left:20px}.mapa-report-scale-card--detailed .mapa-report-scale-card__copy ::ng-deep li{margin:0 0 3px}.mapa-report-scale-card--detailed .mapa-report-scale-card__copy ::ng-deep b,.mapa-report-scale-card--detailed .mapa-report-scale-card__copy ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-report-scale-card--detailed .mapa-report-scale-card__copy ::ng-deep :last-child{margin-bottom:0}.mapa-report-scale-card--detailed .mapa-report-scale-card__concept-copy ::ng-deep ol,.mapa-report-scale-card--detailed .mapa-report-scale-card__concept-copy ::ng-deep p,.mapa-report-scale-card--detailed .mapa-report-scale-card__concept-copy ::ng-deep ul{margin:0 0 8px}.mapa-report-scale-card--detailed .mapa-report-scale-card__concept-copy ::ng-deep ol,.mapa-report-scale-card--detailed .mapa-report-scale-card__concept-copy ::ng-deep ul{padding-left:20px}.mapa-report-scale-card--detailed .mapa-report-scale-card__concept-copy ::ng-deep li{margin:0 0 3px}.mapa-report-scale-card--detailed .mapa-report-scale-card__concept-copy ::ng-deep b,.mapa-report-scale-card--detailed .mapa-report-scale-card__concept-copy ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-report-scale-card--detailed .mapa-report-scale-card__concept-copy ::ng-deep :last-child{margin-bottom:0}.mapa-report-scale-card--detailed .mapa-report-scale-card__dimension-list mapa-classification-tag{justify-self:start}@media(max-width:1199px){.mapa-report-scale-group__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.mapa-report-scale-card--detailed .mapa-report-scale-card__head{gap:13px;grid-template-columns:1fr}.mapa-report-scale-card--detailed .mapa-report-scale-card__dimension-list li{grid-template-columns:minmax(180px,1fr) var(--mapa-report-pill-width)}.mapa-report-scale-card--detailed .mapa-report-scale-card__copy{grid-column:1/-1;padding-left:28px}}@media(max-width:760px){.mapa-report-scale-group__head h3{font-size:16px}.mapa-report-scale-group__grid{grid-template-columns:1fr}.mapa-report-scale-card--detailed{padding:16px 14px 14px}.mapa-report-scale-card--detailed .mapa-report-scale-card__title h4,.mapa-report-scale-card--detailed .mapa-report-scale-card__percent{font-size:18px}.mapa-report-scale-card--detailed .mapa-report-scale-card__dimension-list li{gap:8px;grid-template-columns:1fr}.mapa-report-scale-card--detailed .mapa-report-scale-card__copy{grid-column:auto;padding-left:28px}}@media(max-width:560px){.mapa-report-scale-card--summary .mapa-report-scale-card__head{flex-wrap:wrap}.mapa-report-widget__modes{--mat-button-toggle-label-text-size: 11px;align-self:stretch;display:flex;justify-self:stretch}.mapa-report-widget__modes mat-button-toggle{flex:1 1 0;font:500 11px/1 var(--mapa-font-body, \"Asap\", sans-serif);min-width:0}.mapa-report-scale__mode-icon{display:none}}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i1$6.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i1$6.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: MapaClassificationTagComponent, selector: "mapa-classification-tag", inputs: ["classification", "size", "appearance", "shape", "casing", "fallbackLabel"] }, { kind: "component", type: MapaReportLegendComponent, selector: "mapa-report-legend", inputs: ["title", "intro", "groupsTitle", "groups", "expanded", "appearance"] }, { kind: "component", type: MapaResultTrackComponent, selector: "mapa-result-track", inputs: ["name", "value", "color", "mode", "appearance", "direction", "showValue", "ariaLabel"] }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8732
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.21", type: MapaReportScaleWidgetComponent, isStandalone: true, selector: "mapa-report-scale-widget", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: true, transformFunction: null }, groups: { classPropertyName: "groups", publicName: "groups", isSignal: true, isRequired: false, transformFunction: null }, legendGroups: { classPropertyName: "legendGroups", publicName: "legendGroups", isSignal: true, isRequired: false, transformFunction: null }, legendTitle: { classPropertyName: "legendTitle", publicName: "legendTitle", isSignal: true, isRequired: false, transformFunction: null }, legendIntro: { classPropertyName: "legendIntro", publicName: "legendIntro", isSignal: true, isRequired: false, transformFunction: null }, legendGroupsTitle: { classPropertyName: "legendGroupsTitle", publicName: "legendGroupsTitle", isSignal: true, isRequired: false, transformFunction: null }, legendExpanded: { classPropertyName: "legendExpanded", publicName: "legendExpanded", isSignal: true, isRequired: false, transformFunction: null }, palette: { classPropertyName: "palette", publicName: "palette", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { mode: "modeChange" }, ngImport: i0, template: "<section class=\"mapa-report-widget\" [attr.data-palette]=\"palette()\">\n <header class=\"mapa-report-widget__header\">\n <div class=\"mapa-report-widget__heading\">\n <h2>{{ heading().title }}</h2>\n @if (heading().description) {\n <div\n class=\"mapa-report-widget__description\"\n [innerHTML]=\"heading().description | safeHtml\"\n ></div>\n }\n </div>\n <mat-button-toggle-group\n class=\"mapa-report-widget__modes\"\n hideSingleSelectionIndicator\n [attr.aria-label]=\"i18n.texts.report.viewModeLabel\"\n [value]=\"mode()\"\n (change)=\"mode.set($event.value)\"\n >\n <mat-button-toggle value=\"summarized\">\n <span class=\"mapa-report-scale__mode-icon\" aria-hidden=\"true\">\u25A5</span>\n {{ i18n.texts.report.summarized }}\n </mat-button-toggle>\n <mat-button-toggle value=\"detailed\">\n <span class=\"mapa-report-scale__mode-icon\" aria-hidden=\"true\">\u25A4</span>\n {{ i18n.texts.report.detailed }}\n </mat-button-toggle>\n </mat-button-toggle-group>\n </header>\n\n @if (legendGroups().length || legendIntro()) {\n <mapa-report-legend\n appearance=\"psychosocial\"\n [expanded]=\"legendExpanded()\"\n [groups]=\"legendGroups()\"\n [groupsTitle]=\"legendGroupsTitle()\"\n [intro]=\"legendIntro()\"\n [title]=\"legendTitle()\"\n />\n }\n\n @if (!scales().length) {\n <p class=\"mapa-report-widget__empty\">{{ i18n.texts.report.emptyState }}</p>\n } @else if (mode() === \"summarized\") {\n <div class=\"mapa-report-scales mapa-report-scales--summary\">\n @for (group of groups(); track group.id) {\n <section class=\"mapa-report-scale-group\">\n @if (group.name) {\n <div class=\"mapa-report-scale-group__head\">\n <h3>{{ group.name }}</h3>\n </div>\n }\n <div class=\"mapa-report-scale-group__grid\">\n @for (scale of group.scales; track scale.id) {\n <article\n class=\"mapa-report-scale-card mapa-report-scale-card--summary\"\n >\n <header class=\"mapa-report-scale-card__head\">\n <h4>{{ scale.name }}</h4>\n <!-- Instrumentos que so pontuam no nivel da dimensao\n (Personalidade, Socioemocional) nao classificam a escala:\n omitimos a tag em vez de cair no rotulo \"sem\n classificacao\". Mesma regra do valor, logo abaixo. -->\n @if (scale.classification) {\n <mapa-classification-tag\n appearance=\"solid\"\n [classification]=\"scale.classification\"\n />\n }\n </header>\n @if (scale.value !== undefined) {\n <div class=\"mapa-report-scale-card__score\">\n <mapa-result-track\n [color]=\"color(scale)\"\n [direction]=\"direction(scale)\"\n [name]=\"scale.name\"\n [showValue]=\"false\"\n [value]=\"scale.value\"\n />\n <span class=\"mapa-report-scale-card__percent\"\n >{{ value(scale) }}%</span\n >\n </div>\n }\n @if (scale.dimensions?.length) {\n <ul class=\"mapa-report-scale-card__dimensions\">\n @for (dimension of scale.dimensions; track dimension.id) {\n <li>\n <span class=\"mapa-report-scale-card__dimension-name\">\n <span\n class=\"mapa-direction-indicator\"\n [attr.aria-label]=\"directionLabel(dimension, scale)\"\n >{{ directionArrow(dimension, scale) }}</span\n >\n <span>{{ dimension.name }}</span>\n </span>\n <mapa-classification-tag\n appearance=\"solid\"\n [classification]=\"dimension.classification\"\n />\n </li>\n }\n </ul>\n }\n </article>\n }\n </div>\n </section>\n }\n </div>\n } @else {\n <div class=\"mapa-report-scales mapa-report-scales--detailed\">\n @for (group of groups(); track group.id) {\n <section class=\"mapa-report-scale-group\">\n @if (group.name) {\n <div class=\"mapa-report-scale-group__head\">\n <h3>{{ group.name }}</h3>\n </div>\n }\n <div class=\"mapa-report-scale-group__rows\">\n @for (scale of group.scales; track scale.id) {\n <article\n class=\"mapa-report-scale-card mapa-report-scale-card--detailed\"\n >\n <header class=\"mapa-report-scale-card__head\">\n <div class=\"mapa-report-scale-card__title\">\n <h4>{{ scale.name }}</h4>\n @if (scale.classification) {\n <mapa-classification-tag\n appearance=\"solid\"\n [classification]=\"scale.classification\"\n />\n }\n </div>\n @if (scale.value !== undefined) {\n <div class=\"mapa-report-scale-card__score\">\n <mapa-result-track\n [color]=\"color(scale)\"\n [direction]=\"direction(scale)\"\n [name]=\"scale.name\"\n [showValue]=\"false\"\n [value]=\"scale.value\"\n />\n <span class=\"mapa-report-scale-card__percent\"\n >{{ value(scale) }}%</span\n >\n </div>\n }\n </header>\n @if (scale.concept) {\n <section class=\"mapa-report-scale-card__concept\">\n <h5>{{ i18n.texts.report.conceptTitle }}:</h5>\n <div\n class=\"mapa-report-scale-card__concept-copy\"\n [innerHTML]=\"scale.concept | safeHtml\"\n ></div>\n </section>\n }\n @if (scale.dimensions?.length) {\n <ul class=\"mapa-report-scale-card__dimension-list\">\n @for (dimension of scale.dimensions; track dimension.id) {\n <li>\n <span class=\"mapa-report-scale-card__dimension-name\">\n <span\n class=\"mapa-direction-indicator\"\n [attr.aria-label]=\"directionLabel(dimension, scale)\"\n >{{ directionArrow(dimension, scale) }}</span\n >\n <span>{{ dimension.name }}</span>\n </span>\n <mapa-classification-tag\n appearance=\"solid\"\n [classification]=\"dimension.classification\"\n />\n @if (dimension.description) {\n <div\n class=\"mapa-report-scale-card__copy\"\n [innerHTML]=\"dimension.description | safeHtml\"\n ></div>\n }\n </li>\n }\n </ul>\n }\n </article>\n }\n </div>\n </section>\n }\n </div>\n }\n</section>\n", styles: [":host{--mapa-report-accent: #ff560b;--mapa-report-accent-soft: #fff0e9;--mapa-report-surface: #fff;--mapa-report-surface-muted: #eef2f3;--mapa-report-border: #e1e5e7;--mapa-report-text: #263238;--mapa-report-muted: #68747a;--mapa-report-pill-width: 104px;--mapa-report-radius: 8px;--mapa-report-space: 20px;color:var(--mapa-report-text);display:block;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", sans-serif)}.mapa-report-widget{display:grid;gap:var(--mapa-report-space)}.mapa-report-widget__header{align-items:flex-start;column-gap:16px;display:grid;grid-template-columns:minmax(0,1fr) auto}.mapa-report-widget__heading{display:contents}.mapa-report-widget__heading h2{color:var(--mapa-report-accent);font-size:20px;font-weight:650;grid-column:1;grid-row:1;line-height:1.25;margin:0}.mapa-report-widget__description{color:var(--mapa-report-muted);font-size:13px;grid-column:1/-1;grid-row:2;line-height:1.5;margin:5px 0 0}.mapa-report-widget__description ::ng-deep ol,.mapa-report-widget__description ::ng-deep p,.mapa-report-widget__description ::ng-deep ul{margin:0 0 8px}.mapa-report-widget__description ::ng-deep ol,.mapa-report-widget__description ::ng-deep ul{padding-left:20px}.mapa-report-widget__description ::ng-deep li{margin:0 0 3px}.mapa-report-widget__description ::ng-deep b,.mapa-report-widget__description ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-report-widget__description ::ng-deep :last-child{margin-bottom:0}.mapa-report-widget__modes{--mat-button-toggle-background-color: var(--mapa-report-surface);--mat-button-toggle-divider-color: #cbd5da;--mat-button-toggle-height: 32px;--mat-button-toggle-label-text-font: var( --mapa-font-body, \"Asap\", sans-serif );--mat-button-toggle-label-text-size: 13px;--mat-button-toggle-label-text-weight: 500;--mat-button-toggle-selected-state-background-color: #59636a;--mat-button-toggle-selected-state-text-color: #fffaf7;--mat-button-toggle-shape: 4px;--mat-button-toggle-text-color: #344b5e;border:1px solid #cbd5da;border-radius:4px;grid-column:2;grid-row:1;overflow:hidden}.mapa-report-widget__modes mat-button-toggle{font:500 13px/1 var(--mapa-font-body, \"Asap\", sans-serif)}.mapa-report-widget__modes mat-icon{font-size:14px;height:14px;margin-right:5px;width:14px}.mapa-report-widget__empty{color:var(--mapa-report-muted);margin:0;padding:24px 0;text-align:center}@media(max-width:760px){.mapa-report-widget__header{align-items:stretch;grid-template-columns:minmax(0,1fr)}.mapa-report-widget__modes{grid-column:1;grid-row:3;justify-self:start;margin-top:12px}}.mapa-direction-indicator{background:var(--mapa-report-surface, var(--mapa-color-surface, #fafbfc));border:1px solid currentColor;border-radius:50%;box-sizing:border-box;color:var(--mapa-report-muted, var(--mapa-color-text-subtle, #68747a));display:inline-grid;flex:0 0 20px;font-size:11px;font-weight:700;height:20px;line-height:1;place-items:center;width:20px}:host{--mapa-report-line-soft: #edf1f3;--mapa-report-surface-soft: #fafbfc;--mapa-report-card-radius: 10px}.mapa-report-scale__mode-icon{font-size:12px;margin-right:5px}.mapa-report-scales{display:grid;gap:26px}.mapa-report-scale-group{min-width:0}.mapa-report-scale-group__head{align-items:center;border-bottom:1px solid var(--mapa-report-border);display:flex;gap:11px;margin:0 0 14px;padding:2px 2px 12px}.mapa-report-scale-group__head:before{background:var(--mapa-report-accent);border-radius:4px;content:\"\";flex:0 0 4px;height:24px;width:4px}.mapa-report-scale-group__head h3{font-size:18px;font-weight:600;letter-spacing:-.2px;line-height:1.25;margin:0}.mapa-report-scale-group__grid{align-items:start;display:grid;gap:14px;grid-template-columns:repeat(3,minmax(0,1fr))}.mapa-report-scale-group__rows{display:grid;gap:14px}.mapa-report-scale-card{background:var(--mapa-report-surface);border:1px solid var(--mapa-report-border);border-radius:var(--mapa-report-card-radius);min-width:0}.mapa-report-scale-card mapa-classification-tag{--mapa-classification-tag-min-width: var(--mapa-report-pill-width);flex:0 0 auto;max-width:var(--mapa-report-pill-width)}.mapa-report-scale-card__score{align-items:center;display:flex;gap:9px}.mapa-report-scale-card__score mapa-result-track{flex:1;min-width:0}.mapa-report-scale-card__percent{color:#1f3850;font-size:15px;line-height:1.1}.mapa-report-scale-card__dimension-name{align-items:center;display:flex;gap:7px;min-width:0}.mapa-report-scale-card__dimension-name span:last-child{overflow-wrap:anywhere}.mapa-report-scale-card--summary{padding:16px 14px 13px}.mapa-report-scale-card--summary .mapa-report-scale-card__head{align-items:flex-start;display:flex;gap:10px;justify-content:space-between;min-height:39px}.mapa-report-scale-card--summary .mapa-report-scale-card__head h4{color:#234b68;font-size:16px;font-weight:500;line-height:1.2;margin:0}.mapa-report-scale-card--summary .mapa-report-scale-card__score{margin:15px 0 13px}.mapa-report-scale-card--summary .mapa-report-scale-card__score mapa-result-track{--mapa-result-track-height: 7px}.mapa-report-scale-card--summary .mapa-report-scale-card__dimensions{border-top:1px solid var(--mapa-report-line-soft);display:grid;gap:7px;list-style:none;margin:0;padding:12px 0 0}.mapa-report-scale-card--summary .mapa-report-scale-card__dimensions li{align-items:center;background:var(--mapa-report-surface-soft);border:1px solid var(--mapa-report-line-soft);border-radius:9px;display:grid;gap:8px;grid-template-columns:minmax(0,1fr) auto;min-height:39px;padding:8px 9px}.mapa-report-scale-card--summary .mapa-report-scale-card__dimension-name{color:#3f5870;font-size:11px;line-height:1.25}.mapa-report-scale-card--detailed{padding:21px 20px 18px}.mapa-report-scale-card--detailed .mapa-report-scale-card__head{align-items:center;display:grid;gap:20px;grid-template-columns:minmax(220px,1fr) minmax(300px,390px)}.mapa-report-scale-card--detailed .mapa-report-scale-card__title{align-items:center;display:flex;gap:12px;min-width:0}.mapa-report-scale-card--detailed .mapa-report-scale-card__title h4{font-size:21px;font-weight:500;line-height:1.2;margin:0}.mapa-report-scale-card--detailed .mapa-report-scale-card__score{gap:11px}.mapa-report-scale-card--detailed .mapa-report-scale-card__score mapa-result-track{--mapa-result-track-height: 8px}.mapa-report-scale-card--detailed .mapa-report-scale-card__percent{font-size:21px;min-width:38px;text-align:right}.mapa-report-scale-card--detailed .mapa-report-scale-card__concept{background:var(--mapa-report-surface-soft);border-radius:var(--mapa-report-card-radius);color:var(--mapa-report-muted);font-size:13px;line-height:1.6;margin-top:16px;padding:13px 14px}.mapa-report-scale-card--detailed .mapa-report-scale-card__concept h5{align-items:center;color:#53646e;display:flex;font-size:10px;font-weight:800;gap:10px;letter-spacing:.06em;line-height:1.2;margin:0 0 8px;text-transform:uppercase}.mapa-report-scale-card--detailed .mapa-report-scale-card__concept h5:after{background:var(--mapa-report-border);content:\"\";flex:1;height:1px}.mapa-report-scale-card--detailed .mapa-report-scale-card__concept :last-child{margin-bottom:0}.mapa-report-scale-card--detailed .mapa-report-scale-card__dimension-list{display:grid;gap:8px;list-style:none;margin:14px 0 0;padding:0}.mapa-report-scale-card--detailed .mapa-report-scale-card__dimension-list li{align-items:center;background:var(--mapa-report-surface-soft);border:1px solid var(--mapa-report-line-soft);border-radius:9px;display:grid;gap:16px;grid-template-columns:minmax(180px,240px) var(--mapa-report-pill-width) minmax(0,1fr);min-height:54px;padding:10px 14px}.mapa-report-scale-card--detailed .mapa-report-scale-card__dimension-name{font-size:13px;gap:9px}.mapa-report-scale-card--detailed .mapa-report-scale-card__copy{color:var(--mapa-report-muted);font-size:12px;line-height:1.45}.mapa-report-scale-card--detailed .mapa-report-scale-card__copy ::ng-deep ol,.mapa-report-scale-card--detailed .mapa-report-scale-card__copy ::ng-deep p,.mapa-report-scale-card--detailed .mapa-report-scale-card__copy ::ng-deep ul{margin:0 0 8px}.mapa-report-scale-card--detailed .mapa-report-scale-card__copy ::ng-deep ol,.mapa-report-scale-card--detailed .mapa-report-scale-card__copy ::ng-deep ul{padding-left:20px}.mapa-report-scale-card--detailed .mapa-report-scale-card__copy ::ng-deep li{margin:0 0 3px}.mapa-report-scale-card--detailed .mapa-report-scale-card__copy ::ng-deep b,.mapa-report-scale-card--detailed .mapa-report-scale-card__copy ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-report-scale-card--detailed .mapa-report-scale-card__copy ::ng-deep :last-child{margin-bottom:0}.mapa-report-scale-card--detailed .mapa-report-scale-card__concept-copy ::ng-deep ol,.mapa-report-scale-card--detailed .mapa-report-scale-card__concept-copy ::ng-deep p,.mapa-report-scale-card--detailed .mapa-report-scale-card__concept-copy ::ng-deep ul{margin:0 0 8px}.mapa-report-scale-card--detailed .mapa-report-scale-card__concept-copy ::ng-deep ol,.mapa-report-scale-card--detailed .mapa-report-scale-card__concept-copy ::ng-deep ul{padding-left:20px}.mapa-report-scale-card--detailed .mapa-report-scale-card__concept-copy ::ng-deep li{margin:0 0 3px}.mapa-report-scale-card--detailed .mapa-report-scale-card__concept-copy ::ng-deep b,.mapa-report-scale-card--detailed .mapa-report-scale-card__concept-copy ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-report-scale-card--detailed .mapa-report-scale-card__concept-copy ::ng-deep :last-child{margin-bottom:0}.mapa-report-scale-card--detailed .mapa-report-scale-card__dimension-list mapa-classification-tag{justify-self:start}@media(max-width:1199px){.mapa-report-scale-group__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.mapa-report-scale-card--detailed .mapa-report-scale-card__head{gap:13px;grid-template-columns:1fr}.mapa-report-scale-card--detailed .mapa-report-scale-card__dimension-list li{grid-template-columns:minmax(180px,1fr) var(--mapa-report-pill-width)}.mapa-report-scale-card--detailed .mapa-report-scale-card__copy{grid-column:1/-1;padding-left:28px}}@media(max-width:760px){.mapa-report-scale-group__head h3{font-size:16px}.mapa-report-scale-group__grid{grid-template-columns:1fr}.mapa-report-scale-card--detailed{padding:16px 14px 14px}.mapa-report-scale-card--detailed .mapa-report-scale-card__title h4,.mapa-report-scale-card--detailed .mapa-report-scale-card__percent{font-size:18px}.mapa-report-scale-card--detailed .mapa-report-scale-card__dimension-list li{gap:8px;grid-template-columns:1fr}.mapa-report-scale-card--detailed .mapa-report-scale-card__copy{grid-column:auto;padding-left:28px}}@media(max-width:560px){.mapa-report-scale-card--summary .mapa-report-scale-card__head{flex-wrap:wrap}.mapa-report-widget__modes{--mat-button-toggle-label-text-size: 11px;align-self:stretch;display:flex;justify-self:stretch}.mapa-report-widget__modes mat-button-toggle{flex:1 1 0;font:500 11px/1 var(--mapa-font-body, \"Asap\", sans-serif);min-width:0}.mapa-report-scale__mode-icon{display:none}}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i1$6.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i1$6.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: MapaClassificationTagComponent, selector: "mapa-classification-tag", inputs: ["classification", "size", "appearance", "shape", "casing", "fallbackLabel"] }, { kind: "component", type: MapaReportLegendComponent, selector: "mapa-report-legend", inputs: ["title", "intro", "groupsTitle", "groups", "expanded", "appearance"] }, { kind: "component", type: MapaResultTrackComponent, selector: "mapa-result-track", inputs: ["name", "value", "color", "mode", "appearance", "style", "direction", "showValue", "ariaLabel"] }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8732
8733
|
}
|
|
8733
8734
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaReportScaleWidgetComponent, decorators: [{
|
|
8734
8735
|
type: Component,
|
|
@@ -8837,7 +8838,7 @@ class MapaReportPsychosocialWidgetComponent {
|
|
|
8837
8838
|
: this.i18n.texts.report.positiveDirectionLabel;
|
|
8838
8839
|
}
|
|
8839
8840
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaReportPsychosocialWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8840
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.21", type: MapaReportPsychosocialWidgetComponent, isStandalone: true, selector: "mapa-report-psychosocial-widget", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, palette: { classPropertyName: "palette", publicName: "palette", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<section class=\"mapa-report-widget\" [attr.data-palette]=\"palette()\">\n <header class=\"mapa-report-widget__header\">\n <div class=\"mapa-report-widget__heading\">\n <h2>{{ heading().title }}</h2>\n @if (heading().description) {\n <div\n class=\"mapa-report-widget__description\"\n [innerHTML]=\"heading().description | safeHtml\"\n ></div>\n }\n </div>\n </header>\n\n @if (data().legendGroups?.length || data().readingIntro) {\n <mapa-report-legend\n appearance=\"psychosocial\"\n [intro]=\"data().readingIntro\"\n [groups]=\"data().legendGroups || []\"\n />\n }\n\n @if (data().globalAverage !== undefined) {\n <section class=\"mapa-report-psychosocial__global\">\n <h3>{{ i18n.texts.report.globalAverageTitle }}</h3>\n <mapa-result-track\n [name]=\"i18n.texts.report.globalAverageTitle\"\n [value]=\"data().globalAverage || 0\"\n />\n @if (data().globalDescription) {\n <div\n class=\"mapa-report-psychosocial__global-description\"\n [innerHTML]=\"data().globalDescription | safeHtml\"\n ></div>\n }\n </section>\n }\n\n @if (data().factors?.length) {\n <div class=\"mapa-report-psychosocial__factors\">\n @for (group of data().factors; track group.id) {\n <section class=\"mapa-report-psychosocial__group\">\n <h3>{{ group.name }}</h3>\n @for (indicator of group.indicators; track indicator.id) {\n <article class=\"mapa-report-psychosocial__factor\">\n <header>\n <h4>{{ indicator.name }}</h4>\n <mapa-result-track\n mode=\"diverging\"\n [name]=\"indicator.name\"\n [value]=\"indicator.value ?? 0\"\n [direction]=\"indicator.direction || 'positive'\"\n [color]=\"color(indicator)\"\n />\n <strong>{{ indicator.value ?? 0 }}%</strong>\n </header>\n\n @if (indicator.concept) {\n <section class=\"mapa-report-psychosocial__concept\">\n <h5>{{ i18n.texts.report.scaleConceptTitle }}</h5>\n <div\n class=\"mapa-report-psychosocial__copy\"\n [innerHTML]=\"indicator.concept | safeHtml\"\n ></div>\n </section>\n }\n\n @if (indicator.description) {\n <div\n class=\"mapa-report-psychosocial__description\"\n [innerHTML]=\"indicator.description | safeHtml\"\n ></div>\n }\n\n @if (indicator.dimensions?.length) {\n <section class=\"mapa-report-psychosocial__dimensions\">\n <h5>{{ i18n.texts.report.psychosocialFactorsTitle }}</h5>\n <div class=\"mapa-report-psychosocial__dimension-list\">\n @for (dimension of indicator.dimensions; track dimension.id) {\n <div class=\"mapa-report-psychosocial__dimension\">\n <span class=\"mapa-report-psychosocial__dimension-name\">\n <span\n class=\"mapa-direction-indicator\"\n [attr.aria-label]=\"\n directionLabel(\n dimension.direction || indicator.direction\n )\n \"\n >{{\n directionArrow(\n dimension.direction || indicator.direction\n )\n }}</span\n >\n <span>{{ dimension.name }}</span>\n </span>\n <mapa-result-track\n mode=\"diverging\"\n [name]=\"dimension.name\"\n [value]=\"dimension.value ?? 0\"\n [direction]=\"\n dimension.direction ||\n indicator.direction ||\n 'positive'\n \"\n [color]=\"\n dimension.classification?.classificationColor ||\n color(indicator)\n \"\n />\n <strong>{{ dimension.value ?? 0 }}%</strong>\n </div>\n }\n </div>\n </section>\n }\n </article>\n }\n </section>\n }\n </div>\n } @else if (data().globalAverage === undefined) {\n <p class=\"mapa-report-widget__empty\">{{ i18n.texts.report.emptyState }}</p>\n }\n</section>\n", styles: [":host{--mapa-report-accent: #ff560b;--mapa-report-accent-soft: #fff0e9;--mapa-report-surface: #fff;--mapa-report-surface-muted: #eef2f3;--mapa-report-border: #e1e5e7;--mapa-report-text: #263238;--mapa-report-muted: #68747a;--mapa-report-pill-width: 104px;--mapa-report-radius: 8px;--mapa-report-space: 20px;color:var(--mapa-report-text);display:block;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", sans-serif)}.mapa-report-widget{display:grid;gap:var(--mapa-report-space)}.mapa-report-widget__header{align-items:flex-start;column-gap:16px;display:grid;grid-template-columns:minmax(0,1fr) auto}.mapa-report-widget__heading{display:contents}.mapa-report-widget__heading h2{color:var(--mapa-report-accent);font-size:20px;font-weight:650;grid-column:1;grid-row:1;line-height:1.25;margin:0}.mapa-report-widget__description{color:var(--mapa-report-muted);font-size:13px;grid-column:1/-1;grid-row:2;line-height:1.5;margin:5px 0 0}.mapa-report-widget__description ::ng-deep ol,.mapa-report-widget__description ::ng-deep p,.mapa-report-widget__description ::ng-deep ul{margin:0 0 8px}.mapa-report-widget__description ::ng-deep ol,.mapa-report-widget__description ::ng-deep ul{padding-left:20px}.mapa-report-widget__description ::ng-deep li{margin:0 0 3px}.mapa-report-widget__description ::ng-deep b,.mapa-report-widget__description ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-report-widget__description ::ng-deep :last-child{margin-bottom:0}.mapa-report-widget__modes{--mat-button-toggle-background-color: var(--mapa-report-surface);--mat-button-toggle-divider-color: #cbd5da;--mat-button-toggle-height: 32px;--mat-button-toggle-label-text-font: var( --mapa-font-body, \"Asap\", sans-serif );--mat-button-toggle-label-text-size: 13px;--mat-button-toggle-label-text-weight: 500;--mat-button-toggle-selected-state-background-color: #59636a;--mat-button-toggle-selected-state-text-color: #fffaf7;--mat-button-toggle-shape: 4px;--mat-button-toggle-text-color: #344b5e;border:1px solid #cbd5da;border-radius:4px;grid-column:2;grid-row:1;overflow:hidden}.mapa-report-widget__modes mat-button-toggle{font:500 13px/1 var(--mapa-font-body, \"Asap\", sans-serif)}.mapa-report-widget__modes mat-icon{font-size:14px;height:14px;margin-right:5px;width:14px}.mapa-report-widget__empty{color:var(--mapa-report-muted);margin:0;padding:24px 0;text-align:center}@media(max-width:760px){.mapa-report-widget__header{align-items:stretch;grid-template-columns:minmax(0,1fr)}.mapa-report-widget__modes{grid-column:1;grid-row:3;justify-self:start;margin-top:12px}}.mapa-direction-indicator{background:var(--mapa-report-surface, var(--mapa-color-surface, #fafbfc));border:1px solid currentColor;border-radius:50%;box-sizing:border-box;color:var(--mapa-report-muted, var(--mapa-color-text-subtle, #68747a));display:inline-grid;flex:0 0 20px;font-size:11px;font-weight:700;height:20px;line-height:1;place-items:center;width:20px}.mapa-report-psychosocial__global{align-items:center;background:var(--mapa-report-surface);border:1px solid var(--mapa-report-border);border-radius:12px;display:grid;gap:12px 24px;grid-template-columns:minmax(180px,.62fr) minmax(260px,1.38fr);padding:16px 18px}.mapa-report-psychosocial__global h3{font-size:14px;margin:0}.mapa-report-psychosocial__global>div{color:var(--mapa-report-muted);font-size:12px;grid-column:1/-1;line-height:1.55}.mapa-report-psychosocial__global>div ::ng-deep ol,.mapa-report-psychosocial__global>div ::ng-deep p,.mapa-report-psychosocial__global>div ::ng-deep ul{margin:0 0 8px}.mapa-report-psychosocial__global>div ::ng-deep ol,.mapa-report-psychosocial__global>div ::ng-deep ul{padding-left:20px}.mapa-report-psychosocial__global>div ::ng-deep li{margin:0 0 3px}.mapa-report-psychosocial__global>div ::ng-deep b,.mapa-report-psychosocial__global>div ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-report-psychosocial__global>div ::ng-deep :last-child{margin-bottom:0}.mapa-report-psychosocial__factors,.mapa-report-psychosocial__group{display:grid}.mapa-report-psychosocial__factors{gap:28px}.mapa-report-psychosocial__group{gap:12px}.mapa-report-psychosocial__group>h3{align-items:center;border-bottom:1px solid var(--mapa-report-border);color:var(--mapa-report-text);display:flex;font-size:18px;font-weight:600;gap:11px;line-height:1.25;margin:0;padding:2px 2px 12px}.mapa-report-psychosocial__group>h3:before{background:var(--mapa-report-accent);border-radius:4px;content:\"\";flex:0 0 4px;height:24px}.mapa-report-psychosocial__factor{background:var(--mapa-report-surface);border:1px solid var(--mapa-report-border);border-radius:13px;overflow:hidden}.mapa-report-psychosocial__factor>header{align-items:center;display:grid;gap:20px;grid-template-columns:minmax(180px,1fr) minmax(260px,1.2fr) auto;padding:17px 18px 14px}.mapa-report-psychosocial__factor>header h4{color:#274866;font-size:17px;font-weight:500;line-height:1.25;margin:0}.mapa-report-psychosocial__factor>header>strong{color:var(--mapa-report-text);font-size:18px;text-align:right}.mapa-report-psychosocial__concept{background:#f8f9fa;border-radius:10px;margin:0 18px;padding:13px 14px}.mapa-report-psychosocial__concept div{color:var(--mapa-report-muted);font-size:12px;line-height:1.6}.mapa-report-psychosocial__concept div ::ng-deep ol,.mapa-report-psychosocial__concept div ::ng-deep p,.mapa-report-psychosocial__concept div ::ng-deep ul{margin:0 0 8px}.mapa-report-psychosocial__concept div ::ng-deep ol,.mapa-report-psychosocial__concept div ::ng-deep ul{padding-left:20px}.mapa-report-psychosocial__concept div ::ng-deep li{margin:0 0 3px}.mapa-report-psychosocial__concept div ::ng-deep b,.mapa-report-psychosocial__concept div ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-report-psychosocial__concept div ::ng-deep :last-child{margin-bottom:0}.mapa-report-psychosocial__description{color:var(--mapa-report-muted);font-size:12px;line-height:1.55;padding:14px 18px 0}.mapa-report-psychosocial__description ::ng-deep ol,.mapa-report-psychosocial__description ::ng-deep p,.mapa-report-psychosocial__description ::ng-deep ul{margin:0 0 8px}.mapa-report-psychosocial__description ::ng-deep ol,.mapa-report-psychosocial__description ::ng-deep ul{padding-left:20px}.mapa-report-psychosocial__description ::ng-deep li{margin:0 0 3px}.mapa-report-psychosocial__description ::ng-deep b,.mapa-report-psychosocial__description ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-report-psychosocial__description ::ng-deep :last-child{margin-bottom:0}.mapa-report-psychosocial__concept h5,.mapa-report-psychosocial__dimensions h5{align-items:center;color:#53646e;display:flex;font-size:10px;font-weight:800;gap:10px;letter-spacing:.06em;margin:0 0 8px;text-transform:uppercase}.mapa-report-psychosocial__concept h5:after,.mapa-report-psychosocial__dimensions h5:after{background:var(--mapa-report-border);content:\"\";flex:1;height:1px}.mapa-report-psychosocial__dimensions{padding:16px 18px 18px}.mapa-report-psychosocial__dimensions h5{margin-bottom:10px}.mapa-report-psychosocial__dimension-list{display:grid}.mapa-report-psychosocial__dimension{align-items:center;display:grid;gap:14px;grid-template-columns:212px minmax(220px,1fr) 45px;min-height:34px;padding:5px 0}.mapa-report-psychosocial__dimension+.mapa-report-psychosocial__dimension{border-top:1px solid #edf0f2}.mapa-report-psychosocial__dimension>strong{color:var(--mapa-report-muted);font-size:11px;text-align:right}.mapa-report-psychosocial__dimension-name{align-items:center;color:#3f5870;display:flex;font-size:12px;gap:7px;min-width:0}.mapa-report-psychosocial__dimension-name>span:last-child{overflow-wrap:anywhere}@media(max-width:760px){.mapa-report-psychosocial__global,.mapa-report-psychosocial__factor>header,.mapa-report-psychosocial__dimension{grid-template-columns:1fr}.mapa-report-psychosocial__factor>header{gap:8px}.mapa-report-psychosocial__factor>header>strong{text-align:left}.mapa-report-psychosocial__dimension{gap:4px}.mapa-report-psychosocial__dimension>strong{text-align:left}.mapa-report-psychosocial__concept{margin:0 14px}.mapa-report-psychosocial__dimensions{padding:14px}}\n"], dependencies: [{ kind: "component", type: MapaReportLegendComponent, selector: "mapa-report-legend", inputs: ["title", "intro", "groupsTitle", "groups", "expanded", "appearance"] }, { kind: "component", type: MapaResultTrackComponent, selector: "mapa-result-track", inputs: ["name", "value", "color", "mode", "appearance", "direction", "showValue", "ariaLabel"] }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8841
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.21", type: MapaReportPsychosocialWidgetComponent, isStandalone: true, selector: "mapa-report-psychosocial-widget", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, palette: { classPropertyName: "palette", publicName: "palette", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<section class=\"mapa-report-widget\" [attr.data-palette]=\"palette()\">\n <header class=\"mapa-report-widget__header\">\n <div class=\"mapa-report-widget__heading\">\n <h2>{{ heading().title }}</h2>\n @if (heading().description) {\n <div\n class=\"mapa-report-widget__description\"\n [innerHTML]=\"heading().description | safeHtml\"\n ></div>\n }\n </div>\n </header>\n\n @if (data().legendGroups?.length || data().readingIntro) {\n <mapa-report-legend\n appearance=\"psychosocial\"\n [intro]=\"data().readingIntro\"\n [groups]=\"data().legendGroups || []\"\n />\n }\n\n @if (data().globalAverage !== undefined) {\n <section class=\"mapa-report-psychosocial__global\">\n <h3>{{ i18n.texts.report.globalAverageTitle }}</h3>\n <mapa-result-track\n [name]=\"i18n.texts.report.globalAverageTitle\"\n [value]=\"data().globalAverage || 0\"\n />\n @if (data().globalDescription) {\n <div\n class=\"mapa-report-psychosocial__global-description\"\n [innerHTML]=\"data().globalDescription | safeHtml\"\n ></div>\n }\n </section>\n }\n\n @if (data().factors?.length) {\n <div class=\"mapa-report-psychosocial__factors\">\n @for (group of data().factors; track group.id) {\n <section class=\"mapa-report-psychosocial__group\">\n <h3>{{ group.name }}</h3>\n @for (indicator of group.indicators; track indicator.id) {\n <article class=\"mapa-report-psychosocial__factor\">\n <header>\n <h4>{{ indicator.name }}</h4>\n <mapa-result-track\n mode=\"diverging\"\n [name]=\"indicator.name\"\n [value]=\"indicator.value ?? 0\"\n [direction]=\"indicator.direction || 'positive'\"\n [color]=\"color(indicator)\"\n />\n <strong>{{ indicator.value ?? 0 }}%</strong>\n </header>\n\n @if (indicator.concept) {\n <section class=\"mapa-report-psychosocial__concept\">\n <h5>{{ i18n.texts.report.scaleConceptTitle }}</h5>\n <div\n class=\"mapa-report-psychosocial__copy\"\n [innerHTML]=\"indicator.concept | safeHtml\"\n ></div>\n </section>\n }\n\n @if (indicator.description) {\n <div\n class=\"mapa-report-psychosocial__description\"\n [innerHTML]=\"indicator.description | safeHtml\"\n ></div>\n }\n\n @if (indicator.dimensions?.length) {\n <section class=\"mapa-report-psychosocial__dimensions\">\n <h5>{{ i18n.texts.report.psychosocialFactorsTitle }}</h5>\n <div class=\"mapa-report-psychosocial__dimension-list\">\n @for (dimension of indicator.dimensions; track dimension.id) {\n <div class=\"mapa-report-psychosocial__dimension\">\n <span class=\"mapa-report-psychosocial__dimension-name\">\n <span\n class=\"mapa-direction-indicator\"\n [attr.aria-label]=\"\n directionLabel(\n dimension.direction || indicator.direction\n )\n \"\n >{{\n directionArrow(\n dimension.direction || indicator.direction\n )\n }}</span\n >\n <span>{{ dimension.name }}</span>\n </span>\n <mapa-result-track\n mode=\"diverging\"\n [name]=\"dimension.name\"\n [value]=\"dimension.value ?? 0\"\n [direction]=\"\n dimension.direction ||\n indicator.direction ||\n 'positive'\n \"\n [color]=\"\n dimension.classification?.classificationColor ||\n color(indicator)\n \"\n />\n <strong>{{ dimension.value ?? 0 }}%</strong>\n </div>\n }\n </div>\n </section>\n }\n </article>\n }\n </section>\n }\n </div>\n } @else if (data().globalAverage === undefined) {\n <p class=\"mapa-report-widget__empty\">{{ i18n.texts.report.emptyState }}</p>\n }\n</section>\n", styles: [":host{--mapa-report-accent: #ff560b;--mapa-report-accent-soft: #fff0e9;--mapa-report-surface: #fff;--mapa-report-surface-muted: #eef2f3;--mapa-report-border: #e1e5e7;--mapa-report-text: #263238;--mapa-report-muted: #68747a;--mapa-report-pill-width: 104px;--mapa-report-radius: 8px;--mapa-report-space: 20px;color:var(--mapa-report-text);display:block;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", sans-serif)}.mapa-report-widget{display:grid;gap:var(--mapa-report-space)}.mapa-report-widget__header{align-items:flex-start;column-gap:16px;display:grid;grid-template-columns:minmax(0,1fr) auto}.mapa-report-widget__heading{display:contents}.mapa-report-widget__heading h2{color:var(--mapa-report-accent);font-size:20px;font-weight:650;grid-column:1;grid-row:1;line-height:1.25;margin:0}.mapa-report-widget__description{color:var(--mapa-report-muted);font-size:13px;grid-column:1/-1;grid-row:2;line-height:1.5;margin:5px 0 0}.mapa-report-widget__description ::ng-deep ol,.mapa-report-widget__description ::ng-deep p,.mapa-report-widget__description ::ng-deep ul{margin:0 0 8px}.mapa-report-widget__description ::ng-deep ol,.mapa-report-widget__description ::ng-deep ul{padding-left:20px}.mapa-report-widget__description ::ng-deep li{margin:0 0 3px}.mapa-report-widget__description ::ng-deep b,.mapa-report-widget__description ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-report-widget__description ::ng-deep :last-child{margin-bottom:0}.mapa-report-widget__modes{--mat-button-toggle-background-color: var(--mapa-report-surface);--mat-button-toggle-divider-color: #cbd5da;--mat-button-toggle-height: 32px;--mat-button-toggle-label-text-font: var( --mapa-font-body, \"Asap\", sans-serif );--mat-button-toggle-label-text-size: 13px;--mat-button-toggle-label-text-weight: 500;--mat-button-toggle-selected-state-background-color: #59636a;--mat-button-toggle-selected-state-text-color: #fffaf7;--mat-button-toggle-shape: 4px;--mat-button-toggle-text-color: #344b5e;border:1px solid #cbd5da;border-radius:4px;grid-column:2;grid-row:1;overflow:hidden}.mapa-report-widget__modes mat-button-toggle{font:500 13px/1 var(--mapa-font-body, \"Asap\", sans-serif)}.mapa-report-widget__modes mat-icon{font-size:14px;height:14px;margin-right:5px;width:14px}.mapa-report-widget__empty{color:var(--mapa-report-muted);margin:0;padding:24px 0;text-align:center}@media(max-width:760px){.mapa-report-widget__header{align-items:stretch;grid-template-columns:minmax(0,1fr)}.mapa-report-widget__modes{grid-column:1;grid-row:3;justify-self:start;margin-top:12px}}.mapa-direction-indicator{background:var(--mapa-report-surface, var(--mapa-color-surface, #fafbfc));border:1px solid currentColor;border-radius:50%;box-sizing:border-box;color:var(--mapa-report-muted, var(--mapa-color-text-subtle, #68747a));display:inline-grid;flex:0 0 20px;font-size:11px;font-weight:700;height:20px;line-height:1;place-items:center;width:20px}.mapa-report-psychosocial__global{align-items:center;background:var(--mapa-report-surface);border:1px solid var(--mapa-report-border);border-radius:12px;display:grid;gap:12px 24px;grid-template-columns:minmax(180px,.62fr) minmax(260px,1.38fr);padding:16px 18px}.mapa-report-psychosocial__global h3{font-size:14px;margin:0}.mapa-report-psychosocial__global>div{color:var(--mapa-report-muted);font-size:12px;grid-column:1/-1;line-height:1.55}.mapa-report-psychosocial__global>div ::ng-deep ol,.mapa-report-psychosocial__global>div ::ng-deep p,.mapa-report-psychosocial__global>div ::ng-deep ul{margin:0 0 8px}.mapa-report-psychosocial__global>div ::ng-deep ol,.mapa-report-psychosocial__global>div ::ng-deep ul{padding-left:20px}.mapa-report-psychosocial__global>div ::ng-deep li{margin:0 0 3px}.mapa-report-psychosocial__global>div ::ng-deep b,.mapa-report-psychosocial__global>div ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-report-psychosocial__global>div ::ng-deep :last-child{margin-bottom:0}.mapa-report-psychosocial__factors,.mapa-report-psychosocial__group{display:grid}.mapa-report-psychosocial__factors{gap:28px}.mapa-report-psychosocial__group{gap:12px}.mapa-report-psychosocial__group>h3{align-items:center;border-bottom:1px solid var(--mapa-report-border);color:var(--mapa-report-text);display:flex;font-size:18px;font-weight:600;gap:11px;line-height:1.25;margin:0;padding:2px 2px 12px}.mapa-report-psychosocial__group>h3:before{background:var(--mapa-report-accent);border-radius:4px;content:\"\";flex:0 0 4px;height:24px}.mapa-report-psychosocial__factor{background:var(--mapa-report-surface);border:1px solid var(--mapa-report-border);border-radius:13px;overflow:hidden}.mapa-report-psychosocial__factor>header{align-items:center;display:grid;gap:20px;grid-template-columns:minmax(180px,1fr) minmax(260px,1.2fr) auto;padding:17px 18px 14px}.mapa-report-psychosocial__factor>header h4{color:#274866;font-size:17px;font-weight:500;line-height:1.25;margin:0}.mapa-report-psychosocial__factor>header>strong{color:var(--mapa-report-text);font-size:18px;text-align:right}.mapa-report-psychosocial__concept{background:#f8f9fa;border-radius:10px;margin:0 18px;padding:13px 14px}.mapa-report-psychosocial__concept div{color:var(--mapa-report-muted);font-size:12px;line-height:1.6}.mapa-report-psychosocial__concept div ::ng-deep ol,.mapa-report-psychosocial__concept div ::ng-deep p,.mapa-report-psychosocial__concept div ::ng-deep ul{margin:0 0 8px}.mapa-report-psychosocial__concept div ::ng-deep ol,.mapa-report-psychosocial__concept div ::ng-deep ul{padding-left:20px}.mapa-report-psychosocial__concept div ::ng-deep li{margin:0 0 3px}.mapa-report-psychosocial__concept div ::ng-deep b,.mapa-report-psychosocial__concept div ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-report-psychosocial__concept div ::ng-deep :last-child{margin-bottom:0}.mapa-report-psychosocial__description{color:var(--mapa-report-muted);font-size:12px;line-height:1.55;padding:14px 18px 0}.mapa-report-psychosocial__description ::ng-deep ol,.mapa-report-psychosocial__description ::ng-deep p,.mapa-report-psychosocial__description ::ng-deep ul{margin:0 0 8px}.mapa-report-psychosocial__description ::ng-deep ol,.mapa-report-psychosocial__description ::ng-deep ul{padding-left:20px}.mapa-report-psychosocial__description ::ng-deep li{margin:0 0 3px}.mapa-report-psychosocial__description ::ng-deep b,.mapa-report-psychosocial__description ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-report-psychosocial__description ::ng-deep :last-child{margin-bottom:0}.mapa-report-psychosocial__concept h5,.mapa-report-psychosocial__dimensions h5{align-items:center;color:#53646e;display:flex;font-size:10px;font-weight:800;gap:10px;letter-spacing:.06em;margin:0 0 8px;text-transform:uppercase}.mapa-report-psychosocial__concept h5:after,.mapa-report-psychosocial__dimensions h5:after{background:var(--mapa-report-border);content:\"\";flex:1;height:1px}.mapa-report-psychosocial__dimensions{padding:16px 18px 18px}.mapa-report-psychosocial__dimensions h5{margin-bottom:10px}.mapa-report-psychosocial__dimension-list{display:grid}.mapa-report-psychosocial__dimension{align-items:center;display:grid;gap:14px;grid-template-columns:212px minmax(220px,1fr) 45px;min-height:34px;padding:5px 0}.mapa-report-psychosocial__dimension+.mapa-report-psychosocial__dimension{border-top:1px solid #edf0f2}.mapa-report-psychosocial__dimension>strong{color:var(--mapa-report-muted);font-size:11px;text-align:right}.mapa-report-psychosocial__dimension-name{align-items:center;color:#3f5870;display:flex;font-size:12px;gap:7px;min-width:0}.mapa-report-psychosocial__dimension-name>span:last-child{overflow-wrap:anywhere}@media(max-width:760px){.mapa-report-psychosocial__global,.mapa-report-psychosocial__factor>header,.mapa-report-psychosocial__dimension{grid-template-columns:1fr}.mapa-report-psychosocial__factor>header{gap:8px}.mapa-report-psychosocial__factor>header>strong{text-align:left}.mapa-report-psychosocial__dimension{gap:4px}.mapa-report-psychosocial__dimension>strong{text-align:left}.mapa-report-psychosocial__concept{margin:0 14px}.mapa-report-psychosocial__dimensions{padding:14px}}\n"], dependencies: [{ kind: "component", type: MapaReportLegendComponent, selector: "mapa-report-legend", inputs: ["title", "intro", "groupsTitle", "groups", "expanded", "appearance"] }, { kind: "component", type: MapaResultTrackComponent, selector: "mapa-result-track", inputs: ["name", "value", "color", "mode", "appearance", "style", "direction", "showValue", "ariaLabel"] }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8841
8842
|
}
|
|
8842
8843
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaReportPsychosocialWidgetComponent, decorators: [{
|
|
8843
8844
|
type: Component,
|
|
@@ -9025,7 +9026,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImpo
|
|
|
9025
9026
|
class MapaReportParameterizationWidgetComponent {
|
|
9026
9027
|
constructor() {
|
|
9027
9028
|
this.i18n = inject(MapaI18nService);
|
|
9028
|
-
this.segments = Array.from({ length: 10 }, (_, index) => index);
|
|
9029
9029
|
this.heading = input.required(...(ngDevMode ? [{ debugName: "heading" }] : []));
|
|
9030
9030
|
this.data = input.required(...(ngDevMode ? [{ debugName: "data" }] : []));
|
|
9031
9031
|
this.legend = input([], ...(ngDevMode ? [{ debugName: "legend" }] : []));
|
|
@@ -9033,15 +9033,32 @@ class MapaReportParameterizationWidgetComponent {
|
|
|
9033
9033
|
this.content = input('all', ...(ngDevMode ? [{ debugName: "content" }] : []));
|
|
9034
9034
|
this.mode = model('summarized', ...(ngDevMode ? [{ debugName: "mode" }] : []));
|
|
9035
9035
|
this.metadata = computed(() => (this.data().metadata ?? []).filter((item) => !!item.value?.trim()), ...(ngDevMode ? [{ debugName: "metadata" }] : []));
|
|
9036
|
-
|
|
9036
|
+
/** Classificação final do resultado: tag neutra logo abaixo do nome da parametrização. */
|
|
9037
|
+
this.finalClassification = computed(() => {
|
|
9038
|
+
const final = this.data().finalClassification;
|
|
9039
|
+
return final?.label?.trim() ? final : null;
|
|
9040
|
+
}, ...(ngDevMode ? [{ debugName: "finalClassification" }] : []));
|
|
9041
|
+
/**
|
|
9042
|
+
* O resumo mostra o valor por grupo; seções sem agrupamento (sem nota de
|
|
9043
|
+
* grupo) caem para as competências.
|
|
9044
|
+
*/
|
|
9045
|
+
this.summaryRows = computed(() => this.data().sections.flatMap((section) => this.isNumber(section.value)
|
|
9037
9046
|
? [
|
|
9038
9047
|
{
|
|
9039
|
-
id: `
|
|
9040
|
-
name:
|
|
9041
|
-
value:
|
|
9048
|
+
id: `group:${section.id}`,
|
|
9049
|
+
name: section.name?.trim() || this.i18n.texts.report.groupsTitle,
|
|
9050
|
+
value: section.value,
|
|
9042
9051
|
},
|
|
9043
9052
|
]
|
|
9044
|
-
:
|
|
9053
|
+
: section.competences.flatMap((competence) => this.isNumber(competence.value)
|
|
9054
|
+
? [
|
|
9055
|
+
{
|
|
9056
|
+
id: `competence:${section.id}:${competence.id}`,
|
|
9057
|
+
name: competence.name,
|
|
9058
|
+
value: competence.value,
|
|
9059
|
+
},
|
|
9060
|
+
]
|
|
9061
|
+
: [])), ...(ngDevMode ? [{ debugName: "summaryRows" }] : []));
|
|
9045
9062
|
this.rankingViews = computed(() => {
|
|
9046
9063
|
const groupEntries = this.data()
|
|
9047
9064
|
.sections.filter((section) => !!section.name?.trim() && this.isNumber(section.value))
|
|
@@ -9085,10 +9102,6 @@ class MapaReportParameterizationWidgetComponent {
|
|
|
9085
9102
|
return 0;
|
|
9086
9103
|
return Math.min(100, Math.max(0, Math.round(value)));
|
|
9087
9104
|
}
|
|
9088
|
-
filledSegments(value) {
|
|
9089
|
-
const safeValue = this.safeValue(value);
|
|
9090
|
-
return safeValue === 100 ? 10 : Math.floor(safeValue / 10);
|
|
9091
|
-
}
|
|
9092
9105
|
direction(value) {
|
|
9093
9106
|
return value === 'negative' ? 'negative' : 'positive';
|
|
9094
9107
|
}
|
|
@@ -9117,7 +9130,7 @@ class MapaReportParameterizationWidgetComponent {
|
|
|
9117
9130
|
return typeof value === 'number' && Number.isFinite(value);
|
|
9118
9131
|
}
|
|
9119
9132
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaReportParameterizationWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9120
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.21", type: MapaReportParameterizationWidgetComponent, isStandalone: true, selector: "mapa-report-parameterization-widget", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, legend: { classPropertyName: "legend", publicName: "legend", isSignal: true, isRequired: false, transformFunction: null }, palette: { classPropertyName: "palette", publicName: "palette", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { mode: "modeChange" }, ngImport: i0, template: "<section class=\"mapa-report-widget\" [attr.data-palette]=\"palette()\">\n <header class=\"mapa-report-widget__header\">\n <div class=\"mapa-report-widget__heading\">\n <h2>{{ heading().title }}</h2>\n @if (heading().description) {\n <div\n class=\"mapa-report-widget__description\"\n [innerHTML]=\"heading().description | safeHtml\"\n ></div>\n }\n </div>\n @if (content() !== \"ranking\") {\n <mat-button-toggle-group\n class=\"mapa-report-widget__modes\"\n hideSingleSelectionIndicator\n [attr.aria-label]=\"i18n.texts.report.viewModeLabel\"\n [value]=\"mode()\"\n (change)=\"mode.set($event.value)\"\n >\n <mat-button-toggle value=\"summarized\">\n {{ i18n.texts.report.summarized }}\n </mat-button-toggle>\n <mat-button-toggle value=\"detailed\">\n {{ i18n.texts.report.detailed }}\n </mat-button-toggle>\n </mat-button-toggle-group>\n }\n </header>\n\n @if (content() !== \"ranking\") {\n <section class=\"mapa-parameterization-overview\">\n <div class=\"mapa-parameterization-overview__headline\">\n <div>\n <span class=\"mapa-parameterization-overview__eyebrow\">{{\n heading().title\n }}</span>\n <h3>{{ data().name }}</h3>\n </div>\n\n <div class=\"mapa-parameterization-overview__score\">\n <span>{{ i18n.texts.report.overallPercentageTitle }}</span>\n <mapa-result-track\n appearance=\"stepped\"\n color=\"#59636a\"\n [name]=\"data().name\"\n [value]=\"data().value\"\n />\n </div>\n </div>\n </section>\n\n @if (legend().length) {\n <mapa-report-legend\n class=\"mapa-parameterization-legend\"\n appearance=\"psychosocial\"\n [expanded]=\"true\"\n [groups]=\"legend()\"\n />\n }\n\n @if (mode() === \"summarized\" && summaryRows().length) {\n <section class=\"mapa-parameterization-summary\">\n <h3>{{ i18n.texts.report.summarizedReportTitle }}</h3>\n <div class=\"mapa-parameterization-summary__rows\">\n @for (row of summaryRows(); track row.id) {\n <div class=\"mapa-parameterization-summary__row\">\n <span>{{ row.name }}</span>\n <span\n class=\"mapa-parameterization-summary__track\"\n role=\"meter\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n [attr.aria-valuenow]=\"safeValue(row.value)\"\n [attr.aria-label]=\"\n i18n.texts.report.meterLabel(row.name, safeValue(row.value))\n \"\n >\n <i\n [style.width.%]=\"safeValue(row.value)\"\n aria-hidden=\"true\"\n ></i>\n </span>\n <strong>{{ safeValue(row.value) }}%</strong>\n </div>\n }\n </div>\n </section>\n }\n\n @if (mode() === \"detailed\" && data().sections.length) {\n <section class=\"mapa-parameterization-detail\">\n <h3>{{ i18n.texts.report.detailedReportTitle }}</h3>\n\n <div class=\"mapa-parameterization-detail__sections\">\n @for (section of data().sections; track section.id) {\n <section class=\"mapa-parameterization-group\">\n @if (section.name || section.value !== undefined) {\n <header class=\"mapa-parameterization-group__header\">\n <div>\n @if (section.name) {\n <h4>{{ section.name }}</h4>\n }\n @if (section.description) {\n <div [innerHTML]=\"section.description | safeHtml\"></div>\n }\n </div>\n @if (section.value !== undefined) {\n <div\n class=\"mapa-parameterization-segments mapa-parameterization-segments--small\"\n >\n <span\n class=\"mapa-parameterization-segments__cells\"\n role=\"meter\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n [attr.aria-valuenow]=\"safeValue(section.value)\"\n [attr.aria-label]=\"\n i18n.texts.report.meterLabel(\n section.name || i18n.texts.report.groupsTitle,\n safeValue(section.value)\n )\n \"\n >\n @for (segment of segments; track segment) {\n <i\n [class.mapa-parameterization-segments__cell--filled]=\"\n segment < filledSegments(section.value)\n \"\n ></i>\n }\n </span>\n <strong aria-hidden=\"true\"\n >{{ safeValue(section.value) }}%</strong\n >\n </div>\n }\n </header>\n }\n\n @if (section.competences.length) {\n <div class=\"mapa-parameterization-group__label\">\n {{ i18n.texts.report.competenciesAndDimensionsTitle }}\n </div>\n\n <div class=\"mapa-parameterization-group__grid\">\n @for (\n competence of section.competences;\n track competence.id\n ) {\n <article class=\"mapa-parameterization-competence\">\n <header class=\"mapa-parameterization-competence__header\">\n <h5>{{ competence.name }}</h5>\n <div\n class=\"mapa-parameterization-segments mapa-parameterization-segments--small\"\n >\n <span\n class=\"mapa-parameterization-segments__cells\"\n role=\"meter\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n [attr.aria-valuenow]=\"safeValue(competence.value)\"\n [attr.aria-label]=\"\n i18n.texts.report.meterLabel(\n competence.name,\n safeValue(competence.value)\n )\n \"\n >\n @for (segment of segments; track segment) {\n <i\n [class.mapa-parameterization-segments__cell--filled]=\"\n segment < filledSegments(competence.value)\n \"\n ></i>\n }\n </span>\n <strong aria-hidden=\"true\"\n >{{ safeValue(competence.value) }}%</strong\n >\n </div>\n </header>\n\n @if (competence.description) {\n <div\n class=\"mapa-parameterization-competence__description\"\n [innerHTML]=\"competence.description | safeHtml\"\n ></div>\n }\n\n @if (competence.dimensions?.length) {\n <ul class=\"mapa-parameterization-dimensions\">\n @for (\n dimension of competence.dimensions;\n track dimension.id\n ) {\n <li>\n <span\n class=\"mapa-parameterization-dimensions__name\"\n >\n <span\n class=\"mapa-direction-indicator\"\n [attr.aria-label]=\"\n directionLabel(dimension.direction)\n \"\n >{{\n directionArrow(dimension.direction)\n }}</span\n >\n <span>{{ dimension.name }}</span>\n </span>\n @if (hasClassification(dimension)) {\n <mapa-classification-tag\n appearance=\"solid\"\n [classification]=\"dimension.classification\"\n />\n }\n @if (dimension.description) {\n <div\n class=\"mapa-parameterization-dimensions__description\"\n [innerHTML]=\"dimension.description | safeHtml\"\n ></div>\n }\n </li>\n }\n </ul>\n }\n </article>\n }\n </div>\n }\n </section>\n }\n </div>\n </section>\n }\n }\n\n @if (content() !== \"report\" && rankingViews().length) {\n <section class=\"mapa-parameterization-ranking\">\n @if (content() === \"all\") {\n <h3>{{ i18n.texts.report.parameterizationRankingTitle }}</h3>\n }\n <mapa-report-ranking-table-widget\n [palette]=\"palette()\"\n [showAverage]=\"false\"\n [views]=\"rankingViews()\"\n />\n </section>\n }\n</section>\n", styles: [":host{--mapa-report-accent: #ff560b;--mapa-report-accent-soft: #fff0e9;--mapa-report-surface: #fff;--mapa-report-surface-muted: #eef2f3;--mapa-report-border: #e1e5e7;--mapa-report-text: #263238;--mapa-report-muted: #68747a;--mapa-report-pill-width: 104px;--mapa-report-radius: 8px;--mapa-report-space: 20px;color:var(--mapa-report-text);display:block;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", sans-serif)}.mapa-report-widget{display:grid;gap:var(--mapa-report-space)}.mapa-report-widget__header{align-items:flex-start;column-gap:16px;display:grid;grid-template-columns:minmax(0,1fr) auto}.mapa-report-widget__heading{display:contents}.mapa-report-widget__heading h2{color:var(--mapa-report-accent);font-size:20px;font-weight:650;grid-column:1;grid-row:1;line-height:1.25;margin:0}.mapa-report-widget__description{color:var(--mapa-report-muted);font-size:13px;grid-column:1/-1;grid-row:2;line-height:1.5;margin:5px 0 0}.mapa-report-widget__description ::ng-deep ol,.mapa-report-widget__description ::ng-deep p,.mapa-report-widget__description ::ng-deep ul{margin:0 0 8px}.mapa-report-widget__description ::ng-deep ol,.mapa-report-widget__description ::ng-deep ul{padding-left:20px}.mapa-report-widget__description ::ng-deep li{margin:0 0 3px}.mapa-report-widget__description ::ng-deep b,.mapa-report-widget__description ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-report-widget__description ::ng-deep :last-child{margin-bottom:0}.mapa-report-widget__modes{--mat-button-toggle-background-color: var(--mapa-report-surface);--mat-button-toggle-divider-color: #cbd5da;--mat-button-toggle-height: 32px;--mat-button-toggle-label-text-font: var( --mapa-font-body, \"Asap\", sans-serif );--mat-button-toggle-label-text-size: 13px;--mat-button-toggle-label-text-weight: 500;--mat-button-toggle-selected-state-background-color: #59636a;--mat-button-toggle-selected-state-text-color: #fffaf7;--mat-button-toggle-shape: 4px;--mat-button-toggle-text-color: #344b5e;border:1px solid #cbd5da;border-radius:4px;grid-column:2;grid-row:1;overflow:hidden}.mapa-report-widget__modes mat-button-toggle{font:500 13px/1 var(--mapa-font-body, \"Asap\", sans-serif)}.mapa-report-widget__modes mat-icon{font-size:14px;height:14px;margin-right:5px;width:14px}.mapa-report-widget__empty{color:var(--mapa-report-muted);margin:0;padding:24px 0;text-align:center}@media(max-width:760px){.mapa-report-widget__header{align-items:stretch;grid-template-columns:minmax(0,1fr)}.mapa-report-widget__modes{grid-column:1;grid-row:3;justify-self:start;margin-top:12px}}.mapa-direction-indicator{background:var(--mapa-report-surface, var(--mapa-color-surface, #fafbfc));border:1px solid currentColor;border-radius:50%;box-sizing:border-box;color:var(--mapa-report-muted, var(--mapa-color-text-subtle, #68747a));display:inline-grid;flex:0 0 20px;font-size:11px;font-weight:700;height:20px;line-height:1;place-items:center;width:20px}:host{--mapa-parameterization-accent: #59636a;--mapa-parameterization-rail: #dfe4ea;--mapa-parameterization-line: #e7ebee;--mapa-report-card-radius: 10px;--mapa-report-line-soft: #edf1f3;--mapa-report-surface-soft: #fafbfc}.mapa-parameterization-overview{border:1px solid var(--mapa-report-border);border-radius:16px;display:grid;gap:22px;padding:24px}.mapa-parameterization-overview__headline{align-items:start;display:grid;gap:24px;grid-template-columns:minmax(0,1fr) auto}.mapa-parameterization-overview__eyebrow{color:#8a95a5;display:block;font-size:12px;line-height:1.3;margin-bottom:6px;text-transform:uppercase}.mapa-parameterization-overview h3{color:#2c2e3a;font-size:24px;font-weight:650;line-height:1.25;margin:0;overflow-wrap:anywhere}.mapa-parameterization-overview__score{display:grid;gap:7px;min-width:290px}.mapa-parameterization-overview__score mapa-result-track{display:block;min-width:0;width:100%}.mapa-parameterization-overview__score>span{color:#8a95a5;font-size:12px;text-transform:uppercase}.mapa-parameterization-overview__metadata{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));margin:0}.mapa-parameterization-overview__metadata div{border:1px solid var(--mapa-report-border);border-radius:12px;min-width:0;padding:13px 15px}.mapa-parameterization-overview__metadata dt{color:#8a95a5;font-size:11px;line-height:1.3;margin-bottom:8px;text-transform:uppercase}.mapa-parameterization-overview__metadata dd{color:#2c2e3a;font-size:15px;font-weight:650;line-height:1.35;margin:0;overflow-wrap:anywhere}.mapa-parameterization-segments{align-items:center;display:flex;gap:12px}.mapa-parameterization-segments__cells{display:grid;flex:0 0 auto;gap:5px;grid-template-columns:repeat(10,var(--mapa-parameterization-segment-width, 18px))}.mapa-parameterization-segments i{background:#d8dee7;border-radius:7px;display:block;height:40px}.mapa-parameterization-segments i.mapa-parameterization-segments__cell--filled{background:var(--mapa-parameterization-accent)}.mapa-parameterization-segments strong{color:var(--mapa-parameterization-accent);font-size:17px;min-width:44px}.mapa-parameterization-segments--small{--mapa-parameterization-segment-width: 10px;min-width:min(270px,100%)}.mapa-parameterization-segments--small i{border-radius:5px;height:30px}.mapa-parameterization-segments--small strong{color:#596575;font-size:14px;min-width:36px}.mapa-parameterization-legend{--mapa-classification-tag-min-width: var(--mapa-report-pill-width)}.mapa-parameterization-summary,.mapa-parameterization-detail,.mapa-parameterization-ranking{display:grid;gap:16px;min-width:0}.mapa-parameterization-summary>h3,.mapa-parameterization-detail>h3,.mapa-parameterization-ranking>h3{color:#596575;font-size:18px;font-weight:650;line-height:1.3;margin:0}.mapa-parameterization-summary__rows{border:1px solid var(--mapa-report-border);border-radius:14px;padding:16px 20px}.mapa-parameterization-summary__row{align-items:center;display:grid;gap:20px;grid-template-columns:minmax(200px,36%) minmax(140px,1fr) 48px;min-height:48px}.mapa-parameterization-summary__row+.mapa-parameterization-summary__row{border-top:1px solid var(--mapa-parameterization-line)}.mapa-parameterization-summary__row>span:first-child{color:#4f5d70;font-size:14px;line-height:1.35;overflow-wrap:anywhere}.mapa-parameterization-summary__row>strong{color:#596575;font-size:14px;text-align:right}.mapa-parameterization-summary__track{background:var(--mapa-parameterization-rail);border-radius:999px;display:block;height:14px;overflow:hidden}.mapa-parameterization-summary__track i{background:var(--mapa-parameterization-accent);border-radius:inherit;display:block;height:100%}@media(max-width:900px){.mapa-parameterization-overview__headline,.mapa-parameterization-group__header{grid-template-columns:minmax(0,1fr)}.mapa-parameterization-overview__score,.mapa-parameterization-segments--small{min-width:0}.mapa-parameterization-dimensions li{grid-template-columns:minmax(150px,1fr) auto}.mapa-parameterization-dimensions__description{grid-column:1/-1;padding-left:28px}}@media(max-width:600px){.mapa-parameterization-overview,.mapa-parameterization-group{padding:16px}.mapa-parameterization-overview h3{font-size:20px}.mapa-parameterization-segments{--mapa-parameterization-segment-width: 12px;align-items:flex-end;gap:8px}.mapa-parameterization-segments__cells{gap:3px}.mapa-parameterization-segments i{height:32px}.mapa-parameterization-segments--small{--mapa-parameterization-segment-width: 8px}.mapa-parameterization-summary__rows{padding:8px 14px}.mapa-parameterization-summary__row{gap:9px;grid-template-columns:minmax(0,1fr) 44px;padding:10px 0}.mapa-parameterization-summary__row .mapa-parameterization-summary__track{grid-column:1/-1;grid-row:2}.mapa-parameterization-summary__row>strong{grid-column:2;grid-row:1}.mapa-parameterization-dimensions li{grid-template-columns:minmax(0,1fr)}.mapa-parameterization-dimensions__description{grid-column:auto;padding-left:28px}}@media print{.mapa-parameterization-overview,.mapa-parameterization-group,.mapa-parameterization-competence{break-inside:avoid}}\n", ".mapa-parameterization-detail__sections{display:grid;gap:22px}.mapa-parameterization-group{--mapa-classification-tag-min-width: var(--mapa-report-pill-width);border:1px solid var(--mapa-report-border);border-radius:14px;min-width:0;padding:18px}.mapa-parameterization-group__header{align-items:start;display:grid;gap:20px;grid-template-columns:minmax(0,1fr) auto}.mapa-parameterization-group__header h4{color:#2c2e3a;font-size:20px;font-weight:650;line-height:1.25;margin:0;overflow-wrap:anywhere}.mapa-parameterization-group__header>div:first-child>div{color:var(--mapa-report-muted);font-size:12px;line-height:1.5;margin-top:5px}.mapa-parameterization-group__header>div:first-child>div ::ng-deep ol,.mapa-parameterization-group__header>div:first-child>div ::ng-deep p,.mapa-parameterization-group__header>div:first-child>div ::ng-deep ul{margin:0 0 8px}.mapa-parameterization-group__header>div:first-child>div ::ng-deep ol,.mapa-parameterization-group__header>div:first-child>div ::ng-deep ul{padding-left:20px}.mapa-parameterization-group__header>div:first-child>div ::ng-deep li{margin:0 0 3px}.mapa-parameterization-group__header>div:first-child>div ::ng-deep b,.mapa-parameterization-group__header>div:first-child>div ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-parameterization-group__header>div:first-child>div ::ng-deep :last-child{margin-bottom:0}.mapa-parameterization-group__label{background:#f1f4f8;border:1px solid var(--mapa-report-border);border-radius:7px;color:#405064;font-size:13px;font-weight:650;margin-top:16px;padding:7px 10px}.mapa-parameterization-group__grid{display:grid;column-gap:14px;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:14px;row-gap:14px}.mapa-parameterization-dimensions mapa-classification-tag{flex:0 0 auto;max-width:var(--mapa-report-pill-width)}.mapa-parameterization-competence{background:var(--mapa-report-surface);border:1px solid var(--mapa-report-border);border-radius:var(--mapa-report-card-radius);min-width:0;padding:16px 14px 13px}.mapa-parameterization-competence__header{align-items:center;display:grid;gap:14px;grid-template-columns:minmax(0,1fr) auto}.mapa-parameterization-competence__header .mapa-parameterization-segments{justify-self:end;min-width:0}.mapa-parameterization-competence__header h5{color:#2c2e3a;font-size:16px;font-weight:650;line-height:1.3;margin:0;overflow-wrap:anywhere}.mapa-parameterization-competence__description{color:var(--mapa-report-muted);font-size:12px;line-height:1.5;margin-top:12px}.mapa-parameterization-competence__description ::ng-deep ol,.mapa-parameterization-competence__description ::ng-deep p,.mapa-parameterization-competence__description ::ng-deep ul{margin:0 0 8px}.mapa-parameterization-competence__description ::ng-deep ol,.mapa-parameterization-competence__description ::ng-deep ul{padding-left:20px}.mapa-parameterization-competence__description ::ng-deep li{margin:0 0 3px}.mapa-parameterization-competence__description ::ng-deep b,.mapa-parameterization-competence__description ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-parameterization-competence__description ::ng-deep :last-child{margin-bottom:0}.mapa-parameterization-dimensions{border-top:1px solid var(--mapa-report-line-soft);display:grid;gap:7px;list-style:none;margin:14px 0 0;padding:12px 0 0}.mapa-parameterization-dimensions li{align-items:center;background:var(--mapa-report-surface-soft);border:1px solid var(--mapa-report-line-soft);border-radius:9px;display:grid;gap:10px;grid-template-columns:minmax(0,1fr) auto;padding:9px 10px}.mapa-parameterization-dimensions__name{align-items:center;color:#4f5d70;display:flex;font-size:12px;gap:8px;line-height:1.4;min-width:0}.mapa-parameterization-dimensions__name span:last-child{overflow-wrap:anywhere}.mapa-parameterization-dimensions__description{color:var(--mapa-report-muted);font-size:11px;grid-column:1/-1;line-height:1.45;padding-left:28px}.mapa-parameterization-dimensions__description ::ng-deep ol,.mapa-parameterization-dimensions__description ::ng-deep p,.mapa-parameterization-dimensions__description ::ng-deep ul{margin:0 0 8px}.mapa-parameterization-dimensions__description ::ng-deep ol,.mapa-parameterization-dimensions__description ::ng-deep ul{padding-left:20px}.mapa-parameterization-dimensions__description ::ng-deep li{margin:0 0 3px}.mapa-parameterization-dimensions__description ::ng-deep b,.mapa-parameterization-dimensions__description ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-parameterization-dimensions__description ::ng-deep :last-child{margin-bottom:0}.mapa-parameterization-ranking mapa-report-ranking-table-widget{display:block;min-width:0}@media(max-width:1100px){.mapa-parameterization-group__grid{grid-template-columns:minmax(0,1fr)}}@media(max-width:600px){.mapa-parameterization-competence__header{grid-template-columns:minmax(0,1fr)}.mapa-parameterization-competence__header .mapa-parameterization-segments{justify-self:start}}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i1$6.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i1$6.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: MapaClassificationTagComponent, selector: "mapa-classification-tag", inputs: ["classification", "size", "appearance", "shape", "casing", "fallbackLabel"] }, { kind: "component", type: MapaReportLegendComponent, selector: "mapa-report-legend", inputs: ["title", "intro", "groupsTitle", "groups", "expanded", "appearance"] }, { kind: "component", type: MapaReportRankingTableWidgetComponent, selector: "mapa-report-ranking-table-widget", inputs: ["heading", "views", "view", "palette", "showAverage", "showScoreOnHover", "entryColumnLabel", "note", "averageLabel"], outputs: ["viewChange"] }, { kind: "component", type: MapaResultTrackComponent, selector: "mapa-result-track", inputs: ["name", "value", "color", "mode", "appearance", "direction", "showValue", "ariaLabel"] }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
9133
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.21", type: MapaReportParameterizationWidgetComponent, isStandalone: true, selector: "mapa-report-parameterization-widget", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, legend: { classPropertyName: "legend", publicName: "legend", isSignal: true, isRequired: false, transformFunction: null }, palette: { classPropertyName: "palette", publicName: "palette", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { mode: "modeChange" }, ngImport: i0, template: "<section class=\"mapa-report-widget\" [attr.data-palette]=\"palette()\">\n <header class=\"mapa-report-widget__header\">\n <div class=\"mapa-report-widget__heading\">\n <h2>{{ heading().title }}</h2>\n @if (heading().description) {\n <div\n class=\"mapa-report-widget__description\"\n [innerHTML]=\"heading().description | safeHtml\"\n ></div>\n }\n </div>\n @if (content() !== \"ranking\") {\n <mat-button-toggle-group\n class=\"mapa-report-widget__modes\"\n hideSingleSelectionIndicator\n [attr.aria-label]=\"i18n.texts.report.viewModeLabel\"\n [value]=\"mode()\"\n (change)=\"mode.set($event.value)\"\n >\n <mat-button-toggle value=\"summarized\">\n {{ i18n.texts.report.summarized }}\n </mat-button-toggle>\n <mat-button-toggle value=\"detailed\">\n {{ i18n.texts.report.detailed }}\n </mat-button-toggle>\n </mat-button-toggle-group>\n }\n </header>\n\n @if (content() !== \"ranking\") {\n <section class=\"mapa-parameterization-overview\">\n <div class=\"mapa-parameterization-overview__headline\">\n <div>\n <span class=\"mapa-parameterization-overview__eyebrow\">{{\n heading().title\n }}</span>\n <h3>{{ data().name }}</h3>\n </div>\n\n <div class=\"mapa-parameterization-overview__score\">\n <span>{{ i18n.texts.report.overallPercentageTitle }}</span>\n <mapa-result-track\n appearance=\"stepped\"\n color=\"#59636a\"\n [style]=\"'thick'\"\n [name]=\"data().name\"\n [value]=\"data().value\"\n />\n </div>\n </div>\n\n @if (finalClassification(); as final) {\n <div class=\"mapa-parameterization-overview__classification\">\n <span class=\"mapa-parameterization-overview__classification-tag\">{{\n final.label\n }}</span>\n @if (final.description) {\n <p>{{ final.description }}</p>\n }\n </div>\n }\n </section>\n\n @if (legend().length) {\n <mapa-report-legend\n class=\"mapa-parameterization-legend\"\n appearance=\"psychosocial\"\n [expanded]=\"true\"\n [groups]=\"legend()\"\n />\n }\n\n @if (mode() === \"summarized\" && summaryRows().length) {\n <section class=\"mapa-parameterization-summary\">\n <h3>{{ i18n.texts.report.summarizedReportTitle }}</h3>\n <div class=\"mapa-parameterization-summary__rows\">\n @for (row of summaryRows(); track row.id) {\n <div class=\"mapa-parameterization-summary__row\">\n <span>{{ row.name }}</span>\n <span\n class=\"mapa-parameterization-summary__track\"\n role=\"meter\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n [attr.aria-valuenow]=\"safeValue(row.value)\"\n [attr.aria-label]=\"\n i18n.texts.report.meterLabel(row.name, safeValue(row.value))\n \"\n >\n <i\n [style.width.%]=\"safeValue(row.value)\"\n aria-hidden=\"true\"\n ></i>\n </span>\n <strong>{{ safeValue(row.value) }}%</strong>\n </div>\n }\n </div>\n </section>\n }\n\n @if (mode() === \"detailed\" && data().sections.length) {\n <section class=\"mapa-parameterization-detail\">\n <h3>{{ i18n.texts.report.detailedReportTitle }}</h3>\n\n <div class=\"mapa-parameterization-detail__sections\">\n @for (section of data().sections; track section.id) {\n <section class=\"mapa-parameterization-group\">\n @if (section.name || section.value !== undefined) {\n <header class=\"mapa-parameterization-group__header\">\n <div>\n @if (section.name) {\n <h4>{{ section.name }}</h4>\n }\n @if (section.description) {\n <div [innerHTML]=\"section.description | safeHtml\"></div>\n }\n </div>\n @if (section.value !== undefined) {\n <mapa-result-track\n appearance=\"stepped\"\n color=\"#59636a\"\n [style]=\"'thin'\"\n [name]=\"section.name || i18n.texts.report.groupsTitle\"\n [value]=\"safeValue(section.value)\"\n />\n }\n </header>\n }\n\n @if (section.competences.length) {\n <div class=\"mapa-parameterization-group__label\">\n {{ i18n.texts.report.competenciesAndDimensionsTitle }}\n </div>\n\n <div class=\"mapa-parameterization-group__grid\">\n @for (\n competence of section.competences;\n track competence.id\n ) {\n <article class=\"mapa-parameterization-competence\">\n <header class=\"mapa-parameterization-competence__header\">\n <h5>{{ competence.name }}</h5>\n <mapa-result-track\n appearance=\"stepped\"\n color=\"#59636a\"\n [style]=\"'thin'\"\n [name]=\"competence.name\"\n [value]=\"safeValue(competence.value)\"\n />\n </header>\n\n @if (competence.description) {\n <div\n class=\"mapa-parameterization-competence__description\"\n [innerHTML]=\"competence.description | safeHtml\"\n ></div>\n }\n\n @if (competence.dimensions?.length) {\n <ul class=\"mapa-parameterization-dimensions\">\n @for (\n dimension of competence.dimensions;\n track dimension.id\n ) {\n <li>\n <span\n class=\"mapa-parameterization-dimensions__name\"\n >\n <span\n class=\"mapa-direction-indicator\"\n [attr.aria-label]=\"\n directionLabel(dimension.direction)\n \"\n >{{\n directionArrow(dimension.direction)\n }}</span\n >\n <span>{{ dimension.name }}</span>\n </span>\n @if (hasClassification(dimension)) {\n <mapa-classification-tag\n appearance=\"solid\"\n [classification]=\"dimension.classification\"\n />\n }\n @if (dimension.description) {\n <div\n class=\"mapa-parameterization-dimensions__description\"\n [innerHTML]=\"dimension.description | safeHtml\"\n ></div>\n }\n </li>\n }\n </ul>\n }\n </article>\n }\n </div>\n }\n </section>\n }\n </div>\n </section>\n }\n }\n\n @if (content() !== \"report\" && rankingViews().length) {\n <section class=\"mapa-parameterization-ranking\">\n @if (content() === \"all\") {\n <h3>{{ i18n.texts.report.parameterizationRankingTitle }}</h3>\n }\n <mapa-report-ranking-table-widget\n [palette]=\"palette()\"\n [showAverage]=\"false\"\n [views]=\"rankingViews()\"\n />\n </section>\n }\n</section>\n", styles: [":host{--mapa-report-accent: #ff560b;--mapa-report-accent-soft: #fff0e9;--mapa-report-surface: #fff;--mapa-report-surface-muted: #eef2f3;--mapa-report-border: #e1e5e7;--mapa-report-text: #263238;--mapa-report-muted: #68747a;--mapa-report-pill-width: 104px;--mapa-report-radius: 8px;--mapa-report-space: 20px;color:var(--mapa-report-text);display:block;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", sans-serif)}.mapa-report-widget{display:grid;gap:var(--mapa-report-space)}.mapa-report-widget__header{align-items:flex-start;column-gap:16px;display:grid;grid-template-columns:minmax(0,1fr) auto}.mapa-report-widget__heading{display:contents}.mapa-report-widget__heading h2{color:var(--mapa-report-accent);font-size:20px;font-weight:650;grid-column:1;grid-row:1;line-height:1.25;margin:0}.mapa-report-widget__description{color:var(--mapa-report-muted);font-size:13px;grid-column:1/-1;grid-row:2;line-height:1.5;margin:5px 0 0}.mapa-report-widget__description ::ng-deep ol,.mapa-report-widget__description ::ng-deep p,.mapa-report-widget__description ::ng-deep ul{margin:0 0 8px}.mapa-report-widget__description ::ng-deep ol,.mapa-report-widget__description ::ng-deep ul{padding-left:20px}.mapa-report-widget__description ::ng-deep li{margin:0 0 3px}.mapa-report-widget__description ::ng-deep b,.mapa-report-widget__description ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-report-widget__description ::ng-deep :last-child{margin-bottom:0}.mapa-report-widget__modes{--mat-button-toggle-background-color: var(--mapa-report-surface);--mat-button-toggle-divider-color: #cbd5da;--mat-button-toggle-height: 32px;--mat-button-toggle-label-text-font: var( --mapa-font-body, \"Asap\", sans-serif );--mat-button-toggle-label-text-size: 13px;--mat-button-toggle-label-text-weight: 500;--mat-button-toggle-selected-state-background-color: #59636a;--mat-button-toggle-selected-state-text-color: #fffaf7;--mat-button-toggle-shape: 4px;--mat-button-toggle-text-color: #344b5e;border:1px solid #cbd5da;border-radius:4px;grid-column:2;grid-row:1;overflow:hidden}.mapa-report-widget__modes mat-button-toggle{font:500 13px/1 var(--mapa-font-body, \"Asap\", sans-serif)}.mapa-report-widget__modes mat-icon{font-size:14px;height:14px;margin-right:5px;width:14px}.mapa-report-widget__empty{color:var(--mapa-report-muted);margin:0;padding:24px 0;text-align:center}@media(max-width:760px){.mapa-report-widget__header{align-items:stretch;grid-template-columns:minmax(0,1fr)}.mapa-report-widget__modes{grid-column:1;grid-row:3;justify-self:start;margin-top:12px}}.mapa-direction-indicator{background:var(--mapa-report-surface, var(--mapa-color-surface, #fafbfc));border:1px solid currentColor;border-radius:50%;box-sizing:border-box;color:var(--mapa-report-muted, var(--mapa-color-text-subtle, #68747a));display:inline-grid;flex:0 0 20px;font-size:11px;font-weight:700;height:20px;line-height:1;place-items:center;width:20px}:host{--mapa-parameterization-accent: #59636a;--mapa-parameterization-rail: #dfe4ea;--mapa-parameterization-line: #e7ebee;--mapa-report-card-radius: 10px;--mapa-report-line-soft: #edf1f3;--mapa-report-surface-soft: #fafbfc}.mapa-parameterization-overview{border:1px solid var(--mapa-report-border);border-radius:16px;display:grid;gap:22px;padding:24px}.mapa-parameterization-overview__headline{align-items:start;display:grid;gap:24px;grid-template-columns:minmax(0,1fr) auto}.mapa-parameterization-overview__eyebrow{color:#8a95a5;display:block;font-size:12px;line-height:1.3;margin-bottom:6px;text-transform:uppercase}.mapa-parameterization-overview h3{color:#2c2e3a;font-size:24px;font-weight:650;line-height:1.25;margin:0;overflow-wrap:anywhere}.mapa-parameterization-overview__score{display:grid;gap:7px;min-width:290px}.mapa-parameterization-overview__score mapa-result-track{display:block;min-width:0;width:100%}.mapa-parameterization-overview__score>span{color:#8a95a5;font-size:12px;text-transform:uppercase}.mapa-parameterization-overview__classification{display:grid;gap:8px;justify-items:start}.mapa-parameterization-overview__classification p{color:#59636a;font-size:14px;line-height:1.5;margin:0;overflow-wrap:anywhere}.mapa-parameterization-overview__classification-tag{background:#fff;border:1px solid var(--mapa-report-border);border-radius:999px;color:#2c2e3a;font-size:13px;font-weight:650;line-height:1.3;padding:5px 13px}.mapa-parameterization-overview__metadata{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));margin:0}.mapa-parameterization-overview__metadata div{border:1px solid var(--mapa-report-border);border-radius:12px;min-width:0;padding:13px 15px}.mapa-parameterization-overview__metadata dt{color:#8a95a5;font-size:11px;line-height:1.3;margin-bottom:8px;text-transform:uppercase}.mapa-parameterization-overview__metadata dd{color:#2c2e3a;font-size:15px;font-weight:650;line-height:1.35;margin:0;overflow-wrap:anywhere}.mapa-parameterization-legend{--mapa-classification-tag-min-width: var(--mapa-report-pill-width)}.mapa-parameterization-summary,.mapa-parameterization-detail,.mapa-parameterization-ranking{display:grid;gap:16px;min-width:0}.mapa-parameterization-summary>h3,.mapa-parameterization-detail>h3,.mapa-parameterization-ranking>h3{color:#596575;font-size:18px;font-weight:650;line-height:1.3;margin:0}.mapa-parameterization-summary__rows{border:1px solid var(--mapa-report-border);border-radius:14px;padding:16px 20px}.mapa-parameterization-summary__row{align-items:center;display:grid;gap:20px;grid-template-columns:minmax(200px,36%) minmax(140px,1fr) 48px;min-height:48px}.mapa-parameterization-summary__row+.mapa-parameterization-summary__row{border-top:1px solid var(--mapa-parameterization-line)}.mapa-parameterization-summary__row>span:first-child{color:#4f5d70;font-size:14px;line-height:1.35;overflow-wrap:anywhere}.mapa-parameterization-summary__row>strong{color:#596575;font-size:14px;text-align:right}.mapa-parameterization-summary__track{background:var(--mapa-parameterization-rail);border-radius:999px;display:block;height:14px;overflow:hidden}.mapa-parameterization-summary__track i{background:var(--mapa-parameterization-accent);border-radius:inherit;display:block;height:100%}@media(max-width:900px){.mapa-parameterization-overview__headline,.mapa-parameterization-group__header{grid-template-columns:minmax(0,1fr)}.mapa-parameterization-overview__score,mapa-result-track{min-width:0}.mapa-parameterization-group__header>mapa-result-track{justify-self:start}.mapa-parameterization-dimensions li{grid-template-columns:minmax(150px,1fr) auto}.mapa-parameterization-dimensions__description{grid-column:1/-1;padding-left:28px}}@media(max-width:600px){.mapa-parameterization-overview,.mapa-parameterization-group{padding:16px}.mapa-parameterization-overview h3{font-size:20px}.mapa-parameterization-summary__rows{padding:8px 14px}.mapa-parameterization-summary__row{gap:9px;grid-template-columns:minmax(0,1fr) 44px;padding:10px 0}.mapa-parameterization-summary__row .mapa-parameterization-summary__track{grid-column:1/-1;grid-row:2}.mapa-parameterization-summary__row>strong{grid-column:2;grid-row:1}.mapa-parameterization-dimensions li{grid-template-columns:minmax(0,1fr)}.mapa-parameterization-dimensions__description{grid-column:auto;padding-left:28px}}@media print{.mapa-parameterization-overview,.mapa-parameterization-group,.mapa-parameterization-competence{break-inside:avoid}}\n", ".mapa-parameterization-detail__sections{display:grid;gap:22px}.mapa-parameterization-group{--mapa-classification-tag-min-width: var(--mapa-report-pill-width);border:1px solid var(--mapa-report-border);border-radius:14px;min-width:0;padding:18px}.mapa-parameterization-group__header{align-items:start;display:grid;gap:20px;grid-template-columns:minmax(0,1fr) auto}.mapa-parameterization-group__header>mapa-result-track{display:block;justify-self:end;max-width:100%;width:max-content}.mapa-parameterization-group__header h4{color:#2c2e3a;font-size:20px;font-weight:650;line-height:1.25;margin:0;overflow-wrap:anywhere}.mapa-parameterization-group__header>div:first-child>div{color:var(--mapa-report-muted);font-size:12px;line-height:1.5;margin-top:5px}.mapa-parameterization-group__header>div:first-child>div ::ng-deep ol,.mapa-parameterization-group__header>div:first-child>div ::ng-deep p,.mapa-parameterization-group__header>div:first-child>div ::ng-deep ul{margin:0 0 8px}.mapa-parameterization-group__header>div:first-child>div ::ng-deep ol,.mapa-parameterization-group__header>div:first-child>div ::ng-deep ul{padding-left:20px}.mapa-parameterization-group__header>div:first-child>div ::ng-deep li{margin:0 0 3px}.mapa-parameterization-group__header>div:first-child>div ::ng-deep b,.mapa-parameterization-group__header>div:first-child>div ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-parameterization-group__header>div:first-child>div ::ng-deep :last-child{margin-bottom:0}.mapa-parameterization-group__label{background:#f1f4f8;border:1px solid var(--mapa-report-border);border-radius:7px;color:#405064;font-size:13px;font-weight:650;margin-top:16px;padding:7px 10px}.mapa-parameterization-group__grid{display:grid;column-gap:14px;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:14px;row-gap:14px}.mapa-parameterization-dimensions mapa-classification-tag{flex:0 0 auto;max-width:var(--mapa-report-pill-width)}.mapa-parameterization-competence{background:var(--mapa-report-surface);border:1px solid var(--mapa-report-border);border-radius:var(--mapa-report-card-radius);min-width:0;padding:16px 14px 13px}.mapa-parameterization-competence__header{align-items:center;display:grid;gap:14px;grid-template-columns:minmax(0,1fr) auto}.mapa-parameterization-competence__header mapa-result-track{display:block;justify-self:end;max-width:100%;width:max-content}.mapa-parameterization-competence__header h5{color:#2c2e3a;font-size:16px;font-weight:650;line-height:1.3;margin:0;overflow-wrap:anywhere}.mapa-parameterization-competence__description{color:var(--mapa-report-muted);font-size:12px;line-height:1.5;margin-top:12px}.mapa-parameterization-competence__description ::ng-deep ol,.mapa-parameterization-competence__description ::ng-deep p,.mapa-parameterization-competence__description ::ng-deep ul{margin:0 0 8px}.mapa-parameterization-competence__description ::ng-deep ol,.mapa-parameterization-competence__description ::ng-deep ul{padding-left:20px}.mapa-parameterization-competence__description ::ng-deep li{margin:0 0 3px}.mapa-parameterization-competence__description ::ng-deep b,.mapa-parameterization-competence__description ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-parameterization-competence__description ::ng-deep :last-child{margin-bottom:0}.mapa-parameterization-dimensions{border-top:1px solid var(--mapa-report-line-soft);display:grid;gap:7px;list-style:none;margin:14px 0 0;padding:12px 0 0}.mapa-parameterization-dimensions li{align-items:center;background:var(--mapa-report-surface-soft);border:1px solid var(--mapa-report-line-soft);border-radius:9px;display:grid;gap:10px;grid-template-columns:minmax(0,1fr) auto;padding:9px 10px}.mapa-parameterization-dimensions__name{align-items:center;color:#4f5d70;display:flex;font-size:12px;gap:8px;line-height:1.4;min-width:0}.mapa-parameterization-dimensions__name span:last-child{overflow-wrap:anywhere}.mapa-parameterization-dimensions__description{color:var(--mapa-report-muted);font-size:11px;grid-column:1/-1;line-height:1.45;padding-left:28px}.mapa-parameterization-dimensions__description ::ng-deep ol,.mapa-parameterization-dimensions__description ::ng-deep p,.mapa-parameterization-dimensions__description ::ng-deep ul{margin:0 0 8px}.mapa-parameterization-dimensions__description ::ng-deep ol,.mapa-parameterization-dimensions__description ::ng-deep ul{padding-left:20px}.mapa-parameterization-dimensions__description ::ng-deep li{margin:0 0 3px}.mapa-parameterization-dimensions__description ::ng-deep b,.mapa-parameterization-dimensions__description ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-parameterization-dimensions__description ::ng-deep :last-child{margin-bottom:0}.mapa-parameterization-ranking mapa-report-ranking-table-widget{display:block;min-width:0}@media(max-width:1100px){.mapa-parameterization-group__grid{grid-template-columns:minmax(0,1fr)}}@media(max-width:600px){.mapa-parameterization-competence__header{grid-template-columns:minmax(0,1fr)}.mapa-parameterization-competence__header mapa-result-track{justify-self:start}}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i1$6.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i1$6.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: MapaClassificationTagComponent, selector: "mapa-classification-tag", inputs: ["classification", "size", "appearance", "shape", "casing", "fallbackLabel"] }, { kind: "component", type: MapaReportLegendComponent, selector: "mapa-report-legend", inputs: ["title", "intro", "groupsTitle", "groups", "expanded", "appearance"] }, { kind: "component", type: MapaReportRankingTableWidgetComponent, selector: "mapa-report-ranking-table-widget", inputs: ["heading", "views", "view", "palette", "showAverage", "showScoreOnHover", "entryColumnLabel", "note", "averageLabel"], outputs: ["viewChange"] }, { kind: "component", type: MapaResultTrackComponent, selector: "mapa-result-track", inputs: ["name", "value", "color", "mode", "appearance", "style", "direction", "showValue", "ariaLabel"] }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
9121
9134
|
}
|
|
9122
9135
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaReportParameterizationWidgetComponent, decorators: [{
|
|
9123
9136
|
type: Component,
|
|
@@ -9128,7 +9141,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImpo
|
|
|
9128
9141
|
MapaReportRankingTableWidgetComponent,
|
|
9129
9142
|
MapaResultTrackComponent,
|
|
9130
9143
|
SafeHtmlPipe,
|
|
9131
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"mapa-report-widget\" [attr.data-palette]=\"palette()\">\n <header class=\"mapa-report-widget__header\">\n <div class=\"mapa-report-widget__heading\">\n <h2>{{ heading().title }}</h2>\n @if (heading().description) {\n <div\n class=\"mapa-report-widget__description\"\n [innerHTML]=\"heading().description | safeHtml\"\n ></div>\n }\n </div>\n @if (content() !== \"ranking\") {\n <mat-button-toggle-group\n class=\"mapa-report-widget__modes\"\n hideSingleSelectionIndicator\n [attr.aria-label]=\"i18n.texts.report.viewModeLabel\"\n [value]=\"mode()\"\n (change)=\"mode.set($event.value)\"\n >\n <mat-button-toggle value=\"summarized\">\n {{ i18n.texts.report.summarized }}\n </mat-button-toggle>\n <mat-button-toggle value=\"detailed\">\n {{ i18n.texts.report.detailed }}\n </mat-button-toggle>\n </mat-button-toggle-group>\n }\n </header>\n\n @if (content() !== \"ranking\") {\n <section class=\"mapa-parameterization-overview\">\n <div class=\"mapa-parameterization-overview__headline\">\n <div>\n <span class=\"mapa-parameterization-overview__eyebrow\">{{\n heading().title\n }}</span>\n <h3>{{ data().name }}</h3>\n </div>\n\n <div class=\"mapa-parameterization-overview__score\">\n <span>{{ i18n.texts.report.overallPercentageTitle }}</span>\n <mapa-result-track\n appearance=\"stepped\"\n color=\"#59636a\"\n [name]=\"data().name\"\n [value]=\"data().value\"\n />\n </div>\n </div>\n </section>\n\n @if (legend().length) {\n <mapa-report-legend\n class=\"mapa-parameterization-legend\"\n appearance=\"psychosocial\"\n [expanded]=\"true\"\n [groups]=\"legend()\"\n />\n }\n\n @if (mode() === \"summarized\" && summaryRows().length) {\n <section class=\"mapa-parameterization-summary\">\n <h3>{{ i18n.texts.report.summarizedReportTitle }}</h3>\n <div class=\"mapa-parameterization-summary__rows\">\n @for (row of summaryRows(); track row.id) {\n <div class=\"mapa-parameterization-summary__row\">\n <span>{{ row.name }}</span>\n <span\n class=\"mapa-parameterization-summary__track\"\n role=\"meter\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n [attr.aria-valuenow]=\"safeValue(row.value)\"\n [attr.aria-label]=\"\n i18n.texts.report.meterLabel(row.name, safeValue(row.value))\n \"\n >\n <i\n [style.width.%]=\"safeValue(row.value)\"\n aria-hidden=\"true\"\n ></i>\n </span>\n <strong>{{ safeValue(row.value) }}%</strong>\n </div>\n }\n </div>\n </section>\n }\n\n @if (mode() === \"detailed\" && data().sections.length) {\n <section class=\"mapa-parameterization-detail\">\n <h3>{{ i18n.texts.report.detailedReportTitle }}</h3>\n\n <div class=\"mapa-parameterization-detail__sections\">\n @for (section of data().sections; track section.id) {\n <section class=\"mapa-parameterization-group\">\n @if (section.name || section.value !== undefined) {\n <header class=\"mapa-parameterization-group__header\">\n <div>\n @if (section.name) {\n <h4>{{ section.name }}</h4>\n }\n @if (section.description) {\n <div [innerHTML]=\"section.description | safeHtml\"></div>\n }\n </div>\n @if (section.value !== undefined) {\n <div\n class=\"mapa-parameterization-segments mapa-parameterization-segments--small\"\n >\n <span\n class=\"mapa-parameterization-segments__cells\"\n role=\"meter\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n [attr.aria-valuenow]=\"safeValue(section.value)\"\n [attr.aria-label]=\"\n i18n.texts.report.meterLabel(\n section.name || i18n.texts.report.groupsTitle,\n safeValue(section.value)\n )\n \"\n >\n @for (segment of segments; track segment) {\n <i\n [class.mapa-parameterization-segments__cell--filled]=\"\n segment < filledSegments(section.value)\n \"\n ></i>\n }\n </span>\n <strong aria-hidden=\"true\"\n >{{ safeValue(section.value) }}%</strong\n >\n </div>\n }\n </header>\n }\n\n @if (section.competences.length) {\n <div class=\"mapa-parameterization-group__label\">\n {{ i18n.texts.report.competenciesAndDimensionsTitle }}\n </div>\n\n <div class=\"mapa-parameterization-group__grid\">\n @for (\n competence of section.competences;\n track competence.id\n ) {\n <article class=\"mapa-parameterization-competence\">\n <header class=\"mapa-parameterization-competence__header\">\n <h5>{{ competence.name }}</h5>\n <div\n class=\"mapa-parameterization-segments mapa-parameterization-segments--small\"\n >\n <span\n class=\"mapa-parameterization-segments__cells\"\n role=\"meter\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n [attr.aria-valuenow]=\"safeValue(competence.value)\"\n [attr.aria-label]=\"\n i18n.texts.report.meterLabel(\n competence.name,\n safeValue(competence.value)\n )\n \"\n >\n @for (segment of segments; track segment) {\n <i\n [class.mapa-parameterization-segments__cell--filled]=\"\n segment < filledSegments(competence.value)\n \"\n ></i>\n }\n </span>\n <strong aria-hidden=\"true\"\n >{{ safeValue(competence.value) }}%</strong\n >\n </div>\n </header>\n\n @if (competence.description) {\n <div\n class=\"mapa-parameterization-competence__description\"\n [innerHTML]=\"competence.description | safeHtml\"\n ></div>\n }\n\n @if (competence.dimensions?.length) {\n <ul class=\"mapa-parameterization-dimensions\">\n @for (\n dimension of competence.dimensions;\n track dimension.id\n ) {\n <li>\n <span\n class=\"mapa-parameterization-dimensions__name\"\n >\n <span\n class=\"mapa-direction-indicator\"\n [attr.aria-label]=\"\n directionLabel(dimension.direction)\n \"\n >{{\n directionArrow(dimension.direction)\n }}</span\n >\n <span>{{ dimension.name }}</span>\n </span>\n @if (hasClassification(dimension)) {\n <mapa-classification-tag\n appearance=\"solid\"\n [classification]=\"dimension.classification\"\n />\n }\n @if (dimension.description) {\n <div\n class=\"mapa-parameterization-dimensions__description\"\n [innerHTML]=\"dimension.description | safeHtml\"\n ></div>\n }\n </li>\n }\n </ul>\n }\n </article>\n }\n </div>\n }\n </section>\n }\n </div>\n </section>\n }\n }\n\n @if (content() !== \"report\" && rankingViews().length) {\n <section class=\"mapa-parameterization-ranking\">\n @if (content() === \"all\") {\n <h3>{{ i18n.texts.report.parameterizationRankingTitle }}</h3>\n }\n <mapa-report-ranking-table-widget\n [palette]=\"palette()\"\n [showAverage]=\"false\"\n [views]=\"rankingViews()\"\n />\n </section>\n }\n</section>\n", styles: [":host{--mapa-report-accent: #ff560b;--mapa-report-accent-soft: #fff0e9;--mapa-report-surface: #fff;--mapa-report-surface-muted: #eef2f3;--mapa-report-border: #e1e5e7;--mapa-report-text: #263238;--mapa-report-muted: #68747a;--mapa-report-pill-width: 104px;--mapa-report-radius: 8px;--mapa-report-space: 20px;color:var(--mapa-report-text);display:block;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", sans-serif)}.mapa-report-widget{display:grid;gap:var(--mapa-report-space)}.mapa-report-widget__header{align-items:flex-start;column-gap:16px;display:grid;grid-template-columns:minmax(0,1fr) auto}.mapa-report-widget__heading{display:contents}.mapa-report-widget__heading h2{color:var(--mapa-report-accent);font-size:20px;font-weight:650;grid-column:1;grid-row:1;line-height:1.25;margin:0}.mapa-report-widget__description{color:var(--mapa-report-muted);font-size:13px;grid-column:1/-1;grid-row:2;line-height:1.5;margin:5px 0 0}.mapa-report-widget__description ::ng-deep ol,.mapa-report-widget__description ::ng-deep p,.mapa-report-widget__description ::ng-deep ul{margin:0 0 8px}.mapa-report-widget__description ::ng-deep ol,.mapa-report-widget__description ::ng-deep ul{padding-left:20px}.mapa-report-widget__description ::ng-deep li{margin:0 0 3px}.mapa-report-widget__description ::ng-deep b,.mapa-report-widget__description ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-report-widget__description ::ng-deep :last-child{margin-bottom:0}.mapa-report-widget__modes{--mat-button-toggle-background-color: var(--mapa-report-surface);--mat-button-toggle-divider-color: #cbd5da;--mat-button-toggle-height: 32px;--mat-button-toggle-label-text-font: var( --mapa-font-body, \"Asap\", sans-serif );--mat-button-toggle-label-text-size: 13px;--mat-button-toggle-label-text-weight: 500;--mat-button-toggle-selected-state-background-color: #59636a;--mat-button-toggle-selected-state-text-color: #fffaf7;--mat-button-toggle-shape: 4px;--mat-button-toggle-text-color: #344b5e;border:1px solid #cbd5da;border-radius:4px;grid-column:2;grid-row:1;overflow:hidden}.mapa-report-widget__modes mat-button-toggle{font:500 13px/1 var(--mapa-font-body, \"Asap\", sans-serif)}.mapa-report-widget__modes mat-icon{font-size:14px;height:14px;margin-right:5px;width:14px}.mapa-report-widget__empty{color:var(--mapa-report-muted);margin:0;padding:24px 0;text-align:center}@media(max-width:760px){.mapa-report-widget__header{align-items:stretch;grid-template-columns:minmax(0,1fr)}.mapa-report-widget__modes{grid-column:1;grid-row:3;justify-self:start;margin-top:12px}}.mapa-direction-indicator{background:var(--mapa-report-surface, var(--mapa-color-surface, #fafbfc));border:1px solid currentColor;border-radius:50%;box-sizing:border-box;color:var(--mapa-report-muted, var(--mapa-color-text-subtle, #68747a));display:inline-grid;flex:0 0 20px;font-size:11px;font-weight:700;height:20px;line-height:1;place-items:center;width:20px}:host{--mapa-parameterization-accent: #59636a;--mapa-parameterization-rail: #dfe4ea;--mapa-parameterization-line: #e7ebee;--mapa-report-card-radius: 10px;--mapa-report-line-soft: #edf1f3;--mapa-report-surface-soft: #fafbfc}.mapa-parameterization-overview{border:1px solid var(--mapa-report-border);border-radius:16px;display:grid;gap:22px;padding:24px}.mapa-parameterization-overview__headline{align-items:start;display:grid;gap:24px;grid-template-columns:minmax(0,1fr) auto}.mapa-parameterization-overview__eyebrow{color:#8a95a5;display:block;font-size:12px;line-height:1.3;margin-bottom:6px;text-transform:uppercase}.mapa-parameterization-overview h3{color:#2c2e3a;font-size:24px;font-weight:650;line-height:1.25;margin:0;overflow-wrap:anywhere}.mapa-parameterization-overview__score{display:grid;gap:7px;min-width:290px}.mapa-parameterization-overview__score mapa-result-track{display:block;min-width:0;width:100%}.mapa-parameterization-overview__score>span{color:#8a95a5;font-size:12px;text-transform:uppercase}.mapa-parameterization-overview__metadata{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));margin:0}.mapa-parameterization-overview__metadata div{border:1px solid var(--mapa-report-border);border-radius:12px;min-width:0;padding:13px 15px}.mapa-parameterization-overview__metadata dt{color:#8a95a5;font-size:11px;line-height:1.3;margin-bottom:8px;text-transform:uppercase}.mapa-parameterization-overview__metadata dd{color:#2c2e3a;font-size:15px;font-weight:650;line-height:1.35;margin:0;overflow-wrap:anywhere}.mapa-parameterization-segments{align-items:center;display:flex;gap:12px}.mapa-parameterization-segments__cells{display:grid;flex:0 0 auto;gap:5px;grid-template-columns:repeat(10,var(--mapa-parameterization-segment-width, 18px))}.mapa-parameterization-segments i{background:#d8dee7;border-radius:7px;display:block;height:40px}.mapa-parameterization-segments i.mapa-parameterization-segments__cell--filled{background:var(--mapa-parameterization-accent)}.mapa-parameterization-segments strong{color:var(--mapa-parameterization-accent);font-size:17px;min-width:44px}.mapa-parameterization-segments--small{--mapa-parameterization-segment-width: 10px;min-width:min(270px,100%)}.mapa-parameterization-segments--small i{border-radius:5px;height:30px}.mapa-parameterization-segments--small strong{color:#596575;font-size:14px;min-width:36px}.mapa-parameterization-legend{--mapa-classification-tag-min-width: var(--mapa-report-pill-width)}.mapa-parameterization-summary,.mapa-parameterization-detail,.mapa-parameterization-ranking{display:grid;gap:16px;min-width:0}.mapa-parameterization-summary>h3,.mapa-parameterization-detail>h3,.mapa-parameterization-ranking>h3{color:#596575;font-size:18px;font-weight:650;line-height:1.3;margin:0}.mapa-parameterization-summary__rows{border:1px solid var(--mapa-report-border);border-radius:14px;padding:16px 20px}.mapa-parameterization-summary__row{align-items:center;display:grid;gap:20px;grid-template-columns:minmax(200px,36%) minmax(140px,1fr) 48px;min-height:48px}.mapa-parameterization-summary__row+.mapa-parameterization-summary__row{border-top:1px solid var(--mapa-parameterization-line)}.mapa-parameterization-summary__row>span:first-child{color:#4f5d70;font-size:14px;line-height:1.35;overflow-wrap:anywhere}.mapa-parameterization-summary__row>strong{color:#596575;font-size:14px;text-align:right}.mapa-parameterization-summary__track{background:var(--mapa-parameterization-rail);border-radius:999px;display:block;height:14px;overflow:hidden}.mapa-parameterization-summary__track i{background:var(--mapa-parameterization-accent);border-radius:inherit;display:block;height:100%}@media(max-width:900px){.mapa-parameterization-overview__headline,.mapa-parameterization-group__header{grid-template-columns:minmax(0,1fr)}.mapa-parameterization-overview__score,.mapa-parameterization-segments--small{min-width:0}.mapa-parameterization-dimensions li{grid-template-columns:minmax(150px,1fr) auto}.mapa-parameterization-dimensions__description{grid-column:1/-1;padding-left:28px}}@media(max-width:600px){.mapa-parameterization-overview,.mapa-parameterization-group{padding:16px}.mapa-parameterization-overview h3{font-size:20px}.mapa-parameterization-segments{--mapa-parameterization-segment-width: 12px;align-items:flex-end;gap:8px}.mapa-parameterization-segments__cells{gap:3px}.mapa-parameterization-segments i{height:32px}.mapa-parameterization-segments--small{--mapa-parameterization-segment-width: 8px}.mapa-parameterization-summary__rows{padding:8px 14px}.mapa-parameterization-summary__row{gap:9px;grid-template-columns:minmax(0,1fr) 44px;padding:10px 0}.mapa-parameterization-summary__row .mapa-parameterization-summary__track{grid-column:1/-1;grid-row:2}.mapa-parameterization-summary__row>strong{grid-column:2;grid-row:1}.mapa-parameterization-dimensions li{grid-template-columns:minmax(0,1fr)}.mapa-parameterization-dimensions__description{grid-column:auto;padding-left:28px}}@media print{.mapa-parameterization-overview,.mapa-parameterization-group,.mapa-parameterization-competence{break-inside:avoid}}\n", ".mapa-parameterization-detail__sections{display:grid;gap:22px}.mapa-parameterization-group{--mapa-classification-tag-min-width: var(--mapa-report-pill-width);border:1px solid var(--mapa-report-border);border-radius:14px;min-width:0;padding:18px}.mapa-parameterization-group__header{align-items:start;display:grid;gap:20px;grid-template-columns:minmax(0,1fr) auto}.mapa-parameterization-group__header h4{color:#2c2e3a;font-size:20px;font-weight:650;line-height:1.25;margin:0;overflow-wrap:anywhere}.mapa-parameterization-group__header>div:first-child>div{color:var(--mapa-report-muted);font-size:12px;line-height:1.5;margin-top:5px}.mapa-parameterization-group__header>div:first-child>div ::ng-deep ol,.mapa-parameterization-group__header>div:first-child>div ::ng-deep p,.mapa-parameterization-group__header>div:first-child>div ::ng-deep ul{margin:0 0 8px}.mapa-parameterization-group__header>div:first-child>div ::ng-deep ol,.mapa-parameterization-group__header>div:first-child>div ::ng-deep ul{padding-left:20px}.mapa-parameterization-group__header>div:first-child>div ::ng-deep li{margin:0 0 3px}.mapa-parameterization-group__header>div:first-child>div ::ng-deep b,.mapa-parameterization-group__header>div:first-child>div ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-parameterization-group__header>div:first-child>div ::ng-deep :last-child{margin-bottom:0}.mapa-parameterization-group__label{background:#f1f4f8;border:1px solid var(--mapa-report-border);border-radius:7px;color:#405064;font-size:13px;font-weight:650;margin-top:16px;padding:7px 10px}.mapa-parameterization-group__grid{display:grid;column-gap:14px;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:14px;row-gap:14px}.mapa-parameterization-dimensions mapa-classification-tag{flex:0 0 auto;max-width:var(--mapa-report-pill-width)}.mapa-parameterization-competence{background:var(--mapa-report-surface);border:1px solid var(--mapa-report-border);border-radius:var(--mapa-report-card-radius);min-width:0;padding:16px 14px 13px}.mapa-parameterization-competence__header{align-items:center;display:grid;gap:14px;grid-template-columns:minmax(0,1fr) auto}.mapa-parameterization-competence__header .mapa-parameterization-segments{justify-self:end;min-width:0}.mapa-parameterization-competence__header h5{color:#2c2e3a;font-size:16px;font-weight:650;line-height:1.3;margin:0;overflow-wrap:anywhere}.mapa-parameterization-competence__description{color:var(--mapa-report-muted);font-size:12px;line-height:1.5;margin-top:12px}.mapa-parameterization-competence__description ::ng-deep ol,.mapa-parameterization-competence__description ::ng-deep p,.mapa-parameterization-competence__description ::ng-deep ul{margin:0 0 8px}.mapa-parameterization-competence__description ::ng-deep ol,.mapa-parameterization-competence__description ::ng-deep ul{padding-left:20px}.mapa-parameterization-competence__description ::ng-deep li{margin:0 0 3px}.mapa-parameterization-competence__description ::ng-deep b,.mapa-parameterization-competence__description ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-parameterization-competence__description ::ng-deep :last-child{margin-bottom:0}.mapa-parameterization-dimensions{border-top:1px solid var(--mapa-report-line-soft);display:grid;gap:7px;list-style:none;margin:14px 0 0;padding:12px 0 0}.mapa-parameterization-dimensions li{align-items:center;background:var(--mapa-report-surface-soft);border:1px solid var(--mapa-report-line-soft);border-radius:9px;display:grid;gap:10px;grid-template-columns:minmax(0,1fr) auto;padding:9px 10px}.mapa-parameterization-dimensions__name{align-items:center;color:#4f5d70;display:flex;font-size:12px;gap:8px;line-height:1.4;min-width:0}.mapa-parameterization-dimensions__name span:last-child{overflow-wrap:anywhere}.mapa-parameterization-dimensions__description{color:var(--mapa-report-muted);font-size:11px;grid-column:1/-1;line-height:1.45;padding-left:28px}.mapa-parameterization-dimensions__description ::ng-deep ol,.mapa-parameterization-dimensions__description ::ng-deep p,.mapa-parameterization-dimensions__description ::ng-deep ul{margin:0 0 8px}.mapa-parameterization-dimensions__description ::ng-deep ol,.mapa-parameterization-dimensions__description ::ng-deep ul{padding-left:20px}.mapa-parameterization-dimensions__description ::ng-deep li{margin:0 0 3px}.mapa-parameterization-dimensions__description ::ng-deep b,.mapa-parameterization-dimensions__description ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-parameterization-dimensions__description ::ng-deep :last-child{margin-bottom:0}.mapa-parameterization-ranking mapa-report-ranking-table-widget{display:block;min-width:0}@media(max-width:1100px){.mapa-parameterization-group__grid{grid-template-columns:minmax(0,1fr)}}@media(max-width:600px){.mapa-parameterization-competence__header{grid-template-columns:minmax(0,1fr)}.mapa-parameterization-competence__header .mapa-parameterization-segments{justify-self:start}}\n"] }]
|
|
9144
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"mapa-report-widget\" [attr.data-palette]=\"palette()\">\n <header class=\"mapa-report-widget__header\">\n <div class=\"mapa-report-widget__heading\">\n <h2>{{ heading().title }}</h2>\n @if (heading().description) {\n <div\n class=\"mapa-report-widget__description\"\n [innerHTML]=\"heading().description | safeHtml\"\n ></div>\n }\n </div>\n @if (content() !== \"ranking\") {\n <mat-button-toggle-group\n class=\"mapa-report-widget__modes\"\n hideSingleSelectionIndicator\n [attr.aria-label]=\"i18n.texts.report.viewModeLabel\"\n [value]=\"mode()\"\n (change)=\"mode.set($event.value)\"\n >\n <mat-button-toggle value=\"summarized\">\n {{ i18n.texts.report.summarized }}\n </mat-button-toggle>\n <mat-button-toggle value=\"detailed\">\n {{ i18n.texts.report.detailed }}\n </mat-button-toggle>\n </mat-button-toggle-group>\n }\n </header>\n\n @if (content() !== \"ranking\") {\n <section class=\"mapa-parameterization-overview\">\n <div class=\"mapa-parameterization-overview__headline\">\n <div>\n <span class=\"mapa-parameterization-overview__eyebrow\">{{\n heading().title\n }}</span>\n <h3>{{ data().name }}</h3>\n </div>\n\n <div class=\"mapa-parameterization-overview__score\">\n <span>{{ i18n.texts.report.overallPercentageTitle }}</span>\n <mapa-result-track\n appearance=\"stepped\"\n color=\"#59636a\"\n [style]=\"'thick'\"\n [name]=\"data().name\"\n [value]=\"data().value\"\n />\n </div>\n </div>\n\n @if (finalClassification(); as final) {\n <div class=\"mapa-parameterization-overview__classification\">\n <span class=\"mapa-parameterization-overview__classification-tag\">{{\n final.label\n }}</span>\n @if (final.description) {\n <p>{{ final.description }}</p>\n }\n </div>\n }\n </section>\n\n @if (legend().length) {\n <mapa-report-legend\n class=\"mapa-parameterization-legend\"\n appearance=\"psychosocial\"\n [expanded]=\"true\"\n [groups]=\"legend()\"\n />\n }\n\n @if (mode() === \"summarized\" && summaryRows().length) {\n <section class=\"mapa-parameterization-summary\">\n <h3>{{ i18n.texts.report.summarizedReportTitle }}</h3>\n <div class=\"mapa-parameterization-summary__rows\">\n @for (row of summaryRows(); track row.id) {\n <div class=\"mapa-parameterization-summary__row\">\n <span>{{ row.name }}</span>\n <span\n class=\"mapa-parameterization-summary__track\"\n role=\"meter\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n [attr.aria-valuenow]=\"safeValue(row.value)\"\n [attr.aria-label]=\"\n i18n.texts.report.meterLabel(row.name, safeValue(row.value))\n \"\n >\n <i\n [style.width.%]=\"safeValue(row.value)\"\n aria-hidden=\"true\"\n ></i>\n </span>\n <strong>{{ safeValue(row.value) }}%</strong>\n </div>\n }\n </div>\n </section>\n }\n\n @if (mode() === \"detailed\" && data().sections.length) {\n <section class=\"mapa-parameterization-detail\">\n <h3>{{ i18n.texts.report.detailedReportTitle }}</h3>\n\n <div class=\"mapa-parameterization-detail__sections\">\n @for (section of data().sections; track section.id) {\n <section class=\"mapa-parameterization-group\">\n @if (section.name || section.value !== undefined) {\n <header class=\"mapa-parameterization-group__header\">\n <div>\n @if (section.name) {\n <h4>{{ section.name }}</h4>\n }\n @if (section.description) {\n <div [innerHTML]=\"section.description | safeHtml\"></div>\n }\n </div>\n @if (section.value !== undefined) {\n <mapa-result-track\n appearance=\"stepped\"\n color=\"#59636a\"\n [style]=\"'thin'\"\n [name]=\"section.name || i18n.texts.report.groupsTitle\"\n [value]=\"safeValue(section.value)\"\n />\n }\n </header>\n }\n\n @if (section.competences.length) {\n <div class=\"mapa-parameterization-group__label\">\n {{ i18n.texts.report.competenciesAndDimensionsTitle }}\n </div>\n\n <div class=\"mapa-parameterization-group__grid\">\n @for (\n competence of section.competences;\n track competence.id\n ) {\n <article class=\"mapa-parameterization-competence\">\n <header class=\"mapa-parameterization-competence__header\">\n <h5>{{ competence.name }}</h5>\n <mapa-result-track\n appearance=\"stepped\"\n color=\"#59636a\"\n [style]=\"'thin'\"\n [name]=\"competence.name\"\n [value]=\"safeValue(competence.value)\"\n />\n </header>\n\n @if (competence.description) {\n <div\n class=\"mapa-parameterization-competence__description\"\n [innerHTML]=\"competence.description | safeHtml\"\n ></div>\n }\n\n @if (competence.dimensions?.length) {\n <ul class=\"mapa-parameterization-dimensions\">\n @for (\n dimension of competence.dimensions;\n track dimension.id\n ) {\n <li>\n <span\n class=\"mapa-parameterization-dimensions__name\"\n >\n <span\n class=\"mapa-direction-indicator\"\n [attr.aria-label]=\"\n directionLabel(dimension.direction)\n \"\n >{{\n directionArrow(dimension.direction)\n }}</span\n >\n <span>{{ dimension.name }}</span>\n </span>\n @if (hasClassification(dimension)) {\n <mapa-classification-tag\n appearance=\"solid\"\n [classification]=\"dimension.classification\"\n />\n }\n @if (dimension.description) {\n <div\n class=\"mapa-parameterization-dimensions__description\"\n [innerHTML]=\"dimension.description | safeHtml\"\n ></div>\n }\n </li>\n }\n </ul>\n }\n </article>\n }\n </div>\n }\n </section>\n }\n </div>\n </section>\n }\n }\n\n @if (content() !== \"report\" && rankingViews().length) {\n <section class=\"mapa-parameterization-ranking\">\n @if (content() === \"all\") {\n <h3>{{ i18n.texts.report.parameterizationRankingTitle }}</h3>\n }\n <mapa-report-ranking-table-widget\n [palette]=\"palette()\"\n [showAverage]=\"false\"\n [views]=\"rankingViews()\"\n />\n </section>\n }\n</section>\n", styles: [":host{--mapa-report-accent: #ff560b;--mapa-report-accent-soft: #fff0e9;--mapa-report-surface: #fff;--mapa-report-surface-muted: #eef2f3;--mapa-report-border: #e1e5e7;--mapa-report-text: #263238;--mapa-report-muted: #68747a;--mapa-report-pill-width: 104px;--mapa-report-radius: 8px;--mapa-report-space: 20px;color:var(--mapa-report-text);display:block;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", sans-serif)}.mapa-report-widget{display:grid;gap:var(--mapa-report-space)}.mapa-report-widget__header{align-items:flex-start;column-gap:16px;display:grid;grid-template-columns:minmax(0,1fr) auto}.mapa-report-widget__heading{display:contents}.mapa-report-widget__heading h2{color:var(--mapa-report-accent);font-size:20px;font-weight:650;grid-column:1;grid-row:1;line-height:1.25;margin:0}.mapa-report-widget__description{color:var(--mapa-report-muted);font-size:13px;grid-column:1/-1;grid-row:2;line-height:1.5;margin:5px 0 0}.mapa-report-widget__description ::ng-deep ol,.mapa-report-widget__description ::ng-deep p,.mapa-report-widget__description ::ng-deep ul{margin:0 0 8px}.mapa-report-widget__description ::ng-deep ol,.mapa-report-widget__description ::ng-deep ul{padding-left:20px}.mapa-report-widget__description ::ng-deep li{margin:0 0 3px}.mapa-report-widget__description ::ng-deep b,.mapa-report-widget__description ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-report-widget__description ::ng-deep :last-child{margin-bottom:0}.mapa-report-widget__modes{--mat-button-toggle-background-color: var(--mapa-report-surface);--mat-button-toggle-divider-color: #cbd5da;--mat-button-toggle-height: 32px;--mat-button-toggle-label-text-font: var( --mapa-font-body, \"Asap\", sans-serif );--mat-button-toggle-label-text-size: 13px;--mat-button-toggle-label-text-weight: 500;--mat-button-toggle-selected-state-background-color: #59636a;--mat-button-toggle-selected-state-text-color: #fffaf7;--mat-button-toggle-shape: 4px;--mat-button-toggle-text-color: #344b5e;border:1px solid #cbd5da;border-radius:4px;grid-column:2;grid-row:1;overflow:hidden}.mapa-report-widget__modes mat-button-toggle{font:500 13px/1 var(--mapa-font-body, \"Asap\", sans-serif)}.mapa-report-widget__modes mat-icon{font-size:14px;height:14px;margin-right:5px;width:14px}.mapa-report-widget__empty{color:var(--mapa-report-muted);margin:0;padding:24px 0;text-align:center}@media(max-width:760px){.mapa-report-widget__header{align-items:stretch;grid-template-columns:minmax(0,1fr)}.mapa-report-widget__modes{grid-column:1;grid-row:3;justify-self:start;margin-top:12px}}.mapa-direction-indicator{background:var(--mapa-report-surface, var(--mapa-color-surface, #fafbfc));border:1px solid currentColor;border-radius:50%;box-sizing:border-box;color:var(--mapa-report-muted, var(--mapa-color-text-subtle, #68747a));display:inline-grid;flex:0 0 20px;font-size:11px;font-weight:700;height:20px;line-height:1;place-items:center;width:20px}:host{--mapa-parameterization-accent: #59636a;--mapa-parameterization-rail: #dfe4ea;--mapa-parameterization-line: #e7ebee;--mapa-report-card-radius: 10px;--mapa-report-line-soft: #edf1f3;--mapa-report-surface-soft: #fafbfc}.mapa-parameterization-overview{border:1px solid var(--mapa-report-border);border-radius:16px;display:grid;gap:22px;padding:24px}.mapa-parameterization-overview__headline{align-items:start;display:grid;gap:24px;grid-template-columns:minmax(0,1fr) auto}.mapa-parameterization-overview__eyebrow{color:#8a95a5;display:block;font-size:12px;line-height:1.3;margin-bottom:6px;text-transform:uppercase}.mapa-parameterization-overview h3{color:#2c2e3a;font-size:24px;font-weight:650;line-height:1.25;margin:0;overflow-wrap:anywhere}.mapa-parameterization-overview__score{display:grid;gap:7px;min-width:290px}.mapa-parameterization-overview__score mapa-result-track{display:block;min-width:0;width:100%}.mapa-parameterization-overview__score>span{color:#8a95a5;font-size:12px;text-transform:uppercase}.mapa-parameterization-overview__classification{display:grid;gap:8px;justify-items:start}.mapa-parameterization-overview__classification p{color:#59636a;font-size:14px;line-height:1.5;margin:0;overflow-wrap:anywhere}.mapa-parameterization-overview__classification-tag{background:#fff;border:1px solid var(--mapa-report-border);border-radius:999px;color:#2c2e3a;font-size:13px;font-weight:650;line-height:1.3;padding:5px 13px}.mapa-parameterization-overview__metadata{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));margin:0}.mapa-parameterization-overview__metadata div{border:1px solid var(--mapa-report-border);border-radius:12px;min-width:0;padding:13px 15px}.mapa-parameterization-overview__metadata dt{color:#8a95a5;font-size:11px;line-height:1.3;margin-bottom:8px;text-transform:uppercase}.mapa-parameterization-overview__metadata dd{color:#2c2e3a;font-size:15px;font-weight:650;line-height:1.35;margin:0;overflow-wrap:anywhere}.mapa-parameterization-legend{--mapa-classification-tag-min-width: var(--mapa-report-pill-width)}.mapa-parameterization-summary,.mapa-parameterization-detail,.mapa-parameterization-ranking{display:grid;gap:16px;min-width:0}.mapa-parameterization-summary>h3,.mapa-parameterization-detail>h3,.mapa-parameterization-ranking>h3{color:#596575;font-size:18px;font-weight:650;line-height:1.3;margin:0}.mapa-parameterization-summary__rows{border:1px solid var(--mapa-report-border);border-radius:14px;padding:16px 20px}.mapa-parameterization-summary__row{align-items:center;display:grid;gap:20px;grid-template-columns:minmax(200px,36%) minmax(140px,1fr) 48px;min-height:48px}.mapa-parameterization-summary__row+.mapa-parameterization-summary__row{border-top:1px solid var(--mapa-parameterization-line)}.mapa-parameterization-summary__row>span:first-child{color:#4f5d70;font-size:14px;line-height:1.35;overflow-wrap:anywhere}.mapa-parameterization-summary__row>strong{color:#596575;font-size:14px;text-align:right}.mapa-parameterization-summary__track{background:var(--mapa-parameterization-rail);border-radius:999px;display:block;height:14px;overflow:hidden}.mapa-parameterization-summary__track i{background:var(--mapa-parameterization-accent);border-radius:inherit;display:block;height:100%}@media(max-width:900px){.mapa-parameterization-overview__headline,.mapa-parameterization-group__header{grid-template-columns:minmax(0,1fr)}.mapa-parameterization-overview__score,mapa-result-track{min-width:0}.mapa-parameterization-group__header>mapa-result-track{justify-self:start}.mapa-parameterization-dimensions li{grid-template-columns:minmax(150px,1fr) auto}.mapa-parameterization-dimensions__description{grid-column:1/-1;padding-left:28px}}@media(max-width:600px){.mapa-parameterization-overview,.mapa-parameterization-group{padding:16px}.mapa-parameterization-overview h3{font-size:20px}.mapa-parameterization-summary__rows{padding:8px 14px}.mapa-parameterization-summary__row{gap:9px;grid-template-columns:minmax(0,1fr) 44px;padding:10px 0}.mapa-parameterization-summary__row .mapa-parameterization-summary__track{grid-column:1/-1;grid-row:2}.mapa-parameterization-summary__row>strong{grid-column:2;grid-row:1}.mapa-parameterization-dimensions li{grid-template-columns:minmax(0,1fr)}.mapa-parameterization-dimensions__description{grid-column:auto;padding-left:28px}}@media print{.mapa-parameterization-overview,.mapa-parameterization-group,.mapa-parameterization-competence{break-inside:avoid}}\n", ".mapa-parameterization-detail__sections{display:grid;gap:22px}.mapa-parameterization-group{--mapa-classification-tag-min-width: var(--mapa-report-pill-width);border:1px solid var(--mapa-report-border);border-radius:14px;min-width:0;padding:18px}.mapa-parameterization-group__header{align-items:start;display:grid;gap:20px;grid-template-columns:minmax(0,1fr) auto}.mapa-parameterization-group__header>mapa-result-track{display:block;justify-self:end;max-width:100%;width:max-content}.mapa-parameterization-group__header h4{color:#2c2e3a;font-size:20px;font-weight:650;line-height:1.25;margin:0;overflow-wrap:anywhere}.mapa-parameterization-group__header>div:first-child>div{color:var(--mapa-report-muted);font-size:12px;line-height:1.5;margin-top:5px}.mapa-parameterization-group__header>div:first-child>div ::ng-deep ol,.mapa-parameterization-group__header>div:first-child>div ::ng-deep p,.mapa-parameterization-group__header>div:first-child>div ::ng-deep ul{margin:0 0 8px}.mapa-parameterization-group__header>div:first-child>div ::ng-deep ol,.mapa-parameterization-group__header>div:first-child>div ::ng-deep ul{padding-left:20px}.mapa-parameterization-group__header>div:first-child>div ::ng-deep li{margin:0 0 3px}.mapa-parameterization-group__header>div:first-child>div ::ng-deep b,.mapa-parameterization-group__header>div:first-child>div ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-parameterization-group__header>div:first-child>div ::ng-deep :last-child{margin-bottom:0}.mapa-parameterization-group__label{background:#f1f4f8;border:1px solid var(--mapa-report-border);border-radius:7px;color:#405064;font-size:13px;font-weight:650;margin-top:16px;padding:7px 10px}.mapa-parameterization-group__grid{display:grid;column-gap:14px;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:14px;row-gap:14px}.mapa-parameterization-dimensions mapa-classification-tag{flex:0 0 auto;max-width:var(--mapa-report-pill-width)}.mapa-parameterization-competence{background:var(--mapa-report-surface);border:1px solid var(--mapa-report-border);border-radius:var(--mapa-report-card-radius);min-width:0;padding:16px 14px 13px}.mapa-parameterization-competence__header{align-items:center;display:grid;gap:14px;grid-template-columns:minmax(0,1fr) auto}.mapa-parameterization-competence__header mapa-result-track{display:block;justify-self:end;max-width:100%;width:max-content}.mapa-parameterization-competence__header h5{color:#2c2e3a;font-size:16px;font-weight:650;line-height:1.3;margin:0;overflow-wrap:anywhere}.mapa-parameterization-competence__description{color:var(--mapa-report-muted);font-size:12px;line-height:1.5;margin-top:12px}.mapa-parameterization-competence__description ::ng-deep ol,.mapa-parameterization-competence__description ::ng-deep p,.mapa-parameterization-competence__description ::ng-deep ul{margin:0 0 8px}.mapa-parameterization-competence__description ::ng-deep ol,.mapa-parameterization-competence__description ::ng-deep ul{padding-left:20px}.mapa-parameterization-competence__description ::ng-deep li{margin:0 0 3px}.mapa-parameterization-competence__description ::ng-deep b,.mapa-parameterization-competence__description ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-parameterization-competence__description ::ng-deep :last-child{margin-bottom:0}.mapa-parameterization-dimensions{border-top:1px solid var(--mapa-report-line-soft);display:grid;gap:7px;list-style:none;margin:14px 0 0;padding:12px 0 0}.mapa-parameterization-dimensions li{align-items:center;background:var(--mapa-report-surface-soft);border:1px solid var(--mapa-report-line-soft);border-radius:9px;display:grid;gap:10px;grid-template-columns:minmax(0,1fr) auto;padding:9px 10px}.mapa-parameterization-dimensions__name{align-items:center;color:#4f5d70;display:flex;font-size:12px;gap:8px;line-height:1.4;min-width:0}.mapa-parameterization-dimensions__name span:last-child{overflow-wrap:anywhere}.mapa-parameterization-dimensions__description{color:var(--mapa-report-muted);font-size:11px;grid-column:1/-1;line-height:1.45;padding-left:28px}.mapa-parameterization-dimensions__description ::ng-deep ol,.mapa-parameterization-dimensions__description ::ng-deep p,.mapa-parameterization-dimensions__description ::ng-deep ul{margin:0 0 8px}.mapa-parameterization-dimensions__description ::ng-deep ol,.mapa-parameterization-dimensions__description ::ng-deep ul{padding-left:20px}.mapa-parameterization-dimensions__description ::ng-deep li{margin:0 0 3px}.mapa-parameterization-dimensions__description ::ng-deep b,.mapa-parameterization-dimensions__description ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-parameterization-dimensions__description ::ng-deep :last-child{margin-bottom:0}.mapa-parameterization-ranking mapa-report-ranking-table-widget{display:block;min-width:0}@media(max-width:1100px){.mapa-parameterization-group__grid{grid-template-columns:minmax(0,1fr)}}@media(max-width:600px){.mapa-parameterization-competence__header{grid-template-columns:minmax(0,1fr)}.mapa-parameterization-competence__header mapa-result-track{justify-self:start}}\n"] }]
|
|
9132
9145
|
}], propDecorators: { heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], legend: [{ type: i0.Input, args: [{ isSignal: true, alias: "legend", required: false }] }], palette: [{ type: i0.Input, args: [{ isSignal: true, alias: "palette", required: false }] }], content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }, { type: i0.Output, args: ["modeChange"] }] } });
|
|
9133
9146
|
|
|
9134
9147
|
class MapaProgressbarComponent {
|