feat(edition): add disclaimer button to WE textcritics

src/app/shared/disclaimer-workeditions/disclaimer-workeditions.component.html

@@ -0,0 +1,3 @@
+<span class="text-danger"
+    ><fa-icon [icon]="faCalendarXmark" [ngbPopover]="disclaimer" popoverTitle="Disclaimer"></fa-icon>
+</span>

src/app/shared/disclaimer-workeditions/disclaimer-workeditions.component.spec.ts

@@ -0,0 +1,93 @@
+import { DebugElement, NgModule } from '@angular/core';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { IconDefinition } from '@fortawesome/angular-fontawesome';
+import { FontAwesomeTestingModule } from '@fortawesome/angular-fontawesome/testing';
+import { faCalendarXmark } from '@fortawesome/free-solid-svg-icons';
+
+import { NgbConfig, NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap';
+
+import { expectToBe, expectToContain, expectToEqual, getAndExpectDebugElementByCss } from '@testing/expect-helper';
+
+import { DisclaimerWorkeditionsComponent } from './disclaimer-workeditions.component';
+
+describe('DisclaimerWorkeditionsComponent', () => {
+    let component: DisclaimerWorkeditionsComponent;
+    let fixture: ComponentFixture<DisclaimerWorkeditionsComponent>;
+    let compDe: DebugElement;
+
+    let expectedDisclaimer: string;
+    let expectedFaCalendarXmark: IconDefinition;
+
+    // global NgbConfigModule
+    @NgModule({ imports: [NgbPopoverModule], exports: [NgbPopoverModule] })
+    class NgbConfigModule {
+        constructor(config: NgbConfig) {
+            // Set animations to false
+            config.animation = false;
+        }
+    }
+
+    beforeEach(waitForAsync(() => {
+        TestBed.configureTestingModule({
+            imports: [FontAwesomeTestingModule, NgbConfigModule],
+            declarations: [DisclaimerWorkeditionsComponent],
+        }).compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(DisclaimerWorkeditionsComponent);
+        component = fixture.componentInstance;
+        compDe = fixture.debugElement;
+
+        // Test data
+        expectedDisclaimer =
+            'Werkeditionen sind aus rechtlichen Gründen frühestens ab 2049 online verfügbar. Bis dahin konsultieren Sie bitte die entsprechende Printausgabe.';
+        expectedFaCalendarXmark = faCalendarXmark;
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+
+    describe('BEFORE initial data binding', () => {
+        it('... should have `disclaimer`', () => {
+            expectToEqual(component.disclaimer, expectedDisclaimer);
+        });
+
+        it('... should have `faCalendarXmark`', () => {
+            expectToEqual(component.faCalendarXmark, expectedFaCalendarXmark);
+        });
+
+        it('... should have correct NgbPopoverConfig', () => {
+            expectToBe(component.config.placement, 'top');
+            expectToBe(component.config.container, 'body');
+            expectToBe(component.config.triggers, 'mouseenter:mouseleave');
+        });
+    });
+
+    describe('AFTER initial data binding', () => {
+        beforeEach(() => {
+            // Trigger initial data binding
+            fixture.detectChanges();
+        });
+
+        describe('VIEW', () => {
+            it('... should contain a text-danger span', () => {
+                const spanDes = getAndExpectDebugElementByCss(compDe, 'span', 1, 1);
+                const spanEl: HTMLSpanElement = spanDes[0].nativeElement;
+
+                expectToContain(spanEl.classList, 'text-danger');
+            });
+
+            it('... should contain a fa-icon with Xmark in text-danger span', () => {
+                const spanDes = getAndExpectDebugElementByCss(compDe, 'span', 1, 1);
+
+                const faIconDes = getAndExpectDebugElementByCss(spanDes[0], 'fa-icon', 1, 1);
+                const faIconIns = faIconDes[0].componentInstance.icon;
+
+                expectToEqual(faIconIns, expectedFaCalendarXmark);
+            });
+        });
+    });
+});

src/app/shared/disclaimer-workeditions/disclaimer-workeditions.component.ts

@@ -0,0 +1,45 @@
+import { Component } from '@angular/core';
+
+import { faCalendarXmark } from '@fortawesome/free-solid-svg-icons';
+import { NgbPopoverConfig } from '@ng-bootstrap/ng-bootstrap';
+
+/**
+ * The DisclaimerWorkeditions component.
+ *
+ * It contains the disclaimer for work editions.
+ */
+@Component({
+    selector: 'awg-disclaimer-workeditions',
+    templateUrl: './disclaimer-workeditions.component.html',
+    styleUrls: ['./disclaimer-workeditions.component.scss'],
+})
+export class DisclaimerWorkeditionsComponent {
+    /**
+     * Public variable: disclaimer.
+     *
+     *
+     * It keeps the disclaimer for work editions.
+     */
+    disclaimer =
+        'Werkeditionen sind aus rechtlichen Gründen frühestens ab 2049 online verfügbar. Bis dahin konsultieren Sie bitte die entsprechende Printausgabe.';
+
+    /**
+     * Public variable: faCalendarXmark.
+     *
+     * It instantiates fontawesome's faCalendarXmark icon.
+     */
+    faCalendarXmark = faCalendarXmark;
+
+    /**
+     * Constructor of the DisclaimerWorkeditionsComponent.
+     *
+     * It declares an instance of the NgbPopoverConfig.
+     *
+     * @param {NgbPopoverConfig} config Instance of the NgbPopoverConfig.
+     */
+    constructor(public config: NgbPopoverConfig) {
+        config.placement = 'top';
+        config.container = 'body';
+        config.triggers = 'mouseenter:mouseleave';
+    }
+}

src/app/shared/shared.module.ts

@@ -17,6 +17,7 @@ import { CompileHtmlModule } from './compile-html';
 import { AddressComponent } from './address/address.component';
 import { AlertErrorComponent } from './alert-error/alert-error.component';
 import { AlertInfoComponent } from './alert-info/alert-info.component';
+import { DisclaimerWorkeditionsComponent } from './disclaimer-workeditions/disclaimer-workeditions.component';
 import { FullscreenToggleComponent } from './fullscreen-toggle/fullscreen-toggle.component';
 import { HeadingComponent } from './heading/heading.component';
 import { JsonViewerComponent } from './json-viewer/json-viewer.component';
@@ -63,6 +64,7 @@ import { OrderByPipe } from './order-by-pipe/order-by.pipe';
         AddressComponent,
         AlertErrorComponent,
         AlertInfoComponent,
+        DisclaimerWorkeditionsComponent,
         FullscreenToggleComponent,
         HeadingComponent,
         JsonViewerComponent,
@@ -96,6 +98,7 @@ import { OrderByPipe } from './order-by-pipe/order-by.pipe';
         AddressComponent,
         AlertErrorComponent,
         AlertInfoComponent,
+        DisclaimerWorkeditionsComponent,
         FullscreenToggleComponent,
         HeadingComponent,
         JsonViewerComponent,

src/app/views/edition-view/edition-outlets/edition-complex/edition-detail/edition-report/textcritics-list/textcritics-list.component.html

@@ -1,19 +1,27 @@
 @if (textcriticsData) {
     <div ngbAccordion>
-        @for (textcritics of textcriticsData.textcritics; track textcritics) {
+        @for (textcritics of textcriticsData.textcritics; track textcritics.id) {
             <div [ngbAccordionItem]="textcritics.id" [collapsed]="true">
                 <div
                     ngbAccordionHeader
                     class="accordion-button awg-accordion-button-custom-header justify-content-between">
                     <button ngbAccordionToggle class="btn btn-link text-start p-0">
                         <span [compile-html]="textcritics.label" [compile-html-ref]="ref"></span>
                     </button>
-                    <button
-                        type="button"
-                        class="btn btn-sm btn-outline-info"
-                        (click)="selectSvgSheet({ complexId: '', sheetId: textcritics.id })">
-                        Zum edierten Notentext
-                    </button>
+                    <div class="btn-group" role="group" aria-label="Button to sheets">
+                        @if (isWorkEditionId(textcritics.id)) {
+                            <button type="button" class="btn btn-sm btn-outline-info">
+                                <awg-disclaimer-workeditions></awg-disclaimer-workeditions>
+                            </button>
+                        }
+                        <button
+                            type="button"
+                            class="btn btn-sm btn-outline-info"
+                            [disabled]="isWorkEditionId(textcritics.id)"
+                            (click)="selectSvgSheet({ complexId: '', sheetId: textcritics.id })">
+                            Zum edierten Notentext
+                        </button>
+                    </div>
                 </div>
                 <div ngbAccordionCollapse>
                     <div ngbAccordionBody>