@valtimo/layout 13.10.0 → 13.12.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/valtimo-layout.mjs +574 -93
- package/fesm2022/valtimo-layout.mjs.map +1 -1
- package/lib/components/widget-collection/widget-collection.component.d.ts +1 -1
- package/lib/components/widget-collection/widget-collection.component.d.ts.map +1 -1
- package/lib/components/widget-field/widget-field.component.d.ts +1 -1
- package/lib/components/widget-field/widget-field.component.d.ts.map +1 -1
- package/lib/components/widget-interactive-table/index.d.ts +1 -0
- package/lib/components/widget-interactive-table/index.d.ts.map +1 -1
- package/lib/components/widget-interactive-table/widget-interactive-table-search/widget-interactive-table-search.component.d.ts +36 -0
- package/lib/components/widget-interactive-table/widget-interactive-table-search/widget-interactive-table-search.component.d.ts.map +1 -0
- package/lib/components/widget-interactive-table/widget-interactive-table.component.d.ts +18 -2
- package/lib/components/widget-interactive-table/widget-interactive-table.component.d.ts.map +1 -1
- package/lib/components/widget-management/management-action-button/widget-management-action-button.component.d.ts.map +1 -1
- package/lib/components/widget-management/management-content/fields/column/widget-management-fields-column.component.d.ts +14 -7
- package/lib/components/widget-management/management-content/fields/column/widget-management-fields-column.component.d.ts.map +1 -1
- package/lib/components/widget-management/management-content/table/widget-management-table.component.d.ts +2 -1
- package/lib/components/widget-management/management-content/table/widget-management-table.component.d.ts.map +1 -1
- package/lib/components/widget-management/management-wizard/steps/index.d.ts +2 -1
- package/lib/components/widget-management/management-wizard/steps/index.d.ts.map +1 -1
- package/lib/components/widget-management/management-wizard/steps/widget-wizard-filters-step/widget-wizard-filters-step.component.d.ts +50 -0
- package/lib/components/widget-management/management-wizard/steps/widget-wizard-filters-step/widget-wizard-filters-step.component.d.ts.map +1 -0
- package/lib/components/widget-map/widget-map.component.d.ts +1 -1
- package/lib/components/widget-map/widget-map.component.d.ts.map +1 -1
- package/lib/components/widget-table/widget-table.component.d.ts.map +1 -1
- package/lib/models/widget-content.model.d.ts +15 -2
- package/lib/models/widget-content.model.d.ts.map +1 -1
- package/lib/models/widget-wizard.model.d.ts +1 -0
- package/lib/models/widget-wizard.model.d.ts.map +1 -1
- package/lib/models/widget.model.d.ts +3 -1
- package/lib/models/widget.model.d.ts.map +1 -1
- package/lib/services/widget-wizard.service.d.ts +1 -0
- package/lib/services/widget-wizard.service.d.ts.map +1 -1
- package/package.json +1 -1
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Injectable, InjectionToken, Component, ViewChild, ViewContainerRef, Input, EventEmitter, signal, Output, HostBinding, ViewEncapsulation, ChangeDetectionStrategy, Inject, Optional, computed,
|
|
2
|
+
import { Injectable, InjectionToken, Component, ViewChild, ViewContainerRef, Input, EventEmitter, signal, Output, HostBinding, ViewEncapsulation, ChangeDetectionStrategy, Inject, effect, Optional, computed, TemplateRef, NgModule } from '@angular/core';
|
|
3
3
|
import * as i1$3 from '@angular/forms';
|
|
4
|
-
import {
|
|
4
|
+
import { ReactiveFormsModule, FormsModule, Validators } from '@angular/forms';
|
|
5
5
|
import * as i4 from '@angular/common';
|
|
6
6
|
import { CommonModule, DOCUMENT } from '@angular/common';
|
|
7
7
|
import * as i2$1 from '@ngx-translate/core';
|
|
8
8
|
import { TranslateModule, TranslatePipe } from '@ngx-translate/core';
|
|
9
9
|
import * as i1 from '@valtimo/components';
|
|
10
|
-
import { ViewType, CarbonListModule, EllipsisPipe, MdiIconViewerComponent, FormIoModule, CARBON_THEME, CurrentCarbonTheme, runAfterCarbonModalClosed, AutoKeyInputComponent, CARBON_CONSTANTS, ValuePathSelectorPrefix, CarbonMultiInputModule, ConfirmationModalModule, JsonEditorComponent,
|
|
10
|
+
import { ViewType, CarbonListModule, EllipsisPipe, MdiIconViewerComponent, FormIoModule, CARBON_THEME, CurrentCarbonTheme, runAfterCarbonModalClosed, AutoKeyInputComponent, CARBON_CONSTANTS, ValuePathSelectorPrefix, CarbonMultiInputModule, InputLabelModule, ConfirmationModalModule, JsonEditorComponent, ValuePathSelectorComponent, SelectModule, MdiIconSelectorComponent, ValuePathType, MenuRoutingModule, TopbarModule, LeftSidebarModule, RightSidebarModule, PageHeaderModule, AlertModule, PromptModule, MultiInputFormModule, RenderInPageHeaderDirective } from '@valtimo/components';
|
|
11
11
|
import * as i3 from 'carbon-components-angular';
|
|
12
|
-
import { ButtonModule, InputModule, LayerModule, PaginationModel, PaginationModule, TilesModule, DialogModule, MenuButtonModule, ContextMenuModule,
|
|
12
|
+
import { ButtonModule, InputModule, LayerModule, SkeletonModule, PaginationModel, PaginationModule, TilesModule, IconModule, DialogModule, MenuButtonModule, ContextMenuModule, LoadingModule, ModalModule, TooltipModule, ComboBoxModule, DropdownModule, StructuredListModule, ToggleModule, AccordionModule, ProgressIndicatorModule, TabsModule, CheckboxModule, TagModule, Tab, SelectModule as SelectModule$1, PlaceholderModule } from 'carbon-components-angular';
|
|
13
13
|
import { Subscription, BehaviorSubject, combineLatest, map, tap, switchMap, take, filter as filter$1, Subject, debounceTime, of, startWith, merge, delay } from 'rxjs';
|
|
14
|
-
import { Link16, Edit16,
|
|
14
|
+
import { TrashCan16, Filter16, Link16, Edit16, ArrowUp16, ArrowDown16, DragVertical16 } from '@carbon/icons';
|
|
15
15
|
import * as i2 from '@angular/router';
|
|
16
16
|
import { NavigationEnd, RouterModule } from '@angular/router';
|
|
17
17
|
import { filter } from 'rxjs/operators';
|
|
@@ -20,6 +20,7 @@ import { getCaseManagementRouteParams, Operator, GlobalNotificationComponent, RO
|
|
|
20
20
|
import { isEqual, cloneDeep } from 'lodash';
|
|
21
21
|
import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
|
|
22
22
|
import * as i1$2 from '@valtimo/form';
|
|
23
|
+
import { HttpParams } from '@angular/common/http';
|
|
23
24
|
import * as i2$2 from '@valtimo/document';
|
|
24
25
|
import * as i3$1 from '@valtimo/access-control';
|
|
25
26
|
import Muuri from 'muuri';
|
|
@@ -85,6 +86,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
|
|
|
85
86
|
* See the License for the specific language governing permissions and
|
|
86
87
|
* limitations under the License.
|
|
87
88
|
*/
|
|
89
|
+
var MoveRowDirection;
|
|
90
|
+
(function (MoveRowDirection) {
|
|
91
|
+
MoveRowDirection["UP"] = "UP";
|
|
92
|
+
MoveRowDirection["DOWN"] = "DOWN";
|
|
93
|
+
})(MoveRowDirection || (MoveRowDirection = {}));
|
|
88
94
|
|
|
89
95
|
/*
|
|
90
96
|
* Copyright 2015-2025 Ritense BV, the Netherlands.
|
|
@@ -438,17 +444,22 @@ class WidgetFieldComponent {
|
|
|
438
444
|
this.widgetData$ = new BehaviorSubject(null);
|
|
439
445
|
this.widgetPropertyValue$ = combineLatest([this.widgetConfiguration$, this.widgetData$]).pipe(map(([widget, widgetData]) => widget?.properties.columns.map(column => column.reduce((columnFields, property) => [
|
|
440
446
|
...columnFields,
|
|
441
|
-
...(widgetData?.hasOwnProperty(property.key)
|
|
447
|
+
...(widgetData === null || widgetData?.hasOwnProperty(property.key)
|
|
442
448
|
? [
|
|
443
449
|
{
|
|
444
450
|
title: property.title,
|
|
445
451
|
ellipsisCharacterLimit: property.displayProperties
|
|
446
452
|
?.ellipsisCharacterLimit ?? null,
|
|
447
|
-
hideWhenEmpty:
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
453
|
+
hideWhenEmpty: widgetData
|
|
454
|
+
? (property.displayProperties?.hideWhenEmpty ??
|
|
455
|
+
false)
|
|
456
|
+
: false,
|
|
457
|
+
value: widgetData
|
|
458
|
+
? this.viewContentService.get(widgetData[property.key], {
|
|
459
|
+
...property.displayProperties,
|
|
460
|
+
viewType: property.displayProperties?.type ?? ViewType.TEXT,
|
|
461
|
+
})
|
|
462
|
+
: null,
|
|
452
463
|
isRawValue: this.viewContentService.isRawValue({
|
|
453
464
|
...property.displayProperties,
|
|
454
465
|
viewType: property.displayProperties?.type ?? ViewType.TEXT,
|
|
@@ -503,7 +514,7 @@ class WidgetFieldComponent {
|
|
|
503
514
|
});
|
|
504
515
|
}
|
|
505
516
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: WidgetFieldComponent, deps: [{ token: i1.ViewContentService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
506
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", 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.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 (property?.isRawValue) {\n
|
|
517
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", 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(--cds-text-primary);font-weight:600;font-size:16px;line-height:24px}.valtimo-widget-field__title-container{display:flex;align-items:center;gap:8px}.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(--cds-text-secondary)}.valtimo-widget-field__field-value{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(--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(--cds-border-subtle-01)}\n/*!\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"], 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 }); }
|
|
507
518
|
}
|
|
508
519
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: WidgetFieldComponent, decorators: [{
|
|
509
520
|
type: Component,
|
|
@@ -517,7 +528,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
|
|
|
517
528
|
WidgetActionButtonComponent,
|
|
518
529
|
MdiIconViewerComponent,
|
|
519
530
|
LayerModule,
|
|
520
|
-
|
|
531
|
+
SkeletonModule,
|
|
532
|
+
], 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(--cds-text-primary);font-weight:600;font-size:16px;line-height:24px}.valtimo-widget-field__title-container{display:flex;align-items:center;gap:8px}.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(--cds-text-secondary)}.valtimo-widget-field__field-value{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(--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(--cds-border-subtle-01)}\n/*!\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"] }]
|
|
521
533
|
}], ctorParameters: () => [{ type: i1.ViewContentService }], propDecorators: { hostClasses: [{
|
|
522
534
|
type: HostBinding,
|
|
523
535
|
args: ['class']
|
|
@@ -777,7 +789,7 @@ class WidgetLayoutService {
|
|
|
777
789
|
this._widgetsWithExternalData$,
|
|
778
790
|
this._widgetsWithExternalDataReady$,
|
|
779
791
|
this._containerWidth$,
|
|
780
|
-
]).pipe(map(([widgetDataLoaded, widgets, widgetsWithExternalData, widgetsWithExternalDataReady]) => widgetDataLoaded?.length
|
|
792
|
+
]).pipe(map(([widgetDataLoaded, widgets, widgetsWithExternalData, widgetsWithExternalDataReady]) => (widgetDataLoaded?.length >= 1 || widgets.length === 0) &&
|
|
781
793
|
widgetsWithExternalData.length === widgetsWithExternalDataReady.length), filter$1(loaded => !!loaded));
|
|
782
794
|
}
|
|
783
795
|
constructor() {
|
|
@@ -992,11 +1004,13 @@ class WidgetCollectionComponent {
|
|
|
992
1004
|
this.hostClasses = `valtimo-widget-collection ${value.isCompact ? 'valtimo-widget-collection--compact' : ''}`;
|
|
993
1005
|
}
|
|
994
1006
|
get widgetData$() {
|
|
995
|
-
return this._widgetData$.
|
|
1007
|
+
return this._widgetData$.asObservable();
|
|
996
1008
|
}
|
|
997
1009
|
set widgetData(value) {
|
|
998
|
-
if (!value)
|
|
1010
|
+
if (!value) {
|
|
1011
|
+
this._widgetData$.next(null);
|
|
999
1012
|
return;
|
|
1013
|
+
}
|
|
1000
1014
|
if (!this._initialNumberOfElements)
|
|
1001
1015
|
this._initialNumberOfElements = value.numberOfElements;
|
|
1002
1016
|
let widgetData = value;
|
|
@@ -1042,20 +1056,38 @@ class WidgetCollectionComponent {
|
|
|
1042
1056
|
this.widgetConfiguration$ = new BehaviorSubject(null);
|
|
1043
1057
|
this.paginationModel = signal(new PaginationModel());
|
|
1044
1058
|
this.amountOfColumns = signal(0);
|
|
1045
|
-
this.collectionWidgetCards$ = combineLatest([this.widgetConfiguration$, this.widgetData$]).pipe(filter$1(([widgetConfig
|
|
1059
|
+
this.collectionWidgetCards$ = combineLatest([this.widgetConfiguration$, this.widgetData$]).pipe(filter$1(([widgetConfig]) => !!widgetConfig), tap(([widgetConfig]) => {
|
|
1046
1060
|
this.$widgetTitle.set(widgetConfig.title);
|
|
1047
|
-
}), map(([widgetConfig, widgetData]) =>
|
|
1048
|
-
|
|
1049
|
-
|
|
1050
|
-
|
|
1051
|
-
|
|
1052
|
-
|
|
1053
|
-
|
|
1054
|
-
|
|
1055
|
-
|
|
1056
|
-
|
|
1057
|
-
|
|
1058
|
-
|
|
1061
|
+
}), map(([widgetConfig, widgetData]) => {
|
|
1062
|
+
if (!widgetData) {
|
|
1063
|
+
return new Array(widgetConfig?.properties?.defaultPageSize || 0)
|
|
1064
|
+
.fill(null)
|
|
1065
|
+
.map((_, index) => ({
|
|
1066
|
+
hidden: false,
|
|
1067
|
+
key: index,
|
|
1068
|
+
title: '',
|
|
1069
|
+
fields: widgetConfig?.properties.fields.map(field => ({
|
|
1070
|
+
key: field.key,
|
|
1071
|
+
title: field.title,
|
|
1072
|
+
width: field.width,
|
|
1073
|
+
value: null,
|
|
1074
|
+
hideWhenEmpty: false,
|
|
1075
|
+
})),
|
|
1076
|
+
}));
|
|
1077
|
+
}
|
|
1078
|
+
return widgetData.content.map((cardData, index) => ({
|
|
1079
|
+
hidden: cardData.hidden,
|
|
1080
|
+
key: index,
|
|
1081
|
+
title: this.getCardTitle({
|
|
1082
|
+
value: cardData.title,
|
|
1083
|
+
displayProperties: widgetConfig?.properties?.title?.displayProperties,
|
|
1084
|
+
}),
|
|
1085
|
+
fields: widgetConfig?.properties.fields.reduce((cardFieldsAccumulator, currentField) => [
|
|
1086
|
+
...cardFieldsAccumulator,
|
|
1087
|
+
this.getCardField(currentField, cardData),
|
|
1088
|
+
], []),
|
|
1089
|
+
}));
|
|
1090
|
+
}), tap(card => this.checkEmptyFields(card)));
|
|
1059
1091
|
}
|
|
1060
1092
|
ngAfterViewInit() {
|
|
1061
1093
|
this.openWidthObserver();
|
|
@@ -1120,15 +1152,18 @@ class WidgetCollectionComponent {
|
|
|
1120
1152
|
return '-';
|
|
1121
1153
|
}
|
|
1122
1154
|
checkEmptyFields(card) {
|
|
1155
|
+
this.noVisibleFields$.next(true);
|
|
1123
1156
|
card.forEach(collection => {
|
|
1124
1157
|
collection.fields.forEach(field => {
|
|
1125
|
-
if (
|
|
1158
|
+
if (field.value === null ||
|
|
1159
|
+
!field.hideWhenEmpty ||
|
|
1160
|
+
(field.hideWhenEmpty && field.value && field.value !== '-'))
|
|
1126
1161
|
this.noVisibleFields$.next(false);
|
|
1127
1162
|
});
|
|
1128
1163
|
});
|
|
1129
1164
|
}
|
|
1130
1165
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: WidgetCollectionComponent, deps: [{ token: i1.ViewContentService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1131
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", 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\"
|
|
1166
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", 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 <cds-pagination-nav\n *ngIf=\"paginationModel() && (showPagination$ | async)\"\n class=\"valtimo-widget-collection__pagination\"\n [model]=\"paginationModel()\"\n (selectPage)=\"onSelectPage($event)\"\n >\n </cds-pagination-nav>\n</ng-container>\n", styles: [".valtimo-widget-collection{padding:24px}.valtimo-widget-collection .cds--label{overflow:hidden;text-overflow:ellipsis;width:100%}.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{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(--cds-background);padding:16px;width:100%;gap:16px}.valtimo-widget-collection__card-title{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}.valtimo-widget-collection__render-vertically,.valtimo-widget-collection__render-two-columns,.valtimo-widget-collection__render-three-columns{grid-gap:16px;align-items:stretch;overflow:hidden;text-overflow:ellipsis;width:100%}.valtimo-widget-collection__render-vertically{display:flex!important}.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-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"], 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 }); }
|
|
1132
1167
|
}
|
|
1133
1168
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: WidgetCollectionComponent, decorators: [{
|
|
1134
1169
|
type: Component,
|
|
@@ -1142,7 +1177,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
|
|
|
1142
1177
|
ButtonModule,
|
|
1143
1178
|
WidgetActionButtonComponent,
|
|
1144
1179
|
MdiIconViewerComponent,
|
|
1145
|
-
|
|
1180
|
+
SkeletonModule,
|
|
1181
|
+
], 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 <cds-pagination-nav\n *ngIf=\"paginationModel() && (showPagination$ | async)\"\n class=\"valtimo-widget-collection__pagination\"\n [model]=\"paginationModel()\"\n (selectPage)=\"onSelectPage($event)\"\n >\n </cds-pagination-nav>\n</ng-container>\n", styles: [".valtimo-widget-collection{padding:24px}.valtimo-widget-collection .cds--label{overflow:hidden;text-overflow:ellipsis;width:100%}.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{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(--cds-background);padding:16px;width:100%;gap:16px}.valtimo-widget-collection__card-title{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}.valtimo-widget-collection__render-vertically,.valtimo-widget-collection__render-two-columns,.valtimo-widget-collection__render-three-columns{grid-gap:16px;align-items:stretch;overflow:hidden;text-overflow:ellipsis;width:100%}.valtimo-widget-collection__render-vertically{display:flex!important}.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-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"] }]
|
|
1146
1182
|
}], ctorParameters: () => [{ type: i1.ViewContentService }, { type: i0.ChangeDetectorRef }], propDecorators: { hostClasses: [{
|
|
1147
1183
|
type: HostBinding,
|
|
1148
1184
|
args: ['class']
|
|
@@ -1218,8 +1254,10 @@ class WidgetTableComponent {
|
|
|
1218
1254
|
this.cdr.detectChanges();
|
|
1219
1255
|
}
|
|
1220
1256
|
set widgetData(value) {
|
|
1221
|
-
if (!value)
|
|
1257
|
+
if (!value) {
|
|
1258
|
+
this.widgetData$.next(null);
|
|
1222
1259
|
return;
|
|
1260
|
+
}
|
|
1223
1261
|
this.$showPagination.set(value.totalElements > value.size);
|
|
1224
1262
|
if (!this._initialNumberOfElements)
|
|
1225
1263
|
this._initialNumberOfElements = value.numberOfElements;
|
|
@@ -1270,7 +1308,7 @@ class WidgetTableComponent {
|
|
|
1270
1308
|
this.paginationEvent.emit({ ...paginationModel, currentPage: page });
|
|
1271
1309
|
}
|
|
1272
1310
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: WidgetTableComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1273
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: WidgetTableComponent, isStandalone: true, selector: "valtimo-widget-table", inputs: { widgetConfiguration: "widgetConfiguration", widgetData: "widgetData" }, outputs: { paginationEvent: "paginationEvent" }, 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<cds-tile\n *ngIf=\"{\n fields: fields$ | async,\n widgetData: widgetData$ | async,\n resolvedData: resolvedData$ | async,\n } as obs\"\n class=\"valtimo-widget-table\"\n [class.valtimo-widget-table--compact]=\"widgetConfiguration?.isCompact\"\n>\n <section class=\"valtimo-widget-table__header\">\n <div class=\"valtimo-widget-table__title-container\">\n <valtimo-mdi-icon-viewer\n *ngIf=\"widgetConfiguration?.icon\"\n [mdiIcon]=\"widgetConfiguration.icon\"\n ></valtimo-mdi-icon-viewer>\n\n <span class=\"widget-title\">{{ widgetConfiguration?.title }}</span>\n </div>\n\n <ng-content></ng-content>\n\n <valtimo-widget-action-button\n [widgetConfiguration]=\"widgetConfiguration\"\n [resolvedData]=\"obs.resolvedData\"\n ></valtimo-widget-action-button>\n </section>\n\n @if (obs.
|
|
1311
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: WidgetTableComponent, isStandalone: true, selector: "valtimo-widget-table", inputs: { widgetConfiguration: "widgetConfiguration", widgetData: "widgetData" }, outputs: { paginationEvent: "paginationEvent" }, 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<cds-tile\n *ngIf=\"{\n fields: fields$ | async,\n widgetData: widgetData$ | async,\n resolvedData: resolvedData$ | async,\n } as obs\"\n class=\"valtimo-widget-table\"\n [class.valtimo-widget-table--compact]=\"widgetConfiguration?.isCompact\"\n>\n <section class=\"valtimo-widget-table__header\">\n <div class=\"valtimo-widget-table__title-container\">\n <valtimo-mdi-icon-viewer\n *ngIf=\"widgetConfiguration?.icon\"\n [mdiIcon]=\"widgetConfiguration.icon\"\n ></valtimo-mdi-icon-viewer>\n\n <span class=\"widget-title\">{{ widgetConfiguration?.title }}</span>\n </div>\n\n <ng-content></ng-content>\n\n <valtimo-widget-action-button\n [widgetConfiguration]=\"widgetConfiguration\"\n [resolvedData]=\"obs.resolvedData\"\n ></valtimo-widget-action-button>\n </section>\n\n @if (obs.fields && (obs.widgetData === null || obs.widgetData.length > 0)) {\n <section class=\"valtimo-widget-table__content\">\n <valtimo-carbon-list\n [header]=\"false\"\n [hideToolbar]=\"true\"\n [fields]=\"obs.fields\"\n [items]=\"obs.widgetData || []\"\n [loading]=\"obs.widgetData === null\"\n >\n </valtimo-carbon-list>\n\n <cds-pagination-nav\n *ngIf=\"$paginationModel() && $showPagination()\"\n class=\"valtimo-widget-table__pagination\"\n [model]=\"$paginationModel()\"\n (selectPage)=\"onSelectPage($event)\"\n >\n </cds-pagination-nav>\n </section>\n } @else if (obs.widgetData !== null) {\n <valtimo-no-results\n [collapseVertically]=\"true\"\n [description]=\"'widgets.noData' | translate\"\n [smallPadding]=\"true\"\n ></valtimo-no-results>\n }\n</cds-tile>\n", styles: [".valtimo-widget-table{padding:24px;display:flex;flex-direction:column;gap:16px}.valtimo-widget-table__header{display:flex;align-items:center;justify-content:space-between}.valtimo-widget-table__title-container{display:flex;align-items:center;gap:8px}.valtimo-widget-table__content{display:flex;align-items:center;flex-direction:column}.valtimo-widget-table__content valtimo-carbon-list{width:100%}.valtimo-widget-table__pagination{padding:8px 0}.valtimo-widget-table .cds--data-table>thead{background:transparent!important}.valtimo-widget-table .cds--data-table td,.valtimo-widget-table .cds--data-table tr,.valtimo-widget-table .cds--data-table th{display:flex;width:100%}.valtimo-widget-table .cds--data-table td{white-space:nowrap;overflow:hidden}.valtimo-widget-table .cds--data-table td span{text-overflow:ellipsis;overflow:hidden}.valtimo-widget-table .cds--data-table tr{gap:16px}.valtimo-widget-table--compact .cds--data-table tr{gap:12px;height:32px}.valtimo-widget-table .cds--table-header-label>span{font-weight:400;font-size:12px;color:var(--cds-text-secondary)}.valtimo-widget-table--transparent{background:transparent!important}.valtimo-widget-table--compact .valtimo-widget-table--transparent{border:none!important}.valtimo-widget-table--title{font-style:italic}.valtimo-widget-table .widget-title{color:var(--cds-text-primary);font-weight:600;font-size:16px;line-height:24px}\n/*!\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"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: CarbonListModule }, { kind: "component", type: i1.CarbonListComponent, selector: "valtimo-carbon-list", inputs: ["items", "fields", "tableTranslations", "paginatorConfig", "pagination", "loading", "actions", "actionItems", "showActionItems", "header", "hideColumnHeader", "initialSortState", "sortState", "isSearchable", "enableSingleSelection", "lastColumnTemplate", "paginationIdentifier", "showSelectionColumn", "striped", "hideToolbar", "lockedTooltipTranslationKey", "movingRowsEnabled", "dragAndDrop", "dragAndDropDisabled"], outputs: ["rowClicked", "paginationClicked", "paginationSet", "search", "sortChanged", "moveRow", "itemsReordered"] }, { kind: "component", type: i1.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title", "smallPadding", "collapseVertically", "alwaysRenderVertically"] }, { 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: "component", type: i3.Tile, selector: "cds-tile, ibm-tile", inputs: ["theme"] }, { 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 }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1274
1312
|
}
|
|
1275
1313
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: WidgetTableComponent, decorators: [{
|
|
1276
1314
|
type: Component,
|
|
@@ -1283,7 +1321,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
|
|
|
1283
1321
|
ButtonModule,
|
|
1284
1322
|
WidgetActionButtonComponent,
|
|
1285
1323
|
MdiIconViewerComponent,
|
|
1286
|
-
|
|
1324
|
+
SkeletonModule,
|
|
1325
|
+
], 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<cds-tile\n *ngIf=\"{\n fields: fields$ | async,\n widgetData: widgetData$ | async,\n resolvedData: resolvedData$ | async,\n } as obs\"\n class=\"valtimo-widget-table\"\n [class.valtimo-widget-table--compact]=\"widgetConfiguration?.isCompact\"\n>\n <section class=\"valtimo-widget-table__header\">\n <div class=\"valtimo-widget-table__title-container\">\n <valtimo-mdi-icon-viewer\n *ngIf=\"widgetConfiguration?.icon\"\n [mdiIcon]=\"widgetConfiguration.icon\"\n ></valtimo-mdi-icon-viewer>\n\n <span class=\"widget-title\">{{ widgetConfiguration?.title }}</span>\n </div>\n\n <ng-content></ng-content>\n\n <valtimo-widget-action-button\n [widgetConfiguration]=\"widgetConfiguration\"\n [resolvedData]=\"obs.resolvedData\"\n ></valtimo-widget-action-button>\n </section>\n\n @if (obs.fields && (obs.widgetData === null || obs.widgetData.length > 0)) {\n <section class=\"valtimo-widget-table__content\">\n <valtimo-carbon-list\n [header]=\"false\"\n [hideToolbar]=\"true\"\n [fields]=\"obs.fields\"\n [items]=\"obs.widgetData || []\"\n [loading]=\"obs.widgetData === null\"\n >\n </valtimo-carbon-list>\n\n <cds-pagination-nav\n *ngIf=\"$paginationModel() && $showPagination()\"\n class=\"valtimo-widget-table__pagination\"\n [model]=\"$paginationModel()\"\n (selectPage)=\"onSelectPage($event)\"\n >\n </cds-pagination-nav>\n </section>\n } @else if (obs.widgetData !== null) {\n <valtimo-no-results\n [collapseVertically]=\"true\"\n [description]=\"'widgets.noData' | translate\"\n [smallPadding]=\"true\"\n ></valtimo-no-results>\n }\n</cds-tile>\n", styles: [".valtimo-widget-table{padding:24px;display:flex;flex-direction:column;gap:16px}.valtimo-widget-table__header{display:flex;align-items:center;justify-content:space-between}.valtimo-widget-table__title-container{display:flex;align-items:center;gap:8px}.valtimo-widget-table__content{display:flex;align-items:center;flex-direction:column}.valtimo-widget-table__content valtimo-carbon-list{width:100%}.valtimo-widget-table__pagination{padding:8px 0}.valtimo-widget-table .cds--data-table>thead{background:transparent!important}.valtimo-widget-table .cds--data-table td,.valtimo-widget-table .cds--data-table tr,.valtimo-widget-table .cds--data-table th{display:flex;width:100%}.valtimo-widget-table .cds--data-table td{white-space:nowrap;overflow:hidden}.valtimo-widget-table .cds--data-table td span{text-overflow:ellipsis;overflow:hidden}.valtimo-widget-table .cds--data-table tr{gap:16px}.valtimo-widget-table--compact .cds--data-table tr{gap:12px;height:32px}.valtimo-widget-table .cds--table-header-label>span{font-weight:400;font-size:12px;color:var(--cds-text-secondary)}.valtimo-widget-table--transparent{background:transparent!important}.valtimo-widget-table--compact .valtimo-widget-table--transparent{border:none!important}.valtimo-widget-table--title{font-style:italic}.valtimo-widget-table .widget-title{color:var(--cds-text-primary);font-weight:600;font-size:16px;line-height:24px}\n/*!\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"] }]
|
|
1287
1326
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { widgetConfiguration: [{
|
|
1288
1327
|
type: Input,
|
|
1289
1328
|
args: [{ required: true }]
|
|
@@ -1310,6 +1349,120 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
|
|
|
1310
1349
|
* limitations under the License.
|
|
1311
1350
|
*/
|
|
1312
1351
|
|
|
1352
|
+
/*
|
|
1353
|
+
* Copyright 2015-2025 Ritense BV, the Netherlands.
|
|
1354
|
+
*
|
|
1355
|
+
* Licensed under EUPL, Version 1.2 (the "License");
|
|
1356
|
+
* you may not use this file except in compliance with the License.
|
|
1357
|
+
* You may obtain a copy of the License at
|
|
1358
|
+
*
|
|
1359
|
+
* https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
|
|
1360
|
+
*
|
|
1361
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
1362
|
+
* distributed under the License is distributed on an "AS IS" basis,
|
|
1363
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
1364
|
+
* See the License for the specific language governing permissions and
|
|
1365
|
+
* limitations under the License.
|
|
1366
|
+
*/
|
|
1367
|
+
class WidgetInteractiveTableSearchComponent {
|
|
1368
|
+
set initSearchRequest(value) {
|
|
1369
|
+
this._initSearchRequest = value ?? {};
|
|
1370
|
+
this.setInitialForm();
|
|
1371
|
+
}
|
|
1372
|
+
set filters(value) {
|
|
1373
|
+
this._filters = value ?? [];
|
|
1374
|
+
this.buildFiltersFormControls();
|
|
1375
|
+
this.setInitialForm();
|
|
1376
|
+
}
|
|
1377
|
+
get filters() {
|
|
1378
|
+
return this._filters;
|
|
1379
|
+
}
|
|
1380
|
+
get filtersFormGroup() {
|
|
1381
|
+
return this.formGroup.get('filters');
|
|
1382
|
+
}
|
|
1383
|
+
constructor(cdsThemeService, fb, iconService) {
|
|
1384
|
+
this.cdsThemeService = cdsThemeService;
|
|
1385
|
+
this.fb = fb;
|
|
1386
|
+
this.iconService = iconService;
|
|
1387
|
+
this._initSearchRequest = {};
|
|
1388
|
+
this._filters = [];
|
|
1389
|
+
this.searchSubmitEvent = new EventEmitter();
|
|
1390
|
+
this.theme$ = this.cdsThemeService.currentTheme$.pipe(map((theme) => theme === CurrentCarbonTheme.G10 ? CARBON_THEME.WHITE : CARBON_THEME.G100));
|
|
1391
|
+
this.formGroup = this.fb.group({
|
|
1392
|
+
filters: this.fb.group({}),
|
|
1393
|
+
});
|
|
1394
|
+
this._subscriptions = new Subscription();
|
|
1395
|
+
this.iconService.register(TrashCan16);
|
|
1396
|
+
}
|
|
1397
|
+
ngOnInit() {
|
|
1398
|
+
this.buildFiltersFormControls();
|
|
1399
|
+
this.setInitialForm();
|
|
1400
|
+
this._subscriptions.add(this.filtersFormGroup.valueChanges.pipe(debounceTime(500)).subscribe(() => {
|
|
1401
|
+
this.searchSubmitEvent.emit(this.mapFormValueToWidgetInteractiveTableSearch());
|
|
1402
|
+
}));
|
|
1403
|
+
}
|
|
1404
|
+
ngOnDestroy() {
|
|
1405
|
+
this._subscriptions.unsubscribe();
|
|
1406
|
+
}
|
|
1407
|
+
onClearFilter() {
|
|
1408
|
+
this.filtersFormGroup.reset(this.getDefaultFilterValues());
|
|
1409
|
+
}
|
|
1410
|
+
buildFiltersFormControls() {
|
|
1411
|
+
this.filters.forEach((filter) => {
|
|
1412
|
+
if (!this.filtersFormGroup.get(filter.key)) {
|
|
1413
|
+
this.filtersFormGroup.addControl(filter.key, this.fb.control(''));
|
|
1414
|
+
}
|
|
1415
|
+
});
|
|
1416
|
+
}
|
|
1417
|
+
getDefaultFilterValues() {
|
|
1418
|
+
return Object.fromEntries(this.filters.map(filter => [filter.key, '']));
|
|
1419
|
+
}
|
|
1420
|
+
mapFormValueToWidgetInteractiveTableSearch() {
|
|
1421
|
+
const formValue = this.formGroup.getRawValue();
|
|
1422
|
+
const filters = {};
|
|
1423
|
+
for (const key in formValue.filters) {
|
|
1424
|
+
if (formValue.filters[key]) {
|
|
1425
|
+
filters[key] = formValue.filters[key];
|
|
1426
|
+
}
|
|
1427
|
+
}
|
|
1428
|
+
return {
|
|
1429
|
+
...(Object.keys(filters).length && { filters }),
|
|
1430
|
+
};
|
|
1431
|
+
}
|
|
1432
|
+
mapSearchRequestToFormValue(searchRequest) {
|
|
1433
|
+
return {
|
|
1434
|
+
...(searchRequest.filters && { filters: searchRequest.filters }),
|
|
1435
|
+
};
|
|
1436
|
+
}
|
|
1437
|
+
setInitialForm() {
|
|
1438
|
+
const mappedFormValue = this.mapSearchRequestToFormValue(this._initSearchRequest);
|
|
1439
|
+
this.filtersFormGroup.reset(this.getDefaultFilterValues(), { emitEvent: false });
|
|
1440
|
+
if (mappedFormValue.filters) {
|
|
1441
|
+
this.filtersFormGroup.patchValue(this.mapSearchRequestToFormValue(this._initSearchRequest).filters, { emitEvent: false });
|
|
1442
|
+
}
|
|
1443
|
+
}
|
|
1444
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: WidgetInteractiveTableSearchComponent, deps: [{ token: i1.CdsThemeService }, { token: i1$3.FormBuilder }, { token: i3.IconService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1445
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: WidgetInteractiveTableSearchComponent, isStandalone: true, selector: "valtimo-widget-interactive-table-search", inputs: { initSearchRequest: "initSearchRequest", filters: "filters" }, outputs: { searchSubmitEvent: "searchSubmitEvent" }, 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<form\n *ngIf=\"theme$ | async as theme\"\n class=\"valtimo-widget-interactive-table-search\"\n [formGroup]=\"formGroup\"\n (click)=\"$event.stopImmediatePropagation()\"\n>\n <section class=\"valtimo-widget-interactive-table-search__fields\" formGroupName=\"filters\">\n @for (filter of filters; track filter.key) {\n <cds-text-label class=\"valtimo-widget-interactive-table-search__filter-field\">\n {{ filter.title }}\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"theme\"\n [formControlName]=\"filter.key\"\n [placeholder]=\"filter.title\"\n />\n </cds-text-label>\n }\n </section>\n\n <button cdsButton=\"tertiary\" type=\"button\" (click)=\"onClearFilter()\">\n {{ 'interface.clear' | translate }}\n\n <svg class=\"cds--btn__icon\" cdsIcon=\"trash-can\" size=\"16\"></svg>\n </button>\n</form>\n", styles: [".valtimo-widget-interactive-table-search{display:flex;flex-direction:column;width:360px;padding:16px}.valtimo-widget-interactive-table-search__fields{display:grid;grid-template-columns:repeat(2,1fr);align-items:flex-end;margin-bottom:16px;gap:16px}.valtimo-widget-interactive-table-search__filter-field{width:100%;display:flex;flex-direction:column}.valtimo-widget-interactive-table-search__label{font-size:var(--cds-label-01-font-size);color:var(--cds-text-secondary)}::ng-deep .cds--overflow-menu-options.cds--overflow-menu-options--open{max-width:max-content!important;width:max-content!important}\n/*!\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"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "ngmodule", type: IconModule }, { kind: "directive", type: i3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i3.TextInputLabelComponent, selector: "cds-text-label, ibm-text-label", inputs: ["labelInputID", "disabled", "skeleton", "labelTemplate", "textInputTemplate", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel", "fluid"] }, { kind: "directive", type: i3.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$3.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "ngmodule", type: FormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1446
|
+
}
|
|
1447
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: WidgetInteractiveTableSearchComponent, decorators: [{
|
|
1448
|
+
type: Component,
|
|
1449
|
+
args: [{ selector: 'valtimo-widget-interactive-table-search', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
|
|
1450
|
+
CommonModule,
|
|
1451
|
+
TranslateModule,
|
|
1452
|
+
ButtonModule,
|
|
1453
|
+
IconModule,
|
|
1454
|
+
InputModule,
|
|
1455
|
+
ReactiveFormsModule,
|
|
1456
|
+
FormsModule,
|
|
1457
|
+
], 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<form\n *ngIf=\"theme$ | async as theme\"\n class=\"valtimo-widget-interactive-table-search\"\n [formGroup]=\"formGroup\"\n (click)=\"$event.stopImmediatePropagation()\"\n>\n <section class=\"valtimo-widget-interactive-table-search__fields\" formGroupName=\"filters\">\n @for (filter of filters; track filter.key) {\n <cds-text-label class=\"valtimo-widget-interactive-table-search__filter-field\">\n {{ filter.title }}\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"theme\"\n [formControlName]=\"filter.key\"\n [placeholder]=\"filter.title\"\n />\n </cds-text-label>\n }\n </section>\n\n <button cdsButton=\"tertiary\" type=\"button\" (click)=\"onClearFilter()\">\n {{ 'interface.clear' | translate }}\n\n <svg class=\"cds--btn__icon\" cdsIcon=\"trash-can\" size=\"16\"></svg>\n </button>\n</form>\n", styles: [".valtimo-widget-interactive-table-search{display:flex;flex-direction:column;width:360px;padding:16px}.valtimo-widget-interactive-table-search__fields{display:grid;grid-template-columns:repeat(2,1fr);align-items:flex-end;margin-bottom:16px;gap:16px}.valtimo-widget-interactive-table-search__filter-field{width:100%;display:flex;flex-direction:column}.valtimo-widget-interactive-table-search__label{font-size:var(--cds-label-01-font-size);color:var(--cds-text-secondary)}::ng-deep .cds--overflow-menu-options.cds--overflow-menu-options--open{max-width:max-content!important;width:max-content!important}\n/*!\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"] }]
|
|
1458
|
+
}], ctorParameters: () => [{ type: i1.CdsThemeService }, { type: i1$3.FormBuilder }, { type: i3.IconService }], propDecorators: { initSearchRequest: [{
|
|
1459
|
+
type: Input
|
|
1460
|
+
}], filters: [{
|
|
1461
|
+
type: Input
|
|
1462
|
+
}], searchSubmitEvent: [{
|
|
1463
|
+
type: Output
|
|
1464
|
+
}] } });
|
|
1465
|
+
|
|
1313
1466
|
/*
|
|
1314
1467
|
* Copyright 2015-2025 Ritense BV, the Netherlands.
|
|
1315
1468
|
*
|
|
@@ -1331,31 +1484,49 @@ class WidgetInteractiveTableComponent {
|
|
|
1331
1484
|
}
|
|
1332
1485
|
set widgetConfiguration(value) {
|
|
1333
1486
|
this._widgetConfiguration = value;
|
|
1334
|
-
this.
|
|
1335
|
-
|
|
1336
|
-
|
|
1337
|
-
|
|
1338
|
-
|
|
1339
|
-
|
|
1340
|
-
|
|
1341
|
-
|
|
1342
|
-
|
|
1343
|
-
|
|
1344
|
-
|
|
1345
|
-
|
|
1346
|
-
}
|
|
1347
|
-
|
|
1348
|
-
|
|
1349
|
-
|
|
1350
|
-
|
|
1351
|
-
|
|
1352
|
-
|
|
1353
|
-
|
|
1487
|
+
this.filters$.next(value?.properties?.filters ?? []);
|
|
1488
|
+
this.fields$.next(value.properties.columns.map((column, index) => {
|
|
1489
|
+
if (column.sortable && !!column.defaultSort && !this._sortInitialized) {
|
|
1490
|
+
this.$initialSortState.set({
|
|
1491
|
+
isSorting: true,
|
|
1492
|
+
state: {
|
|
1493
|
+
direction: column.defaultSort,
|
|
1494
|
+
name: `data.${column.key}`,
|
|
1495
|
+
},
|
|
1496
|
+
});
|
|
1497
|
+
this.$sort.set(this.$initialSortState());
|
|
1498
|
+
this._sortInitialized = true;
|
|
1499
|
+
}
|
|
1500
|
+
return {
|
|
1501
|
+
key: `data.${column.key}`,
|
|
1502
|
+
label: column.title,
|
|
1503
|
+
sortable: column.sortable,
|
|
1504
|
+
default: column.defaultSort,
|
|
1505
|
+
viewType: column.displayProperties?.type ?? ViewType.TEXT,
|
|
1506
|
+
...(!!column.displayProperties?.['format'] && {
|
|
1507
|
+
format: column.displayProperties['format'],
|
|
1508
|
+
}),
|
|
1509
|
+
...(!!column.displayProperties?.['digitsInfo'] && {
|
|
1510
|
+
digitsInfo: column.displayProperties['digitsInfo'],
|
|
1511
|
+
}),
|
|
1512
|
+
...(!!column.displayProperties?.['display'] && {
|
|
1513
|
+
display: column.displayProperties['display'],
|
|
1514
|
+
}),
|
|
1515
|
+
...(!!column.displayProperties?.['currencyCode'] && {
|
|
1516
|
+
currencyCode: column.displayProperties['currencyCode'],
|
|
1517
|
+
}),
|
|
1518
|
+
...(!!column.displayProperties?.['values'] && {
|
|
1519
|
+
values: column.displayProperties['values'],
|
|
1520
|
+
}),
|
|
1521
|
+
};
|
|
1522
|
+
}));
|
|
1354
1523
|
this.cdr.detectChanges();
|
|
1355
1524
|
}
|
|
1356
1525
|
set widgetData(value) {
|
|
1357
|
-
if (!value)
|
|
1526
|
+
if (!value) {
|
|
1527
|
+
this.widgetData$.next(null);
|
|
1358
1528
|
return;
|
|
1529
|
+
}
|
|
1359
1530
|
this.$showPagination.set(value.totalElements > value.size);
|
|
1360
1531
|
if (!this._initialNumberOfElements)
|
|
1361
1532
|
this._initialNumberOfElements = value.numberOfElements;
|
|
@@ -1377,7 +1548,7 @@ class WidgetInteractiveTableComponent {
|
|
|
1377
1548
|
? null
|
|
1378
1549
|
: {
|
|
1379
1550
|
page: 1,
|
|
1380
|
-
collectionSize:
|
|
1551
|
+
collectionSize: widgetPage.totalElements,
|
|
1381
1552
|
size: widgetPage.size,
|
|
1382
1553
|
});
|
|
1383
1554
|
this._paginationInitialized = true;
|
|
@@ -1387,17 +1558,29 @@ class WidgetInteractiveTableComponent {
|
|
|
1387
1558
|
? null
|
|
1388
1559
|
: {
|
|
1389
1560
|
...model,
|
|
1390
|
-
collectionSize:
|
|
1561
|
+
collectionSize: widgetPage.totalElements,
|
|
1391
1562
|
currentPage: widgetPage.number + 1,
|
|
1392
1563
|
});
|
|
1393
1564
|
}
|
|
1394
1565
|
this.cdr.detectChanges();
|
|
1395
1566
|
}
|
|
1567
|
+
set searchRequest(value) {
|
|
1568
|
+
this._searchRequest = value ?? this._defaultSearchRequest;
|
|
1569
|
+
this.$searchRequest.set(this._searchRequest);
|
|
1570
|
+
}
|
|
1571
|
+
get searchRequest() {
|
|
1572
|
+
return this._searchRequest;
|
|
1573
|
+
}
|
|
1396
1574
|
constructor(cdr, documentService, iconService) {
|
|
1397
1575
|
this.cdr = cdr;
|
|
1398
1576
|
this.documentService = documentService;
|
|
1399
1577
|
this.iconService = iconService;
|
|
1400
1578
|
this.class = 'valtimo-widget-interactive-table';
|
|
1579
|
+
this._defaultSearchRequest = {};
|
|
1580
|
+
this._searchRequest = this._defaultSearchRequest;
|
|
1581
|
+
this._sortInitialized = false;
|
|
1582
|
+
this.$initialSortState = signal(null);
|
|
1583
|
+
this.filters$ = new BehaviorSubject([]);
|
|
1401
1584
|
this.$showPagination = signal(false);
|
|
1402
1585
|
this.widgetData$ = new BehaviorSubject(null);
|
|
1403
1586
|
this._paginationInitialized = false;
|
|
@@ -1405,14 +1588,36 @@ class WidgetInteractiveTableComponent {
|
|
|
1405
1588
|
this.rowClickEvent = new EventEmitter();
|
|
1406
1589
|
this.actionEvent = new EventEmitter();
|
|
1407
1590
|
this.caseStartEvent = new EventEmitter();
|
|
1591
|
+
this.queryParamsEvent = new EventEmitter();
|
|
1592
|
+
this.searchSubmitEvent = new EventEmitter();
|
|
1408
1593
|
this.fields$ = new BehaviorSubject([]);
|
|
1409
1594
|
this.caseDefinitions$ = this.documentService.getCaseDefinitions({ active: true });
|
|
1595
|
+
this.$searchRequest = signal({});
|
|
1596
|
+
this.$sort = signal(null);
|
|
1410
1597
|
this.$paginationModel = signal(null);
|
|
1411
1598
|
this.$paginatorConfig = signal({
|
|
1412
1599
|
itemsPerPageOptions: [5, 10, 20, 30],
|
|
1413
1600
|
showPageInput: true,
|
|
1414
1601
|
});
|
|
1415
|
-
this.iconService.
|
|
1602
|
+
this.iconService.registerAll([Filter16, Link16]);
|
|
1603
|
+
effect(() => {
|
|
1604
|
+
const paginationModel = this.$paginationModel();
|
|
1605
|
+
const sort = this.$sort();
|
|
1606
|
+
const searchRequest = this.$searchRequest();
|
|
1607
|
+
const paramsObject = {
|
|
1608
|
+
...(!!paginationModel && {
|
|
1609
|
+
size: paginationModel.size,
|
|
1610
|
+
collectionSize: paginationModel.collectionSize,
|
|
1611
|
+
page: paginationModel.page - 1,
|
|
1612
|
+
}),
|
|
1613
|
+
...(!!sort &&
|
|
1614
|
+
sort.isSorting && {
|
|
1615
|
+
sort: `${sort.state.name},${sort.state.direction}`,
|
|
1616
|
+
}),
|
|
1617
|
+
...(searchRequest.filters ?? {}),
|
|
1618
|
+
};
|
|
1619
|
+
this.queryParamsEvent.emit(new HttpParams({ fromObject: paramsObject }));
|
|
1620
|
+
});
|
|
1416
1621
|
}
|
|
1417
1622
|
onActionClick(action) {
|
|
1418
1623
|
this.actionEvent.emit(action);
|
|
@@ -1424,13 +1629,37 @@ class WidgetInteractiveTableComponent {
|
|
|
1424
1629
|
const paginationModel = this.$paginationModel();
|
|
1425
1630
|
if (!paginationModel)
|
|
1426
1631
|
return;
|
|
1427
|
-
this.
|
|
1632
|
+
this.$paginationModel.set({
|
|
1633
|
+
...paginationModel,
|
|
1634
|
+
page,
|
|
1635
|
+
});
|
|
1636
|
+
}
|
|
1637
|
+
onPaginationSet(size) {
|
|
1638
|
+
const paginationModel = this.$paginationModel();
|
|
1639
|
+
if (!paginationModel)
|
|
1640
|
+
return;
|
|
1641
|
+
this.$paginationModel.set({
|
|
1642
|
+
...paginationModel,
|
|
1643
|
+
size,
|
|
1644
|
+
});
|
|
1645
|
+
}
|
|
1646
|
+
onSortChanged(sortState) {
|
|
1647
|
+
this.$sort.set(sortState);
|
|
1428
1648
|
}
|
|
1429
1649
|
rowClick(event) {
|
|
1430
1650
|
this.rowClickEvent.emit(event);
|
|
1431
1651
|
}
|
|
1652
|
+
onSearchSubmit(searchRequest) {
|
|
1653
|
+
this._searchRequest = searchRequest;
|
|
1654
|
+
this.$searchRequest.set(searchRequest);
|
|
1655
|
+
const paginationModel = this.$paginationModel();
|
|
1656
|
+
if (paginationModel) {
|
|
1657
|
+
this.$paginationModel.set({ ...paginationModel, page: 1 });
|
|
1658
|
+
}
|
|
1659
|
+
this.searchSubmitEvent.emit(searchRequest);
|
|
1660
|
+
}
|
|
1432
1661
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: WidgetInteractiveTableComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i2$2.DocumentService }, { token: i3.IconService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1433
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: WidgetInteractiveTableComponent, isStandalone: true, selector: "valtimo-widget-interactive-table", inputs: { widgetConfiguration: "widgetConfiguration", widgetData: "widgetData" }, outputs: { paginationEvent: "paginationEvent", rowClickEvent: "rowClickEvent", actionEvent: "actionEvent", caseStartEvent: "caseStartEvent" }, host: { properties: { "class": "this.class" } }, 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 fields: fields$ | async,\n widgetData: widgetData$ | async,\n caseDefinitions: caseDefinitions$ | async,\n } as obs\"\n>\n <div class=\"valtimo-widget-interactive-table__title-container\">\n <valtimo-mdi-icon-viewer\n *ngIf=\"widgetConfiguration?.icon\"\n [mdiIcon]=\"widgetConfiguration.icon\"\n ></valtimo-mdi-icon-viewer>\n\n <span class=\"widget-title\">{{ widgetConfiguration?.title }}</span>\n </div>\n\n <valtimo-carbon-list\n [header]=\"false\"\n [fields]=\"obs.fields\"\n [items]=\"obs.widgetData\"\n [pagination]=\"$paginationModel()\"\n [paginatorConfig]=\"$paginatorConfig()\"\n (paginationClicked)=\"onPaginationClicked($event)\"\n (rowClicked)=\"rowClick($event)\"\n >\n <section class=\"valtimo-widget-interactive-table__header\" carbonToolbarContent>\n <cds-overflow-menu\n *ngIf=\"!!widgetConfiguration?.actions?.length\"\n [customTrigger]=\"externalLinkTrigger\"\n placement=\"bottom\"\n flip=\"true\"\n [offset]=\"{x: 4, y: 44}\"\n >\n @for (action of widgetConfiguration?.actions; track action.name) {\n <cds-overflow-menu-option (click)=\"onActionClick(action)\">\n {{ action.name }}\n </cds-overflow-menu-option>\n }\n </cds-overflow-menu>\n\n <cds-menu-button\n *ngIf=\"widgetConfiguration?.properties?.canStartCase\"\n [label]=\"'Start Case' | translate\"\n >\n @for (definition of obs.caseDefinitions; track definition.caseDefinitionKey) {\n <cds-menu-item\n [label]=\"definition.name\"\n (click)=\"onCaseStart(definition)\"\n ></cds-menu-item>\n }\n </cds-menu-button>\n </section>\n\n <valtimo-no-results\n [collapseVertically]=\"true\"\n [description]=\"'widgets.noData' | translate\"\n [smallPadding]=\"true\"\n ></valtimo-no-results>\n </valtimo-carbon-list>\n\n <ng-template #externalLinkTrigger>\n <button cdsButton=\"ghost\" iconOnly=\"true\">\n <svg cdsIcon=\"link\" size=\"16\"></svg>\n </button>\n </ng-template>\n</ng-container>\n", styles: [".valtimo-widget-interactive-table{display:flex;flex-direction:column;height:100%}.valtimo-widget-interactive-table__header{display:flex;align-items:center;justify-content:flex-end;width:100%}.valtimo-widget-interactive-table__title-container{display:flex;align-items:center;gap:8px;padding:12px 0 0 16px}.valtimo-widget-interactive-table__content{display:flex;align-items:center;flex-direction:column}.valtimo-widget-interactive-table valtimo-carbon-list,.valtimo-widget-interactive-table cds-table-container{width:100%;height:100%}.valtimo-widget-interactive-table cds-table{height:calc(100% - 88px)}.valtimo-widget-interactive-table .widget-title{color:var(--cds-text-primary);font-weight:600;font-size:16px;line-height:24px}.cds--menu-item__label{overflow:unset!important}\n/*!\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"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: CarbonListModule }, { kind: "component", type: i1.CarbonListComponent, selector: "valtimo-carbon-list", inputs: ["items", "fields", "tableTranslations", "paginatorConfig", "pagination", "loading", "actions", "actionItems", "showActionItems", "header", "hideColumnHeader", "initialSortState", "sortState", "isSearchable", "enableSingleSelection", "lastColumnTemplate", "paginationIdentifier", "showSelectionColumn", "striped", "hideToolbar", "lockedTooltipTranslationKey", "movingRowsEnabled", "dragAndDrop", "dragAndDropDisabled"], outputs: ["rowClicked", "paginationClicked", "paginationSet", "search", "sortChanged", "moveRow", "itemsReordered"] }, { kind: "component", type: i1.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title", "smallPadding", "collapseVertically", "alwaysRenderVertically"] }, { kind: "ngmodule", type: PaginationModule }, { kind: "ngmodule", type: TilesModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i3.OverflowMenu, selector: "cds-overflow-menu, ibm-overflow-menu", inputs: ["buttonLabel", "description", "flip", "placement", "open", "customTrigger", "offset", "wrapperClass", "triggerClass"], outputs: ["openChange"] }, { kind: "component", type: i3.OverflowMenuOption, selector: "cds-overflow-menu-option, ibm-overflow-menu-option", inputs: ["divider", "type", "disabled", "href", "target", "innerClass"], outputs: ["selected"] }, { kind: "ngmodule", type: MenuButtonModule }, { kind: "component", type: i3.MenuButtonComponent, selector: "cds-menu-button", inputs: ["menuId", "kind", "size", "menuAlignment", "buttonTabIndex", "disabled", "open", "label"] }, { kind: "ngmodule", type: ContextMenuModule }, { kind: "component", type: i3.ContextMenuItemComponent, selector: "cds-menu-item, cds-context-menu-item, ibm-context-menu-item", inputs: ["disabled", "danger", "label", "info", "type", "checked", "icon", "value"], outputs: ["checkedChange", "itemClick"] }, { kind: "ngmodule", type: IconModule }, { kind: "directive", type: i3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: MdiIconViewerComponent, selector: "valtimo-mdi-icon-viewer", inputs: ["mdiIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1662
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: WidgetInteractiveTableComponent, isStandalone: true, selector: "valtimo-widget-interactive-table", inputs: { widgetConfiguration: "widgetConfiguration", widgetData: "widgetData", searchRequest: "searchRequest" }, outputs: { paginationEvent: "paginationEvent", rowClickEvent: "rowClickEvent", actionEvent: "actionEvent", caseStartEvent: "caseStartEvent", queryParamsEvent: "queryParamsEvent", searchSubmitEvent: "searchSubmitEvent" }, host: { properties: { "class": "this.class" } }, 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 fields: fields$ | async,\n widgetData: widgetData$ | async,\n caseDefinitions: caseDefinitions$ | async,\n filters: filters$ | async,\n } as obs\"\n>\n <div class=\"valtimo-widget-interactive-table__title-container\">\n <valtimo-mdi-icon-viewer\n *ngIf=\"widgetConfiguration?.icon\"\n [mdiIcon]=\"widgetConfiguration.icon\"\n ></valtimo-mdi-icon-viewer>\n\n <span class=\"widget-title\">{{ widgetConfiguration?.title }}</span>\n </div>\n\n <valtimo-carbon-list\n [header]=\"false\"\n [fields]=\"obs.fields\"\n [items]=\"obs.widgetData || []\"\n [initialSortState]=\"$initialSortState()\"\n [loading]=\"obs.widgetData === null\"\n [pagination]=\"$paginationModel()\"\n [paginatorConfig]=\"$paginatorConfig()\"\n (paginationClicked)=\"onPaginationClicked($event)\"\n (paginationSet)=\"onPaginationSet($event)\"\n (sortChanged)=\"onSortChanged($event)\"\n (rowClicked)=\"rowClick($event)\"\n >\n <section class=\"valtimo-widget-interactive-table__header\" carbonToolbarContent>\n <button\n *ngIf=\"!!obs.filters.length\"\n carbonToolbarContent\n [cdsOverflowMenu]=\"widgetInteractiveTableSearch\"\n [customPane]=\"true\"\n [iconOnly]=\"true\"\n [flip]=\"true\"\n [offset]=\"{x: 0, y: 47}\"\n placement=\"bottom\"\n cdsButton=\"ghost\"\n >\n <svg cdsIcon=\"filter\" size=\"16\"></svg>\n </button>\n\n <cds-overflow-menu\n *ngIf=\"!!widgetConfiguration?.actions?.length\"\n [customTrigger]=\"externalLinkTrigger\"\n placement=\"bottom\"\n flip=\"true\"\n [offset]=\"{x: 4, y: 44}\"\n >\n @for (action of widgetConfiguration?.actions; track action.name) {\n <cds-overflow-menu-option (click)=\"onActionClick(action)\">\n {{ action.name }}\n </cds-overflow-menu-option>\n }\n </cds-overflow-menu>\n\n <cds-menu-button\n *ngIf=\"widgetConfiguration?.properties?.canStartCase\"\n [label]=\"'Start Case' | translate\"\n >\n @for (definition of obs.caseDefinitions; track definition.caseDefinitionKey) {\n <cds-menu-item\n [label]=\"definition.name\"\n (click)=\"onCaseStart(definition)\"\n ></cds-menu-item>\n }\n </cds-menu-button>\n </section>\n\n <valtimo-no-results\n *ngIf=\"obs.widgetData !== null\"\n [collapseVertically]=\"true\"\n [description]=\"'widgets.noData' | translate\"\n [smallPadding]=\"true\"\n ></valtimo-no-results>\n </valtimo-carbon-list>\n\n <ng-template #widgetInteractiveTableSearch>\n <valtimo-widget-interactive-table-search\n [filters]=\"obs.filters\"\n [initSearchRequest]=\"searchRequest\"\n (searchSubmitEvent)=\"onSearchSubmit($event)\"\n ></valtimo-widget-interactive-table-search>\n </ng-template>\n\n <ng-template #externalLinkTrigger>\n <button cdsButton=\"ghost\" iconOnly=\"true\">\n <svg cdsIcon=\"link\" size=\"16\"></svg>\n </button>\n </ng-template>\n</ng-container>\n", styles: [".valtimo-widget-interactive-table{display:flex;flex-direction:column;height:100%}.valtimo-widget-interactive-table__header{display:flex;align-items:center;justify-content:flex-end;width:100%}.valtimo-widget-interactive-table__title-container{display:flex;align-items:center;gap:8px;padding:12px 0 0 16px}.valtimo-widget-interactive-table__content{display:flex;align-items:center;flex-direction:column}.valtimo-widget-interactive-table valtimo-carbon-list,.valtimo-widget-interactive-table cds-table-container{width:100%;height:100%}.valtimo-widget-interactive-table cds-table{height:calc(100% - 88px)}.valtimo-widget-interactive-table .widget-title{color:var(--cds-text-primary);font-weight:600;font-size:16px;line-height:24px}.cds--menu-item__label{overflow:unset!important}::ng-deep .cds--overflow-menu-options.cds--overflow-menu-options--open{max-width:max-content!important;width:max-content!important}\n/*!\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"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: CarbonListModule }, { kind: "component", type: i1.CarbonListComponent, selector: "valtimo-carbon-list", inputs: ["items", "fields", "tableTranslations", "paginatorConfig", "pagination", "loading", "actions", "actionItems", "showActionItems", "header", "hideColumnHeader", "initialSortState", "sortState", "isSearchable", "enableSingleSelection", "lastColumnTemplate", "paginationIdentifier", "showSelectionColumn", "striped", "hideToolbar", "lockedTooltipTranslationKey", "movingRowsEnabled", "dragAndDrop", "dragAndDropDisabled"], outputs: ["rowClicked", "paginationClicked", "paginationSet", "search", "sortChanged", "moveRow", "itemsReordered"] }, { kind: "component", type: i1.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title", "smallPadding", "collapseVertically", "alwaysRenderVertically"] }, { kind: "ngmodule", type: PaginationModule }, { kind: "ngmodule", type: TilesModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i3.OverflowMenu, selector: "cds-overflow-menu, ibm-overflow-menu", inputs: ["buttonLabel", "description", "flip", "placement", "open", "customTrigger", "offset", "wrapperClass", "triggerClass"], outputs: ["openChange"] }, { kind: "directive", type: i3.OverflowMenuDirective, selector: "[cdsOverflowMenu], [ibmOverflowMenu]", inputs: ["ibmOverflowMenu", "cdsOverflowMenu", "flip", "offset", "wrapperClass", "customPane"], exportAs: ["overflowMenu"] }, { kind: "component", type: i3.OverflowMenuOption, selector: "cds-overflow-menu-option, ibm-overflow-menu-option", inputs: ["divider", "type", "disabled", "href", "target", "innerClass"], outputs: ["selected"] }, { kind: "ngmodule", type: MenuButtonModule }, { kind: "component", type: i3.MenuButtonComponent, selector: "cds-menu-button", inputs: ["menuId", "kind", "size", "menuAlignment", "buttonTabIndex", "disabled", "open", "label"] }, { kind: "ngmodule", type: ContextMenuModule }, { kind: "component", type: i3.ContextMenuItemComponent, selector: "cds-menu-item, cds-context-menu-item, ibm-context-menu-item", inputs: ["disabled", "danger", "label", "info", "type", "checked", "icon", "value"], outputs: ["checkedChange", "itemClick"] }, { kind: "ngmodule", type: IconModule }, { kind: "directive", type: i3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: MdiIconViewerComponent, selector: "valtimo-mdi-icon-viewer", inputs: ["mdiIcon"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: WidgetInteractiveTableSearchComponent, selector: "valtimo-widget-interactive-table-search", inputs: ["initSearchRequest", "filters"], outputs: ["searchSubmitEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1434
1663
|
}
|
|
1435
1664
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: WidgetInteractiveTableComponent, decorators: [{
|
|
1436
1665
|
type: Component,
|
|
@@ -1446,7 +1675,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
|
|
|
1446
1675
|
ContextMenuModule,
|
|
1447
1676
|
IconModule,
|
|
1448
1677
|
MdiIconViewerComponent,
|
|
1449
|
-
|
|
1678
|
+
SkeletonModule,
|
|
1679
|
+
WidgetInteractiveTableSearchComponent,
|
|
1680
|
+
], 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 fields: fields$ | async,\n widgetData: widgetData$ | async,\n caseDefinitions: caseDefinitions$ | async,\n filters: filters$ | async,\n } as obs\"\n>\n <div class=\"valtimo-widget-interactive-table__title-container\">\n <valtimo-mdi-icon-viewer\n *ngIf=\"widgetConfiguration?.icon\"\n [mdiIcon]=\"widgetConfiguration.icon\"\n ></valtimo-mdi-icon-viewer>\n\n <span class=\"widget-title\">{{ widgetConfiguration?.title }}</span>\n </div>\n\n <valtimo-carbon-list\n [header]=\"false\"\n [fields]=\"obs.fields\"\n [items]=\"obs.widgetData || []\"\n [initialSortState]=\"$initialSortState()\"\n [loading]=\"obs.widgetData === null\"\n [pagination]=\"$paginationModel()\"\n [paginatorConfig]=\"$paginatorConfig()\"\n (paginationClicked)=\"onPaginationClicked($event)\"\n (paginationSet)=\"onPaginationSet($event)\"\n (sortChanged)=\"onSortChanged($event)\"\n (rowClicked)=\"rowClick($event)\"\n >\n <section class=\"valtimo-widget-interactive-table__header\" carbonToolbarContent>\n <button\n *ngIf=\"!!obs.filters.length\"\n carbonToolbarContent\n [cdsOverflowMenu]=\"widgetInteractiveTableSearch\"\n [customPane]=\"true\"\n [iconOnly]=\"true\"\n [flip]=\"true\"\n [offset]=\"{x: 0, y: 47}\"\n placement=\"bottom\"\n cdsButton=\"ghost\"\n >\n <svg cdsIcon=\"filter\" size=\"16\"></svg>\n </button>\n\n <cds-overflow-menu\n *ngIf=\"!!widgetConfiguration?.actions?.length\"\n [customTrigger]=\"externalLinkTrigger\"\n placement=\"bottom\"\n flip=\"true\"\n [offset]=\"{x: 4, y: 44}\"\n >\n @for (action of widgetConfiguration?.actions; track action.name) {\n <cds-overflow-menu-option (click)=\"onActionClick(action)\">\n {{ action.name }}\n </cds-overflow-menu-option>\n }\n </cds-overflow-menu>\n\n <cds-menu-button\n *ngIf=\"widgetConfiguration?.properties?.canStartCase\"\n [label]=\"'Start Case' | translate\"\n >\n @for (definition of obs.caseDefinitions; track definition.caseDefinitionKey) {\n <cds-menu-item\n [label]=\"definition.name\"\n (click)=\"onCaseStart(definition)\"\n ></cds-menu-item>\n }\n </cds-menu-button>\n </section>\n\n <valtimo-no-results\n *ngIf=\"obs.widgetData !== null\"\n [collapseVertically]=\"true\"\n [description]=\"'widgets.noData' | translate\"\n [smallPadding]=\"true\"\n ></valtimo-no-results>\n </valtimo-carbon-list>\n\n <ng-template #widgetInteractiveTableSearch>\n <valtimo-widget-interactive-table-search\n [filters]=\"obs.filters\"\n [initSearchRequest]=\"searchRequest\"\n (searchSubmitEvent)=\"onSearchSubmit($event)\"\n ></valtimo-widget-interactive-table-search>\n </ng-template>\n\n <ng-template #externalLinkTrigger>\n <button cdsButton=\"ghost\" iconOnly=\"true\">\n <svg cdsIcon=\"link\" size=\"16\"></svg>\n </button>\n </ng-template>\n</ng-container>\n", styles: [".valtimo-widget-interactive-table{display:flex;flex-direction:column;height:100%}.valtimo-widget-interactive-table__header{display:flex;align-items:center;justify-content:flex-end;width:100%}.valtimo-widget-interactive-table__title-container{display:flex;align-items:center;gap:8px;padding:12px 0 0 16px}.valtimo-widget-interactive-table__content{display:flex;align-items:center;flex-direction:column}.valtimo-widget-interactive-table valtimo-carbon-list,.valtimo-widget-interactive-table cds-table-container{width:100%;height:100%}.valtimo-widget-interactive-table cds-table{height:calc(100% - 88px)}.valtimo-widget-interactive-table .widget-title{color:var(--cds-text-primary);font-weight:600;font-size:16px;line-height:24px}.cds--menu-item__label{overflow:unset!important}::ng-deep .cds--overflow-menu-options.cds--overflow-menu-options--open{max-width:max-content!important;width:max-content!important}\n/*!\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"] }]
|
|
1450
1681
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i2$2.DocumentService }, { type: i3.IconService }], propDecorators: { class: [{
|
|
1451
1682
|
type: HostBinding,
|
|
1452
1683
|
args: ['class']
|
|
@@ -1456,6 +1687,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
|
|
|
1456
1687
|
}], widgetData: [{
|
|
1457
1688
|
type: Input,
|
|
1458
1689
|
args: [{ required: true }]
|
|
1690
|
+
}], searchRequest: [{
|
|
1691
|
+
type: Input
|
|
1459
1692
|
}], paginationEvent: [{
|
|
1460
1693
|
type: Output
|
|
1461
1694
|
}], rowClickEvent: [{
|
|
@@ -1464,6 +1697,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
|
|
|
1464
1697
|
type: Output
|
|
1465
1698
|
}], caseStartEvent: [{
|
|
1466
1699
|
type: Output
|
|
1700
|
+
}], queryParamsEvent: [{
|
|
1701
|
+
type: Output
|
|
1702
|
+
}], searchSubmitEvent: [{
|
|
1703
|
+
type: Output
|
|
1467
1704
|
}] } });
|
|
1468
1705
|
|
|
1469
1706
|
/*
|
|
@@ -2121,9 +2358,9 @@ class WidgetManagementActionButtonComponent {
|
|
|
2121
2358
|
this.buttonType$.next(buttonType);
|
|
2122
2359
|
}));
|
|
2123
2360
|
this.formGroup = this.fb.group({
|
|
2124
|
-
navigateTo: this.fb.control(this.widgetWizardService.$widgetActions()?.[0]?.navigateTo ?? ''),
|
|
2125
|
-
name: this.fb.control(this.widgetWizardService.$widgetActions()?.[0]?.name ?? ''),
|
|
2126
|
-
}
|
|
2361
|
+
navigateTo: this.fb.control(this.widgetWizardService.$widgetActions()?.[0]?.navigateTo ?? '', Validators.required),
|
|
2362
|
+
name: this.fb.control(this.widgetWizardService.$widgetActions()?.[0]?.name ?? '', Validators.required),
|
|
2363
|
+
});
|
|
2127
2364
|
this._subscriptions = new Subscription();
|
|
2128
2365
|
}
|
|
2129
2366
|
ngOnInit() {
|
|
@@ -2158,13 +2395,11 @@ class WidgetManagementActionButtonComponent {
|
|
|
2158
2395
|
openValueChangeSubscription() {
|
|
2159
2396
|
this._subscriptions.add(this.formGroup.valueChanges.pipe(debounceTime(100)).subscribe(() => {
|
|
2160
2397
|
this.widgetWizardService.$widgetContentValid.set(this.formGroup.valid);
|
|
2161
|
-
if (!this.formGroup.valid)
|
|
2162
|
-
return;
|
|
2163
|
-
const action = this.formGroup.getRawValue();
|
|
2164
|
-
if (!action.navigateTo || !action.name) {
|
|
2398
|
+
if (!this.formGroup.valid) {
|
|
2165
2399
|
this.widgetWizardService.$widgetActions.set([]);
|
|
2166
2400
|
return;
|
|
2167
2401
|
}
|
|
2402
|
+
const action = this.formGroup.getRawValue();
|
|
2168
2403
|
this.widgetWizardService.$widgetActions.set([
|
|
2169
2404
|
{
|
|
2170
2405
|
name: action.name,
|
|
@@ -2223,6 +2458,7 @@ class WidgetWizardService {
|
|
|
2223
2458
|
this.$widgetContext = signal(null);
|
|
2224
2459
|
this.$widgetContentValid = signal(false);
|
|
2225
2460
|
this.$widgetConditionsValid = signal(false);
|
|
2461
|
+
this.$widgetFiltersValid = signal(false);
|
|
2226
2462
|
this.$disableTitleInput = signal(false);
|
|
2227
2463
|
this.$disableActionButton = signal(false);
|
|
2228
2464
|
this.$widgetWizardSteps = signal([
|
|
@@ -2231,6 +2467,7 @@ class WidgetWizardService {
|
|
|
2231
2467
|
WidgetWizardStep.DENSITY,
|
|
2232
2468
|
WidgetWizardStep.STYLE,
|
|
2233
2469
|
WidgetWizardStep.CONTENT,
|
|
2470
|
+
WidgetWizardStep.FILTERS,
|
|
2234
2471
|
WidgetWizardStep.DISPLAY_CONDITIONS,
|
|
2235
2472
|
]);
|
|
2236
2473
|
this.$editMode = signal(false);
|
|
@@ -2242,6 +2479,7 @@ class WidgetWizardService {
|
|
|
2242
2479
|
[WidgetWizardStep.CONTENT]: !!this.$widgetContent() &&
|
|
2243
2480
|
this.$widgetContentValid() &&
|
|
2244
2481
|
(!!this.$widgetTitle() || this.$disableTitleInput()),
|
|
2482
|
+
[WidgetWizardStep.FILTERS]: this.$widgetFiltersValid(),
|
|
2245
2483
|
[WidgetWizardStep.DISPLAY_CONDITIONS]: this.$widgetConditionsValid(),
|
|
2246
2484
|
}));
|
|
2247
2485
|
this.$widgetWizardStepEnableCondition = computed(() => ({
|
|
@@ -2254,6 +2492,10 @@ class WidgetWizardService {
|
|
|
2254
2492
|
: [WidgetType.COLLECTION, WidgetType.FIELDS, WidgetType.TABLE].includes(selectedType);
|
|
2255
2493
|
},
|
|
2256
2494
|
},
|
|
2495
|
+
[WidgetWizardStep.FILTERS]: {
|
|
2496
|
+
dependingStep: WidgetWizardStep.TYPE,
|
|
2497
|
+
condition: () => this.$selectedWidget()?.type === WidgetType.INTERACTIVE_TABLE,
|
|
2498
|
+
},
|
|
2257
2499
|
}));
|
|
2258
2500
|
this.$widgetWizardStepProperties = computed(() => {
|
|
2259
2501
|
const enabledConditions = this.$widgetWizardStepEnableCondition();
|
|
@@ -2301,6 +2543,7 @@ class WidgetWizardService {
|
|
|
2301
2543
|
this.$widgetKey.set(null);
|
|
2302
2544
|
this.$widgetActions.set(undefined);
|
|
2303
2545
|
this.$widgetDisplayConditions.set(null);
|
|
2546
|
+
this.$widgetFiltersValid.set(false);
|
|
2304
2547
|
this.$editMode.set(false);
|
|
2305
2548
|
this.$widgetDensity.set(null);
|
|
2306
2549
|
this.$disableActionButton.set(false);
|
|
@@ -2314,6 +2557,7 @@ class WidgetWizardService {
|
|
|
2314
2557
|
WidgetWizardStep.DENSITY,
|
|
2315
2558
|
WidgetWizardStep.STYLE,
|
|
2316
2559
|
WidgetWizardStep.CONTENT,
|
|
2560
|
+
WidgetWizardStep.FILTERS,
|
|
2317
2561
|
WidgetWizardStep.DISPLAY_CONDITIONS,
|
|
2318
2562
|
]);
|
|
2319
2563
|
}
|
|
@@ -2610,6 +2854,198 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
|
|
|
2610
2854
|
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, TranslateModule, TilesModule], 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<cds-tile-group\n [multiple]=\"false\"\n (selected)=\"onSelectedEvent($event)\"\n class=\"valtimo-widget-wizard-step__content\"\n>\n <cds-selection-tile\n class=\"valtimo-widget-wizard-step__tile\"\n [value]=\"1\"\n [selected]=\"$widgetWidth() === 1\"\n [disabled]=\"$fieldsColumnsLength() > 1\"\n >\n <h3>{{ 'widgetTabManagement.width.small.title' | translate }}</h3>\n\n <span>{{ 'widgetTabManagement.width.small.subtitle' | translate }}</span>\n\n <img\n src=\"valtimo-layout/img/widget-management/width/quarter.svg\"\n [alt]=\"'widgetTabManagement.width.small.title' | translate\"\n />\n </cds-selection-tile>\n\n <cds-selection-tile\n class=\"valtimo-widget-wizard-step__tile\"\n [value]=\"2\"\n [selected]=\"$widgetWidth() === 2\"\n [disabled]=\"$fieldsColumnsLength() > 2\"\n >\n <h3>{{ 'widgetTabManagement.width.medium.title' | translate }}</h3>\n\n <span>{{ 'widgetTabManagement.width.medium.subtitle' | translate }}</span>\n\n <img\n src=\"valtimo-layout/img/widget-management/width/half.svg\"\n [alt]=\"'widgetTabManagement.width.medium.title' | translate\"\n />\n </cds-selection-tile>\n\n <cds-selection-tile\n class=\"valtimo-widget-wizard-step__tile\"\n [value]=\"3\"\n [selected]=\"$widgetWidth() === 3\"\n [disabled]=\"$fieldsColumnsLength() > 3\"\n >\n <h3>{{ 'widgetTabManagement.width.large.title' | translate }}</h3>\n\n <span>{{ 'widgetTabManagement.width.large.subtitle' | translate }}</span>\n\n <img\n src=\"valtimo-layout/img/widget-management/width/three-quarters.svg\"\n [alt]=\"'widgetTabManagement.width.large.title' | translate\"\n />\n </cds-selection-tile>\n\n <cds-selection-tile\n class=\"valtimo-widget-wizard-step__tile\"\n [value]=\"4\"\n [selected]=\"$widgetWidth() === 4\"\n >\n <h3>{{ 'widgetTabManagement.width.xtraLarge.title' | translate }}</h3>\n\n <span>{{ 'widgetTabManagement.width.xtraLarge.subtitle' | translate }}</span>\n\n <img\n src=\"valtimo-layout/img/widget-management/width/full-width.svg\"\n [alt]=\"'widgetTabManagement.width.xtraLarge.title' | translate\"\n />\n </cds-selection-tile>\n</cds-tile-group>\n" }]
|
|
2611
2855
|
}], ctorParameters: () => [{ type: WidgetWizardService }] });
|
|
2612
2856
|
|
|
2857
|
+
/*
|
|
2858
|
+
* Copyright 2015-2025 Ritense BV, the Netherlands.
|
|
2859
|
+
*
|
|
2860
|
+
* Licensed under EUPL, Version 1.2 (the "License");
|
|
2861
|
+
* you may not use this file except in compliance with the License.
|
|
2862
|
+
* You may obtain a copy of the License at
|
|
2863
|
+
*
|
|
2864
|
+
* https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
|
|
2865
|
+
*
|
|
2866
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
2867
|
+
* distributed under the License is distributed on an "AS IS" basis,
|
|
2868
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
2869
|
+
* See the License for the specific language governing permissions and
|
|
2870
|
+
* limitations under the License.
|
|
2871
|
+
*/
|
|
2872
|
+
class WidgetWizardFiltersStepComponent {
|
|
2873
|
+
constructor(fb, widgetWizardService, iconService, translateService) {
|
|
2874
|
+
this.fb = fb;
|
|
2875
|
+
this.widgetWizardService = widgetWizardService;
|
|
2876
|
+
this.iconService = iconService;
|
|
2877
|
+
this.translateService = translateService;
|
|
2878
|
+
this.class = 'valtimo-widget-wizard-filters-step';
|
|
2879
|
+
this.formGroup = this.fb.group({
|
|
2880
|
+
filters: this.fb.array([]),
|
|
2881
|
+
});
|
|
2882
|
+
this.expandedFilterIndex = -1;
|
|
2883
|
+
this._subscriptions = new Subscription();
|
|
2884
|
+
this.DATA_TYPE_ITEMS = [
|
|
2885
|
+
{
|
|
2886
|
+
id: 'text',
|
|
2887
|
+
content: this.translateService.instant('searchFields.text'),
|
|
2888
|
+
selected: false,
|
|
2889
|
+
},
|
|
2890
|
+
];
|
|
2891
|
+
this.FIELD_TYPE_ITEMS = [
|
|
2892
|
+
{
|
|
2893
|
+
id: 'single',
|
|
2894
|
+
content: this.translateService.instant('searchFieldsOverview.single'),
|
|
2895
|
+
selected: false,
|
|
2896
|
+
},
|
|
2897
|
+
];
|
|
2898
|
+
this.iconService.registerAll([TrashCan16, ArrowUp16, ArrowDown16]);
|
|
2899
|
+
}
|
|
2900
|
+
get filters() {
|
|
2901
|
+
return this.formGroup.get('filters');
|
|
2902
|
+
}
|
|
2903
|
+
ngOnInit() {
|
|
2904
|
+
this.initForm();
|
|
2905
|
+
this.openFormSubscription();
|
|
2906
|
+
}
|
|
2907
|
+
ngOnDestroy() {
|
|
2908
|
+
this._subscriptions.unsubscribe();
|
|
2909
|
+
this.formGroup.reset();
|
|
2910
|
+
}
|
|
2911
|
+
addFilter() {
|
|
2912
|
+
this.filters.push(this.createFilterFormGroup());
|
|
2913
|
+
this.expandedFilterIndex = this.filters.length - 1;
|
|
2914
|
+
}
|
|
2915
|
+
removeFilter(event, index) {
|
|
2916
|
+
event.stopImmediatePropagation();
|
|
2917
|
+
this.filters.removeAt(index);
|
|
2918
|
+
if (!this.filters.length) {
|
|
2919
|
+
this.expandedFilterIndex = -1;
|
|
2920
|
+
return;
|
|
2921
|
+
}
|
|
2922
|
+
if (this.expandedFilterIndex === index) {
|
|
2923
|
+
this.expandedFilterIndex = Math.min(index, this.filters.length - 1);
|
|
2924
|
+
}
|
|
2925
|
+
else if (this.expandedFilterIndex > index) {
|
|
2926
|
+
this.expandedFilterIndex = this.expandedFilterIndex - 1;
|
|
2927
|
+
}
|
|
2928
|
+
}
|
|
2929
|
+
onMoveUpClick(event, data) {
|
|
2930
|
+
event.stopImmediatePropagation();
|
|
2931
|
+
if (data.index === 0)
|
|
2932
|
+
return;
|
|
2933
|
+
this.reorderFilters(data.index - 1, data.index);
|
|
2934
|
+
}
|
|
2935
|
+
onMoveDownClick(event, data) {
|
|
2936
|
+
event.stopImmediatePropagation();
|
|
2937
|
+
if (data.index >= data.length - 1)
|
|
2938
|
+
return;
|
|
2939
|
+
this.reorderFilters(data.index, data.index + 1);
|
|
2940
|
+
}
|
|
2941
|
+
createFilterFormGroup(filter) {
|
|
2942
|
+
return this.fb.group({
|
|
2943
|
+
title: this.fb.control(filter?.title ?? '', Validators.required),
|
|
2944
|
+
key: this.fb.control(filter?.key ?? '', Validators.required),
|
|
2945
|
+
dataType: this.fb.control(this.getDataTypeControlValue(), Validators.required),
|
|
2946
|
+
fieldType: this.fb.control(this.getFieldTypeControlValue(), Validators.required),
|
|
2947
|
+
matchType: this.fb.control(filter?.matchType ?? null),
|
|
2948
|
+
});
|
|
2949
|
+
}
|
|
2950
|
+
initForm() {
|
|
2951
|
+
const filters = this.widgetWizardService.$widgetContent()?.filters ?? [];
|
|
2952
|
+
if (!filters.length) {
|
|
2953
|
+
this.widgetWizardService.$widgetFiltersValid.set(this.formGroup.valid);
|
|
2954
|
+
this.expandedFilterIndex = -1;
|
|
2955
|
+
return;
|
|
2956
|
+
}
|
|
2957
|
+
filters.forEach(filter => this.filters.push(this.createFilterFormGroup(filter), { emitEvent: false }));
|
|
2958
|
+
this.widgetWizardService.$widgetFiltersValid.set(this.formGroup.valid);
|
|
2959
|
+
this.expandedFilterIndex = 0;
|
|
2960
|
+
}
|
|
2961
|
+
openFormSubscription() {
|
|
2962
|
+
this._subscriptions.add(this.formGroup.valueChanges.pipe(debounceTime(100)).subscribe(({ filters }) => {
|
|
2963
|
+
const mappedFilters = (filters ?? []).map(filter => ({
|
|
2964
|
+
title: filter.title,
|
|
2965
|
+
key: filter.key,
|
|
2966
|
+
dataType: this.getListItemId(filter.dataType) ?? 'text',
|
|
2967
|
+
fieldType: this.getListItemId(filter.fieldType) ?? 'single',
|
|
2968
|
+
matchType: filter.matchType,
|
|
2969
|
+
}));
|
|
2970
|
+
this.widgetWizardService.$widgetContent.update((content) => ({
|
|
2971
|
+
...content,
|
|
2972
|
+
filters: mappedFilters,
|
|
2973
|
+
}));
|
|
2974
|
+
this.widgetWizardService.$widgetFiltersValid.set(this.formGroup.valid);
|
|
2975
|
+
}));
|
|
2976
|
+
}
|
|
2977
|
+
getDataTypeDropdownItems(filterRow) {
|
|
2978
|
+
const selectedId = this.getListItemId(filterRow.get('dataType')?.value) ?? 'text';
|
|
2979
|
+
return this.selectItem(this.DATA_TYPE_ITEMS, selectedId);
|
|
2980
|
+
}
|
|
2981
|
+
getFieldTypeDropdownItems(filterRow) {
|
|
2982
|
+
const selectedId = this.getListItemId(filterRow.get('fieldType')?.value) ?? 'single';
|
|
2983
|
+
return this.selectItem(this.FIELD_TYPE_ITEMS, selectedId);
|
|
2984
|
+
}
|
|
2985
|
+
onFilterAccordionSelection(expanded, index) {
|
|
2986
|
+
this.expandedFilterIndex = expanded ? index : -1;
|
|
2987
|
+
}
|
|
2988
|
+
getListItemId(value) {
|
|
2989
|
+
if (!value) {
|
|
2990
|
+
return null;
|
|
2991
|
+
}
|
|
2992
|
+
return value.id;
|
|
2993
|
+
}
|
|
2994
|
+
getDataTypeControlValue() {
|
|
2995
|
+
return { ...this.DATA_TYPE_ITEMS[0], selected: true };
|
|
2996
|
+
}
|
|
2997
|
+
getFieldTypeControlValue() {
|
|
2998
|
+
return { ...this.FIELD_TYPE_ITEMS[0], selected: true };
|
|
2999
|
+
}
|
|
3000
|
+
reorderFilters(fromIndex, toIndex) {
|
|
3001
|
+
const reorderedControls = this.swapItems(this.filters.controls, fromIndex, toIndex);
|
|
3002
|
+
this.filters.clear();
|
|
3003
|
+
reorderedControls.forEach(control => this.filters.push(control));
|
|
3004
|
+
this.formGroup.updateValueAndValidity();
|
|
3005
|
+
this.updateExpandedFilterIndex(fromIndex, toIndex);
|
|
3006
|
+
}
|
|
3007
|
+
updateExpandedFilterIndex(fromIndex, toIndex) {
|
|
3008
|
+
if (this.expandedFilterIndex === fromIndex) {
|
|
3009
|
+
this.expandedFilterIndex = toIndex;
|
|
3010
|
+
}
|
|
3011
|
+
else if (this.expandedFilterIndex === toIndex) {
|
|
3012
|
+
this.expandedFilterIndex = fromIndex;
|
|
3013
|
+
}
|
|
3014
|
+
}
|
|
3015
|
+
selectItem(items, selectedId) {
|
|
3016
|
+
return items.map(item => ({
|
|
3017
|
+
...item,
|
|
3018
|
+
selected: item.id === selectedId,
|
|
3019
|
+
}));
|
|
3020
|
+
}
|
|
3021
|
+
swapItems(items, index1, index2) {
|
|
3022
|
+
const itemToInsert = items[index1];
|
|
3023
|
+
const filteredItems = items.filter((_, index) => index !== index1);
|
|
3024
|
+
filteredItems.splice(index2, 0, itemToInsert);
|
|
3025
|
+
return filteredItems;
|
|
3026
|
+
}
|
|
3027
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: WidgetWizardFiltersStepComponent, deps: [{ token: i1$3.FormBuilder }, { token: WidgetWizardService }, { token: i3.IconService }, { token: i2$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3028
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: WidgetWizardFiltersStepComponent, isStandalone: true, selector: "ng-component", host: { properties: { "class": "this.class" } }, 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<form [formGroup]=\"formGroup\" class=\"valtimo-widget-wizard-filters\">\n <cds-accordion formArrayName=\"filters\" align=\"start\" size=\"sm\">\n @for (filterRow of filters.controls; track $index) {\n <cds-accordion-item\n [title]=\"filterTitle\"\n [expanded]=\"expandedFilterIndex === $index\"\n [context]=\"{\n title: filterRow.get('title')?.value,\n count: $count,\n index: $index\n }\"\n (selected)=\"onFilterAccordionSelection($event.expanded, $index)\"\n class=\"valtimo-widget-wizard-filters__item\"\n >\n <form\n [formGroup]=\"filterRow\"\n class=\"valtimo-widget-wizard-filters__container\"\n (click)=\"$event.stopImmediatePropagation()\"\n >\n <div class=\"valtimo-widget-wizard-filters__row\">\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.filters.title' | translate\"\n [tooltip]=\"'widgetTabManagement.filters.titleTooltip' | translate\"\n ></v-input-label>\n\n <input\n cdsText\n formControlName=\"title\"\n [placeholder]=\"'widgetTabManagement.filters.titlePlaceholder' | translate\"\n type=\"text\"\n />\n </cds-text-label>\n\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.filters.key' | translate\"\n [tooltip]=\"'widgetTabManagement.filters.keyTooltip' | translate\"\n ></v-input-label>\n\n <input\n cdsText\n formControlName=\"key\"\n [placeholder]=\"'widgetTabManagement.filters.keyPlaceholder' | translate\"\n type=\"text\"\n />\n </cds-text-label>\n\n <cds-dropdown\n cdsLayer\n [label]=\"'widgetTabManagement.filters.dataType' | translate\"\n [placeholder]=\"'widgetTabManagement.filters.dataTypePlaceholder' | translate\"\n formControlName=\"dataType\"\n >\n <cds-dropdown-list [items]=\"getDataTypeDropdownItems(filterRow)\"></cds-dropdown-list>\n </cds-dropdown>\n\n <cds-dropdown\n cdsLayer\n [label]=\"'widgetTabManagement.filters.fieldType' | translate\"\n [placeholder]=\"'widgetTabManagement.filters.fieldTypePlaceholder' | translate\"\n formControlName=\"fieldType\"\n >\n <cds-dropdown-list [items]=\"getFieldTypeDropdownItems(filterRow)\"></cds-dropdown-list>\n </cds-dropdown>\n </div>\n </form>\n </cds-accordion-item>\n }\n </cds-accordion>\n\n <button cdsButton=\"primary\" size=\"sm\" type=\"button\" (click)=\"addFilter()\">\n {{ 'widgetTabManagement.filters.add' | translate }}\n\n <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n </button>\n</form>\n\n<ng-template #filterTitle let-title=\"title\" let-count=\"count\" let-index=\"index\">\n <div class=\"valtimo-widget-wizard-filters__title\">\n <span>\n {{ title || ('widgetTabManagement.filters.titlePlaceholder' | translate) }}\n </span>\n\n <section class=\"valtimo-widget-wizard-filters__actions\">\n <button\n cdsButton=\"tertiary\"\n [disabled]=\"index === 0\"\n [iconOnly]=\"true\"\n size=\"sm\"\n type=\"button\"\n (click)=\"onMoveUpClick($event, {index: index, length: count})\"\n >\n <svg cdsIcon=\"arrow--up\" size=\"16\"></svg>\n </button>\n\n <button\n cdsButton=\"tertiary\"\n [disabled]=\"index === count - 1\"\n [iconOnly]=\"true\"\n size=\"sm\"\n type=\"button\"\n (click)=\"onMoveDownClick($event, {index: index, length: count})\"\n >\n <svg cdsIcon=\"arrow--down\" size=\"16\"></svg>\n </button>\n\n <button\n cdsButton=\"danger\"\n [iconOnly]=\"true\"\n type=\"button\"\n class=\"valtimo-widget-wizard-filters__delete-button\"\n (click)=\"removeFilter($event, index)\"\n >\n <svg cdsIcon=\"trash-can\" size=\"16\"></svg>\n </button>\n </section>\n </div>\n</ng-template>\n", styles: [".valtimo-widget-wizard-filters{display:flex;flex-direction:column;gap:16px}.valtimo-widget-wizard-filters__item{background:var(--cds-layer-01)}.valtimo-widget-wizard-filters__item .cds--accordion__content{padding-inline-end:20px}.valtimo-widget-wizard-filters__container{display:flex;flex-direction:column;gap:16px}.valtimo-widget-wizard-filters__row{display:grid;grid-template-columns:1fr 1fr 180px 180px;align-items:flex-end;gap:16px}.valtimo-widget-wizard-filters__title{display:flex;justify-content:space-between;align-items:center;width:100%;padding:8px}.valtimo-widget-wizard-filters__actions{display:flex;gap:8px;align-items:center}.valtimo-widget-wizard-filters .cds--text-input{background:var(--cds-layer-02)}\n/*!\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"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$3.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: AccordionModule }, { kind: "component", type: i3.Accordion, selector: "cds-accordion, ibm-accordion", inputs: ["align", "size", "skeleton"] }, { kind: "component", type: i3.AccordionItem, selector: "cds-accordion-item, ibm-accordion-item", inputs: ["title", "context", "id", "skeleton", "expanded", "disabled"], outputs: ["selected"] }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i3.TextInputLabelComponent, selector: "cds-text-label, ibm-text-label", inputs: ["labelInputID", "disabled", "skeleton", "labelTemplate", "textInputTemplate", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel", "fluid"] }, { kind: "directive", type: i3.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "ngmodule", type: LayerModule }, { kind: "directive", type: i3.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "ngmodule", type: IconModule }, { kind: "directive", type: i3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "ngmodule", type: InputLabelModule }, { kind: "component", type: i1.InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "tooltipTranslationKey", "largeMargin", "small", "noMargin", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i7.Dropdown, selector: "cds-dropdown, ibm-dropdown", inputs: ["id", "label", "hideLabel", "helperText", "placeholder", "displayValue", "clearText", "size", "type", "theme", "disabled", "readonly", "skeleton", "inline", "disableArrowKeys", "invalid", "invalidText", "warn", "warnText", "appendInline", "scrollableContainer", "itemValueKey", "selectionFeedback", "menuButtonLabel", "selectedLabel", "dropUp", "fluid"], outputs: ["selected", "onClose", "close"] }, { kind: "component", type: i7.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
3029
|
+
}
|
|
3030
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: WidgetWizardFiltersStepComponent, decorators: [{
|
|
3031
|
+
type: Component,
|
|
3032
|
+
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [
|
|
3033
|
+
CommonModule,
|
|
3034
|
+
TranslateModule,
|
|
3035
|
+
ReactiveFormsModule,
|
|
3036
|
+
AccordionModule,
|
|
3037
|
+
InputModule,
|
|
3038
|
+
LayerModule,
|
|
3039
|
+
ButtonModule,
|
|
3040
|
+
IconModule,
|
|
3041
|
+
InputLabelModule,
|
|
3042
|
+
DropdownModule,
|
|
3043
|
+
], 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<form [formGroup]=\"formGroup\" class=\"valtimo-widget-wizard-filters\">\n <cds-accordion formArrayName=\"filters\" align=\"start\" size=\"sm\">\n @for (filterRow of filters.controls; track $index) {\n <cds-accordion-item\n [title]=\"filterTitle\"\n [expanded]=\"expandedFilterIndex === $index\"\n [context]=\"{\n title: filterRow.get('title')?.value,\n count: $count,\n index: $index\n }\"\n (selected)=\"onFilterAccordionSelection($event.expanded, $index)\"\n class=\"valtimo-widget-wizard-filters__item\"\n >\n <form\n [formGroup]=\"filterRow\"\n class=\"valtimo-widget-wizard-filters__container\"\n (click)=\"$event.stopImmediatePropagation()\"\n >\n <div class=\"valtimo-widget-wizard-filters__row\">\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.filters.title' | translate\"\n [tooltip]=\"'widgetTabManagement.filters.titleTooltip' | translate\"\n ></v-input-label>\n\n <input\n cdsText\n formControlName=\"title\"\n [placeholder]=\"'widgetTabManagement.filters.titlePlaceholder' | translate\"\n type=\"text\"\n />\n </cds-text-label>\n\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.filters.key' | translate\"\n [tooltip]=\"'widgetTabManagement.filters.keyTooltip' | translate\"\n ></v-input-label>\n\n <input\n cdsText\n formControlName=\"key\"\n [placeholder]=\"'widgetTabManagement.filters.keyPlaceholder' | translate\"\n type=\"text\"\n />\n </cds-text-label>\n\n <cds-dropdown\n cdsLayer\n [label]=\"'widgetTabManagement.filters.dataType' | translate\"\n [placeholder]=\"'widgetTabManagement.filters.dataTypePlaceholder' | translate\"\n formControlName=\"dataType\"\n >\n <cds-dropdown-list [items]=\"getDataTypeDropdownItems(filterRow)\"></cds-dropdown-list>\n </cds-dropdown>\n\n <cds-dropdown\n cdsLayer\n [label]=\"'widgetTabManagement.filters.fieldType' | translate\"\n [placeholder]=\"'widgetTabManagement.filters.fieldTypePlaceholder' | translate\"\n formControlName=\"fieldType\"\n >\n <cds-dropdown-list [items]=\"getFieldTypeDropdownItems(filterRow)\"></cds-dropdown-list>\n </cds-dropdown>\n </div>\n </form>\n </cds-accordion-item>\n }\n </cds-accordion>\n\n <button cdsButton=\"primary\" size=\"sm\" type=\"button\" (click)=\"addFilter()\">\n {{ 'widgetTabManagement.filters.add' | translate }}\n\n <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n </button>\n</form>\n\n<ng-template #filterTitle let-title=\"title\" let-count=\"count\" let-index=\"index\">\n <div class=\"valtimo-widget-wizard-filters__title\">\n <span>\n {{ title || ('widgetTabManagement.filters.titlePlaceholder' | translate) }}\n </span>\n\n <section class=\"valtimo-widget-wizard-filters__actions\">\n <button\n cdsButton=\"tertiary\"\n [disabled]=\"index === 0\"\n [iconOnly]=\"true\"\n size=\"sm\"\n type=\"button\"\n (click)=\"onMoveUpClick($event, {index: index, length: count})\"\n >\n <svg cdsIcon=\"arrow--up\" size=\"16\"></svg>\n </button>\n\n <button\n cdsButton=\"tertiary\"\n [disabled]=\"index === count - 1\"\n [iconOnly]=\"true\"\n size=\"sm\"\n type=\"button\"\n (click)=\"onMoveDownClick($event, {index: index, length: count})\"\n >\n <svg cdsIcon=\"arrow--down\" size=\"16\"></svg>\n </button>\n\n <button\n cdsButton=\"danger\"\n [iconOnly]=\"true\"\n type=\"button\"\n class=\"valtimo-widget-wizard-filters__delete-button\"\n (click)=\"removeFilter($event, index)\"\n >\n <svg cdsIcon=\"trash-can\" size=\"16\"></svg>\n </button>\n </section>\n </div>\n</ng-template>\n", styles: [".valtimo-widget-wizard-filters{display:flex;flex-direction:column;gap:16px}.valtimo-widget-wizard-filters__item{background:var(--cds-layer-01)}.valtimo-widget-wizard-filters__item .cds--accordion__content{padding-inline-end:20px}.valtimo-widget-wizard-filters__container{display:flex;flex-direction:column;gap:16px}.valtimo-widget-wizard-filters__row{display:grid;grid-template-columns:1fr 1fr 180px 180px;align-items:flex-end;gap:16px}.valtimo-widget-wizard-filters__title{display:flex;justify-content:space-between;align-items:center;width:100%;padding:8px}.valtimo-widget-wizard-filters__actions{display:flex;gap:8px;align-items:center}.valtimo-widget-wizard-filters .cds--text-input{background:var(--cds-layer-02)}\n/*!\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"] }]
|
|
3044
|
+
}], ctorParameters: () => [{ type: i1$3.FormBuilder }, { type: WidgetWizardService }, { type: i3.IconService }, { type: i2$1.TranslateService }], propDecorators: { class: [{
|
|
3045
|
+
type: HostBinding,
|
|
3046
|
+
args: ['class']
|
|
3047
|
+
}] } });
|
|
3048
|
+
|
|
2613
3049
|
/*
|
|
2614
3050
|
* Copyright 2015-2025 Ritense BV, the Netherlands.
|
|
2615
3051
|
*
|
|
@@ -2631,6 +3067,7 @@ const WIDGET_STEPS = [
|
|
|
2631
3067
|
WidgetWizardDensityStepComponent,
|
|
2632
3068
|
WidgetWizardTypeStepComponent,
|
|
2633
3069
|
WidgetWizardWidthStepComponent,
|
|
3070
|
+
WidgetWizardFiltersStepComponent,
|
|
2634
3071
|
WidgetWizardDisplayConditionsStepComponent,
|
|
2635
3072
|
];
|
|
2636
3073
|
|
|
@@ -3209,8 +3646,10 @@ class WidgetMapComponent {
|
|
|
3209
3646
|
this.widgetConfiguration$.next(value);
|
|
3210
3647
|
}
|
|
3211
3648
|
set widgetData(value) {
|
|
3212
|
-
if (!value)
|
|
3649
|
+
if (!value) {
|
|
3650
|
+
this.widgetData$.next(null);
|
|
3213
3651
|
return;
|
|
3652
|
+
}
|
|
3214
3653
|
this.widgetData$.next(value);
|
|
3215
3654
|
this.isEmptyWidgetData$.next(this.checkEmptyWidgetData(value));
|
|
3216
3655
|
}
|
|
@@ -3273,7 +3712,7 @@ class WidgetMapComponent {
|
|
|
3273
3712
|
}),
|
|
3274
3713
|
});
|
|
3275
3714
|
this.widgetData$.subscribe(widgetData => {
|
|
3276
|
-
if (!widgetData?.geoJsonFeatureCollection) {
|
|
3715
|
+
if (!widgetData?.geoJsonFeatureCollection?.features) {
|
|
3277
3716
|
return;
|
|
3278
3717
|
}
|
|
3279
3718
|
const featureCollection = {
|
|
@@ -3291,12 +3730,13 @@ class WidgetMapComponent {
|
|
|
3291
3730
|
style: vectorStyle,
|
|
3292
3731
|
});
|
|
3293
3732
|
this.map.addLayer(this.vectorLayer);
|
|
3294
|
-
this.fitMap(vectorSource);
|
|
3733
|
+
setTimeout(() => this.fitMap(vectorSource));
|
|
3295
3734
|
});
|
|
3296
3735
|
}
|
|
3297
3736
|
fitMap(vectorSource) {
|
|
3298
3737
|
const extent = vectorSource?.getExtent();
|
|
3299
3738
|
if (extent) {
|
|
3739
|
+
this.map.updateSize();
|
|
3300
3740
|
this.map.getView().fit(extent, {
|
|
3301
3741
|
padding: [20, 20, 20, 20],
|
|
3302
3742
|
maxZoom: 18,
|
|
@@ -3304,7 +3744,7 @@ class WidgetMapComponent {
|
|
|
3304
3744
|
}
|
|
3305
3745
|
}
|
|
3306
3746
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: WidgetMapComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3307
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: WidgetMapComponent, isStandalone: true, selector: "valtimo-widget-map", inputs: { widgetConfiguration: "widgetConfiguration", widgetData: "widgetData" }, outputs: { noVisibleMapEvent: "noVisibleMapEvent" }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "_widgetMapRef", first: true, predicate: ["widgetMap"], 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 widgetData: widgetData$ | async,\n isEmptyWidgetData: isEmptyWidgetData$ | async,\n noVisibleMap: noVisibleMap$ | async,\n } as obs\"\n>\n <section *ngIf=\"obs?.widgetConfiguration?.title\" class=\"widget-map__header\">\n <h4 class=\"widget-map__title\">{{ obs?.widgetConfiguration?.title }}</h4>\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 class=\"widget-
|
|
3747
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: WidgetMapComponent, isStandalone: true, selector: "valtimo-widget-map", inputs: { widgetConfiguration: "widgetConfiguration", widgetData: "widgetData" }, outputs: { noVisibleMapEvent: "noVisibleMapEvent" }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "_widgetMapRef", first: true, predicate: ["widgetMap"], 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 widgetData: widgetData$ | async,\n isEmptyWidgetData: isEmptyWidgetData$ | async,\n noVisibleMap: noVisibleMap$ | async,\n } as obs\"\n>\n <section *ngIf=\"obs?.widgetConfiguration?.title\" class=\"widget-map__header\">\n <h4 class=\"widget-map__title\">{{ obs?.widgetConfiguration?.title }}</h4>\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 class=\"widget-map__render\"\n #widgetMap\n [hidden]=\"obs?.isEmptyWidgetData || obs.widgetData === null\"\n ></div>\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 if (obs.widgetData === null) {\n <div class=\"widget-map__skeleton\">\n <cds-skeleton-placeholder></cds-skeleton-placeholder>\n </div>\n }\n</ng-container>\n", styles: [".widget-map{padding:24px;display:flex;flex-direction:column;gap:16px;width:100%;overflow:hidden;min-height:0;flex:1}.widget-map__header{display:flex;align-items:center;justify-content:space-between}.widget-map__title{color:var(--cds-text-primary);font-weight:600;font-size:16px;line-height:24px}.widget-map__render{display:flex;min-height:0;flex:1}.widget-map__render .ol-viewport{display:flex;min-height:296px;flex:1}.widget-map__skeleton{width:100%}.widget-map__skeleton cds-skeleton-placeholder{height:296px;width:100%}.widget-map__skeleton cds-skeleton-placeholder .cds--skeleton__placeholder{height:296px;width:100%}\n/*!\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"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "ngmodule", type: ButtonModule }, { kind: "component", type: WidgetActionButtonComponent, selector: "valtimo-widget-action-button", inputs: ["widgetConfiguration", "resolvedData"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i3.SkeletonPlaceholder, selector: "cds-skeleton-placeholder, ibm-skeleton-placeholder" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
3308
3748
|
}
|
|
3309
3749
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: WidgetMapComponent, decorators: [{
|
|
3310
3750
|
type: Component,
|
|
@@ -3316,7 +3756,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
|
|
|
3316
3756
|
EllipsisPipe,
|
|
3317
3757
|
ButtonModule,
|
|
3318
3758
|
WidgetActionButtonComponent,
|
|
3319
|
-
|
|
3759
|
+
SkeletonModule,
|
|
3760
|
+
], 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 widgetData: widgetData$ | async,\n isEmptyWidgetData: isEmptyWidgetData$ | async,\n noVisibleMap: noVisibleMap$ | async,\n } as obs\"\n>\n <section *ngIf=\"obs?.widgetConfiguration?.title\" class=\"widget-map__header\">\n <h4 class=\"widget-map__title\">{{ obs?.widgetConfiguration?.title }}</h4>\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 class=\"widget-map__render\"\n #widgetMap\n [hidden]=\"obs?.isEmptyWidgetData || obs.widgetData === null\"\n ></div>\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 if (obs.widgetData === null) {\n <div class=\"widget-map__skeleton\">\n <cds-skeleton-placeholder></cds-skeleton-placeholder>\n </div>\n }\n</ng-container>\n", styles: [".widget-map{padding:24px;display:flex;flex-direction:column;gap:16px;width:100%;overflow:hidden;min-height:0;flex:1}.widget-map__header{display:flex;align-items:center;justify-content:space-between}.widget-map__title{color:var(--cds-text-primary);font-weight:600;font-size:16px;line-height:24px}.widget-map__render{display:flex;min-height:0;flex:1}.widget-map__render .ol-viewport{display:flex;min-height:296px;flex:1}.widget-map__skeleton{width:100%}.widget-map__skeleton cds-skeleton-placeholder{height:296px;width:100%}.widget-map__skeleton cds-skeleton-placeholder .cds--skeleton__placeholder{height:296px;width:100%}\n/*!\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"] }]
|
|
3320
3761
|
}], propDecorators: { class: [{
|
|
3321
3762
|
type: HostBinding,
|
|
3322
3763
|
args: ['class']
|
|
@@ -3459,6 +3900,7 @@ class WidgetManagementFieldsColumnComponent {
|
|
|
3459
3900
|
this.class = 'valtimo-widget-management-field-column';
|
|
3460
3901
|
this.addTranslateKey = 'widgetTabManagement.content.fields.add';
|
|
3461
3902
|
this.showHideWhenEmptyCheckbox = false;
|
|
3903
|
+
this.showSortableCheckbox = false;
|
|
3462
3904
|
this.columnUpdateEvent = new EventEmitter();
|
|
3463
3905
|
this.ValuePathSelectorPrefix = ValuePathSelectorPrefix;
|
|
3464
3906
|
this.formGroup = this.fb.group({
|
|
@@ -3470,7 +3912,20 @@ class WidgetManagementFieldsColumnComponent {
|
|
|
3470
3912
|
this.WidgetDisplayTypeKey = WidgetDisplayTypeKey;
|
|
3471
3913
|
this.$widgetType = computed(() => this.widgetWizardService.$selectedWidget()?.type ?? WidgetType.FIELDS);
|
|
3472
3914
|
this.$isFieldWidget = computed(() => this.$widgetType() === WidgetType.FIELDS);
|
|
3915
|
+
this.$isInteractiveTableWidget = computed(() => this.$widgetType() === WidgetType.INTERACTIVE_TABLE);
|
|
3916
|
+
this.defaultSortIndexForTemplate$ = this.formRows?.valueChanges.pipe(map(() => this.formRows?.getRawValue().findIndex(column => !!column.defaultSort)));
|
|
3917
|
+
this._$defaultSortIndex = signal(-1);
|
|
3473
3918
|
this.inputTheme$ = this.cdsThemeService.currentTheme$;
|
|
3919
|
+
this.DEFAULT_SORT_OPTIONS = [
|
|
3920
|
+
{
|
|
3921
|
+
id: 'ASC',
|
|
3922
|
+
translationKey: 'interface.sorting.ascending',
|
|
3923
|
+
},
|
|
3924
|
+
{
|
|
3925
|
+
id: 'DESC',
|
|
3926
|
+
translationKey: 'interface.sorting.descending',
|
|
3927
|
+
},
|
|
3928
|
+
];
|
|
3474
3929
|
this._subscriptions = new Subscription();
|
|
3475
3930
|
this.iconService.register(TrashCan16);
|
|
3476
3931
|
}
|
|
@@ -3494,6 +3949,8 @@ class WidgetManagementFieldsColumnComponent {
|
|
|
3494
3949
|
content: this.fb.control('', Validators.required),
|
|
3495
3950
|
ellipsisCharacterLimit: this.fb.control(null, Validators.pattern('[1-9][0-9]*')),
|
|
3496
3951
|
hideWhenEmpty: this.fb.control(false),
|
|
3952
|
+
sortable: this.fb.control(false),
|
|
3953
|
+
defaultSort: this.fb.control({ value: null, disabled: true }),
|
|
3497
3954
|
}));
|
|
3498
3955
|
}
|
|
3499
3956
|
onDeleteRowClick(event, formArray, index) {
|
|
@@ -3503,7 +3960,7 @@ class WidgetManagementFieldsColumnComponent {
|
|
|
3503
3960
|
formArray.removeAt(index);
|
|
3504
3961
|
}
|
|
3505
3962
|
onTypeSelected(formRow, event) {
|
|
3506
|
-
this.widgetFieldsService.onDisplayTypeSelected(['title', 'content', 'type', 'hideWhenEmpty'], formRow, event);
|
|
3963
|
+
this.widgetFieldsService.onDisplayTypeSelected(['title', 'content', 'type', 'hideWhenEmpty', 'sortable', 'defaultSort'], formRow, event);
|
|
3507
3964
|
}
|
|
3508
3965
|
onAddEnumValueClick(valuesFormArray) {
|
|
3509
3966
|
valuesFormArray.push(this.fb.group({
|
|
@@ -3511,6 +3968,15 @@ class WidgetManagementFieldsColumnComponent {
|
|
|
3511
3968
|
value: this.fb.control('', Validators.required),
|
|
3512
3969
|
}));
|
|
3513
3970
|
}
|
|
3971
|
+
onSortableCheckChange(columnIndex, checkValue) {
|
|
3972
|
+
if (checkValue)
|
|
3973
|
+
return;
|
|
3974
|
+
this.formRows?.at(columnIndex).patchValue({ defaultSort: null });
|
|
3975
|
+
}
|
|
3976
|
+
onSelectedDefaultSortChange(columnIndex) {
|
|
3977
|
+
this.formRows?.at(this._$defaultSortIndex()).patchValue({ defaultSort: null });
|
|
3978
|
+
this._$defaultSortIndex.set(columnIndex);
|
|
3979
|
+
}
|
|
3514
3980
|
typeSelectValidator(control) {
|
|
3515
3981
|
const controlValue = control.value;
|
|
3516
3982
|
if (!controlValue || !controlValue.selected)
|
|
@@ -3529,6 +3995,11 @@ class WidgetManagementFieldsColumnComponent {
|
|
|
3529
3995
|
...((!row.displayProperties || row.displayProperties?.type === WidgetDisplayTypeKey.TEXT) && {
|
|
3530
3996
|
ellipsisCharacterLimit: this.fb.control(row.displayProperties?.ellipsisCharacterLimit ?? null, Validators.pattern('[1-9][0-9]*')),
|
|
3531
3997
|
}),
|
|
3998
|
+
sortable: this.fb.control(row.sortable ?? false),
|
|
3999
|
+
defaultSort: this.fb.control({
|
|
4000
|
+
value: row.defaultSort,
|
|
4001
|
+
disabled: !row.sortable,
|
|
4002
|
+
}),
|
|
3532
4003
|
hideWhenEmpty: this.fb.control(row.displayProperties?.hideWhenEmpty ?? false),
|
|
3533
4004
|
...([WidgetDisplayTypeKey.NUMBER, WidgetDisplayTypeKey.PERCENT].includes(row.displayProperties?.type) && {
|
|
3534
4005
|
digitsInfo: this.fb.control(row.displayProperties.digitsInfo ?? ''),
|
|
@@ -3560,14 +4031,12 @@ class WidgetManagementFieldsColumnComponent {
|
|
|
3560
4031
|
this.addField();
|
|
3561
4032
|
return;
|
|
3562
4033
|
}
|
|
3563
|
-
|
|
3564
|
-
if (!rowsControl)
|
|
4034
|
+
if (!this.formRows)
|
|
3565
4035
|
return;
|
|
3566
4036
|
this.columnData.forEach((row) => {
|
|
3567
|
-
|
|
4037
|
+
this.formRows?.push(this.getRowForm(row), { emitEvent: false });
|
|
3568
4038
|
});
|
|
3569
4039
|
this.columnUpdateEvent.emit({ data: this.columnData, valid: true });
|
|
3570
|
-
this.cdr.detectChanges();
|
|
3571
4040
|
}
|
|
3572
4041
|
openFormSubscription() {
|
|
3573
4042
|
this._subscriptions.add(this.formRows?.valueChanges.pipe(debounceTime(100)).subscribe((rows) => {
|
|
@@ -3575,6 +4044,8 @@ class WidgetManagementFieldsColumnComponent {
|
|
|
3575
4044
|
key: row.title.replace(/\W+/g, '-').replace(/\-$/, '').toLowerCase(),
|
|
3576
4045
|
title: row.title,
|
|
3577
4046
|
value: row.content,
|
|
4047
|
+
...(row.sortable !== undefined && { sortable: row.sortable }),
|
|
4048
|
+
...(row.defaultSort && row.sortable && { defaultSort: row.defaultSort }),
|
|
3578
4049
|
...(!!row?.type.id && {
|
|
3579
4050
|
displayProperties: {
|
|
3580
4051
|
type: row.type.id,
|
|
@@ -3597,7 +4068,7 @@ class WidgetManagementFieldsColumnComponent {
|
|
|
3597
4068
|
}));
|
|
3598
4069
|
}
|
|
3599
4070
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: WidgetManagementFieldsColumnComponent, deps: [{ token: i1.CdsThemeService }, { token: i0.ChangeDetectorRef }, { token: i1$3.FormBuilder }, { token: i3.IconService }, { token: i2$1.TranslateService }, { token: WidgetFieldsService }, { token: WidgetWizardService }, { token: WIDGET_MANAGEMENT_SERVICE }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3600
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: WidgetManagementFieldsColumnComponent, isStandalone: true, selector: "valtimo-widget-management-fields-column", inputs: { columnData: "columnData", addTranslateKey: "addTranslateKey", fieldWidthDropdown: "fieldWidthDropdown", selectedCollection: "selectedCollection", showHideWhenEmptyCheckbox: "showHideWhenEmptyCheckbox" }, outputs: { columnUpdateEvent: "columnUpdateEvent" }, host: { properties: { "class": "this.class" } }, 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<form\n *ngIf=\"{\n inputTheme: inputTheme$ | async,\n params: params$ | async,\n widgetType: $widgetType() === 'interactive-table' ? 'table' : $widgetType(),\n } as data\"\n class=\"valtimo-widget-management-field-column\"\n [formGroup]=\"formGroup\"\n>\n <cds-accordion formArrayName=\"rows\" align=\"start\" size=\"sm\">\n @for (formRow of formRows.controls; track $index) {\n <cds-accordion-item\n [title]=\"fieldTitle\"\n [context]=\"{count: $count, index: $index, title: formRow.get('title')?.value}\"\n [expanded]=\"$index === 0\"\n class=\"valtimo-widget-management-field-column__item\"\n >\n <form [formGroup]=\"formRow\" class=\"valtimo-widget-management-field-column__container\">\n <div\n class=\"valtimo-widget-management-field-column__content\"\n [class.valtimo-widget-management-field-column__content--collection]=\"\n !!fieldWidthDropdown\n \"\n >\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.title' | translate\"\n [tooltip]=\"\n 'widgetTabManagement.content.' + data.widgetType + '.titleTooltip' | translate\n \"\n >\n </v-input-label>\n\n <input\n cdsText\n cdsLayer=\"2\"\n [attr.data-carbon-theme]=\"data.inputTheme\"\n [placeholder]=\"'widgetTabManagement.content.fields.titlePlaceholder' | translate\"\n type=\"text\"\n formControlName=\"title\"\n />\n </cds-text-label>\n\n <cds-dropdown\n [attr.data-carbon-theme]=\"data.inputTheme\"\n [label]=\"'widgetTabManagement.content.fields.type' | translate\"\n [dropUp]=\"false\"\n [placeholder]=\"'widgetTabManagement.content.fields.typePlaceholder' | translate\"\n (selected)=\"onTypeSelected(formRow, $event)\"\n formControlName=\"type\"\n >\n <cds-dropdown-list [items]=\"getDisplayItemsSelected(formRow)\"></cds-dropdown-list>\n </cds-dropdown>\n\n <ng-container\n *ngTemplateOutlet=\"fieldWidthDropdown; context: {index: $index}\"\n ></ng-container>\n\n <cds-text-label class=\"valtimo-widget-management-field-column__value-field\">\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.value' | translate\"\n [tooltip]=\"\n 'widgetTabManagement.content.' + data.widgetType + '.valueTooltip' | translate\n \"\n >\n </v-input-label>\n\n @if ($widgetContext() === 'case') {\n <valtimo-value-path-selector\n formControlName=\"content\"\n [caseDefinitionKey]=\"data.params?.caseDefinitionKey ?? 'bezwaar'\"\n [caseDefinitionVersionTag]=\"data.params?.caseDefinitionVersionTag ?? '1.0.1'\"\n [parentItem]=\"selectedCollection\"\n ></valtimo-value-path-selector>\n } @else {\n <input\n cdsText\n [attr.data-carbon-theme]=\"data.inputTheme\"\n [placeholder]=\"'widgetTabManagement.content.fields.value' | translate\"\n type=\"text\"\n formControlName=\"content\"\n />\n }\n </cds-text-label>\n </div>\n\n <div class=\"valtimo-widget-management-field-column__options\">\n @switch (formRow.get('type').value.id) {\n @case (WidgetDisplayTypeKey.CURRENCY) {\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.currencyCode' | translate\"\n [tooltip]=\"'widgetTabManagement.content.fields.currencyCodeTooltip' | translate\"\n >\n </v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"data.inputTheme\"\n [placeholder]=\"\n 'widgetTabManagement.content.fields.currencyCodePlaceholder' | translate\n \"\n type=\"text\"\n formControlName=\"currencyCode\"\n />\n </cds-text-label>\n\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.display' | translate\"\n [tooltip]=\"'widgetTabManagement.content.fields.displayTooltip' | translate\"\n >\n </v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"data.inputTheme\"\n [placeholder]=\"\n 'widgetTabManagement.content.fields.displayPlaceholder' | translate\n \"\n type=\"text\"\n formControlName=\"display\"\n />\n </cds-text-label>\n\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n tooltip=\"{{\n 'widgetTabManagement.content.fields.digitsInfoTooltip'\n | translate: {minFractionDigits: 2, maxFractionDigits: 2}\n }}\"\n >\n </v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"data.inputTheme\"\n [placeholder]=\"\n 'widgetTabManagement.content.fields.digitsInfoPlaceholder' | translate\n \"\n type=\"text\"\n formControlName=\"digitsInfo\"\n />\n </cds-text-label>\n }\n @case (WidgetDisplayTypeKey.DATE) {\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.format' | translate\"\n [tooltip]=\"'widgetTabManagement.content.fields.dateFormatTooltip' | translate\"\n ></v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"data.inputTheme\"\n [placeholder]=\"\n 'widgetTabManagement.content.fields.formatPlaceholder' | translate\n \"\n type=\"text\"\n formControlName=\"format\"\n />\n </cds-text-label>\n }\n @case (WidgetDisplayTypeKey.DATE_TIME) {\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.format' | translate\"\n [tooltip]=\"\n 'widgetTabManagement.content.fields.dateTimeFormatTooltip' | translate\n \"\n ></v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"data.inputTheme\"\n [placeholder]=\"\n 'widgetTabManagement.content.fields.formatPlaceholder' | translate\n \"\n type=\"text\"\n formControlName=\"format\"\n />\n </cds-text-label>\n }\n @case (WidgetDisplayTypeKey.ENUM) {\n <div class=\"valtimo-widget-management-field-column__enum\" formArrayName=\"values\">\n @for (rowValue of formRow.get('values')?.controls; track $index) {\n <form\n [formGroup]=\"rowValue\"\n class=\"valtimo-widget-management-field-column__enum-form\"\n >\n <cds-text-label>\n <v-input-label\n *ngIf=\"$index === 0\"\n [title]=\"'widgetTabManagement.content.fields.enumValue' | translate\"\n [tooltip]=\"\n 'widgetTabManagement.content.fields.enumValueTooltip' | translate\n \"\n ></v-input-label>\n\n <input\n [attr.data-carbon-theme]=\"data.inputTheme\"\n cdsText\n [placeholder]=\"'widgetTabManagement.content.fields.enumValue' | translate\"\n type=\"text\"\n formControlName=\"key\"\n />\n </cds-text-label>\n\n <cds-text-label>\n <v-input-label\n *ngIf=\"$index === 0\"\n [title]=\"'widgetTabManagement.content.fields.enumDisplay' | translate\"\n [tooltip]=\"\n 'widgetTabManagement.content.fields.enumDisplayTooltip' | translate\n \"\n ></v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"data.inputTheme\"\n [placeholder]=\"\n 'widgetTabManagement.content.fields.enumDisplay' | translate\n \"\n type=\"text\"\n formControlName=\"value\"\n />\n </cds-text-label>\n\n <button\n cdsButton=\"danger--ghost\"\n [disabled]=\"$count === 1\"\n [iconOnly]=\"true\"\n class=\"valtimo-widget-management-field-column__delete-button enum\"\n (click)=\"onDeleteRowClick($event, formRow.get('values'), $index)\"\n >\n <svg cdsIcon=\"trash-can\" size=\"16\"></svg>\n </button>\n </form>\n }\n\n <button\n cdsButton=\"primary\"\n size=\"sm\"\n (click)=\"onAddEnumValueClick(formRow.get('values'))\"\n >\n {{ 'widgetTabManagement.content.fields.addEnum' | translate }}\n\n <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n </button>\n </div>\n }\n @case (WidgetDisplayTypeKey.NUMBER) {\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n tooltip=\"{{\n 'widgetTabManagement.content.fields.digitsInfoTooltip'\n | translate\n : {\n minFractionDigits: 0,\n maxFractionDigits: 3,\n }\n }}\"\n >\n </v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"data.inputTheme\"\n [placeholder]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n type=\"text\"\n formControlName=\"digitsInfo\"\n />\n </cds-text-label>\n }\n @case (WidgetDisplayTypeKey.PERCENT) {\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n tooltip=\"{{\n 'widgetTabManagement.content.fields.digitsInfoTooltip'\n | translate\n : {\n minFractionDigits: 0,\n maxFractionDigits: 0,\n }\n }}\"\n >\n </v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"data.inputTheme\"\n [placeholder]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n type=\"text\"\n formControlName=\"digitsInfo\"\n />\n </cds-text-label>\n }\n @case (WidgetDisplayTypeKey.LINK) {\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.linkText' | translate\"\n [tooltip]=\"'widgetTabManagement.content.fields.linkTextTooltip' | translate\"\n >\n </v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"data.inputTheme\"\n [placeholder]=\"\n 'widgetTabManagement.content.fields.linkTextPlaceholder' | translate\n \"\n type=\"text\"\n formControlName=\"linkText\"\n />\n </cds-text-label>\n }\n }\n\n <cds-text-label\n *ngIf=\"formRow.get('type').value.id === WidgetDisplayTypeKey.TEXT && $isFieldWidget()\"\n >\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.ellipsisCharacterLimit' | translate\"\n tooltip=\"{{\n 'widgetTabManagement.content.fields.ellipsisCharacterLimitTooltip' | translate\n }}\"\n >\n </v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"data.inputTheme\"\n [placeholder]=\"\n 'widgetTabManagement.content.fields.ellipsisCharacterLimitPlaceholder' | translate\n \"\n type=\"text\"\n formControlName=\"ellipsisCharacterLimit\"\n />\n </cds-text-label>\n\n <cds-checkbox *ngIf=\"showHideWhenEmptyCheckbox\" formControlName=\"hideWhenEmpty\">\n {{ 'widgetTabManagement.content.hideWhenEmpty' | translate }}\n </cds-checkbox>\n </div>\n </form>\n </cds-accordion-item>\n }\n </cds-accordion>\n\n <button cdsButton=\"primary\" size=\"sm\" (click)=\"addField()\">\n {{ addTranslateKey | translate }}\n\n <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n </button>\n</form>\n\n<ng-template #fieldTitle let-count=\"count\" let-index=\"index\" let-title=\"title\">\n <div class=\"valtimo-widget-management-field-column__title\">\n {{ title || ('widgetTabManagement.content.fields.titlePlaceholder' | translate) }}\n\n <button\n cdsButton=\"danger\"\n [disabled]=\"count === 1\"\n [iconOnly]=\"true\"\n (click)=\"onDeleteRowClick($event, formRows, index)\"\n class=\"valtimo-widget-management-field-column__delete-button\"\n >\n <svg cdsIcon=\"trash-can\" size=\"16\"></svg>\n </button>\n </div>\n</ng-template>\n", styles: [".valtimo-widget-management-field-column{display:flex;flex-direction:column;gap:16px;background:var(--cds-layer-02)}.valtimo-widget-management-field-column__item,.valtimo-widget-management-field-column__cotainer{background:var(--cds-layer-01)}.valtimo-widget-management-field-column__item .cds--accordion__content{padding-inline-end:20px}.valtimo-widget-management-field-column__container{display:flex;flex-direction:column;gap:16px}.valtimo-widget-management-field-column__content{display:grid;grid-template-columns:1fr 180px 1fr;align-items:flex-end;gap:16px}.valtimo-widget-management-field-column__content--collection{grid-template-columns:1fr 180px 180px 1fr}.valtimo-widget-management-field-column__title{display:flex;justify-content:space-between;align-items:center;width:100%;padding:8px}.valtimo-widget-management-field-column__delete-button{display:flex;align-items:center;justify-content:center;padding:0;align-self:center}.valtimo-widget-management-field-column__delete-button.enum{align-self:flex-end}.valtimo-widget-management-field-column__path-selector{display:flex;flex-direction:column}.valtimo-widget-management-field-column__options{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.valtimo-widget-management-field-column__enum{display:flex;flex-direction:column;gap:16px}.valtimo-widget-management-field-column__enum-form{display:grid;grid-template-columns:1fr 1fr auto;align-items:flex-end;gap:16px}.valtimo-widget-management-field-column__value-field .cds--label{width:100%;margin:0}.valtimo-widget-management-field-column__value-field .cds--label cds-label{margin-bottom:8px}.valtimo-widget-management-field-column cds-checkbox{display:flex;align-items:flex-end}.valtimo-widget-management-field-column .cds--text-input,.valtimo-widget-management-field-column .cds--list-box{background:var(--cds-layer-02)}\n/*!\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"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i7.Dropdown, selector: "cds-dropdown, ibm-dropdown", inputs: ["id", "label", "hideLabel", "helperText", "placeholder", "displayValue", "clearText", "size", "type", "theme", "disabled", "readonly", "skeleton", "inline", "disableArrowKeys", "invalid", "invalidText", "warn", "warnText", "appendInline", "scrollableContainer", "itemValueKey", "selectionFeedback", "menuButtonLabel", "selectedLabel", "dropUp", "fluid"], outputs: ["selected", "onClose", "close"] }, { kind: "component", type: i7.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i3.TextInputLabelComponent, selector: "cds-text-label, ibm-text-label", inputs: ["labelInputID", "disabled", "skeleton", "labelTemplate", "textInputTemplate", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel", "fluid"] }, { kind: "directive", type: i3.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$3.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: IconModule }, { kind: "directive", type: i3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "ngmodule", type: AccordionModule }, { kind: "component", type: i3.Accordion, selector: "cds-accordion, ibm-accordion", inputs: ["align", "size", "skeleton"] }, { kind: "component", type: i3.AccordionItem, selector: "cds-accordion-item, ibm-accordion-item", inputs: ["title", "context", "id", "skeleton", "expanded", "disabled"], outputs: ["selected"] }, { kind: "ngmodule", type: InputLabelModule }, { kind: "component", type: i1.InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "tooltipTranslationKey", "largeMargin", "small", "noMargin", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }, { kind: "component", type: ValuePathSelectorComponent, selector: "valtimo-value-path-selector", inputs: ["name", "appendInline", "margin", "marginLg", "marginXl", "disabled", "caseDefinitionKey", "caseDefinitionVersionTag", "prefixes", "label", "tooltip", "required", "showCaseDefinitionSelector", "notation", "defaultValue", "type", "parentItem"], outputs: ["valueChangeEvent", "collectionSelected"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i3.Checkbox, selector: "cds-checkbox, ibm-checkbox", inputs: ["disabled", "skeleton", "hideLabel", "name", "id", "required", "value", "ariaLabel", "ariaLabelledby", "indeterminate", "checked"], outputs: ["click", "checkedChange", "indeterminateChange"] }, { kind: "ngmodule", type: LayerModule }, { kind: "directive", type: i3.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
4071
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: WidgetManagementFieldsColumnComponent, isStandalone: true, selector: "valtimo-widget-management-fields-column", inputs: { columnData: "columnData", addTranslateKey: "addTranslateKey", fieldWidthDropdown: "fieldWidthDropdown", selectedCollection: "selectedCollection", showHideWhenEmptyCheckbox: "showHideWhenEmptyCheckbox", showSortableCheckbox: "showSortableCheckbox" }, outputs: { columnUpdateEvent: "columnUpdateEvent" }, host: { properties: { "class": "this.class" } }, 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<form\n *ngIf=\"{\n inputTheme: inputTheme$ | async,\n params: params$ | async,\n widgetType: $widgetType() === 'interactive-table' ? 'table' : $widgetType(),\n defaultSortIndex: defaultSortIndexForTemplate$ | async,\n isInteractiveTable: $widgetType() === 'interactive-table',\n } as data\"\n class=\"valtimo-widget-management-field-column\"\n [formGroup]=\"formGroup\"\n>\n <cds-accordion formArrayName=\"rows\" align=\"start\" size=\"sm\">\n @for (formRow of formRows.controls; track $index) {\n <cds-accordion-item\n [title]=\"fieldTitle\"\n [context]=\"{\n count: $count,\n index: $index,\n title: formRow.get('title')?.value,\n defaultSortIndex: data.defaultSortIndex,\n }\"\n [expanded]=\"$index === 0\"\n class=\"valtimo-widget-management-field-column__item\"\n >\n <form [formGroup]=\"formRow\" class=\"valtimo-widget-management-field-column__container\">\n <div\n class=\"valtimo-widget-management-field-column__content\"\n [class.valtimo-widget-management-field-column__content--collection]=\"\n !!fieldWidthDropdown\n \"\n >\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.title' | translate\"\n [tooltip]=\"\n 'widgetTabManagement.content.' + data.widgetType + '.titleTooltip' | translate\n \"\n >\n </v-input-label>\n\n <input\n cdsText\n cdsLayer=\"2\"\n [attr.data-carbon-theme]=\"data.inputTheme\"\n [placeholder]=\"'widgetTabManagement.content.fields.titlePlaceholder' | translate\"\n type=\"text\"\n formControlName=\"title\"\n />\n </cds-text-label>\n\n <cds-dropdown\n [attr.data-carbon-theme]=\"data.inputTheme\"\n [label]=\"'widgetTabManagement.content.fields.type' | translate\"\n [dropUp]=\"false\"\n [placeholder]=\"'widgetTabManagement.content.fields.typePlaceholder' | translate\"\n (selected)=\"onTypeSelected(formRow, $event)\"\n formControlName=\"type\"\n >\n <cds-dropdown-list [items]=\"getDisplayItemsSelected(formRow)\"></cds-dropdown-list>\n </cds-dropdown>\n\n <ng-container\n *ngTemplateOutlet=\"fieldWidthDropdown; context: {index: $index}\"\n ></ng-container>\n\n <cds-text-label class=\"valtimo-widget-management-field-column__value-field\">\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.value' | translate\"\n [tooltip]=\"\n 'widgetTabManagement.content.' + data.widgetType + '.valueTooltip' | translate\n \"\n >\n </v-input-label>\n\n @if ($widgetContext() === 'case') {\n <valtimo-value-path-selector\n formControlName=\"content\"\n [caseDefinitionKey]=\"data.params?.caseDefinitionKey ?? 'bezwaar'\"\n [caseDefinitionVersionTag]=\"data.params?.caseDefinitionVersionTag ?? '1.0.1'\"\n [parentItem]=\"selectedCollection\"\n ></valtimo-value-path-selector>\n } @else {\n <input\n cdsText\n [attr.data-carbon-theme]=\"data.inputTheme\"\n [placeholder]=\"'widgetTabManagement.content.fields.value' | translate\"\n type=\"text\"\n formControlName=\"content\"\n />\n }\n </cds-text-label>\n </div>\n\n <div class=\"valtimo-widget-management-field-column__options\">\n @switch (formRow.get('type').value.id) {\n @case (WidgetDisplayTypeKey.CURRENCY) {\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.currencyCode' | translate\"\n [tooltip]=\"'widgetTabManagement.content.fields.currencyCodeTooltip' | translate\"\n >\n </v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"data.inputTheme\"\n [placeholder]=\"\n 'widgetTabManagement.content.fields.currencyCodePlaceholder' | translate\n \"\n type=\"text\"\n formControlName=\"currencyCode\"\n />\n </cds-text-label>\n\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.display' | translate\"\n [tooltip]=\"'widgetTabManagement.content.fields.displayTooltip' | translate\"\n >\n </v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"data.inputTheme\"\n [placeholder]=\"\n 'widgetTabManagement.content.fields.displayPlaceholder' | translate\n \"\n type=\"text\"\n formControlName=\"display\"\n />\n </cds-text-label>\n\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n tooltip=\"{{\n 'widgetTabManagement.content.fields.digitsInfoTooltip'\n | translate: {minFractionDigits: 2, maxFractionDigits: 2}\n }}\"\n >\n </v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"data.inputTheme\"\n [placeholder]=\"\n 'widgetTabManagement.content.fields.digitsInfoPlaceholder' | translate\n \"\n type=\"text\"\n formControlName=\"digitsInfo\"\n />\n </cds-text-label>\n }\n @case (WidgetDisplayTypeKey.DATE) {\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.format' | translate\"\n [tooltip]=\"'widgetTabManagement.content.fields.dateFormatTooltip' | translate\"\n ></v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"data.inputTheme\"\n [placeholder]=\"\n 'widgetTabManagement.content.fields.formatPlaceholder' | translate\n \"\n type=\"text\"\n formControlName=\"format\"\n />\n </cds-text-label>\n }\n @case (WidgetDisplayTypeKey.DATE_TIME) {\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.format' | translate\"\n [tooltip]=\"\n 'widgetTabManagement.content.fields.dateTimeFormatTooltip' | translate\n \"\n ></v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"data.inputTheme\"\n [placeholder]=\"\n 'widgetTabManagement.content.fields.formatPlaceholder' | translate\n \"\n type=\"text\"\n formControlName=\"format\"\n />\n </cds-text-label>\n }\n @case (WidgetDisplayTypeKey.ENUM) {\n <div class=\"valtimo-widget-management-field-column__enum\" formArrayName=\"values\">\n @for (rowValue of formRow.get('values')?.controls; track $index) {\n <form\n [formGroup]=\"rowValue\"\n class=\"valtimo-widget-management-field-column__enum-form\"\n >\n <cds-text-label>\n <v-input-label\n *ngIf=\"$index === 0\"\n [title]=\"'widgetTabManagement.content.fields.enumValue' | translate\"\n [tooltip]=\"\n 'widgetTabManagement.content.fields.enumValueTooltip' | translate\n \"\n ></v-input-label>\n\n <input\n [attr.data-carbon-theme]=\"data.inputTheme\"\n cdsText\n [placeholder]=\"'widgetTabManagement.content.fields.enumValue' | translate\"\n type=\"text\"\n formControlName=\"key\"\n />\n </cds-text-label>\n\n <cds-text-label>\n <v-input-label\n *ngIf=\"$index === 0\"\n [title]=\"'widgetTabManagement.content.fields.enumDisplay' | translate\"\n [tooltip]=\"\n 'widgetTabManagement.content.fields.enumDisplayTooltip' | translate\n \"\n ></v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"data.inputTheme\"\n [placeholder]=\"\n 'widgetTabManagement.content.fields.enumDisplay' | translate\n \"\n type=\"text\"\n formControlName=\"value\"\n />\n </cds-text-label>\n\n <button\n cdsButton=\"danger--ghost\"\n [disabled]=\"$count === 1\"\n [iconOnly]=\"true\"\n class=\"valtimo-widget-management-field-column__delete-button enum\"\n (click)=\"onDeleteRowClick($event, formRow.get('values'), $index)\"\n >\n <svg cdsIcon=\"trash-can\" size=\"16\"></svg>\n </button>\n </form>\n }\n\n <button\n cdsButton=\"primary\"\n size=\"sm\"\n (click)=\"onAddEnumValueClick(formRow.get('values'))\"\n >\n {{ 'widgetTabManagement.content.fields.addEnum' | translate }}\n\n <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n </button>\n </div>\n }\n @case (WidgetDisplayTypeKey.NUMBER) {\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n tooltip=\"{{\n 'widgetTabManagement.content.fields.digitsInfoTooltip'\n | translate\n : {\n minFractionDigits: 0,\n maxFractionDigits: 3,\n }\n }}\"\n >\n </v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"data.inputTheme\"\n [placeholder]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n type=\"text\"\n formControlName=\"digitsInfo\"\n />\n </cds-text-label>\n }\n @case (WidgetDisplayTypeKey.PERCENT) {\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n tooltip=\"{{\n 'widgetTabManagement.content.fields.digitsInfoTooltip'\n | translate\n : {\n minFractionDigits: 0,\n maxFractionDigits: 0,\n }\n }}\"\n >\n </v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"data.inputTheme\"\n [placeholder]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n type=\"text\"\n formControlName=\"digitsInfo\"\n />\n </cds-text-label>\n }\n @case (WidgetDisplayTypeKey.LINK) {\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.linkText' | translate\"\n [tooltip]=\"'widgetTabManagement.content.fields.linkTextTooltip' | translate\"\n >\n </v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"data.inputTheme\"\n [placeholder]=\"\n 'widgetTabManagement.content.fields.linkTextPlaceholder' | translate\n \"\n type=\"text\"\n formControlName=\"linkText\"\n />\n </cds-text-label>\n }\n }\n\n <cds-text-label\n *ngIf=\"formRow.get('type').value.id === WidgetDisplayTypeKey.TEXT && $isFieldWidget()\"\n >\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.ellipsisCharacterLimit' | translate\"\n tooltip=\"{{\n 'widgetTabManagement.content.fields.ellipsisCharacterLimitTooltip' | translate\n }}\"\n >\n </v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"data.inputTheme\"\n [placeholder]=\"\n 'widgetTabManagement.content.fields.ellipsisCharacterLimitPlaceholder' | translate\n \"\n type=\"text\"\n formControlName=\"ellipsisCharacterLimit\"\n />\n </cds-text-label>\n\n <cds-checkbox *ngIf=\"showHideWhenEmptyCheckbox\" formControlName=\"hideWhenEmpty\">\n {{ 'widgetTabManagement.content.hideWhenEmpty' | translate }}\n </cds-checkbox>\n\n <div\n *ngIf=\"showSortableCheckbox\"\n class=\"valtimo-widget-management-field-column__sorting\"\n >\n <cds-checkbox\n formControlName=\"sortable\"\n (checkedChange)=\"onSortableCheckChange($index, $event)\"\n >\n {{ 'listColumn.sortable' | translate }}\n </cds-checkbox>\n\n <v-select\n formControlName=\"defaultSort\"\n [disabled]=\"!formRow.get('sortable')?.value\"\n [items]=\"DEFAULT_SORT_OPTIONS\"\n [dropUp]=\"false\"\n [placeholder]=\"'interface.sorting.noDefault' | translate\"\n [defaultSelectionId]=\"formRow.get('defaultSort')?.value\"\n [warn]=\"\n data.defaultSortIndex !== -1 &&\n data.defaultSortIndex !== $index &&\n !!formRow.get('sortable')?.value\n \"\n [warnText]=\"'widgetTabManagement.content.fields.defaultSortWarning' | translate\"\n (selectedChange)=\"onSelectedDefaultSortChange($index)\"\n ></v-select>\n </div>\n </div>\n </form>\n </cds-accordion-item>\n }\n </cds-accordion>\n\n <button cdsButton=\"primary\" size=\"sm\" (click)=\"addField()\">\n {{ addTranslateKey | translate }}\n\n <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n </button>\n</form>\n\n<ng-template\n #fieldTitle\n let-defaultSortIndex=\"defaultSortIndex\"\n let-count=\"count\"\n let-index=\"index\"\n let-title=\"title\"\n>\n <div class=\"valtimo-widget-management-field-column__title\">\n <section>\n {{ title || ('widgetTabManagement.content.fields.titlePlaceholder' | translate) }}\n\n <cds-tag *ngIf=\"$isInteractiveTableWidget() && defaultSortIndex === index\" type=\"blue\">\n {{ 'ikoManagement.defaultSortTitle' | translate }}\n </cds-tag>\n </section>\n\n <button\n cdsButton=\"danger\"\n [disabled]=\"count === 1\"\n [iconOnly]=\"true\"\n (click)=\"onDeleteRowClick($event, formRows, index)\"\n class=\"valtimo-widget-management-field-column__delete-button\"\n >\n <svg cdsIcon=\"trash-can\" size=\"16\"></svg>\n </button>\n </div>\n</ng-template>\n", styles: [".valtimo-widget-management-field-column{display:flex;flex-direction:column;gap:16px;background:var(--cds-layer-02)}.valtimo-widget-management-field-column__item,.valtimo-widget-management-field-column__cotainer{background:var(--cds-layer-01)}.valtimo-widget-management-field-column__item .cds--accordion__content{padding-inline-end:20px}.valtimo-widget-management-field-column__container{display:flex;flex-direction:column;gap:16px}.valtimo-widget-management-field-column__content{display:grid;grid-template-columns:1fr 180px 1fr;align-items:flex-end;gap:16px}.valtimo-widget-management-field-column__content--collection{grid-template-columns:1fr 180px 180px 1fr}.valtimo-widget-management-field-column__title{display:flex;justify-content:space-between;align-items:center;width:100%;padding:8px}.valtimo-widget-management-field-column__delete-button{display:flex;align-items:center;justify-content:center;padding:0;align-self:center}.valtimo-widget-management-field-column__delete-button.enum{align-self:flex-end}.valtimo-widget-management-field-column__path-selector{display:flex;flex-direction:column}.valtimo-widget-management-field-column__options{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.valtimo-widget-management-field-column__sorting{display:flex;align-items:center;align-self:flex-end;gap:16px}.valtimo-widget-management-field-column__enum{display:flex;flex-direction:column;gap:16px}.valtimo-widget-management-field-column__enum-form{display:grid;grid-template-columns:1fr 1fr auto;align-items:flex-end;gap:16px}.valtimo-widget-management-field-column__value-field .cds--label{width:100%;margin:0}.valtimo-widget-management-field-column__value-field .cds--label cds-label{margin-bottom:8px}.valtimo-widget-management-field-column cds-checkbox{display:flex;align-items:flex-end}.valtimo-widget-management-field-column .cds--text-input,.valtimo-widget-management-field-column .cds--list-box{background:var(--cds-layer-02)}\n/*!\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"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i7.Dropdown, selector: "cds-dropdown, ibm-dropdown", inputs: ["id", "label", "hideLabel", "helperText", "placeholder", "displayValue", "clearText", "size", "type", "theme", "disabled", "readonly", "skeleton", "inline", "disableArrowKeys", "invalid", "invalidText", "warn", "warnText", "appendInline", "scrollableContainer", "itemValueKey", "selectionFeedback", "menuButtonLabel", "selectedLabel", "dropUp", "fluid"], outputs: ["selected", "onClose", "close"] }, { kind: "component", type: i7.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i3.TextInputLabelComponent, selector: "cds-text-label, ibm-text-label", inputs: ["labelInputID", "disabled", "skeleton", "labelTemplate", "textInputTemplate", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel", "fluid"] }, { kind: "directive", type: i3.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$3.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: IconModule }, { kind: "directive", type: i3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "ngmodule", type: AccordionModule }, { kind: "component", type: i3.Accordion, selector: "cds-accordion, ibm-accordion", inputs: ["align", "size", "skeleton"] }, { kind: "component", type: i3.AccordionItem, selector: "cds-accordion-item, ibm-accordion-item", inputs: ["title", "context", "id", "skeleton", "expanded", "disabled"], outputs: ["selected"] }, { kind: "ngmodule", type: InputLabelModule }, { kind: "component", type: i1.InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "tooltipTranslationKey", "largeMargin", "small", "noMargin", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }, { kind: "component", type: ValuePathSelectorComponent, selector: "valtimo-value-path-selector", inputs: ["name", "appendInline", "margin", "marginLg", "marginXl", "disabled", "caseDefinitionKey", "caseDefinitionVersionTag", "prefixes", "label", "tooltip", "required", "showCaseDefinitionSelector", "notation", "defaultValue", "type", "parentItem"], outputs: ["valueChangeEvent", "collectionSelected"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i3.Checkbox, selector: "cds-checkbox, ibm-checkbox", inputs: ["disabled", "skeleton", "hideLabel", "name", "id", "required", "value", "ariaLabel", "ariaLabelledby", "indeterminate", "checked"], outputs: ["click", "checkedChange", "indeterminateChange"] }, { kind: "ngmodule", type: LayerModule }, { kind: "directive", type: i3.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i1.SelectComponent, selector: "v-select", inputs: ["items", "defaultSelection", "defaultSelectionId", "defaultSelectionIds", "disabled", "dropUp", "invalid", "multiple", "margin", "widthInPx", "notFoundText", "clearAllText", "clearText", "clearable", "name", "title", "titleTranslationKey", "clearSelectionSubject$", "tooltip", "required", "loading", "loadingText", "placeholder", "smallMargin", "carbonTheme", "appendInline", "warn", "warnText", "dataTestId"], outputs: ["selectedChange"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i3.Tag, selector: "cds-tag, ibm-tag", inputs: ["type", "size", "class", "skeleton"] }, { kind: "ngmodule", type: ToggleModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
3601
4072
|
}
|
|
3602
4073
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: WidgetManagementFieldsColumnComponent, decorators: [{
|
|
3603
4074
|
type: Component,
|
|
@@ -3614,7 +4085,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
|
|
|
3614
4085
|
ValuePathSelectorComponent,
|
|
3615
4086
|
CheckboxModule,
|
|
3616
4087
|
LayerModule,
|
|
3617
|
-
], 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<form\n *ngIf=\"{\n inputTheme: inputTheme$ | async,\n params: params$ | async,\n widgetType: $widgetType() === 'interactive-table' ? 'table' : $widgetType(),\n } as data\"\n class=\"valtimo-widget-management-field-column\"\n [formGroup]=\"formGroup\"\n>\n <cds-accordion formArrayName=\"rows\" align=\"start\" size=\"sm\">\n @for (formRow of formRows.controls; track $index) {\n <cds-accordion-item\n [title]=\"fieldTitle\"\n [context]=\"{count: $count, index: $index, title: formRow.get('title')?.value}\"\n [expanded]=\"$index === 0\"\n class=\"valtimo-widget-management-field-column__item\"\n >\n <form [formGroup]=\"formRow\" class=\"valtimo-widget-management-field-column__container\">\n <div\n class=\"valtimo-widget-management-field-column__content\"\n [class.valtimo-widget-management-field-column__content--collection]=\"\n !!fieldWidthDropdown\n \"\n >\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.title' | translate\"\n [tooltip]=\"\n 'widgetTabManagement.content.' + data.widgetType + '.titleTooltip' | translate\n \"\n >\n </v-input-label>\n\n <input\n cdsText\n cdsLayer=\"2\"\n [attr.data-carbon-theme]=\"data.inputTheme\"\n [placeholder]=\"'widgetTabManagement.content.fields.titlePlaceholder' | translate\"\n type=\"text\"\n formControlName=\"title\"\n />\n </cds-text-label>\n\n <cds-dropdown\n [attr.data-carbon-theme]=\"data.inputTheme\"\n [label]=\"'widgetTabManagement.content.fields.type' | translate\"\n [dropUp]=\"false\"\n [placeholder]=\"'widgetTabManagement.content.fields.typePlaceholder' | translate\"\n (selected)=\"onTypeSelected(formRow, $event)\"\n formControlName=\"type\"\n >\n <cds-dropdown-list [items]=\"getDisplayItemsSelected(formRow)\"></cds-dropdown-list>\n </cds-dropdown>\n\n <ng-container\n *ngTemplateOutlet=\"fieldWidthDropdown; context: {index: $index}\"\n ></ng-container>\n\n <cds-text-label class=\"valtimo-widget-management-field-column__value-field\">\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.value' | translate\"\n [tooltip]=\"\n 'widgetTabManagement.content.' + data.widgetType + '.valueTooltip' | translate\n \"\n >\n </v-input-label>\n\n @if ($widgetContext() === 'case') {\n <valtimo-value-path-selector\n formControlName=\"content\"\n [caseDefinitionKey]=\"data.params?.caseDefinitionKey ?? 'bezwaar'\"\n [caseDefinitionVersionTag]=\"data.params?.caseDefinitionVersionTag ?? '1.0.1'\"\n [parentItem]=\"selectedCollection\"\n ></valtimo-value-path-selector>\n } @else {\n <input\n cdsText\n [attr.data-carbon-theme]=\"data.inputTheme\"\n [placeholder]=\"'widgetTabManagement.content.fields.value' | translate\"\n type=\"text\"\n formControlName=\"content\"\n />\n }\n </cds-text-label>\n </div>\n\n <div class=\"valtimo-widget-management-field-column__options\">\n @switch (formRow.get('type').value.id) {\n @case (WidgetDisplayTypeKey.CURRENCY) {\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.currencyCode' | translate\"\n [tooltip]=\"'widgetTabManagement.content.fields.currencyCodeTooltip' | translate\"\n >\n </v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"data.inputTheme\"\n [placeholder]=\"\n 'widgetTabManagement.content.fields.currencyCodePlaceholder' | translate\n \"\n type=\"text\"\n formControlName=\"currencyCode\"\n />\n </cds-text-label>\n\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.display' | translate\"\n [tooltip]=\"'widgetTabManagement.content.fields.displayTooltip' | translate\"\n >\n </v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"data.inputTheme\"\n [placeholder]=\"\n 'widgetTabManagement.content.fields.displayPlaceholder' | translate\n \"\n type=\"text\"\n formControlName=\"display\"\n />\n </cds-text-label>\n\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n tooltip=\"{{\n 'widgetTabManagement.content.fields.digitsInfoTooltip'\n | translate: {minFractionDigits: 2, maxFractionDigits: 2}\n }}\"\n >\n </v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"data.inputTheme\"\n [placeholder]=\"\n 'widgetTabManagement.content.fields.digitsInfoPlaceholder' | translate\n \"\n type=\"text\"\n formControlName=\"digitsInfo\"\n />\n </cds-text-label>\n }\n @case (WidgetDisplayTypeKey.DATE) {\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.format' | translate\"\n [tooltip]=\"'widgetTabManagement.content.fields.dateFormatTooltip' | translate\"\n ></v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"data.inputTheme\"\n [placeholder]=\"\n 'widgetTabManagement.content.fields.formatPlaceholder' | translate\n \"\n type=\"text\"\n formControlName=\"format\"\n />\n </cds-text-label>\n }\n @case (WidgetDisplayTypeKey.DATE_TIME) {\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.format' | translate\"\n [tooltip]=\"\n 'widgetTabManagement.content.fields.dateTimeFormatTooltip' | translate\n \"\n ></v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"data.inputTheme\"\n [placeholder]=\"\n 'widgetTabManagement.content.fields.formatPlaceholder' | translate\n \"\n type=\"text\"\n formControlName=\"format\"\n />\n </cds-text-label>\n }\n @case (WidgetDisplayTypeKey.ENUM) {\n <div class=\"valtimo-widget-management-field-column__enum\" formArrayName=\"values\">\n @for (rowValue of formRow.get('values')?.controls; track $index) {\n <form\n [formGroup]=\"rowValue\"\n class=\"valtimo-widget-management-field-column__enum-form\"\n >\n <cds-text-label>\n <v-input-label\n *ngIf=\"$index === 0\"\n [title]=\"'widgetTabManagement.content.fields.enumValue' | translate\"\n [tooltip]=\"\n 'widgetTabManagement.content.fields.enumValueTooltip' | translate\n \"\n ></v-input-label>\n\n <input\n [attr.data-carbon-theme]=\"data.inputTheme\"\n cdsText\n [placeholder]=\"'widgetTabManagement.content.fields.enumValue' | translate\"\n type=\"text\"\n formControlName=\"key\"\n />\n </cds-text-label>\n\n <cds-text-label>\n <v-input-label\n *ngIf=\"$index === 0\"\n [title]=\"'widgetTabManagement.content.fields.enumDisplay' | translate\"\n [tooltip]=\"\n 'widgetTabManagement.content.fields.enumDisplayTooltip' | translate\n \"\n ></v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"data.inputTheme\"\n [placeholder]=\"\n 'widgetTabManagement.content.fields.enumDisplay' | translate\n \"\n type=\"text\"\n formControlName=\"value\"\n />\n </cds-text-label>\n\n <button\n cdsButton=\"danger--ghost\"\n [disabled]=\"$count === 1\"\n [iconOnly]=\"true\"\n class=\"valtimo-widget-management-field-column__delete-button enum\"\n (click)=\"onDeleteRowClick($event, formRow.get('values'), $index)\"\n >\n <svg cdsIcon=\"trash-can\" size=\"16\"></svg>\n </button>\n </form>\n }\n\n <button\n cdsButton=\"primary\"\n size=\"sm\"\n (click)=\"onAddEnumValueClick(formRow.get('values'))\"\n >\n {{ 'widgetTabManagement.content.fields.addEnum' | translate }}\n\n <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n </button>\n </div>\n }\n @case (WidgetDisplayTypeKey.NUMBER) {\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n tooltip=\"{{\n 'widgetTabManagement.content.fields.digitsInfoTooltip'\n | translate\n : {\n minFractionDigits: 0,\n maxFractionDigits: 3,\n }\n }}\"\n >\n </v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"data.inputTheme\"\n [placeholder]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n type=\"text\"\n formControlName=\"digitsInfo\"\n />\n </cds-text-label>\n }\n @case (WidgetDisplayTypeKey.PERCENT) {\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n tooltip=\"{{\n 'widgetTabManagement.content.fields.digitsInfoTooltip'\n | translate\n : {\n minFractionDigits: 0,\n maxFractionDigits: 0,\n }\n }}\"\n >\n </v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"data.inputTheme\"\n [placeholder]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n type=\"text\"\n formControlName=\"digitsInfo\"\n />\n </cds-text-label>\n }\n @case (WidgetDisplayTypeKey.LINK) {\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.linkText' | translate\"\n [tooltip]=\"'widgetTabManagement.content.fields.linkTextTooltip' | translate\"\n >\n </v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"data.inputTheme\"\n [placeholder]=\"\n 'widgetTabManagement.content.fields.linkTextPlaceholder' | translate\n \"\n type=\"text\"\n formControlName=\"linkText\"\n />\n </cds-text-label>\n }\n }\n\n <cds-text-label\n *ngIf=\"formRow.get('type').value.id === WidgetDisplayTypeKey.TEXT && $isFieldWidget()\"\n >\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.ellipsisCharacterLimit' | translate\"\n tooltip=\"{{\n 'widgetTabManagement.content.fields.ellipsisCharacterLimitTooltip' | translate\n }}\"\n >\n </v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"data.inputTheme\"\n [placeholder]=\"\n 'widgetTabManagement.content.fields.ellipsisCharacterLimitPlaceholder' | translate\n \"\n type=\"text\"\n formControlName=\"ellipsisCharacterLimit\"\n />\n </cds-text-label>\n\n <cds-checkbox *ngIf=\"showHideWhenEmptyCheckbox\" formControlName=\"hideWhenEmpty\">\n {{ 'widgetTabManagement.content.hideWhenEmpty' | translate }}\n </cds-checkbox>\n </div>\n </form>\n </cds-accordion-item>\n }\n </cds-accordion>\n\n <button cdsButton=\"primary\" size=\"sm\" (click)=\"addField()\">\n {{ addTranslateKey | translate }}\n\n <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n </button>\n</form>\n\n<ng-template #fieldTitle let-count=\"count\" let-index=\"index\" let-title=\"title\">\n <div class=\"valtimo-widget-management-field-column__title\">\n {{ title || ('widgetTabManagement.content.fields.titlePlaceholder' | translate) }}\n\n <button\n cdsButton=\"danger\"\n [disabled]=\"count === 1\"\n [iconOnly]=\"true\"\n (click)=\"onDeleteRowClick($event, formRows, index)\"\n class=\"valtimo-widget-management-field-column__delete-button\"\n >\n <svg cdsIcon=\"trash-can\" size=\"16\"></svg>\n </button>\n </div>\n</ng-template>\n", styles: [".valtimo-widget-management-field-column{display:flex;flex-direction:column;gap:16px;background:var(--cds-layer-02)}.valtimo-widget-management-field-column__item,.valtimo-widget-management-field-column__cotainer{background:var(--cds-layer-01)}.valtimo-widget-management-field-column__item .cds--accordion__content{padding-inline-end:20px}.valtimo-widget-management-field-column__container{display:flex;flex-direction:column;gap:16px}.valtimo-widget-management-field-column__content{display:grid;grid-template-columns:1fr 180px 1fr;align-items:flex-end;gap:16px}.valtimo-widget-management-field-column__content--collection{grid-template-columns:1fr 180px 180px 1fr}.valtimo-widget-management-field-column__title{display:flex;justify-content:space-between;align-items:center;width:100%;padding:8px}.valtimo-widget-management-field-column__delete-button{display:flex;align-items:center;justify-content:center;padding:0;align-self:center}.valtimo-widget-management-field-column__delete-button.enum{align-self:flex-end}.valtimo-widget-management-field-column__path-selector{display:flex;flex-direction:column}.valtimo-widget-management-field-column__options{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.valtimo-widget-management-field-column__enum{display:flex;flex-direction:column;gap:16px}.valtimo-widget-management-field-column__enum-form{display:grid;grid-template-columns:1fr 1fr auto;align-items:flex-end;gap:16px}.valtimo-widget-management-field-column__value-field .cds--label{width:100%;margin:0}.valtimo-widget-management-field-column__value-field .cds--label cds-label{margin-bottom:8px}.valtimo-widget-management-field-column cds-checkbox{display:flex;align-items:flex-end}.valtimo-widget-management-field-column .cds--text-input,.valtimo-widget-management-field-column .cds--list-box{background:var(--cds-layer-02)}\n/*!\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"] }]
|
|
4088
|
+
SelectModule,
|
|
4089
|
+
TagModule,
|
|
4090
|
+
ToggleModule,
|
|
4091
|
+
], 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<form\n *ngIf=\"{\n inputTheme: inputTheme$ | async,\n params: params$ | async,\n widgetType: $widgetType() === 'interactive-table' ? 'table' : $widgetType(),\n defaultSortIndex: defaultSortIndexForTemplate$ | async,\n isInteractiveTable: $widgetType() === 'interactive-table',\n } as data\"\n class=\"valtimo-widget-management-field-column\"\n [formGroup]=\"formGroup\"\n>\n <cds-accordion formArrayName=\"rows\" align=\"start\" size=\"sm\">\n @for (formRow of formRows.controls; track $index) {\n <cds-accordion-item\n [title]=\"fieldTitle\"\n [context]=\"{\n count: $count,\n index: $index,\n title: formRow.get('title')?.value,\n defaultSortIndex: data.defaultSortIndex,\n }\"\n [expanded]=\"$index === 0\"\n class=\"valtimo-widget-management-field-column__item\"\n >\n <form [formGroup]=\"formRow\" class=\"valtimo-widget-management-field-column__container\">\n <div\n class=\"valtimo-widget-management-field-column__content\"\n [class.valtimo-widget-management-field-column__content--collection]=\"\n !!fieldWidthDropdown\n \"\n >\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.title' | translate\"\n [tooltip]=\"\n 'widgetTabManagement.content.' + data.widgetType + '.titleTooltip' | translate\n \"\n >\n </v-input-label>\n\n <input\n cdsText\n cdsLayer=\"2\"\n [attr.data-carbon-theme]=\"data.inputTheme\"\n [placeholder]=\"'widgetTabManagement.content.fields.titlePlaceholder' | translate\"\n type=\"text\"\n formControlName=\"title\"\n />\n </cds-text-label>\n\n <cds-dropdown\n [attr.data-carbon-theme]=\"data.inputTheme\"\n [label]=\"'widgetTabManagement.content.fields.type' | translate\"\n [dropUp]=\"false\"\n [placeholder]=\"'widgetTabManagement.content.fields.typePlaceholder' | translate\"\n (selected)=\"onTypeSelected(formRow, $event)\"\n formControlName=\"type\"\n >\n <cds-dropdown-list [items]=\"getDisplayItemsSelected(formRow)\"></cds-dropdown-list>\n </cds-dropdown>\n\n <ng-container\n *ngTemplateOutlet=\"fieldWidthDropdown; context: {index: $index}\"\n ></ng-container>\n\n <cds-text-label class=\"valtimo-widget-management-field-column__value-field\">\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.value' | translate\"\n [tooltip]=\"\n 'widgetTabManagement.content.' + data.widgetType + '.valueTooltip' | translate\n \"\n >\n </v-input-label>\n\n @if ($widgetContext() === 'case') {\n <valtimo-value-path-selector\n formControlName=\"content\"\n [caseDefinitionKey]=\"data.params?.caseDefinitionKey ?? 'bezwaar'\"\n [caseDefinitionVersionTag]=\"data.params?.caseDefinitionVersionTag ?? '1.0.1'\"\n [parentItem]=\"selectedCollection\"\n ></valtimo-value-path-selector>\n } @else {\n <input\n cdsText\n [attr.data-carbon-theme]=\"data.inputTheme\"\n [placeholder]=\"'widgetTabManagement.content.fields.value' | translate\"\n type=\"text\"\n formControlName=\"content\"\n />\n }\n </cds-text-label>\n </div>\n\n <div class=\"valtimo-widget-management-field-column__options\">\n @switch (formRow.get('type').value.id) {\n @case (WidgetDisplayTypeKey.CURRENCY) {\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.currencyCode' | translate\"\n [tooltip]=\"'widgetTabManagement.content.fields.currencyCodeTooltip' | translate\"\n >\n </v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"data.inputTheme\"\n [placeholder]=\"\n 'widgetTabManagement.content.fields.currencyCodePlaceholder' | translate\n \"\n type=\"text\"\n formControlName=\"currencyCode\"\n />\n </cds-text-label>\n\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.display' | translate\"\n [tooltip]=\"'widgetTabManagement.content.fields.displayTooltip' | translate\"\n >\n </v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"data.inputTheme\"\n [placeholder]=\"\n 'widgetTabManagement.content.fields.displayPlaceholder' | translate\n \"\n type=\"text\"\n formControlName=\"display\"\n />\n </cds-text-label>\n\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n tooltip=\"{{\n 'widgetTabManagement.content.fields.digitsInfoTooltip'\n | translate: {minFractionDigits: 2, maxFractionDigits: 2}\n }}\"\n >\n </v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"data.inputTheme\"\n [placeholder]=\"\n 'widgetTabManagement.content.fields.digitsInfoPlaceholder' | translate\n \"\n type=\"text\"\n formControlName=\"digitsInfo\"\n />\n </cds-text-label>\n }\n @case (WidgetDisplayTypeKey.DATE) {\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.format' | translate\"\n [tooltip]=\"'widgetTabManagement.content.fields.dateFormatTooltip' | translate\"\n ></v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"data.inputTheme\"\n [placeholder]=\"\n 'widgetTabManagement.content.fields.formatPlaceholder' | translate\n \"\n type=\"text\"\n formControlName=\"format\"\n />\n </cds-text-label>\n }\n @case (WidgetDisplayTypeKey.DATE_TIME) {\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.format' | translate\"\n [tooltip]=\"\n 'widgetTabManagement.content.fields.dateTimeFormatTooltip' | translate\n \"\n ></v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"data.inputTheme\"\n [placeholder]=\"\n 'widgetTabManagement.content.fields.formatPlaceholder' | translate\n \"\n type=\"text\"\n formControlName=\"format\"\n />\n </cds-text-label>\n }\n @case (WidgetDisplayTypeKey.ENUM) {\n <div class=\"valtimo-widget-management-field-column__enum\" formArrayName=\"values\">\n @for (rowValue of formRow.get('values')?.controls; track $index) {\n <form\n [formGroup]=\"rowValue\"\n class=\"valtimo-widget-management-field-column__enum-form\"\n >\n <cds-text-label>\n <v-input-label\n *ngIf=\"$index === 0\"\n [title]=\"'widgetTabManagement.content.fields.enumValue' | translate\"\n [tooltip]=\"\n 'widgetTabManagement.content.fields.enumValueTooltip' | translate\n \"\n ></v-input-label>\n\n <input\n [attr.data-carbon-theme]=\"data.inputTheme\"\n cdsText\n [placeholder]=\"'widgetTabManagement.content.fields.enumValue' | translate\"\n type=\"text\"\n formControlName=\"key\"\n />\n </cds-text-label>\n\n <cds-text-label>\n <v-input-label\n *ngIf=\"$index === 0\"\n [title]=\"'widgetTabManagement.content.fields.enumDisplay' | translate\"\n [tooltip]=\"\n 'widgetTabManagement.content.fields.enumDisplayTooltip' | translate\n \"\n ></v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"data.inputTheme\"\n [placeholder]=\"\n 'widgetTabManagement.content.fields.enumDisplay' | translate\n \"\n type=\"text\"\n formControlName=\"value\"\n />\n </cds-text-label>\n\n <button\n cdsButton=\"danger--ghost\"\n [disabled]=\"$count === 1\"\n [iconOnly]=\"true\"\n class=\"valtimo-widget-management-field-column__delete-button enum\"\n (click)=\"onDeleteRowClick($event, formRow.get('values'), $index)\"\n >\n <svg cdsIcon=\"trash-can\" size=\"16\"></svg>\n </button>\n </form>\n }\n\n <button\n cdsButton=\"primary\"\n size=\"sm\"\n (click)=\"onAddEnumValueClick(formRow.get('values'))\"\n >\n {{ 'widgetTabManagement.content.fields.addEnum' | translate }}\n\n <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n </button>\n </div>\n }\n @case (WidgetDisplayTypeKey.NUMBER) {\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n tooltip=\"{{\n 'widgetTabManagement.content.fields.digitsInfoTooltip'\n | translate\n : {\n minFractionDigits: 0,\n maxFractionDigits: 3,\n }\n }}\"\n >\n </v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"data.inputTheme\"\n [placeholder]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n type=\"text\"\n formControlName=\"digitsInfo\"\n />\n </cds-text-label>\n }\n @case (WidgetDisplayTypeKey.PERCENT) {\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n tooltip=\"{{\n 'widgetTabManagement.content.fields.digitsInfoTooltip'\n | translate\n : {\n minFractionDigits: 0,\n maxFractionDigits: 0,\n }\n }}\"\n >\n </v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"data.inputTheme\"\n [placeholder]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n type=\"text\"\n formControlName=\"digitsInfo\"\n />\n </cds-text-label>\n }\n @case (WidgetDisplayTypeKey.LINK) {\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.linkText' | translate\"\n [tooltip]=\"'widgetTabManagement.content.fields.linkTextTooltip' | translate\"\n >\n </v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"data.inputTheme\"\n [placeholder]=\"\n 'widgetTabManagement.content.fields.linkTextPlaceholder' | translate\n \"\n type=\"text\"\n formControlName=\"linkText\"\n />\n </cds-text-label>\n }\n }\n\n <cds-text-label\n *ngIf=\"formRow.get('type').value.id === WidgetDisplayTypeKey.TEXT && $isFieldWidget()\"\n >\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.ellipsisCharacterLimit' | translate\"\n tooltip=\"{{\n 'widgetTabManagement.content.fields.ellipsisCharacterLimitTooltip' | translate\n }}\"\n >\n </v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"data.inputTheme\"\n [placeholder]=\"\n 'widgetTabManagement.content.fields.ellipsisCharacterLimitPlaceholder' | translate\n \"\n type=\"text\"\n formControlName=\"ellipsisCharacterLimit\"\n />\n </cds-text-label>\n\n <cds-checkbox *ngIf=\"showHideWhenEmptyCheckbox\" formControlName=\"hideWhenEmpty\">\n {{ 'widgetTabManagement.content.hideWhenEmpty' | translate }}\n </cds-checkbox>\n\n <div\n *ngIf=\"showSortableCheckbox\"\n class=\"valtimo-widget-management-field-column__sorting\"\n >\n <cds-checkbox\n formControlName=\"sortable\"\n (checkedChange)=\"onSortableCheckChange($index, $event)\"\n >\n {{ 'listColumn.sortable' | translate }}\n </cds-checkbox>\n\n <v-select\n formControlName=\"defaultSort\"\n [disabled]=\"!formRow.get('sortable')?.value\"\n [items]=\"DEFAULT_SORT_OPTIONS\"\n [dropUp]=\"false\"\n [placeholder]=\"'interface.sorting.noDefault' | translate\"\n [defaultSelectionId]=\"formRow.get('defaultSort')?.value\"\n [warn]=\"\n data.defaultSortIndex !== -1 &&\n data.defaultSortIndex !== $index &&\n !!formRow.get('sortable')?.value\n \"\n [warnText]=\"'widgetTabManagement.content.fields.defaultSortWarning' | translate\"\n (selectedChange)=\"onSelectedDefaultSortChange($index)\"\n ></v-select>\n </div>\n </div>\n </form>\n </cds-accordion-item>\n }\n </cds-accordion>\n\n <button cdsButton=\"primary\" size=\"sm\" (click)=\"addField()\">\n {{ addTranslateKey | translate }}\n\n <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n </button>\n</form>\n\n<ng-template\n #fieldTitle\n let-defaultSortIndex=\"defaultSortIndex\"\n let-count=\"count\"\n let-index=\"index\"\n let-title=\"title\"\n>\n <div class=\"valtimo-widget-management-field-column__title\">\n <section>\n {{ title || ('widgetTabManagement.content.fields.titlePlaceholder' | translate) }}\n\n <cds-tag *ngIf=\"$isInteractiveTableWidget() && defaultSortIndex === index\" type=\"blue\">\n {{ 'ikoManagement.defaultSortTitle' | translate }}\n </cds-tag>\n </section>\n\n <button\n cdsButton=\"danger\"\n [disabled]=\"count === 1\"\n [iconOnly]=\"true\"\n (click)=\"onDeleteRowClick($event, formRows, index)\"\n class=\"valtimo-widget-management-field-column__delete-button\"\n >\n <svg cdsIcon=\"trash-can\" size=\"16\"></svg>\n </button>\n </div>\n</ng-template>\n", styles: [".valtimo-widget-management-field-column{display:flex;flex-direction:column;gap:16px;background:var(--cds-layer-02)}.valtimo-widget-management-field-column__item,.valtimo-widget-management-field-column__cotainer{background:var(--cds-layer-01)}.valtimo-widget-management-field-column__item .cds--accordion__content{padding-inline-end:20px}.valtimo-widget-management-field-column__container{display:flex;flex-direction:column;gap:16px}.valtimo-widget-management-field-column__content{display:grid;grid-template-columns:1fr 180px 1fr;align-items:flex-end;gap:16px}.valtimo-widget-management-field-column__content--collection{grid-template-columns:1fr 180px 180px 1fr}.valtimo-widget-management-field-column__title{display:flex;justify-content:space-between;align-items:center;width:100%;padding:8px}.valtimo-widget-management-field-column__delete-button{display:flex;align-items:center;justify-content:center;padding:0;align-self:center}.valtimo-widget-management-field-column__delete-button.enum{align-self:flex-end}.valtimo-widget-management-field-column__path-selector{display:flex;flex-direction:column}.valtimo-widget-management-field-column__options{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.valtimo-widget-management-field-column__sorting{display:flex;align-items:center;align-self:flex-end;gap:16px}.valtimo-widget-management-field-column__enum{display:flex;flex-direction:column;gap:16px}.valtimo-widget-management-field-column__enum-form{display:grid;grid-template-columns:1fr 1fr auto;align-items:flex-end;gap:16px}.valtimo-widget-management-field-column__value-field .cds--label{width:100%;margin:0}.valtimo-widget-management-field-column__value-field .cds--label cds-label{margin-bottom:8px}.valtimo-widget-management-field-column cds-checkbox{display:flex;align-items:flex-end}.valtimo-widget-management-field-column .cds--text-input,.valtimo-widget-management-field-column .cds--list-box{background:var(--cds-layer-02)}\n/*!\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"] }]
|
|
3618
4092
|
}], ctorParameters: () => [{ type: i1.CdsThemeService }, { type: i0.ChangeDetectorRef }, { type: i1$3.FormBuilder }, { type: i3.IconService }, { type: i2$1.TranslateService }, { type: WidgetFieldsService }, { type: WidgetWizardService }, { type: undefined, decorators: [{
|
|
3619
4093
|
type: Inject,
|
|
3620
4094
|
args: [WIDGET_MANAGEMENT_SERVICE]
|
|
@@ -3632,6 +4106,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
|
|
|
3632
4106
|
type: Input
|
|
3633
4107
|
}], showHideWhenEmptyCheckbox: [{
|
|
3634
4108
|
type: Input
|
|
4109
|
+
}], showSortableCheckbox: [{
|
|
4110
|
+
type: Input
|
|
3635
4111
|
}], columnUpdateEvent: [{
|
|
3636
4112
|
type: Output
|
|
3637
4113
|
}] } });
|
|
@@ -3749,7 +4225,7 @@ class WidgetManagementFieldsComponent {
|
|
|
3749
4225
|
this.widgetWizardService.$widgetContentValid.set(this.form.valid && this._contentValid());
|
|
3750
4226
|
}
|
|
3751
4227
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: WidgetManagementFieldsComponent, deps: [{ token: i1$3.FormBuilder }, { token: WidgetWizardService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3752
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: WidgetManagementFieldsComponent, isStandalone: true, selector: "ng-component", host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "_tab", first: true, predicate: Tab, 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<form\n *ngIf=\"$showTitleInput()\"\n [formGroup]=\"form\"\n class=\"valtimo-widget-management-fields__title-form\"\n>\n <cds-text-label class=\"valtimo-widget-management-fields__input\">\n <v-input-label\n [title]=\"'widgetTabManagement.content.widgetTitle' | translate\"\n [tooltip]=\"'widgetTabManagement.content.widgetTitleTooltip' | translate\"\n >\n </v-input-label>\n\n <input\n formControlName=\"widgetTitle\"\n cdsText\n [placeholder]=\"'widgetTabManagement.content.widgetTitlePlaceholder' | translate\"\n type=\"text\"\n />\n </cds-text-label>\n\n <valtimo-mdi-icon-selector\n [cdsLayer]=\"1\"\n formControlName=\"widgetIcon\"\n ></valtimo-mdi-icon-selector>\n</form>\n\n<ng-content></ng-content>\n\n<cds-tabs type=\"contained\">\n @for (column of $columns(); track $index) {\n <cds-tab\n [active]=\"activeTab() === $index\"\n [heading]=\"columnHeading\"\n [context]=\"{index: $index, count: $count}\"\n (selected)=\"onTabSelected($index)\"\n >\n <valtimo-widget-management-fields-column\n *ngIf=\"activeTab() === $index\"\n [isFieldWidget]=\"true\"\n [columnData]=\"$selectedWidgetContent()?.[$index]\"\n [showHideWhenEmptyCheckbox]=\"true\"\n (columnUpdateEvent)=\"onColumnUpdateEvent($event, $index)\"\n ></valtimo-widget-management-fields-column>\n </cds-tab>\n }\n\n <cds-tab\n *ngIf=\"$columns().length < $widgetWidth\"\n [heading]=\"addColumn\"\n [id]=\"'addColumn'\"\n class=\"valtimo-widget-management-fields__add\"\n ></cds-tab>\n</cds-tabs>\n\n<ng-template #addColumn>\n <button\n cdsButton=\"ghost\"\n [iconOnly]=\"true\"\n (click)=\"$event.stopImmediatePropagation(); onAddColumnClick()\"\n >\n <svg cdsIcon=\"add\" size=\"16\"></svg>\n </button>\n</ng-template>\n\n<ng-template #columnHeading let-data>\n <div class=\"valtimo-widget-management-fields__heading\">\n {{ 'widgetTabManagement.content.column' | translate: {number: data.index + 1} }}\n\n <button\n cdsButton=\"ghost\"\n [disabled]=\"data.count === 1\"\n [iconOnly]=\"true\"\n size=\"sm\"\n (click)=\"onDeleteColumnClick(data.index)\"\n >\n <svg cdsIcon=\"close\" size=\"16\"></svg>\n </button>\n </div>\n</ng-template>\n", styles: [".cds--tab-content{padding:0!important}.valtimo-widget-management-fields{display:flex;flex-direction:column;gap:16px}.valtimo-widget-management-fields__title-form{padding:8px 0 16px 16px;background:var(--cds-layer);display:flex;gap:16px}.valtimo-widget-management-fields__input{max-width:288px}.valtimo-widget-management-fields__input input{background:var(--cds-layer-02)}.valtimo-widget-management-fields__heading{display:flex;align-items:center}.valtimo-widget-management-fields #addColumn-header{padding:0!important}.valtimo-widget-management-fields .cds--tabs__nav-item{padding-right:0!important}\n/*!\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"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i3.TextInputLabelComponent, selector: "cds-text-label, ibm-text-label", inputs: ["labelInputID", "disabled", "skeleton", "labelTemplate", "textInputTemplate", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel", "fluid"] }, { kind: "directive", type: i3.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "ngmodule", type: TabsModule }, { kind: "component", type: i3.Tabs, selector: "cds-tabs, ibm-tabs", inputs: ["position", "cacheActive", "followFocus", "isNavigation", "ariaLabel", "ariaLabelledby", "type", "theme", "skeleton"] }, { kind: "component", type: i3.Tab, selector: "cds-tab, ibm-tab", inputs: ["heading", "title", "context", "active", "disabled", "tabIndex", "id", "cacheActive", "tabContent", "templateContext"], outputs: ["selected"] }, { kind: "ngmodule", type: IconModule }, { kind: "directive", type: i3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "component", type: WidgetManagementFieldsColumnComponent, selector: "valtimo-widget-management-fields-column", inputs: ["columnData", "addTranslateKey", "fieldWidthDropdown", "selectedCollection", "showHideWhenEmptyCheckbox"], outputs: ["columnUpdateEvent"] }, { kind: "ngmodule", type: InputLabelModule }, { kind: "component", type: i1.InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "tooltipTranslationKey", "largeMargin", "small", "noMargin", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }, { kind: "component", type: MdiIconSelectorComponent, selector: "valtimo-mdi-icon-selector", inputs: ["labelTranslationKey", "tooltipTranslationKey", "placeholderTranslationKey", "appendInline", "dropUp"] }, { kind: "ngmodule", type: LayerModule }, { kind: "directive", type: i3.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
4228
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: WidgetManagementFieldsComponent, isStandalone: true, selector: "ng-component", host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "_tab", first: true, predicate: Tab, 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<form\n *ngIf=\"$showTitleInput()\"\n [formGroup]=\"form\"\n class=\"valtimo-widget-management-fields__title-form\"\n>\n <cds-text-label class=\"valtimo-widget-management-fields__input\">\n <v-input-label\n [title]=\"'widgetTabManagement.content.widgetTitle' | translate\"\n [tooltip]=\"'widgetTabManagement.content.widgetTitleTooltip' | translate\"\n >\n </v-input-label>\n\n <input\n formControlName=\"widgetTitle\"\n cdsText\n [placeholder]=\"'widgetTabManagement.content.widgetTitlePlaceholder' | translate\"\n type=\"text\"\n />\n </cds-text-label>\n\n <valtimo-mdi-icon-selector\n [cdsLayer]=\"1\"\n formControlName=\"widgetIcon\"\n ></valtimo-mdi-icon-selector>\n</form>\n\n<ng-content></ng-content>\n\n<cds-tabs type=\"contained\">\n @for (column of $columns(); track $index) {\n <cds-tab\n [active]=\"activeTab() === $index\"\n [heading]=\"columnHeading\"\n [context]=\"{index: $index, count: $count}\"\n (selected)=\"onTabSelected($index)\"\n >\n <valtimo-widget-management-fields-column\n *ngIf=\"activeTab() === $index\"\n [isFieldWidget]=\"true\"\n [columnData]=\"$selectedWidgetContent()?.[$index]\"\n [showHideWhenEmptyCheckbox]=\"true\"\n (columnUpdateEvent)=\"onColumnUpdateEvent($event, $index)\"\n ></valtimo-widget-management-fields-column>\n </cds-tab>\n }\n\n <cds-tab\n *ngIf=\"$columns().length < $widgetWidth\"\n [heading]=\"addColumn\"\n [id]=\"'addColumn'\"\n class=\"valtimo-widget-management-fields__add\"\n ></cds-tab>\n</cds-tabs>\n\n<ng-template #addColumn>\n <button\n cdsButton=\"ghost\"\n [iconOnly]=\"true\"\n (click)=\"$event.stopImmediatePropagation(); onAddColumnClick()\"\n >\n <svg cdsIcon=\"add\" size=\"16\"></svg>\n </button>\n</ng-template>\n\n<ng-template #columnHeading let-data>\n <div class=\"valtimo-widget-management-fields__heading\">\n {{ 'widgetTabManagement.content.column' | translate: {number: data.index + 1} }}\n\n <button\n cdsButton=\"ghost\"\n [disabled]=\"data.count === 1\"\n [iconOnly]=\"true\"\n size=\"sm\"\n (click)=\"onDeleteColumnClick(data.index)\"\n >\n <svg cdsIcon=\"close\" size=\"16\"></svg>\n </button>\n </div>\n</ng-template>\n", styles: [".cds--tab-content{padding:0!important}.valtimo-widget-management-fields{display:flex;flex-direction:column;gap:16px}.valtimo-widget-management-fields__title-form{padding:8px 0 16px 16px;background:var(--cds-layer);display:flex;gap:16px}.valtimo-widget-management-fields__input{max-width:288px}.valtimo-widget-management-fields__input input{background:var(--cds-layer-02)}.valtimo-widget-management-fields__heading{display:flex;align-items:center}.valtimo-widget-management-fields #addColumn-header{padding:0!important}.valtimo-widget-management-fields .cds--tabs__nav-item{padding-right:0!important}\n/*!\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"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i3.TextInputLabelComponent, selector: "cds-text-label, ibm-text-label", inputs: ["labelInputID", "disabled", "skeleton", "labelTemplate", "textInputTemplate", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel", "fluid"] }, { kind: "directive", type: i3.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "ngmodule", type: TabsModule }, { kind: "component", type: i3.Tabs, selector: "cds-tabs, ibm-tabs", inputs: ["position", "cacheActive", "followFocus", "isNavigation", "ariaLabel", "ariaLabelledby", "type", "theme", "skeleton"] }, { kind: "component", type: i3.Tab, selector: "cds-tab, ibm-tab", inputs: ["heading", "title", "context", "active", "disabled", "tabIndex", "id", "cacheActive", "tabContent", "templateContext"], outputs: ["selected"] }, { kind: "ngmodule", type: IconModule }, { kind: "directive", type: i3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "component", type: WidgetManagementFieldsColumnComponent, selector: "valtimo-widget-management-fields-column", inputs: ["columnData", "addTranslateKey", "fieldWidthDropdown", "selectedCollection", "showHideWhenEmptyCheckbox", "showSortableCheckbox"], outputs: ["columnUpdateEvent"] }, { kind: "ngmodule", type: InputLabelModule }, { kind: "component", type: i1.InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "tooltipTranslationKey", "largeMargin", "small", "noMargin", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }, { kind: "component", type: MdiIconSelectorComponent, selector: "valtimo-mdi-icon-selector", inputs: ["labelTranslationKey", "tooltipTranslationKey", "placeholderTranslationKey", "appendInline", "dropUp"] }, { kind: "ngmodule", type: LayerModule }, { kind: "directive", type: i3.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
3753
4229
|
}
|
|
3754
4230
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: WidgetManagementFieldsComponent, decorators: [{
|
|
3755
4231
|
type: Component,
|
|
@@ -3798,6 +4274,7 @@ class WidgetManagementTableComponent {
|
|
|
3798
4274
|
this.widgetManagementService = widgetManagementService;
|
|
3799
4275
|
this.class = 'valtimo-widget-management-table';
|
|
3800
4276
|
this.showFirstColumnOption = true;
|
|
4277
|
+
this.sortableColumns = false;
|
|
3801
4278
|
this.form = this.fb.group({
|
|
3802
4279
|
title: this.fb.control(this.widgetWizardService.$widgetTitle() ?? '', Validators.required),
|
|
3803
4280
|
widgetIcon: this.fb.control(this.widgetWizardService.$widgetIcon()),
|
|
@@ -3820,6 +4297,7 @@ class WidgetManagementTableComponent {
|
|
|
3820
4297
|
this._subscriptions = new Subscription();
|
|
3821
4298
|
}
|
|
3822
4299
|
ngOnInit() {
|
|
4300
|
+
this.widgetWizardService.$widgetContentValid.set(false);
|
|
3823
4301
|
this._subscriptions.add(this.form.valueChanges.pipe(debounceTime(500)).subscribe(value => {
|
|
3824
4302
|
this.widgetWizardService.$widgetTitle.set(value?.title ?? '');
|
|
3825
4303
|
this.widgetWizardService.$widgetIcon.set(value?.widgetIcon ?? '');
|
|
@@ -3834,7 +4312,6 @@ class WidgetManagementTableComponent {
|
|
|
3834
4312
|
ngOnDestroy() {
|
|
3835
4313
|
this._$contentValid.set(false);
|
|
3836
4314
|
this._subscriptions.unsubscribe();
|
|
3837
|
-
this.widgetWizardService.$widgetContentValid.set(false);
|
|
3838
4315
|
this.form.reset();
|
|
3839
4316
|
}
|
|
3840
4317
|
onColumnUpdateEvent(event) {
|
|
@@ -3850,7 +4327,7 @@ class WidgetManagementTableComponent {
|
|
|
3850
4327
|
this.selectedCollection$.next(item);
|
|
3851
4328
|
}
|
|
3852
4329
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: WidgetManagementTableComponent, deps: [{ token: i1.CdsThemeService }, { token: i1$3.FormBuilder }, { token: i2$1.TranslateService }, { token: WidgetWizardService }, { token: WIDGET_MANAGEMENT_SERVICE }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3853
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: WidgetManagementTableComponent, isStandalone: true, selector: "valtimo-widget-management-table", inputs: { showFirstColumnOption: "showFirstColumnOption" }, host: { properties: { "class": "this.class" } }, 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<form\n *ngIf=\"{theme: theme$ | async, params: params$ | async} as obs\"\n [formGroup]=\"form\"\n class=\"valtimo-widget-management-table__form\"\n>\n <cds-text-label [attr.data-carbon-theme]=\"theme\">\n <v-input-label\n [title]=\"'widgetTabManagement.content.widgetTitle' | translate\"\n [tooltip]=\"'widgetTabManagement.content.widgetTitleTooltip' | translate\"\n >\n </v-input-label>\n\n <input\n formControlName=\"title\"\n cdsText\n [placeholder]=\"'widgetTabManagement.content.widgetTitlePlaceholder' | translate\"\n type=\"text\"\n />\n </cds-text-label>\n\n <valtimo-mdi-icon-selector\n [cdsLayer]=\"1\"\n formControlName=\"widgetIcon\"\n ></valtimo-mdi-icon-selector>\n\n <cds-text-label [attr.data-carbon-theme]=\"theme\">\n <v-input-label\n [title]=\"'widgetTabManagement.content.table.defaultPageSize' | translate\"\n [tooltip]=\"'widgetTabManagement.content.table.defaultPageSizeTooltip' | translate\"\n >\n </v-input-label>\n\n <input\n formControlName=\"defaultPageSize\"\n cdsText\n [placeholder]=\"'widgetTabManagement.content.table.defaultPageSizePlaceholder' | translate\"\n type=\"text\"\n />\n </cds-text-label>\n\n <cds-text-label [attr.data-carbon-theme]=\"theme\">\n <v-input-label\n [title]=\"'widgetTabManagement.content.table.collection' | translate\"\n [tooltip]=\"collectionDataTooltip$ | async\"\n >\n </v-input-label>\n\n @if ($widgetContext() === 'case') {\n <valtimo-value-path-selector\n formControlName=\"collection\"\n [attr.data-carbon-theme]=\"obs.theme\"\n [caseDefinitionKey]=\"obs.params?.caseDefinitionKey\"\n [caseDefinitionVersionTag]=\"obs.params?.caseDefinitionVersionTag\"\n [type]=\"ValuePathType.COLLECTION\"\n (collectionSelected)=\"onCollectionSelected($event)\"\n ></valtimo-value-path-selector>\n } @else {\n <input\n formControlName=\"collection\"\n cdsText\n [attr.data-carbon-theme]=\"theme\"\n [placeholder]=\"'widgetTabManagement.content.table.collection' | translate\"\n type=\"text\"\n />\n }\n </cds-text-label>\n</form>\n\n<ng-content></ng-content>\n\n<span class=\"valtimo-widget-management-table__subtitle\">\n {{ 'widgetTabManagement.content.table.columns' | translate }}\n</span>\n\n<valtimo-widget-management-fields-column\n [addTranslateKey]=\"'widgetTabManagement.content.table.addColumn'\"\n [columnData]=\"$content()?.columns\"\n (columnUpdateEvent)=\"onColumnUpdateEvent($event)\"\n [selectedCollection]=\"selectedCollection$ | async\"\n></valtimo-widget-management-fields-column>\n\n<section *ngIf=\"showFirstColumnOption\" class=\"valtimo-widget-management-table__toggle\">\n <span class=\"valtimo-widget-management-table__subtitle\">\n {{ 'widgetTabManagement.content.table.options' | translate }}\n </span>\n\n <cds-toggle\n [checked]=\"$checked()\"\n [label]=\"'widgetTabManagement.content.table.firstColumnAsTitle' | translate\"\n [onText]=\"'interface.yes' | translate\"\n [offText]=\"'interface.no' | translate\"\n (checkedChange)=\"onCheckedChange($event)\"\n ></cds-toggle>\n</section>\n", styles: [".valtimo-widget-management-table{display:flex;flex-direction:column;gap:24px}.valtimo-widget-management-table__form{display:grid;gap:16px;grid-template-columns:repeat(3,1fr);align-items:flex-end;padding:16px;background-color:var(--cds-layer-01)}.valtimo-widget-management-table__subtitle{font-size:16px;font-weight:600;line-height:22px}.valtimo-widget-management-table__toggle{display:flex;flex-direction:column;gap:8px}.valtimo-widget-management-table__path-selector{display:flex;flex-direction:column}.valtimo-widget-management-table .cds--text-input,.valtimo-widget-management-table .cds--list-box{background:var(--cds-layer-02)}\n/*!\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"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "component", type: WidgetManagementFieldsColumnComponent, selector: "valtimo-widget-management-fields-column", inputs: ["columnData", "addTranslateKey", "fieldWidthDropdown", "selectedCollection", "showHideWhenEmptyCheckbox"], outputs: ["columnUpdateEvent"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i3.TextInputLabelComponent, selector: "cds-text-label, ibm-text-label", inputs: ["labelInputID", "disabled", "skeleton", "labelTemplate", "textInputTemplate", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel", "fluid"] }, { kind: "directive", type: i3.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "ngmodule", type: ToggleModule }, { kind: "component", type: i3.Toggle, selector: "cds-toggle, ibm-toggle", inputs: ["offText", "onText", "label", "size", "hideLabel", "ariaLabel", "skeleton"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: InputLabelModule }, { kind: "component", type: i1.InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "tooltipTranslationKey", "largeMargin", "small", "noMargin", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }, { kind: "ngmodule", type: LayerModule }, { kind: "directive", type: i3.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }, { kind: "component", type: ValuePathSelectorComponent, selector: "valtimo-value-path-selector", inputs: ["name", "appendInline", "margin", "marginLg", "marginXl", "disabled", "caseDefinitionKey", "caseDefinitionVersionTag", "prefixes", "label", "tooltip", "required", "showCaseDefinitionSelector", "notation", "defaultValue", "type", "parentItem"], outputs: ["valueChangeEvent", "collectionSelected"] }, { kind: "component", type: MdiIconSelectorComponent, selector: "valtimo-mdi-icon-selector", inputs: ["labelTranslationKey", "tooltipTranslationKey", "placeholderTranslationKey", "appendInline", "dropUp"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
4330
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: WidgetManagementTableComponent, isStandalone: true, selector: "valtimo-widget-management-table", inputs: { showFirstColumnOption: "showFirstColumnOption", sortableColumns: "sortableColumns" }, host: { properties: { "class": "this.class" } }, 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<form\n *ngIf=\"{theme: theme$ | async, params: params$ | async} as obs\"\n [formGroup]=\"form\"\n class=\"valtimo-widget-management-table__form\"\n>\n <cds-text-label [attr.data-carbon-theme]=\"theme\">\n <v-input-label\n [title]=\"'widgetTabManagement.content.widgetTitle' | translate\"\n [tooltip]=\"'widgetTabManagement.content.widgetTitleTooltip' | translate\"\n >\n </v-input-label>\n\n <input\n formControlName=\"title\"\n cdsText\n [placeholder]=\"'widgetTabManagement.content.widgetTitlePlaceholder' | translate\"\n type=\"text\"\n />\n </cds-text-label>\n\n <valtimo-mdi-icon-selector\n [cdsLayer]=\"1\"\n formControlName=\"widgetIcon\"\n ></valtimo-mdi-icon-selector>\n\n <cds-text-label [attr.data-carbon-theme]=\"theme\">\n <v-input-label\n [title]=\"'widgetTabManagement.content.table.defaultPageSize' | translate\"\n [tooltip]=\"'widgetTabManagement.content.table.defaultPageSizeTooltip' | translate\"\n >\n </v-input-label>\n\n <input\n formControlName=\"defaultPageSize\"\n cdsText\n [placeholder]=\"'widgetTabManagement.content.table.defaultPageSizePlaceholder' | translate\"\n type=\"text\"\n />\n </cds-text-label>\n\n <cds-text-label [attr.data-carbon-theme]=\"theme\">\n <v-input-label\n [title]=\"'widgetTabManagement.content.table.collection' | translate\"\n [tooltip]=\"collectionDataTooltip$ | async\"\n >\n </v-input-label>\n\n @if ($widgetContext() === 'case') {\n <valtimo-value-path-selector\n formControlName=\"collection\"\n [attr.data-carbon-theme]=\"obs.theme\"\n [caseDefinitionKey]=\"obs.params?.caseDefinitionKey\"\n [caseDefinitionVersionTag]=\"obs.params?.caseDefinitionVersionTag\"\n [type]=\"ValuePathType.COLLECTION\"\n (collectionSelected)=\"onCollectionSelected($event)\"\n ></valtimo-value-path-selector>\n } @else {\n <input\n formControlName=\"collection\"\n cdsText\n [attr.data-carbon-theme]=\"theme\"\n [placeholder]=\"'widgetTabManagement.content.table.collection' | translate\"\n type=\"text\"\n />\n }\n </cds-text-label>\n</form>\n\n<ng-content></ng-content>\n\n<span class=\"valtimo-widget-management-table__subtitle\">\n {{ 'widgetTabManagement.content.table.columns' | translate }}\n</span>\n\n<valtimo-widget-management-fields-column\n [addTranslateKey]=\"'widgetTabManagement.content.table.addColumn'\"\n [columnData]=\"$content()?.columns\"\n (columnUpdateEvent)=\"onColumnUpdateEvent($event)\"\n [selectedCollection]=\"selectedCollection$ | async\"\n [showSortableCheckbox]=\"sortableColumns\"\n></valtimo-widget-management-fields-column>\n\n<section *ngIf=\"showFirstColumnOption\" class=\"valtimo-widget-management-table__toggle\">\n <span class=\"valtimo-widget-management-table__subtitle\">\n {{ 'widgetTabManagement.content.table.options' | translate }}\n </span>\n\n <cds-toggle\n [checked]=\"$checked()\"\n [label]=\"'widgetTabManagement.content.table.firstColumnAsTitle' | translate\"\n [onText]=\"'interface.yes' | translate\"\n [offText]=\"'interface.no' | translate\"\n (checkedChange)=\"onCheckedChange($event)\"\n ></cds-toggle>\n</section>\n", styles: [".valtimo-widget-management-table{display:flex;flex-direction:column;gap:24px}.valtimo-widget-management-table__form{display:grid;gap:16px;grid-template-columns:repeat(3,1fr);align-items:flex-end;padding:16px;background-color:var(--cds-layer-01)}.valtimo-widget-management-table__subtitle{font-size:16px;font-weight:600;line-height:22px}.valtimo-widget-management-table__toggle{display:flex;flex-direction:column;gap:8px}.valtimo-widget-management-table__path-selector{display:flex;flex-direction:column}.valtimo-widget-management-table .cds--text-input,.valtimo-widget-management-table .cds--list-box{background:var(--cds-layer-02)}\n/*!\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"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "component", type: WidgetManagementFieldsColumnComponent, selector: "valtimo-widget-management-fields-column", inputs: ["columnData", "addTranslateKey", "fieldWidthDropdown", "selectedCollection", "showHideWhenEmptyCheckbox", "showSortableCheckbox"], outputs: ["columnUpdateEvent"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i3.TextInputLabelComponent, selector: "cds-text-label, ibm-text-label", inputs: ["labelInputID", "disabled", "skeleton", "labelTemplate", "textInputTemplate", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel", "fluid"] }, { kind: "directive", type: i3.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "ngmodule", type: ToggleModule }, { kind: "component", type: i3.Toggle, selector: "cds-toggle, ibm-toggle", inputs: ["offText", "onText", "label", "size", "hideLabel", "ariaLabel", "skeleton"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: InputLabelModule }, { kind: "component", type: i1.InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "tooltipTranslationKey", "largeMargin", "small", "noMargin", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }, { kind: "ngmodule", type: LayerModule }, { kind: "directive", type: i3.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }, { kind: "component", type: ValuePathSelectorComponent, selector: "valtimo-value-path-selector", inputs: ["name", "appendInline", "margin", "marginLg", "marginXl", "disabled", "caseDefinitionKey", "caseDefinitionVersionTag", "prefixes", "label", "tooltip", "required", "showCaseDefinitionSelector", "notation", "defaultValue", "type", "parentItem"], outputs: ["valueChangeEvent", "collectionSelected"] }, { kind: "component", type: MdiIconSelectorComponent, selector: "valtimo-mdi-icon-selector", inputs: ["labelTranslationKey", "tooltipTranslationKey", "placeholderTranslationKey", "appendInline", "dropUp"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
3854
4331
|
}
|
|
3855
4332
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: WidgetManagementTableComponent, decorators: [{
|
|
3856
4333
|
type: Component,
|
|
@@ -3866,7 +4343,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
|
|
|
3866
4343
|
LayerModule,
|
|
3867
4344
|
ValuePathSelectorComponent,
|
|
3868
4345
|
MdiIconSelectorComponent,
|
|
3869
|
-
], 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<form\n *ngIf=\"{theme: theme$ | async, params: params$ | async} as obs\"\n [formGroup]=\"form\"\n class=\"valtimo-widget-management-table__form\"\n>\n <cds-text-label [attr.data-carbon-theme]=\"theme\">\n <v-input-label\n [title]=\"'widgetTabManagement.content.widgetTitle' | translate\"\n [tooltip]=\"'widgetTabManagement.content.widgetTitleTooltip' | translate\"\n >\n </v-input-label>\n\n <input\n formControlName=\"title\"\n cdsText\n [placeholder]=\"'widgetTabManagement.content.widgetTitlePlaceholder' | translate\"\n type=\"text\"\n />\n </cds-text-label>\n\n <valtimo-mdi-icon-selector\n [cdsLayer]=\"1\"\n formControlName=\"widgetIcon\"\n ></valtimo-mdi-icon-selector>\n\n <cds-text-label [attr.data-carbon-theme]=\"theme\">\n <v-input-label\n [title]=\"'widgetTabManagement.content.table.defaultPageSize' | translate\"\n [tooltip]=\"'widgetTabManagement.content.table.defaultPageSizeTooltip' | translate\"\n >\n </v-input-label>\n\n <input\n formControlName=\"defaultPageSize\"\n cdsText\n [placeholder]=\"'widgetTabManagement.content.table.defaultPageSizePlaceholder' | translate\"\n type=\"text\"\n />\n </cds-text-label>\n\n <cds-text-label [attr.data-carbon-theme]=\"theme\">\n <v-input-label\n [title]=\"'widgetTabManagement.content.table.collection' | translate\"\n [tooltip]=\"collectionDataTooltip$ | async\"\n >\n </v-input-label>\n\n @if ($widgetContext() === 'case') {\n <valtimo-value-path-selector\n formControlName=\"collection\"\n [attr.data-carbon-theme]=\"obs.theme\"\n [caseDefinitionKey]=\"obs.params?.caseDefinitionKey\"\n [caseDefinitionVersionTag]=\"obs.params?.caseDefinitionVersionTag\"\n [type]=\"ValuePathType.COLLECTION\"\n (collectionSelected)=\"onCollectionSelected($event)\"\n ></valtimo-value-path-selector>\n } @else {\n <input\n formControlName=\"collection\"\n cdsText\n [attr.data-carbon-theme]=\"theme\"\n [placeholder]=\"'widgetTabManagement.content.table.collection' | translate\"\n type=\"text\"\n />\n }\n </cds-text-label>\n</form>\n\n<ng-content></ng-content>\n\n<span class=\"valtimo-widget-management-table__subtitle\">\n {{ 'widgetTabManagement.content.table.columns' | translate }}\n</span>\n\n<valtimo-widget-management-fields-column\n [addTranslateKey]=\"'widgetTabManagement.content.table.addColumn'\"\n [columnData]=\"$content()?.columns\"\n (columnUpdateEvent)=\"onColumnUpdateEvent($event)\"\n [selectedCollection]=\"selectedCollection$ | async\"\n></valtimo-widget-management-fields-column>\n\n<section *ngIf=\"showFirstColumnOption\" class=\"valtimo-widget-management-table__toggle\">\n <span class=\"valtimo-widget-management-table__subtitle\">\n {{ 'widgetTabManagement.content.table.options' | translate }}\n </span>\n\n <cds-toggle\n [checked]=\"$checked()\"\n [label]=\"'widgetTabManagement.content.table.firstColumnAsTitle' | translate\"\n [onText]=\"'interface.yes' | translate\"\n [offText]=\"'interface.no' | translate\"\n (checkedChange)=\"onCheckedChange($event)\"\n ></cds-toggle>\n</section>\n", styles: [".valtimo-widget-management-table{display:flex;flex-direction:column;gap:24px}.valtimo-widget-management-table__form{display:grid;gap:16px;grid-template-columns:repeat(3,1fr);align-items:flex-end;padding:16px;background-color:var(--cds-layer-01)}.valtimo-widget-management-table__subtitle{font-size:16px;font-weight:600;line-height:22px}.valtimo-widget-management-table__toggle{display:flex;flex-direction:column;gap:8px}.valtimo-widget-management-table__path-selector{display:flex;flex-direction:column}.valtimo-widget-management-table .cds--text-input,.valtimo-widget-management-table .cds--list-box{background:var(--cds-layer-02)}\n/*!\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"] }]
|
|
4346
|
+
], 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<form\n *ngIf=\"{theme: theme$ | async, params: params$ | async} as obs\"\n [formGroup]=\"form\"\n class=\"valtimo-widget-management-table__form\"\n>\n <cds-text-label [attr.data-carbon-theme]=\"theme\">\n <v-input-label\n [title]=\"'widgetTabManagement.content.widgetTitle' | translate\"\n [tooltip]=\"'widgetTabManagement.content.widgetTitleTooltip' | translate\"\n >\n </v-input-label>\n\n <input\n formControlName=\"title\"\n cdsText\n [placeholder]=\"'widgetTabManagement.content.widgetTitlePlaceholder' | translate\"\n type=\"text\"\n />\n </cds-text-label>\n\n <valtimo-mdi-icon-selector\n [cdsLayer]=\"1\"\n formControlName=\"widgetIcon\"\n ></valtimo-mdi-icon-selector>\n\n <cds-text-label [attr.data-carbon-theme]=\"theme\">\n <v-input-label\n [title]=\"'widgetTabManagement.content.table.defaultPageSize' | translate\"\n [tooltip]=\"'widgetTabManagement.content.table.defaultPageSizeTooltip' | translate\"\n >\n </v-input-label>\n\n <input\n formControlName=\"defaultPageSize\"\n cdsText\n [placeholder]=\"'widgetTabManagement.content.table.defaultPageSizePlaceholder' | translate\"\n type=\"text\"\n />\n </cds-text-label>\n\n <cds-text-label [attr.data-carbon-theme]=\"theme\">\n <v-input-label\n [title]=\"'widgetTabManagement.content.table.collection' | translate\"\n [tooltip]=\"collectionDataTooltip$ | async\"\n >\n </v-input-label>\n\n @if ($widgetContext() === 'case') {\n <valtimo-value-path-selector\n formControlName=\"collection\"\n [attr.data-carbon-theme]=\"obs.theme\"\n [caseDefinitionKey]=\"obs.params?.caseDefinitionKey\"\n [caseDefinitionVersionTag]=\"obs.params?.caseDefinitionVersionTag\"\n [type]=\"ValuePathType.COLLECTION\"\n (collectionSelected)=\"onCollectionSelected($event)\"\n ></valtimo-value-path-selector>\n } @else {\n <input\n formControlName=\"collection\"\n cdsText\n [attr.data-carbon-theme]=\"theme\"\n [placeholder]=\"'widgetTabManagement.content.table.collection' | translate\"\n type=\"text\"\n />\n }\n </cds-text-label>\n</form>\n\n<ng-content></ng-content>\n\n<span class=\"valtimo-widget-management-table__subtitle\">\n {{ 'widgetTabManagement.content.table.columns' | translate }}\n</span>\n\n<valtimo-widget-management-fields-column\n [addTranslateKey]=\"'widgetTabManagement.content.table.addColumn'\"\n [columnData]=\"$content()?.columns\"\n (columnUpdateEvent)=\"onColumnUpdateEvent($event)\"\n [selectedCollection]=\"selectedCollection$ | async\"\n [showSortableCheckbox]=\"sortableColumns\"\n></valtimo-widget-management-fields-column>\n\n<section *ngIf=\"showFirstColumnOption\" class=\"valtimo-widget-management-table__toggle\">\n <span class=\"valtimo-widget-management-table__subtitle\">\n {{ 'widgetTabManagement.content.table.options' | translate }}\n </span>\n\n <cds-toggle\n [checked]=\"$checked()\"\n [label]=\"'widgetTabManagement.content.table.firstColumnAsTitle' | translate\"\n [onText]=\"'interface.yes' | translate\"\n [offText]=\"'interface.no' | translate\"\n (checkedChange)=\"onCheckedChange($event)\"\n ></cds-toggle>\n</section>\n", styles: [".valtimo-widget-management-table{display:flex;flex-direction:column;gap:24px}.valtimo-widget-management-table__form{display:grid;gap:16px;grid-template-columns:repeat(3,1fr);align-items:flex-end;padding:16px;background-color:var(--cds-layer-01)}.valtimo-widget-management-table__subtitle{font-size:16px;font-weight:600;line-height:22px}.valtimo-widget-management-table__toggle{display:flex;flex-direction:column;gap:8px}.valtimo-widget-management-table__path-selector{display:flex;flex-direction:column}.valtimo-widget-management-table .cds--text-input,.valtimo-widget-management-table .cds--list-box{background:var(--cds-layer-02)}\n/*!\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"] }]
|
|
3870
4347
|
}], ctorParameters: () => [{ type: i1.CdsThemeService }, { type: i1$3.FormBuilder }, { type: i2$1.TranslateService }, { type: WidgetWizardService }, { type: undefined, decorators: [{
|
|
3871
4348
|
type: Inject,
|
|
3872
4349
|
args: [WIDGET_MANAGEMENT_SERVICE]
|
|
@@ -3875,6 +4352,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
|
|
|
3875
4352
|
args: ['class']
|
|
3876
4353
|
}], showFirstColumnOption: [{
|
|
3877
4354
|
type: Input
|
|
4355
|
+
}], sortableColumns: [{
|
|
4356
|
+
type: Input
|
|
3878
4357
|
}] } });
|
|
3879
4358
|
|
|
3880
4359
|
/*
|
|
@@ -4071,7 +4550,7 @@ class WidgetManagementCollectionComponent {
|
|
|
4071
4550
|
}));
|
|
4072
4551
|
}
|
|
4073
4552
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: WidgetManagementCollectionComponent, deps: [{ token: i1.CdsThemeService }, { token: i1$3.FormBuilder }, { token: i2$1.TranslateService }, { token: WidgetFieldsService }, { token: WidgetWizardService }, { token: WIDGET_MANAGEMENT_SERVICE }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4074
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: WidgetManagementCollectionComponent, isStandalone: true, selector: "ng-component", host: { properties: { "class": "this.class" } }, 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 *ngIf=\"{theme: theme$ | async, params: params$ | async} as obs\">\n <form [formGroup]=\"widgetForm\" class=\"valtimo-widget-management-collection__form\">\n <cds-text-label [attr.data-carbon-theme]=\"theme\">\n <v-input-label\n [title]=\"'widgetTabManagement.content.widgetTitle' | translate\"\n [tooltip]=\"'widgetTabManagement.content.widgetTitleTooltip' | translate\"\n >\n </v-input-label>\n\n <input\n formControlName=\"title\"\n cdsText\n [placeholder]=\"'widgetTabManagement.content.widgetTitlePlaceholder' | translate\"\n type=\"text\"\n />\n </cds-text-label>\n\n <valtimo-mdi-icon-selector\n [cdsLayer]=\"1\"\n formControlName=\"widgetIcon\"\n ></valtimo-mdi-icon-selector>\n\n <cds-text-label [attr.data-carbon-theme]=\"theme\">\n <v-input-label\n [title]=\"'widgetTabManagement.content.collection.defaultPageSize' | translate\"\n [tooltip]=\"'widgetTabManagement.content.collection.defaultPageSizeTooltip' | translate\"\n >\n </v-input-label>\n\n <input\n formControlName=\"defaultPageSize\"\n cdsText\n [placeholder]=\"\n 'widgetTabManagement.content.collection.defaultPageSizePlaceholder' | translate\n \"\n type=\"text\"\n />\n </cds-text-label>\n\n <div class=\"valtimo-widget-management-collection__value-field\">\n <v-input-label\n [title]=\"'widgetTabManagement.content.collection.collection' | translate\"\n [tooltip]=\"collectionDataTooltip$ | async\"\n >\n </v-input-label>\n\n @if ($widgetContext() === 'case') {\n <valtimo-value-path-selector\n formControlName=\"collection\"\n [attr.data-carbon-theme]=\"theme\"\n [caseDefinitionKey]=\"obs.params?.caseDefinitionKey\"\n [caseDefinitionVersionTag]=\"obs.params?.caseDefinitionVersionTag\"\n [type]=\"ValuePathType.COLLECTION\"\n (collectionSelected)=\"onCollectionSelected($event)\"\n ></valtimo-value-path-selector>\n } @else {\n <input\n formControlName=\"collection\"\n cdsText\n [attr.data-carbon-theme]=\"theme\"\n [placeholder]=\"'widgetTabManagement.content.collection.collection' | translate\"\n type=\"text\"\n />\n }\n </div>\n </form>\n\n <ng-content></ng-content>\n\n <span class=\"valtimo-widget-management-collection__subtitle\">\n {{ 'widgetTabManagement.content.collection.cardTitle' | translate }}\n </span>\n\n <form [formGroup]=\"cardForm\" class=\"valtimo-widget-management-collection__card\">\n <section class=\"valtimo-widget-management-collection__card-title\">\n <div class=\"valtimo-widget-management-collection__path-selector\">\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.value' | translate\"\n [tooltip]=\"'widgetTabManagement.content.collection.valueTooltip' | translate\"\n >\n </v-input-label>\n @if ($widgetContext() === 'case') {\n <valtimo-value-path-selector\n formControlName=\"value\"\n [attr.data-carbon-theme]=\"theme\"\n [caseDefinitionKey]=\"obs.params?.caseDefinitionKey\"\n [caseDefinitionVersionTag]=\"obs.params?.caseDefinitionVersionTag\"\n [parentItem]=\"selectedCollection$ | async\"\n ></valtimo-value-path-selector>\n } @else {\n <input\n formControlName=\"value\"\n cdsText\n [attr.data-carbon-theme]=\"theme\"\n [placeholder]=\"'widgetTabManagement.content.fields.value' | translate\"\n type=\"text\"\n />\n }\n </div>\n\n <cds-dropdown\n [attr.data-carbon-theme]=\"theme\"\n [label]=\"'widgetTabManagement.content.fields.type' | translate\"\n [dropUp]=\"false\"\n [placeholder]=\"'widgetTabManagement.content.fields.typePlaceholder' | translate\"\n (selected)=\"onTypeSelected(cardForm, $event)\"\n formControlName=\"type\"\n >\n <cds-dropdown-list [items]=\"getDisplayItemsSelected(cardForm)\"></cds-dropdown-list>\n </cds-dropdown>\n </section>\n\n <section class=\"valtimo-widget-management-collection__card-options\">\n @switch (cardForm.get('type').value.id) {\n @case (WidgetDisplayTypeKey.CURRENCY) {\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.currencyCode' | translate\"\n [tooltip]=\"'widgetTabManagement.content.fields.currencyCodeTooltip' | translate\"\n >\n </v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"theme\"\n [placeholder]=\"\n 'widgetTabManagement.content.fields.currencyCodePlaceholder' | translate\n \"\n type=\"text\"\n formControlName=\"currencyCode\"\n />\n </cds-text-label>\n\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.display' | translate\"\n [tooltip]=\"'widgetTabManagement.content.fields.displayTooltip' | translate\"\n >\n </v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"theme\"\n [placeholder]=\"'widgetTabManagement.content.fields.displayPlaceholder' | translate\"\n type=\"text\"\n formControlName=\"display\"\n />\n </cds-text-label>\n\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n tooltip=\"{{\n 'widgetTabManagement.content.fields.digitsInfoTooltip'\n | translate: {minFractionDigits: 2, maxFractionDigits: 2}\n }}\"\n >\n </v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"theme\"\n [placeholder]=\"'widgetTabManagement.content.fields.digitsInfoPlaceholder' | translate\"\n type=\"text\"\n formControlName=\"digitsInfo\"\n />\n </cds-text-label>\n }\n @case (WidgetDisplayTypeKey.DATE) {\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.format' | translate\"\n [tooltip]=\"'widgetTabManagement.content.fields.dateFormatTooltip' | translate\"\n ></v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"theme\"\n [placeholder]=\"'widgetTabManagement.content.fields.formatPlaceholder' | translate\"\n type=\"text\"\n formControlName=\"format\"\n />\n </cds-text-label>\n }\n @case (WidgetDisplayTypeKey.DATE_TIME) {\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.format' | translate\"\n [tooltip]=\"'widgetTabManagement.content.fields.dateTimeFormatTooltip' | translate\"\n ></v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"theme\"\n [placeholder]=\"'widgetTabManagement.content.fields.formatPlaceholder' | translate\"\n type=\"text\"\n formControlName=\"format\"\n />\n </cds-text-label>\n }\n @case (WidgetDisplayTypeKey.ENUM) {\n <div class=\"valtimo-widget-management-collection__enum\" formArrayName=\"values\">\n @for (rowValue of cardForm.get('values')?.controls; track $index) {\n <form [formGroup]=\"rowValue\" class=\"valtimo-widget-management-collection__enum-form\">\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.enumValue' | translate\"\n [tooltip]=\"'widgetTabManagement.content.fields.enumValueTooltip' | translate\"\n >\n </v-input-label>\n\n <input\n [attr.data-carbon-theme]=\"theme\"\n cdsText\n [placeholder]=\"'widgetTabManagement.content.enumValue' | translate\"\n type=\"text\"\n formControlName=\"key\"\n />\n </cds-text-label>\n\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.enumDisplay' | translate\"\n [tooltip]=\"'widgetTabManagement.content.fields.enumDisplayTooltip' | translate\"\n >\n </v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"theme\"\n [placeholder]=\"'widgetTabManagement.content.fields.enumDisplay' | translate\"\n type=\"text\"\n formControlName=\"value\"\n />\n </cds-text-label>\n\n <button\n cdsButton=\"danger--ghost\"\n [disabled]=\"$count === 1\"\n [iconOnly]=\"true\"\n class=\"valtimo-case-management-widget-field-column__delete-button enum\"\n (click)=\"onDeleteRowClick(cardForm.get('values'), $index)\"\n >\n <svg cdsIcon=\"trash-can\" size=\"16\"></svg>\n </button>\n </form>\n }\n\n <button\n cdsButton=\"primary\"\n size=\"sm\"\n (click)=\"onAddEnumValueClick(cardForm.get('values'))\"\n >\n {{ 'widgetTabManagement.content.fields.addEnum' | translate }}\n\n <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n </button>\n </div>\n }\n @case (WidgetDisplayTypeKey.NUMBER) {\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n tooltip=\"{{\n 'widgetTabManagement.content.fields.digitsInfoTooltip'\n | translate\n : {\n minFractionDigits: 0,\n maxFractionDigits: 3,\n }\n }}\"\n >\n </v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"theme\"\n [placeholder]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n type=\"text\"\n formControlName=\"digitsInfo\"\n />\n </cds-text-label>\n }\n @case (WidgetDisplayTypeKey.PERCENT) {\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n tooltip=\"{{\n 'widgetTabManagement.content.fields.digitsInfoTooltip'\n | translate\n : {\n minFractionDigits: 0,\n maxFractionDigits: 0,\n }\n }}\"\n >\n </v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"theme\"\n [placeholder]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n type=\"text\"\n formControlName=\"digitsInfo\"\n />\n </cds-text-label>\n }\n }\n </section>\n </form>\n\n <span class=\"valtimo-widget-management-collection__subtitle\">\n {{ 'widgetTabManagement.content.collection.cardFields' | translate }}\n </span>\n\n <valtimo-widget-management-fields-column\n [columnData]=\"$content()?.fields\"\n [fieldWidthDropdown]=\"fieldWidthDropdown\"\n [showHideWhenEmptyCheckbox]=\"true\"\n (columnUpdateEvent)=\"onColumnUpdateEvent($event)\"\n [selectedCollection]=\"selectedCollection$ | async\"\n >\n </valtimo-widget-management-fields-column>\n\n <ng-template #fieldWidthDropdown let-index=\"index\">\n <cds-dropdown\n [label]=\"'widgetTabManagement.content.collection.fieldWidth' | translate\"\n [dropUp]=\"false\"\n [placeholder]=\"'widgetTabManagement.content.collection.fieldWidthPlaceholder' | translate\"\n (selected)=\"onWidthSelected($event, index)\"\n >\n <cds-dropdown-list [items]=\"getSelectedWidthItem(index)\"></cds-dropdown-list>\n </cds-dropdown>\n </ng-template>\n</ng-container>\n", styles: [".valtimo-widget-management-collection{display:flex;flex-direction:column;gap:24px}.valtimo-widget-management-collection__form{display:grid;gap:16px;grid-template-columns:repeat(3,1fr);align-items:flex-end;background:var(--cds-layer);padding:12px 16px 16px}.valtimo-widget-management-collection__subtitle{font-size:16px;font-weight:600;line-height:22px}.valtimo-widget-management-collection__value-field{display:flex;flex-direction:column}.valtimo-widget-management-collection__card{flex-direction:column;display:flex;gap:16px;background:var(--cds-layer);padding:16px}.valtimo-widget-management-collection__card-title{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;align-items:flex-end}.valtimo-widget-management-collection__card-options{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.valtimo-widget-management-collection__enum{display:flex;flex-direction:column;gap:16px}.valtimo-widget-management-collection__enum-form{display:grid;grid-template-columns:1fr 1fr auto;align-items:flex-end;gap:16px}.valtimo-widget-management-collection .cds--text-input,.valtimo-widget-management-collection .cds--list-box{background:var(--cds-layer-02)}\n/*!\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"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "component", type: WidgetManagementFieldsColumnComponent, selector: "valtimo-widget-management-fields-column", inputs: ["columnData", "addTranslateKey", "fieldWidthDropdown", "selectedCollection", "showHideWhenEmptyCheckbox"], outputs: ["columnUpdateEvent"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$3.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i3.TextInputLabelComponent, selector: "cds-text-label, ibm-text-label", inputs: ["labelInputID", "disabled", "skeleton", "labelTemplate", "textInputTemplate", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel", "fluid"] }, { kind: "directive", type: i3.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i7.Dropdown, selector: "cds-dropdown, ibm-dropdown", inputs: ["id", "label", "hideLabel", "helperText", "placeholder", "displayValue", "clearText", "size", "type", "theme", "disabled", "readonly", "skeleton", "inline", "disableArrowKeys", "invalid", "invalidText", "warn", "warnText", "appendInline", "scrollableContainer", "itemValueKey", "selectionFeedback", "menuButtonLabel", "selectedLabel", "dropUp", "fluid"], outputs: ["selected", "onClose", "close"] }, { kind: "component", type: i7.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "ngmodule", type: IconModule }, { kind: "directive", type: i3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "ngmodule", type: InputLabelModule }, { kind: "component", type: i1.InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "tooltipTranslationKey", "largeMargin", "small", "noMargin", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }, { kind: "component", type: ValuePathSelectorComponent, selector: "valtimo-value-path-selector", inputs: ["name", "appendInline", "margin", "marginLg", "marginXl", "disabled", "caseDefinitionKey", "caseDefinitionVersionTag", "prefixes", "label", "tooltip", "required", "showCaseDefinitionSelector", "notation", "defaultValue", "type", "parentItem"], outputs: ["valueChangeEvent", "collectionSelected"] }, { kind: "component", type: MdiIconSelectorComponent, selector: "valtimo-mdi-icon-selector", inputs: ["labelTranslationKey", "tooltipTranslationKey", "placeholderTranslationKey", "appendInline", "dropUp"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
4553
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: WidgetManagementCollectionComponent, isStandalone: true, selector: "ng-component", host: { properties: { "class": "this.class" } }, 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 *ngIf=\"{theme: theme$ | async, params: params$ | async} as obs\">\n <form [formGroup]=\"widgetForm\" class=\"valtimo-widget-management-collection__form\">\n <cds-text-label [attr.data-carbon-theme]=\"theme\">\n <v-input-label\n [title]=\"'widgetTabManagement.content.widgetTitle' | translate\"\n [tooltip]=\"'widgetTabManagement.content.widgetTitleTooltip' | translate\"\n >\n </v-input-label>\n\n <input\n formControlName=\"title\"\n cdsText\n [placeholder]=\"'widgetTabManagement.content.widgetTitlePlaceholder' | translate\"\n type=\"text\"\n />\n </cds-text-label>\n\n <valtimo-mdi-icon-selector\n [cdsLayer]=\"1\"\n formControlName=\"widgetIcon\"\n ></valtimo-mdi-icon-selector>\n\n <cds-text-label [attr.data-carbon-theme]=\"theme\">\n <v-input-label\n [title]=\"'widgetTabManagement.content.collection.defaultPageSize' | translate\"\n [tooltip]=\"'widgetTabManagement.content.collection.defaultPageSizeTooltip' | translate\"\n >\n </v-input-label>\n\n <input\n formControlName=\"defaultPageSize\"\n cdsText\n [placeholder]=\"\n 'widgetTabManagement.content.collection.defaultPageSizePlaceholder' | translate\n \"\n type=\"text\"\n />\n </cds-text-label>\n\n <div class=\"valtimo-widget-management-collection__value-field\">\n <v-input-label\n [title]=\"'widgetTabManagement.content.collection.collection' | translate\"\n [tooltip]=\"collectionDataTooltip$ | async\"\n >\n </v-input-label>\n\n @if ($widgetContext() === 'case') {\n <valtimo-value-path-selector\n formControlName=\"collection\"\n [attr.data-carbon-theme]=\"theme\"\n [caseDefinitionKey]=\"obs.params?.caseDefinitionKey\"\n [caseDefinitionVersionTag]=\"obs.params?.caseDefinitionVersionTag\"\n [type]=\"ValuePathType.COLLECTION\"\n (collectionSelected)=\"onCollectionSelected($event)\"\n ></valtimo-value-path-selector>\n } @else {\n <input\n formControlName=\"collection\"\n cdsText\n [attr.data-carbon-theme]=\"theme\"\n [placeholder]=\"'widgetTabManagement.content.collection.collection' | translate\"\n type=\"text\"\n />\n }\n </div>\n </form>\n\n <ng-content></ng-content>\n\n <span class=\"valtimo-widget-management-collection__subtitle\">\n {{ 'widgetTabManagement.content.collection.cardTitle' | translate }}\n </span>\n\n <form [formGroup]=\"cardForm\" class=\"valtimo-widget-management-collection__card\">\n <section class=\"valtimo-widget-management-collection__card-title\">\n <div class=\"valtimo-widget-management-collection__path-selector\">\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.value' | translate\"\n [tooltip]=\"'widgetTabManagement.content.collection.valueTooltip' | translate\"\n >\n </v-input-label>\n @if ($widgetContext() === 'case') {\n <valtimo-value-path-selector\n formControlName=\"value\"\n [attr.data-carbon-theme]=\"theme\"\n [caseDefinitionKey]=\"obs.params?.caseDefinitionKey\"\n [caseDefinitionVersionTag]=\"obs.params?.caseDefinitionVersionTag\"\n [parentItem]=\"selectedCollection$ | async\"\n ></valtimo-value-path-selector>\n } @else {\n <input\n formControlName=\"value\"\n cdsText\n [attr.data-carbon-theme]=\"theme\"\n [placeholder]=\"'widgetTabManagement.content.fields.value' | translate\"\n type=\"text\"\n />\n }\n </div>\n\n <cds-dropdown\n [attr.data-carbon-theme]=\"theme\"\n [label]=\"'widgetTabManagement.content.fields.type' | translate\"\n [dropUp]=\"false\"\n [placeholder]=\"'widgetTabManagement.content.fields.typePlaceholder' | translate\"\n (selected)=\"onTypeSelected(cardForm, $event)\"\n formControlName=\"type\"\n >\n <cds-dropdown-list [items]=\"getDisplayItemsSelected(cardForm)\"></cds-dropdown-list>\n </cds-dropdown>\n </section>\n\n <section class=\"valtimo-widget-management-collection__card-options\">\n @switch (cardForm.get('type').value.id) {\n @case (WidgetDisplayTypeKey.CURRENCY) {\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.currencyCode' | translate\"\n [tooltip]=\"'widgetTabManagement.content.fields.currencyCodeTooltip' | translate\"\n >\n </v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"theme\"\n [placeholder]=\"\n 'widgetTabManagement.content.fields.currencyCodePlaceholder' | translate\n \"\n type=\"text\"\n formControlName=\"currencyCode\"\n />\n </cds-text-label>\n\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.display' | translate\"\n [tooltip]=\"'widgetTabManagement.content.fields.displayTooltip' | translate\"\n >\n </v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"theme\"\n [placeholder]=\"'widgetTabManagement.content.fields.displayPlaceholder' | translate\"\n type=\"text\"\n formControlName=\"display\"\n />\n </cds-text-label>\n\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n tooltip=\"{{\n 'widgetTabManagement.content.fields.digitsInfoTooltip'\n | translate: {minFractionDigits: 2, maxFractionDigits: 2}\n }}\"\n >\n </v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"theme\"\n [placeholder]=\"'widgetTabManagement.content.fields.digitsInfoPlaceholder' | translate\"\n type=\"text\"\n formControlName=\"digitsInfo\"\n />\n </cds-text-label>\n }\n @case (WidgetDisplayTypeKey.DATE) {\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.format' | translate\"\n [tooltip]=\"'widgetTabManagement.content.fields.dateFormatTooltip' | translate\"\n ></v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"theme\"\n [placeholder]=\"'widgetTabManagement.content.fields.formatPlaceholder' | translate\"\n type=\"text\"\n formControlName=\"format\"\n />\n </cds-text-label>\n }\n @case (WidgetDisplayTypeKey.DATE_TIME) {\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.format' | translate\"\n [tooltip]=\"'widgetTabManagement.content.fields.dateTimeFormatTooltip' | translate\"\n ></v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"theme\"\n [placeholder]=\"'widgetTabManagement.content.fields.formatPlaceholder' | translate\"\n type=\"text\"\n formControlName=\"format\"\n />\n </cds-text-label>\n }\n @case (WidgetDisplayTypeKey.ENUM) {\n <div class=\"valtimo-widget-management-collection__enum\" formArrayName=\"values\">\n @for (rowValue of cardForm.get('values')?.controls; track $index) {\n <form [formGroup]=\"rowValue\" class=\"valtimo-widget-management-collection__enum-form\">\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.enumValue' | translate\"\n [tooltip]=\"'widgetTabManagement.content.fields.enumValueTooltip' | translate\"\n >\n </v-input-label>\n\n <input\n [attr.data-carbon-theme]=\"theme\"\n cdsText\n [placeholder]=\"'widgetTabManagement.content.enumValue' | translate\"\n type=\"text\"\n formControlName=\"key\"\n />\n </cds-text-label>\n\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.enumDisplay' | translate\"\n [tooltip]=\"'widgetTabManagement.content.fields.enumDisplayTooltip' | translate\"\n >\n </v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"theme\"\n [placeholder]=\"'widgetTabManagement.content.fields.enumDisplay' | translate\"\n type=\"text\"\n formControlName=\"value\"\n />\n </cds-text-label>\n\n <button\n cdsButton=\"danger--ghost\"\n [disabled]=\"$count === 1\"\n [iconOnly]=\"true\"\n class=\"valtimo-case-management-widget-field-column__delete-button enum\"\n (click)=\"onDeleteRowClick(cardForm.get('values'), $index)\"\n >\n <svg cdsIcon=\"trash-can\" size=\"16\"></svg>\n </button>\n </form>\n }\n\n <button\n cdsButton=\"primary\"\n size=\"sm\"\n (click)=\"onAddEnumValueClick(cardForm.get('values'))\"\n >\n {{ 'widgetTabManagement.content.fields.addEnum' | translate }}\n\n <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n </button>\n </div>\n }\n @case (WidgetDisplayTypeKey.NUMBER) {\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n tooltip=\"{{\n 'widgetTabManagement.content.fields.digitsInfoTooltip'\n | translate\n : {\n minFractionDigits: 0,\n maxFractionDigits: 3,\n }\n }}\"\n >\n </v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"theme\"\n [placeholder]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n type=\"text\"\n formControlName=\"digitsInfo\"\n />\n </cds-text-label>\n }\n @case (WidgetDisplayTypeKey.PERCENT) {\n <cds-text-label>\n <v-input-label\n [title]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n tooltip=\"{{\n 'widgetTabManagement.content.fields.digitsInfoTooltip'\n | translate\n : {\n minFractionDigits: 0,\n maxFractionDigits: 0,\n }\n }}\"\n >\n </v-input-label>\n\n <input\n cdsText\n [attr.data-carbon-theme]=\"theme\"\n [placeholder]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n type=\"text\"\n formControlName=\"digitsInfo\"\n />\n </cds-text-label>\n }\n }\n </section>\n </form>\n\n <span class=\"valtimo-widget-management-collection__subtitle\">\n {{ 'widgetTabManagement.content.collection.cardFields' | translate }}\n </span>\n\n <valtimo-widget-management-fields-column\n [columnData]=\"$content()?.fields\"\n [fieldWidthDropdown]=\"fieldWidthDropdown\"\n [showHideWhenEmptyCheckbox]=\"true\"\n (columnUpdateEvent)=\"onColumnUpdateEvent($event)\"\n [selectedCollection]=\"selectedCollection$ | async\"\n >\n </valtimo-widget-management-fields-column>\n\n <ng-template #fieldWidthDropdown let-index=\"index\">\n <cds-dropdown\n [label]=\"'widgetTabManagement.content.collection.fieldWidth' | translate\"\n [dropUp]=\"false\"\n [placeholder]=\"'widgetTabManagement.content.collection.fieldWidthPlaceholder' | translate\"\n (selected)=\"onWidthSelected($event, index)\"\n >\n <cds-dropdown-list [items]=\"getSelectedWidthItem(index)\"></cds-dropdown-list>\n </cds-dropdown>\n </ng-template>\n</ng-container>\n", styles: [".valtimo-widget-management-collection{display:flex;flex-direction:column;gap:24px}.valtimo-widget-management-collection__form{display:grid;gap:16px;grid-template-columns:repeat(3,1fr);align-items:flex-end;background:var(--cds-layer);padding:12px 16px 16px}.valtimo-widget-management-collection__subtitle{font-size:16px;font-weight:600;line-height:22px}.valtimo-widget-management-collection__value-field{display:flex;flex-direction:column}.valtimo-widget-management-collection__card{flex-direction:column;display:flex;gap:16px;background:var(--cds-layer);padding:16px}.valtimo-widget-management-collection__card-title{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;align-items:flex-end}.valtimo-widget-management-collection__card-options{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.valtimo-widget-management-collection__enum{display:flex;flex-direction:column;gap:16px}.valtimo-widget-management-collection__enum-form{display:grid;grid-template-columns:1fr 1fr auto;align-items:flex-end;gap:16px}.valtimo-widget-management-collection .cds--text-input,.valtimo-widget-management-collection .cds--list-box{background:var(--cds-layer-02)}\n/*!\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"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "component", type: WidgetManagementFieldsColumnComponent, selector: "valtimo-widget-management-fields-column", inputs: ["columnData", "addTranslateKey", "fieldWidthDropdown", "selectedCollection", "showHideWhenEmptyCheckbox", "showSortableCheckbox"], outputs: ["columnUpdateEvent"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$3.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i3.TextInputLabelComponent, selector: "cds-text-label, ibm-text-label", inputs: ["labelInputID", "disabled", "skeleton", "labelTemplate", "textInputTemplate", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel", "fluid"] }, { kind: "directive", type: i3.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i7.Dropdown, selector: "cds-dropdown, ibm-dropdown", inputs: ["id", "label", "hideLabel", "helperText", "placeholder", "displayValue", "clearText", "size", "type", "theme", "disabled", "readonly", "skeleton", "inline", "disableArrowKeys", "invalid", "invalidText", "warn", "warnText", "appendInline", "scrollableContainer", "itemValueKey", "selectionFeedback", "menuButtonLabel", "selectedLabel", "dropUp", "fluid"], outputs: ["selected", "onClose", "close"] }, { kind: "component", type: i7.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "ngmodule", type: IconModule }, { kind: "directive", type: i3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "ngmodule", type: InputLabelModule }, { kind: "component", type: i1.InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "tooltipTranslationKey", "largeMargin", "small", "noMargin", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }, { kind: "component", type: ValuePathSelectorComponent, selector: "valtimo-value-path-selector", inputs: ["name", "appendInline", "margin", "marginLg", "marginXl", "disabled", "caseDefinitionKey", "caseDefinitionVersionTag", "prefixes", "label", "tooltip", "required", "showCaseDefinitionSelector", "notation", "defaultValue", "type", "parentItem"], outputs: ["valueChangeEvent", "collectionSelected"] }, { kind: "component", type: MdiIconSelectorComponent, selector: "valtimo-mdi-icon-selector", inputs: ["labelTranslationKey", "tooltipTranslationKey", "placeholderTranslationKey", "appendInline", "dropUp"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
4075
4554
|
}
|
|
4076
4555
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: WidgetManagementCollectionComponent, decorators: [{
|
|
4077
4556
|
type: Component,
|
|
@@ -4193,7 +4672,7 @@ class WidgetManagementCustomComponent {
|
|
|
4193
4672
|
this.widgetWizardService.$widgetContentValid.set(true);
|
|
4194
4673
|
}
|
|
4195
4674
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: WidgetManagementCustomComponent, deps: [{ token: CUSTOM_WIDGET_TOKEN, optional: true }, { token: i1.CdsThemeService }, { token: i1$3.FormBuilder }, { token: WidgetWizardService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4196
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: WidgetManagementCustomComponent, isStandalone: true, selector: "ng-component", 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<form\n class=\"valtimo-widget-management-custom\"\n [formGroup]=\"form\"\n [attr.data-carbon-theme]=\"theme$ | async\"\n>\n <div class=\"valtimo-widget-management-custom__title-container\">\n <cds-text-label\n class=\"valtimo-widget-management-fields__input valtimo-widget-management-custom__title-input\"\n >\n <v-input-label\n [title]=\"'widgetTabManagement.content.widgetTitle' | translate\"\n [tooltip]=\"'widgetTabManagement.content.widgetTitleTooltip' | translate\"\n >\n </v-input-label>\n\n <input\n formControlName=\"widgetTitle\"\n cdsText\n [placeholder]=\"'widgetTabManagement.content.widgetTitlePlaceholder' | translate\"\n type=\"text\"\n />\n </cds-text-label>\n\n <valtimo-mdi-icon-selector\n [cdsLayer]=\"0\"\n formControlName=\"widgetIcon\"\n ></valtimo-mdi-icon-selector>\n </div>\n\n <ng-content></ng-content>\n\n <cds-label class=\"dropdown-label\">\n {{ 'widgetTabManagement.content.custom.selectComponent' | translate }}\n\n <cds-dropdown\n *ngIf=\"componentListItems$ | async as componentListItems\"\n [appendInline]=\"false\"\n [placeholder]=\"'widgetTabManagement.content.custom.placeholder' | translate\"\n [disabled]=\"componentListItems.length === 0\"\n (selected)=\"componentDropDownChange($event)\"\n >\n <cds-dropdown-list [items]=\"componentListItems\"> </cds-dropdown-list>\n </cds-dropdown>\n </cds-label>\n\n <valtimo-carbon-multi-input\n type=\"keyValue\"\n [addRowText]=\"'widgetTabManagement.content.custom.addCustomKeyValue' | translate\"\n addButtonType=\"tertiary\"\n [defaultValues]=\"$defaultComponentValues()\"\n [keyColumnTitle]=\"'interface.key' | translate\"\n [valueColumnTitle]=\"'interface.value' | translate\"\n [fullWidth]=\"true\"\n [initialAmountOfRows]=\"0\"\n [minimumAmountOfRows]=\"0\"\n (valueChange)=\"onKeyValueChange($event)\"\n [keyColumnFlex]=\"1\"\n [valueColumnFlex]=\"1\"\n ></valtimo-carbon-multi-input>\n</form>\n", styles: [".valtimo-widget-management-custom{display:flex;flex-direction:column;gap:16px;padding:16px}.valtimo-widget-management-custom ::ng-deep>*:not(:last-child){padding:16px;background:var(--cds-layer-02)}.valtimo-widget-management-custom ::ng-deep .v-multi-input__row{padding:16px;background:var(--cds-layer-02)}.valtimo-widget-management-custom ::ng-deep .v-multi-input__row .cds--text-input{background:var(--cds-layer-01)}.valtimo-widget-management-custom ::ng-deep .dropdown-label label{display:flex;flex-direction:column;width:100%}.valtimo-widget-management-custom ::ng-deep .dropdown-label cds-dropdown{margin-top:8px}.valtimo-widget-management-custom__title-container{display:flex;gap:16px}.valtimo-widget-management-custom__title-input{max-width:300px}\n/*!\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"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { 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: "component", type: i3.TextInputLabelComponent, selector: "cds-text-label, ibm-text-label", inputs: ["labelInputID", "disabled", "skeleton", "labelTemplate", "textInputTemplate", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel", "fluid"] }, { kind: "directive", type: i3.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SelectModule }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i7.Dropdown, selector: "cds-dropdown, ibm-dropdown", inputs: ["id", "label", "hideLabel", "helperText", "placeholder", "displayValue", "clearText", "size", "type", "theme", "disabled", "readonly", "skeleton", "inline", "disableArrowKeys", "invalid", "invalidText", "warn", "warnText", "appendInline", "scrollableContainer", "itemValueKey", "selectionFeedback", "menuButtonLabel", "selectedLabel", "dropUp", "fluid"], outputs: ["selected", "onClose", "close"] }, { kind: "component", type: i7.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "ngmodule", type: LayerModule }, { kind: "directive", type: i3.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }, { kind: "component", type: MdiIconSelectorComponent, selector: "valtimo-mdi-icon-selector", inputs: ["labelTranslationKey", "tooltipTranslationKey", "placeholderTranslationKey", "appendInline", "dropUp"] }, { kind: "ngmodule", type: InputLabelModule }, { kind: "component", type: i1.InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "tooltipTranslationKey", "largeMargin", "small", "noMargin", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }, { kind: "ngmodule", type: CarbonMultiInputModule }, { kind: "component", type: i1.CarbonMultiInputComponent, selector: "valtimo-carbon-multi-input", inputs: ["addRowText", "addButtonType", "addRowTranslationKey", "arbitraryAmountTitles", "arbitraryValueAmount", "defaultValues", "deleteRowText", "deleteRowTranslationKey", "disabled", "dropdownColumnTitle", "dropdownItems", "dropdownWidth", "fullWidth", "hideAddButton", "hideDeleteButton", "initialAmountOfRows", "keyColumnTitle", "margin", "maxRows", "minimumAmountOfRows", "name", "required", "title", "titleTranslationKey", "tooltip", "type", "valueColumnTitle", "valuePathSelectorCaseDefinitionKey", "valuePathSelectorPrefixes", "valuePathSelectorShowCaseDefinitionSelector", "valuePathSelectorNotation", "keyColumnFlex", "dropdownColumnFlex", "valueColumnFlex"], outputs: ["valueChange", "allValuesValidEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4675
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: WidgetManagementCustomComponent, isStandalone: true, selector: "ng-component", 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<form\n class=\"valtimo-widget-management-custom\"\n [formGroup]=\"form\"\n [attr.data-carbon-theme]=\"theme$ | async\"\n>\n <div class=\"valtimo-widget-management-custom__title-container\">\n <cds-text-label\n class=\"valtimo-widget-management-fields__input valtimo-widget-management-custom__title-input\"\n >\n <v-input-label\n [title]=\"'widgetTabManagement.content.widgetTitle' | translate\"\n [tooltip]=\"'widgetTabManagement.content.widgetTitleTooltip' | translate\"\n >\n </v-input-label>\n\n <input\n formControlName=\"widgetTitle\"\n cdsText\n [placeholder]=\"'widgetTabManagement.content.widgetTitlePlaceholder' | translate\"\n type=\"text\"\n />\n </cds-text-label>\n\n <valtimo-mdi-icon-selector\n [cdsLayer]=\"0\"\n formControlName=\"widgetIcon\"\n ></valtimo-mdi-icon-selector>\n </div>\n\n <ng-content></ng-content>\n\n <cds-label class=\"dropdown-label\">\n {{ 'widgetTabManagement.content.custom.selectComponent' | translate }}\n\n <cds-dropdown\n *ngIf=\"componentListItems$ | async as componentListItems\"\n [appendInline]=\"false\"\n [placeholder]=\"'widgetTabManagement.content.custom.placeholder' | translate\"\n [disabled]=\"componentListItems.length === 0\"\n (selected)=\"componentDropDownChange($event)\"\n >\n <cds-dropdown-list [items]=\"componentListItems\"> </cds-dropdown-list>\n </cds-dropdown>\n </cds-label>\n\n <valtimo-carbon-multi-input\n type=\"keyValue\"\n [addRowText]=\"'widgetTabManagement.content.custom.addCustomKeyValue' | translate\"\n addButtonType=\"tertiary\"\n [defaultValues]=\"$defaultComponentValues()\"\n [keyColumnTitle]=\"'interface.key' | translate\"\n [valueColumnTitle]=\"'interface.value' | translate\"\n [fullWidth]=\"true\"\n [initialAmountOfRows]=\"0\"\n [minimumAmountOfRows]=\"0\"\n (valueChange)=\"onKeyValueChange($event)\"\n [keyColumnFlex]=\"1\"\n [valueColumnFlex]=\"1\"\n ></valtimo-carbon-multi-input>\n</form>\n", styles: [".valtimo-widget-management-custom{display:flex;flex-direction:column;gap:16px;padding:16px}.valtimo-widget-management-custom ::ng-deep>*:not(:last-child){padding:16px;background:var(--cds-layer-02)}.valtimo-widget-management-custom ::ng-deep .v-multi-input__row{padding:16px;background:var(--cds-layer-02)}.valtimo-widget-management-custom ::ng-deep .v-multi-input__row .cds--text-input{background:var(--cds-layer-01)}.valtimo-widget-management-custom ::ng-deep .dropdown-label label{display:flex;flex-direction:column;width:100%}.valtimo-widget-management-custom ::ng-deep .dropdown-label cds-dropdown{margin-top:8px}.valtimo-widget-management-custom__title-container{display:flex;gap:16px}.valtimo-widget-management-custom__title-input{max-width:300px}\n/*!\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"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { 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: "component", type: i3.TextInputLabelComponent, selector: "cds-text-label, ibm-text-label", inputs: ["labelInputID", "disabled", "skeleton", "labelTemplate", "textInputTemplate", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel", "fluid"] }, { kind: "directive", type: i3.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SelectModule$1 }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i7.Dropdown, selector: "cds-dropdown, ibm-dropdown", inputs: ["id", "label", "hideLabel", "helperText", "placeholder", "displayValue", "clearText", "size", "type", "theme", "disabled", "readonly", "skeleton", "inline", "disableArrowKeys", "invalid", "invalidText", "warn", "warnText", "appendInline", "scrollableContainer", "itemValueKey", "selectionFeedback", "menuButtonLabel", "selectedLabel", "dropUp", "fluid"], outputs: ["selected", "onClose", "close"] }, { kind: "component", type: i7.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "ngmodule", type: LayerModule }, { kind: "directive", type: i3.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }, { kind: "component", type: MdiIconSelectorComponent, selector: "valtimo-mdi-icon-selector", inputs: ["labelTranslationKey", "tooltipTranslationKey", "placeholderTranslationKey", "appendInline", "dropUp"] }, { kind: "ngmodule", type: InputLabelModule }, { kind: "component", type: i1.InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "tooltipTranslationKey", "largeMargin", "small", "noMargin", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }, { kind: "ngmodule", type: CarbonMultiInputModule }, { kind: "component", type: i1.CarbonMultiInputComponent, selector: "valtimo-carbon-multi-input", inputs: ["addRowText", "addButtonType", "addRowTranslationKey", "arbitraryAmountTitles", "arbitraryValueAmount", "defaultValues", "deleteRowText", "deleteRowTranslationKey", "disabled", "dropdownColumnTitle", "dropdownItems", "dropdownWidth", "fullWidth", "hideAddButton", "hideDeleteButton", "initialAmountOfRows", "keyColumnTitle", "margin", "maxRows", "minimumAmountOfRows", "name", "required", "title", "titleTranslationKey", "tooltip", "type", "valueColumnTitle", "valuePathSelectorCaseDefinitionKey", "valuePathSelectorPrefixes", "valuePathSelectorShowCaseDefinitionSelector", "valuePathSelectorNotation", "keyColumnFlex", "dropdownColumnFlex", "valueColumnFlex"], outputs: ["valueChange", "allValuesValidEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4197
4676
|
}
|
|
4198
4677
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: WidgetManagementCustomComponent, decorators: [{
|
|
4199
4678
|
type: Component,
|
|
@@ -4202,7 +4681,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
|
|
|
4202
4681
|
TranslateModule,
|
|
4203
4682
|
InputModule,
|
|
4204
4683
|
ReactiveFormsModule,
|
|
4205
|
-
SelectModule,
|
|
4684
|
+
SelectModule$1,
|
|
4206
4685
|
DropdownModule,
|
|
4207
4686
|
LayerModule,
|
|
4208
4687
|
MdiIconSelectorComponent,
|
|
@@ -4423,7 +4902,7 @@ class WidgetManagementInteractiveTableComponent {
|
|
|
4423
4902
|
}));
|
|
4424
4903
|
}
|
|
4425
4904
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: WidgetManagementInteractiveTableComponent, deps: [{ token: i1$3.FormBuilder }, { token: WidgetWizardService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4426
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: WidgetManagementInteractiveTableComponent, isStandalone: true, selector: "ng-component", host: { properties: { "class": "this.class" } }, 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<valtimo-widget-management-table [showFirstColumnOption]=\"false\">\n <ng-content></ng-content>\n\n <form [formGroup]=\"formGroup\" class=\"valtimo-widget-management-interactive-table__form\">\n <cds-checkbox formControlName=\"canStartCase\">\n {{ 'ikoManagement.canStartCase' | translate }}\n </cds-checkbox>\n\n <cds-text-label class=\"valtimo-widget-management-interactive-table__row-action\">\n {{ 'ikoManagement.rowAction' | translate }}\n\n <input\n formControlName=\"rowClickAction\"\n cdsText\n cdsLayer=\"1\"\n [placeholder]=\"'ikoManagement.rowAction' | translate\"\n type=\"text\"\n />\n </cds-text-label>\n\n <valtimo-carbon-multi-input\n type=\"keyValue\"\n formControlName=\"actions\"\n [addRowText]=\"'Add external link' | translate\"\n [keyColumnTitle]=\"'interface.name' | translate\"\n [minimumAmountOfRows]=\"0\"\n [valueColumnTitle]=\"'interface.url' | translate\"\n ></valtimo-carbon-multi-input>\n </form>\n</valtimo-widget-management-table>\n", styles: [".valtimo-widget-management-interactive-table__form,.valtimo-widget-management-interactive-table__form>div{display:flex;flex-direction:column;gap:16px}.valtimo-widget-management-interactive-table__external-links-row{display:grid;grid-template-columns:1fr 1fr 56px;gap:16px;align-items:self-end;padding:12px 16px 16px}.valtimo-widget-management-interactive-table valtimo-key-value{width:100%!important}.valtimo-widget-management-interactive-table .v-multi-input__row{padding:12px 16px 16px}.valtimo-widget-management-interactive-table__row-action{padding:16px;background-color:var(--cds-layer-01)}.valtimo-widget-management-interactive-table .v-multi-input__row{padding:12px 16px 16px;background-color:var(--cds-layer-01)}.valtimo-widget-management-interactive-table .cds--text-input,.valtimo-widget-management-interactive-table .cds--list-box{background:var(--cds-layer-02)}\n/*!\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"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: WidgetManagementTableComponent, selector: "valtimo-widget-management-table", inputs: ["showFirstColumnOption"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i3.Checkbox, selector: "cds-checkbox, ibm-checkbox", inputs: ["disabled", "skeleton", "hideLabel", "name", "id", "required", "value", "ariaLabel", "ariaLabelledby", "indeterminate", "checked"], outputs: ["click", "checkedChange", "indeterminateChange"] }, { kind: "ngmodule", type: IconModule }, { kind: "ngmodule", type: CarbonMultiInputModule }, { kind: "component", type: i1.CarbonMultiInputComponent, selector: "valtimo-carbon-multi-input", inputs: ["addRowText", "addButtonType", "addRowTranslationKey", "arbitraryAmountTitles", "arbitraryValueAmount", "defaultValues", "deleteRowText", "deleteRowTranslationKey", "disabled", "dropdownColumnTitle", "dropdownItems", "dropdownWidth", "fullWidth", "hideAddButton", "hideDeleteButton", "initialAmountOfRows", "keyColumnTitle", "margin", "maxRows", "minimumAmountOfRows", "name", "required", "title", "titleTranslationKey", "tooltip", "type", "valueColumnTitle", "valuePathSelectorCaseDefinitionKey", "valuePathSelectorPrefixes", "valuePathSelectorShowCaseDefinitionSelector", "valuePathSelectorNotation", "keyColumnFlex", "dropdownColumnFlex", "valueColumnFlex"], outputs: ["valueChange", "allValuesValidEvent"] }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i3.TextInputLabelComponent, selector: "cds-text-label, ibm-text-label", inputs: ["labelInputID", "disabled", "skeleton", "labelTemplate", "textInputTemplate", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel", "fluid"] }, { kind: "directive", type: i3.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "ngmodule", type: LayerModule }, { kind: "directive", type: i3.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
4905
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: WidgetManagementInteractiveTableComponent, isStandalone: true, selector: "ng-component", host: { properties: { "class": "this.class" } }, 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<valtimo-widget-management-table [showFirstColumnOption]=\"false\" [sortableColumns]=\"true\">\n <ng-content></ng-content>\n\n <form [formGroup]=\"formGroup\" class=\"valtimo-widget-management-interactive-table__form\">\n <cds-checkbox formControlName=\"canStartCase\">\n {{ 'ikoManagement.canStartCase' | translate }}\n </cds-checkbox>\n\n <cds-text-label class=\"valtimo-widget-management-interactive-table__row-action\">\n {{ 'ikoManagement.rowAction' | translate }}\n\n <input\n formControlName=\"rowClickAction\"\n cdsText\n cdsLayer=\"1\"\n [placeholder]=\"'ikoManagement.rowAction' | translate\"\n type=\"text\"\n />\n </cds-text-label>\n\n <valtimo-carbon-multi-input\n type=\"keyValue\"\n formControlName=\"actions\"\n [addRowText]=\"'Add external link' | translate\"\n [keyColumnTitle]=\"'interface.name' | translate\"\n [minimumAmountOfRows]=\"0\"\n [valueColumnTitle]=\"'interface.url' | translate\"\n ></valtimo-carbon-multi-input>\n </form>\n</valtimo-widget-management-table>\n", styles: [".valtimo-widget-management-interactive-table__form,.valtimo-widget-management-interactive-table__form>div{display:flex;flex-direction:column;gap:16px}.valtimo-widget-management-interactive-table__external-links-row{display:grid;grid-template-columns:1fr 1fr 56px;gap:16px;align-items:self-end;padding:12px 16px 16px}.valtimo-widget-management-interactive-table valtimo-key-value{width:100%!important}.valtimo-widget-management-interactive-table .v-multi-input__row{padding:12px 16px 16px}.valtimo-widget-management-interactive-table__row-action{padding:16px;background-color:var(--cds-layer-01)}.valtimo-widget-management-interactive-table .v-multi-input__row{padding:12px 16px 16px;background-color:var(--cds-layer-01)}.valtimo-widget-management-interactive-table .cds--text-input,.valtimo-widget-management-interactive-table .cds--list-box{background:var(--cds-layer-02)}\n/*!\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"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: WidgetManagementTableComponent, selector: "valtimo-widget-management-table", inputs: ["showFirstColumnOption", "sortableColumns"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i3.Checkbox, selector: "cds-checkbox, ibm-checkbox", inputs: ["disabled", "skeleton", "hideLabel", "name", "id", "required", "value", "ariaLabel", "ariaLabelledby", "indeterminate", "checked"], outputs: ["click", "checkedChange", "indeterminateChange"] }, { kind: "ngmodule", type: IconModule }, { kind: "ngmodule", type: CarbonMultiInputModule }, { kind: "component", type: i1.CarbonMultiInputComponent, selector: "valtimo-carbon-multi-input", inputs: ["addRowText", "addButtonType", "addRowTranslationKey", "arbitraryAmountTitles", "arbitraryValueAmount", "defaultValues", "deleteRowText", "deleteRowTranslationKey", "disabled", "dropdownColumnTitle", "dropdownItems", "dropdownWidth", "fullWidth", "hideAddButton", "hideDeleteButton", "initialAmountOfRows", "keyColumnTitle", "margin", "maxRows", "minimumAmountOfRows", "name", "required", "title", "titleTranslationKey", "tooltip", "type", "valueColumnTitle", "valuePathSelectorCaseDefinitionKey", "valuePathSelectorPrefixes", "valuePathSelectorShowCaseDefinitionSelector", "valuePathSelectorNotation", "keyColumnFlex", "dropdownColumnFlex", "valueColumnFlex"], outputs: ["valueChange", "allValuesValidEvent"] }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i3.TextInputLabelComponent, selector: "cds-text-label, ibm-text-label", inputs: ["labelInputID", "disabled", "skeleton", "labelTemplate", "textInputTemplate", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel", "fluid"] }, { kind: "directive", type: i3.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "ngmodule", type: LayerModule }, { kind: "directive", type: i3.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
4427
4906
|
}
|
|
4428
4907
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: WidgetManagementInteractiveTableComponent, decorators: [{
|
|
4429
4908
|
type: Component,
|
|
@@ -4438,7 +4917,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
|
|
|
4438
4917
|
CarbonMultiInputModule,
|
|
4439
4918
|
InputModule,
|
|
4440
4919
|
LayerModule,
|
|
4441
|
-
], 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<valtimo-widget-management-table [showFirstColumnOption]=\"false\">\n <ng-content></ng-content>\n\n <form [formGroup]=\"formGroup\" class=\"valtimo-widget-management-interactive-table__form\">\n <cds-checkbox formControlName=\"canStartCase\">\n {{ 'ikoManagement.canStartCase' | translate }}\n </cds-checkbox>\n\n <cds-text-label class=\"valtimo-widget-management-interactive-table__row-action\">\n {{ 'ikoManagement.rowAction' | translate }}\n\n <input\n formControlName=\"rowClickAction\"\n cdsText\n cdsLayer=\"1\"\n [placeholder]=\"'ikoManagement.rowAction' | translate\"\n type=\"text\"\n />\n </cds-text-label>\n\n <valtimo-carbon-multi-input\n type=\"keyValue\"\n formControlName=\"actions\"\n [addRowText]=\"'Add external link' | translate\"\n [keyColumnTitle]=\"'interface.name' | translate\"\n [minimumAmountOfRows]=\"0\"\n [valueColumnTitle]=\"'interface.url' | translate\"\n ></valtimo-carbon-multi-input>\n </form>\n</valtimo-widget-management-table>\n", styles: [".valtimo-widget-management-interactive-table__form,.valtimo-widget-management-interactive-table__form>div{display:flex;flex-direction:column;gap:16px}.valtimo-widget-management-interactive-table__external-links-row{display:grid;grid-template-columns:1fr 1fr 56px;gap:16px;align-items:self-end;padding:12px 16px 16px}.valtimo-widget-management-interactive-table valtimo-key-value{width:100%!important}.valtimo-widget-management-interactive-table .v-multi-input__row{padding:12px 16px 16px}.valtimo-widget-management-interactive-table__row-action{padding:16px;background-color:var(--cds-layer-01)}.valtimo-widget-management-interactive-table .v-multi-input__row{padding:12px 16px 16px;background-color:var(--cds-layer-01)}.valtimo-widget-management-interactive-table .cds--text-input,.valtimo-widget-management-interactive-table .cds--list-box{background:var(--cds-layer-02)}\n/*!\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"] }]
|
|
4920
|
+
], 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<valtimo-widget-management-table [showFirstColumnOption]=\"false\" [sortableColumns]=\"true\">\n <ng-content></ng-content>\n\n <form [formGroup]=\"formGroup\" class=\"valtimo-widget-management-interactive-table__form\">\n <cds-checkbox formControlName=\"canStartCase\">\n {{ 'ikoManagement.canStartCase' | translate }}\n </cds-checkbox>\n\n <cds-text-label class=\"valtimo-widget-management-interactive-table__row-action\">\n {{ 'ikoManagement.rowAction' | translate }}\n\n <input\n formControlName=\"rowClickAction\"\n cdsText\n cdsLayer=\"1\"\n [placeholder]=\"'ikoManagement.rowAction' | translate\"\n type=\"text\"\n />\n </cds-text-label>\n\n <valtimo-carbon-multi-input\n type=\"keyValue\"\n formControlName=\"actions\"\n [addRowText]=\"'Add external link' | translate\"\n [keyColumnTitle]=\"'interface.name' | translate\"\n [minimumAmountOfRows]=\"0\"\n [valueColumnTitle]=\"'interface.url' | translate\"\n ></valtimo-carbon-multi-input>\n </form>\n</valtimo-widget-management-table>\n", styles: [".valtimo-widget-management-interactive-table__form,.valtimo-widget-management-interactive-table__form>div{display:flex;flex-direction:column;gap:16px}.valtimo-widget-management-interactive-table__external-links-row{display:grid;grid-template-columns:1fr 1fr 56px;gap:16px;align-items:self-end;padding:12px 16px 16px}.valtimo-widget-management-interactive-table valtimo-key-value{width:100%!important}.valtimo-widget-management-interactive-table .v-multi-input__row{padding:12px 16px 16px}.valtimo-widget-management-interactive-table__row-action{padding:16px;background-color:var(--cds-layer-01)}.valtimo-widget-management-interactive-table .v-multi-input__row{padding:12px 16px 16px;background-color:var(--cds-layer-01)}.valtimo-widget-management-interactive-table .cds--text-input,.valtimo-widget-management-interactive-table .cds--list-box{background:var(--cds-layer-02)}\n/*!\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"] }]
|
|
4442
4921
|
}], ctorParameters: () => [{ type: i1$3.FormBuilder }, { type: WidgetWizardService }], propDecorators: { class: [{
|
|
4443
4922
|
type: HostBinding,
|
|
4444
4923
|
args: ['class']
|
|
@@ -4537,7 +5016,7 @@ class WidgetManagementWidgetFormioComponent {
|
|
|
4537
5016
|
this.widgetWizardService.$widgetContentValid.set(true);
|
|
4538
5017
|
}
|
|
4539
5018
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: WidgetManagementWidgetFormioComponent, deps: [{ token: i1.CdsThemeService }, { token: i1$3.FormBuilder }, { token: WidgetWizardService }, { token: i1$2.FormService }, { token: WIDGET_MANAGEMENT_SERVICE }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4540
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: WidgetManagementWidgetFormioComponent, isStandalone: true, selector: "ng-component", 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<form\n class=\"valtimo-case-management-widget-formio\"\n [formGroup]=\"form\"\n [attr.data-carbon-theme]=\"theme$ | async\"\n>\n <div class=\"valtimo-case-management-widget-formio__title-container\">\n <cds-text-label\n class=\"valtimo-case-management-widget-field__input valtimo-case-management-widget-formio__title-input\"\n >\n <v-input-label\n [title]=\"'widgetTabManagement.content.widgetTitle' | translate\"\n [tooltip]=\"'widgetTabManagement.content.widgetTitleTooltip' | translate\"\n >\n </v-input-label>\n\n <input\n formControlName=\"widgetTitle\"\n cdsText\n [placeholder]=\"'widgetTabManagement.content.widgetTitlePlaceholder' | translate\"\n type=\"text\"\n />\n </cds-text-label>\n\n <valtimo-mdi-icon-selector\n [cdsLayer]=\"0\"\n formControlName=\"widgetIcon\"\n ></valtimo-mdi-icon-selector>\n </div>\n\n <ng-content></ng-content>\n\n <cds-label class=\"dropdown-label\">\n {{ 'widgetTabManagement.content.formio.selectForm' | translate }}\n\n <cds-dropdown\n *ngIf=\"formListItems$ | async as formListItems\"\n [appendInline]=\"false\"\n [placeholder]=\"'widgetTabManagement.content.formio.placeholder' | translate\"\n [disabled]=\"formListItems.length === 0\"\n [dropUp]=\"false\"\n (selected)=\"componentDropDownChange($event)\"\n >\n <cds-dropdown-list [items]=\"formListItems\"> </cds-dropdown-list>\n </cds-dropdown>\n </cds-label>\n</form>\n", styles: [".valtimo-case-management-widget-formio{display:flex;flex-direction:column;gap:16px;padding:16px}.valtimo-case-management-widget-formio__title-container{display:flex;gap:16px}.valtimo-case-management-widget-formio__title-input{max-width:300px}.valtimo-case-management-widget-formio ::ng-deep>*{padding:16px;background:var(--cds-layer-02)}.valtimo-case-management-widget-formio ::ng-deep .cds--list-box,.valtimo-case-management-widget-formio ::ng-deep .cds--text-input{background:var(--cds-layer)}.valtimo-case-management-widget-formio ::ng-deep .dropdown-label label{display:flex;flex-direction:column;width:100%}.valtimo-case-management-widget-formio ::ng-deep .dropdown-label cds-dropdown{margin-top:8px}\n/*!\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"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { 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: "component", type: i3.TextInputLabelComponent, selector: "cds-text-label, ibm-text-label", inputs: ["labelInputID", "disabled", "skeleton", "labelTemplate", "textInputTemplate", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel", "fluid"] }, { kind: "directive", type: i3.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SelectModule }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i7.Dropdown, selector: "cds-dropdown, ibm-dropdown", inputs: ["id", "label", "hideLabel", "helperText", "placeholder", "displayValue", "clearText", "size", "type", "theme", "disabled", "readonly", "skeleton", "inline", "disableArrowKeys", "invalid", "invalidText", "warn", "warnText", "appendInline", "scrollableContainer", "itemValueKey", "selectionFeedback", "menuButtonLabel", "selectedLabel", "dropUp", "fluid"], outputs: ["selected", "onClose", "close"] }, { kind: "component", type: i7.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "ngmodule", type: InputLabelModule }, { kind: "component", type: i1.InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "tooltipTranslationKey", "largeMargin", "small", "noMargin", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }, { kind: "component", type: MdiIconSelectorComponent, selector: "valtimo-mdi-icon-selector", inputs: ["labelTranslationKey", "tooltipTranslationKey", "placeholderTranslationKey", "appendInline", "dropUp"] }, { kind: "ngmodule", type: LayerModule }, { kind: "directive", type: i3.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5019
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: WidgetManagementWidgetFormioComponent, isStandalone: true, selector: "ng-component", 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<form\n class=\"valtimo-case-management-widget-formio\"\n [formGroup]=\"form\"\n [attr.data-carbon-theme]=\"theme$ | async\"\n>\n <div class=\"valtimo-case-management-widget-formio__title-container\">\n <cds-text-label\n class=\"valtimo-case-management-widget-field__input valtimo-case-management-widget-formio__title-input\"\n >\n <v-input-label\n [title]=\"'widgetTabManagement.content.widgetTitle' | translate\"\n [tooltip]=\"'widgetTabManagement.content.widgetTitleTooltip' | translate\"\n >\n </v-input-label>\n\n <input\n formControlName=\"widgetTitle\"\n cdsText\n [placeholder]=\"'widgetTabManagement.content.widgetTitlePlaceholder' | translate\"\n type=\"text\"\n />\n </cds-text-label>\n\n <valtimo-mdi-icon-selector\n [cdsLayer]=\"0\"\n formControlName=\"widgetIcon\"\n ></valtimo-mdi-icon-selector>\n </div>\n\n <ng-content></ng-content>\n\n <cds-label class=\"dropdown-label\">\n {{ 'widgetTabManagement.content.formio.selectForm' | translate }}\n\n <cds-dropdown\n *ngIf=\"formListItems$ | async as formListItems\"\n [appendInline]=\"false\"\n [placeholder]=\"'widgetTabManagement.content.formio.placeholder' | translate\"\n [disabled]=\"formListItems.length === 0\"\n [dropUp]=\"false\"\n (selected)=\"componentDropDownChange($event)\"\n >\n <cds-dropdown-list [items]=\"formListItems\"> </cds-dropdown-list>\n </cds-dropdown>\n </cds-label>\n</form>\n", styles: [".valtimo-case-management-widget-formio{display:flex;flex-direction:column;gap:16px;padding:16px}.valtimo-case-management-widget-formio__title-container{display:flex;gap:16px}.valtimo-case-management-widget-formio__title-input{max-width:300px}.valtimo-case-management-widget-formio ::ng-deep>*{padding:16px;background:var(--cds-layer-02)}.valtimo-case-management-widget-formio ::ng-deep .cds--list-box,.valtimo-case-management-widget-formio ::ng-deep .cds--text-input{background:var(--cds-layer)}.valtimo-case-management-widget-formio ::ng-deep .dropdown-label label{display:flex;flex-direction:column;width:100%}.valtimo-case-management-widget-formio ::ng-deep .dropdown-label cds-dropdown{margin-top:8px}\n/*!\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"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { 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: "component", type: i3.TextInputLabelComponent, selector: "cds-text-label, ibm-text-label", inputs: ["labelInputID", "disabled", "skeleton", "labelTemplate", "textInputTemplate", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel", "fluid"] }, { kind: "directive", type: i3.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SelectModule$1 }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i7.Dropdown, selector: "cds-dropdown, ibm-dropdown", inputs: ["id", "label", "hideLabel", "helperText", "placeholder", "displayValue", "clearText", "size", "type", "theme", "disabled", "readonly", "skeleton", "inline", "disableArrowKeys", "invalid", "invalidText", "warn", "warnText", "appendInline", "scrollableContainer", "itemValueKey", "selectionFeedback", "menuButtonLabel", "selectedLabel", "dropUp", "fluid"], outputs: ["selected", "onClose", "close"] }, { kind: "component", type: i7.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "ngmodule", type: InputLabelModule }, { kind: "component", type: i1.InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "tooltipTranslationKey", "largeMargin", "small", "noMargin", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }, { kind: "component", type: MdiIconSelectorComponent, selector: "valtimo-mdi-icon-selector", inputs: ["labelTranslationKey", "tooltipTranslationKey", "placeholderTranslationKey", "appendInline", "dropUp"] }, { kind: "ngmodule", type: LayerModule }, { kind: "directive", type: i3.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4541
5020
|
}
|
|
4542
5021
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: WidgetManagementWidgetFormioComponent, decorators: [{
|
|
4543
5022
|
type: Component,
|
|
@@ -4546,7 +5025,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
|
|
|
4546
5025
|
TranslateModule,
|
|
4547
5026
|
InputModule,
|
|
4548
5027
|
ReactiveFormsModule,
|
|
4549
|
-
SelectModule,
|
|
5028
|
+
SelectModule$1,
|
|
4550
5029
|
DropdownModule,
|
|
4551
5030
|
InputLabelModule,
|
|
4552
5031
|
MdiIconSelectorComponent,
|
|
@@ -4564,6 +5043,7 @@ var WidgetWizardStep;
|
|
|
4564
5043
|
WidgetWizardStep["DENSITY"] = "density";
|
|
4565
5044
|
WidgetWizardStep["STYLE"] = "style";
|
|
4566
5045
|
WidgetWizardStep["CONTENT"] = "content";
|
|
5046
|
+
WidgetWizardStep["FILTERS"] = "filters";
|
|
4567
5047
|
WidgetWizardStep["DISPLAY_CONDITIONS"] = "displayConditions";
|
|
4568
5048
|
})(WidgetWizardStep || (WidgetWizardStep = {}));
|
|
4569
5049
|
var WidgetWizardCloseEventType;
|
|
@@ -4588,6 +5068,7 @@ const WIZARD_STEP_COMPONENTS = {
|
|
|
4588
5068
|
[WidgetWizardStep.DENSITY]: WidgetWizardDensityStepComponent,
|
|
4589
5069
|
[WidgetWizardStep.STYLE]: WidgetWizardStyleStepComponent,
|
|
4590
5070
|
[WidgetWizardStep.CONTENT]: WidgetWizardContentStepComponent,
|
|
5071
|
+
[WidgetWizardStep.FILTERS]: WidgetWizardFiltersStepComponent,
|
|
4591
5072
|
[WidgetWizardStep.DISPLAY_CONDITIONS]: WidgetWizardDisplayConditionsStepComponent,
|
|
4592
5073
|
};
|
|
4593
5074
|
const AVAILABLE_WIDGETS = [
|
|
@@ -5015,5 +5496,5 @@ class ManagementWidgetDetailsComponent {
|
|
|
5015
5496
|
* Generated bundle index. Do not edit.
|
|
5016
5497
|
*/
|
|
5017
5498
|
|
|
5018
|
-
export { AVAILABLE_WIDGETS, CUSTOM_WIDGET_TOKEN, DEFAULT_WIDGET_COMPONENT_MAP, LayoutComponent, LayoutInternalComponent, LayoutModule, LayoutPublicComponent, LayoutService, ManagementWidgetDetailsComponent, TranslationManagementComponent, TranslationManagementModule, WIDGET_DENSITY_LABELS, WIDGET_HEIGHT_1X, WIDGET_MANAGEMENT_SERVICE, WIDGET_STYLE_LABELS, WIDGET_WIDTH_1X, WIDGET_WIDTH_LABELS, WIZARD_STEP_COMPONENTS, WidgetActionButtonComponent, WidgetBlockComponent, WidgetCollectionComponent, WidgetContainerComponent, WidgetCustomComponent, WidgetDensity, WidgetDisplayTypeKey, WidgetFieldComponent, WidgetFieldsService, WidgetFormioComponent, WidgetInteractiveTableComponent, WidgetLayoutService, WidgetManagementCollectionComponent, WidgetManagementComponent, WidgetManagementCustomComponent, WidgetManagementEditorComponent, WidgetManagementFieldsComponent, WidgetManagementMapComponent, WidgetManagementTab, WidgetManagementTableComponent, WidgetManagementWizardComponent, WidgetMapComponent, WidgetStyle, WidgetTableComponent, WidgetType, WidgetTypeTags, WidgetWizardCloseEventType, WidgetWizardService, WidgetWizardStep };
|
|
5499
|
+
export { AVAILABLE_WIDGETS, CUSTOM_WIDGET_TOKEN, DEFAULT_WIDGET_COMPONENT_MAP, LayoutComponent, LayoutInternalComponent, LayoutModule, LayoutPublicComponent, LayoutService, ManagementWidgetDetailsComponent, TranslationManagementComponent, TranslationManagementModule, WIDGET_DENSITY_LABELS, WIDGET_HEIGHT_1X, WIDGET_MANAGEMENT_SERVICE, WIDGET_STYLE_LABELS, WIDGET_WIDTH_1X, WIDGET_WIDTH_LABELS, WIZARD_STEP_COMPONENTS, WidgetActionButtonComponent, WidgetBlockComponent, WidgetCollectionComponent, WidgetContainerComponent, WidgetCustomComponent, WidgetDensity, WidgetDisplayTypeKey, WidgetFieldComponent, WidgetFieldsService, WidgetFormioComponent, WidgetInteractiveTableComponent, WidgetInteractiveTableSearchComponent, WidgetLayoutService, WidgetManagementCollectionComponent, WidgetManagementComponent, WidgetManagementCustomComponent, WidgetManagementEditorComponent, WidgetManagementFieldsComponent, WidgetManagementMapComponent, WidgetManagementTab, WidgetManagementTableComponent, WidgetManagementWizardComponent, WidgetMapComponent, WidgetStyle, WidgetTableComponent, WidgetType, WidgetTypeTags, WidgetWizardCloseEventType, WidgetWizardService, WidgetWizardStep };
|
|
5019
5500
|
//# sourceMappingURL=valtimo-layout.mjs.map
|