<div class="title-config"> <div class="title-wrap"> <div class="row" style="margin: 5px;"> <div class="p-content" style="width:100%"> <div class="p-tool-box d-flex" style="background: #fff;"> <nz-select class="ml-1" style="width: 120px;" [(ngModel)]="__fontFamily" (ngModelChange)="onChangeFontFamily($event)" nzPlaceHolder="Font Family" [nzDropdownMatchSelectWidth]="false"> <nz-option [nzValue]="font" nzCustomContent [nzLabel]="font" *ngFor="let font of fontFamilyList"> <span [ngStyle]="{'font-family': font}" >{{font}}</span> </nz-option> </nz-select> <nz-select class="ml-1" style="width: 110px;" [(ngModel)]="__fontSize" (ngModelChange)="onChangeFontSize()" nzPlaceHolder="Font Size"> <nz-option [nzValue]="i" [nzLabel]="'Size - ' + i" *ngFor="let i of fontSizeRange"></nz-option> </nz-select> <div class="p-divider"></div> <div class="i-tool-font-btn d-flex mr-2"> <div class="position-relative fa-icon" (click)="onChangeBold()"> <!-- <div class="fa fa-bold"></div>--> <fa-icon icon="bold"></fa-icon> </div> </div> <div class="i-tool-font-btn d-flex mr-2"> <div class="position-relative fa-icon" (click)="onChangeItalic()"> <!-- <div class="fa fa-italic"></div>--> <fa-icon icon="italic"></fa-icon> </div> </div> <div class="i-tool-font-btn d-flex mr-2"> <div class="position-relative fa-icon" (click)="onChangeUnderline()"> <!-- <div class="fa fa-underline"></div>--> <fa-icon icon="underline"></fa-icon> </div> </div> <div class="i-tool-font-btn d-flex"> <div class="position-relative fa-icon" (click)="onChangeStrikethrough()"> <!-- <div class="fa fa-strikethrough"></div>--> <fa-icon icon="strikethrough"></fa-icon> </div> </div> <div class="p-divider"></div> <div class="i-tool-font-color d-flex"> <div class="position-relative i-left flex-fill" (click)="onChangeFontColor($event)"> <!-- <div class="fa fa-font"></div>--> <fa-icon icon="palette"></fa-icon> <div class="i-color" [style.background-color]="__fontColor"></div> </div> <div class="i-dropdown-menu" nzPlacement="bottom" nz-popover [(nzVisible)]="isShowFontColorPane" nzTrigger="click" [nzContent]="colorPane"> <i nz-icon type="down" theme="outline"></i> </div> </div> <div class="p-divider"></div> <div style="background: #fff;display: block;"> <div class="position-relative"> <app-audio-recorder [audioUrl]="titleObj && titleObj.audio_url" (audioUploaded)="titleAudioUploaded($event)"></app-audio-recorder> </div> </div> </div> <div class="width-100 d-flex"> <iframe #titleEl id="titleContentEgret" frameborder="0" style="overflow: hidden;width: 100%; height:48px; margin: 0; padding: 0;"></iframe> </div> </div> <ng-template #colorPane> <div class="p-color-pane" nz-row nzGutter="16" nzType="flex"> <div nz-col class="p-color-item" *ngFor="let color of colorList" [style.background-color]="color" (click)="onSelectColor(color)" > </div> </div> </ng-template> </div> </div> </div>