@provoly/dashboard 0.18.4 → 0.18.6

package/fesm2022/provoly-dashboard.mjs

@@ -22,8 +22,6 @@ import { distinctUntilChanged, filter as filter$1, debounceTime as debounceTime$
 import { animation, style, animate, trigger, transition, useAnimation } from '@angular/animations';
 import * as i5 from '@angular/cdk/a11y';
 import { A11yModule } from '@angular/cdk/a11y';
-import { GeoJSON } from 'ol/format';
-import { fromLonLat } from 'ol/proj';
 import * as i1$4 from '@angular/cdk/accordion';
 import { CdkAccordionModule } from '@angular/cdk/accordion';
 import * as i3$1 from '@angular/forms';
@@ -282,10 +280,11 @@ const enTranslations$1 = {
             launchIndication: 'Open this page in a',
             chooseGrid: 'Change grid layout',
             clear: 'Clear presentation',
-            refresh: 'Refresh',
+            refresh: 'Refresh data',
             automateRefresh: 'Automate refresh',
             options: 'Options',
             close: 'Close',
+            filter: 'Filter',
             heatmap: 'Heatmap',
             bubblemap: 'Bubbles',
             markermap: 'Markers',
@@ -630,10 +629,11 @@ const frTranslations$1 = {
             launchIndication: 'Ouvrir cette page dans un',
             chooseGrid: 'Changer la grille',
             clear: "Vider l'affichage",
-            refresh: 'Actualiser',
+            refresh: 'Rafraichir les données',
             automateRefresh: "Automatiser l'actualisation",
             options: 'Options',
             close: 'Fermer',
+            filter: 'Filtrer',
             heatmap: 'Fréquentation',
             bubblemap: 'Bulles',
             markermap: 'Marqueurs',
@@ -1367,6 +1367,8 @@ const DashboardActions = {
     removeFilter: createAction('[Dashboard] (bus) remove filter in presentation', props()),
     removeFilters: createAction('[Dashboard] (bus) remove filters'),
     updateFilterValue: createAction('[Dashboard] (bus) update filter value', props()),
+    clearAllFilterValues: createAction('[Dashboard] (bus) clear all filter values'),
+    dispatchFilters: createAction('[Dashboard] (bus) apply filters to presentation datasources'),
     resetWmsFeatures: createAction('[Widget map] Reset Wms layer features'),
     getWmsFeatures: createAction('[Widget map] Get Wms layer features', props()),
     addWmsFeatures: createAction('[Widget map] Set Wms layer features', props()),
@@ -2507,7 +2509,9 @@ class DatasourceUtils {
                     : NamedQueryTypes.FULL_TEXT;
     }
     static isGeo(ds) {
-        return (ds.metadata?.find((m) => m.metadataDef.name === GeoMetadata.KEY) !== undefined &&
+        return (!!ds &&
+            !!ds.metadata &&
+            ds.metadata?.find((m) => m.metadataDef.name === GeoMetadata.KEY) !== undefined &&
             ds.metadata?.find((m) => m.metadataDef.name === GeoMetadata.NAMESPACE) !== undefined);
     }
 }
@@ -4351,93 +4355,8 @@ const ItemActions = {
     createFailure: createAction('[Item] create failure', props())
 };
 
-var FieldType;
-(function (FieldType) {
-    FieldType["STRING"] = "string";
-    FieldType["KEYWORD"] = "keyword";
-    FieldType["INTEGER"] = "integer";
-    FieldType["DECIMAL"] = "decimal";
-    FieldType["INSTANT"] = "instant";
-    FieldType["LONG"] = "long";
-    FieldType["RAW"] = "raw";
-    FieldType["POINT"] = "Point";
-    FieldType["MULTIPOINT"] = "MultiPoint";
-    FieldType["LINE"] = "LineString";
-    FieldType["MULTILINE"] = "MultiLineString";
-    FieldType["POLYGON"] = "Polygon";
-    FieldType["MULTIPOLYGON"] = "MultiPolygon";
-    FieldType["GEOMETRYCOLLECTION"] = "GeometryCollection";
-    FieldType["OCLASS"] = "mod\u00E8le de donn\u00E9es";
-    FieldType["DATASET"] = "test";
-})(FieldType || (FieldType = {}));
-const GeometricFieldTypes = [
-    FieldType.POINT,
-    FieldType.MULTIPOINT,
-    FieldType.LINE,
-    FieldType.MULTILINE,
-    FieldType.POLYGON,
-    FieldType.MULTIPOLYGON,
-    FieldType.GEOMETRYCOLLECTION
-];
-
 const hiddenFieldText = '*********';
 class ItemUtils {
-    static readGeometry(item, type, attribute) {
-        if (!attribute || !item.attributes[attribute.name]) {
-            // @ts-ignore
-            return null;
-        }
-        let value = item.attributes[attribute.name];
-        if (value.type === 'MULTI') {
-            value = value.values[0];
-        }
-        return new GeoJSON().readGeometry(this.projectGeometry(value.value));
-    }
-    static projectGeometry(geometry) {
-        return {
-            ...geometry,
-            coordinates: typeof geometry.coordinates[0] === 'number'
-                ? fromLonLat(geometry.coordinates)
-                : geometry.coordinates.map((sub) => this.projectGeometry({ type: '', coordinates: sub }).coordinates)
-        };
-    }
-    static readLocations(item, type) {
-        const points = [];
-        Object.entries(item.attributes).forEach(([key, value]) => {
-            if (value.type === 'VALUE') {
-                this.extractGeometries(value, points, type);
-            }
-            else {
-                value.values.forEach((value) => {
-                    this.extractGeometries(value, points, type);
-                });
-            }
-        });
-        return points;
-    }
-    static extractGeometries(value, points, type) {
-        const valueSimple = value.value;
-        if (typeof valueSimple !== 'string' && typeof valueSimple !== 'number') {
-            if (type === 'point' && valueSimple.type === FieldType.POINT) {
-                points.push(valueSimple.coordinates);
-            }
-            if (type === 'point' && valueSimple.type === FieldType.MULTIPOINT) {
-                points.push(...valueSimple.coordinates);
-            }
-            if (type === 'line' && valueSimple.type === FieldType.LINE) {
-                points.push(valueSimple.coordinates);
-            }
-            if (type === 'line' && valueSimple.type === FieldType.MULTILINE) {
-                points.push(...valueSimple.coordinates);
-            }
-            if (type === 'polygon' && valueSimple.type === FieldType.POLYGON) {
-                points.push(valueSimple.coordinates);
-            }
-            if (type === 'polygon' && valueSimple.type === FieldType.MULTIPOLYGON) {
-                points.push(...valueSimple.coordinates);
-            }
-        }
-    }
     static getAttributeValue(item, attribute) {
         if (!attribute) {
             return undefined;
@@ -4758,7 +4677,7 @@ class SearchEffects {
             id: props.id,
             params: this.searchService.getItemsSerializedParams(props.id, quickOrder)
         })), catchError$1((error) => [SearchActions.searchFailure({ error, id: props.id })])))));
-        this.updateAggregatesInWidget$ = createEffect(() => this.actions$.pipe(ofType(SearchActions.getDatasourceItems), filter((props) => props.id !== DEFAULT_NAMED_QUERY_ID && props.id !== EXPLORE_NAMED_QUERY_ID), tap$1((props) => document.dispatchEvent(new CustomEvent('datasourceRefresh', { detail: props.id })))), { dispatch: false });
+        this.updateAggregatesInWidget$ = createEffect(() => this.actions$.pipe(ofType(SearchActions.getDatasourceItems), filter((props) => props.id !== DEFAULT_NAMED_QUERY_ID && props.id !== EXPLORE_NAMED_QUERY_ID), tap$1((props) => window.dispatchEvent(new CustomEvent('datasourceRefresh', { detail: props.id })))), { dispatch: false });
         this.search$ = createEffect(() => this.actions$.pipe(ofType(SearchActions.search), mergeMap((props) => this.searchService.search(props.payload).pipe(map((resultSet) => SearchActions.searchSuccess({ resultSet, id: props.id })), catchError$1((error) => [SearchActions.searchFailure({ error })])))));
         this.searchSuccess$ = createEffect(() => this.actions$.pipe(ofType(SearchActions.searchSuccess), map((action) => DashboardActions.updateResultSet({
             id: action.id ?? DEFAULT_NAMED_QUERY_ID,
@@ -5055,6 +4974,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImpor
                 }]
         }], ctorParameters: function () { return [{ type: PryI18nService }]; } });
 
+var FieldType;
+(function (FieldType) {
+    FieldType["STRING"] = "string";
+    FieldType["KEYWORD"] = "keyword";
+    FieldType["INTEGER"] = "integer";
+    FieldType["DECIMAL"] = "decimal";
+    FieldType["INSTANT"] = "instant";
+    FieldType["LONG"] = "long";
+    FieldType["RAW"] = "raw";
+    FieldType["POINT"] = "Point";
+    FieldType["MULTIPOINT"] = "MultiPoint";
+    FieldType["LINE"] = "LineString";
+    FieldType["MULTILINE"] = "MultiLineString";
+    FieldType["POLYGON"] = "Polygon";
+    FieldType["MULTIPOLYGON"] = "MultiPolygon";
+    FieldType["GEOMETRYCOLLECTION"] = "GeometryCollection";
+    FieldType["OCLASS"] = "mod\u00E8le de donn\u00E9es";
+    FieldType["DATASET"] = "test";
+})(FieldType || (FieldType = {}));
+const GeometricFieldTypes = [
+    FieldType.POINT,
+    FieldType.MULTIPOINT,
+    FieldType.LINE,
+    FieldType.MULTILINE,
+    FieldType.POLYGON,
+    FieldType.MULTIPOLYGON,
+    FieldType.GEOMETRYCOLLECTION
+];
+
 const feature$2 = createFeatureSelector(searchFeatureKey);
 const searchLoading = createSelector(feature$2, (state) => state.searchLoading);
 const SearchSelectors = {
@@ -5227,10 +5175,13 @@ class PryBackendAggregationService extends PryAggregationService {
         if (!!options.ordinate.attribute) {
             params = params.set('valueField', options.ordinate.attribute);
         }
+        if (operation === Operation.DISTINCT) {
+            params = params.set('valueField', options.abscissa.attribute);
+        }
         if (options.groupBy) {
             params = params.set('groupBy', options.groupBy.attribute);
         }
-        if (options.graph.sort) {
+        if (options.graph && options.graph.sort) {
             params = params.set('sort', `${options.graph.sort.direction},${options.graph.sort.attribute === options.abscissa.attribute ? 'KEY' : 'VALUE'}`);
         }
         params = this.searchService.getItemsFilter(targetDatasource, params);
@@ -7022,7 +6973,7 @@ function getDisplayOptions(mode) {
 
 const MIME_TYPE_RESULTSET = 'application/resultset';
 
-const DEFAULT_GAP_PX = 2;
+const DEFAULT_GAP_PX = 15;
 const DEFAULT_COLUMNS_NUMBER = 12;
 const DEFAULT_ROWS_NUMBER = 12;
 const DEFAULT_ROW_HEIGHT_PX = 50;
@@ -9464,7 +9415,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImpor
                 }]
         }], ctorParameters: function () { return [{ type: i1.Store }, { type: PryI18nService }]; } });
 
-const WIDGET_HEADER_HEIGHT = 60;
+const WIDGET_HEADER_HEIGHT = 30;
 class PryWidgetHeaderComponent extends SubscriptionnerDirective {
     set manifest(manifest) {
         this.manifest$.next(manifest);
@@ -9828,11 +9779,11 @@ class PryWidgetHeaderComponent extends SubscriptionnerDirective {
         this.openSub?.unsubscribe();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: PryWidgetHeaderComponent, deps: [{ token: i1.Store }, { token: i2$1.Overlay }, { token: i0.ViewContainerRef }, { token: ToolboxMenuService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: PryWidgetHeaderComponent, selector: "pry-widget-header", inputs: { manifest: "manifest", openData$: "openData$", additionalOptions: "additionalOptions", headerOptions: "headerOptions", displayCount: "displayCount", datasourceIds: "datasourceIds", widgetIndex: "widgetIndex" }, outputs: { manifestModified: "manifestModified" }, viewQueries: [{ propertyName: "template", first: true, predicate: ["template"], descendants: true, read: TemplateRef }, { propertyName: "templateModal", first: true, predicate: ["templateModal"], descendants: true, read: TemplateRef }, { propertyName: "toggle", first: true, predicate: ["toggle"], descendants: true, read: TemplateRef }, { propertyName: "overlayMenu", first: true, predicate: ["overlayMenu"], descendants: true, read: TemplateRef }, { propertyName: "overlayCatalog", first: true, predicate: ["overlayCatalog"], descendants: true, read: TemplateRef }, { propertyName: "overlaySpot", first: true, predicate: ["overlaySpot"], descendants: true, read: TemplateRef }, { propertyName: "togglePanel", first: true, predicate: ["togglePanel"], descendants: true }, { propertyName: "cross", first: true, predicate: ["cross"], descendants: true }, { propertyName: "validate", first: true, predicate: ["validate"], descendants: true }, { propertyName: "validateCatalog", first: true, predicate: ["validateCatalog"], descendants: true }, { propertyName: "cancel", first: true, predicate: ["cancel"], descendants: true }, { propertyName: "crossCatalog", first: true, predicate: ["crossCatalog"], descendants: true }, { propertyName: "inputCatalog", first: true, predicate: ["inputCatalog"], descendants: true }, { propertyName: "menuList", first: true, predicate: ["menuList"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"o-widget__header\">\n  <div class=\"o-widget__header__content\">\n    <h2 class=\"o-widget__header__content__title\" *ngIf=\"(manifest$ | async)?.title; else querySelector\">\n      {{ (manifest$ | async)?.title }}\n    </h2>\n    <ng-template #querySelector>\n      <div *ngFor=\"let ds of usedDatasources$ | async\" class=\"o-widget__header__content__query\">\n        <pry-nq-color-selector [disabled]=\"true\" [datasource]=\"ds\"></pry-nq-color-selector>\n        <ng-container\n          *ngIf=\"ds.id | translateId : { type: 'datasource', output: 'icon', noDefault: true } | async as url\"\n        >\n          <img [height]=\"20\" [src]=\"url\" [width]=\"20\" alt=\"\" class=\"o-widget__header__content__query__icon\" />\n        </ng-container>\n        <h3 class=\"o-widget__header__content__query__name\">{{ ds.name }}</h3>\n        <h3 class=\"o-widget__header__content__query__name\" *ngIf=\"displayCount && !isGeo(ds)\">\n          ({{ [ds.id] | resultSetSize | async }})\n        </h3>\n      </div>\n      <div *ngIf=\"((usedDatasources$ | async) ?? []).length === 0\" class=\"o-widget__header__content__no-data\">\n        <h2 class=\"o-widget__header__content__title\">{{ '@pry.widget.noData' | i18n }}</h2>\n      </div>\n    </ng-template>\n  </div>\n  <div class=\"m-btn-group\" *ngIf=\"!(lockedView$ | async) && displaySettings(headerOptions)\">\n    <button\n      type=\"button\"\n      id=\"dialog_Menu\"\n      aria-controls=\"menu\"\n      [attr.aria-expanded]=\"this.menu\"\n      #togglePanel\n      class=\"a-btn a-btn--more\"\n      (click)=\"menuOpen($event)\"\n    >\n      <pry-icon [height]=\"25\" [width]=\"25\" iconSvg=\"more_horiz\"></pry-icon>\n      <span class=\"u-visually-hidden\">{{ '@pry.action.openMenuWidget' | i18n }}</span>\n    </button>\n  </div>\n</div>\n\n<ng-template #overlayMenu>\n  <div class=\"m-context-menu\">\n    <ul\n      class=\"m-context-menu__list\"\n      #menuList\n      id=\"menu\"\n      role=\"menu\"\n      aria-modal=\"true\"\n      aria-labelledby=\"dialog_Menu\"\n      (keydown.arrowDown)=\"onArrowDown()\"\n      (keydown.arrowUp)=\"onArrowUp()\"\n      (keydown.escape)=\"menuOpen()\"\n    >\n      <li\n        class=\"m-context-menu__list__item\"\n        role=\"none\"\n        *ngIf=\"(manifest$ | async)?.datasource && displayOption(headerOptions, 'datasourceSelection')\"\n      >\n        <button\n          type=\"button\"\n          role=\"menuitem\"\n          tabindex=\"-1\"\n          id=\"toggleActions\"\n          (click)=\"toggleDatasourceSelection()\"\n          *pryAccess=\"{ module: 'dashboard', page: 'widget', action: 'select_named_query' }\"\n          class=\"a-btn a-tooltip\"\n          [attr.data-tooltip]=\"'@pry.widget.tooltip.readSearch' | i18n\"\n          data-tooltip-position=\"bottom\"\n        >\n          <pry-icon [height]=\"17\" [width]=\"17\" iconSvg=\"stack-fill\"></pry-icon>\n          <span>{{ '@pry.widget.tooltip.readSearch' | i18n }}</span>\n        </button>\n      </li>\n      <li class=\"m-context-menu__list__item\" role=\"none\" *ngIf=\"displayOption(headerOptions, 'parameters')\">\n        <ng-content></ng-content>\n      </li>\n      <ng-container *ngIf=\"displayOption(headerOptions, 'window')\">\n        <li class=\"m-context-menu__list__item\" role=\"none\" *ngFor=\"let targetIndex of targetIndexes$ | async\">\n          <button\n            type=\"button\"\n            (click)=\"moveInNewWindow(_widgetIndex, targetIndex)\"\n            class=\"a-btn\"\n            role=\"menuitem\"\n            tabindex=\"-1\"\n          >\n            <pry-icon [height]=\"17\" [width]=\"17\" iconSvg=\"launch\"></pry-icon>\n            {{\n              (targetIndex !== -1 ? '@pry.widget.target.existing' : '@pry.widget.target.new')\n                | i18n : { targetIndex: this.targetIndex + 1 }\n            }}\n          </button>\n        </li>\n      </ng-container>\n      <li class=\"m-context-menu__list__item\" role=\"none\" *ngIf=\"hasGrid && displayOption(headerOptions, 'changeSpot')\">\n        <button\n          type=\"button\"\n          role=\"menuitem\"\n          (click)=\"toggleChangeSpot()\"\n          class=\"a-btn a-tooltip\"\n          tabindex=\"-1\"\n          [attr.data-tooltip]=\"'@pry.widget.tooltip.changeSpot' | i18n\"\n        >\n          <pry-icon [height]=\"17\" [width]=\"17\" iconSvg=\"move\"></pry-icon>\n          <span>{{ '@pry.widget.tooltip.changeSpot' | i18n }}</span>\n        </button>\n      </li>\n      <li class=\"m-context-menu__list__item\" role=\"none\" *ngIf=\"displayOption(headerOptions, 'maximize')\">\n        <button\n          type=\"button\"\n          role=\"menuitem\"\n          tabindex=\"-1\"\n          (click)=\"maximize(_widgetIndex)\"\n          class=\"a-btn\"\n          (keydown.escape)=\"menuOpen()\"\n        >\n          <pry-icon [height]=\"17\" [width]=\"17\" iconSvg=\"fullscreen\"></pry-icon>\n          {{ '@pry.widget.target.maximize' | i18n }}\n        </button>\n      </li>\n      <li class=\"m-context-menu__list__item\" role=\"none\" *ngIf=\"displayOption(headerOptions, 'addToCatalog')\">\n        <button\n          type=\"button\"\n          role=\"menuitem\"\n          tabindex=\"-1\"\n          (click)=\"toggleCatalog()\"\n          class=\"a-btn a-tooltip\"\n          [attr.data-tooltip]=\"'@pry.widget.tooltip.catalogWidget' | i18n\"\n        >\n          <pry-icon [height]=\"17\" [width]=\"17\" iconSvg=\"library_add\"></pry-icon>\n          <span>{{ '@pry.widget.tooltip.catalogWidget' | i18n }}</span>\n        </button>\n      </li>\n      <li class=\"m-context-menu__list__item\" role=\"none\" *ngIf=\"displayOption(headerOptions, 'delete')\">\n        <button\n          type=\"button\"\n          role=\"menuitem\"\n          tabindex=\"-1\"\n          (click)=\"toggleRemoveConfirm($event)\"\n          class=\"a-btn a-tooltip\"\n          [attr.data-tooltip]=\"'@pry.widget.tooltip.deleteWidget' | i18n\"\n          (keydown.tab)=\"menuOpen()\"\n        >\n          <pry-icon [height]=\"17\" [width]=\"17\" iconSvg=\"delete\"></pry-icon>\n          <span>{{ '@pry.widget.tooltip.deleteWidget' | i18n }}</span>\n        </button>\n      </li>\n      <li class=\"m-context-menu__list__item\" role=\"none\" *ngFor=\"let option of additionalOptions\">\n        <button\n          type=\"button\"\n          class=\"a-btn\"\n          role=\"menuitem\"\n          tabindex=\"-1\"\n          (click)=\"executeAction(option)\"\n          [disabled]=\"isActionDisabled(option)\"\n        >\n          <pry-icon [height]=\"17\" [width]=\"17\" [iconSvg]=\"option.icon\"></pry-icon>\n          {{ option.label | i18n }}\n        </button>\n      </li>\n    </ul>\n  </div>\n</ng-template>\n\n<ng-template #templateModal>\n  <div\n    class=\"o-modal\"\n    (keydown.escape)=\"cancelRemoveConfirm()\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    aria-labelledby=\"dialog confirm delete presentation\"\n  >\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\" #cross (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\" (keydown.tab)=\"focusCrossElement()\">\n        {{ '@pry.toolbox.manifest.validate' | i18n }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #template>\n  <pry-datasource-selector\n    (cancel)=\"toggleDatasourceSelection()\"\n    (validated)=\"emitManifest()\"\n    (nextTab)=\"focusInputCatalog()\"\n    (previousTab)=\"focusValidation()\"\n    (datasourcesChanged)=\"datasourcesChanged($event)\"\n    [datasourceIds]=\"(selectedDataSourceIds$ | async) ?? []\"\n  ></pry-datasource-selector>\n</ng-template>\n\n<ng-template #overlayCatalog>\n  <div\n    class=\"o-modal\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    aria-labelledby=\"dialog_Catalog\"\n    (keydown.escape)=\"toggleCatalog()\"\n  >\n    <div class=\"o-modal__top\">\n      <div class=\"o-modal__top__title\">\n        <h2 class=\"a-h2\">\n          {{ '@pry.widget.defineCatalog' | i18n }}\n        </h2>\n      </div>\n      <div class=\"o-modal__top__close\">\n        <button\n          class=\"a-btn a-btn--icon-only\"\n          (keydown.shift.tab)=\"focusValidation()\"\n          #crossCatalog\n          (click)=\"toggleCatalog()\"\n        >\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-form-label-field\">\n      <label class=\"a-label\" for=\"name\">{{ '@pry.toolbox.catalog.label' | i18n }}</label>\n      <input [(ngModel)]=\"catalogInfo.name\" id=\"name\" type=\"text\" class=\"a-form-field\" required />\n    </div>\n    <div class=\"m-form-label-field\">\n      <label class=\"a-label\" for=\"description\">{{ '@pry.toolbox.catalog.description' | i18n }}</label>\n      <input [(ngModel)]=\"catalogInfo.description\" id=\"description\" type=\"text\" class=\"a-form-field\" required />\n    </div>\n    <div class=\"m-form-label-field\">\n      <pry-select-image\n        [iconUrl]=\"catalogInfo.image\"\n        (changed)=\"catalogInfo.image = $event\"\n        [mode]=\"type\"\n      ></pry-select-image>\n    </div>\n    <div class=\"m-btn-group\">\n      <button\n        type=\"button\"\n        (click)=\"toggleCatalog()\"\n        #cancel\n        (keydown.tab)=\"disableValidation()\"\n        class=\"a-btn a-btn--secondary\"\n      >\n        {{ '@pry.toolbox.manifest.close' | i18n }}\n      </button>\n      <button\n        type=\"submit\"\n        #validateCatalog\n        (click)=\"confirmCatalog()\"\n        [disabled]=\"!toolboxMenuService.isValidForCatalog(catalogInfo.name)\"\n        class=\"a-btn a-btn--primary\"\n        (keydown.tab)=\"focusCrossElement()\"\n      >\n        {{ '@pry.toolbox.manifest.validate' | i18n }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #overlaySpot>\n  <div class=\"o-modal\">\n    <div class=\"o-modal__top\">\n      <div class=\"o-modal__top__title\">\n        <h2 class=\"a-h2\">\n          {{ '@pry.widget.tooltip.changeSpot' | i18n }}\n        </h2>\n      </div>\n      <div class=\"o-modal__top__close\">\n        <button class=\"a-btn a-btn--icon-only\" (click)=\"toggleChangeSpot()\">\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    <ng-container *ngFor=\"let place of places; let i = index\">\n      <ng-container *ngIf=\"currentPlacementIndex !== i\">\n        <button type=\"button\" class=\"a-btn\" (click)=\"moveToPlace(place)\">\n          <span>{{ '@pry.widget.tooltip.spotName' | i18n : { place: i + 1 } }}</span>\n        </button>\n      </ng-container>\n    </ng-container>\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: "directive", type: i3$1.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: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "component", type: PryNqColorSelectorComponent, selector: "pry-nq-color-selector", inputs: ["disabled", "datasource"], outputs: ["colorChanged"] }, { kind: "directive", type: PryAccessDirective, selector: "[pryAccess]", inputs: ["pryAccess"] }, { kind: "component", type: PrySelectImageComponent, selector: "pry-select-image", inputs: ["iconUrl", "size", "mode"], outputs: ["toggled", "changed"] }, { kind: "component", type: DatasourceSelectorComponent, selector: "pry-datasource-selector", inputs: ["manifest", "datasourceIds"], outputs: ["cancel", "validated", "previousTab", "nextTab", "datasourcesChanged"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: TranslateIdPipe, name: "translateId" }, { kind: "pipe", type: I18nPipe, name: "i18n" }, { kind: "pipe", type: ResultSetSizePipe, name: "resultSetSize" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: PryWidgetHeaderComponent, selector: "pry-widget-header", inputs: { manifest: "manifest", openData$: "openData$", additionalOptions: "additionalOptions", headerOptions: "headerOptions", displayCount: "displayCount", datasourceIds: "datasourceIds", widgetIndex: "widgetIndex" }, outputs: { manifestModified: "manifestModified" }, viewQueries: [{ propertyName: "template", first: true, predicate: ["template"], descendants: true, read: TemplateRef }, { propertyName: "templateModal", first: true, predicate: ["templateModal"], descendants: true, read: TemplateRef }, { propertyName: "toggle", first: true, predicate: ["toggle"], descendants: true, read: TemplateRef }, { propertyName: "overlayMenu", first: true, predicate: ["overlayMenu"], descendants: true, read: TemplateRef }, { propertyName: "overlayCatalog", first: true, predicate: ["overlayCatalog"], descendants: true, read: TemplateRef }, { propertyName: "overlaySpot", first: true, predicate: ["overlaySpot"], descendants: true, read: TemplateRef }, { propertyName: "togglePanel", first: true, predicate: ["togglePanel"], descendants: true }, { propertyName: "cross", first: true, predicate: ["cross"], descendants: true }, { propertyName: "validate", first: true, predicate: ["validate"], descendants: true }, { propertyName: "validateCatalog", first: true, predicate: ["validateCatalog"], descendants: true }, { propertyName: "cancel", first: true, predicate: ["cancel"], descendants: true }, { propertyName: "crossCatalog", first: true, predicate: ["crossCatalog"], descendants: true }, { propertyName: "inputCatalog", first: true, predicate: ["inputCatalog"], descendants: true }, { propertyName: "menuList", first: true, predicate: ["menuList"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"o-widget__header\">\n  <div class=\"o-widget__header__content\">\n    <h2 class=\"o-widget__header__content__title\" *ngIf=\"(manifest$ | async)?.title; else querySelector\">\n      {{ (manifest$ | async)?.title }}\n    </h2>\n    <ng-template #querySelector>\n      <div *ngFor=\"let ds of usedDatasources$ | async\" class=\"o-widget__header__content__query\">\n        <ng-container\n          *ngIf=\"ds.id | translateId : { type: 'datasource', output: 'icon', noDefault: true } | async as url\"\n        >\n          <img [height]=\"20\" [src]=\"url\" [width]=\"20\" alt=\"\" class=\"o-widget__header__content__query__icon\" />\n        </ng-container>\n        <h3 class=\"o-widget__header__content__query__name\">{{ ds.name }}</h3>\n        <h3 class=\"o-widget__header__content__query__name\" *ngIf=\"displayCount && !isGeo(ds)\">\n          ({{ [ds.id] | resultSetSize | async }})\n        </h3>\n      </div>\n      <div *ngIf=\"((usedDatasources$ | async) ?? []).length === 0\" class=\"o-widget__header__content__no-data\">\n        <h2 class=\"o-widget__header__content__title\">{{ '@pry.widget.noData' | i18n }}</h2>\n      </div>\n    </ng-template>\n  </div>\n  <div class=\"m-btn-group\" *ngIf=\"!(lockedView$ | async) && displaySettings(headerOptions)\">\n    <button\n      type=\"button\"\n      id=\"dialog_Menu\"\n      aria-controls=\"menu\"\n      [attr.aria-expanded]=\"this.menu\"\n      #togglePanel\n      class=\"a-btn a-btn--more\"\n      (click)=\"menuOpen($event)\"\n    >\n      <pry-icon [height]=\"25\" [width]=\"25\" iconSvg=\"more_horiz\"></pry-icon>\n      <span class=\"u-visually-hidden\">{{ '@pry.action.openMenuWidget' | i18n }}</span>\n    </button>\n  </div>\n</div>\n\n<ng-template #overlayMenu>\n  <div class=\"m-context-menu\">\n    <ul\n      class=\"m-context-menu__list\"\n      #menuList\n      id=\"menu\"\n      role=\"menu\"\n      aria-modal=\"true\"\n      aria-labelledby=\"dialog_Menu\"\n      (keydown.arrowDown)=\"onArrowDown()\"\n      (keydown.arrowUp)=\"onArrowUp()\"\n      (keydown.escape)=\"menuOpen()\"\n    >\n      <li\n        class=\"m-context-menu__list__item\"\n        role=\"none\"\n        *ngIf=\"(manifest$ | async)?.datasource && displayOption(headerOptions, 'datasourceSelection')\"\n      >\n        <button\n          type=\"button\"\n          role=\"menuitem\"\n          tabindex=\"-1\"\n          id=\"toggleActions\"\n          (click)=\"toggleDatasourceSelection()\"\n          *pryAccess=\"{ module: 'dashboard', page: 'widget', action: 'select_named_query' }\"\n          class=\"a-btn a-tooltip\"\n          [attr.data-tooltip]=\"'@pry.widget.tooltip.readSearch' | i18n\"\n          data-tooltip-position=\"bottom\"\n        >\n          <pry-icon [height]=\"17\" [width]=\"17\" iconSvg=\"stack-fill\"></pry-icon>\n          <span>{{ '@pry.widget.tooltip.readSearch' | i18n }}</span>\n        </button>\n      </li>\n      <li class=\"m-context-menu__list__item\" role=\"none\" *ngIf=\"displayOption(headerOptions, 'parameters')\">\n        <ng-content></ng-content>\n      </li>\n      <ng-container *ngIf=\"displayOption(headerOptions, 'window')\">\n        <li class=\"m-context-menu__list__item\" role=\"none\" *ngFor=\"let targetIndex of targetIndexes$ | async\">\n          <button\n            type=\"button\"\n            (click)=\"moveInNewWindow(_widgetIndex, targetIndex)\"\n            class=\"a-btn\"\n            role=\"menuitem\"\n            tabindex=\"-1\"\n          >\n            <pry-icon [height]=\"17\" [width]=\"17\" iconSvg=\"launch\"></pry-icon>\n            {{\n              (targetIndex !== -1 ? '@pry.widget.target.existing' : '@pry.widget.target.new')\n                | i18n : { targetIndex: this.targetIndex + 1 }\n            }}\n          </button>\n        </li>\n      </ng-container>\n      <li class=\"m-context-menu__list__item\" role=\"none\" *ngIf=\"hasGrid && displayOption(headerOptions, 'changeSpot')\">\n        <button\n          type=\"button\"\n          role=\"menuitem\"\n          (click)=\"toggleChangeSpot()\"\n          class=\"a-btn a-tooltip\"\n          tabindex=\"-1\"\n          [attr.data-tooltip]=\"'@pry.widget.tooltip.changeSpot' | i18n\"\n        >\n          <pry-icon [height]=\"17\" [width]=\"17\" iconSvg=\"move\"></pry-icon>\n          <span>{{ '@pry.widget.tooltip.changeSpot' | i18n }}</span>\n        </button>\n      </li>\n      <li class=\"m-context-menu__list__item\" role=\"none\" *ngIf=\"displayOption(headerOptions, 'maximize')\">\n        <button\n          type=\"button\"\n          role=\"menuitem\"\n          tabindex=\"-1\"\n          (click)=\"maximize(_widgetIndex)\"\n          class=\"a-btn\"\n          (keydown.escape)=\"menuOpen()\"\n        >\n          <pry-icon [height]=\"17\" [width]=\"17\" iconSvg=\"fullscreen\"></pry-icon>\n          {{ '@pry.widget.target.maximize' | i18n }}\n        </button>\n      </li>\n      <li class=\"m-context-menu__list__item\" role=\"none\" *ngIf=\"displayOption(headerOptions, 'addToCatalog')\">\n        <button\n          type=\"button\"\n          role=\"menuitem\"\n          tabindex=\"-1\"\n          (click)=\"toggleCatalog()\"\n          class=\"a-btn a-tooltip\"\n          [attr.data-tooltip]=\"'@pry.widget.tooltip.catalogWidget' | i18n\"\n        >\n          <pry-icon [height]=\"17\" [width]=\"17\" iconSvg=\"library_add\"></pry-icon>\n          <span>{{ '@pry.widget.tooltip.catalogWidget' | i18n }}</span>\n        </button>\n      </li>\n      <li class=\"m-context-menu__list__item\" role=\"none\" *ngIf=\"displayOption(headerOptions, 'delete')\">\n        <button\n          type=\"button\"\n          role=\"menuitem\"\n          tabindex=\"-1\"\n          (click)=\"toggleRemoveConfirm($event)\"\n          class=\"a-btn a-tooltip\"\n          [attr.data-tooltip]=\"'@pry.widget.tooltip.deleteWidget' | i18n\"\n          (keydown.tab)=\"menuOpen()\"\n        >\n          <pry-icon [height]=\"17\" [width]=\"17\" iconSvg=\"delete\"></pry-icon>\n          <span>{{ '@pry.widget.tooltip.deleteWidget' | i18n }}</span>\n        </button>\n      </li>\n      <li class=\"m-context-menu__list__item\" role=\"none\" *ngFor=\"let option of additionalOptions\">\n        <button\n          type=\"button\"\n          class=\"a-btn\"\n          role=\"menuitem\"\n          tabindex=\"-1\"\n          (click)=\"executeAction(option)\"\n          [disabled]=\"isActionDisabled(option)\"\n        >\n          <pry-icon [height]=\"17\" [width]=\"17\" [iconSvg]=\"option.icon\"></pry-icon>\n          {{ option.label | i18n }}\n        </button>\n      </li>\n    </ul>\n  </div>\n</ng-template>\n\n<ng-template #templateModal>\n  <div\n    class=\"o-modal\"\n    (keydown.escape)=\"cancelRemoveConfirm()\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    aria-labelledby=\"dialog confirm delete presentation\"\n  >\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\" #cross (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\" (keydown.tab)=\"focusCrossElement()\">\n        {{ '@pry.toolbox.manifest.validate' | i18n }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #template>\n  <pry-datasource-selector\n    (cancel)=\"toggleDatasourceSelection()\"\n    (validated)=\"emitManifest()\"\n    (nextTab)=\"focusInputCatalog()\"\n    (previousTab)=\"focusValidation()\"\n    (datasourcesChanged)=\"datasourcesChanged($event)\"\n    [datasourceIds]=\"(selectedDataSourceIds$ | async) ?? []\"\n  ></pry-datasource-selector>\n</ng-template>\n\n<ng-template #overlayCatalog>\n  <div\n    class=\"o-modal\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    aria-labelledby=\"dialog_Catalog\"\n    (keydown.escape)=\"toggleCatalog()\"\n  >\n    <div class=\"o-modal__top\">\n      <div class=\"o-modal__top__title\">\n        <h2 class=\"a-h2\">\n          {{ '@pry.widget.defineCatalog' | i18n }}\n        </h2>\n      </div>\n      <div class=\"o-modal__top__close\">\n        <button\n          class=\"a-btn a-btn--icon-only\"\n          (keydown.shift.tab)=\"focusValidation()\"\n          #crossCatalog\n          (click)=\"toggleCatalog()\"\n        >\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-form-label-field\">\n      <label class=\"a-label\" for=\"name\">{{ '@pry.toolbox.catalog.label' | i18n }}</label>\n      <input [(ngModel)]=\"catalogInfo.name\" id=\"name\" type=\"text\" class=\"a-form-field\" required />\n    </div>\n    <div class=\"m-form-label-field\">\n      <label class=\"a-label\" for=\"description\">{{ '@pry.toolbox.catalog.description' | i18n }}</label>\n      <input [(ngModel)]=\"catalogInfo.description\" id=\"description\" type=\"text\" class=\"a-form-field\" required />\n    </div>\n    <div class=\"m-form-label-field\">\n      <pry-select-image\n        [iconUrl]=\"catalogInfo.image\"\n        (changed)=\"catalogInfo.image = $event\"\n        [mode]=\"type\"\n      ></pry-select-image>\n    </div>\n    <div class=\"m-btn-group\">\n      <button\n        type=\"button\"\n        (click)=\"toggleCatalog()\"\n        #cancel\n        (keydown.tab)=\"disableValidation()\"\n        class=\"a-btn a-btn--secondary\"\n      >\n        {{ '@pry.toolbox.manifest.close' | i18n }}\n      </button>\n      <button\n        type=\"submit\"\n        #validateCatalog\n        (click)=\"confirmCatalog()\"\n        [disabled]=\"!toolboxMenuService.isValidForCatalog(catalogInfo.name)\"\n        class=\"a-btn a-btn--primary\"\n        (keydown.tab)=\"focusCrossElement()\"\n      >\n        {{ '@pry.toolbox.manifest.validate' | i18n }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #overlaySpot>\n  <div class=\"o-modal\">\n    <div class=\"o-modal__top\">\n      <div class=\"o-modal__top__title\">\n        <h2 class=\"a-h2\">\n          {{ '@pry.widget.tooltip.changeSpot' | i18n }}\n        </h2>\n      </div>\n      <div class=\"o-modal__top__close\">\n        <button class=\"a-btn a-btn--icon-only\" (click)=\"toggleChangeSpot()\">\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    <ng-container *ngFor=\"let place of places; let i = index\">\n      <ng-container *ngIf=\"currentPlacementIndex !== i\">\n        <button type=\"button\" class=\"a-btn\" (click)=\"moveToPlace(place)\">\n          <span>{{ '@pry.widget.tooltip.spotName' | i18n : { place: i + 1 } }}</span>\n        </button>\n      </ng-container>\n    </ng-container>\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: "directive", type: i3$1.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: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "directive", type: PryAccessDirective, selector: "[pryAccess]", inputs: ["pryAccess"] }, { kind: "component", type: PrySelectImageComponent, selector: "pry-select-image", inputs: ["iconUrl", "size", "mode"], outputs: ["toggled", "changed"] }, { kind: "component", type: DatasourceSelectorComponent, selector: "pry-datasource-selector", inputs: ["manifest", "datasourceIds"], outputs: ["cancel", "validated", "previousTab", "nextTab", "datasourcesChanged"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: TranslateIdPipe, name: "translateId" }, { kind: "pipe", type: I18nPipe, name: "i18n" }, { kind: "pipe", type: ResultSetSizePipe, name: "resultSetSize" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: PryWidgetHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-widget-header', template: "<div class=\"o-widget__header\">\n  <div class=\"o-widget__header__content\">\n    <h2 class=\"o-widget__header__content__title\" *ngIf=\"(manifest$ | async)?.title; else querySelector\">\n      {{ (manifest$ | async)?.title }}\n    </h2>\n    <ng-template #querySelector>\n      <div *ngFor=\"let ds of usedDatasources$ | async\" class=\"o-widget__header__content__query\">\n        <pry-nq-color-selector [disabled]=\"true\" [datasource]=\"ds\"></pry-nq-color-selector>\n        <ng-container\n          *ngIf=\"ds.id | translateId : { type: 'datasource', output: 'icon', noDefault: true } | async as url\"\n        >\n          <img [height]=\"20\" [src]=\"url\" [width]=\"20\" alt=\"\" class=\"o-widget__header__content__query__icon\" />\n        </ng-container>\n        <h3 class=\"o-widget__header__content__query__name\">{{ ds.name }}</h3>\n        <h3 class=\"o-widget__header__content__query__name\" *ngIf=\"displayCount && !isGeo(ds)\">\n          ({{ [ds.id] | resultSetSize | async }})\n        </h3>\n      </div>\n      <div *ngIf=\"((usedDatasources$ | async) ?? []).length === 0\" class=\"o-widget__header__content__no-data\">\n        <h2 class=\"o-widget__header__content__title\">{{ '@pry.widget.noData' | i18n }}</h2>\n      </div>\n    </ng-template>\n  </div>\n  <div class=\"m-btn-group\" *ngIf=\"!(lockedView$ | async) && displaySettings(headerOptions)\">\n    <button\n      type=\"button\"\n      id=\"dialog_Menu\"\n      aria-controls=\"menu\"\n      [attr.aria-expanded]=\"this.menu\"\n      #togglePanel\n      class=\"a-btn a-btn--more\"\n      (click)=\"menuOpen($event)\"\n    >\n      <pry-icon [height]=\"25\" [width]=\"25\" iconSvg=\"more_horiz\"></pry-icon>\n      <span class=\"u-visually-hidden\">{{ '@pry.action.openMenuWidget' | i18n }}</span>\n    </button>\n  </div>\n</div>\n\n<ng-template #overlayMenu>\n  <div class=\"m-context-menu\">\n    <ul\n      class=\"m-context-menu__list\"\n      #menuList\n      id=\"menu\"\n      role=\"menu\"\n      aria-modal=\"true\"\n      aria-labelledby=\"dialog_Menu\"\n      (keydown.arrowDown)=\"onArrowDown()\"\n      (keydown.arrowUp)=\"onArrowUp()\"\n      (keydown.escape)=\"menuOpen()\"\n    >\n      <li\n        class=\"m-context-menu__list__item\"\n        role=\"none\"\n        *ngIf=\"(manifest$ | async)?.datasource && displayOption(headerOptions, 'datasourceSelection')\"\n      >\n        <button\n          type=\"button\"\n          role=\"menuitem\"\n          tabindex=\"-1\"\n          id=\"toggleActions\"\n          (click)=\"toggleDatasourceSelection()\"\n          *pryAccess=\"{ module: 'dashboard', page: 'widget', action: 'select_named_query' }\"\n          class=\"a-btn a-tooltip\"\n          [attr.data-tooltip]=\"'@pry.widget.tooltip.readSearch' | i18n\"\n          data-tooltip-position=\"bottom\"\n        >\n          <pry-icon [height]=\"17\" [width]=\"17\" iconSvg=\"stack-fill\"></pry-icon>\n          <span>{{ '@pry.widget.tooltip.readSearch' | i18n }}</span>\n        </button>\n      </li>\n      <li class=\"m-context-menu__list__item\" role=\"none\" *ngIf=\"displayOption(headerOptions, 'parameters')\">\n        <ng-content></ng-content>\n      </li>\n      <ng-container *ngIf=\"displayOption(headerOptions, 'window')\">\n        <li class=\"m-context-menu__list__item\" role=\"none\" *ngFor=\"let targetIndex of targetIndexes$ | async\">\n          <button\n            type=\"button\"\n            (click)=\"moveInNewWindow(_widgetIndex, targetIndex)\"\n            class=\"a-btn\"\n            role=\"menuitem\"\n            tabindex=\"-1\"\n          >\n            <pry-icon [height]=\"17\" [width]=\"17\" iconSvg=\"launch\"></pry-icon>\n            {{\n              (targetIndex !== -1 ? '@pry.widget.target.existing' : '@pry.widget.target.new')\n                | i18n : { targetIndex: this.targetIndex + 1 }\n            }}\n          </button>\n        </li>\n      </ng-container>\n      <li class=\"m-context-menu__list__item\" role=\"none\" *ngIf=\"hasGrid && displayOption(headerOptions, 'changeSpot')\">\n        <button\n          type=\"button\"\n          role=\"menuitem\"\n          (click)=\"toggleChangeSpot()\"\n          class=\"a-btn a-tooltip\"\n          tabindex=\"-1\"\n          [attr.data-tooltip]=\"'@pry.widget.tooltip.changeSpot' | i18n\"\n        >\n          <pry-icon [height]=\"17\" [width]=\"17\" iconSvg=\"move\"></pry-icon>\n          <span>{{ '@pry.widget.tooltip.changeSpot' | i18n }}</span>\n        </button>\n      </li>\n      <li class=\"m-context-menu__list__item\" role=\"none\" *ngIf=\"displayOption(headerOptions, 'maximize')\">\n        <button\n          type=\"button\"\n          role=\"menuitem\"\n          tabindex=\"-1\"\n          (click)=\"maximize(_widgetIndex)\"\n          class=\"a-btn\"\n          (keydown.escape)=\"menuOpen()\"\n        >\n          <pry-icon [height]=\"17\" [width]=\"17\" iconSvg=\"fullscreen\"></pry-icon>\n          {{ '@pry.widget.target.maximize' | i18n }}\n        </button>\n      </li>\n      <li class=\"m-context-menu__list__item\" role=\"none\" *ngIf=\"displayOption(headerOptions, 'addToCatalog')\">\n        <button\n          type=\"button\"\n          role=\"menuitem\"\n          tabindex=\"-1\"\n          (click)=\"toggleCatalog()\"\n          class=\"a-btn a-tooltip\"\n          [attr.data-tooltip]=\"'@pry.widget.tooltip.catalogWidget' | i18n\"\n        >\n          <pry-icon [height]=\"17\" [width]=\"17\" iconSvg=\"library_add\"></pry-icon>\n          <span>{{ '@pry.widget.tooltip.catalogWidget' | i18n }}</span>\n        </button>\n      </li>\n      <li class=\"m-context-menu__list__item\" role=\"none\" *ngIf=\"displayOption(headerOptions, 'delete')\">\n        <button\n          type=\"button\"\n          role=\"menuitem\"\n          tabindex=\"-1\"\n          (click)=\"toggleRemoveConfirm($event)\"\n          class=\"a-btn a-tooltip\"\n          [attr.data-tooltip]=\"'@pry.widget.tooltip.deleteWidget' | i18n\"\n          (keydown.tab)=\"menuOpen()\"\n        >\n          <pry-icon [height]=\"17\" [width]=\"17\" iconSvg=\"delete\"></pry-icon>\n          <span>{{ '@pry.widget.tooltip.deleteWidget' | i18n }}</span>\n        </button>\n      </li>\n      <li class=\"m-context-menu__list__item\" role=\"none\" *ngFor=\"let option of additionalOptions\">\n        <button\n          type=\"button\"\n          class=\"a-btn\"\n          role=\"menuitem\"\n          tabindex=\"-1\"\n          (click)=\"executeAction(option)\"\n          [disabled]=\"isActionDisabled(option)\"\n        >\n          <pry-icon [height]=\"17\" [width]=\"17\" [iconSvg]=\"option.icon\"></pry-icon>\n          {{ option.label | i18n }}\n        </button>\n      </li>\n    </ul>\n  </div>\n</ng-template>\n\n<ng-template #templateModal>\n  <div\n    class=\"o-modal\"\n    (keydown.escape)=\"cancelRemoveConfirm()\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    aria-labelledby=\"dialog confirm delete presentation\"\n  >\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\" #cross (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\" (keydown.tab)=\"focusCrossElement()\">\n        {{ '@pry.toolbox.manifest.validate' | i18n }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #template>\n  <pry-datasource-selector\n    (cancel)=\"toggleDatasourceSelection()\"\n    (validated)=\"emitManifest()\"\n    (nextTab)=\"focusInputCatalog()\"\n    (previousTab)=\"focusValidation()\"\n    (datasourcesChanged)=\"datasourcesChanged($event)\"\n    [datasourceIds]=\"(selectedDataSourceIds$ | async) ?? []\"\n  ></pry-datasource-selector>\n</ng-template>\n\n<ng-template #overlayCatalog>\n  <div\n    class=\"o-modal\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    aria-labelledby=\"dialog_Catalog\"\n    (keydown.escape)=\"toggleCatalog()\"\n  >\n    <div class=\"o-modal__top\">\n      <div class=\"o-modal__top__title\">\n        <h2 class=\"a-h2\">\n          {{ '@pry.widget.defineCatalog' | i18n }}\n        </h2>\n      </div>\n      <div class=\"o-modal__top__close\">\n        <button\n          class=\"a-btn a-btn--icon-only\"\n          (keydown.shift.tab)=\"focusValidation()\"\n          #crossCatalog\n          (click)=\"toggleCatalog()\"\n        >\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-form-label-field\">\n      <label class=\"a-label\" for=\"name\">{{ '@pry.toolbox.catalog.label' | i18n }}</label>\n      <input [(ngModel)]=\"catalogInfo.name\" id=\"name\" type=\"text\" class=\"a-form-field\" required />\n    </div>\n    <div class=\"m-form-label-field\">\n      <label class=\"a-label\" for=\"description\">{{ '@pry.toolbox.catalog.description' | i18n }}</label>\n      <input [(ngModel)]=\"catalogInfo.description\" id=\"description\" type=\"text\" class=\"a-form-field\" required />\n    </div>\n    <div class=\"m-form-label-field\">\n      <pry-select-image\n        [iconUrl]=\"catalogInfo.image\"\n        (changed)=\"catalogInfo.image = $event\"\n        [mode]=\"type\"\n      ></pry-select-image>\n    </div>\n    <div class=\"m-btn-group\">\n      <button\n        type=\"button\"\n        (click)=\"toggleCatalog()\"\n        #cancel\n        (keydown.tab)=\"disableValidation()\"\n        class=\"a-btn a-btn--secondary\"\n      >\n        {{ '@pry.toolbox.manifest.close' | i18n }}\n      </button>\n      <button\n        type=\"submit\"\n        #validateCatalog\n        (click)=\"confirmCatalog()\"\n        [disabled]=\"!toolboxMenuService.isValidForCatalog(catalogInfo.name)\"\n        class=\"a-btn a-btn--primary\"\n        (keydown.tab)=\"focusCrossElement()\"\n      >\n        {{ '@pry.toolbox.manifest.validate' | i18n }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #overlaySpot>\n  <div class=\"o-modal\">\n    <div class=\"o-modal__top\">\n      <div class=\"o-modal__top__title\">\n        <h2 class=\"a-h2\">\n          {{ '@pry.widget.tooltip.changeSpot' | i18n }}\n        </h2>\n      </div>\n      <div class=\"o-modal__top__close\">\n        <button class=\"a-btn a-btn--icon-only\" (click)=\"toggleChangeSpot()\">\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    <ng-container *ngFor=\"let place of places; let i = index\">\n      <ng-container *ngIf=\"currentPlacementIndex !== i\">\n        <button type=\"button\" class=\"a-btn\" (click)=\"moveToPlace(place)\">\n          <span>{{ '@pry.widget.tooltip.spotName' | i18n : { place: i + 1 } }}</span>\n        </button>\n      </ng-container>\n    </ng-container>\n  </div>\n</ng-template>\n" }]
+            args: [{ selector: 'pry-widget-header', template: "<div class=\"o-widget__header\">\n  <div class=\"o-widget__header__content\">\n    <h2 class=\"o-widget__header__content__title\" *ngIf=\"(manifest$ | async)?.title; else querySelector\">\n      {{ (manifest$ | async)?.title }}\n    </h2>\n    <ng-template #querySelector>\n      <div *ngFor=\"let ds of usedDatasources$ | async\" class=\"o-widget__header__content__query\">\n        <ng-container\n          *ngIf=\"ds.id | translateId : { type: 'datasource', output: 'icon', noDefault: true } | async as url\"\n        >\n          <img [height]=\"20\" [src]=\"url\" [width]=\"20\" alt=\"\" class=\"o-widget__header__content__query__icon\" />\n        </ng-container>\n        <h3 class=\"o-widget__header__content__query__name\">{{ ds.name }}</h3>\n        <h3 class=\"o-widget__header__content__query__name\" *ngIf=\"displayCount && !isGeo(ds)\">\n          ({{ [ds.id] | resultSetSize | async }})\n        </h3>\n      </div>\n      <div *ngIf=\"((usedDatasources$ | async) ?? []).length === 0\" class=\"o-widget__header__content__no-data\">\n        <h2 class=\"o-widget__header__content__title\">{{ '@pry.widget.noData' | i18n }}</h2>\n      </div>\n    </ng-template>\n  </div>\n  <div class=\"m-btn-group\" *ngIf=\"!(lockedView$ | async) && displaySettings(headerOptions)\">\n    <button\n      type=\"button\"\n      id=\"dialog_Menu\"\n      aria-controls=\"menu\"\n      [attr.aria-expanded]=\"this.menu\"\n      #togglePanel\n      class=\"a-btn a-btn--more\"\n      (click)=\"menuOpen($event)\"\n    >\n      <pry-icon [height]=\"25\" [width]=\"25\" iconSvg=\"more_horiz\"></pry-icon>\n      <span class=\"u-visually-hidden\">{{ '@pry.action.openMenuWidget' | i18n }}</span>\n    </button>\n  </div>\n</div>\n\n<ng-template #overlayMenu>\n  <div class=\"m-context-menu\">\n    <ul\n      class=\"m-context-menu__list\"\n      #menuList\n      id=\"menu\"\n      role=\"menu\"\n      aria-modal=\"true\"\n      aria-labelledby=\"dialog_Menu\"\n      (keydown.arrowDown)=\"onArrowDown()\"\n      (keydown.arrowUp)=\"onArrowUp()\"\n      (keydown.escape)=\"menuOpen()\"\n    >\n      <li\n        class=\"m-context-menu__list__item\"\n        role=\"none\"\n        *ngIf=\"(manifest$ | async)?.datasource && displayOption(headerOptions, 'datasourceSelection')\"\n      >\n        <button\n          type=\"button\"\n          role=\"menuitem\"\n          tabindex=\"-1\"\n          id=\"toggleActions\"\n          (click)=\"toggleDatasourceSelection()\"\n          *pryAccess=\"{ module: 'dashboard', page: 'widget', action: 'select_named_query' }\"\n          class=\"a-btn a-tooltip\"\n          [attr.data-tooltip]=\"'@pry.widget.tooltip.readSearch' | i18n\"\n          data-tooltip-position=\"bottom\"\n        >\n          <pry-icon [height]=\"17\" [width]=\"17\" iconSvg=\"stack-fill\"></pry-icon>\n          <span>{{ '@pry.widget.tooltip.readSearch' | i18n }}</span>\n        </button>\n      </li>\n      <li class=\"m-context-menu__list__item\" role=\"none\" *ngIf=\"displayOption(headerOptions, 'parameters')\">\n        <ng-content></ng-content>\n      </li>\n      <ng-container *ngIf=\"displayOption(headerOptions, 'window')\">\n        <li class=\"m-context-menu__list__item\" role=\"none\" *ngFor=\"let targetIndex of targetIndexes$ | async\">\n          <button\n            type=\"button\"\n            (click)=\"moveInNewWindow(_widgetIndex, targetIndex)\"\n            class=\"a-btn\"\n            role=\"menuitem\"\n            tabindex=\"-1\"\n          >\n            <pry-icon [height]=\"17\" [width]=\"17\" iconSvg=\"launch\"></pry-icon>\n            {{\n              (targetIndex !== -1 ? '@pry.widget.target.existing' : '@pry.widget.target.new')\n                | i18n : { targetIndex: this.targetIndex + 1 }\n            }}\n          </button>\n        </li>\n      </ng-container>\n      <li class=\"m-context-menu__list__item\" role=\"none\" *ngIf=\"hasGrid && displayOption(headerOptions, 'changeSpot')\">\n        <button\n          type=\"button\"\n          role=\"menuitem\"\n          (click)=\"toggleChangeSpot()\"\n          class=\"a-btn a-tooltip\"\n          tabindex=\"-1\"\n          [attr.data-tooltip]=\"'@pry.widget.tooltip.changeSpot' | i18n\"\n        >\n          <pry-icon [height]=\"17\" [width]=\"17\" iconSvg=\"move\"></pry-icon>\n          <span>{{ '@pry.widget.tooltip.changeSpot' | i18n }}</span>\n        </button>\n      </li>\n      <li class=\"m-context-menu__list__item\" role=\"none\" *ngIf=\"displayOption(headerOptions, 'maximize')\">\n        <button\n          type=\"button\"\n          role=\"menuitem\"\n          tabindex=\"-1\"\n          (click)=\"maximize(_widgetIndex)\"\n          class=\"a-btn\"\n          (keydown.escape)=\"menuOpen()\"\n        >\n          <pry-icon [height]=\"17\" [width]=\"17\" iconSvg=\"fullscreen\"></pry-icon>\n          {{ '@pry.widget.target.maximize' | i18n }}\n        </button>\n      </li>\n      <li class=\"m-context-menu__list__item\" role=\"none\" *ngIf=\"displayOption(headerOptions, 'addToCatalog')\">\n        <button\n          type=\"button\"\n          role=\"menuitem\"\n          tabindex=\"-1\"\n          (click)=\"toggleCatalog()\"\n          class=\"a-btn a-tooltip\"\n          [attr.data-tooltip]=\"'@pry.widget.tooltip.catalogWidget' | i18n\"\n        >\n          <pry-icon [height]=\"17\" [width]=\"17\" iconSvg=\"library_add\"></pry-icon>\n          <span>{{ '@pry.widget.tooltip.catalogWidget' | i18n }}</span>\n        </button>\n      </li>\n      <li class=\"m-context-menu__list__item\" role=\"none\" *ngIf=\"displayOption(headerOptions, 'delete')\">\n        <button\n          type=\"button\"\n          role=\"menuitem\"\n          tabindex=\"-1\"\n          (click)=\"toggleRemoveConfirm($event)\"\n          class=\"a-btn a-tooltip\"\n          [attr.data-tooltip]=\"'@pry.widget.tooltip.deleteWidget' | i18n\"\n          (keydown.tab)=\"menuOpen()\"\n        >\n          <pry-icon [height]=\"17\" [width]=\"17\" iconSvg=\"delete\"></pry-icon>\n          <span>{{ '@pry.widget.tooltip.deleteWidget' | i18n }}</span>\n        </button>\n      </li>\n      <li class=\"m-context-menu__list__item\" role=\"none\" *ngFor=\"let option of additionalOptions\">\n        <button\n          type=\"button\"\n          class=\"a-btn\"\n          role=\"menuitem\"\n          tabindex=\"-1\"\n          (click)=\"executeAction(option)\"\n          [disabled]=\"isActionDisabled(option)\"\n        >\n          <pry-icon [height]=\"17\" [width]=\"17\" [iconSvg]=\"option.icon\"></pry-icon>\n          {{ option.label | i18n }}\n        </button>\n      </li>\n    </ul>\n  </div>\n</ng-template>\n\n<ng-template #templateModal>\n  <div\n    class=\"o-modal\"\n    (keydown.escape)=\"cancelRemoveConfirm()\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    aria-labelledby=\"dialog confirm delete presentation\"\n  >\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\" #cross (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\" (keydown.tab)=\"focusCrossElement()\">\n        {{ '@pry.toolbox.manifest.validate' | i18n }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #template>\n  <pry-datasource-selector\n    (cancel)=\"toggleDatasourceSelection()\"\n    (validated)=\"emitManifest()\"\n    (nextTab)=\"focusInputCatalog()\"\n    (previousTab)=\"focusValidation()\"\n    (datasourcesChanged)=\"datasourcesChanged($event)\"\n    [datasourceIds]=\"(selectedDataSourceIds$ | async) ?? []\"\n  ></pry-datasource-selector>\n</ng-template>\n\n<ng-template #overlayCatalog>\n  <div\n    class=\"o-modal\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    aria-labelledby=\"dialog_Catalog\"\n    (keydown.escape)=\"toggleCatalog()\"\n  >\n    <div class=\"o-modal__top\">\n      <div class=\"o-modal__top__title\">\n        <h2 class=\"a-h2\">\n          {{ '@pry.widget.defineCatalog' | i18n }}\n        </h2>\n      </div>\n      <div class=\"o-modal__top__close\">\n        <button\n          class=\"a-btn a-btn--icon-only\"\n          (keydown.shift.tab)=\"focusValidation()\"\n          #crossCatalog\n          (click)=\"toggleCatalog()\"\n        >\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-form-label-field\">\n      <label class=\"a-label\" for=\"name\">{{ '@pry.toolbox.catalog.label' | i18n }}</label>\n      <input [(ngModel)]=\"catalogInfo.name\" id=\"name\" type=\"text\" class=\"a-form-field\" required />\n    </div>\n    <div class=\"m-form-label-field\">\n      <label class=\"a-label\" for=\"description\">{{ '@pry.toolbox.catalog.description' | i18n }}</label>\n      <input [(ngModel)]=\"catalogInfo.description\" id=\"description\" type=\"text\" class=\"a-form-field\" required />\n    </div>\n    <div class=\"m-form-label-field\">\n      <pry-select-image\n        [iconUrl]=\"catalogInfo.image\"\n        (changed)=\"catalogInfo.image = $event\"\n        [mode]=\"type\"\n      ></pry-select-image>\n    </div>\n    <div class=\"m-btn-group\">\n      <button\n        type=\"button\"\n        (click)=\"toggleCatalog()\"\n        #cancel\n        (keydown.tab)=\"disableValidation()\"\n        class=\"a-btn a-btn--secondary\"\n      >\n        {{ '@pry.toolbox.manifest.close' | i18n }}\n      </button>\n      <button\n        type=\"submit\"\n        #validateCatalog\n        (click)=\"confirmCatalog()\"\n        [disabled]=\"!toolboxMenuService.isValidForCatalog(catalogInfo.name)\"\n        class=\"a-btn a-btn--primary\"\n        (keydown.tab)=\"focusCrossElement()\"\n      >\n        {{ '@pry.toolbox.manifest.validate' | i18n }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #overlaySpot>\n  <div class=\"o-modal\">\n    <div class=\"o-modal__top\">\n      <div class=\"o-modal__top__title\">\n        <h2 class=\"a-h2\">\n          {{ '@pry.widget.tooltip.changeSpot' | i18n }}\n        </h2>\n      </div>\n      <div class=\"o-modal__top__close\">\n        <button class=\"a-btn a-btn--icon-only\" (click)=\"toggleChangeSpot()\">\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    <ng-container *ngFor=\"let place of places; let i = index\">\n      <ng-container *ngIf=\"currentPlacementIndex !== i\">\n        <button type=\"button\" class=\"a-btn\" (click)=\"moveToPlace(place)\">\n          <span>{{ '@pry.widget.tooltip.spotName' | i18n : { place: i + 1 } }}</span>\n        </button>\n      </ng-container>\n    </ng-container>\n  </div>\n</ng-template>\n" }]
         }], ctorParameters: function () { return [{ type: i1.Store }, { type: i2$1.Overlay }, { type: i0.ViewContainerRef }, { type: ToolboxMenuService }]; }, propDecorators: { template: [{
                 type: ViewChild,
                 args: ['template', { read: TemplateRef }]
@@ -10004,13 +9955,19 @@ class BaseFilterComponent extends SubscriptionnerDirective {
         this.store = store;
         this.type = 'base';
     }
+    ngOnInit() {
+        this._value = this.filter?.value;
+    }
     updateFilter(value) {
+        this._value = value;
+    }
+    validateFilters() {
         if (this.filter) {
             this.filter.attributes.forEach((attribute) => {
                 this.store.dispatch(DashboardActions.updateFilterValue({
                     datasourceId: attribute.datasource,
                     id: this.filter?.id ?? '',
-                    value
+                    value: this._value
                 }));
             });
         }
@@ -10091,6 +10048,12 @@ class FilterInstanciatorComponent extends SubscriptionnerDirective {
     set filter(filter) {
         this.filter$.next(filter);
     }
+    set applyFilter$(applyFilter$) {
+        this.applySub?.unsubscribe();
+        this.applySub = applyFilter$.subscribe(() => {
+            this.currentInstance?.validateFilters();
+        });
+    }
     constructor(store, injector, filterFactoryService, changeDetector) {
         super();
         this.store = store;
@@ -10104,6 +10067,7 @@ class FilterInstanciatorComponent extends SubscriptionnerDirective {
             if (filter) {
                 const component$ = this.filterFactoryService.generateFilter(filter.type, this.injector, this.filterContainerRef);
                 component$.subscribe((component) => {
+                    this.currentInstance = component.instance;
                     component.instance.filter = filter;
                     this.changeDetector.detectChanges();
                 });
@@ -10111,7 +10075,7 @@ class FilterInstanciatorComponent extends SubscriptionnerDirective {
         }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: FilterInstanciatorComponent, deps: [{ token: i1.Store }, { token: i0.Injector }, { token: FilterFactoryService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: FilterInstanciatorComponent, selector: "pry-filter-instanciator", inputs: { filter: "filter" }, viewQueries: [{ propertyName: "filterContainerRef", first: true, predicate: ["filters"], descendants: true, read: ViewContainerRef }], usesInheritance: true, ngImport: i0, template: "<ng-template #filters></ng-template>\n" }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: FilterInstanciatorComponent, selector: "pry-filter-instanciator", inputs: { filter: "filter", applyFilter$: "applyFilter$" }, viewQueries: [{ propertyName: "filterContainerRef", first: true, predicate: ["filters"], descendants: true, read: ViewContainerRef }], usesInheritance: true, ngImport: i0, template: "<ng-template #filters></ng-template>\n" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: FilterInstanciatorComponent, decorators: [{
             type: Component,
@@ -10121,6 +10085,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImpor
             }], filterContainerRef: [{
                 type: ViewChild,
                 args: ['filters', { read: ViewContainerRef }]
+            }], applyFilter$: [{
+                type: Input
             }] } });
 
 class ManifestService {
@@ -10687,7 +10653,19 @@ class DashboardEffects {
         this.relaunchAfterOrder$ = createEffect(() => this.actions$.pipe(ofType(DashboardActions.quickOrder), map$1((action) => SearchActions.getDatasourceItems({ id: action.datasourceId }))));
         this.propagateGridLayout$ = createEffect(() => this.actions$.pipe(ofType(DashboardActions.setGridLayout), withLatestFrom(this.store.select(DashboardSelectors.rank), this.store.select(DashboardSelectors.windowManifest)), map$1(([action, rank, windowManifest]) => DashboardActions.propagateGridLayout({ manifest: windowManifest, rank }))));
         this.toggleEditionModeIfNotManual$ = createEffect(() => this.actions$.pipe(ofType(DashboardActions.setGridLayout), filter$1((action) => action.layout !== DashboardGridLayout.MANUAL), map$1(() => DashboardActions.toggleEditionMode({ force: false }))));
-        this.updateViewAfterFilterValueUpdate$ = createEffect(() => this.actions$.pipe(ofType(DashboardActions.updateFilterValue), map$1((action) => SearchActions.getDatasourceItems({ id: action.datasourceId }))));
+        this.dispatchFilters$ = createEffect(() => this.actions$.pipe(ofType(DashboardActions.dispatchFilters, DashboardActions.clearAllFilterValues), withLatestFrom(this.store.select(DashboardSelectors.filters), this.store.select(DashboardSelectors.resultSets), this.store.select(DashboardSelectors.resultSetsParams), this.store.select(DashboardSelectors.quickOrder)), mergeMap$1(([action, filters, resultSets, resultSetsParams, quickOrder]) => {
+            return [
+                ...new Set(filters
+                    .map((f) => f.attributes)
+                    .flat()
+                    .map((attribute) => attribute.datasource))
+            ]
+                .filter((resultSet) => !!resultSet &&
+                resultSet !== '' &&
+                (!resultSets[resultSet] ||
+                    resultSetsParams[resultSet] !== this.searchService.getItemsSerializedParams(resultSet, quickOrder)))
+                .map((ds) => SearchActions.getDatasourceItems({ id: ds }));
+        })));
         this.getCapability$ = createEffect(() => this.actions$.pipe(ofType(DashboardActions.getCapability), debounceTime$1(100), withLatestFrom(this.store.select(DashboardSelectors.capabilities)), filter$1(([action, capabilities]) => (!!capabilities && !!action.url && !capabilities[action.url]) || !!action.force), mergeMap$1(([action, _]) => this.wmsService.getCapabilities(action.url).pipe(map$1((capability) => DashboardActions.updateCapability({ url: action.url, capability })), startWith(DashboardActions.updateCapability({ url: action.url, capability: null }))))));
         this.getWmsFeatures = createEffect(() => this.actions$.pipe(ofType(DashboardActions.getWmsFeatures), mergeMap$1((action) => combineLatest([of(action), this.wmsService.getWmsFeatures(action.url)])), map$1(([action, json]) => {
             return DashboardActions.addWmsFeatures({
@@ -11317,6 +11295,17 @@ const internalReducer = createReducer(dashboardInitialState, on(DashboardActions
             }
         }
     };
+}), on(DashboardActions.clearAllFilterValues, (state, action) => {
+    return {
+        ...state,
+        manifests: {
+            ...state.manifests,
+            manifest: {
+                ...state.manifests.manifest,
+                filters: state.manifests.manifest.filters?.map((filter) => ({ ...filter, value: undefined }))
+            }
+        }
+    };
 }), on(DashboardActions.getWmsFeatures, DashboardActions.resetWmsFeatures, (state, action) => ({
     ...state,
     wmsFeatures: []