@net7/boilerplate-muruca 5.3.4 → 5.4.0

package/fesm2022/net7-boilerplate-muruca.mjs

@@ -1861,8 +1861,14 @@ class MrMapDS extends DataSource {
                 // flatten the list of markers
                 .reduce((acc, val) => acc.concat(val), []);
         }
-        const mapCenter = d.map_center ? [d.map_center.lat, d.map_center.lng]
-            : [54.5260, 15.2551];
+        let mapCenter;
+        const mapCenterOptions = this.options?.libOptions?.map_center;
+        if (mapCenterOptions) {
+            mapCenter = mapCenterOptions;
+        }
+        else {
+            mapCenter = d.map_center ? [d.map_center.lat, d.map_center.lng] : [54.5260, 15.2551];
+        }
         const initialView = {
             // center of europe (only for initial load)
             center: mapCenter,
@@ -1872,14 +1878,18 @@ class MrMapDS extends DataSource {
         // update the already existing layers.
         if (this.mapInstance && this.markerLayer) {
             this.buildMarkers(markers);
-            this.fitMapToBounds(markers.map((m) => m.coords), d.zoom);
+            if (!mapCenterOptions) {
+                this.fitMapToBounds(markers.map((m) => m.coords), d.zoom);
+            }
         }
         return {
             // only called once, on component init!
             _setInstance: (instance) => {
                 this.mapInstance = instance;
-                // center the map on the markers
-                this.fitMapToBounds(markers.map((m) => m.coords), d.zoom);
+                if (!mapCenterOptions) {
+                    // center the map on the markers
+                    this.fitMapToBounds(markers.map((m) => m.coords), d.zoom);
+                }
                 // load custom markers
                 this.buildMarkers(markers);
                 this.mapLoaded$.next({ map: instance, markers: this.markerLayer });
@@ -2498,6 +2508,352 @@ class MrNetworkDS extends DataSource {
     }
 }
 
+class MrParallelTextViewerDS extends DataSource {
+    transform(data) {
+        if (!data)
+            return null;
+        /*
+        if (this.options.facsimileOptions && data.facsimile) {
+          if (!data.facsimile.options) {
+            data.facsimile.options = {};
+          }
+          Object.keys(this.options.facsimileOptions).forEach((key) => {
+            data.facsimile.options[key] = this.options.facsimileOptions[key];
+          });
+        } */
+        if (this.options) {
+            // Gestione delle libOptions
+            if (this.options.libOptions) {
+                if (!data.libOptions || typeof data.libOptions !== 'object') {
+                    data.libOptions = {};
+                }
+                Object.keys(this.options.libOptions).forEach((key) => {
+                    if (!data.libOptions[key] || typeof data.libOptions[key] !== 'object') {
+                        data.libOptions[key] = {};
+                    }
+                    Object.keys(this.options.libOptions[key]).forEach((subKey) => {
+                        data.libOptions[key][subKey] = this.options.libOptions[key][subKey];
+                    });
+                });
+                // Debug libOptions
+                /*       console.log(' DEBUG libOptions:', {
+                  'this.options.libOptions': this.options.libOptions,
+                  'data.libOptions': data.libOptions,
+                  'data.libOptions.pbPage': data.libOptions.pbPage,
+                  'urlIgnore': data.libOptions.pbPage?.urlIgnore
+                }); */
+            }
+            // Gestione della grid
+            if (this.options.grid) {
+                data.grid = this.options.grid;
+            }
+            // Gestione dei panels
+            if (this.options.panels) {
+                this.options.panels.forEach((panelProperties) => {
+                    const panelIndex = data.panels.findIndex((panel) => panel.id === panelProperties.id);
+                    if (panelIndex !== -1) {
+                        data.panels[panelIndex] = {
+                            ...data.panels[panelIndex],
+                            ...panelProperties
+                        };
+                    }
+                });
+            }
+        }
+        const { enableClickOnEntities, toggleColumn,
+        // searchId,
+        // searchApi
+         } = this.options || {};
+        data.toggleColumn = toggleColumn;
+        // force tei publisher endpoint value
+        document.addEventListener('pb-page-ready', (ev) => {
+            const { detail } = ev;
+            detail.endpoint = data.endpoint;
+        }, { once: true });
+        // const params = new URLSearchParams(document.location.search);
+        // const id = params.get('id');
+        this.setupViewClickListeners();
+        /*     if (data.docs[0]?.view === 'page' && id) {
+          data.docs[0].view = 'div';
+          document.addEventListener(
+            'pb-end-update',
+            () => {
+              setTimeout(() => {
+                document.dispatchEvent(
+                  new CustomEvent('pb-toggle', {
+                    detail: {
+                      properties: {
+                        view: 'page',
+                      },
+                      action: 'refresh',
+                      key: 'transcription',
+                    },
+                  })
+                );
+                document.dispatchEvent(
+                  new CustomEvent('pb-toggle', {
+                    detail: {
+                      properties: {
+                        view: 'single',
+                      },
+                      action: 'refresh',
+                      key: 'addChannel',
+                    },
+                  })
+                );
+                document.dispatchEvent(
+                  new CustomEvent('pb-toggle', {
+                    detail: {
+                      properties: {
+                        view: 'single',
+                        id: '',
+                      },
+                      action: 'refresh',
+                      key: 'index',
+                    },
+                  })
+                );
+              }, 500);
+            },
+            { once: true }
+          );
+        } */
+        if (enableClickOnEntities) {
+            document.addEventListener('pb-end-update', (ev) => {
+                this.scrollElementsIntoView(ev.detail, 'chapter', '#view1');
+            });
+        }
+        /*     if (params.get('hq')) {
+          if (searchApi) {
+            const xmlQueryUrl = `${searchApi.url
+            }?resource-id=${searchApi['resource-id']
+            }&searchId=${searchId
+            }&xml=${data.docs[0]?.xml
+            }&${params.toString()}`;
+            data.docs[0].url = xmlQueryUrl;
+            data.docs[0].rootPath = 'api/mrcparts';
+          }
+          document.addEventListener('pb-end-update', (ev: any) => {
+            this.scrollElementsIntoView(ev.detail, 'hq', '#view0');
+          });
+        } */
+        return data;
+    }
+    displayIndex() {
+        if (this.output.toggleColumn) {
+            this.output.toggleColumn = false;
+        }
+        else {
+            this.output.toggleColumn = true;
+        }
+    }
+    setupViewClickListeners() {
+        const attachListeners = () => {
+            setTimeout(() => {
+                const views = document.querySelectorAll('.n7-parallel-text-viewer [id$="-view"]');
+                views.forEach((view) => {
+                    if (view.id === 'transcription-view') {
+                        return;
+                    }
+                    if (view.shadowRoot) {
+                        if (view.__clickListenerAttached) {
+                            return;
+                        }
+                        const clickListener = (event) => {
+                            this.onClick(event);
+                        };
+                        // Salva il riferimento e marca come attaccato
+                        view.__clickListener = clickListener;
+                        view.__clickListenerAttached = true;
+                        // Attacca il listener in capture phase per catturare tutti i click
+                        view.shadowRoot.addEventListener('click', clickListener, true);
+                    }
+                });
+            }, 100);
+        };
+        // Attacca al primo caricamento
+        document.addEventListener('pb-end-update', attachListeners);
+        setTimeout(attachListeners, 500);
+    }
+    onClick(payload) {
+        // console.log('🔵 onClick chiamato!', payload);
+        let target = null;
+        const clickPath = payload.path || payload.composedPath();
+        // console.log('🔵 clickPath:', clickPath);
+        // chiusura apparato con tasto
+        const closeButton = clickPath.find((el) => el.className
+            && typeof el.className === 'string'
+            && el.className.includes('close_app'));
+        if (closeButton) {
+            //  console.log('Click rilevato sul bottone di chiusura:', closeButton);
+            const parentAppItem = closeButton.closest('.tei-app');
+            if (parentAppItem && parentAppItem.style) {
+                //    console.log('Chiusura dell\'elemento tei-app');
+                parentAppItem.style.display = 'none';
+                parentAppItem.style.transform = '';
+                payload.stopPropagation();
+                return;
+            }
+        }
+        // Chiusura note con tasto
+        const closeNoteButton = clickPath.find((el) => el.className
+            && typeof el.className === 'string'
+            && el.className.includes('close_note'));
+        if (closeNoteButton) {
+            //  console.log('Click rilevato sul bottone di chiusura nota:', closeNoteButton);
+            const parentNoteItem = closeNoteButton.closest('.note-item');
+            if (parentNoteItem && parentNoteItem.style) {
+                //    console.log('Chiusura dell\'elemento note-item');
+                parentNoteItem.style.display = 'none';
+                parentNoteItem.style.transform = '';
+                payload.stopPropagation();
+                return;
+            }
+        }
+        if (payload.path) {
+            target = payload.path.find(({ tagName }) => tagName === 'PB-HIGHLIGHT');
+        }
+        else {
+            target = payload.composedPath().find(({ tagName }) => tagName === 'PB-HIGHLIGHT');
+        }
+        if (target && target.getAttribute('type') === 'app_lem') {
+            const appId = target.getAttribute('key');
+            // console.log('appId:', appId);
+            // Posizione elemento cliccato
+            const clickedElementPosition = target.getBoundingClientRect().top;
+            const apparatusView = document.querySelectorAll('.n7-parallel-text-viewer [id$="-view"]');
+            // console.log('Numero di view trovate:', apparatusView.length);
+            let anchorElement = null;
+            let teiAppElement = null;
+            apparatusView.forEach((view) => {
+                if (view.shadowRoot) {
+                    const found = view.shadowRoot.querySelector(`[id="${appId}"]`);
+                    if (found) {
+                        if (!anchorElement) {
+                            anchorElement = found;
+                        }
+                        const appElement = found.closest('.tei-app');
+                        if (appElement && !teiAppElement) {
+                            teiAppElement = appElement;
+                        }
+                    }
+                }
+            });
+            if (teiAppElement) {
+                const isVisible = teiAppElement.style.display === 'block';
+                if (isVisible) {
+                    teiAppElement.style.display = 'none';
+                    teiAppElement.style.transform = '';
+                }
+                else {
+                    teiAppElement.style.display = 'block';
+                    // posizione attuale
+                    const elementPosition = teiAppElement.getBoundingClientRect().top;
+                    // differenza
+                    const positionDifference = clickedElementPosition - elementPosition;
+                    // spostamento
+                    teiAppElement.style.transform = `translateY(${positionDifference}px)`;
+                }
+            }
+            else {
+                console.warn('teiAppElement non trovato!');
+            }
+        }
+        else if (target && target.getAttribute('type') === 'note_line') {
+            const noteId = target.getAttribute('key');
+            // console.log('noteId', noteId);
+            const clickedElementPosition = target.getBoundingClientRect().top;
+            const apparatusView = document.querySelector('.n7-text-viewer #apparato-view');
+            const anchorElement = apparatusView
+                ?.shadowRoot
+                ?.querySelector(`#${noteId}`);
+            const teiNoteElement = anchorElement
+                ? anchorElement.closest('.note-item')
+                : null;
+            if (teiNoteElement) {
+                // Verifica se è visibile
+                const isVisible = teiNoteElement.style.display === 'block';
+                if (isVisible) {
+                    teiNoteElement.style.display = 'none';
+                    teiNoteElement.style.transform = '';
+                }
+                else {
+                    teiNoteElement.style.display = 'block';
+                    // posizione attuale
+                    const elementPosition = teiNoteElement.getBoundingClientRect().top;
+                    // differenza
+                    const positionDifference = clickedElementPosition - elementPosition;
+                    // spostamento
+                    teiNoteElement.style.transform = `translateY(${positionDifference}px)`;
+                }
+            }
+        }
+        else if (target && this.output.toggleColumn === false) {
+            if (target.__key
+                && (target.className.includes('person')
+                    || target.className.includes('place'))) {
+                this.output.toggleColumn = true;
+                this.scrollElementsIntoView(target, 'entity', '#text-viewer-index');
+            }
+        }
+        else
+            this.output.toggleColumn = false;
+    }
+    viewListenerUpdate() {
+        document.addEventListener('pb-start-update', function _listener() {
+            document.removeEventListener('pb-start-update', _listener, true);
+        }, true);
+    }
+    changeView(view, refresh) {
+        setTimeout((v, r) => {
+            // console.log(`TEST CHANGE VIEW: ${view}`);
+            document.dispatchEvent(new CustomEvent('pb-toggle', {
+                detail: {
+                    properties: {
+                        view: v,
+                    },
+                    action: r ? 'refresh' : '',
+                    key: 'transcription',
+                },
+            }));
+        }, 600, view, refresh);
+    }
+    scrollElementsIntoView(target, type, view) {
+        setTimeout(() => {
+            let element;
+            if (type === 'chapter') {
+                if (document
+                    .querySelector('.n7-text-viewer #view0')
+                    .shadowRoot.querySelector('pb-highlight')) {
+                    const highlight = document
+                        .querySelector('.n7-text-viewer #view0')
+                        .shadowRoot.querySelectorAll('pb-highlight');
+                    const highlightId = highlight[highlight.length - 1].id; // s.x
+                    const fragmentNumber = highlightId.replace('.', '\\.');
+                    element = document
+                        .querySelector(view)
+                        .shadowRoot.querySelector(`#${fragmentNumber}`);
+                }
+            }
+            else if (type === 'entity') {
+                const key = target.__key;
+                element = document
+                    .querySelector(`.n7-text-viewer ${view}`)
+                    .shadowRoot.querySelector(`#${key}`);
+            }
+            else if (type === 'hq') {
+                element = document
+                    .querySelector(`.n7-text-viewer ${view}`)
+                    .shadowRoot.querySelector('.tei-em');
+            }
+            const container = document.querySelector(`.n7-text-viewer ${view}`);
+            if (element) {
+                container.scrollTop = element.offsetTop;
+            }
+        }, 600);
+    }
+}
+
 class MrSearchPageTitleDS extends DataSource {
     transform() {
         const { title, description, searchId } = this.options.config;
@@ -2953,6 +3309,7 @@ var DS = /*#__PURE__*/Object.freeze({
     MrMetadataDynamicDS: MrMetadataDynamicDS,
     MrNavDS: MrNavDS,
     MrNetworkDS: MrNetworkDS,
+    MrParallelTextViewerDS: MrParallelTextViewerDS,
     MrResourceTabsDS: MrResourceTabsDS,
     MrSearchPageDescriptionDS: MrSearchPageDescriptionDS,
     MrSearchPageTitleDS: MrSearchPageTitleDS,
@@ -3099,6 +3456,24 @@ class MrNetworkEH extends EventHandler {
     }
 }
 
+class MrParallelTextViewerEH extends EventHandler {
+    listen() {
+        this.innerEvents$.subscribe(({ type, payload }) => {
+            switch (type) {
+                case `${this.hostId}.click`:
+                    this.dataSource.onClick(payload);
+                    break;
+                case `${this.hostId}.togglecolumn`:
+                    this.dataSource.displayIndex();
+                    break;
+                default:
+                    // console.warn('unhandled event of type', type);
+                    break;
+            }
+        });
+    }
+}
+
 class MrSearchTagsEH extends EventHandler {
     listen() {
         this.innerEvents$.subscribe(({ type, payload }) => {
@@ -3272,6 +3647,7 @@ var EH = /*#__PURE__*/Object.freeze({
     MrMetadataDynamicEH: MrMetadataDynamicEH,
     MrNavEH: MrNavEH,
     MrNetworkEH: MrNetworkEH,
+    MrParallelTextViewerEH: MrParallelTextViewerEH,
     MrSearchPageDescriptionEH: MrSearchPageDescriptionEH,
     MrSearchPageTitleEH: MrSearchPageTitleEH,
     MrSearchResultsEH: MrSearchResultsEH,
@@ -5847,6 +6223,7 @@ const DATASOURCE_MAP$3 = {
     'viewer-tools': MrImageViewerToolsDS,
     'viewer-overlay-details': MrImageViewerOverlayDetailsDS,
     'text-viewer': MrTextViewerDS,
+    'parallel-text-viewer': MrParallelTextViewerDS,
     'metadata-dynamic': MrMetadataDynamicDS,
     'viewer-iiif': MrImageViewerIiifDS,
 };
@@ -5855,6 +6232,7 @@ const EVENTHANDLER_MAP$2 = {
     'viewer-tools': MrImageViewerToolsEH,
     'viewer-overlay-details': MrImageViewerOverlayDetailsEH,
     'text-viewer': MrTextViewerEH,
+    'parallel-text-viewer': MrParallelTextViewerEH,
     collection: MrCollectionEH,
     'metadata-dynamic': MrMetadataDynamicEH,
     button: MrButtonEH,
@@ -5954,11 +6332,11 @@ class MrResourceLayoutComponent extends AbstractLayout {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MrResourceLayoutComponent, deps: [{ token: i1.LayoutsConfigurationService }, { token: i2.ActivatedRoute }, { token: i1.ConfigurationService }, { token: i1.CommunicationService }, { token: i1.MainStateService }, { token: i2.ActivatedRoute }, { token: i2.Router }, { token: MrLayoutStateService }, { token: MrResourceModalService }, { token: MrLocaleService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: MrResourceLayoutComponent, selector: "mr-resource-layout", usesInheritance: true, ngImport: i0, template: "<div class=\"mr-resource mr-layout\" \n     *ngIf=\"lb.dataSource && lb.dataSource.pageConfig\"\n     [ngClass]=\"{\n        'is-loading': ( layoutState.get$('content') | async ) == 'LOADING',\n        'is-error': ( layoutState.get$('content') | async ) == 'ERROR'\n      }\">\n    <!-- RESOURCE LAYOUT CONTENT -->\n    <ng-container [ngSwitch]=\"layoutState.get$('content') | async\">\n        <!-- loading -->\n        <ng-container *ngSwitchCase=\"'LOADING'\">\n            <div class=\"mr-layout__loader\">\n                <n7-loader></n7-loader>\n            </div>\n        </ng-container>\n\n        <!-- error -->\n        <ng-container *ngSwitchCase=\"'ERROR'\">\n            <div class=\"mr-layout__error\">\n                <h2>{{ lb.dataSource.errorTitle }}</h2>\n                <p>{{ lb.dataSource.errorDescription }}</p>\n            </div>\n        </ng-container>\n\n        <!-- success -->\n        <ng-container *ngSwitchCase=\"'SUCCESS'\">\n            <ng-container *ngIf=\"lb.dataSource.pageConfig.sections as sections\">\n                <!-- Pass the list of blocks to render to the block template -->\n                <div class=\"mr-resource__top\">\n                    <ng-container *ngTemplateOutlet=\"blocks; context: { $implicit: sections.top }\"></ng-container>\n                </div>\n                <div class=\"mr-resource__content mr-side-margin\">\n                    <ng-container *ngTemplateOutlet=\"blocks; context: { $implicit: sections.content }\"></ng-container>\n                </div>\n            </ng-container>\n        </ng-container>\n\n    </ng-container>\n</div>\n\n<ng-template #blocks let-list>\n    <ng-container *ngFor=\"let section of list\">\n        <section *ngIf=\"lb.widgets[section.id].ds.out$ | async\"\n        class=\"{{ 'mr-resource__section mr-resource__' + section.type }}\">\n            <ng-container [ngSwitch]=\"section.type\">\n\n                <!-- TABS -->\n                <ng-container *ngSwitchCase=\"'tabs'\">\n                    <ng-container *ngFor=\"let tab of lb.widgets[section.id].ds.out$ | async\">\n                        <n7-anchor-wrapper [data]=\"tab.anchor\" [classes]=\"tab.classes\" *ngIf=\"!tab.hideTab\">\n                            <span class=\"mr-resource__tabs-item\">{{ tab.label }}</span>\n                        </n7-anchor-wrapper>\n                    </ng-container>\n                </ng-container>\n\n                <!-- INNER TITLE -->\n                <ng-container *ngSwitchCase=\"'title'\">\n                    <div class=\"mr-resource__title-content mr-side-margin\">\n                        <n7-inner-title \n                            [data]=\"lb.widgets[section.id].ds.out$ | async\"\n                            [emit]=\"lb.widgets[section.id].emit\">\n                        </n7-inner-title>\n                    </div>\n                </ng-container>\n\n                <!-- CUSTOM BUTTON -->\n                <ng-container *ngSwitchCase=\"'button'\">\n                    <div class=\"mr-resource__button\">\n                        <n7-button \n                            [data]=\"lb.widgets[section.id].ds.out$ | async\"\n                            [emit]=\"lb.widgets[section.id].emit\">\n                        </n7-button>\n                    </div>\n                </ng-container>\n    \n                <!-- IMAGE VIEWER IIIF -->\n                <ng-container *ngSwitchCase=\"'viewer-iiif'\">\n                    <n7-mirador\n                        (contextmenu)=\"lb.dataSource.hasContextMenu()\"\n                        [data]=\"lb.widgets[section.id].ds.out$ | async\">\n                    </n7-mirador>\n                </ng-container>\n    \n                <!-- IMAGE VIEWER -->\n                <ng-container *ngSwitchCase=\"'viewer'\">\n\n                        <n7-image-viewer \n                            [data]=\"lb.widgets[section.id].ds.out$ | async\" \n                            [emit]=\"lb.widgets[section.id].emit\">\n                        </n7-image-viewer>\n                        <!-- IMAGE VIEWER TOOLS -->\n                        <n7-image-viewer-tools *ngIf=\"section.tools\" \n                            [data]=\"lb.widgets[section.id + '-tools'].ds.out$ | async\" \n                            [emit]=\"lb.widgets[section.id + '-tools'].emit\">\n                        </n7-image-viewer-tools>\n                        <!-- IMAGE VIEWER OVERLAY DETAILS -->\n                        <div *ngIf=\"lb.widgets[section.id + '-overlay-details'].ds.out$ | async as viewerDetailsData\" \n                            class=\"mr-resource__viewer-overlay-details\">\n                            <div class=\"mr-resource__viewer-overlay-details__close\">\n                                <a class=\"mr-resource__viewer-overlay-details__close-link\" \n                                    (click)=\"lb.eventHandler.emitOuter('overlaycloseclick')\">\n                                    <span class=\"n7-icon-close\"></span>\n                                </a>\n                            </div>\n                            <n7-item-preview \n                                [data]=\"viewerDetailsData\" \n                                [emit]=\"lb.widgets[section.id + '-overlay-details'].emit\">\n                            </n7-item-preview>\n                        </div>\n\n                </ng-container>\n    \n                <!-- METADATA VIEWER -->\n                <ng-container *ngSwitchCase=\"'metadata'\">\n                    \n                    <div class=\"mr-content-block mr-content-block-metadata\">\n                        <h3 *ngIf=\"section.title\" class=\"mr-content-block__title\">\n                            {{ section.title }}\n                        </h3>\n                        <div class=\"mr-content-block__content\">\n                            <mr-read-more [data]=\"section.readmore\">\n                                <ng-container *ngIf=\" section?.options?.readmore || section?.options?.groupReadmore;\n                                            else wihoutReadmore\">\n                                    <mr-metadata-readmore\n                                        [data]=\"lb.widgets[section.id].ds.out$ | async\"\n                                        [emit]=\"lb.widgets[section.id].emit\">\n                                    </mr-metadata-readmore>\n                                </ng-container>\n                                <ng-template #wihoutReadmore>\n                                    <n7-metadata-viewer\n                                        [data]=\"lb.widgets[section.id].ds.out$ | async\"\n                                        [emit]=\"lb.widgets[section.id].emit\">\n                                    </n7-metadata-viewer>\n                                </ng-template>\n                            </mr-read-more>\n                        </div>\n                    </div>\n      \n                </ng-container>\n                    \n                <!-- METADATA DYNAMIC -->\n                <ng-container *ngSwitchCase=\"'metadata-dynamic'\">\n                    <mr-metadata-dynamic \n                    [data]=\"lb.widgets[section.id].ds.out$ | async\"\n                    [emit]=\"lb.widgets[section.id].emit\">\n                    </mr-metadata-dynamic>                    \n                </ng-container>\n    \n                <!-- COLLECTION -->\n                <ng-container *ngSwitchCase=\"'collection'\">\n                    <ng-container *ngIf=\"lb.widgets[section.id].ds.out$ | async as collection$\">\n                        <div *ngIf=\"collection$.items?.length > 0\" class=\"mr-content-block mr-content-block-collection\">\n                            <h3 *ngIf=\"section.title\" class=\"mr-content-block__title\">\n                                {{ section.title }}\n                            </h3>\n                            <div class=\"mr-content-block__content {{ section.grid ? 'n7-grid-' + section.grid : '' }}\">\n                                <n7-item-preview *ngFor=\"let item of collection$?.items\"\n                                    [data]=\"item\" [emit]=\"lb.widgets[section.id].emit\">\n                                </n7-item-preview>\n                            </div>\n                        </div>\n                    </ng-container>\n                </ng-container>\n    \n                <!-- ITEM PREVIEW -->\n                <ng-container *ngSwitchCase=\"'preview'\">\n                    <div class=\"mr-content-block mr-content-block-item-preview\">\n                        <h3 *ngIf=\"section.title\" class=\"mr-content-block__title\">\n                            {{ section.title }}\n                        </h3>\n                        <div class=\"mr-content-block__content\">\n                            <n7-item-preview [data]=\"lb.widgets[section.id].ds.out$ | async\" [emit]=\"lb.widgets[section.id].emit\">        \n                            </n7-item-preview>\n                        </div>\n                    </div>\n                </ng-container>\n    \n                <!-- TEXT VIEWER -->\n                <ng-container *ngSwitchCase=\"'text-viewer'\">\n                  <div class=\"mr-content-block mr-content-block-text-viewer\">\n                        <h3 *ngIf=\"section.title\" class=\"mr-content-block__title\">\n                            {{ section.title }}\n                        </h3>\n                        <div class=\"mr-content-block__content\">\n                          <n7-text-viewer [data]=\"lb.widgets[section.id].ds.out$ | async\" [emit]=\"lb.widgets[section.id].emit\">\n                          </n7-text-viewer>\n                    </div>\n                  </div>\n                  \n                </ng-container>\n\n                <!-- MAP -->\n             <ng-container *ngSwitchCase=\"'map'\">\n                  <div class=\"mr-content-block mr-content-block-map\">\n                    <div class=\"mr-content-block__content\">\n                        <n7-map [data]=\"lb.widgets[section.id].ds.out$ | async\" [emit]=\"lb.widgets[section.id].emit\"></n7-map>\n                    </div>\n                </div>\n            </ng-container>\n    \n                <!-- INFO BOX -->\n                <ng-container *ngSwitchCase=\"'info-box'\">\n                    <div class=\"mr-content-block mr-content-block-info-box\">\n                        <h3 *ngIf=\"section.title\" class=\"mr-content-block__title\">\n                            {{ section.title }}\n                        </h3>\n                        <div class=\"mr-content-block__content\">\n                            <div class=\"info-box__mock\">info-box</div>    \n                        </div>\n                    </div>\n                </ng-container>\n    \n                <!-- BREADCRUMBS -->\n                <ng-container *ngSwitchCase=\"'breadcrumbs'\">\n                    <n7-breadcrumbs [data]=\"lb.widgets[section.id].ds.out$ | async\">\n                    </n7-breadcrumbs>\n                </ng-container>\n\n            </ng-container>\n        </section>\n    </ng-container>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i7.AnchorWrapperComponent, selector: "n7-anchor-wrapper", inputs: ["data", "classes"], outputs: ["clicked"] }, { kind: "component", type: i7.BreadcrumbsComponent, selector: "n7-breadcrumbs", inputs: ["data", "emit"] }, { kind: "component", type: i7.ButtonComponent, selector: "n7-button", inputs: ["data", "emit"] }, { kind: "component", type: i7.ImageViewerComponent, selector: "n7-image-viewer", inputs: ["data", "emit"] }, { kind: "component", type: i7.ImageViewerToolsComponent, selector: "n7-image-viewer-tools", inputs: ["data", "emit"] }, { kind: "component", type: i7.InnerTitleComponent, selector: "n7-inner-title", inputs: ["data", "emit"] }, { kind: "component", type: i7.ItemPreviewComponent, selector: "n7-item-preview", inputs: ["data", "emit"] }, { kind: "component", type: i7.LoaderComponent, selector: "n7-loader", inputs: ["data"] }, { kind: "component", type: i7.MapComponent, selector: "n7-map", inputs: ["data", "emit"] }, { kind: "component", type: i7.MetadataViewerComponent, selector: "n7-metadata-viewer", inputs: ["data", "emit"] }, { kind: "component", type: i7.MiradorComponent, selector: "n7-mirador", inputs: ["data"] }, { kind: "component", type: i7.TextViewerComponent, selector: "n7-text-viewer", inputs: ["data", "emit"] }, { kind: "component", type: MrMetadataReadmoreComponent, selector: "mr-metadata-readmore", inputs: ["data", "emit"] }, { kind: "component", type: ReadMoreComponent, selector: "mr-read-more", inputs: ["data"] }, { kind: "component", type: MrMetadataDynamicComponent, selector: "mr-metadata-dynamic", inputs: ["data", "emit"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: MrResourceLayoutComponent, selector: "mr-resource-layout", usesInheritance: true, ngImport: i0, template: "<div class=\"mr-resource mr-layout\" \n     *ngIf=\"lb.dataSource && lb.dataSource.pageConfig\"\n     [ngClass]=\"{\n        'is-loading': ( layoutState.get$('content') | async ) == 'LOADING',\n        'is-error': ( layoutState.get$('content') | async ) == 'ERROR'\n      }\">\n    <!-- RESOURCE LAYOUT CONTENT -->\n    <ng-container [ngSwitch]=\"layoutState.get$('content') | async\">\n        <!-- loading -->\n        <ng-container *ngSwitchCase=\"'LOADING'\">\n            <div class=\"mr-layout__loader\">\n                <n7-loader></n7-loader>\n            </div>\n        </ng-container>\n\n        <!-- error -->\n        <ng-container *ngSwitchCase=\"'ERROR'\">\n            <div class=\"mr-layout__error\">\n                <h2>{{ lb.dataSource.errorTitle }}</h2>\n                <p>{{ lb.dataSource.errorDescription }}</p>\n            </div>\n        </ng-container>\n\n        <!-- success -->\n        <ng-container *ngSwitchCase=\"'SUCCESS'\">\n            <ng-container *ngIf=\"lb.dataSource.pageConfig.sections as sections\">\n                <!-- Pass the list of blocks to render to the block template -->\n                <div class=\"mr-resource__top\">\n                    <ng-container *ngTemplateOutlet=\"blocks; context: { $implicit: sections.top }\"></ng-container>\n                </div>\n                <div class=\"mr-resource__content mr-side-margin\">\n                    <ng-container *ngTemplateOutlet=\"blocks; context: { $implicit: sections.content }\"></ng-container>\n                </div>\n            </ng-container>\n        </ng-container>\n\n    </ng-container>\n</div>\n\n<ng-template #blocks let-list>\n    <ng-container *ngFor=\"let section of list\">\n        <section *ngIf=\"lb.widgets[section.id].ds.out$ | async\"\n        class=\"{{ 'mr-resource__section mr-resource__' + section.type }}\">\n            <ng-container [ngSwitch]=\"section.type\">\n\n                <!-- TABS -->\n                <ng-container *ngSwitchCase=\"'tabs'\">\n                    <ng-container *ngFor=\"let tab of lb.widgets[section.id].ds.out$ | async\">\n                        <n7-anchor-wrapper [data]=\"tab.anchor\" [classes]=\"tab.classes\" *ngIf=\"!tab.hideTab\">\n                            <span class=\"mr-resource__tabs-item\">{{ tab.label }}</span>\n                        </n7-anchor-wrapper>\n                    </ng-container>\n                </ng-container>\n\n                <!-- INNER TITLE -->\n                <ng-container *ngSwitchCase=\"'title'\">\n                    <div class=\"mr-resource__title-content mr-side-margin\">\n                        <n7-inner-title \n                            [data]=\"lb.widgets[section.id].ds.out$ | async\"\n                            [emit]=\"lb.widgets[section.id].emit\">\n                        </n7-inner-title>\n                    </div>\n                </ng-container>\n\n                <!-- CUSTOM BUTTON -->\n                <ng-container *ngSwitchCase=\"'button'\">\n                    <div class=\"mr-resource__button\">\n                        <n7-button \n                            [data]=\"lb.widgets[section.id].ds.out$ | async\"\n                            [emit]=\"lb.widgets[section.id].emit\">\n                        </n7-button>\n                    </div>\n                </ng-container>\n    \n                <!-- IMAGE VIEWER IIIF -->\n                <ng-container *ngSwitchCase=\"'viewer-iiif'\">\n                    <n7-mirador\n                        (contextmenu)=\"lb.dataSource.hasContextMenu()\"\n                        [data]=\"lb.widgets[section.id].ds.out$ | async\">\n                    </n7-mirador>\n                </ng-container>\n    \n                <!-- IMAGE VIEWER -->\n                <ng-container *ngSwitchCase=\"'viewer'\">\n\n                        <n7-image-viewer \n                            [data]=\"lb.widgets[section.id].ds.out$ | async\" \n                            [emit]=\"lb.widgets[section.id].emit\">\n                        </n7-image-viewer>\n                        <!-- IMAGE VIEWER TOOLS -->\n                        <n7-image-viewer-tools *ngIf=\"section.tools\" \n                            [data]=\"lb.widgets[section.id + '-tools'].ds.out$ | async\" \n                            [emit]=\"lb.widgets[section.id + '-tools'].emit\">\n                        </n7-image-viewer-tools>\n                        <!-- IMAGE VIEWER OVERLAY DETAILS -->\n                        <div *ngIf=\"lb.widgets[section.id + '-overlay-details'].ds.out$ | async as viewerDetailsData\" \n                            class=\"mr-resource__viewer-overlay-details\">\n                            <div class=\"mr-resource__viewer-overlay-details__close\">\n                                <a class=\"mr-resource__viewer-overlay-details__close-link\" \n                                    (click)=\"lb.eventHandler.emitOuter('overlaycloseclick')\">\n                                    <span class=\"n7-icon-close\"></span>\n                                </a>\n                            </div>\n                            <n7-item-preview \n                                [data]=\"viewerDetailsData\" \n                                [emit]=\"lb.widgets[section.id + '-overlay-details'].emit\">\n                            </n7-item-preview>\n                        </div>\n\n                </ng-container>\n    \n                <!-- METADATA VIEWER -->\n                <ng-container *ngSwitchCase=\"'metadata'\">\n                    \n                    <div class=\"mr-content-block mr-content-block-metadata\">\n                        <h3 *ngIf=\"section.title\" class=\"mr-content-block__title\">\n                            {{ section.title }}\n                        </h3>\n                        <div class=\"mr-content-block__content\">\n                            <mr-read-more [data]=\"section.readmore\">\n                                <ng-container *ngIf=\" section?.options?.readmore || section?.options?.groupReadmore;\n                                            else wihoutReadmore\">\n                                    <mr-metadata-readmore\n                                        [data]=\"lb.widgets[section.id].ds.out$ | async\"\n                                        [emit]=\"lb.widgets[section.id].emit\">\n                                    </mr-metadata-readmore>\n                                </ng-container>\n                                <ng-template #wihoutReadmore>\n                                    <n7-metadata-viewer\n                                        [data]=\"lb.widgets[section.id].ds.out$ | async\"\n                                        [emit]=\"lb.widgets[section.id].emit\">\n                                    </n7-metadata-viewer>\n                                </ng-template>\n                            </mr-read-more>\n                        </div>\n                    </div>\n      \n                </ng-container>\n                    \n                <!-- METADATA DYNAMIC -->\n                <ng-container *ngSwitchCase=\"'metadata-dynamic'\">\n                    <mr-metadata-dynamic \n                    [data]=\"lb.widgets[section.id].ds.out$ | async\"\n                    [emit]=\"lb.widgets[section.id].emit\">\n                    </mr-metadata-dynamic>                    \n                </ng-container>\n    \n                <!-- COLLECTION -->\n                <ng-container *ngSwitchCase=\"'collection'\">\n                    <ng-container *ngIf=\"lb.widgets[section.id].ds.out$ | async as collection$\">\n                        <div *ngIf=\"collection$.items?.length > 0\" class=\"mr-content-block mr-content-block-collection\">\n                            <h3 *ngIf=\"section.title\" class=\"mr-content-block__title\">\n                                {{ section.title }}\n                            </h3>\n                            <div class=\"mr-content-block__content {{ section.grid ? 'n7-grid-' + section.grid : '' }}\">\n                                <n7-item-preview *ngFor=\"let item of collection$?.items\"\n                                    [data]=\"item\" [emit]=\"lb.widgets[section.id].emit\">\n                                </n7-item-preview>\n                            </div>\n                        </div>\n                    </ng-container>\n                </ng-container>\n    \n                <!-- ITEM PREVIEW -->\n                <ng-container *ngSwitchCase=\"'preview'\">\n                    <div class=\"mr-content-block mr-content-block-item-preview\">\n                        <h3 *ngIf=\"section.title\" class=\"mr-content-block__title\">\n                            {{ section.title }}\n                        </h3>\n                        <div class=\"mr-content-block__content\">\n                            <n7-item-preview [data]=\"lb.widgets[section.id].ds.out$ | async\" [emit]=\"lb.widgets[section.id].emit\">        \n                            </n7-item-preview>\n                        </div>\n                    </div>\n                </ng-container>\n    \n                <!-- TEXT VIEWER -->\n                <ng-container *ngSwitchCase=\"'text-viewer'\">\n                  <div class=\"mr-content-block mr-content-block-text-viewer\">\n                        <h3 *ngIf=\"section.title\" class=\"mr-content-block__title\">\n                            {{ section.title }}\n                        </h3>\n                        <div class=\"mr-content-block__content\">\n                          <n7-text-viewer [data]=\"lb.widgets[section.id].ds.out$ | async\" [emit]=\"lb.widgets[section.id].emit\">\n                          </n7-text-viewer>\n                    </div>\n                  </div>\n                </ng-container>\n\n                <!-- PARALLEL TEXT VIEWER -->\n                <ng-container *ngSwitchCase=\"'parallel-text-viewer'\">\n                  <div class=\"mr-content-block mr-content-block-text-viewer mr-content-block-parallel-text-viewer\">\n                        <h3 *ngIf=\"section.title\" class=\"mr-content-block__title\">\n                            {{ section.title }}\n                        </h3>\n                        <div class=\"mr-content-block__content\">\n                          <n7-parallel-text-viewer [data]=\"lb.widgets[section.id].ds.out$ | async\" [emit]=\"lb.widgets[section.id].emit\">\n                          </n7-parallel-text-viewer>\n                    </div>\n                  </div>\n                </ng-container>\n\n                <!-- MAP -->\n             <ng-container *ngSwitchCase=\"'map'\">\n                  <div class=\"mr-content-block mr-content-block-map\">\n                    <div class=\"mr-content-block__content\">\n                        <n7-map [data]=\"lb.widgets[section.id].ds.out$ | async\" [emit]=\"lb.widgets[section.id].emit\"></n7-map>\n                    </div>\n                </div>\n            </ng-container>\n    \n                <!-- INFO BOX -->\n                <ng-container *ngSwitchCase=\"'info-box'\">\n                    <div class=\"mr-content-block mr-content-block-info-box\">\n                        <h3 *ngIf=\"section.title\" class=\"mr-content-block__title\">\n                            {{ section.title }}\n                        </h3>\n                        <div class=\"mr-content-block__content\">\n                            <div class=\"info-box__mock\">info-box</div>    \n                        </div>\n                    </div>\n                </ng-container>\n    \n                <!-- BREADCRUMBS -->\n                <ng-container *ngSwitchCase=\"'breadcrumbs'\">\n                    <n7-breadcrumbs [data]=\"lb.widgets[section.id].ds.out$ | async\">\n                    </n7-breadcrumbs>\n                </ng-container>\n\n            </ng-container>\n        </section>\n    </ng-container>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i7.AnchorWrapperComponent, selector: "n7-anchor-wrapper", inputs: ["data", "classes"], outputs: ["clicked"] }, { kind: "component", type: i7.BreadcrumbsComponent, selector: "n7-breadcrumbs", inputs: ["data", "emit"] }, { kind: "component", type: i7.ButtonComponent, selector: "n7-button", inputs: ["data", "emit"] }, { kind: "component", type: i7.ImageViewerComponent, selector: "n7-image-viewer", inputs: ["data", "emit"] }, { kind: "component", type: i7.ImageViewerToolsComponent, selector: "n7-image-viewer-tools", inputs: ["data", "emit"] }, { kind: "component", type: i7.InnerTitleComponent, selector: "n7-inner-title", inputs: ["data", "emit"] }, { kind: "component", type: i7.ItemPreviewComponent, selector: "n7-item-preview", inputs: ["data", "emit"] }, { kind: "component", type: i7.LoaderComponent, selector: "n7-loader", inputs: ["data"] }, { kind: "component", type: i7.MapComponent, selector: "n7-map", inputs: ["data", "emit"] }, { kind: "component", type: i7.MetadataViewerComponent, selector: "n7-metadata-viewer", inputs: ["data", "emit"] }, { kind: "component", type: i7.MiradorComponent, selector: "n7-mirador", inputs: ["data"] }, { kind: "component", type: i7.TextViewerComponent, selector: "n7-text-viewer", inputs: ["data", "emit"] }, { kind: "component", type: i7.ParallelTextViewerComponent, selector: "n7-parallel-text-viewer", inputs: ["data", "emit"] }, { kind: "component", type: MrMetadataReadmoreComponent, selector: "mr-metadata-readmore", inputs: ["data", "emit"] }, { kind: "component", type: ReadMoreComponent, selector: "mr-read-more", inputs: ["data"] }, { kind: "component", type: MrMetadataDynamicComponent, selector: "mr-metadata-dynamic", inputs: ["data", "emit"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MrResourceLayoutComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mr-resource-layout', template: "<div class=\"mr-resource mr-layout\" \n     *ngIf=\"lb.dataSource && lb.dataSource.pageConfig\"\n     [ngClass]=\"{\n        'is-loading': ( layoutState.get$('content') | async ) == 'LOADING',\n        'is-error': ( layoutState.get$('content') | async ) == 'ERROR'\n      }\">\n    <!-- RESOURCE LAYOUT CONTENT -->\n    <ng-container [ngSwitch]=\"layoutState.get$('content') | async\">\n        <!-- loading -->\n        <ng-container *ngSwitchCase=\"'LOADING'\">\n            <div class=\"mr-layout__loader\">\n                <n7-loader></n7-loader>\n            </div>\n        </ng-container>\n\n        <!-- error -->\n        <ng-container *ngSwitchCase=\"'ERROR'\">\n            <div class=\"mr-layout__error\">\n                <h2>{{ lb.dataSource.errorTitle }}</h2>\n                <p>{{ lb.dataSource.errorDescription }}</p>\n            </div>\n        </ng-container>\n\n        <!-- success -->\n        <ng-container *ngSwitchCase=\"'SUCCESS'\">\n            <ng-container *ngIf=\"lb.dataSource.pageConfig.sections as sections\">\n                <!-- Pass the list of blocks to render to the block template -->\n                <div class=\"mr-resource__top\">\n                    <ng-container *ngTemplateOutlet=\"blocks; context: { $implicit: sections.top }\"></ng-container>\n                </div>\n                <div class=\"mr-resource__content mr-side-margin\">\n                    <ng-container *ngTemplateOutlet=\"blocks; context: { $implicit: sections.content }\"></ng-container>\n                </div>\n            </ng-container>\n        </ng-container>\n\n    </ng-container>\n</div>\n\n<ng-template #blocks let-list>\n    <ng-container *ngFor=\"let section of list\">\n        <section *ngIf=\"lb.widgets[section.id].ds.out$ | async\"\n        class=\"{{ 'mr-resource__section mr-resource__' + section.type }}\">\n            <ng-container [ngSwitch]=\"section.type\">\n\n                <!-- TABS -->\n                <ng-container *ngSwitchCase=\"'tabs'\">\n                    <ng-container *ngFor=\"let tab of lb.widgets[section.id].ds.out$ | async\">\n                        <n7-anchor-wrapper [data]=\"tab.anchor\" [classes]=\"tab.classes\" *ngIf=\"!tab.hideTab\">\n                            <span class=\"mr-resource__tabs-item\">{{ tab.label }}</span>\n                        </n7-anchor-wrapper>\n                    </ng-container>\n                </ng-container>\n\n                <!-- INNER TITLE -->\n                <ng-container *ngSwitchCase=\"'title'\">\n                    <div class=\"mr-resource__title-content mr-side-margin\">\n                        <n7-inner-title \n                            [data]=\"lb.widgets[section.id].ds.out$ | async\"\n                            [emit]=\"lb.widgets[section.id].emit\">\n                        </n7-inner-title>\n                    </div>\n                </ng-container>\n\n                <!-- CUSTOM BUTTON -->\n                <ng-container *ngSwitchCase=\"'button'\">\n                    <div class=\"mr-resource__button\">\n                        <n7-button \n                            [data]=\"lb.widgets[section.id].ds.out$ | async\"\n                            [emit]=\"lb.widgets[section.id].emit\">\n                        </n7-button>\n                    </div>\n                </ng-container>\n    \n                <!-- IMAGE VIEWER IIIF -->\n                <ng-container *ngSwitchCase=\"'viewer-iiif'\">\n                    <n7-mirador\n                        (contextmenu)=\"lb.dataSource.hasContextMenu()\"\n                        [data]=\"lb.widgets[section.id].ds.out$ | async\">\n                    </n7-mirador>\n                </ng-container>\n    \n                <!-- IMAGE VIEWER -->\n                <ng-container *ngSwitchCase=\"'viewer'\">\n\n                        <n7-image-viewer \n                            [data]=\"lb.widgets[section.id].ds.out$ | async\" \n                            [emit]=\"lb.widgets[section.id].emit\">\n                        </n7-image-viewer>\n                        <!-- IMAGE VIEWER TOOLS -->\n                        <n7-image-viewer-tools *ngIf=\"section.tools\" \n                            [data]=\"lb.widgets[section.id + '-tools'].ds.out$ | async\" \n                            [emit]=\"lb.widgets[section.id + '-tools'].emit\">\n                        </n7-image-viewer-tools>\n                        <!-- IMAGE VIEWER OVERLAY DETAILS -->\n                        <div *ngIf=\"lb.widgets[section.id + '-overlay-details'].ds.out$ | async as viewerDetailsData\" \n                            class=\"mr-resource__viewer-overlay-details\">\n                            <div class=\"mr-resource__viewer-overlay-details__close\">\n                                <a class=\"mr-resource__viewer-overlay-details__close-link\" \n                                    (click)=\"lb.eventHandler.emitOuter('overlaycloseclick')\">\n                                    <span class=\"n7-icon-close\"></span>\n                                </a>\n                            </div>\n                            <n7-item-preview \n                                [data]=\"viewerDetailsData\" \n                                [emit]=\"lb.widgets[section.id + '-overlay-details'].emit\">\n                            </n7-item-preview>\n                        </div>\n\n                </ng-container>\n    \n                <!-- METADATA VIEWER -->\n                <ng-container *ngSwitchCase=\"'metadata'\">\n                    \n                    <div class=\"mr-content-block mr-content-block-metadata\">\n                        <h3 *ngIf=\"section.title\" class=\"mr-content-block__title\">\n                            {{ section.title }}\n                        </h3>\n                        <div class=\"mr-content-block__content\">\n                            <mr-read-more [data]=\"section.readmore\">\n                                <ng-container *ngIf=\" section?.options?.readmore || section?.options?.groupReadmore;\n                                            else wihoutReadmore\">\n                                    <mr-metadata-readmore\n                                        [data]=\"lb.widgets[section.id].ds.out$ | async\"\n                                        [emit]=\"lb.widgets[section.id].emit\">\n                                    </mr-metadata-readmore>\n                                </ng-container>\n                                <ng-template #wihoutReadmore>\n                                    <n7-metadata-viewer\n                                        [data]=\"lb.widgets[section.id].ds.out$ | async\"\n                                        [emit]=\"lb.widgets[section.id].emit\">\n                                    </n7-metadata-viewer>\n                                </ng-template>\n                            </mr-read-more>\n                        </div>\n                    </div>\n      \n                </ng-container>\n                    \n                <!-- METADATA DYNAMIC -->\n                <ng-container *ngSwitchCase=\"'metadata-dynamic'\">\n                    <mr-metadata-dynamic \n                    [data]=\"lb.widgets[section.id].ds.out$ | async\"\n                    [emit]=\"lb.widgets[section.id].emit\">\n                    </mr-metadata-dynamic>                    \n                </ng-container>\n    \n                <!-- COLLECTION -->\n                <ng-container *ngSwitchCase=\"'collection'\">\n                    <ng-container *ngIf=\"lb.widgets[section.id].ds.out$ | async as collection$\">\n                        <div *ngIf=\"collection$.items?.length > 0\" class=\"mr-content-block mr-content-block-collection\">\n                            <h3 *ngIf=\"section.title\" class=\"mr-content-block__title\">\n                                {{ section.title }}\n                            </h3>\n                            <div class=\"mr-content-block__content {{ section.grid ? 'n7-grid-' + section.grid : '' }}\">\n                                <n7-item-preview *ngFor=\"let item of collection$?.items\"\n                                    [data]=\"item\" [emit]=\"lb.widgets[section.id].emit\">\n                                </n7-item-preview>\n                            </div>\n                        </div>\n                    </ng-container>\n                </ng-container>\n    \n                <!-- ITEM PREVIEW -->\n                <ng-container *ngSwitchCase=\"'preview'\">\n                    <div class=\"mr-content-block mr-content-block-item-preview\">\n                        <h3 *ngIf=\"section.title\" class=\"mr-content-block__title\">\n                            {{ section.title }}\n                        </h3>\n                        <div class=\"mr-content-block__content\">\n                            <n7-item-preview [data]=\"lb.widgets[section.id].ds.out$ | async\" [emit]=\"lb.widgets[section.id].emit\">        \n                            </n7-item-preview>\n                        </div>\n                    </div>\n                </ng-container>\n    \n                <!-- TEXT VIEWER -->\n                <ng-container *ngSwitchCase=\"'text-viewer'\">\n                  <div class=\"mr-content-block mr-content-block-text-viewer\">\n                        <h3 *ngIf=\"section.title\" class=\"mr-content-block__title\">\n                            {{ section.title }}\n                        </h3>\n                        <div class=\"mr-content-block__content\">\n                          <n7-text-viewer [data]=\"lb.widgets[section.id].ds.out$ | async\" [emit]=\"lb.widgets[section.id].emit\">\n                          </n7-text-viewer>\n                    </div>\n                  </div>\n                  \n                </ng-container>\n\n                <!-- MAP -->\n             <ng-container *ngSwitchCase=\"'map'\">\n                  <div class=\"mr-content-block mr-content-block-map\">\n                    <div class=\"mr-content-block__content\">\n                        <n7-map [data]=\"lb.widgets[section.id].ds.out$ | async\" [emit]=\"lb.widgets[section.id].emit\"></n7-map>\n                    </div>\n                </div>\n            </ng-container>\n    \n                <!-- INFO BOX -->\n                <ng-container *ngSwitchCase=\"'info-box'\">\n                    <div class=\"mr-content-block mr-content-block-info-box\">\n                        <h3 *ngIf=\"section.title\" class=\"mr-content-block__title\">\n                            {{ section.title }}\n                        </h3>\n                        <div class=\"mr-content-block__content\">\n                            <div class=\"info-box__mock\">info-box</div>    \n                        </div>\n                    </div>\n                </ng-container>\n    \n                <!-- BREADCRUMBS -->\n                <ng-container *ngSwitchCase=\"'breadcrumbs'\">\n                    <n7-breadcrumbs [data]=\"lb.widgets[section.id].ds.out$ | async\">\n                    </n7-breadcrumbs>\n                </ng-container>\n\n            </ng-container>\n        </section>\n    </ng-container>\n</ng-template>\n" }]
+            args: [{ selector: 'mr-resource-layout', template: "<div class=\"mr-resource mr-layout\" \n     *ngIf=\"lb.dataSource && lb.dataSource.pageConfig\"\n     [ngClass]=\"{\n        'is-loading': ( layoutState.get$('content') | async ) == 'LOADING',\n        'is-error': ( layoutState.get$('content') | async ) == 'ERROR'\n      }\">\n    <!-- RESOURCE LAYOUT CONTENT -->\n    <ng-container [ngSwitch]=\"layoutState.get$('content') | async\">\n        <!-- loading -->\n        <ng-container *ngSwitchCase=\"'LOADING'\">\n            <div class=\"mr-layout__loader\">\n                <n7-loader></n7-loader>\n            </div>\n        </ng-container>\n\n        <!-- error -->\n        <ng-container *ngSwitchCase=\"'ERROR'\">\n            <div class=\"mr-layout__error\">\n                <h2>{{ lb.dataSource.errorTitle }}</h2>\n                <p>{{ lb.dataSource.errorDescription }}</p>\n            </div>\n        </ng-container>\n\n        <!-- success -->\n        <ng-container *ngSwitchCase=\"'SUCCESS'\">\n            <ng-container *ngIf=\"lb.dataSource.pageConfig.sections as sections\">\n                <!-- Pass the list of blocks to render to the block template -->\n                <div class=\"mr-resource__top\">\n                    <ng-container *ngTemplateOutlet=\"blocks; context: { $implicit: sections.top }\"></ng-container>\n                </div>\n                <div class=\"mr-resource__content mr-side-margin\">\n                    <ng-container *ngTemplateOutlet=\"blocks; context: { $implicit: sections.content }\"></ng-container>\n                </div>\n            </ng-container>\n        </ng-container>\n\n    </ng-container>\n</div>\n\n<ng-template #blocks let-list>\n    <ng-container *ngFor=\"let section of list\">\n        <section *ngIf=\"lb.widgets[section.id].ds.out$ | async\"\n        class=\"{{ 'mr-resource__section mr-resource__' + section.type }}\">\n            <ng-container [ngSwitch]=\"section.type\">\n\n                <!-- TABS -->\n                <ng-container *ngSwitchCase=\"'tabs'\">\n                    <ng-container *ngFor=\"let tab of lb.widgets[section.id].ds.out$ | async\">\n                        <n7-anchor-wrapper [data]=\"tab.anchor\" [classes]=\"tab.classes\" *ngIf=\"!tab.hideTab\">\n                            <span class=\"mr-resource__tabs-item\">{{ tab.label }}</span>\n                        </n7-anchor-wrapper>\n                    </ng-container>\n                </ng-container>\n\n                <!-- INNER TITLE -->\n                <ng-container *ngSwitchCase=\"'title'\">\n                    <div class=\"mr-resource__title-content mr-side-margin\">\n                        <n7-inner-title \n                            [data]=\"lb.widgets[section.id].ds.out$ | async\"\n                            [emit]=\"lb.widgets[section.id].emit\">\n                        </n7-inner-title>\n                    </div>\n                </ng-container>\n\n                <!-- CUSTOM BUTTON -->\n                <ng-container *ngSwitchCase=\"'button'\">\n                    <div class=\"mr-resource__button\">\n                        <n7-button \n                            [data]=\"lb.widgets[section.id].ds.out$ | async\"\n                            [emit]=\"lb.widgets[section.id].emit\">\n                        </n7-button>\n                    </div>\n                </ng-container>\n    \n                <!-- IMAGE VIEWER IIIF -->\n                <ng-container *ngSwitchCase=\"'viewer-iiif'\">\n                    <n7-mirador\n                        (contextmenu)=\"lb.dataSource.hasContextMenu()\"\n                        [data]=\"lb.widgets[section.id].ds.out$ | async\">\n                    </n7-mirador>\n                </ng-container>\n    \n                <!-- IMAGE VIEWER -->\n                <ng-container *ngSwitchCase=\"'viewer'\">\n\n                        <n7-image-viewer \n                            [data]=\"lb.widgets[section.id].ds.out$ | async\" \n                            [emit]=\"lb.widgets[section.id].emit\">\n                        </n7-image-viewer>\n                        <!-- IMAGE VIEWER TOOLS -->\n                        <n7-image-viewer-tools *ngIf=\"section.tools\" \n                            [data]=\"lb.widgets[section.id + '-tools'].ds.out$ | async\" \n                            [emit]=\"lb.widgets[section.id + '-tools'].emit\">\n                        </n7-image-viewer-tools>\n                        <!-- IMAGE VIEWER OVERLAY DETAILS -->\n                        <div *ngIf=\"lb.widgets[section.id + '-overlay-details'].ds.out$ | async as viewerDetailsData\" \n                            class=\"mr-resource__viewer-overlay-details\">\n                            <div class=\"mr-resource__viewer-overlay-details__close\">\n                                <a class=\"mr-resource__viewer-overlay-details__close-link\" \n                                    (click)=\"lb.eventHandler.emitOuter('overlaycloseclick')\">\n                                    <span class=\"n7-icon-close\"></span>\n                                </a>\n                            </div>\n                            <n7-item-preview \n                                [data]=\"viewerDetailsData\" \n                                [emit]=\"lb.widgets[section.id + '-overlay-details'].emit\">\n                            </n7-item-preview>\n                        </div>\n\n                </ng-container>\n    \n                <!-- METADATA VIEWER -->\n                <ng-container *ngSwitchCase=\"'metadata'\">\n                    \n                    <div class=\"mr-content-block mr-content-block-metadata\">\n                        <h3 *ngIf=\"section.title\" class=\"mr-content-block__title\">\n                            {{ section.title }}\n                        </h3>\n                        <div class=\"mr-content-block__content\">\n                            <mr-read-more [data]=\"section.readmore\">\n                                <ng-container *ngIf=\" section?.options?.readmore || section?.options?.groupReadmore;\n                                            else wihoutReadmore\">\n                                    <mr-metadata-readmore\n                                        [data]=\"lb.widgets[section.id].ds.out$ | async\"\n                                        [emit]=\"lb.widgets[section.id].emit\">\n                                    </mr-metadata-readmore>\n                                </ng-container>\n                                <ng-template #wihoutReadmore>\n                                    <n7-metadata-viewer\n                                        [data]=\"lb.widgets[section.id].ds.out$ | async\"\n                                        [emit]=\"lb.widgets[section.id].emit\">\n                                    </n7-metadata-viewer>\n                                </ng-template>\n                            </mr-read-more>\n                        </div>\n                    </div>\n      \n                </ng-container>\n                    \n                <!-- METADATA DYNAMIC -->\n                <ng-container *ngSwitchCase=\"'metadata-dynamic'\">\n                    <mr-metadata-dynamic \n                    [data]=\"lb.widgets[section.id].ds.out$ | async\"\n                    [emit]=\"lb.widgets[section.id].emit\">\n                    </mr-metadata-dynamic>                    \n                </ng-container>\n    \n                <!-- COLLECTION -->\n                <ng-container *ngSwitchCase=\"'collection'\">\n                    <ng-container *ngIf=\"lb.widgets[section.id].ds.out$ | async as collection$\">\n                        <div *ngIf=\"collection$.items?.length > 0\" class=\"mr-content-block mr-content-block-collection\">\n                            <h3 *ngIf=\"section.title\" class=\"mr-content-block__title\">\n                                {{ section.title }}\n                            </h3>\n                            <div class=\"mr-content-block__content {{ section.grid ? 'n7-grid-' + section.grid : '' }}\">\n                                <n7-item-preview *ngFor=\"let item of collection$?.items\"\n                                    [data]=\"item\" [emit]=\"lb.widgets[section.id].emit\">\n                                </n7-item-preview>\n                            </div>\n                        </div>\n                    </ng-container>\n                </ng-container>\n    \n                <!-- ITEM PREVIEW -->\n                <ng-container *ngSwitchCase=\"'preview'\">\n                    <div class=\"mr-content-block mr-content-block-item-preview\">\n                        <h3 *ngIf=\"section.title\" class=\"mr-content-block__title\">\n                            {{ section.title }}\n                        </h3>\n                        <div class=\"mr-content-block__content\">\n                            <n7-item-preview [data]=\"lb.widgets[section.id].ds.out$ | async\" [emit]=\"lb.widgets[section.id].emit\">        \n                            </n7-item-preview>\n                        </div>\n                    </div>\n                </ng-container>\n    \n                <!-- TEXT VIEWER -->\n                <ng-container *ngSwitchCase=\"'text-viewer'\">\n                  <div class=\"mr-content-block mr-content-block-text-viewer\">\n                        <h3 *ngIf=\"section.title\" class=\"mr-content-block__title\">\n                            {{ section.title }}\n                        </h3>\n                        <div class=\"mr-content-block__content\">\n                          <n7-text-viewer [data]=\"lb.widgets[section.id].ds.out$ | async\" [emit]=\"lb.widgets[section.id].emit\">\n                          </n7-text-viewer>\n                    </div>\n                  </div>\n                </ng-container>\n\n                <!-- PARALLEL TEXT VIEWER -->\n                <ng-container *ngSwitchCase=\"'parallel-text-viewer'\">\n                  <div class=\"mr-content-block mr-content-block-text-viewer mr-content-block-parallel-text-viewer\">\n                        <h3 *ngIf=\"section.title\" class=\"mr-content-block__title\">\n                            {{ section.title }}\n                        </h3>\n                        <div class=\"mr-content-block__content\">\n                          <n7-parallel-text-viewer [data]=\"lb.widgets[section.id].ds.out$ | async\" [emit]=\"lb.widgets[section.id].emit\">\n                          </n7-parallel-text-viewer>\n                    </div>\n                  </div>\n                </ng-container>\n\n                <!-- MAP -->\n             <ng-container *ngSwitchCase=\"'map'\">\n                  <div class=\"mr-content-block mr-content-block-map\">\n                    <div class=\"mr-content-block__content\">\n                        <n7-map [data]=\"lb.widgets[section.id].ds.out$ | async\" [emit]=\"lb.widgets[section.id].emit\"></n7-map>\n                    </div>\n                </div>\n            </ng-container>\n    \n                <!-- INFO BOX -->\n                <ng-container *ngSwitchCase=\"'info-box'\">\n                    <div class=\"mr-content-block mr-content-block-info-box\">\n                        <h3 *ngIf=\"section.title\" class=\"mr-content-block__title\">\n                            {{ section.title }}\n                        </h3>\n                        <div class=\"mr-content-block__content\">\n                            <div class=\"info-box__mock\">info-box</div>    \n                        </div>\n                    </div>\n                </ng-container>\n    \n                <!-- BREADCRUMBS -->\n                <ng-container *ngSwitchCase=\"'breadcrumbs'\">\n                    <n7-breadcrumbs [data]=\"lb.widgets[section.id].ds.out$ | async\">\n                    </n7-breadcrumbs>\n                </ng-container>\n\n            </ng-container>\n        </section>\n    </ng-container>\n</ng-template>\n" }]
         }], ctorParameters: () => [{ type: i1.LayoutsConfigurationService }, { type: i2.ActivatedRoute }, { type: i1.ConfigurationService }, { type: i1.CommunicationService }, { type: i1.MainStateService }, { type: i2.ActivatedRoute }, { type: i2.Router }, { type: MrLayoutStateService }, { type: MrResourceModalService }, { type: MrLocaleService }] });
 
 class SearchFacetsLayoutDS extends LayoutDataSource {
@@ -8350,5 +8728,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { DynamicPathGuard, FACETS_REQUEST_STATE_CONTEXT, FACET_STATE_CONTEXT, INPUT_STATE_CONTEXT, LayoutState, LocaleDependenciesGuard, MrAdvancedResultComponent, MrAdvancedResultsLayoutComponent, MrAdvancedResultsLayoutConfig, MrAdvancedResultsLayoutDS, MrAdvancedResultsLayoutEH, MrAdvancedSearchLayoutComponent, MrAdvancedSearchLayoutConfig, MrAdvancedSearchLayoutDS, MrAdvancedSearchLayoutEH, MrAdvancedSearchTagsDS, MrBreadcrumbsDS, MrButtonDS, MrButtonEH, MrCollectionDS, MrCollectionEH, MrContentDS, MrDummyEH, MrFiltersDS, MrFiltersEH, MrFooterService, MrFormComponent, MrFormWrapperAccordionComponent, MrFormWrapperAccordionDS, MrFormWrapperAccordionEH, MrGalleryComponent, MrGalleryDS, MrGalleryEH, MrHeroDS, MrHomeLayoutComponent, MrHomeLayoutConfig, MrHomeLayoutDS, MrHomeLayoutEH, MrImageViewerDS, MrImageViewerIiifDS, MrImageViewerOverlayDetailsDS, MrImageViewerToolsDS, MrInfoBoxDS, MrInnerTitleDS, MrItemPreviewDS, MrItemPreviewsDS, MrItineraryLayoutComponent, MrItineraryLayoutConfig, MrItineraryLayoutDS, MrItineraryLayoutEH, MrLayoutStateService, MrLocaleService, MrMapDS, MrMapEH, MrMapLayoutComponent, MrMapLayoutConfig, MrMapLayoutDS, MrMapLayoutEH, MrMenuService, MrMetadataDS, MrMetadataDynamicComponent, MrMetadataDynamicDS, MrMetadataDynamicEH, MrMetadataReadmoreComponent, MrNavDS, MrNavEH, MrNetworkDS, MrNetworkEH, MrNetworkLayoutComponent, MrNetworkLayoutConfig, MrNetworkLayoutDS, MrNetworkLayoutEH, MrPostsLayoutComponent, MrPostsLayoutConfig, MrPostsLayoutDS, MrPostsLayoutEH, MrResourceLayoutComponent, MrResourceLayoutConfig, MrResourceLayoutDS, MrResourceLayoutEH, MrResourceModalComponent, MrResourceModalService, MrResourceTabsDS, MrSearchFacetsLayoutComponent, MrSearchLayoutComponent, MrSearchLayoutConfig, MrSearchLayoutDS, MrSearchLayoutEH, MrSearchPageDescriptionComponent, MrSearchPageDescriptionDS, MrSearchPageDescriptionEH, MrSearchPageTitleDS, MrSearchPageTitleEH, MrSearchResultsDS, MrSearchResultsEH, MrSearchResultsTitleDS, MrSearchResultsTitleEH, MrSearchService, MrSearchTagsDS, MrSearchTagsEH, MrStaticLayoutComponent, MrStaticLayoutConfig, MrStaticLayoutDS, MrStaticLayoutEH, MrStaticMetadataDS, MrTextViewerDS, MrTextViewerEH, MrTimelineDS, MrTimelineEH, MrTimelineLayoutComponent, MrTimelineLayoutConfig, MrTimelineLayoutDS, MrTimelineLayoutEH, MrTranslationsLoaderService, MrYearHeaderDS, MrYearHeaderEH, N7BoilerplateMurucaModule, RESULTS_REQUEST_STATE_CONTEXT, ReadMoreComponent, SECTION_STATE_CONTEXT, SearchFacetsLayoutConfig, SearchFacetsLayoutDS, SearchFacetsLayoutEH };
+export { DynamicPathGuard, FACETS_REQUEST_STATE_CONTEXT, FACET_STATE_CONTEXT, INPUT_STATE_CONTEXT, LayoutState, LocaleDependenciesGuard, MrAdvancedResultComponent, MrAdvancedResultsLayoutComponent, MrAdvancedResultsLayoutConfig, MrAdvancedResultsLayoutDS, MrAdvancedResultsLayoutEH, MrAdvancedSearchLayoutComponent, MrAdvancedSearchLayoutConfig, MrAdvancedSearchLayoutDS, MrAdvancedSearchLayoutEH, MrAdvancedSearchTagsDS, MrBreadcrumbsDS, MrButtonDS, MrButtonEH, MrCollectionDS, MrCollectionEH, MrContentDS, MrDummyEH, MrFiltersDS, MrFiltersEH, MrFooterService, MrFormComponent, MrFormWrapperAccordionComponent, MrFormWrapperAccordionDS, MrFormWrapperAccordionEH, MrGalleryComponent, MrGalleryDS, MrGalleryEH, MrHeroDS, MrHomeLayoutComponent, MrHomeLayoutConfig, MrHomeLayoutDS, MrHomeLayoutEH, MrImageViewerDS, MrImageViewerIiifDS, MrImageViewerOverlayDetailsDS, MrImageViewerToolsDS, MrInfoBoxDS, MrInnerTitleDS, MrItemPreviewDS, MrItemPreviewsDS, MrItineraryLayoutComponent, MrItineraryLayoutConfig, MrItineraryLayoutDS, MrItineraryLayoutEH, MrLayoutStateService, MrLocaleService, MrMapDS, MrMapEH, MrMapLayoutComponent, MrMapLayoutConfig, MrMapLayoutDS, MrMapLayoutEH, MrMenuService, MrMetadataDS, MrMetadataDynamicComponent, MrMetadataDynamicDS, MrMetadataDynamicEH, MrMetadataReadmoreComponent, MrNavDS, MrNavEH, MrNetworkDS, MrNetworkEH, MrNetworkLayoutComponent, MrNetworkLayoutConfig, MrNetworkLayoutDS, MrNetworkLayoutEH, MrParallelTextViewerDS, MrParallelTextViewerEH, MrPostsLayoutComponent, MrPostsLayoutConfig, MrPostsLayoutDS, MrPostsLayoutEH, MrResourceLayoutComponent, MrResourceLayoutConfig, MrResourceLayoutDS, MrResourceLayoutEH, MrResourceModalComponent, MrResourceModalService, MrResourceTabsDS, MrSearchFacetsLayoutComponent, MrSearchLayoutComponent, MrSearchLayoutConfig, MrSearchLayoutDS, MrSearchLayoutEH, MrSearchPageDescriptionComponent, MrSearchPageDescriptionDS, MrSearchPageDescriptionEH, MrSearchPageTitleDS, MrSearchPageTitleEH, MrSearchResultsDS, MrSearchResultsEH, MrSearchResultsTitleDS, MrSearchResultsTitleEH, MrSearchService, MrSearchTagsDS, MrSearchTagsEH, MrStaticLayoutComponent, MrStaticLayoutConfig, MrStaticLayoutDS, MrStaticLayoutEH, MrStaticMetadataDS, MrTextViewerDS, MrTextViewerEH, MrTimelineDS, MrTimelineEH, MrTimelineLayoutComponent, MrTimelineLayoutConfig, MrTimelineLayoutDS, MrTimelineLayoutEH, MrTranslationsLoaderService, MrYearHeaderDS, MrYearHeaderEH, N7BoilerplateMurucaModule, RESULTS_REQUEST_STATE_CONTEXT, ReadMoreComponent, SECTION_STATE_CONTEXT, SearchFacetsLayoutConfig, SearchFacetsLayoutDS, SearchFacetsLayoutEH };
 //# sourceMappingURL=net7-boilerplate-muruca.mjs.map