[{"__symbolic":"module","version":4,"metadata":{"FontStyleComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../../../../shared/configure-component-base","name":"ConfigureComponentBase","line":13,"character":40},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":8,"character":1},"arguments":[{"selector":"font-style","template":"<div class=\"design-font-style\"> <div class=\"textToolBar\" provide-parent-forms> <div class=\"font-family\"> <p-dropdown #FontFamilyDropdown class=\"fontFamily\" name=\"fontFamily\" [options]=\"fontFamilies\" [(ngModel)]=\"fontFamily\" [style]=\"{'width':'100px' , 'min-width': '100px'}\" (onChange)=\"onFontFamilyChanged()\"> <ng-template let-item pTemplate=\"selectedItem\"> <span>{{lc(item.label)}}</span> </ng-template> <ng-template let-font pTemplate=\"item\"> <span>{{lc(font.label)}}</span> </ng-template> </p-dropdown> </div> <p-dropdown #FontSizeDropdown class=\"fontSize\" name=\"fontSize\" [options]=\"fontSizes\" [(ngModel)]=\"fontSize\" [style]=\"{'width':'80px' , 'min-width': '80px'}\" editable=\"true\" (onChange)=\"onFontSizeChanged($event)\" (keydown)=\"onFontSizeKeyDown($event)\" [custom-func-validate]=\"validateFontSize\"></p-dropdown> <span> <a class=\"bold\" [ngClass]=\"{'clicked': isBold}\" (click)=\"setBold()\"></a> </span> <span> <a class=\"italic\" [ngClass]=\"{'clicked': isItalic}\" (click)=\"setItalic()\"></a> </span> <span> <a class=\"underline\" [ngClass]=\"{'clicked': isUnderline}\" (click)=\"setUnderline()\"></a> </span> <span *ngIf=\"textAlignEnabled\"> <a class=\"alignLeft\" [ngClass]=\"{'clicked': alignLeft}\" (click)=\"setAlignLeft()\"></a> </span> <span *ngIf=\"textAlignEnabled\"> <a class=\"alignCenter\" [ngClass]=\"{'clicked':alignCenter}\" (click)=\"setAlignCenter()\"></a> </span> <span *ngIf=\"textAlignEnabled\"> <a class=\"alignRight\" [ngClass]=\"{'clicked': alignRight}\" (click)=\"setAlignRight()\"></a> </span> <span> <a class=\"fontColor\"> <font-color-picker [color]=\"fontColor\" (sentColor)=\"setFontColor($event)\"></font-color-picker> </a> </span> </div> </div>","styles":[".design-font-style{ .form-control { background-color: white; } .fontFamily { label{ padding: 0.4em; } } .textToolBar { background-color:transparent; display: inline-flex; height: 24px; select{ float: left; width: 80px; height: 32px; padding: 0; } a { text-decoration: none; display: inline-block; height: 20px; cursor: pointer; width: 20px; vertical-align: -webkit-baseline-middle; background-image: url(\"/assets/common/images/configure/textToolBar.png\"); } ::ng-deep .ui-inputtext{ padding-top: 5px; padding-bottom: 6px; } .font-family{ margin-right: 10px; } } .textToolBar>span { float: left; padding: 0 2px; line-height: 24px; } .textToolBar>span:last-child{ position: relative; } .bold { background-position: -40px 0px; } .bold.clicked { background-position: 0px 0px; } .italic { background-position: 80px 20px; } .italic.clicked { background-position: 120px 20px; } .underline { background-position: 140px 0px; } .underline.clicked { background-position: 180px 0px; } .alignLeft { background-position: 80px 0px; } .alignLeft.clicked { background-position: 120px 0px; } .alignCenter { background-position: 20px 0px; } .alignCenter.clicked { background-position: 60px 0px; } .alignRight { background-position: 200px 20px; } .alignRight.clicked { background-position: 240px 20px; } .fontColor { background-position: 140px 20px; } .fontColor.clicked { background-position: 180px 20px; } .colorPicker{ position: absolute; right: 5px; bottom: -2px; width: 13px; height: 2px; border: none; } .noResize { resize: none; } }"]}]}],"members":{"fontSizeChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":16,"character":5}}]}],"fontSize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":5}}]}],"textAlignChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":28,"character":5}}]}],"textAlign":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":5}}]}],"isUnderline":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":37,"character":5}}]}],"isUnderlineChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":38,"character":5}}]}],"fontColorChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":41,"character":5}}]}],"fontColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":42,"character":5}}]}],"fontStyleChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":64,"character":5}}]}],"fontStyle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":65,"character":5}}]}],"fontSizeDropdown":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":79,"character":5},"arguments":["FontSizeDropdown",{"static":false}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":81,"character":27}]}],"ngOnInit":[{"__symbolic":"method"}],"setBold":[{"__symbolic":"method"}],"setItalic":[{"__symbolic":"method"}],"setUnderline":[{"__symbolic":"method"}],"setAlignLeft":[{"__symbolic":"method"}],"setAlignCenter":[{"__symbolic":"method"}],"setAlignRight":[{"__symbolic":"method"}],"ininFontStyle":[{"__symbolic":"method"}],"changeFontStyle":[{"__symbolic":"method"}],"onFontSizeChanged":[{"__symbolic":"method"}],"onFontFamilyChanged":[{"__symbolic":"method"}],"onFontSizeKeyDown":[{"__symbolic":"method"}],"validateFontSize":[{"__symbolic":"method"}],"setFontColor":[{"__symbolic":"method"}]}}}}]