@valtimo/layout 13.32.0 → 13.33.0

package/fesm2022/valtimo-layout.mjs

@@ -11,7 +11,7 @@ import { CommonModule, DOCUMENT, DatePipe } from '@angular/common';
 import * as i2$2 from '@ngx-translate/core';
 import { TranslateModule, TranslatePipe } from '@ngx-translate/core';
 import * as i1$1 from '@valtimo/components';
-import { ViewType, CarbonListModule, EllipsisPipe, MdiIconViewerComponent, FormIoModule, CARBON_THEME, CurrentCarbonTheme, InputLabelModule, InputModule as InputModule$1, FormModule, SelectModule, ParagraphModule, DateTimePickerComponent, OverflowMenuComponent, OverflowMenuOptionComponent, runAfterCarbonModalClosed, AutoKeyInputComponent, CARBON_CONSTANTS, ValuePathSelectorPrefix, CarbonMultiInputModule, ConfirmationModalModule, JsonEditorComponent, RemoveClassnamesDirective, ValuePathSelectorComponent, MdiIconSelectorComponent, ValuePathType, MenuRoutingModule, TopbarModule, LeftSidebarModule, RightSidebarModule, PageHeaderModule, AlertModule, PromptModule, MultiInputFormModule, RenderInPageHeaderDirective } from '@valtimo/components';
+import { ViewType, CarbonListModule, EllipsisPipe, MdiIconViewerComponent, WIDGET_ROW_HEIGHT_DEFAULT, FormIoModule, CARBON_THEME, CurrentCarbonTheme, InputLabelModule, InputModule as InputModule$1, FormModule, SelectModule, ParagraphModule, DateTimePickerComponent, OverflowMenuComponent, OverflowMenuOptionComponent, resolveWidgetLayout, runAfterCarbonModalClosed, AutoKeyInputComponent, CARBON_CONSTANTS, ValuePathSelectorPrefix, CarbonMultiInputModule, ConfirmationModalModule, JsonEditorComponent, RemoveClassnamesDirective, ValuePathSelectorComponent, MdiIconSelectorComponent, ValuePathType, MenuRoutingModule, TopbarModule, LeftSidebarModule, RightSidebarModule, PageHeaderModule, AlertModule, PromptModule, MultiInputFormModule, RenderInPageHeaderDirective } from '@valtimo/components';
 import * as i3 from 'carbon-components-angular';
 import { ButtonModule, InputModule, LayerModule, SkeletonModule, PaginationModel, PaginationModule, TilesModule, IconModule, TimePickerModule, MenuButtonModule, ContextMenuModule, LoadingModule, ModalModule, TooltipModule, ComboBoxModule, CheckboxModule, DropdownModule, StructuredListModule, ToggleModule, AccordionModule, ProgressIndicatorModule, TabsModule, ToggletipModule, TagModule, Tab, SelectModule as SelectModule$1, RadioModule, PlaceholderModule } from 'carbon-components-angular';
 import { Subscription, BehaviorSubject, combineLatest, map, tap, switchMap, take, filter as filter$1, Subject, debounceTime, of, startWith, merge, delay } from 'rxjs';
@@ -922,7 +922,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
  */
 
 /*
- * Copyright 2015-2025 Ritense BV, the Netherlands.
+ * Copyright 2015-2026 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -946,6 +946,9 @@ class WidgetLayoutService {
     get amountOfColumns$() {
         return this._containerWidth$.pipe(map(containerWidth => Math.floor(containerWidth / WIDGET_WIDTH_1X)));
     }
+    get rowHeightUnit$() {
+        return this._rowHeightUnit$.asObservable();
+    }
     get _widgets$() {
         return this._widgetsSubject$.pipe(filter$1(widgets => widgets !== null));
     }
@@ -968,6 +971,8 @@ class WidgetLayoutService {
         this._widgetDataLoadedSubject$ = new BehaviorSubject(null);
         this._muuriSubject$ = new BehaviorSubject(null);
         this._triggerMuuriLayout$ = new Subject();
+        /** Row-unit height (px) each widget snaps to; depends on the layout algorithm. */
+        this._rowHeightUnit$ = new BehaviorSubject(WIDGET_ROW_HEIGHT_DEFAULT);
         this._widgetsWithExternalData$ = new BehaviorSubject([]);
         this._widgetsWithExternalDataReady$ = new BehaviorSubject([]);
         this._subscriptions = new Subscription();
@@ -998,6 +1003,9 @@ class WidgetLayoutService {
     setContainerWidth(width) {
         this._containerWidthSubject$.next(width);
     }
+    setRowHeightUnit(rowHeightUnit) {
+        this._rowHeightUnit$.next(rowHeightUnit);
+    }
     setWidgetDataLoaded(uuid) {
         this._widgetDataLoadedSubject$.pipe(take(1)).subscribe(widgetDataLoaded => {
             if (!(widgetDataLoaded || []).includes(uuid)) {
@@ -1015,7 +1023,7 @@ class WidgetLayoutService {
     }
     openMuuriSubscription() {
         this._subscriptions.add(combineLatest([this._muuri$, this._triggerMuuriLayout$])
-            .pipe(debounceTime(150))
+            .pipe(debounceTime(400))
             .subscribe(([muuri]) => {
             muuri.refreshItems();
             muuri.layout();
@@ -2223,8 +2231,9 @@ class WidgetBlockComponent {
             this._contentHeight$,
             this._viewContainerRef$,
             this.widget$,
-        ]).pipe(filter$1(([contentHeight]) => contentHeight !== 0), tap(([contentHeight, viewRef, widget]) => {
-            const blockHeight = Math.ceil((contentHeight + 16) / WIDGET_HEIGHT_1X) * WIDGET_HEIGHT_1X;
+            this.widgetLayoutService.rowHeightUnit$,
+        ]).pipe(filter$1(([contentHeight]) => contentHeight !== 0), tap(([contentHeight, viewRef, , rowHeightUnit]) => {
+            const blockHeight = Math.ceil((contentHeight + 16) / rowHeightUnit) * rowHeightUnit;
             this.renderer.setStyle(viewRef.element.nativeElement, 'height', `${blockHeight}px`);
             this.widgetLayoutService.triggerMuuriLayout();
         }));
@@ -2358,6 +2367,10 @@ class WidgetContainerComponent {
         this.loadingWidgetConfiguration$.next(false);
         this.initLayout();
     }
+    set widgetLayout(value) {
+        this._resolvedLayout = resolveWidgetLayout(value);
+        this.widgetLayoutService.setRowHeightUnit(this._resolvedLayout.rowHeightUnit);
+    }
     get widgetComponentMap$() {
         return this._widgetComponentMap$.pipe(filter(componentMap => componentMap !== null));
     }
@@ -2367,6 +2380,7 @@ class WidgetContainerComponent {
     constructor(widgetLayoutService) {
         this.widgetLayoutService = widgetLayoutService;
         this.widgetsWithUuids$ = new BehaviorSubject(null);
+        this._resolvedLayout = resolveWidgetLayout(null);
         this._widgetComponentMap$ = new BehaviorSubject(DEFAULT_WIDGET_COMPONENT_MAP);
         this.widgetParams = {};
         this.loadingWidgetConfiguration$ = new BehaviorSubject(true);
@@ -2408,15 +2422,13 @@ class WidgetContainerComponent {
     initMuuri() {
         this.widgetLayoutService.loaded$.pipe(take(1), delay(300)).subscribe(() => {
             this.widgetLayoutService.setMuuri(new Muuri(this._widgetsContainerRef.nativeElement, {
-                layout: {
-                    fillGaps: true,
-                },
+                layout: this._resolvedLayout.muuriLayout,
                 layoutOnResize: false,
             }));
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: WidgetContainerComponent, deps: [{ token: WidgetLayoutService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: WidgetContainerComponent, isStandalone: true, selector: "valtimo-widget-container", inputs: { widgets: "widgets", widgetComponentMap: "widgetComponentMap", widgetParams: "widgetParams" }, providers: [WidgetLayoutService], viewQueries: [{ propertyName: "_widgetsContainerRef", first: true, predicate: ["widgetsContainer"], 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    loadingWidgetConfiguration: loadingWidgetConfiguration$ | async,\n    widgets: widgetsWithUuids$ | async,\n    loaded: loaded$ | async,\n  } as obs\"\n>\n  <ng-container\n    *ngIf=\"{\n      noWidgetsConfigured: obs.widgets && obs.widgets.length === 0,\n    } as vars\"\n  >\n    @if (!obs.loaded && !vars.noWidgetsConfigured) {\n      <div class=\"loading-container\">\n        <cds-loading></cds-loading>\n      </div>\n    }\n\n    @if (vars.noWidgetsConfigured) {\n      <valtimo-no-results\n        [title]=\"'widgets.noWidgets' | translate\"\n        [description]=\"'widgets.noWidgetsDescription' | translate\"\n        illustration=\"valtimo-layout/img/no-widgets.svg\"\n      ></valtimo-no-results>\n    }\n\n    <div [style.visibility]=\"!obs.loaded ? 'hidden' : 'visible'\">\n      <div #widgetsContainer class=\"widgets-container\">\n        @for (widget of (widgetsWithUuids$ | async) || []; track widget.uuid) {\n          <valtimo-widget-block\n            [widget]=\"widget\"\n            [widgetComponentMap]=\"widgetComponentMap$ | async\"\n            [widgetParams]=\"widgetParams\"\n          ></valtimo-widget-block>\n        }\n      </div>\n    </div>\n  </ng-container>\n</ng-container>\n", styles: [".widgets-container{position:relative;width:calc(100% + 16px);margin-left:-8px;margin-top:-8px;padding-bottom:32px;box-sizing:content-box}.loading-container{display:flex;justify-content:center;padding:16px 0}\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: "component", type: WidgetBlockComponent, selector: "valtimo-widget-block", inputs: ["widget", "widgetComponentMap", "widgetParams"] }, { kind: "ngmodule", type: LoadingModule }, { kind: "component", type: i3.Loading, selector: "cds-loading, ibm-loading", inputs: ["title", "isActive", "size", "overlay"] }, { kind: "ngmodule", type: CarbonListModule }, { kind: "component", type: i1$1.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title", "smallPadding", "collapseVertically", "alwaysRenderVertically"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: WidgetContainerComponent, isStandalone: true, selector: "valtimo-widget-container", inputs: { widgets: "widgets", widgetLayout: "widgetLayout", widgetComponentMap: "widgetComponentMap", widgetParams: "widgetParams" }, providers: [WidgetLayoutService], viewQueries: [{ propertyName: "_widgetsContainerRef", first: true, predicate: ["widgetsContainer"], 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    loadingWidgetConfiguration: loadingWidgetConfiguration$ | async,\n    widgets: widgetsWithUuids$ | async,\n    loaded: loaded$ | async,\n  } as obs\"\n>\n  <ng-container\n    *ngIf=\"{\n      noWidgetsConfigured: obs.widgets && obs.widgets.length === 0,\n    } as vars\"\n  >\n    @if (!obs.loaded && !vars.noWidgetsConfigured) {\n      <div class=\"loading-container\">\n        <cds-loading></cds-loading>\n      </div>\n    }\n\n    @if (vars.noWidgetsConfigured) {\n      <valtimo-no-results\n        [title]=\"'widgets.noWidgets' | translate\"\n        [description]=\"'widgets.noWidgetsDescription' | translate\"\n        illustration=\"valtimo-layout/img/no-widgets.svg\"\n      ></valtimo-no-results>\n    }\n\n    <div [style.visibility]=\"!obs.loaded ? 'hidden' : 'visible'\">\n      <div #widgetsContainer class=\"widgets-container\">\n        @for (widget of (widgetsWithUuids$ | async) || []; track widget.uuid) {\n          <valtimo-widget-block\n            [widget]=\"widget\"\n            [widgetComponentMap]=\"widgetComponentMap$ | async\"\n            [widgetParams]=\"widgetParams\"\n          ></valtimo-widget-block>\n        }\n      </div>\n    </div>\n  </ng-container>\n</ng-container>\n", styles: [".widgets-container{position:relative;width:calc(100% + 16px);margin-left:-8px;margin-top:-8px;padding-bottom:32px;box-sizing:content-box}.loading-container{display:flex;justify-content:center;padding:16px 0}\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: "component", type: WidgetBlockComponent, selector: "valtimo-widget-block", inputs: ["widget", "widgetComponentMap", "widgetParams"] }, { kind: "ngmodule", type: LoadingModule }, { kind: "component", type: i3.Loading, selector: "cds-loading, ibm-loading", inputs: ["title", "isActive", "size", "overlay"] }, { kind: "ngmodule", type: CarbonListModule }, { kind: "component", type: i1$1.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title", "smallPadding", "collapseVertically", "alwaysRenderVertically"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: WidgetContainerComponent, decorators: [{
             type: Component,
@@ -2426,6 +2438,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 args: ['widgetsContainer']
             }], widgets: [{
                 type: Input
+            }], widgetLayout: [{
+                type: Input
             }], widgetComponentMap: [{
                 type: Input
             }], widgetParams: [{
@@ -4739,7 +4753,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
  */
 
 /*
- * Copyright 2015-2025 Ritense BV, the Netherlands.
+ * Copyright 2015-2026 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -4754,7 +4768,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
  * limitations under the License.
  */
 const WIDGET_WIDTH_1X = 320;
-const WIDGET_HEIGHT_1X = 200;
+const WIDGET_HEIGHT_1X = 92;
 const DEFAULT_WIDGET_COMPONENT_MAP = {
     [WidgetType.FORMIO]: WidgetFormioComponent,
     [WidgetType.CUSTOM]: WidgetCustomComponent,