@valtimo/layout 13.26.0 → 13.27.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -611,7 +611,7 @@ class WidgetFieldComponent {
|
|
|
611
611
|
});
|
|
612
612
|
}
|
|
613
613
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: WidgetFieldComponent, deps: [{ token: i1.ViewContentService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
614
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: WidgetFieldComponent, isStandalone: true, selector: "valtimo-widget-field", inputs: { widgetConfiguration: "widgetConfiguration", widgetData: "widgetData" }, outputs: { noVisibleFieldsEvent: "noVisibleFieldsEvent" }, host: { properties: { "class": "this.hostClasses" } }, viewQueries: [{ propertyName: "_widgetFieldRef", first: true, predicate: ["widgetField"], descendants: true }], ngImport: i0, template: "<!--\n ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n ~\n ~ Licensed under EUPL, Version 1.2 (the \"License\");\n ~ you may not use this file except in compliance with the License.\n ~ You may obtain a copy of the License at\n ~\n ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n ~\n ~ Unless required by applicable law or agreed to in writing, software\n ~ distributed under the License is distributed on an \"AS IS\" basis,\n ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n ~ See the License for the specific language governing permissions and\n ~ limitations under the License.\n -->\n\n<ng-container\n *ngIf=\"{\n widgetConfiguration: widgetConfiguration$ | async,\n widgetPropertyValue: widgetPropertyValue$ | async,\n widgetData: widgetData$ | async,\n isEmptyWidgetData: isEmptyWidgetData$ | async,\n noVisibleFields: noVisibleFields$ | async,\n } as obs\"\n>\n <section *ngIf=\"obs?.widgetConfiguration?.title\" class=\"valtimo-widget-field__header\">\n <div class=\"valtimo-widget-field__title-container\">\n <valtimo-mdi-icon-viewer\n *ngIf=\"obs.widgetConfiguration?.icon\"\n [mdiIcon]=\"obs.widgetConfiguration.icon\"\n ></valtimo-mdi-icon-viewer>\n\n <h4 class=\"valtimo-widget-field__title\">{{ obs?.widgetConfiguration?.title }}</h4>\n </div>\n\n <ng-content></ng-content>\n\n <valtimo-widget-action-button\n [widgetConfiguration]=\"obs.widgetConfiguration\"\n [resolvedData]=\"obs.widgetData\"\n ></valtimo-widget-action-button>\n </section>\n\n @if (obs?.isEmptyWidgetData) {\n <valtimo-no-results\n [collapseVertically]=\"true\"\n [description]=\"'widgets.noData' | translate\"\n [smallPadding]=\"true\"\n ></valtimo-no-results>\n } @else {\n <div\n #widgetField\n class=\"valtimo-widget-field__render\"\n [ngClass]=\"{\n 'valtimo-widget-field__render-vertically': renderVertically() === 1,\n 'valtimo-widget-field__render-two-columns': renderVertically() === 2,\n 'valtimo-widget-field__render-three-columns': renderVertically() === 3,\n 'valtimo-widget-field__container': renderVertically() === 4,\n }\"\n >\n @if (obs.widgetData && obs.noVisibleFields) {\n <valtimo-no-results\n [collapseVertically]=\"true\"\n [description]=\"'widgets.emptyFields' | translate\"\n [smallPadding]=\"true\"\n ></valtimo-no-results>\n } @else {\n @for (column of obs?.widgetPropertyValue; track column.key) {\n <div class=\"valtimo-widget-field__column\">\n @for (property of column; track property) {\n <div\n *ngIf=\"\n (property?.value !== null &&\n property?.value !== '-' &&\n property?.hideWhenEmpty) ||\n !property?.hideWhenEmpty\n \"\n class=\"valtimo-widget-field__field\"\n >\n <label class=\"valtimo-widget-field__field-label\" [attr.title]=\"property?.title\">\n {{ property?.title }}</label\n >\n\n <div [attr.title]=\"property?.value\" class=\"valtimo-widget-field__field-value\">\n @if (!obs.widgetData) {\n <cds-skeleton-text [lines]=\"1\" [maxLineWidth]=\"100\"></cds-skeleton-text>\n } @else {\n @if (property?.isRawValue) {\n <div [innerHTML]=\"property?.value\"></div>\n } @else {\n {{ property?.value | valtimoEllipsis: property?.ellipsisCharacterLimit }}\n }\n }\n </div>\n </div>\n }\n </div>\n }\n }\n </div>\n }\n</ng-container>\n", styles: [".valtimo-widget-field{padding:24px}.valtimo-widget-field__header{display:flex;align-items:center;justify-content:space-between}.valtimo-widget-field,.valtimo-widget-field__column{display:flex;flex-direction:column;gap:16px;width:100%;overflow:hidden}.valtimo-widget-field__title{color:var(--widget-text-color, var(--cds-text-primary));font-weight:600;font-size:16px;line-height:24px}.valtimo-widget-field__title-container{display:flex;align-items:center;gap:8px;color:var(--widget-text-color, var(--cds-text-primary))}.valtimo-widget-field__title-container .mdi-icon-preview{color:var(--widget-text-color, var(--cds-text-primary))!important}.valtimo-widget-field__container{display:grid;grid-gap:24px;grid-template-columns:repeat(4,1fr)}.valtimo-widget-field__field{display:flex;flex-direction:column;width:100%;gap:8px}.valtimo-widget-field__field-label{font-size:12px;color:var(--widget-text-color, var(--cds-text-secondary))}.valtimo-widget-field__field-value{color:var(--widget-text-color, var(--cds-text-primary));padding:8px 16px;border-bottom:1px solid var(--cds-border-subtle-01);font-size:14px}.valtimo-widget-field__field-value cds-skeleton-text{font-size:14px}.valtimo-widget-field__field-value cds-skeleton-text .cds--skeleton__text{margin-bottom:0;height:14px;min-height:14px}.valtimo-widget-field .cds--label{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.valtimo-widget-field__render-vertically,.valtimo-widget-field__render-two-columns,.valtimo-widget-field__render-three-columns{display:grid;align-items:stretch;gap:24px}.valtimo-widget-field__render-vertically{grid-template-columns:repeat(1,1fr)}.valtimo-widget-field__render-two-columns{grid-template-columns:repeat(2,1fr)}.valtimo-widget-field__render-three-columns{grid-template-columns:repeat(3,1fr)}.valtimo-widget-field--compact .valtimo-widget-field__column{gap:8px;border-left:1px solid var(--widget-accent-color, var(--cds-border-subtle-01));padding-left:16px}.valtimo-widget-field--compact .valtimo-widget-field__field{flex-direction:row;justify-content:space-between}.valtimo-widget-field--compact .valtimo-widget-field__field-value{padding:0;border:none}.valtimo-widget-field--compact .valtimo-widget-field-label{margin:auto 0!important;display:flex;height:min-content}.valtimo-widget-field--compact .valtimo-widget-field__render>*{padding-left:16px;border-left:1px solid var(--widget-accent-color, var(--cds-border-subtle-01))}\n/*!\n * Copyright 2015-2026 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: InputModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: CarbonListModule }, { kind: "component", type: i1.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title", "smallPadding", "collapseVertically", "alwaysRenderVertically"] }, { kind: "pipe", type: EllipsisPipe, name: "valtimoEllipsis" }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: WidgetActionButtonComponent, selector: "valtimo-widget-action-button", inputs: ["widgetConfiguration", "resolvedData"] }, { kind: "component", type: MdiIconViewerComponent, selector: "valtimo-mdi-icon-viewer", inputs: ["mdiIcon"] }, { kind: "ngmodule", type: LayerModule }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i3.SkeletonText, selector: "cds-skeleton-text, ibm-skeleton-text", inputs: ["lines", "minLineWidth", "maxLineWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
614
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: WidgetFieldComponent, isStandalone: true, selector: "valtimo-widget-field", inputs: { widgetConfiguration: "widgetConfiguration", widgetData: "widgetData" }, outputs: { noVisibleFieldsEvent: "noVisibleFieldsEvent" }, host: { properties: { "class": "this.hostClasses" } }, viewQueries: [{ propertyName: "_widgetFieldRef", first: true, predicate: ["widgetField"], descendants: true }], ngImport: i0, template: "<!--\n ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n ~\n ~ Licensed under EUPL, Version 1.2 (the \"License\");\n ~ you may not use this file except in compliance with the License.\n ~ You may obtain a copy of the License at\n ~\n ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n ~\n ~ Unless required by applicable law or agreed to in writing, software\n ~ distributed under the License is distributed on an \"AS IS\" basis,\n ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n ~ See the License for the specific language governing permissions and\n ~ limitations under the License.\n -->\n\n<ng-container\n *ngIf=\"{\n widgetConfiguration: widgetConfiguration$ | async,\n widgetPropertyValue: widgetPropertyValue$ | async,\n widgetData: widgetData$ | async,\n isEmptyWidgetData: isEmptyWidgetData$ | async,\n noVisibleFields: noVisibleFields$ | async,\n } as obs\"\n>\n <section *ngIf=\"obs?.widgetConfiguration?.title\" class=\"valtimo-widget-field__header\">\n <div class=\"valtimo-widget-field__title-container\">\n <valtimo-mdi-icon-viewer\n *ngIf=\"obs.widgetConfiguration?.icon\"\n [mdiIcon]=\"obs.widgetConfiguration.icon\"\n ></valtimo-mdi-icon-viewer>\n\n <h4 class=\"valtimo-widget-field__title\">{{ obs?.widgetConfiguration?.title }}</h4>\n </div>\n\n <ng-content></ng-content>\n\n <valtimo-widget-action-button\n [widgetConfiguration]=\"obs.widgetConfiguration\"\n [resolvedData]=\"obs.widgetData\"\n ></valtimo-widget-action-button>\n </section>\n\n @if (obs?.isEmptyWidgetData) {\n <valtimo-no-results\n [collapseVertically]=\"true\"\n [description]=\"'widgets.noData' | translate\"\n [smallPadding]=\"true\"\n ></valtimo-no-results>\n } @else {\n <div\n #widgetField\n class=\"valtimo-widget-field__render\"\n [ngClass]=\"{\n 'valtimo-widget-field__render-vertically': renderVertically() === 1,\n 'valtimo-widget-field__render-two-columns': renderVertically() === 2,\n 'valtimo-widget-field__render-three-columns': renderVertically() === 3,\n 'valtimo-widget-field__container': renderVertically() === 4,\n }\"\n >\n @if (obs.widgetData && obs.noVisibleFields) {\n <valtimo-no-results\n [collapseVertically]=\"true\"\n [description]=\"'widgets.emptyFields' | translate\"\n [smallPadding]=\"true\"\n ></valtimo-no-results>\n } @else {\n @for (column of obs?.widgetPropertyValue; track column.key) {\n <div class=\"valtimo-widget-field__column\">\n @for (property of column; track property) {\n <div\n *ngIf=\"\n (property?.value !== null &&\n property?.value !== '-' &&\n property?.hideWhenEmpty) ||\n !property?.hideWhenEmpty\n \"\n class=\"valtimo-widget-field__field\"\n >\n <label class=\"valtimo-widget-field__field-label\" [attr.title]=\"property?.title\">\n {{ property?.title }}</label\n >\n\n <div [attr.title]=\"property?.value\" class=\"valtimo-widget-field__field-value\">\n @if (!obs.widgetData) {\n <cds-skeleton-text [lines]=\"1\" [maxLineWidth]=\"100\"></cds-skeleton-text>\n } @else {\n @if (property?.isRawValue) {\n <div [innerHTML]=\"property?.value\"></div>\n } @else {\n {{ property?.value | valtimoEllipsis: property?.ellipsisCharacterLimit }}\n }\n }\n </div>\n </div>\n }\n </div>\n }\n }\n </div>\n }\n</ng-container>\n", styles: [".valtimo-widget-field{padding:24px}.valtimo-widget-field__header{display:flex;align-items:center;justify-content:space-between}.valtimo-widget-field,.valtimo-widget-field__column{display:flex;flex-direction:column;gap:16px;width:100%;overflow:hidden}.valtimo-widget-field__title{color:var(--widget-text-color, var(--cds-text-primary));font-weight:600;font-size:16px;line-height:24px}.valtimo-widget-field__title-container{display:flex;align-items:center;gap:8px;color:var(--widget-text-color, var(--cds-text-primary))}.valtimo-widget-field__title-container .mdi-icon-preview{color:var(--widget-text-color, var(--cds-text-primary))!important}.valtimo-widget-field__container{display:grid;grid-gap:24px;grid-template-columns:repeat(4,1fr)}.valtimo-widget-field__field{display:flex;flex-direction:column;width:100%;gap:8px}.valtimo-widget-field__field-label{font-size:12px;color:var(--widget-text-color, var(--cds-text-secondary))}.valtimo-widget-field__field-value{color:var(--widget-text-color, var(--cds-text-primary));padding:8px 16px;border-bottom:1px solid var(--widget-accent-color, var(--cds-border-subtle-01));font-size:14px}.valtimo-widget-field__field-value cds-skeleton-text{font-size:14px}.valtimo-widget-field__field-value cds-skeleton-text .cds--skeleton__text{margin-bottom:0;height:14px;min-height:14px}.valtimo-widget-field .cds--label{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.valtimo-widget-field__render-vertically,.valtimo-widget-field__render-two-columns,.valtimo-widget-field__render-three-columns{display:grid;align-items:stretch;gap:24px}.valtimo-widget-field__render-vertically{grid-template-columns:repeat(1,1fr)}.valtimo-widget-field__render-two-columns{grid-template-columns:repeat(2,1fr)}.valtimo-widget-field__render-three-columns{grid-template-columns:repeat(3,1fr)}.valtimo-widget-field--compact .valtimo-widget-field__column{gap:8px;border-left:1px solid var(--widget-accent-color, var(--cds-border-subtle-01));padding-left:16px}.valtimo-widget-field--compact .valtimo-widget-field__field{flex-direction:row;justify-content:space-between}.valtimo-widget-field--compact .valtimo-widget-field__field-value{padding:0;border:none}.valtimo-widget-field--compact .valtimo-widget-field-label{margin:auto 0!important;display:flex;height:min-content}.valtimo-widget-field--compact .valtimo-widget-field__render>*{padding-left:16px;border-left:1px solid var(--widget-accent-color, var(--cds-border-subtle-01))}\n/*!\n * Copyright 2015-2026 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: InputModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: CarbonListModule }, { kind: "component", type: i1.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title", "smallPadding", "collapseVertically", "alwaysRenderVertically"] }, { kind: "pipe", type: EllipsisPipe, name: "valtimoEllipsis" }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: WidgetActionButtonComponent, selector: "valtimo-widget-action-button", inputs: ["widgetConfiguration", "resolvedData"] }, { kind: "component", type: MdiIconViewerComponent, selector: "valtimo-mdi-icon-viewer", inputs: ["mdiIcon"] }, { kind: "ngmodule", type: LayerModule }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i3.SkeletonText, selector: "cds-skeleton-text, ibm-skeleton-text", inputs: ["lines", "minLineWidth", "maxLineWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
615
615
|
}
|
|
616
616
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: WidgetFieldComponent, decorators: [{
|
|
617
617
|
type: Component,
|
|
@@ -626,7 +626,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
|
|
|
626
626
|
MdiIconViewerComponent,
|
|
627
627
|
LayerModule,
|
|
628
628
|
SkeletonModule,
|
|
629
|
-
], template: "<!--\n ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n ~\n ~ Licensed under EUPL, Version 1.2 (the \"License\");\n ~ you may not use this file except in compliance with the License.\n ~ You may obtain a copy of the License at\n ~\n ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n ~\n ~ Unless required by applicable law or agreed to in writing, software\n ~ distributed under the License is distributed on an \"AS IS\" basis,\n ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n ~ See the License for the specific language governing permissions and\n ~ limitations under the License.\n -->\n\n<ng-container\n *ngIf=\"{\n widgetConfiguration: widgetConfiguration$ | async,\n widgetPropertyValue: widgetPropertyValue$ | async,\n widgetData: widgetData$ | async,\n isEmptyWidgetData: isEmptyWidgetData$ | async,\n noVisibleFields: noVisibleFields$ | async,\n } as obs\"\n>\n <section *ngIf=\"obs?.widgetConfiguration?.title\" class=\"valtimo-widget-field__header\">\n <div class=\"valtimo-widget-field__title-container\">\n <valtimo-mdi-icon-viewer\n *ngIf=\"obs.widgetConfiguration?.icon\"\n [mdiIcon]=\"obs.widgetConfiguration.icon\"\n ></valtimo-mdi-icon-viewer>\n\n <h4 class=\"valtimo-widget-field__title\">{{ obs?.widgetConfiguration?.title }}</h4>\n </div>\n\n <ng-content></ng-content>\n\n <valtimo-widget-action-button\n [widgetConfiguration]=\"obs.widgetConfiguration\"\n [resolvedData]=\"obs.widgetData\"\n ></valtimo-widget-action-button>\n </section>\n\n @if (obs?.isEmptyWidgetData) {\n <valtimo-no-results\n [collapseVertically]=\"true\"\n [description]=\"'widgets.noData' | translate\"\n [smallPadding]=\"true\"\n ></valtimo-no-results>\n } @else {\n <div\n #widgetField\n class=\"valtimo-widget-field__render\"\n [ngClass]=\"{\n 'valtimo-widget-field__render-vertically': renderVertically() === 1,\n 'valtimo-widget-field__render-two-columns': renderVertically() === 2,\n 'valtimo-widget-field__render-three-columns': renderVertically() === 3,\n 'valtimo-widget-field__container': renderVertically() === 4,\n }\"\n >\n @if (obs.widgetData && obs.noVisibleFields) {\n <valtimo-no-results\n [collapseVertically]=\"true\"\n [description]=\"'widgets.emptyFields' | translate\"\n [smallPadding]=\"true\"\n ></valtimo-no-results>\n } @else {\n @for (column of obs?.widgetPropertyValue; track column.key) {\n <div class=\"valtimo-widget-field__column\">\n @for (property of column; track property) {\n <div\n *ngIf=\"\n (property?.value !== null &&\n property?.value !== '-' &&\n property?.hideWhenEmpty) ||\n !property?.hideWhenEmpty\n \"\n class=\"valtimo-widget-field__field\"\n >\n <label class=\"valtimo-widget-field__field-label\" [attr.title]=\"property?.title\">\n {{ property?.title }}</label\n >\n\n <div [attr.title]=\"property?.value\" class=\"valtimo-widget-field__field-value\">\n @if (!obs.widgetData) {\n <cds-skeleton-text [lines]=\"1\" [maxLineWidth]=\"100\"></cds-skeleton-text>\n } @else {\n @if (property?.isRawValue) {\n <div [innerHTML]=\"property?.value\"></div>\n } @else {\n {{ property?.value | valtimoEllipsis: property?.ellipsisCharacterLimit }}\n }\n }\n </div>\n </div>\n }\n </div>\n }\n }\n </div>\n }\n</ng-container>\n", styles: [".valtimo-widget-field{padding:24px}.valtimo-widget-field__header{display:flex;align-items:center;justify-content:space-between}.valtimo-widget-field,.valtimo-widget-field__column{display:flex;flex-direction:column;gap:16px;width:100%;overflow:hidden}.valtimo-widget-field__title{color:var(--widget-text-color, var(--cds-text-primary));font-weight:600;font-size:16px;line-height:24px}.valtimo-widget-field__title-container{display:flex;align-items:center;gap:8px;color:var(--widget-text-color, var(--cds-text-primary))}.valtimo-widget-field__title-container .mdi-icon-preview{color:var(--widget-text-color, var(--cds-text-primary))!important}.valtimo-widget-field__container{display:grid;grid-gap:24px;grid-template-columns:repeat(4,1fr)}.valtimo-widget-field__field{display:flex;flex-direction:column;width:100%;gap:8px}.valtimo-widget-field__field-label{font-size:12px;color:var(--widget-text-color, var(--cds-text-secondary))}.valtimo-widget-field__field-value{color:var(--widget-text-color, var(--cds-text-primary));padding:8px 16px;border-bottom:1px solid var(--cds-border-subtle-01);font-size:14px}.valtimo-widget-field__field-value cds-skeleton-text{font-size:14px}.valtimo-widget-field__field-value cds-skeleton-text .cds--skeleton__text{margin-bottom:0;height:14px;min-height:14px}.valtimo-widget-field .cds--label{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.valtimo-widget-field__render-vertically,.valtimo-widget-field__render-two-columns,.valtimo-widget-field__render-three-columns{display:grid;align-items:stretch;gap:24px}.valtimo-widget-field__render-vertically{grid-template-columns:repeat(1,1fr)}.valtimo-widget-field__render-two-columns{grid-template-columns:repeat(2,1fr)}.valtimo-widget-field__render-three-columns{grid-template-columns:repeat(3,1fr)}.valtimo-widget-field--compact .valtimo-widget-field__column{gap:8px;border-left:1px solid var(--widget-accent-color, var(--cds-border-subtle-01));padding-left:16px}.valtimo-widget-field--compact .valtimo-widget-field__field{flex-direction:row;justify-content:space-between}.valtimo-widget-field--compact .valtimo-widget-field__field-value{padding:0;border:none}.valtimo-widget-field--compact .valtimo-widget-field-label{margin:auto 0!important;display:flex;height:min-content}.valtimo-widget-field--compact .valtimo-widget-field__render>*{padding-left:16px;border-left:1px solid var(--widget-accent-color, var(--cds-border-subtle-01))}\n/*!\n * Copyright 2015-2026 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
|
|
629
|
+
], template: "<!--\n ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n ~\n ~ Licensed under EUPL, Version 1.2 (the \"License\");\n ~ you may not use this file except in compliance with the License.\n ~ You may obtain a copy of the License at\n ~\n ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n ~\n ~ Unless required by applicable law or agreed to in writing, software\n ~ distributed under the License is distributed on an \"AS IS\" basis,\n ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n ~ See the License for the specific language governing permissions and\n ~ limitations under the License.\n -->\n\n<ng-container\n *ngIf=\"{\n widgetConfiguration: widgetConfiguration$ | async,\n widgetPropertyValue: widgetPropertyValue$ | async,\n widgetData: widgetData$ | async,\n isEmptyWidgetData: isEmptyWidgetData$ | async,\n noVisibleFields: noVisibleFields$ | async,\n } as obs\"\n>\n <section *ngIf=\"obs?.widgetConfiguration?.title\" class=\"valtimo-widget-field__header\">\n <div class=\"valtimo-widget-field__title-container\">\n <valtimo-mdi-icon-viewer\n *ngIf=\"obs.widgetConfiguration?.icon\"\n [mdiIcon]=\"obs.widgetConfiguration.icon\"\n ></valtimo-mdi-icon-viewer>\n\n <h4 class=\"valtimo-widget-field__title\">{{ obs?.widgetConfiguration?.title }}</h4>\n </div>\n\n <ng-content></ng-content>\n\n <valtimo-widget-action-button\n [widgetConfiguration]=\"obs.widgetConfiguration\"\n [resolvedData]=\"obs.widgetData\"\n ></valtimo-widget-action-button>\n </section>\n\n @if (obs?.isEmptyWidgetData) {\n <valtimo-no-results\n [collapseVertically]=\"true\"\n [description]=\"'widgets.noData' | translate\"\n [smallPadding]=\"true\"\n ></valtimo-no-results>\n } @else {\n <div\n #widgetField\n class=\"valtimo-widget-field__render\"\n [ngClass]=\"{\n 'valtimo-widget-field__render-vertically': renderVertically() === 1,\n 'valtimo-widget-field__render-two-columns': renderVertically() === 2,\n 'valtimo-widget-field__render-three-columns': renderVertically() === 3,\n 'valtimo-widget-field__container': renderVertically() === 4,\n }\"\n >\n @if (obs.widgetData && obs.noVisibleFields) {\n <valtimo-no-results\n [collapseVertically]=\"true\"\n [description]=\"'widgets.emptyFields' | translate\"\n [smallPadding]=\"true\"\n ></valtimo-no-results>\n } @else {\n @for (column of obs?.widgetPropertyValue; track column.key) {\n <div class=\"valtimo-widget-field__column\">\n @for (property of column; track property) {\n <div\n *ngIf=\"\n (property?.value !== null &&\n property?.value !== '-' &&\n property?.hideWhenEmpty) ||\n !property?.hideWhenEmpty\n \"\n class=\"valtimo-widget-field__field\"\n >\n <label class=\"valtimo-widget-field__field-label\" [attr.title]=\"property?.title\">\n {{ property?.title }}</label\n >\n\n <div [attr.title]=\"property?.value\" class=\"valtimo-widget-field__field-value\">\n @if (!obs.widgetData) {\n <cds-skeleton-text [lines]=\"1\" [maxLineWidth]=\"100\"></cds-skeleton-text>\n } @else {\n @if (property?.isRawValue) {\n <div [innerHTML]=\"property?.value\"></div>\n } @else {\n {{ property?.value | valtimoEllipsis: property?.ellipsisCharacterLimit }}\n }\n }\n </div>\n </div>\n }\n </div>\n }\n }\n </div>\n }\n</ng-container>\n", styles: [".valtimo-widget-field{padding:24px}.valtimo-widget-field__header{display:flex;align-items:center;justify-content:space-between}.valtimo-widget-field,.valtimo-widget-field__column{display:flex;flex-direction:column;gap:16px;width:100%;overflow:hidden}.valtimo-widget-field__title{color:var(--widget-text-color, var(--cds-text-primary));font-weight:600;font-size:16px;line-height:24px}.valtimo-widget-field__title-container{display:flex;align-items:center;gap:8px;color:var(--widget-text-color, var(--cds-text-primary))}.valtimo-widget-field__title-container .mdi-icon-preview{color:var(--widget-text-color, var(--cds-text-primary))!important}.valtimo-widget-field__container{display:grid;grid-gap:24px;grid-template-columns:repeat(4,1fr)}.valtimo-widget-field__field{display:flex;flex-direction:column;width:100%;gap:8px}.valtimo-widget-field__field-label{font-size:12px;color:var(--widget-text-color, var(--cds-text-secondary))}.valtimo-widget-field__field-value{color:var(--widget-text-color, var(--cds-text-primary));padding:8px 16px;border-bottom:1px solid var(--widget-accent-color, var(--cds-border-subtle-01));font-size:14px}.valtimo-widget-field__field-value cds-skeleton-text{font-size:14px}.valtimo-widget-field__field-value cds-skeleton-text .cds--skeleton__text{margin-bottom:0;height:14px;min-height:14px}.valtimo-widget-field .cds--label{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.valtimo-widget-field__render-vertically,.valtimo-widget-field__render-two-columns,.valtimo-widget-field__render-three-columns{display:grid;align-items:stretch;gap:24px}.valtimo-widget-field__render-vertically{grid-template-columns:repeat(1,1fr)}.valtimo-widget-field__render-two-columns{grid-template-columns:repeat(2,1fr)}.valtimo-widget-field__render-three-columns{grid-template-columns:repeat(3,1fr)}.valtimo-widget-field--compact .valtimo-widget-field__column{gap:8px;border-left:1px solid var(--widget-accent-color, var(--cds-border-subtle-01));padding-left:16px}.valtimo-widget-field--compact .valtimo-widget-field__field{flex-direction:row;justify-content:space-between}.valtimo-widget-field--compact .valtimo-widget-field__field-value{padding:0;border:none}.valtimo-widget-field--compact .valtimo-widget-field-label{margin:auto 0!important;display:flex;height:min-content}.valtimo-widget-field--compact .valtimo-widget-field__render>*{padding-left:16px;border-left:1px solid var(--widget-accent-color, var(--cds-border-subtle-01))}\n/*!\n * Copyright 2015-2026 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
|
|
630
630
|
}], ctorParameters: () => [{ type: i1.ViewContentService }], propDecorators: { hostClasses: [{
|
|
631
631
|
type: HostBinding,
|
|
632
632
|
args: ['class']
|
|
@@ -1263,7 +1263,7 @@ class WidgetCollectionComponent {
|
|
|
1263
1263
|
});
|
|
1264
1264
|
}
|
|
1265
1265
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: WidgetCollectionComponent, deps: [{ token: i1.ViewContentService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1266
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: WidgetCollectionComponent, isStandalone: true, selector: "valtimo-widget-collection", inputs: { widgetConfiguration: "widgetConfiguration", widgetData: "widgetData" }, outputs: { paginationEvent: "paginationEvent" }, host: { properties: { "class": "this.hostClasses" } }, viewQueries: [{ propertyName: "_widgetCollectionRef", first: true, predicate: ["widgetCollection"], descendants: true }], ngImport: i0, template: "<!--\n ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n ~\n ~ Licensed under EUPL, Version 1.2 (the \"License\");\n ~ you may not use this file except in compliance with the License.\n ~ You may obtain a copy of the License at\n ~\n ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n ~\n ~ Unless required by applicable law or agreed to in writing, software\n ~ distributed under the License is distributed on an \"AS IS\" basis,\n ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n ~ See the License for the specific language governing permissions and\n ~ limitations under the License.\n -->\n\n<ng-container\n *ngIf=\"{\n widgetConfiguration: widgetConfiguration$ | async,\n collectionWidgetCards: collectionWidgetCards$ | async,\n noVisibleFields: noVisibleFields$ | async,\n widgetData: widgetData$ | async,\n } as obs\"\n>\n <section class=\"valtimo-widget-collection__header\">\n <div class=\"valtimo-widget-collection__title-container\">\n <valtimo-mdi-icon-viewer\n *ngIf=\"obs.widgetConfiguration?.icon\"\n [mdiIcon]=\"obs.widgetConfiguration.icon\"\n ></valtimo-mdi-icon-viewer>\n\n <span class=\"valtimo-widget-collection__title\">{{ $widgetTitle() }}</span>\n </div>\n\n <ng-content></ng-content>\n\n <valtimo-widget-action-button\n [widgetConfiguration]=\"obs.widgetConfiguration\"\n [resolvedData]=\"obs.widgetData\"\n ></valtimo-widget-action-button>\n </section>\n\n <div\n #widgetCollection\n [ngClass]=\"{\n 'valtimo-widget-collection__render-vertically': amountOfColumns() === 1,\n 'valtimo-widget-collection__render-two-columns': amountOfColumns() === 2,\n 'valtimo-widget-collection__render-three-columns': amountOfColumns() === 3,\n 'valtimo-widget-collection__container': amountOfColumns() === 4,\n }\"\n >\n @for (card of obs?.collectionWidgetCards; track card.key) {\n <div\n *ngIf=\"!obs.noVisibleFields\"\n class=\"valtimo-widget-collection__card\"\n [ngClass]=\"{\n 'valtimo-widget-collection__card--hidden': card.hidden,\n }\"\n >\n <span class=\"valtimo-widget-collection__card-title\">\n @if (!obs.widgetData) {\n <cds-skeleton-text [lines]=\"1\" [maxLineWidth]=\"30\"></cds-skeleton-text>\n } @else {\n {{ card.title }}\n }\n </span>\n\n <section class=\"valtimo-widget-collection__card-content\">\n @for (field of card.fields; track field.key) {\n <div\n *ngIf=\"\n (field?.value !== null && field?.value !== '-' && field?.hideWhenEmpty) ||\n !field?.hideWhenEmpty\n \"\n [ngClass]=\"{\n 'valtimo-widget-collection__full-width-input': field?.width === 'full',\n 'valtimo-widget-collection__half-width-input': field?.width === 'half',\n }\"\n >\n <cds-label\n class=\"valtimo-widget-collection__label\"\n [attr.title]=\"field?.value ?? field?.title\"\n >\n {{ field?.title }}\n\n @if (!obs.widgetData) {\n <cds-skeleton-text [lines]=\"1\" [maxLineWidth]=\"30\"></cds-skeleton-text>\n } @else {\n <input\n [value]=\"field?.value\"\n [readonly]=\"true\"\n class=\"valtimo-widget-collection__card-input\"\n cdsText\n />\n }\n </cds-label>\n </div>\n }\n </section>\n </div>\n }\n </div>\n\n @if (obs.noVisibleFields || !obs?.collectionWidgetCards?.length) {\n <valtimo-no-results\n [collapseVertically]=\"true\"\n [description]=\"(obs.noVisibleFields ? 'widgets.emptyFields' : 'widgets.noData') | translate\"\n [smallPadding]=\"true\"\n ></valtimo-no-results>\n }\n\n @if ($paginationModel() && $showPagination()) {\n <cds-pagination-nav\n class=\"valtimo-widget-collection__pagination\"\n [model]=\"$paginationModel()\"\n (selectPage)=\"onSelectPage($event)\"\n >\n </cds-pagination-nav>\n } @else if (!obs.widgetData) {\n <div class=\"valtimo-widget-collection__pagination\">\n <cds-skeleton-text [lines]=\"1\" [maxLineWidth]=\"150\" [minLineWidth]=\"150\"></cds-skeleton-text>\n </div>\n }\n</ng-container>\n", styles: [".valtimo-widget-collection{padding:24px;color:var(--widget-text-color, var(--cds-text-primary))}.valtimo-widget-collection .cds--label{overflow:hidden;text-overflow:ellipsis;width:100%;color:inherit}.valtimo-widget-collection .cds--label cds-skeleton-text{margin:16px 0 0;display:block}.valtimo-widget-collection__header{display:flex;align-items:center;justify-content:space-between}.valtimo-widget-collection__title-container{display:flex;align-items:center;gap:8px}.valtimo-widget-collection__title-container valtimo-mdi-icon-viewer .mdi-icon-preview{color:var(--widget-text-color, var(--cds-text-primary))}.valtimo-widget-collection__title{color:var(--widget-text-color, var(--cds-text-primary));font-weight:600;font-size:16px;line-height:24px}.valtimo-widget-collection__container{display:flex;column-gap:16px}.valtimo-widget-collection,.valtimo-widget-collection__column{display:flex;flex-direction:column;width:100%;overflow:hidden}.valtimo-widget-collection__card{margin-top:16px;display:flex;flex-flow:row wrap;background-color:var(--widget-layer-color, var(--cds-background));padding:16px;width:100%;gap:16px}.valtimo-widget-collection__card-title{color:var(--widget-text-color, var(--cds-text-primary));font-weight:500;font-size:14px;line-height:22px;font-style:italic;width:100%}.valtimo-widget-collection__card-title cds-skeleton-text{display:block}.valtimo-widget-collection__card-content{width:100%;display:flex;flex-direction:column;gap:16px}.valtimo-widget-collection__card-input{background:transparent}.valtimo-widget-collection__card--hidden{visibility:hidden}.valtimo-widget-collection__full-width-input{width:100%}.valtimo-widget-collection__half-width-input{width:calc(50% - 16px);box-sizing:border-box}.valtimo-widget-collection__pagination{padding:8px 0;display:flex;justify-content:center;height:64px;align-items:center}.valtimo-widget-collection__render-vertically,.valtimo-widget-collection__render-two-columns,.valtimo-widget-collection__render-three-columns{display:grid;grid-gap:16px;align-items:stretch;overflow:hidden;text-overflow:ellipsis;width:100%}.valtimo-widget-collection__render-vertically{grid-template-columns:1fr}.valtimo-widget-collection__render-two-columns{grid-template-columns:repeat(2,1fr)}.valtimo-widget-collection__render-three-columns{grid-template-columns:repeat(3,1fr)}.valtimo-widget-collection--compact.valtimo-widget-collection .cds--label{margin:0}.valtimo-widget-collection--compact.valtimo-widget-collection .valtimo-widget-collection__label .cds--text-input-wrapper{display:flex;flex-direction:row;align-items:center;height:32px}.valtimo-widget-collection--compact.valtimo-widget-collection__card{gap:12px}.valtimo-widget-collection--compact.valtimo-widget-collection__card-content{padding-left:16px;gap:12px;border-left:1px solid var(--cds-border-subtle-01)}.valtimo-widget-collection--compact.valtimo-widget-collection__card-input{border:none}\n/*!\n * Copyright 2015-2026 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i3.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i3.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "ngmodule", type: PaginationModule }, { kind: "component", type: i3.PaginationNav, selector: "cds-pagination-nav, ibm-pagination-navm", inputs: ["model", "disabled", "numOfItemsToShow", "translations", "size"], outputs: ["selectPage"] }, { kind: "ngmodule", type: TilesModule }, { kind: "ngmodule", type: CarbonListModule }, { kind: "component", type: i1.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title", "smallPadding", "collapseVertically", "alwaysRenderVertically"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: WidgetActionButtonComponent, selector: "valtimo-widget-action-button", inputs: ["widgetConfiguration", "resolvedData"] }, { kind: "component", type: MdiIconViewerComponent, selector: "valtimo-mdi-icon-viewer", inputs: ["mdiIcon"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i3.SkeletonText, selector: "cds-skeleton-text, ibm-skeleton-text", inputs: ["lines", "minLineWidth", "maxLineWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1266
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: WidgetCollectionComponent, isStandalone: true, selector: "valtimo-widget-collection", inputs: { widgetConfiguration: "widgetConfiguration", widgetData: "widgetData" }, outputs: { paginationEvent: "paginationEvent" }, host: { properties: { "class": "this.hostClasses" } }, viewQueries: [{ propertyName: "_widgetCollectionRef", first: true, predicate: ["widgetCollection"], descendants: true }], ngImport: i0, template: "<!--\n ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n ~\n ~ Licensed under EUPL, Version 1.2 (the \"License\");\n ~ you may not use this file except in compliance with the License.\n ~ You may obtain a copy of the License at\n ~\n ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n ~\n ~ Unless required by applicable law or agreed to in writing, software\n ~ distributed under the License is distributed on an \"AS IS\" basis,\n ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n ~ See the License for the specific language governing permissions and\n ~ limitations under the License.\n -->\n\n<ng-container\n *ngIf=\"{\n widgetConfiguration: widgetConfiguration$ | async,\n collectionWidgetCards: collectionWidgetCards$ | async,\n noVisibleFields: noVisibleFields$ | async,\n widgetData: widgetData$ | async,\n } as obs\"\n>\n <section class=\"valtimo-widget-collection__header\">\n <div class=\"valtimo-widget-collection__title-container\">\n <valtimo-mdi-icon-viewer\n *ngIf=\"obs.widgetConfiguration?.icon\"\n [mdiIcon]=\"obs.widgetConfiguration.icon\"\n ></valtimo-mdi-icon-viewer>\n\n <span class=\"valtimo-widget-collection__title\">{{ $widgetTitle() }}</span>\n </div>\n\n <ng-content></ng-content>\n\n <valtimo-widget-action-button\n [widgetConfiguration]=\"obs.widgetConfiguration\"\n [resolvedData]=\"obs.widgetData\"\n ></valtimo-widget-action-button>\n </section>\n\n <div\n #widgetCollection\n [ngClass]=\"{\n 'valtimo-widget-collection__render-vertically': amountOfColumns() === 1,\n 'valtimo-widget-collection__render-two-columns': amountOfColumns() === 2,\n 'valtimo-widget-collection__render-three-columns': amountOfColumns() === 3,\n 'valtimo-widget-collection__container': amountOfColumns() === 4,\n }\"\n >\n @for (card of obs?.collectionWidgetCards; track card.key) {\n <div\n *ngIf=\"!obs.noVisibleFields\"\n class=\"valtimo-widget-collection__card\"\n [ngClass]=\"{\n 'valtimo-widget-collection__card--hidden': card.hidden,\n }\"\n >\n <span class=\"valtimo-widget-collection__card-title\">\n @if (!obs.widgetData) {\n <cds-skeleton-text [lines]=\"1\" [maxLineWidth]=\"30\"></cds-skeleton-text>\n } @else {\n {{ card.title }}\n }\n </span>\n\n <section class=\"valtimo-widget-collection__card-content\">\n @for (field of card.fields; track field.key) {\n <div\n *ngIf=\"\n (field?.value !== null && field?.value !== '-' && field?.hideWhenEmpty) ||\n !field?.hideWhenEmpty\n \"\n [ngClass]=\"{\n 'valtimo-widget-collection__full-width-input': field?.width === 'full',\n 'valtimo-widget-collection__half-width-input': field?.width === 'half',\n }\"\n >\n <cds-label\n class=\"valtimo-widget-collection__label\"\n [attr.title]=\"field?.value ?? field?.title\"\n >\n {{ field?.title }}\n\n @if (!obs.widgetData) {\n <cds-skeleton-text [lines]=\"1\" [maxLineWidth]=\"30\"></cds-skeleton-text>\n } @else {\n <input\n [value]=\"field?.value\"\n [readonly]=\"true\"\n class=\"valtimo-widget-collection__card-input\"\n cdsText\n />\n }\n </cds-label>\n </div>\n }\n </section>\n </div>\n }\n </div>\n\n @if (obs.noVisibleFields || !obs?.collectionWidgetCards?.length) {\n <valtimo-no-results\n [collapseVertically]=\"true\"\n [description]=\"(obs.noVisibleFields ? 'widgets.emptyFields' : 'widgets.noData') | translate\"\n [smallPadding]=\"true\"\n ></valtimo-no-results>\n }\n\n @if ($paginationModel() && $showPagination()) {\n <cds-pagination-nav\n class=\"valtimo-widget-collection__pagination\"\n [model]=\"$paginationModel()\"\n (selectPage)=\"onSelectPage($event)\"\n >\n </cds-pagination-nav>\n } @else if (!obs.widgetData) {\n <div class=\"valtimo-widget-collection__pagination\">\n <cds-skeleton-text [lines]=\"1\" [maxLineWidth]=\"150\" [minLineWidth]=\"150\"></cds-skeleton-text>\n </div>\n }\n</ng-container>\n", styles: [".valtimo-widget-collection{padding:24px;color:var(--widget-text-color, var(--cds-text-primary))}.valtimo-widget-collection .cds--label{overflow:hidden;text-overflow:ellipsis;width:100%;color:inherit}.valtimo-widget-collection .cds--label cds-skeleton-text{margin:16px 0 0;display:block}.valtimo-widget-collection__header{display:flex;align-items:center;justify-content:space-between}.valtimo-widget-collection__title-container{display:flex;align-items:center;gap:8px}.valtimo-widget-collection__title-container valtimo-mdi-icon-viewer .mdi-icon-preview{color:var(--widget-text-color, var(--cds-text-primary))}.valtimo-widget-collection__title{color:var(--widget-text-color, var(--cds-text-primary));font-weight:600;font-size:16px;line-height:24px}.valtimo-widget-collection__container{display:flex;column-gap:16px}.valtimo-widget-collection,.valtimo-widget-collection__column{display:flex;flex-direction:column;width:100%;overflow:hidden}.valtimo-widget-collection__card{margin-top:16px;display:flex;flex-flow:row wrap;background-color:var(--widget-layer-color, var(--cds-background));padding:16px;width:100%;gap:16px}.valtimo-widget-collection__card-title{color:var(--widget-text-color, var(--cds-text-primary));font-weight:500;font-size:14px;line-height:22px;font-style:italic;width:100%}.valtimo-widget-collection__card-title cds-skeleton-text{display:block}.valtimo-widget-collection__card-content{width:100%;display:flex;flex-direction:column;gap:16px}.valtimo-widget-collection__card-input{background:transparent}.valtimo-widget-collection__card--hidden{visibility:hidden}.valtimo-widget-collection__full-width-input{width:100%}.valtimo-widget-collection__half-width-input{width:calc(50% - 16px);box-sizing:border-box}.valtimo-widget-collection__pagination{padding:8px 0;display:flex;justify-content:center;height:64px;align-items:center}.valtimo-widget-collection__render-vertically,.valtimo-widget-collection__render-two-columns,.valtimo-widget-collection__render-three-columns{display:grid;grid-gap:16px;align-items:stretch;overflow:hidden;text-overflow:ellipsis;width:100%}.valtimo-widget-collection__render-vertically{grid-template-columns:1fr}.valtimo-widget-collection__render-two-columns{grid-template-columns:repeat(2,1fr)}.valtimo-widget-collection__render-three-columns{grid-template-columns:repeat(3,1fr)}.valtimo-widget-collection--compact.valtimo-widget-collection .cds--label{margin:0}.valtimo-widget-collection--compact.valtimo-widget-collection .valtimo-widget-collection__label .cds--text-input-wrapper{display:flex;flex-direction:row;align-items:center;height:32px}.valtimo-widget-collection--compact.valtimo-widget-collection__card{gap:12px}.valtimo-widget-collection--compact.valtimo-widget-collection__card-content{padding-left:16px;gap:12px;border-left:1px solid var(--widget-accent-color, var(--cds-border-subtle-01))}.valtimo-widget-collection--compact.valtimo-widget-collection__card-input{border:none}.valtimo-widget-collection .valtimo-no-results__content{color:var(--widget-text-color, var(--cds-text-primary))!important}\n/*!\n * Copyright 2015-2026 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i3.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i3.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "ngmodule", type: PaginationModule }, { kind: "component", type: i3.PaginationNav, selector: "cds-pagination-nav, ibm-pagination-navm", inputs: ["model", "disabled", "numOfItemsToShow", "translations", "size"], outputs: ["selectPage"] }, { kind: "ngmodule", type: TilesModule }, { kind: "ngmodule", type: CarbonListModule }, { kind: "component", type: i1.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title", "smallPadding", "collapseVertically", "alwaysRenderVertically"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: WidgetActionButtonComponent, selector: "valtimo-widget-action-button", inputs: ["widgetConfiguration", "resolvedData"] }, { kind: "component", type: MdiIconViewerComponent, selector: "valtimo-mdi-icon-viewer", inputs: ["mdiIcon"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i3.SkeletonText, selector: "cds-skeleton-text, ibm-skeleton-text", inputs: ["lines", "minLineWidth", "maxLineWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1267
1267
|
}
|
|
1268
1268
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: WidgetCollectionComponent, decorators: [{
|
|
1269
1269
|
type: Component,
|
|
@@ -1278,7 +1278,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
|
|
|
1278
1278
|
WidgetActionButtonComponent,
|
|
1279
1279
|
MdiIconViewerComponent,
|
|
1280
1280
|
SkeletonModule,
|
|
1281
|
-
], template: "<!--\n ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n ~\n ~ Licensed under EUPL, Version 1.2 (the \"License\");\n ~ you may not use this file except in compliance with the License.\n ~ You may obtain a copy of the License at\n ~\n ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n ~\n ~ Unless required by applicable law or agreed to in writing, software\n ~ distributed under the License is distributed on an \"AS IS\" basis,\n ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n ~ See the License for the specific language governing permissions and\n ~ limitations under the License.\n -->\n\n<ng-container\n *ngIf=\"{\n widgetConfiguration: widgetConfiguration$ | async,\n collectionWidgetCards: collectionWidgetCards$ | async,\n noVisibleFields: noVisibleFields$ | async,\n widgetData: widgetData$ | async,\n } as obs\"\n>\n <section class=\"valtimo-widget-collection__header\">\n <div class=\"valtimo-widget-collection__title-container\">\n <valtimo-mdi-icon-viewer\n *ngIf=\"obs.widgetConfiguration?.icon\"\n [mdiIcon]=\"obs.widgetConfiguration.icon\"\n ></valtimo-mdi-icon-viewer>\n\n <span class=\"valtimo-widget-collection__title\">{{ $widgetTitle() }}</span>\n </div>\n\n <ng-content></ng-content>\n\n <valtimo-widget-action-button\n [widgetConfiguration]=\"obs.widgetConfiguration\"\n [resolvedData]=\"obs.widgetData\"\n ></valtimo-widget-action-button>\n </section>\n\n <div\n #widgetCollection\n [ngClass]=\"{\n 'valtimo-widget-collection__render-vertically': amountOfColumns() === 1,\n 'valtimo-widget-collection__render-two-columns': amountOfColumns() === 2,\n 'valtimo-widget-collection__render-three-columns': amountOfColumns() === 3,\n 'valtimo-widget-collection__container': amountOfColumns() === 4,\n }\"\n >\n @for (card of obs?.collectionWidgetCards; track card.key) {\n <div\n *ngIf=\"!obs.noVisibleFields\"\n class=\"valtimo-widget-collection__card\"\n [ngClass]=\"{\n 'valtimo-widget-collection__card--hidden': card.hidden,\n }\"\n >\n <span class=\"valtimo-widget-collection__card-title\">\n @if (!obs.widgetData) {\n <cds-skeleton-text [lines]=\"1\" [maxLineWidth]=\"30\"></cds-skeleton-text>\n } @else {\n {{ card.title }}\n }\n </span>\n\n <section class=\"valtimo-widget-collection__card-content\">\n @for (field of card.fields; track field.key) {\n <div\n *ngIf=\"\n (field?.value !== null && field?.value !== '-' && field?.hideWhenEmpty) ||\n !field?.hideWhenEmpty\n \"\n [ngClass]=\"{\n 'valtimo-widget-collection__full-width-input': field?.width === 'full',\n 'valtimo-widget-collection__half-width-input': field?.width === 'half',\n }\"\n >\n <cds-label\n class=\"valtimo-widget-collection__label\"\n [attr.title]=\"field?.value ?? field?.title\"\n >\n {{ field?.title }}\n\n @if (!obs.widgetData) {\n <cds-skeleton-text [lines]=\"1\" [maxLineWidth]=\"30\"></cds-skeleton-text>\n } @else {\n <input\n [value]=\"field?.value\"\n [readonly]=\"true\"\n class=\"valtimo-widget-collection__card-input\"\n cdsText\n />\n }\n </cds-label>\n </div>\n }\n </section>\n </div>\n }\n </div>\n\n @if (obs.noVisibleFields || !obs?.collectionWidgetCards?.length) {\n <valtimo-no-results\n [collapseVertically]=\"true\"\n [description]=\"(obs.noVisibleFields ? 'widgets.emptyFields' : 'widgets.noData') | translate\"\n [smallPadding]=\"true\"\n ></valtimo-no-results>\n }\n\n @if ($paginationModel() && $showPagination()) {\n <cds-pagination-nav\n class=\"valtimo-widget-collection__pagination\"\n [model]=\"$paginationModel()\"\n (selectPage)=\"onSelectPage($event)\"\n >\n </cds-pagination-nav>\n } @else if (!obs.widgetData) {\n <div class=\"valtimo-widget-collection__pagination\">\n <cds-skeleton-text [lines]=\"1\" [maxLineWidth]=\"150\" [minLineWidth]=\"150\"></cds-skeleton-text>\n </div>\n }\n</ng-container>\n", styles: [".valtimo-widget-collection{padding:24px;color:var(--widget-text-color, var(--cds-text-primary))}.valtimo-widget-collection .cds--label{overflow:hidden;text-overflow:ellipsis;width:100%;color:inherit}.valtimo-widget-collection .cds--label cds-skeleton-text{margin:16px 0 0;display:block}.valtimo-widget-collection__header{display:flex;align-items:center;justify-content:space-between}.valtimo-widget-collection__title-container{display:flex;align-items:center;gap:8px}.valtimo-widget-collection__title-container valtimo-mdi-icon-viewer .mdi-icon-preview{color:var(--widget-text-color, var(--cds-text-primary))}.valtimo-widget-collection__title{color:var(--widget-text-color, var(--cds-text-primary));font-weight:600;font-size:16px;line-height:24px}.valtimo-widget-collection__container{display:flex;column-gap:16px}.valtimo-widget-collection,.valtimo-widget-collection__column{display:flex;flex-direction:column;width:100%;overflow:hidden}.valtimo-widget-collection__card{margin-top:16px;display:flex;flex-flow:row wrap;background-color:var(--widget-layer-color, var(--cds-background));padding:16px;width:100%;gap:16px}.valtimo-widget-collection__card-title{color:var(--widget-text-color, var(--cds-text-primary));font-weight:500;font-size:14px;line-height:22px;font-style:italic;width:100%}.valtimo-widget-collection__card-title cds-skeleton-text{display:block}.valtimo-widget-collection__card-content{width:100%;display:flex;flex-direction:column;gap:16px}.valtimo-widget-collection__card-input{background:transparent}.valtimo-widget-collection__card--hidden{visibility:hidden}.valtimo-widget-collection__full-width-input{width:100%}.valtimo-widget-collection__half-width-input{width:calc(50% - 16px);box-sizing:border-box}.valtimo-widget-collection__pagination{padding:8px 0;display:flex;justify-content:center;height:64px;align-items:center}.valtimo-widget-collection__render-vertically,.valtimo-widget-collection__render-two-columns,.valtimo-widget-collection__render-three-columns{display:grid;grid-gap:16px;align-items:stretch;overflow:hidden;text-overflow:ellipsis;width:100%}.valtimo-widget-collection__render-vertically{grid-template-columns:1fr}.valtimo-widget-collection__render-two-columns{grid-template-columns:repeat(2,1fr)}.valtimo-widget-collection__render-three-columns{grid-template-columns:repeat(3,1fr)}.valtimo-widget-collection--compact.valtimo-widget-collection .cds--label{margin:0}.valtimo-widget-collection--compact.valtimo-widget-collection .valtimo-widget-collection__label .cds--text-input-wrapper{display:flex;flex-direction:row;align-items:center;height:32px}.valtimo-widget-collection--compact.valtimo-widget-collection__card{gap:12px}.valtimo-widget-collection--compact.valtimo-widget-collection__card-content{padding-left:16px;gap:12px;border-left:1px solid var(--cds-border-subtle-01)}.valtimo-widget-collection--compact.valtimo-widget-collection__card-input{border:none}\n/*!\n * Copyright 2015-2026 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
|
|
1281
|
+
], template: "<!--\n ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n ~\n ~ Licensed under EUPL, Version 1.2 (the \"License\");\n ~ you may not use this file except in compliance with the License.\n ~ You may obtain a copy of the License at\n ~\n ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n ~\n ~ Unless required by applicable law or agreed to in writing, software\n ~ distributed under the License is distributed on an \"AS IS\" basis,\n ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n ~ See the License for the specific language governing permissions and\n ~ limitations under the License.\n -->\n\n<ng-container\n *ngIf=\"{\n widgetConfiguration: widgetConfiguration$ | async,\n collectionWidgetCards: collectionWidgetCards$ | async,\n noVisibleFields: noVisibleFields$ | async,\n widgetData: widgetData$ | async,\n } as obs\"\n>\n <section class=\"valtimo-widget-collection__header\">\n <div class=\"valtimo-widget-collection__title-container\">\n <valtimo-mdi-icon-viewer\n *ngIf=\"obs.widgetConfiguration?.icon\"\n [mdiIcon]=\"obs.widgetConfiguration.icon\"\n ></valtimo-mdi-icon-viewer>\n\n <span class=\"valtimo-widget-collection__title\">{{ $widgetTitle() }}</span>\n </div>\n\n <ng-content></ng-content>\n\n <valtimo-widget-action-button\n [widgetConfiguration]=\"obs.widgetConfiguration\"\n [resolvedData]=\"obs.widgetData\"\n ></valtimo-widget-action-button>\n </section>\n\n <div\n #widgetCollection\n [ngClass]=\"{\n 'valtimo-widget-collection__render-vertically': amountOfColumns() === 1,\n 'valtimo-widget-collection__render-two-columns': amountOfColumns() === 2,\n 'valtimo-widget-collection__render-three-columns': amountOfColumns() === 3,\n 'valtimo-widget-collection__container': amountOfColumns() === 4,\n }\"\n >\n @for (card of obs?.collectionWidgetCards; track card.key) {\n <div\n *ngIf=\"!obs.noVisibleFields\"\n class=\"valtimo-widget-collection__card\"\n [ngClass]=\"{\n 'valtimo-widget-collection__card--hidden': card.hidden,\n }\"\n >\n <span class=\"valtimo-widget-collection__card-title\">\n @if (!obs.widgetData) {\n <cds-skeleton-text [lines]=\"1\" [maxLineWidth]=\"30\"></cds-skeleton-text>\n } @else {\n {{ card.title }}\n }\n </span>\n\n <section class=\"valtimo-widget-collection__card-content\">\n @for (field of card.fields; track field.key) {\n <div\n *ngIf=\"\n (field?.value !== null && field?.value !== '-' && field?.hideWhenEmpty) ||\n !field?.hideWhenEmpty\n \"\n [ngClass]=\"{\n 'valtimo-widget-collection__full-width-input': field?.width === 'full',\n 'valtimo-widget-collection__half-width-input': field?.width === 'half',\n }\"\n >\n <cds-label\n class=\"valtimo-widget-collection__label\"\n [attr.title]=\"field?.value ?? field?.title\"\n >\n {{ field?.title }}\n\n @if (!obs.widgetData) {\n <cds-skeleton-text [lines]=\"1\" [maxLineWidth]=\"30\"></cds-skeleton-text>\n } @else {\n <input\n [value]=\"field?.value\"\n [readonly]=\"true\"\n class=\"valtimo-widget-collection__card-input\"\n cdsText\n />\n }\n </cds-label>\n </div>\n }\n </section>\n </div>\n }\n </div>\n\n @if (obs.noVisibleFields || !obs?.collectionWidgetCards?.length) {\n <valtimo-no-results\n [collapseVertically]=\"true\"\n [description]=\"(obs.noVisibleFields ? 'widgets.emptyFields' : 'widgets.noData') | translate\"\n [smallPadding]=\"true\"\n ></valtimo-no-results>\n }\n\n @if ($paginationModel() && $showPagination()) {\n <cds-pagination-nav\n class=\"valtimo-widget-collection__pagination\"\n [model]=\"$paginationModel()\"\n (selectPage)=\"onSelectPage($event)\"\n >\n </cds-pagination-nav>\n } @else if (!obs.widgetData) {\n <div class=\"valtimo-widget-collection__pagination\">\n <cds-skeleton-text [lines]=\"1\" [maxLineWidth]=\"150\" [minLineWidth]=\"150\"></cds-skeleton-text>\n </div>\n }\n</ng-container>\n", styles: [".valtimo-widget-collection{padding:24px;color:var(--widget-text-color, var(--cds-text-primary))}.valtimo-widget-collection .cds--label{overflow:hidden;text-overflow:ellipsis;width:100%;color:inherit}.valtimo-widget-collection .cds--label cds-skeleton-text{margin:16px 0 0;display:block}.valtimo-widget-collection__header{display:flex;align-items:center;justify-content:space-between}.valtimo-widget-collection__title-container{display:flex;align-items:center;gap:8px}.valtimo-widget-collection__title-container valtimo-mdi-icon-viewer .mdi-icon-preview{color:var(--widget-text-color, var(--cds-text-primary))}.valtimo-widget-collection__title{color:var(--widget-text-color, var(--cds-text-primary));font-weight:600;font-size:16px;line-height:24px}.valtimo-widget-collection__container{display:flex;column-gap:16px}.valtimo-widget-collection,.valtimo-widget-collection__column{display:flex;flex-direction:column;width:100%;overflow:hidden}.valtimo-widget-collection__card{margin-top:16px;display:flex;flex-flow:row wrap;background-color:var(--widget-layer-color, var(--cds-background));padding:16px;width:100%;gap:16px}.valtimo-widget-collection__card-title{color:var(--widget-text-color, var(--cds-text-primary));font-weight:500;font-size:14px;line-height:22px;font-style:italic;width:100%}.valtimo-widget-collection__card-title cds-skeleton-text{display:block}.valtimo-widget-collection__card-content{width:100%;display:flex;flex-direction:column;gap:16px}.valtimo-widget-collection__card-input{background:transparent}.valtimo-widget-collection__card--hidden{visibility:hidden}.valtimo-widget-collection__full-width-input{width:100%}.valtimo-widget-collection__half-width-input{width:calc(50% - 16px);box-sizing:border-box}.valtimo-widget-collection__pagination{padding:8px 0;display:flex;justify-content:center;height:64px;align-items:center}.valtimo-widget-collection__render-vertically,.valtimo-widget-collection__render-two-columns,.valtimo-widget-collection__render-three-columns{display:grid;grid-gap:16px;align-items:stretch;overflow:hidden;text-overflow:ellipsis;width:100%}.valtimo-widget-collection__render-vertically{grid-template-columns:1fr}.valtimo-widget-collection__render-two-columns{grid-template-columns:repeat(2,1fr)}.valtimo-widget-collection__render-three-columns{grid-template-columns:repeat(3,1fr)}.valtimo-widget-collection--compact.valtimo-widget-collection .cds--label{margin:0}.valtimo-widget-collection--compact.valtimo-widget-collection .valtimo-widget-collection__label .cds--text-input-wrapper{display:flex;flex-direction:row;align-items:center;height:32px}.valtimo-widget-collection--compact.valtimo-widget-collection__card{gap:12px}.valtimo-widget-collection--compact.valtimo-widget-collection__card-content{padding-left:16px;gap:12px;border-left:1px solid var(--widget-accent-color, var(--cds-border-subtle-01))}.valtimo-widget-collection--compact.valtimo-widget-collection__card-input{border:none}.valtimo-widget-collection .valtimo-no-results__content{color:var(--widget-text-color, var(--cds-text-primary))!important}\n/*!\n * Copyright 2015-2026 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
|
|
1282
1282
|
}], ctorParameters: () => [{ type: i1.ViewContentService }, { type: i0.ChangeDetectorRef }], propDecorators: { hostClasses: [{
|
|
1283
1283
|
type: HostBinding,
|
|
1284
1284
|
args: ['class']
|