note-editor.component.html

<mat-form-field appearance="outline" class="noteEditorContent">
    <textarea matInput placeholder="{{title}}" [(ngModel)]="content"></textarea>
    <button matSuffix color="primary" mat-icon-button title="{{lang.options}}" [matMenuTriggerFor]="menuMain">
        <mat-icon fontSet="fas" fontIcon="fa-angle-right fa-2x"></mat-icon>
    </button>
    <mat-menu #menuMain="matMenu" [class]="'templateNoteListMenu'">
        <button mat-menu-item [matMenuTriggerFor]="menuTemplates" (menuOpened)="getTemplatesNote()">
            <span>{{lang.noteTemplates}}</span>
        </button>
        <button mat-menu-item [matMenuTriggerFor]="menuEntities">
            <span>{{lang.visibleBy}}</span>
        </button>
    </mat-menu>

    <mat-menu #menuTemplates="matMenu" [class]="'templateNoteListMenu'">
        <div
            style="z-index:1;position: sticky;top: 0px;text-align: center;font-size: 10px;color: white;background: #135F7F;padding: 5px;font-weight: bold;">
            {{lang.noteTemplates}}
        </div>
        <button mat-menu-item *ngFor="let template of templatesNote" matTooltip="{{template.template_content}}"
            matTooltipPosition="left" (click)="selectTemplate(template)">
            <span>{{template.template_label}}</span>
        </button>
        <button mat-menu-item *ngIf="templatesNote.length == 0" disabled>
            <span>{{lang.noTemplate}}</span>
        </button>
    </mat-menu>
    <mat-menu #menuEntities="matMenu" [class]="'templateNoteListMenu fixedWidth'">
        <div
            style="z-index:1;position: sticky;top: 0px;text-align: center;font-size: 10px;color: white;background: #135F7F;padding: 5px;font-weight: bold;">
            {{lang.entities}}
        </div>
        <ng-template matMenuContent>
            <mat-form-field floatLabel="never" appearance="outline" class="smallInput" (click)="$event.stopPropagation();" style="margin-bottom: -15px;">
                <input matInput id="searchTerm" placeholder="{{lang.searchEntities}}" [formControl]="searchTerm"
                    autocomplete="off" (click)="$event.stopPropagation();" (keydown)="$event.stopPropagation()">
            </mat-form-field>
            <ng-container>
                <button mat-menu-item *ngFor="let entity of entitiesList" class="labelFolder" [disabled]="entity.selected"
                    (click)="$event.stopPropagation();selectEntity(entity)" [title]="entity.entity_label">
                    {{entity.entity_label}}
                </button>
            </ng-container>
        </ng-template>
    </mat-menu>

    <button *ngIf="addMode" color="primary" matSuffix mat-icon-button title="{{lang.add}}" (click)="addNote()"
        [disabled]="content.trim() == '' || loading">
        <mat-icon fontSet="far" fontIcon="fa-paper-plane fa-2x"></mat-icon>
    </button>
    <button *ngIf="upMode" color="primary" matSuffix mat-icon-button title="{{lang.validate}}" (click)="updateNote()"
        [disabled]="content.trim() == '' || loading">
        <mat-icon fontSet="far" fontIcon="fa-paper-plane fa-2x"></mat-icon>
    </button>
</mat-form-field>
<div style="overflow: auto;max-height: 75px;">
    <div style="font-size: 11px;position: sticky;top: 0px;" [style.background]="(upMode && entitiesRestriction.length > 0) ? '#FFEDCC' : 'white'">{{lang.noteVisibleBy}}</div>
    <span *ngIf="entitiesRestriction.length === 0" class="label label-default noNoteRestriction">{{lang.all}}</span>
    <ng-container *ngFor="let entity of entities | sortBy: 'entity_label';let i=index;">
        <span *ngIf="entitiesRestriction.indexOf(entity.id) > -1" class="label label-default noteRestriction"
            (click)="removeEntityRestriction(entitiesRestriction.indexOf(entity.id), i)"
            title="{{lang.restrictedEntity}}"><i class="fa fa-sitemap"></i>
            {{entity.entity_label}}&nbsp;<i class="fa fa-times" style="cursor: pointer;"></i></span>
    </ng-container>
</div>