@provoly/dashboard 0.21.11 → 0.22.1

package/fesm2022/provoly-dashboard.mjs

@@ -3880,118 +3880,6 @@ class ManifestUtils {
     }
 }
 
-const SearchActions = {
-    search: createAction('[Search] search', props()),
-    getDatasourceItems: createAction('[Search] (bus) get datasource items', props()),
-    // result Search
-    searchSuccess: createAction('[Search Api] (bus) Search Success', props()),
-    searchFailure: createAction('[Search Api] (bus) Search Failure', props()),
-    setSearchLoading: createAction('[Search Api] (bus) set Search loading datasource status', props())
-};
-
-const searchFeatureKey = '@pry/search';
-const initialSearchState = {
-    searchLoading: [],
-    payload: undefined,
-    id: undefined
-};
-const searchReducer = createReducer(initialSearchState, on(SearchActions.search, (state, action) => ({
-    ...state,
-    searchLoading: [...new Set([...state.searchLoading, action.id ?? DEFAULT_NAMED_QUERY_ID])],
-    payload: action.payload,
-    id: action.id
-})), on(SearchActions.getDatasourceItems, (state, action) => ({
-    ...state,
-    searchLoading: [...new Set([...state.searchLoading, action.id])]
-})), on(SearchActions.searchSuccess, (state, action) => ({
-    ...state,
-    searchLoading: [...state.searchLoading.filter((id) => id !== (action.id ?? DEFAULT_NAMED_QUERY_ID))]
-})), on(SearchActions.searchFailure, (state, action) => ({
-    ...state,
-    searchLoading: [...state.searchLoading.filter((id) => id !== (action.id ?? DEFAULT_NAMED_QUERY_ID))]
-})), on(SearchActions.setSearchLoading, (state, action) => ({
-    ...state,
-    searchLoading: action.start
-        ? [...new Set([...state.searchLoading, ...action.datasources])]
-        : [...state.searchLoading.filter((id) => !action.datasources.includes(id))]
-})));
-
-const feature$4 = createFeatureSelector(searchFeatureKey);
-const searchLoading = createSelector(feature$4, (state) => state.searchLoading);
-const SearchSelectors = {
-    feature: feature$4,
-    searchLoading
-};
-
-class ProxyUtils {
-    static { this.requested = {}; }
-    static init(store) {
-        this.store = store;
-        store.select(SearchSelectors.searchLoading).subscribe((searchLoading) => {
-            this.currentlyLoading = searchLoading;
-        });
-        store.select(ClassSelectors.classes).subscribe((classes) => {
-            this.classes = classes;
-        });
-    }
-    static ResultSets(rss) {
-        return Object.entries(rss)
-            .map(([key, value]) => ({ key, proxy: ProxyUtils.ResultSet(value, key) }))
-            .reduce((p, c) => ({ ...p, [c.key]: c.proxy }), {});
-    }
-    static ResultSet(rs, rsId) {
-        return {
-            relations: rs.relations ?? [],
-            autoRefreshInterval: rs.autoRefreshInterval,
-            merged: rs.merged,
-            count: rs.count,
-            items: Object.keys(rs.items ?? {})
-                .map((classId) => ({
-                classId: classId,
-                items: rs.items[classId].map((item) => ProxyUtils.Item(item, rsId))
-            }))
-                .reduce((p, c) => ({ ...p, [c.classId]: c.items }), {})
-        };
-    }
-    static Item(item, rsId) {
-        return {
-            id: item.id,
-            oClass: item.oClass,
-            metadata: item.metadata,
-            attributes: new Proxy(JSON.parse(JSON.stringify(item.attributes)), {
-                get: (original, prop, proxy) => {
-                    if (prop === 'toJSON') {
-                        return () => original;
-                    }
-                    else {
-                        if (original[prop]) {
-                            return original[prop];
-                        }
-                        else {
-                            const clazz = this.classes.find((cl) => cl.id === item.oClass);
-                            const attr = clazz?.attributes.find((attr) => attr.technicalName === prop);
-                            if (!!attr) {
-                                if (!this.currentlyLoading.includes(rsId) && this.requested[prop] !== false) {
-                                    this.requested[prop] = false;
-                                    this.store.dispatch(SearchActions.getDatasourceItems({ id: rsId, excludeGeo: false, from: 'ProxyUtils.Item()' }));
-                                }
-                            }
-                            else {
-                                console.warn(`Trying to access property ${prop} from class ${clazz?.name} but does not exist in model`);
-                            }
-                        }
-                    }
-                    return {
-                        type: 'VALUE',
-                        value: '',
-                        visible: false
-                    };
-                }
-            })
-        };
-    }
-}
-
 const BASE_DISPLAY_OPTIONS = {
     presentationTitle: true,
     search: false,
@@ -4073,8 +3961,8 @@ function getDisplayOptions(mode) {
 }
 
 const NEW_WINDOW_TARGET = -1;
-const feature$3 = createFeatureSelector('@pry/dashboard');
-const manifests = createSelector(feature$3, (state) => state?.manifests);
+const feature$4 = createFeatureSelector('@pry/dashboard');
+const manifests = createSelector(feature$4, (state) => state?.manifests);
 const rank = createSelector(manifests, (manifests) => manifests?.tenants.indexOf(manifests.sender));
 const currentManifestId = createSelector(manifests, (manifests) => manifests.currentId);
 const globalManifest = createSelector(manifests, 
@@ -4087,7 +3975,7 @@ const staticManifest = createSelector(manifests,
 const loading = createSelector(manifests, (manifests) => !!manifests?.loading);
 const refreshRates = createSelector(globalManifest, (manifests) => manifests.refreshRates ?? {});
 const windowManifest = createSelector(globalManifest, rank, (manifest, rank) => manifest.windows[rank] ?? { widgets: [] });
-const gridLayout = createSelector(windowManifest, (manifest) => (manifest.grid ?? {}).layout ?? DashboardGridLayout.MANUAL);
+const gridLayout = createSelector(windowManifest, (manifest) => ((manifest.grid ?? {}).layout ?? DashboardGridLayout.MANUAL));
 const memoizeWidgetManifest = {};
 const widgetManifest = (index) => {
     if (!memoizeWidgetManifest[index]) {
@@ -4105,8 +3993,8 @@ const targetTenantsIndexes = createSelector(manifests, rank, (manifests, rank) =
     NEW_WINDOW_TARGET,
     ...(manifests.tenants ?? []).map((ten, idx) => idx).filter((idx) => idx !== rank)
 ]);
-const results = createSelector(feature$3, (state) => state?.results);
-const resultSets = createSelector(results, (results) => ProxyUtils.ResultSets(results.resultSets) ?? {});
+const results = createSelector(feature$4, (state) => state?.results);
+const resultSets = createSelector(results, (results) => results.resultSets ?? {});
 const resultSetsParams = createSelector(results, (results) => results.resultSetsParams ?? {});
 const namedQueriesNames = createSelector(resultSets, (state) => Object.keys(state) ?? []);
 const availableNamedQueries = createSelector(results, (results) => {
@@ -4123,7 +4011,7 @@ const allItems = createSelector(results, (results) => Object.keys(results.result
     .reduce((p, c) => [...p, ...c], []));
 const getItemsByIds = (ids) => createSelector(allItems, (items) => items.filter((item) => ids.includes(item.id)));
 const selectedItems = createSelector(selectedItemIds, allItems, (itemNames, allItems) => itemNames.map((name) => allItems.find((it) => it.id === name)) ?? []);
-const dashboard = createSelector(feature$3, (state) => state?.dashboard ?? {});
+const dashboard = createSelector(feature$4, (state) => state?.dashboard ?? {});
 const dashboardCellParams = createSelector(dashboard, (dashboard) => dashboard.params ?? {});
 const dashboardEditionMode = createSelector(dashboard, (dashboard) => dashboard.editionMode ?? false);
 const namedQueriesUses = createSelector(globalManifest, (manifest) => manifest.windows
@@ -4139,11 +4027,11 @@ const namedQueriesUses = createSelector(globalManifest, (manifest) => manifest.w
     .reduce((p, c) => [...p, ...c], [])
     .reduce((p, c) => [...p, ...c], [])
     .reduce((p, c) => ({ ...p, [c.rsName ?? '']: [...(p[c.rsName ?? ''] || []), { ...c }] }), {}));
-const presentation = createSelector(feature$3, (state) => state?.presentation);
+const presentation = createSelector(feature$4, (state) => state?.presentation);
 const isCurrentPresentationModified = createSelector(presentation, globalManifest, (state, global) => !equal(global, state.initial));
 const isCurrentPresentationOwner = createSelector(presentation, (state) => !!state.current && state.current.owner);
-const filters = createSelector(feature$3, (state) => state?.manifests.manifest.filters ?? []);
-const datasourceFilters = createSelector(feature$3, (state) => state?.manifests.manifest.filters
+const filters = createSelector(feature$4, (state) => state?.manifests.manifest.filters ?? []);
+const datasourceFilters = createSelector(feature$4, (state) => state?.manifests.manifest.filters
     ? state?.manifests.manifest.filters.reduce((obj, filter) => (filter.attributes.forEach((attribute) => (obj[attribute.datasource] || (obj[attribute.datasource] = [])).push({
         attribute: attribute.id,
         operator: filter.operator ?? '',
@@ -4151,11 +4039,11 @@ const datasourceFilters = createSelector(feature$3, (state) => state?.manifests.
     })),
         obj), {})
     : {});
-const wmsFeatures = createSelector(feature$3, (state) => state?.wmsFeatures);
-const displayOptions = createSelector(feature$3, (state) => state?.display ?? BASE_DISPLAY_OPTIONS);
-const capabilities = createSelector(feature$3, (state) => state?.capabilities);
+const wmsFeatures = createSelector(feature$4, (state) => state?.wmsFeatures);
+const displayOptions = createSelector(feature$4, (state) => state?.display ?? BASE_DISPLAY_OPTIONS);
+const capabilities = createSelector(feature$4, (state) => state?.capabilities);
 const DashboardSelectors = {
-    feature: feature$3,
+    feature: feature$4,
     rank,
     currentManifestId,
     globalManifest,
@@ -4194,6 +4082,15 @@ const DashboardSelectors = {
     capabilities
 };
 
+const SearchActions = {
+    search: createAction('[Search] search', props()),
+    getDatasourceItems: createAction('[Search] (bus) get datasource items', props()),
+    // result Search
+    searchSuccess: createAction('[Search Api] (bus) Search Success', props()),
+    searchFailure: createAction('[Search Api] (bus) Search Failure', props()),
+    setSearchLoading: createAction('[Search Api] (bus) set Search loading datasource status', props())
+};
+
 class SearchService {
     constructor(httpClient, store) {
         this.httpClient = httpClient;
@@ -4604,16 +4501,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             type: Injectable
         }], ctorParameters: function () { return [{ type: i1$3.Actions }, { type: ImageService }]; } });
 
-const feature$2 = createFeatureSelector(contextMenuFeatureKey);
-const opened = createSelector(feature$2, (state) => state?.opened);
-const position = createSelector(feature$2, (state) => ({ clientX: state?.clientX ?? 0, clientY: state?.clientY ?? 0 }));
-const itemId = createSelector(feature$2, (state) => state.itemId);
-const from = createSelector(feature$2, (state) => state.from);
-const coordinates = createSelector(feature$2, (state) => state.coordinates);
-const resultSet = createSelector(feature$2, (state) => state.resultSet);
-const allowObjectCreation = createSelector(feature$2, (state) => state.allowObjectCreation);
+const feature$3 = createFeatureSelector(contextMenuFeatureKey);
+const opened = createSelector(feature$3, (state) => state?.opened);
+const position = createSelector(feature$3, (state) => ({ clientX: state?.clientX ?? 0, clientY: state?.clientY ?? 0 }));
+const itemId = createSelector(feature$3, (state) => state.itemId);
+const from = createSelector(feature$3, (state) => state.from);
+const coordinates = createSelector(feature$3, (state) => state.coordinates);
+const resultSet = createSelector(feature$3, (state) => state.resultSet);
+const allowObjectCreation = createSelector(feature$3, (state) => state.allowObjectCreation);
 const ContextMenuSelectors = {
-    feature: feature$2,
+    feature: feature$3,
     opened,
     position,
     itemId,
@@ -4996,6 +4893,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             type: Injectable
         }], ctorParameters: function () { return [{ type: i1$3.Actions }, { type: SearchService }, { type: i1.Store }]; } });
 
+const searchFeatureKey = '@pry/search';
+const initialSearchState = {
+    searchLoading: [],
+    payload: undefined,
+    id: undefined
+};
+const searchReducer = createReducer(initialSearchState, on(SearchActions.search, (state, action) => ({
+    ...state,
+    searchLoading: [...new Set([...state.searchLoading, action.id ?? DEFAULT_NAMED_QUERY_ID])],
+    payload: action.payload,
+    id: action.id
+})), on(SearchActions.getDatasourceItems, (state, action) => ({
+    ...state,
+    searchLoading: [...new Set([...state.searchLoading, action.id])]
+})), on(SearchActions.searchSuccess, (state, action) => ({
+    ...state,
+    searchLoading: [...state.searchLoading.filter((id) => id !== (action.id ?? DEFAULT_NAMED_QUERY_ID))]
+})), on(SearchActions.searchFailure, (state, action) => ({
+    ...state,
+    searchLoading: [...state.searchLoading.filter((id) => id !== (action.id ?? DEFAULT_NAMED_QUERY_ID))]
+})), on(SearchActions.setSearchLoading, (state, action) => ({
+    ...state,
+    searchLoading: action.start
+        ? [...new Set([...state.searchLoading, ...action.datasources])]
+        : [...state.searchLoading.filter((id) => !action.datasources.includes(id))]
+})));
+
 class AccordionComponent {
     constructor() { }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
@@ -5409,6 +5333,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: PryI18nService }]; } });
 
+const feature$2 = createFeatureSelector(searchFeatureKey);
+const searchLoading = createSelector(feature$2, (state) => state.searchLoading);
+const SearchSelectors = {
+    feature: feature$2,
+    searchLoading
+};
+
 const latLonToGeographicFieldTransformation = (latAttrName, lonAttrName, locAttrName, datasetIds = []) => (id, result) => {
     if (datasetIds.length > 0 && !datasetIds.includes(id)) {
         return result;
@@ -7482,11 +7413,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 const MIME_TYPE_RESULTSET = 'application/resultset';
 
-const DEFAULT_GAP_PX = 15;
-const DEFAULT_COLUMNS_NUMBER = 12;
-const DEFAULT_ROWS_NUMBER = 12;
-const DEFAULT_ROW_HEIGHT_PX = 50;
-
 const arrayOf = (item, num) => {
     return [...new Array(num)].map(() => item);
 };
@@ -7502,143 +7428,98 @@ const createPlacedWidgetCopy = (widget, position) => {
     return tmp;
 };
 const WidgetPlacementUtils = {
-    layoutSizeImplementations: {
-        [DashboardGridLayout.MANUAL]: (outLayout, params) => {
-            outLayout.height = params.rows ?? DEFAULT_ROWS_NUMBER;
-            outLayout.width = params.columns ?? DEFAULT_COLUMNS_NUMBER;
-            return arrayOf(outLayout, 20);
+    layouts: [
+        {
+            type: DashboardGridLayout.MANUAL,
+            places: [],
+            label: '@pry.toolbox.layout.0',
+            description: '@pry.toolbox.layout.0_detailled',
+            rows: 12,
+            columns: 12
         },
-        [DashboardGridLayout.FULL]: (outLayout, params) => {
-            outLayout.height = params.rows ?? DEFAULT_ROWS_NUMBER;
-            outLayout.width = params.columns ?? DEFAULT_COLUMNS_NUMBER;
-            return [outLayout];
+        {
+            type: DashboardGridLayout.FULL,
+            places: [{ x: 1, y: 1, width: 12, height: 12 }],
+            label: '@pry.toolbox.layout.1',
+            description: '@pry.toolbox.layout.1_detailled',
+            rows: 12,
+            columns: 12
         },
-        [DashboardGridLayout.QUARTER]: (outLayout, params) => {
-            outLayout.height = Math.floor((params.rows ?? DEFAULT_ROWS_NUMBER) / 2);
-            outLayout.width = Math.floor((params.columns ?? DEFAULT_COLUMNS_NUMBER) / 2);
-            return [outLayout, outLayout, outLayout, outLayout];
+        {
+            type: DashboardGridLayout.HALF_HORIZONTAL,
+            places: [
+                { x: 1, y: 1, width: 12, height: 6 },
+                { x: 1, y: 7, width: 12, height: 6 }
+            ],
+            label: '@pry.toolbox.layout.1/2h',
+            description: '@pry.toolbox.layout.1/2h_detailled',
+            rows: 12,
+            columns: 12
         },
-        [DashboardGridLayout.HALF_HORIZONTAL]: (outLayout, params) => {
-            outLayout.height = Math.floor((params.rows ?? DEFAULT_ROWS_NUMBER) / 2);
-            outLayout.width = params.columns ?? DEFAULT_COLUMNS_NUMBER;
-            return [outLayout, outLayout];
+        {
+            type: DashboardGridLayout.HALF_VERTICAL,
+            places: [
+                { x: 1, y: 1, width: 6, height: 12 },
+                { x: 7, y: 1, width: 6, height: 12 }
+            ],
+            label: '@pry.toolbox.layout.1/2v',
+            description: '@pry.toolbox.layout.1/2v_detailled',
+            rows: 12,
+            columns: 12
         },
-        [DashboardGridLayout.HALF_VERTICAL]: (outLayout, params) => {
-            outLayout.height = params.rows ?? DEFAULT_ROWS_NUMBER;
-            outLayout.width = Math.floor((params.columns ?? DEFAULT_COLUMNS_NUMBER) / 2);
-            return [outLayout, outLayout];
+        {
+            type: DashboardGridLayout.THIRD_HORIZONTAL,
+            places: [
+                { x: 1, y: 1, width: 12, height: 4 },
+                { x: 1, y: 5, width: 12, height: 4 },
+                { x: 1, y: 9, width: 12, height: 4 }
+            ],
+            label: '@pry.toolbox.layout.1/3h',
+            description: '@pry.toolbox.layout.1/3h_detailled',
+            rows: 12,
+            columns: 12
         },
-        [DashboardGridLayout.THIRD_HORIZONTAL]: (outLayout, params) => {
-            outLayout.height = Math.floor((params.rows ?? DEFAULT_ROWS_NUMBER) / 3);
-            outLayout.width = params.columns ?? DEFAULT_COLUMNS_NUMBER;
-            return [outLayout, outLayout, outLayout];
+        {
+            type: DashboardGridLayout.THIRD_VERTICAL,
+            places: [
+                { x: 1, y: 1, width: 4, height: 12 },
+                { x: 5, y: 1, width: 4, height: 12 },
+                { x: 9, y: 1, width: 4, height: 12 }
+            ],
+            label: '@pry.toolbox.layout.1/3v',
+            description: '@pry.toolbox.layout.1/3v_detailled',
+            rows: 12,
+            columns: 12
         },
-        [DashboardGridLayout.THIRD_VERTICAL]: (outLayout, params) => {
-            outLayout.height = params.rows ?? DEFAULT_ROWS_NUMBER;
-            outLayout.width = Math.floor((params.columns ?? DEFAULT_COLUMNS_NUMBER) / 3);
-            return [outLayout, outLayout, outLayout];
-        }
-    },
-    placementOptionsImplementations: {
-        // Manual mode do not offer automatic placement solutions... propose fullscreen
-        [DashboardGridLayout.MANUAL]: (widgetToPlace, sizes, params) => [createPlacedWidgetCopy(widgetToPlace, { ...sizes[0], x: 1, y: 1 })],
-        [DashboardGridLayout.FULL]: (widgetToPlace, sizes, params) => [createPlacedWidgetCopy(widgetToPlace, { ...sizes[0], x: 1, y: 1 })],
-        [DashboardGridLayout.HALF_VERTICAL]: (widgetToPlace, sizes, params) => [
-            createPlacedWidgetCopy(widgetToPlace, { ...sizes[0], x: 1, y: 1 }),
-            createPlacedWidgetCopy(widgetToPlace, {
-                ...sizes[1],
-                x: Math.floor((params.columns ?? DEFAULT_COLUMNS_NUMBER) / 2) + 1,
-                y: 1
-            })
-        ],
-        [DashboardGridLayout.HALF_HORIZONTAL]: (widgetToPlace, sizes, params) => [
-            createPlacedWidgetCopy(widgetToPlace, { ...sizes[0], x: 1, y: 1 }),
-            createPlacedWidgetCopy(widgetToPlace, {
-                ...sizes[1],
-                x: 1,
-                y: Math.ceil((params.rows ?? DEFAULT_ROWS_NUMBER) / 2) + 1
-            })
-        ],
-        [DashboardGridLayout.THIRD_VERTICAL]: (widgetToPlace, sizes, params) => [
-            createPlacedWidgetCopy(widgetToPlace, { ...sizes[0], x: 1, y: 1 }),
-            createPlacedWidgetCopy(widgetToPlace, {
-                ...sizes[1],
-                x: Math.ceil((params.columns ?? DEFAULT_COLUMNS_NUMBER) / 3) + 1,
-                y: 1
-            }),
-            createPlacedWidgetCopy(widgetToPlace, {
-                ...sizes[2],
-                x: Math.ceil(((params.columns ?? DEFAULT_COLUMNS_NUMBER) * 2) / 3) + 1,
-                y: 1
-            })
-        ],
-        [DashboardGridLayout.THIRD_HORIZONTAL]: (widgetToPlace, sizes, params) => [
-            createPlacedWidgetCopy(widgetToPlace, { ...sizes[0], x: 1, y: 1 }),
-            createPlacedWidgetCopy(widgetToPlace, {
-                ...sizes[1],
-                x: 1,
-                y: Math.ceil((params.rows ?? DEFAULT_ROWS_NUMBER) / 3) + 1
-            }),
-            createPlacedWidgetCopy(widgetToPlace, {
-                ...sizes[2],
-                x: 1,
-                y: Math.ceil(((params.rows ?? DEFAULT_ROWS_NUMBER) * 2) / 3) + 1
-            })
-        ],
-        [DashboardGridLayout.QUARTER]: (widgetToPlace, sizes, params) => [
-            createPlacedWidgetCopy(widgetToPlace, { ...sizes[0], x: 1, y: 1 }),
-            createPlacedWidgetCopy(widgetToPlace, {
-                ...sizes[2],
-                x: Math.ceil((params.columns ?? DEFAULT_COLUMNS_NUMBER) / 2) + 1,
-                y: 1
-            }),
-            createPlacedWidgetCopy(widgetToPlace, {
-                ...sizes[1],
-                x: 1,
-                y: Math.ceil((params.rows ?? DEFAULT_ROWS_NUMBER ?? DEFAULT_ROWS_NUMBER) / 2) + 1
-            }),
-            createPlacedWidgetCopy(widgetToPlace, {
-                ...sizes[3],
-                x: Math.ceil((params.columns ?? DEFAULT_COLUMNS_NUMBER) / 2) + 1,
-                y: Math.ceil((params.rows ?? DEFAULT_ROWS_NUMBER) / 2) + 1
-            })
-        ]
+        {
+            type: DashboardGridLayout.QUARTER,
+            places: [
+                { x: 1, y: 1, width: 6, height: 6 },
+                { x: 1, y: 7, width: 6, height: 6 },
+                { x: 7, y: 1, width: 6, height: 6 },
+                { x: 7, y: 7, width: 6, height: 6 }
+            ],
+            label: '@pry.toolbox.layout.1/4',
+            description: '@pry.toolbox.layout.1/4_detailled',
+            rows: 12,
+            columns: 12
+        }
+    ],
+    addGridLayout(layout) {
+        this.layouts.push(layout);
     },
-    layoutImages: {
-        [DashboardGridLayout.MANUAL]: 'assets/svgs/grid_composition_libre.svg',
-        [DashboardGridLayout.THIRD_VERTICAL]: 'assets/svgs/grid_1_3_vertical.svg',
-        [DashboardGridLayout.THIRD_HORIZONTAL]: 'assets/svgs/grid_1_3_horizontal.svg',
-        [DashboardGridLayout.HALF_VERTICAL]: 'assets/svgs/grid_1_2_vertical.svg',
-        [DashboardGridLayout.HALF_HORIZONTAL]: 'assets/svgs/grid_1_2_horizontal.svg',
-        [DashboardGridLayout.QUARTER]: 'assets/svgs/grid_1_4.svg',
-        [DashboardGridLayout.FULL]: 'assets/svgs/grid_full.svg'
-    },
-    addLayoutImplementation: (type, fnSizeImplementation, fnPlacementOptionImplementation, image) => {
-        WidgetPlacementUtils.layoutSizeImplementations[type] = fnSizeImplementation;
-        WidgetPlacementUtils.placementOptionsImplementations[type] = fnPlacementOptionImplementation;
-        WidgetPlacementUtils.layoutImages[type] = image ?? 'assets/svgs/default.svg';
-    },
-    getLayouts: () => Object.keys(WidgetPlacementUtils.placementOptionsImplementations).map((layout) => ({
-        key: layout,
-        image: WidgetPlacementUtils.layoutImages[layout]
-    })),
     isLeft: (w1, w2) => w2.layout.x + w2.layout.width <= w1.layout.x,
     isBelow: (w1, w2) => w2.layout.y + w2.layout.height <= w1.layout.y,
     areDisjoint: (w1, w2) => WidgetPlacementUtils.isLeft(w1, w2) ||
         WidgetPlacementUtils.isLeft(w2, w1) ||
         WidgetPlacementUtils.isBelow(w1, w2) ||
         WidgetPlacementUtils.isBelow(w2, w1),
-    placementOptions: (widgetToPlace, layout, params) => {
-        if (!WidgetPlacementUtils.placementOptionsImplementations[layout]) {
+    placementOptions: (widgetToPlace, layout) => {
+        const layoutO = WidgetPlacementUtils.getLayout(layout);
+        if (!layoutO) {
             return [];
         }
-        return WidgetPlacementUtils.placementOptionsImplementations[layout](widgetToPlace, WidgetPlacementUtils.getLayoutSize(layout, params), params);
-    },
-    getLayoutSize(layout, params) {
-        if (!WidgetPlacementUtils.layoutSizeImplementations[layout]) {
-            return [];
-        }
-        return WidgetPlacementUtils.layoutSizeImplementations[layout]({ x: 1, y: 1, height: 1, width: 1 }, params);
+        return layoutO.places.map((place) => ({ ...widgetToPlace, layout: place }));
     },
     swapArrayElements: (arr, x, y) => {
         if (arr.length === 1)
@@ -7663,11 +7544,16 @@ const WidgetPlacementUtils = {
         problems.sort((a, b) => a[0].layout.y * 100000 - b[0].layout.y * 100000 + a[0].layout.x - b[0].layout.y);
         return problems;
     },
-    placesForLayout(layout) {
-        return this.getLayoutSize(layout, { rows: 1, columns: 1 }).length;
+    getLayout(layout) {
+        return this.layouts.find((lay) => lay.type === layout);
     }
 };
 
+const DEFAULT_GAP_PX = 15;
+const DEFAULT_COLUMNS_NUMBER = 12;
+const DEFAULT_ROWS_NUMBER = 12;
+const DEFAULT_ROW_HEIGHT_PX = 50;
+
 function orderWidgetsAccordingToPlacement(a, b) {
     return ((b.layout.weight ?? 0) * 1000000 -
         (a.layout.weight ?? 0) * 1000000 +
@@ -8387,6 +8273,7 @@ class DashboardComponent extends SubscriptionnerDirective {
         this.indexForRemoval = -1;
         this.params = {};
         this.CloseOnDragOut = true;
+        this.noBackground = false;
         this.canCalculateView = false;
         this.dashboardParams = {
             gridWidth: 1,
@@ -8428,8 +8315,8 @@ class DashboardComponent extends SubscriptionnerDirective {
             const wManifest = JSON.parse(JSON.stringify(_wManifest));
             if (wManifest.grid?.layout && wManifest.grid.layout !== DashboardGridLayout.MANUAL) {
                 // Complete with placeholders
-                const size = WidgetPlacementUtils.placesForLayout(wManifest.grid.layout);
-                const places = WidgetPlacementUtils.placementOptions({ type: 'filler', layout: { x: 1, y: 1, width: 1, height: 1 } }, wManifest.grid.layout, wManifest.grid);
+                const size = WidgetPlacementUtils.getLayout(wManifest.grid.layout)?.places.length ?? 0;
+                const places = WidgetPlacementUtils.placementOptions({ type: 'filler', layout: { x: 1, y: 1, width: 1, height: 1 } }, wManifest.grid.layout);
                 let added = true;
                 while (wManifest.widgets.length < size && added) {
                     added = false;
@@ -8502,9 +8389,7 @@ class DashboardComponent extends SubscriptionnerDirective {
             : `3/1/${(manifest.grid?.columns ?? DEFAULT_COLUMNS_NUMBER) - 1}/1`));
         this.separators$ = this.store
             .select(DashboardSelectors.gridLayout)
-            .pipe(map$1((layout) => layout === DashboardGridLayout.MANUAL
-            ? []
-            : WidgetPlacementUtils.getLayoutSize(layout, { rows: 1, columns: 1 })));
+            .pipe(map$1((layout) => layout === DashboardGridLayout.MANUAL ? [] : WidgetPlacementUtils.getLayout(layout)?.places ?? []));
     }
     ngOnInit() {
         if (this.displayOptions)
@@ -8563,7 +8448,7 @@ class DashboardComponent extends SubscriptionnerDirective {
             return '1 / 1';
         }
         if (layout.width > 1) {
-            return `${Math.min(layout.x, this.dashboardParams.columns - layout.width + 1)} / ${Math.min(layout.x + layout.width, this.dashboardParams.columns + 1)}`;
+            return `${Math.min(layout.x, this.params.columns - layout.width + 1)} / ${Math.min(layout.x + layout.width, this.params.columns + 1)}`;
         }
         else {
             return `${layout.x}`;
@@ -8580,7 +8465,7 @@ class DashboardComponent extends SubscriptionnerDirective {
             return `${previousHeight ?? 1} / ${(previousHeight ?? 1) + layout.height}`;
         }
         if (layout.height > 1) {
-            return `${Math.max(1, Math.min(layout.y, this.dashboardParams.rows - layout.height + 1))} / ${Math.min(layout.y + layout.height, this.dashboardParams.rows + 1)}`;
+            return `${Math.max(1, Math.min(layout.y, this.params.rows - layout.height + 1))} / ${Math.min(layout.y + layout.height, this.params.rows + 1)}`;
         }
         else {
             return `${layout.y}`;
@@ -8677,7 +8562,10 @@ class DashboardComponent extends SubscriptionnerDirective {
                 }
                 else {
                     // Use grid size
-                    const layout = WidgetPlacementUtils.getLayoutSize(this.layout, this.dashboardParams)[this.initialWidgetManifestList.length];
+                    const layout = (WidgetPlacementUtils.getLayout(this.layout)?.places ?? [])[this.initialWidgetManifestList.length] ?? {
+                        width: 1,
+                        height: 1
+                    };
                     this.currentlyModifiedManifest.layout.width = layout.width;
                     this.currentlyModifiedManifest.layout.height = layout.height;
                 }
@@ -8883,11 +8771,11 @@ class DashboardComponent extends SubscriptionnerDirective {
         return index + '-' + widgetManifest.type + '-' + JSON.stringify(widgetManifest.layout);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DashboardComponent, deps: [{ token: i1.Store }, { token: i2.Overlay }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DashboardComponent, selector: "pry-dashboard", inputs: { staticDashboard: "staticDashboard", CloseOnDragOut: "CloseOnDragOut", displayOptions: "displayOptions" }, outputs: { rowHeight: "rowHeight", rows: "rows" }, viewQueries: [{ propertyName: "templateModal", first: true, predicate: ["templateModal"], descendants: true, read: TemplateRef }, { propertyName: "gridRef", first: true, predicate: ["grid"], descendants: true }, { propertyName: "instanciators", predicate: WidgetInstanciatorComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n  class=\"o-dashboard-grid\"\n  [style.gridTemplateColumns]=\"gridTemplateColumns$ | async\"\n  [style.gridTemplateRows]=\"gridTemplateRows$ | async\"\n  [style.gridGap]=\"dashboardParams.gridGap + 'px'\"\n  [style.padding]=\"'0 ' + dashboardParams.gridGap + 'px'\"\n  #grid\n  (mousemove)=\"movingMouse($event)\"\n  (drop)=\"dropping($event)\"\n  (dragover)=\"dragMove($event)\"\n  (dragleave)=\"dragLeave($event)\"\n  (dragenter)=\"dragEnter($event)\"\n>\n  <ng-container\n    *ngFor=\"\n      let widgetManifest of (windowManifest$ | async)?.widgets || [];\n      let widgetIndex = index;\n      trackBy: trackWidgets\n    \"\n  >\n    <div\n      class=\"o-dashboard-widget\"\n      [class.-edited]=\"modeEdition\"\n      [style.gridColumn]=\"gridColumn(widgetManifest.layout)\"\n      [style.gridRow]=\"gridRow(widgetManifest.layout)\"\n      (drop)=\"droppingInWidget($event, widgetIndex)\"\n    >\n      <ng-container *ngIf=\"modeEdition\">\n        <div class=\"resize nw-resize\" (mousedown)=\"startResize($event, widgetIndex, 'resize-nw')\">\n          <pry-icon iconSvg=\"north_west\" [animation]=\"false\"></pry-icon>\n        </div>\n        <div class=\"resize sw-resize\" (mousedown)=\"startResize($event, widgetIndex, 'resize-sw')\">\n          <pry-icon iconSvg=\"south_west\" [animation]=\"false\"></pry-icon>\n        </div>\n        <div class=\"resize ne-resize\" (mousedown)=\"startResize($event, widgetIndex, 'resize-ne')\">\n          <pry-icon iconSvg=\"north_east\" [animation]=\"false\"></pry-icon>\n        </div>\n        <div class=\"resize se-resize\" (mousedown)=\"startResize($event, widgetIndex, 'resize-se')\">\n          <pry-icon iconSvg=\"south_east\" [animation]=\"false\"></pry-icon>\n        </div>\n        <div class=\"resize delete\" (mousedown)=\"toggleRemoveConfirm($event, widgetIndex)\">\n          <pry-icon iconSvg=\"close\" [animation]=\"false\"></pry-icon>\n        </div>\n        <div class=\"move\" draggable=\"true\" (dragstart)=\"dragStart($event, widgetIndex)\">\n          <div class=\"move-inside move-{{ widgetManifest.type }}\">\n            <span>{{ widgetManifest.title ?? ('@pry.toolbox.' + widgetManifest.type | i18n) }}</span>\n          </div>\n        </div>\n      </ng-container>\n      <ng-container *ngIf=\"!modeEdition\">\n        <pry-widget-instanciator\n          [staticManifest]=\"widgetManifest\"\n          [widgetIndex]=\"widgetIndex\"\n        ></pry-widget-instanciator>\n      </ng-container>\n    </div>\n  </ng-container>\n\n  <ng-container\n    *ngIf=\"{\n      noWidgets: (nonFillerWidgets$ | async) === 0,\n      globalLoading: loading$ | async,\n      fetchLoading: (dataFetching$ | async)?.length ?? 1 > 0\n    } as data\"\n  >\n    <ng-container *ngIf=\"data.noWidgets\">\n      <div *ngIf=\"data.globalLoading; else notLoading\" class=\"no-widget\" [style.grid-area]=\"backgroundArea$ | async\">\n        <pry-icon\n          iconSvg=\"loader\"\n          class=\"no-widget__loading\"\n          [alt]=\"'@pry.widget.target.loading' | i18n\"\n          [width]=\"100\"\n          [height]=\"100\"\n        />\n        <span class=\"no-widget__text\">{{ '@pry.widget.target.loading' | i18n }}...</span>\n      </div>\n      <ng-template #notLoading>\n        <div class=\"no-widget\" [style.grid-area]=\"backgroundArea$ | async\">\n          <img\n            class=\"no-widget__search\"\n            src=\"../../../assets/svgs/pry_recherche.svg\"\n            alt=\"{{\n              (layout === DashboardGridLayout.MANUAL\n                ? '@pry.widget.target.none_manual'\n                : '@pry.widget.target.none_auto'\n              ) | i18n\n            }} {{ backgroundArea$ | async }}\"\n          />\n          <span class=\"no-widget__text\">{{\n            (layout === DashboardGridLayout.MANUAL ? '@pry.widget.target.none_manual' : '@pry.widget.target.none_auto')\n              | i18n\n          }}</span>\n        </div>\n      </ng-template>\n    </ng-container>\n    <div\n      class=\"a-page-loader backdrop\"\n      [style.display]=\"data.fetchLoading && !data.globalLoading ? 'flex' : 'none'\"\n      [style.width.px]=\"params.gridWidth\"\n      [style.height.px]=\"params.gridHeight\"\n    >\n      <pry-icon\n        iconSvg=\"loader\"\n        class=\"no-widget__loading\"\n        [alt]=\"'@pry.widget.target.loading' | i18n\"\n        [width]=\"200\"\n        [height]=\"200\"\n      />\n      <p>{{ '@pry.widget.target.loading' | i18n }}...</p>\n    </div>\n  </ng-container>\n</div>\n<pry-context-menu></pry-context-menu>\n\n<ng-template #templateModal>\n  <div class=\"o-modal\">\n    <div class=\"o-modal__top\">\n      <div class=\"o-modal__top__title\">\n        <h2 class=\"a-h2\" id=\"dialog_title\">\n          {{ '@pry.widget.modalTitle' | i18n }}\n        </h2>\n      </div>\n      <div class=\"o-modal__top__close\">\n        <button class=\"a-btn a-btn--icon-only\" (click)=\"cancelRemoveConfirm()\">\n          <pry-icon iconSvg=\"close\" [height]=\"35\" [width]=\"35\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.toolbox.close' | i18n }}</span>\n        </button>\n      </div>\n    </div>\n    <div class=\"m-btn-group\">\n      <button type=\"button\" (click)=\"cancelRemoveConfirm()\" class=\"a-btn a-btn--secondary\">\n        {{ '@pry.toolbox.manifest.close' | i18n }}\n      </button>\n      <button type=\"submit\" (click)=\"confirmRemove()\" class=\"a-btn a-btn--primary\">\n        {{ '@pry.toolbox.manifest.validate' | i18n }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "component", type: WidgetInstanciatorComponent, selector: "pry-widget-instanciator", inputs: ["widgetIndex", "staticManifest", "standalone", "open$"], outputs: ["manifestModified"] }, { kind: "component", type: ContextMenuComponent, selector: "pry-context-menu" }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DashboardComponent, selector: "pry-dashboard", inputs: { staticDashboard: "staticDashboard", CloseOnDragOut: "CloseOnDragOut", displayOptions: "displayOptions", noBackground: "noBackground", breakpoint: "breakpoint" }, outputs: { rowHeight: "rowHeight", rows: "rows" }, viewQueries: [{ propertyName: "templateModal", first: true, predicate: ["templateModal"], descendants: true, read: TemplateRef }, { propertyName: "gridRef", first: true, predicate: ["grid"], descendants: true }, { propertyName: "instanciators", predicate: WidgetInstanciatorComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n  class=\"o-dashboard-grid\"\n  [style.gridTemplateColumns]=\"gridTemplateColumns$ | async\"\n  [style.gridTemplateRows]=\"gridTemplateRows$ | async\"\n  [style.gridGap]=\"dashboardParams.gridGap + 'px'\"\n  [style.padding]=\"'0 ' + dashboardParams.gridGap + 'px'\"\n  #grid\n  (mousemove)=\"movingMouse($event)\"\n  (drop)=\"dropping($event)\"\n  (dragover)=\"dragMove($event)\"\n  (dragleave)=\"dragLeave($event)\"\n  (dragenter)=\"dragEnter($event)\"\n>\n  <ng-container\n    *ngFor=\"\n      let widgetManifest of (windowManifest$ | async)?.widgets || [];\n      let widgetIndex = index;\n      trackBy: trackWidgets\n    \"\n  >\n    <div\n      class=\"o-dashboard-widget\"\n      [class.-edited]=\"modeEdition\"\n      [style.gridColumn]=\"gridColumn(widgetManifest.layout)\"\n      [style.gridRow]=\"gridRow(widgetManifest.layout)\"\n      (drop)=\"droppingInWidget($event, widgetIndex)\"\n    >\n      <ng-container *ngIf=\"modeEdition\">\n        <div class=\"resize nw-resize\" (mousedown)=\"startResize($event, widgetIndex, 'resize-nw')\">\n          <pry-icon iconSvg=\"north_west\" [animation]=\"false\"></pry-icon>\n        </div>\n        <div class=\"resize sw-resize\" (mousedown)=\"startResize($event, widgetIndex, 'resize-sw')\">\n          <pry-icon iconSvg=\"south_west\" [animation]=\"false\"></pry-icon>\n        </div>\n        <div class=\"resize ne-resize\" (mousedown)=\"startResize($event, widgetIndex, 'resize-ne')\">\n          <pry-icon iconSvg=\"north_east\" [animation]=\"false\"></pry-icon>\n        </div>\n        <div class=\"resize se-resize\" (mousedown)=\"startResize($event, widgetIndex, 'resize-se')\">\n          <pry-icon iconSvg=\"south_east\" [animation]=\"false\"></pry-icon>\n        </div>\n        <div class=\"resize delete\" (mousedown)=\"toggleRemoveConfirm($event, widgetIndex)\">\n          <pry-icon iconSvg=\"close\" [animation]=\"false\"></pry-icon>\n        </div>\n        <div class=\"move\" draggable=\"true\" (dragstart)=\"dragStart($event, widgetIndex)\">\n          <div class=\"move-inside move-{{ widgetManifest.type }}\">\n            <span>{{ widgetManifest.title ?? ('@pry.toolbox.' + widgetManifest.type | i18n) }}</span>\n          </div>\n        </div>\n      </ng-container>\n      <ng-container *ngIf=\"!modeEdition\">\n        <pry-widget-instanciator\n          [staticManifest]=\"widgetManifest\"\n          [widgetIndex]=\"widgetIndex\"\n        ></pry-widget-instanciator>\n      </ng-container>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"!noBackground\">\n    <ng-container\n      *ngIf=\"{\n        noWidgets: (nonFillerWidgets$ | async) === 0,\n        globalLoading: loading$ | async,\n        fetchLoading: (dataFetching$ | async)?.length ?? 1 > 0\n      } as data\"\n    >\n      <ng-container *ngIf=\"data.noWidgets\">\n        <div *ngIf=\"data.globalLoading; else notLoading\" class=\"no-widget\" [style.grid-area]=\"backgroundArea$ | async\">\n          <pry-icon\n            iconSvg=\"loader\"\n            class=\"no-widget__loading\"\n            [alt]=\"'@pry.widget.target.loading' | i18n\"\n            [width]=\"100\"\n            [height]=\"100\"\n          />\n          <span class=\"no-widget__text\">{{ '@pry.widget.target.loading' | i18n }}...</span>\n        </div>\n        <ng-template #notLoading>\n          <div class=\"no-widget\" [style.grid-area]=\"backgroundArea$ | async\">\n            <img\n              class=\"no-widget__search\"\n              src=\"../../../assets/svgs/pry_recherche.svg\"\n              alt=\"{{\n                (layout === DashboardGridLayout.MANUAL\n                  ? '@pry.widget.target.none_manual'\n                  : '@pry.widget.target.none_auto'\n                ) | i18n\n              }} {{ backgroundArea$ | async }}\"\n            />\n            <span class=\"no-widget__text\">{{\n              (layout === DashboardGridLayout.MANUAL\n                ? '@pry.widget.target.none_manual'\n                : '@pry.widget.target.none_auto'\n              ) | i18n\n            }}</span>\n          </div>\n        </ng-template>\n      </ng-container>\n      <div\n        class=\"a-page-loader backdrop\"\n        [style.display]=\"data.fetchLoading && !data.globalLoading ? 'flex' : 'none'\"\n        [style.width.px]=\"params.gridWidth\"\n        [style.height.px]=\"params.gridHeight\"\n      >\n        <pry-icon\n          iconSvg=\"loader\"\n          class=\"no-widget__loading\"\n          [alt]=\"'@pry.widget.target.loading' | i18n\"\n          [width]=\"200\"\n          [height]=\"200\"\n        />\n        <p>{{ '@pry.widget.target.loading' | i18n }}...</p>\n      </div>\n    </ng-container>\n  </ng-container>\n</div>\n<pry-context-menu></pry-context-menu>\n\n<ng-template #templateModal>\n  <div class=\"o-modal\">\n    <div class=\"o-modal__top\">\n      <div class=\"o-modal__top__title\">\n        <h2 class=\"a-h2\" id=\"dialog_title\">\n          {{ '@pry.widget.modalTitle' | i18n }}\n        </h2>\n      </div>\n      <div class=\"o-modal__top__close\">\n        <button class=\"a-btn a-btn--icon-only\" (click)=\"cancelRemoveConfirm()\">\n          <pry-icon iconSvg=\"close\" [height]=\"35\" [width]=\"35\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.toolbox.close' | i18n }}</span>\n        </button>\n      </div>\n    </div>\n    <div class=\"m-btn-group\">\n      <button type=\"button\" (click)=\"cancelRemoveConfirm()\" class=\"a-btn a-btn--secondary\">\n        {{ '@pry.toolbox.manifest.close' | i18n }}\n      </button>\n      <button type=\"submit\" (click)=\"confirmRemove()\" class=\"a-btn a-btn--primary\">\n        {{ '@pry.toolbox.manifest.validate' | i18n }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "component", type: WidgetInstanciatorComponent, selector: "pry-widget-instanciator", inputs: ["widgetIndex", "staticManifest", "standalone", "open$"], outputs: ["manifestModified"] }, { kind: "component", type: ContextMenuComponent, selector: "pry-context-menu" }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DashboardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-dashboard', template: "<div\n  class=\"o-dashboard-grid\"\n  [style.gridTemplateColumns]=\"gridTemplateColumns$ | async\"\n  [style.gridTemplateRows]=\"gridTemplateRows$ | async\"\n  [style.gridGap]=\"dashboardParams.gridGap + 'px'\"\n  [style.padding]=\"'0 ' + dashboardParams.gridGap + 'px'\"\n  #grid\n  (mousemove)=\"movingMouse($event)\"\n  (drop)=\"dropping($event)\"\n  (dragover)=\"dragMove($event)\"\n  (dragleave)=\"dragLeave($event)\"\n  (dragenter)=\"dragEnter($event)\"\n>\n  <ng-container\n    *ngFor=\"\n      let widgetManifest of (windowManifest$ | async)?.widgets || [];\n      let widgetIndex = index;\n      trackBy: trackWidgets\n    \"\n  >\n    <div\n      class=\"o-dashboard-widget\"\n      [class.-edited]=\"modeEdition\"\n      [style.gridColumn]=\"gridColumn(widgetManifest.layout)\"\n      [style.gridRow]=\"gridRow(widgetManifest.layout)\"\n      (drop)=\"droppingInWidget($event, widgetIndex)\"\n    >\n      <ng-container *ngIf=\"modeEdition\">\n        <div class=\"resize nw-resize\" (mousedown)=\"startResize($event, widgetIndex, 'resize-nw')\">\n          <pry-icon iconSvg=\"north_west\" [animation]=\"false\"></pry-icon>\n        </div>\n        <div class=\"resize sw-resize\" (mousedown)=\"startResize($event, widgetIndex, 'resize-sw')\">\n          <pry-icon iconSvg=\"south_west\" [animation]=\"false\"></pry-icon>\n        </div>\n        <div class=\"resize ne-resize\" (mousedown)=\"startResize($event, widgetIndex, 'resize-ne')\">\n          <pry-icon iconSvg=\"north_east\" [animation]=\"false\"></pry-icon>\n        </div>\n        <div class=\"resize se-resize\" (mousedown)=\"startResize($event, widgetIndex, 'resize-se')\">\n          <pry-icon iconSvg=\"south_east\" [animation]=\"false\"></pry-icon>\n        </div>\n        <div class=\"resize delete\" (mousedown)=\"toggleRemoveConfirm($event, widgetIndex)\">\n          <pry-icon iconSvg=\"close\" [animation]=\"false\"></pry-icon>\n        </div>\n        <div class=\"move\" draggable=\"true\" (dragstart)=\"dragStart($event, widgetIndex)\">\n          <div class=\"move-inside move-{{ widgetManifest.type }}\">\n            <span>{{ widgetManifest.title ?? ('@pry.toolbox.' + widgetManifest.type | i18n) }}</span>\n          </div>\n        </div>\n      </ng-container>\n      <ng-container *ngIf=\"!modeEdition\">\n        <pry-widget-instanciator\n          [staticManifest]=\"widgetManifest\"\n          [widgetIndex]=\"widgetIndex\"\n        ></pry-widget-instanciator>\n      </ng-container>\n    </div>\n  </ng-container>\n\n  <ng-container\n    *ngIf=\"{\n      noWidgets: (nonFillerWidgets$ | async) === 0,\n      globalLoading: loading$ | async,\n      fetchLoading: (dataFetching$ | async)?.length ?? 1 > 0\n    } as data\"\n  >\n    <ng-container *ngIf=\"data.noWidgets\">\n      <div *ngIf=\"data.globalLoading; else notLoading\" class=\"no-widget\" [style.grid-area]=\"backgroundArea$ | async\">\n        <pry-icon\n          iconSvg=\"loader\"\n          class=\"no-widget__loading\"\n          [alt]=\"'@pry.widget.target.loading' | i18n\"\n          [width]=\"100\"\n          [height]=\"100\"\n        />\n        <span class=\"no-widget__text\">{{ '@pry.widget.target.loading' | i18n }}...</span>\n      </div>\n      <ng-template #notLoading>\n        <div class=\"no-widget\" [style.grid-area]=\"backgroundArea$ | async\">\n          <img\n            class=\"no-widget__search\"\n            src=\"../../../assets/svgs/pry_recherche.svg\"\n            alt=\"{{\n              (layout === DashboardGridLayout.MANUAL\n                ? '@pry.widget.target.none_manual'\n                : '@pry.widget.target.none_auto'\n              ) | i18n\n            }} {{ backgroundArea$ | async }}\"\n          />\n          <span class=\"no-widget__text\">{{\n            (layout === DashboardGridLayout.MANUAL ? '@pry.widget.target.none_manual' : '@pry.widget.target.none_auto')\n              | i18n\n          }}</span>\n        </div>\n      </ng-template>\n    </ng-container>\n    <div\n      class=\"a-page-loader backdrop\"\n      [style.display]=\"data.fetchLoading && !data.globalLoading ? 'flex' : 'none'\"\n      [style.width.px]=\"params.gridWidth\"\n      [style.height.px]=\"params.gridHeight\"\n    >\n      <pry-icon\n        iconSvg=\"loader\"\n        class=\"no-widget__loading\"\n        [alt]=\"'@pry.widget.target.loading' | i18n\"\n        [width]=\"200\"\n        [height]=\"200\"\n      />\n      <p>{{ '@pry.widget.target.loading' | i18n }}...</p>\n    </div>\n  </ng-container>\n</div>\n<pry-context-menu></pry-context-menu>\n\n<ng-template #templateModal>\n  <div class=\"o-modal\">\n    <div class=\"o-modal__top\">\n      <div class=\"o-modal__top__title\">\n        <h2 class=\"a-h2\" id=\"dialog_title\">\n          {{ '@pry.widget.modalTitle' | i18n }}\n        </h2>\n      </div>\n      <div class=\"o-modal__top__close\">\n        <button class=\"a-btn a-btn--icon-only\" (click)=\"cancelRemoveConfirm()\">\n          <pry-icon iconSvg=\"close\" [height]=\"35\" [width]=\"35\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.toolbox.close' | i18n }}</span>\n        </button>\n      </div>\n    </div>\n    <div class=\"m-btn-group\">\n      <button type=\"button\" (click)=\"cancelRemoveConfirm()\" class=\"a-btn a-btn--secondary\">\n        {{ '@pry.toolbox.manifest.close' | i18n }}\n      </button>\n      <button type=\"submit\" (click)=\"confirmRemove()\" class=\"a-btn a-btn--primary\">\n        {{ '@pry.toolbox.manifest.validate' | i18n }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n" }]
+            args: [{ selector: 'pry-dashboard', template: "<div\n  class=\"o-dashboard-grid\"\n  [style.gridTemplateColumns]=\"gridTemplateColumns$ | async\"\n  [style.gridTemplateRows]=\"gridTemplateRows$ | async\"\n  [style.gridGap]=\"dashboardParams.gridGap + 'px'\"\n  [style.padding]=\"'0 ' + dashboardParams.gridGap + 'px'\"\n  #grid\n  (mousemove)=\"movingMouse($event)\"\n  (drop)=\"dropping($event)\"\n  (dragover)=\"dragMove($event)\"\n  (dragleave)=\"dragLeave($event)\"\n  (dragenter)=\"dragEnter($event)\"\n>\n  <ng-container\n    *ngFor=\"\n      let widgetManifest of (windowManifest$ | async)?.widgets || [];\n      let widgetIndex = index;\n      trackBy: trackWidgets\n    \"\n  >\n    <div\n      class=\"o-dashboard-widget\"\n      [class.-edited]=\"modeEdition\"\n      [style.gridColumn]=\"gridColumn(widgetManifest.layout)\"\n      [style.gridRow]=\"gridRow(widgetManifest.layout)\"\n      (drop)=\"droppingInWidget($event, widgetIndex)\"\n    >\n      <ng-container *ngIf=\"modeEdition\">\n        <div class=\"resize nw-resize\" (mousedown)=\"startResize($event, widgetIndex, 'resize-nw')\">\n          <pry-icon iconSvg=\"north_west\" [animation]=\"false\"></pry-icon>\n        </div>\n        <div class=\"resize sw-resize\" (mousedown)=\"startResize($event, widgetIndex, 'resize-sw')\">\n          <pry-icon iconSvg=\"south_west\" [animation]=\"false\"></pry-icon>\n        </div>\n        <div class=\"resize ne-resize\" (mousedown)=\"startResize($event, widgetIndex, 'resize-ne')\">\n          <pry-icon iconSvg=\"north_east\" [animation]=\"false\"></pry-icon>\n        </div>\n        <div class=\"resize se-resize\" (mousedown)=\"startResize($event, widgetIndex, 'resize-se')\">\n          <pry-icon iconSvg=\"south_east\" [animation]=\"false\"></pry-icon>\n        </div>\n        <div class=\"resize delete\" (mousedown)=\"toggleRemoveConfirm($event, widgetIndex)\">\n          <pry-icon iconSvg=\"close\" [animation]=\"false\"></pry-icon>\n        </div>\n        <div class=\"move\" draggable=\"true\" (dragstart)=\"dragStart($event, widgetIndex)\">\n          <div class=\"move-inside move-{{ widgetManifest.type }}\">\n            <span>{{ widgetManifest.title ?? ('@pry.toolbox.' + widgetManifest.type | i18n) }}</span>\n          </div>\n        </div>\n      </ng-container>\n      <ng-container *ngIf=\"!modeEdition\">\n        <pry-widget-instanciator\n          [staticManifest]=\"widgetManifest\"\n          [widgetIndex]=\"widgetIndex\"\n        ></pry-widget-instanciator>\n      </ng-container>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"!noBackground\">\n    <ng-container\n      *ngIf=\"{\n        noWidgets: (nonFillerWidgets$ | async) === 0,\n        globalLoading: loading$ | async,\n        fetchLoading: (dataFetching$ | async)?.length ?? 1 > 0\n      } as data\"\n    >\n      <ng-container *ngIf=\"data.noWidgets\">\n        <div *ngIf=\"data.globalLoading; else notLoading\" class=\"no-widget\" [style.grid-area]=\"backgroundArea$ | async\">\n          <pry-icon\n            iconSvg=\"loader\"\n            class=\"no-widget__loading\"\n            [alt]=\"'@pry.widget.target.loading' | i18n\"\n            [width]=\"100\"\n            [height]=\"100\"\n          />\n          <span class=\"no-widget__text\">{{ '@pry.widget.target.loading' | i18n }}...</span>\n        </div>\n        <ng-template #notLoading>\n          <div class=\"no-widget\" [style.grid-area]=\"backgroundArea$ | async\">\n            <img\n              class=\"no-widget__search\"\n              src=\"../../../assets/svgs/pry_recherche.svg\"\n              alt=\"{{\n                (layout === DashboardGridLayout.MANUAL\n                  ? '@pry.widget.target.none_manual'\n                  : '@pry.widget.target.none_auto'\n                ) | i18n\n              }} {{ backgroundArea$ | async }}\"\n            />\n            <span class=\"no-widget__text\">{{\n              (layout === DashboardGridLayout.MANUAL\n                ? '@pry.widget.target.none_manual'\n                : '@pry.widget.target.none_auto'\n              ) | i18n\n            }}</span>\n          </div>\n        </ng-template>\n      </ng-container>\n      <div\n        class=\"a-page-loader backdrop\"\n        [style.display]=\"data.fetchLoading && !data.globalLoading ? 'flex' : 'none'\"\n        [style.width.px]=\"params.gridWidth\"\n        [style.height.px]=\"params.gridHeight\"\n      >\n        <pry-icon\n          iconSvg=\"loader\"\n          class=\"no-widget__loading\"\n          [alt]=\"'@pry.widget.target.loading' | i18n\"\n          [width]=\"200\"\n          [height]=\"200\"\n        />\n        <p>{{ '@pry.widget.target.loading' | i18n }}...</p>\n      </div>\n    </ng-container>\n  </ng-container>\n</div>\n<pry-context-menu></pry-context-menu>\n\n<ng-template #templateModal>\n  <div class=\"o-modal\">\n    <div class=\"o-modal__top\">\n      <div class=\"o-modal__top__title\">\n        <h2 class=\"a-h2\" id=\"dialog_title\">\n          {{ '@pry.widget.modalTitle' | i18n }}\n        </h2>\n      </div>\n      <div class=\"o-modal__top__close\">\n        <button class=\"a-btn a-btn--icon-only\" (click)=\"cancelRemoveConfirm()\">\n          <pry-icon iconSvg=\"close\" [height]=\"35\" [width]=\"35\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.toolbox.close' | i18n }}</span>\n        </button>\n      </div>\n    </div>\n    <div class=\"m-btn-group\">\n      <button type=\"button\" (click)=\"cancelRemoveConfirm()\" class=\"a-btn a-btn--secondary\">\n        {{ '@pry.toolbox.manifest.close' | i18n }}\n      </button>\n      <button type=\"submit\" (click)=\"confirmRemove()\" class=\"a-btn a-btn--primary\">\n        {{ '@pry.toolbox.manifest.validate' | i18n }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n" }]
         }], ctorParameters: function () { return [{ type: i1.Store }, { type: i2.Overlay }, { type: i0.ViewContainerRef }]; }, propDecorators: { templateModal: [{
                 type: ViewChild,
                 args: ['templateModal', { read: TemplateRef }]
@@ -8900,9 +8788,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], displayOptions: [{
                 type: Input
+            }], noBackground: [{
+                type: Input
             }], gridRef: [{
                 type: ViewChild,
                 args: ['grid']
+            }], breakpoint: [{
+                type: Input
             }], rowHeight: [{
                 type: Output
             }], rows: [{
@@ -10087,9 +9979,7 @@ class PryWidgetHeaderComponent extends SubscriptionnerDirective {
     }
     toggleChangeSpot() {
         if (!this.spotRef) {
-            this.places = WidgetPlacementUtils.placementOptions({ type: 'icon' }, this.currentLayout, {
-                ...this.windowManifest?.grid
-            });
+            this.places = WidgetPlacementUtils.placementOptions({ type: 'icon' }, this.currentLayout);
             this.spotRef = this.overlay.create(new OverlayConfig({
                 hasBackdrop: true,
                 panelClass: ['o-modal-wrapper'],
@@ -11012,7 +10902,7 @@ class DashboardEffects {
             // Trying all placement options
             for (const actualRank of sequence) {
                 const windowLayout = manifestGlobal.windows[actualRank].grid?.layout ?? DashboardGridLayout.FULL;
-                const options = WidgetPlacementUtils.placementOptions(newWidgetManifest, windowLayout, params);
+                const options = WidgetPlacementUtils.placementOptions(newWidgetManifest, windowLayout);
                 if (!found) {
                     for (const option of options) {
                         if (!found) {
@@ -11035,7 +10925,7 @@ class DashboardEffects {
             else {
                 const currentWindowLayout = manifestGlobal.windows[rank].grid?.layout ?? DashboardGridLayout.FULL;
                 // si non trouvé : nouvelle page, première position suggérée
-                const firstProposedLayout = WidgetPlacementUtils.placementOptions(newWidgetManifest, currentWindowLayout, params)[0];
+                const firstProposedLayout = WidgetPlacementUtils.placementOptions(newWidgetManifest, currentWindowLayout)[0];
                 manifestGlobal.windows.push({ widgets: [firstProposedLayout], grid: { layout: currentWindowLayout } });
             }
             if (action.alert === undefined || action.alert === true) {
@@ -11579,12 +11469,14 @@ const internalReducer = createReducer(dashboardInitialState, on(DashboardActions
     }
     newWindows[myRank].grid.layout = action.layout;
     if (action.layout !== DashboardGridLayout.MANUAL) {
+        const layout = WidgetPlacementUtils.getLayout(action.layout);
         // Reorder layouts
-        const params = {
-            rows: newWindows[myRank].grid.rows,
-            columns: newWindows[myRank].grid.columns
+        newWindows[myRank].grid = {
+            ...newWindows[myRank].grid,
+            rows: layout?.rows ?? DEFAULT_ROWS_NUMBER,
+            columns: layout?.columns ?? DEFAULT_COLUMNS_NUMBER
         };
-        const places = WidgetPlacementUtils.placementOptions({}, action.layout, params);
+        const places = WidgetPlacementUtils.placementOptions({}, action.layout);
         newWindows[myRank].widgets.forEach((widget, idx) => {
             let targetLayout = places[idx]?.layout;
             if (!targetLayout) {
@@ -11894,9 +11786,9 @@ const components = [
     DatasourceSelectorComponent
 ];
 class PryDashboardModule {
-    static forRoot(widgetReference, options, tooltipReference, filterReference, additionalGridImplementations = []) {
-        additionalGridImplementations.forEach((impl) => {
-            WidgetPlacementUtils.addLayoutImplementation(impl.type, impl.sizeImpl, impl.placementImpl, impl.image);
+    static forRoot(widgetReference, options, tooltipReference, filterReference, additionalGridLayouts = []) {
+        additionalGridLayouts.forEach((impl) => {
+            WidgetPlacementUtils.addGridLayout(impl);
         });
         return {
             ngModule: PryDashboardModule,
@@ -11916,9 +11808,7 @@ class PryDashboardModule {
             ]
         };
     }
-    constructor(store) {
-        ProxyUtils.init(store);
-    }
+    constructor(store) { }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PryDashboardModule, deps: [{ token: i1.Store }], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: PryDashboardModule, declarations: [DashboardComponent,
             WidgetInstanciatorComponent,