evt-angular-ovi/src/app/panels/text-panel/text-panel.component.html

<evt-panel [showSecondaryContent]="isSecondaryContentOpened()" (scrollContent)="updatePage()">
    <div header-left>
        <evt-page-selector [pageID]="pageID" (selectionChange)="currentPage$.next($event)"></evt-page-selector>
        <evt-edition-level-selector [class.hidden]="hideEditionLevelSelector" [editionLevelID]="editionLevelID" (selectionChange)="currentEdLevel$.next($event)"></evt-edition-level-selector>
        <evt-button
        label="Info"
        [iconLeft]="{icon: 'info-circle'}"
        additionalClasses="btn-primary mr-1"
        class="info-panel"
        (btnClick)="toggleSecondaryContent('Images are published courtesy of the Ministry of Culture - State Archives of Prato and are freely usable for activities of study, research, free expression of thought or creative expression, and promotion of knowledge of cultural heritage. The reproduction rights of the published images - in accordance with Articles 106, 107 and 108 of the Code of Cultural Heritage and Landscape (Legislative Decree 42/2004 as amended and supplemented) - belong to the State Archives of Prato, therefore all uses of these images, other than those stated above, must be expressly authorized (https://archiviodistatoprato.cultura.gov.it/servizi/autorizzazioni-a-pubblicare).')"
        [active]="secondaryContent === 'Info'"></evt-button>
    </div>
    <div content evtAnnotator #mainContent>
        <ng-container *ngIf="(currentStatus$ | async) as currentStatus">
            <ng-container *ngIf="isMultiplePageFlow$ | async">
                <evt-page *ngFor="let page of currentStatus.pages"
                    [attr.data-id]="page.id"
                    [data]="page"
                    [textFlow]="textFlow"
                    [itemsToHighlight]="itemsToHighlight$ | async"
                    [itemsLemsToHighlight]="itemsLemsToHighlight$ | async"
                    [itemsIperlemsToHighlight]="itemsIperlemsToHighlight$ | async"></evt-page>
            </ng-container>
            <evt-page *ngIf="(isMultiplePageFlow$ | async) === false"
                [attr.data-id]="currentStatus.currentPage.id"
                [data]="currentStatus.currentPage"
                [editionLevel]="currentStatus.editionLevel"
                [textFlow]="textFlow"
                [itemsToHighlight]="itemsToHighlight$ | async"
                [itemsLemsToHighlight]="itemsLemsToHighlight$ | async"
                [itemsIperlemsToHighlight]="itemsIperlemsToHighlight$ | async"></evt-page>
        </ng-container>
    </div>
    <div secondary-content>
        {{ getSecondaryContent() }}
    </div>

    <div footer>
        <!-- <evt-button
            [iconLeft]="{icon: 'search'}"
            label="Search"
            additionalClasses="mr-1"
            (btnClick)="toggleSecondaryContent('SEARCH_RESULTS')"
            [active]="secondaryContent === 'SEARCH_RESULTS'">
        </evt-button> -->
        <evt-entities-select (selectionChange)="itemsToHighlight$.next($event)"></evt-entities-select>
        <evt-lems-select (selectionChange)="itemsLemsToHighlight$.next($event)"></evt-lems-select>
        <evt-iperlems-select (selectionChange)="itemsIperlemsToHighlight$.next($event)"></evt-iperlems-select>
        <evt-button *ngIf="enableProseVersesToggler" 
            [iconLeft]="proseVersesTogglerIcon"
            [label]="textFlow | translate"
            additionalClasses="ml-1"
            (btnClick)="toggleProseVerses()">
        </evt-button>
    </div>
</evt-panel>