add changes

src/app/app.config.ts

@@ -5,6 +5,7 @@ import { forkJoin } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { EntitiesSelectItemGroup } from './components/entities-select/entities-select.component';
 import { LemsSelectItemGroup } from './components/lems-select/lems-select.component';
+import { IperlemsSelectItemGroup } from './components/iperlems-select/iperlems-select.component';
 import { ViewMode, ViewModeId } from './models/evt-models';
 import { Attributes, EditorialConventionLayout } from './models/evt-models';
 
@@ -94,6 +95,7 @@ export interface EditionConfig {
         relations: LemmatizedEntitiesListsConfig;
     }>;
     lemsSelectItems: LemsSelectItemGroup[];
+    iperlemsSelectItems: IperlemsSelectItemGroup[];
     entitiesSelectItems: EntitiesSelectItemGroup[];
     notSignificantVariants: string[];
     lemNotSignificantVariants: string[];

src/app/app.module.ts

@@ -38,6 +38,7 @@ import { EditorialDeclComponent } from './components/editorial-decl/editorial-de
 import { EncodingDescComponent } from './components/encoding-desc/encoding-desc.component';
 import { EntitiesSelectComponent } from './components/entities-select/entities-select.component';
 import { LemsSelectComponent } from './components/lems-select/lems-select.component';
+import { IperlemsSelectComponent } from './components/iperlems-select/iperlems-select.component';
 import { ExtentComponent } from './components/extent/extent.component';
 import { FileDescComponent } from './components/file-desc/file-desc.component';
 import { GComponent } from './components/g/g.component';
@@ -160,6 +161,7 @@ export function initializeApp(appConfig: AppConfig) {
     EncodingDescComponent,
     EntitiesSelectComponent,
     LemsSelectComponent,
+    IperlemsSelectComponent,
     EvtInfoComponent,
     ExtentComponent,
     FileDescComponent,

src/app/components/addition/addition.component.html

@@ -1,5 +1,5 @@
 <span class="add" [attr.data-edition]="editionLevel" [attr.data-place]="data.place" 
     [evtHighlight]="highlightData"  [evtEditorialConventionLayout]="editorialConventionData">
     <evt-content-viewer *ngFor="let element of data.content" [content]="element" 
-        [editionLevel]="editionLevel" [itemsToHighlight]="itemsToHighlight" [itemsLemsToHighlight]="itemsLemsToHighlight"></evt-content-viewer>
+        [editionLevel]="editionLevel" [itemsToHighlight]="itemsToHighlight" [itemsLemsToHighlight]="itemsLemsToHighlight" [itemsIperlemsToHighlight]="itemsIperlemsToHighlight"></evt-content-viewer>
 </span>

src/app/components/choice/choice.component.html

@@ -2,10 +2,10 @@
     [ngbPopover]="popContent" [autoClose]="'outside'" popoverClass="choice-popover {{data.editorialInterventionType}}" 
     container="body" [placement]="['bottom']" triggers="mouseenter:mouseleave">
     <evt-content-viewer *ngFor="let element of content" [content]="element"
-        [editionLevel]="editionLevel" [itemsToHighlight]="itemsToHighlight" [itemsLemsToHighlight]="itemsLemsToHighlight" [textFlow]="textFlow"></evt-content-viewer>
+        [editionLevel]="editionLevel" [itemsToHighlight]="itemsToHighlight" [itemsLemsToHighlight]="itemsLemsToHighlight" [itemsIperlemsToHighlight]="itemsIperlemsToHighlight" [textFlow]="textFlow"></evt-content-viewer>
 </span>
 
 <ng-template #popContent>
     <evt-content-viewer *ngFor="let element of alternativeContent" [content]="element"
-        [editionLevel]="alternativeEditionLevel" [itemsToHighlight]="itemsToHighlight" [itemsLemsToHighlight]="itemsLemsToHighlight" [textFlow]="textFlow"></evt-content-viewer>
+        [editionLevel]="alternativeEditionLevel" [itemsToHighlight]="itemsToHighlight" [itemsLemsToHighlight]="itemsLemsToHighlight" [itemsIperlemsToHighlight]="itemsIperlemsToHighlight" [textFlow]="textFlow"></evt-content-viewer>
 </ng-template>

src/app/components/components-mixins.ts

@@ -2,16 +2,20 @@ import { Directive, Input } from '@angular/core';
 import { EditionLevelType, TextFlow } from '../app.config';
 import { HighlightData } from '../models/evt-models';
 import { HighlightDataLem } from '../models/evt-models';
+import { HighlightDataIperlem } from '../models/evt-models';
 import { EntitiesSelectItem } from './entities-select/entities-select.component';
 import { LemsSelectItem } from './lems-select/lems-select.component';
+import { IperlemsSelectItem } from './iperlems-select/iperlems-select.component';
 
 @Directive()
 // tslint:disable-next-line: directive-class-suffix
 export class Highlightable {
   @Input() highlightData: HighlightData;
   @Input() highlightDataLem: HighlightDataLem;
+  @Input() highlightDataIperlem: HighlightDataIperlem;
   @Input() itemsToHighlight: EntitiesSelectItem[];
   @Input() itemsLemsToHighlight: LemsSelectItem[];
+  @Input() itemsIperlemsToHighlight: IperlemsSelectItem[];
 }
 
 @Directive()

src/app/components/content-viewer/content-viewer.component.ts

@@ -10,6 +10,8 @@ import { EntitiesSelectService } from '../../services/entities-select.service';
 import { EntitiesSelectItem } from '../entities-select/entities-select.component';
 import { LemsSelectService } from '../../services/lems-select.service';
 import { LemsSelectItem } from '../lems-select/lems-select.component';
+import { IperlemsSelectService } from '../../services/iperlems-select.service';
+import { IperlemsSelectItem } from '../iperlems-select/iperlems-select.component';
 
 @Component({
   selector: 'evt-content-viewer',
@@ -36,11 +38,20 @@ export class ContentViewerComponent implements OnDestroy {
     this.itemsLemsToHighlightChange.next(i);
   }
   get itemsLemsToHighlight() { return this.ithlems; }
+  
+  private ithiperlems: IperlemsSelectItem[];
+  @Input() set itemsIperlemsToHighlight(i: IperlemsSelectItem[]) {
+    this.ithiperlems = i;
+    this.itemsIperlemsToHighlightChange.next(i);
+  }
+
+  get itemsIperlemsToHighlight() { return this.ithiperlems; }
 
   contentChange = new BehaviorSubject<GenericElement>(undefined);
   @ViewChild('container', { read: ViewContainerRef }) container: ViewContainerRef;
   itemsToHighlightChange = new BehaviorSubject<EntitiesSelectItem[]>([]);
   itemsLemsToHighlightChange = new BehaviorSubject<LemsSelectItem[]>([]);
+  itemsIperlemsToHighlightChange = new BehaviorSubject<IperlemsSelectItem[]>([]);
 
   private edLevel: EditionLevelType;
   @Input() set editionLevel(el: EditionLevelType) {
@@ -62,6 +73,7 @@ export class ContentViewerComponent implements OnDestroy {
     private componentRegister: ComponentRegisterService,
     private entitiesSelectService: EntitiesSelectService,
     private lemsSelectService: LemsSelectService,
+    private iperlemsSelectService: IperlemsSelectService,
   ) {
   }
 
@@ -79,17 +91,20 @@ export class ContentViewerComponent implements OnDestroy {
     this.contentChange,
     this.itemsToHighlightChange,
     this.itemsLemsToHighlightChange,
+    this.itemsIperlemsToHighlightChange,
     this.editionLevelChange,
     this.textFlowChange,
   ]).pipe(
-    map(([data, itemsToHighlight, itemsLemsToHighlight, editionLevel, textFlow]) => {
+    map(([data, itemsToHighlight, itemsLemsToHighlight, itemsIperlemsToHighlight, editionLevel, textFlow]) => {
       if (this.toBeHighlighted()) {
         return {
           data,
           highlightData: this.getHighlightData(data, itemsToHighlight),
           highlightDataLem: this.getHighlightDataLem(data, itemsLemsToHighlight),
+          highlightDataIperlem: this.getHighlightDataIperlem(data, itemsIperlemsToHighlight),
           itemsToHighlight,
           itemsLemsToHighlight,
+          itemsIperlemsToHighlight,
           editionLevel,
           textFlow,
         };
@@ -146,6 +161,13 @@ export class ContentViewerComponent implements OnDestroy {
     };
   }
 
+  private getHighlightDataIperlem(data, ithiperlems: IperlemsSelectItem[]) {
+    return {
+      highlight: ithiperlems?.some(i => this.iperlemsSelectService.matchClassAndAttributes(i.value, data?.attributes ?? {}, data?.class)) ?? false,
+      highlightColor: this.iperlemsSelectService.getHighlightColor(data?.attributes ?? {}, data?.class, ithiperlems),
+    };
+  }
+
   ngOnDestroy() {
     if (this.componentRef) {
       this.componentRef.destroy();

src/app/components/deletion/deletion.component.html

@@ -1,5 +1,5 @@
 <span class="del" [attr.data-edition]="editionLevel" [attr.data-rend]="data.rend" [evtHtmlAttributes]="data?.attributes"
     [evtHighlight]="highlightData"  [evtEditorialConventionLayout]="editorialConventionData">
     <evt-content-viewer *ngFor="let element of data.content" [content]="element" [editionLevel]="editionLevel"
-        [itemsToHighlight]="itemsToHighlight" [itemsLemsToHighlight]="itemsLemsToHighlight"></evt-content-viewer>
+        [itemsToHighlight]="itemsToHighlight" [itemsLemsToHighlight]="itemsLemsToHighlight" [itemsIperlemsToHighlight]="itemsIperlemsToHighlight"></evt-content-viewer>
 </span>

src/app/components/g/g.component.html

@@ -1,17 +1,17 @@
 <ng-container *ngIf="data.content.length > 0">
     <evt-content-viewer *ngFor="let element of data.content" [content]="element" [editionLevel]="editionLevel"
-        [itemsToHighlight]="itemsToHighlight" [itemsLemsToHighlight]="itemsLemsToHighlight" [textFlow]="textFlow"></evt-content-viewer>
+        [itemsToHighlight]="itemsToHighlight" [itemsLemsToHighlight]="itemsLemsToHighlight" [itemsIperlemsToHighlight]="itemsIperlemsToHighlight" [textFlow]="textFlow"></evt-content-viewer>
 </ng-container>
 
 <ng-container *ngIf="data.content.length === 0">
     <ng-container [ngSwitch]="editionLevel">
         <ng-container *ngSwitchCase="'diplomatic'">
             <evt-content-viewer *ngFor="let element of diplomaticMapping$ | async" [content]="element"
-                [editionLevel]="editionLevel" [itemsToHighlight]="itemsToHighlight" [itemsLemsToHighlight]="itemsLemsToHighlight"[textFlow]="textFlow"></evt-content-viewer>
+                [editionLevel]="editionLevel" [itemsToHighlight]="itemsToHighlight" [itemsLemsToHighlight]="itemsLemsToHighlight" [itemsIperlemsToHighlight]="itemsIperlemsToHighlight" [textFlow]="textFlow"></evt-content-viewer>
         </ng-container>
         <ng-container *ngSwitchDefault>
             <evt-content-viewer *ngFor="let element of normalizedMapping$ | async" [content]="element"
-                [editionLevel]="editionLevel" [itemsToHighlight]="itemsToHighlight" [itemsLemsToHighlight]="itemsLemsToHighlight"[textFlow]="textFlow"></evt-content-viewer>
+                [editionLevel]="editionLevel" [itemsToHighlight]="itemsToHighlight" [itemsLemsToHighlight]="itemsLemsToHighlight" [itemsIperlemsToHighlight]="itemsIperlemsToHighlight" [textFlow]="textFlow"></evt-content-viewer>
         </ng-container>
     </ng-container>
 </ng-container>

src/app/components/generic-element/generic-element.component.html

@@ -1,3 +1,3 @@
 <evt-content-viewer class="genericElement {{data.class}}" [evtHtmlAttributes]="data?.attributes"
-	*ngFor="let el of data.content" [content]="el" [editionLevel]="editionLevel" [itemsToHighlight]="itemsToHighlight" [itemsLemsToHighlight]="itemsLemsToHighlight"
+	*ngFor="let el of data.content" [content]="el" [editionLevel]="editionLevel" [itemsToHighlight]="itemsToHighlight" [itemsLemsToHighlight]="itemsLemsToHighlight" [itemsIperlemsToHighlight]="itemsIperlemsToHighlight"
 	[evtHighlight]="highlightData"  [textFlow]="textFlow"></evt-content-viewer>

src/app/components/iperlems-select/iperlems-select.component.html

@@ -0,0 +1,39 @@
+<ng-container *ngIf="iperlemsTypes.length > 0">
+    <ng-select
+        [items]="iperlemsTypes" 
+        [multiple]="true" 
+        [closeOnSelect]="false" 
+        [searchable]="false"
+        [placeholder]="'selectIperlemsItems' | translate" 
+        [(ngModel)]="selectedIperlemTypes" 
+        [disabled]="iperlemsTypes.length === 0" 
+        groupBy="group"
+        (change)="updateSelectedIperlemTypes($event)">
+        <ng-template ng-header-tmp>
+            <div class="lem-select-toolbar">
+                <div class="w-100 text-dark select-all-btn">
+                    <input id="select-all" type="checkbox" class="mr-2" (click)="toggleSelection()"
+                        [checked]="selectedIperlemTypes?.length === iperlemsTypes.length"/>
+                    <label for="select-all" class="m-0">{{ 'selectIperlemsAll' | translate }}</label>
+                </div>
+            </div>
+        </ng-template>
+        <ng-template ng-option-tmp let-item="item" let-item$="item$" let-index="index" let-search="searchTerm">
+            <input id="item-{{index}}" type="checkbox" [ngModel]="item$.selected"/>
+            <evt-icon [iconInfo]="iconColor" [style.color]="item.color"></evt-icon>
+            <span class="ng-value-label">{{item.label | translate}}</span>
+        </ng-template>
+        <ng-template ng-multi-label-tmp let-items="items" let-clear="clear">
+            <ng-container *ngIf="items.length === 1">
+                <div class="ng-value" *ngFor="let item of items | slice:0:1">
+                    <evt-icon [iconInfo]="iconColor" [style.color]="item.color"></evt-icon>
+                    <span class="ng-value-label">{{item.label}}</span>
+                    <span class="ng-value-icon right" (click)="clear(item)" aria-hidden="true">×</span>
+                </div>
+            </ng-container>
+            <div class="ng-value" *ngIf="items.length > 1">
+                <span class="ng-value-label">{{items.length}} {{'selected' | translate}}</span>
+            </div>
+        </ng-template>
+    </ng-select>  
+</ng-container>

src/app/components/iperlems-select/iperlems-select.component.scss

@@ -0,0 +1,30 @@
+// ng-select overrides
+::ng-deep .ng-select {
+    min-width: 150px;
+}
+
+::ng-deep .ng-dropdown-panel {
+    .ng-dropdown-panel-items {
+        .ng-optgroup {
+            font-size: 90%;
+            font-variant: small-caps;
+        }
+
+        .ng-option {
+            padding-left: 10px !important;
+        }
+    }
+}
+
+.lem-select-toolbar {
+    display: flex;
+
+    .btn {
+        flex-grow: 1;
+    }
+}
+
+.select-all-btn {
+    cursor: pointer;
+}
+

src/app/components/iperlems-select/iperlems-select.component.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { IperlemsSelectComponent } from './iperlems-select.component';
+
+describe('IperlemsSelectComponent', () => {
+  let component: IperlemsSelectComponent;
+  let fixture: ComponentFixture<IperlemsSelectComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ IperlemsSelectComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(IperlemsSelectComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/iperlems-select/iperlems-select.component.ts

@@ -0,0 +1,55 @@
+import { Component, EventEmitter, Output } from '@angular/core';
+import { AppConfig } from '../../app.config';
+import { EvtIconInfo } from '../../ui-components/icon/icon.component';
+
+export interface IperlemsSelectItemGroup {
+  label: string;
+  items: IperlemsSelectItem[];
+  disabled?: boolean;
+}
+export interface IperlemsSelectItem {
+  label: string;
+  value: string; // This will be used to identify the items to be selected, by indicating tag name and attributes (for XML)
+  color?: string;
+  disabled?: boolean;
+}
+
+@Component({
+  selector: 'evt-iperlems-select',
+  templateUrl: './iperlems-select.component.html',
+  styleUrls: ['./iperlems-select.component.scss'],
+})
+export class IperlemsSelectComponent {
+  @Output() selectionChange: EventEmitter<IperlemsSelectItem[]> = new EventEmitter();
+  
+  iperlemsTypes: Array<IperlemsSelectItem & { group: string }> = (AppConfig.evtSettings.edition.iperlemsSelectItems || [])
+    .filter(g => !g.disabled)
+    .reduce((x, y) => [...x, ...y.items.filter(i => !i.disabled).map(i => ({ ...i, group: y.label }))], []);
+
+  iconColor: EvtIconInfo = {
+    icon: 'circle',
+    iconSet: 'fas',
+    additionalClasses: 'ml-2 mr-1',
+  };
+
+  public selectedIperlemTypes: IperlemsSelectItem[] = [];
+
+  updateSelectedIperlemTypes(iperlemsTypes: IperlemsSelectItem[]) {
+    if (Array.isArray(iperlemsTypes)) { // BUGFIX: There is a bug in ng-select change event and second time the parameter is an event
+      this.selectionChange.emit(iperlemsTypes);
+      // console.log('Prova', AppConfig.evtSettings.edition.iperlemsSelectItems || [])
+    }
+    
+  }
+
+  toggleSelection() {
+    if (this.selectedIperlemTypes.length < this.iperlemsTypes.length) {
+      this.selectedIperlemTypes = this.iperlemsTypes;
+    } else {
+      this.selectedIperlemTypes = [];
+    }
+    this.selectionChange.emit(this.selectedIperlemTypes);
+    // console.log('Prova 0', AppConfig.evtSettings.edition.iperlemsSelectItems[0])
+    // console.log('Prova 1', AppConfig.evtSettings.edition.iperlemsSelectItems[1])
+  }
+}

src/app/components/lemmatized-entity-ref/lemmatized-entity-ref.component.html

@@ -3,7 +3,7 @@
         lemmaHighlight: (evtStatusService.currentLemmatizedEntityId$ | async) === data.entityLemId && !opened,
         noDetails: (availableLemEntities$ | async) === false
     }" [evtHighlight]="highlightDataLem" [evtHtmlAttributes]="data?.attributes">
-    <evt-content-viewer *ngFor="let element of data.content" [content]="element" [editionLevel]="editionLevel" [itemsLemsToHighlight]="itemsLemsToHighlight" [textFlow]="textFlow"></evt-content-viewer>
+    <evt-content-viewer *ngFor="let element of data.content" [content]="element" [editionLevel]="editionLevel" [itemsLemsToHighlight]="itemsLemsToHighlight" [itemsIperlemsToHighlight]="itemsIperlemsToHighlight" [textFlow]="textFlow"></evt-content-viewer>
 </span>
 <ng-container *ngIf="availableLemEntities$ | async">
     <div *ngIf="opened" class="lemmatizedEntityRefDetail {{ data.entityLemType }}">

src/app/components/lems-select/lems-select.component.html

@@ -36,46 +36,4 @@
             </div>
         </ng-template>
     </ng-select>  
-</ng-container>
-<ng-container *ngIf="lemsTypes.length > 0">
-    <ng-select
-        [items]="lemsTypes" 
-        [multiple]="true" 
-        [closeOnSelect]="false" 
-        [searchable]="false"
-        [placeholder]="'selectIperLemsItems' | translate" 
-        [(ngModel)]="selectedLemTypes" 
-        [disabled]="lemsTypes.length === 0" 
-        groupBy="group"
-        (change)="updateSelectedLemTypes($event)">
-        <ng-template ng-header-tmp>
-            <div class="lem-select-toolbar">
-                <div class="w-100 text-dark select-all-btn">
-                    <input id="select-all" type="checkbox" class="mr-2" (click)="toggleSelection()"
-                        [checked]="selectedLemTypes?.length === lemsTypes.length"/>
-                    <label for="select-all" class="m-0">{{ 'selectLemsAll' | translate }}</label>
-                </div>
-            </div>
-        </ng-template>
-        <ng-template ng-option-tmp let-item="item" let-item$="item$" let-index="index" let-search="searchTerm">
-            <input id="item-{{index}}" type="checkbox" [ngModel]="item$.selected"/> 
-            <!-- *ngIf="item.label==='Sostantivo maschile' or item.label==='Sostantivo femminile' or item.label==='Aggettivo' or item.label==='Avverbio' or item.label==='Nome proprio' or item.label==='Verbo' or item.label==='Forma generica'"> -->
-            <span class="ng-value-label">
-                <evt-icon [iconInfo]="iconColor" [style.color]="item.color"></evt-icon>
-                {{item.label | translate}}</span>
-        </ng-template>
-        <ng-template ng-multi-label-tmp let-items="items" let-clear="clear">
-            <ng-container *ngIf="items.label === 'Iperlemmi'">
-                <div class="ng-value" *ngFor="let item of items | slice:0:1">
-                    <span class="ng-value-label"><evt-icon [iconInfo]="iconColor" [style.color]="item.color"></evt-icon>
-                        {{item.label}}
-                    </span>
-                    <span class="ng-value-icon right" (click)="clear(item)" aria-hidden="true">×</span>
-                </div>
-            </ng-container>
-            <div class="ng-value" *ngIf="items.length > 1">
-                <span class="ng-value-label">{{items.length}} {{'selected' | translate}}</span>
-            </div>
-        </ng-template>
-    </ng-select>  
 </ng-container>

src/app/components/lems-select/lems-select.component.ts

@@ -37,7 +37,7 @@ export class LemsSelectComponent {
   updateSelectedLemTypes(lemsTypes: LemsSelectItem[]) {
     if (Array.isArray(lemsTypes)) { // BUGFIX: There is a bug in ng-select change event and second time the parameter is an event
       this.selectionChange.emit(lemsTypes);
-      console.log('Prova', AppConfig.evtSettings.edition.lemsSelectItems || [])
+      // console.log('Prova', AppConfig.evtSettings.edition.lemsSelectItems || [])
     }
     
   }
@@ -49,7 +49,7 @@ export class LemsSelectComponent {
       this.selectedLemTypes = [];
     }
     this.selectionChange.emit(this.selectedLemTypes);
-    console.log('Prova 0', AppConfig.evtSettings.edition.lemsSelectItems[0])
-    console.log('Prova 1', AppConfig.evtSettings.edition.lemsSelectItems[1])
+    // console.log('Prova 0', AppConfig.evtSettings.edition.lemsSelectItems[0])
+    // console.log('Prova 1', AppConfig.evtSettings.edition.lemsSelectItems[1])
   }
 }

src/app/components/page/page.component.html

@@ -1,6 +1,6 @@
 <evt-content-viewer
     *ngFor="let element of (pageDataChange | async)?.parsedContent || []"
-    [content]="element" [editionLevel]="editionLevel?.id" [itemsToHighlight]="itemsToHighlight" [itemsLemsToHighlight]="itemsLemsToHighlight" [textFlow]="textFlow">
+    [content]="element" [editionLevel]="editionLevel?.id" [itemsToHighlight]="itemsToHighlight" [itemsLemsToHighlight]="itemsLemsToHighlight" [itemsIperlemsToHighlight]="itemsIperlemsToHighlight" [textFlow]="textFlow">
 </evt-content-viewer>
 <ngx-spinner
     *ngIf="busy | async"

src/app/components/page/page.component.ts

@@ -4,6 +4,7 @@ import { EditionLevel } from '../../app.config';
 import { Page } from '../../models/evt-models';
 import { EntitiesSelectItem } from '../entities-select/entities-select.component';
 import { LemsSelectItem } from '../lems-select/lems-select.component';
+import { IperlemsSelectItem } from '../iperlems-select/iperlems-select.component';
 
 @Component({
   selector: 'evt-page',
@@ -13,6 +14,7 @@ import { LemsSelectItem } from '../lems-select/lems-select.component';
 export class PageComponent {
   @Input() itemsToHighlight: EntitiesSelectItem[];
   @Input() itemsLemsToHighlight: LemsSelectItem[];
+  @Input() itemsIperlemsToHighlight: IperlemsSelectItem[];
   @Input() editionLevel: EditionLevel;
   @Input() textFlow: boolean;
 

src/app/components/paragraph/paragraph.component.html

@@ -1,6 +1,6 @@
 <p [evtHtmlAttributes]="data?.attributes">
 	<span class="p-num" *ngIf="data.n">{{data.n}}</span>
 	<evt-content-viewer *ngFor="let el of data.content" [content]="el" [editionLevel]="editionLevel" 
-		[itemsToHighlight]="itemsToHighlight" [itemsLemsToHighlight]="itemsLemsToHighlight" [evtHighlight]="highlightData" [textFlow]="textFlow">
+		[itemsToHighlight]="itemsToHighlight" [itemsLemsToHighlight]="itemsLemsToHighlight" [itemsIperlemsToHighlight]="itemsIperlemsToHighlight" [evtHighlight]="highlightData" [textFlow]="textFlow">
 	</evt-content-viewer>
 </p>

src/app/components/word/word.component.html

@@ -1,5 +1,5 @@
 <span class="word {{data.class}}" (click)="toggleLemData($event)" [evtHtmlAttributes]="data.attributes">
 	<evt-content-viewer *ngFor="let el of word" [content]="el" [editionLevel]="editionLevel" 
-		[itemsToHighlight]="itemsToHighlight" [itemsLemsToHighlight]="itemsLemsToHighlight" [evtHighlight]="highlightData">
+		[itemsToHighlight]="itemsToHighlight" [itemsLemsToHighlight]="itemsLemsToHighlight" [itemsIperlemsToHighlight]="itemsIperlemsToHighlight" [evtHighlight]="highlightData">
 	</evt-content-viewer>
 </span>

src/app/models/evt-models.ts

@@ -25,6 +25,11 @@ export interface HighlightDataLem  {
     highlightColorLem: string;
 }
 
+export interface HighlightDataIperlem  {
+    highlightIperlem: boolean;
+    highlightColorIperlem: string;
+}
+
 export class GenericElement {
     // tslint:disable-next-line: no-any
     type: Type<any>;

src/app/panels/text-panel/text-panel.component.html

@@ -4,8 +4,8 @@
             label="Info"
             [iconLeft]="{icon: 'info-circle'}"
             additionalClasses="btn-primary mr-1"
-            (btnClick)="toggleSecondaryContent('INFO')"
-            [active]="secondaryContent === 'INFO'"></evt-button>
+            (btnClick)="toggleSecondaryContent('Le immagini sono pubblicate su concessione del Ministero della cultura – Archivio di Stato di Prato e sono liberamente utilizzabili per attività di studio, ricerca, libera manifestazione del pensiero o espressione creativa, promozione della conoscenza del patrimonio culturale. I diritti di riproduzione delle immagini pubblicate – ai sensi degli articoli 106, 107 e 108 del Codice dei beni culturali e del paesaggio (D.Lgs. 42/2004 e s.m.i.) – appartengono dell’Archivio di Stato di Prato, pertanto tutti gli usi di queste immagini, diversi da quelli sopra esposti, debbono essere espressamente autorizzati (https://archiviodistatoprato.cultura.gov.it/servizi/autorizzazioni-a-pubblicare).')"
+            [active]="secondaryContent === 'Info'"></evt-button>
         <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>
     </div>
@@ -17,7 +17,8 @@
                     [data]="page"
                     [textFlow]="textFlow"
                     [itemsToHighlight]="itemsToHighlight$ | async"
-                    [itemsLemsToHighlight]="itemsLemsToHighlight$ | async"></evt-page>
+                    [itemsLemsToHighlight]="itemsLemsToHighlight$ | async"
+                    [itemsIperlemsToHighlight]="itemsIperlemsToHighlight$ | async"></evt-page>
             </ng-container>
             <evt-page *ngIf="(isMultiplePageFlow$ | async) === false"
                 [attr.data-id]="currentStatus.currentPage.id"
@@ -25,7 +26,8 @@
                 [editionLevel]="currentStatus.editionLevel"
                 [textFlow]="textFlow"
                 [itemsToHighlight]="itemsToHighlight$ | async"
-                [itemsLemsToHighlight]="itemsLemsToHighlight$ | async"></evt-page>
+                [itemsLemsToHighlight]="itemsLemsToHighlight$ | async"
+                [itemsIperlemsToHighlight]="itemsIperlemsToHighlight$ | async"></evt-page>
         </ng-container>
     </div>
     <div secondary-content>
@@ -42,6 +44,7 @@
         </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"

src/app/panels/text-panel/text-panel.component.ts

@@ -4,6 +4,7 @@ import { delay, distinctUntilChanged, filter, map, shareReplay, take } from 'rxj
 import { AppConfig, EditionLevel, EditionLevelType, TextFlow } from '../../app.config';
 import { EntitiesSelectItem } from '../../components/entities-select/entities-select.component';
 import { LemsSelectItem } from '../../components/lems-select/lems-select.component';
+import { IperlemsSelectItem } from '../../components/iperlems-select/iperlems-select.component';
 import { Page } from '../../models/evt-models';
 import { EVTModelService } from '../../services/evt-model.service';
 import { EVTStatusService } from '../../services/evt-status.service';
@@ -54,6 +55,7 @@ export class TextPanelComponent implements OnInit, OnDestroy {
 
   public itemsToHighlight$ = new Subject<EntitiesSelectItem[]>();
   public itemsLemsToHighlight$ = new Subject<LemsSelectItem[]>();
+  public itemsIperlemsToHighlight$ = new Subject<IperlemsSelectItem[]>();
   public secondaryContent = '';
   private showSecondaryContent = false;
 

src/app/services/iperlems-select.service.ts

@@ -0,0 +1,70 @@
+import { Injectable } from '@angular/core';
+import { Subject } from 'rxjs';
+import { shareReplay } from 'rxjs/operators';
+import { AppConfig } from '../app.config';
+import { IperlemsSelectItem } from '../components/iperlems-select/iperlems-select.component';
+import { Attributes } from '../models/evt-models';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class IperlemsSelectService {
+  public updateIperlemsSelection$ = new Subject<IperlemsSelectItem[]>();
+  public selectedIperlemsItems$ = this.updateIperlemsSelection$.pipe(
+    shareReplay(1),
+  );
+
+  public getClassNameFromValue(value) {
+    return value.toLowerCase().replace(/\s/g, '').replace(/(\[.*?\])/g, '');
+  }
+
+  public getAttributesFromValue(value): Array<{ key: string, value: string }> {
+    return (value.toLowerCase().replace(/\s/g, '').match(/(\[.*?\])/g) || [])
+      .map(i => i.replace(/(\[|\]|\')/g, '').split('=')).map(i => ({ key: i[0], value: i[1] }));
+  }
+
+  public matchClassAndAttributes(valueForCheck: string, attributesToCheck: Attributes, classToCheck: string) {
+    return valueForCheck.split(',')
+      .some(v => this.matchClass(v, classToCheck) && this.matchAttributes(v, attributesToCheck));
+  }
+
+  public matchClass(classForCheck: string, classToCheck: string) {
+    return classToCheck === this.getClassNameFromValue(classForCheck);
+  }
+
+  public matchAttributes(attributesForCheck: string, attributesToCheck: Attributes) {
+    return this.getAttributesFromValue(attributesForCheck).every(a => attributesToCheck[a.key] === a.value);
+  }
+
+  public getHighlightColor(attributesToCheck: Attributes, classNameToCheck: string, selectedIperlemsItems?: IperlemsSelectItem[]) {
+    const iperlemsSelectItems = AppConfig.evtSettings.edition.iperlemsSelectItems
+      .reduce((i: IperlemsSelectItem[], g) => i.concat(g.items), [])
+      .reduce((x: IperlemsSelectItem[], y) => {
+        const multiValues: IperlemsSelectItem[] = [];
+        y.value.split(',').forEach(t => {
+          multiValues.push({ ...y, value: t });
+        });
+
+        return x.concat(multiValues);
+      },      []);
+
+    let bestMatch: IperlemsSelectItem & { score: number };
+    iperlemsSelectItems.forEach(item => {
+      let score = 0;
+      score += this.matchClass(item.value, classNameToCheck) ? 1 : 0;
+      const attributes = this.getAttributesFromValue(item.value);
+      score += attributes.length && this.matchAttributes(item.value, attributesToCheck) ? 1 : 0;
+      if (score > 0 && selectedIperlemsItems) {
+        score += selectedIperlemsItems.find(i => i.value === item.value) ? 1 : 0;
+      }
+      if (score > 0 && (!bestMatch || bestMatch.score < score)) {
+        bestMatch = {
+          ...item,
+          score,
+        };
+      }
+    });
+
+    return bestMatch ? bestMatch.color : '';
+  }
+}

src/assets/config/edition_config.json

@@ -54,7 +54,6 @@
 		{
 			"label": "Categorie lessicali",
 			"items": [
-				
 				{
 					"value": "w[pos='s.m.']",
 					"label": "Sostantivo maschile",
@@ -92,11 +91,12 @@
 				}
 			]
 			
-		},
+		}
+	],
+	"iperlemsSelectItems": [
 		{
 		"label": "Iperlemmi",
-			"items": [
-				
+			"items": [			
 				{
 					"value": "w[type='abbigliamento e arredi']",
 					"label": "abbigliamento e arredi",

src/assets/data/main.xml

@@ -55611,7 +55611,7 @@
             <xi:include href="lettere/83d.xml" xmlns:xi="http://www.w3.org/2001/XInclude" xpointer="83d_text"/>
             <xi:include href="lettere/v39.xml" xmlns:xi="http://www.w3.org/2001/XInclude" xpointer="v39_text"/>
             <xi:include href="lettere/36c.xml" xmlns:xi="http://www.w3.org/2001/XInclude" xpointer="36c_text"/>
-            <xi:include href="lettere/d87.xml" xmlns:xi="http://www.w3.org/2001/XInclude" xpointer="d87_text"/>
+           <!-- <xi:include href="lettere/d87.xml" xmlns:xi="http://www.w3.org/2001/XInclude" xpointer="d87_text"/>
             <xi:include href="lettere/m39.xml" xmlns:xi="http://www.w3.org/2001/XInclude" xpointer="m39_text"/>
             <xi:include href="lettere/z08.xml" xmlns:xi="http://www.w3.org/2001/XInclude" xpointer="z08_text"/>
             <xi:include href="lettere/41a.xml" xmlns:xi="http://www.w3.org/2001/XInclude" xpointer="41a_text"/>
@@ -57936,7 +57936,7 @@
             <xi:include href="lettere/y63.xml" xmlns:xi="http://www.w3.org/2001/XInclude" xpointer="y63_text"/>
             <xi:include href="lettere/n52.xml" xmlns:xi="http://www.w3.org/2001/XInclude" xpointer="n52_text"/>
             <xi:include href="lettere/i34.xml" xmlns:xi="http://www.w3.org/2001/XInclude" xpointer="i34_text"/>
-            <!--<xi:include href="lettere/i20.xml" xmlns:xi="http://www.w3.org/2001/XInclude" xpointer="i20_text"/>
+            <xi:include href="lettere/i20.xml" xmlns:xi="http://www.w3.org/2001/XInclude" xpointer="i20_text"/>
             <xi:include href="lettere/n46.xml" xmlns:xi="http://www.w3.org/2001/XInclude" xpointer="n46_text"/>
             <xi:include href="lettere/y77.xml" xmlns:xi="http://www.w3.org/2001/XInclude" xpointer="y77_text"/>
             <xi:include href="lettere/w44.xml" xmlns:xi="http://www.w3.org/2001/XInclude" xpointer="w44_text"/>

src/assets/i18n/en.json

@@ -30,7 +30,7 @@
     "relations": "Relations",
     "selectItems": "Select items",
     "selectLemsItems": "Select lems",
-    "selectIperLemsItems": "Select iperlems",
+    "selectIperlemsItems": "Select iperlems",
     "persons": "Persons",
     "places": "Places",
     "organizations": "Organizations",
@@ -41,6 +41,8 @@
     "clearAll": "Clear all",
     "selectLemsAll": "Select all lems",
     "clearLemsAll": "Clear all lems",
+    "selectIperlemsAll": "Select all iperlems",
+    "clearIperlemsAll": "Clear all iperlems",
     "bishops": "Bishops",
     "diplomatic": "Diplomatic",
     "interpretative": "Interpretative",

src/assets/i18n/it.json

@@ -29,7 +29,7 @@
     "relations": "Relazioni",
     "selectItems": "Seleziona elementi",
     "selectLemsItems": "Seleziona categorie grammaticali",
-    "selectIperLemsItems": "Seleziona iperlemmi",
+    "selectIperlemsItems": "Seleziona iperlemmi",
     "persons": "Persone",
     "places": "Luoghi",
     "organizations": "Organizzazioni",
@@ -40,6 +40,8 @@
     "clearAll": "Pulisci selezione",
     "selectLemsAll": "Seleziona tutto",
     "clearLemsAll": "Pulisci selezione",
+    "selectIperlemsAll": "Seleziona tutto",
+    "clearIperlemsAll": "Pulisci selezione",
     "bishops": "Vescovi",
     "diplomatic": "Diplomatica",
     "interpretative": "Interpretativa",