[{"__symbolic":"module","version":4,"metadata":{"FontSettingComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../../../../shared/configure-component-base","name":"ConfigureComponentBase","line":13,"character":42},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":8,"character":1},"arguments":[{"selector":"font-setting","template":"<div class=\"design-font-setting\"> <div class=\"textToolBar\"> <div class=\"font-family\" *ngIf='FontFamilyEnabled'> <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 name=\"fontSize\" [options]=\"fontSizes\" [(ngModel)]=\"fontSize\" [style]=\"{'width':'80px'}\" editable=\"true\" (onChange)=\"onFontSizeChanged($event)\" (keydown)=\"onFontSizeKeyDown($event)\" [custom-func-validate]=\"validateFontSize\"></p-dropdown> <span *ngIf=\"boldEnabled\"> <a class=\"bold\" [class.clicked]=\"isBold\" (click)=\"setBold()\"></a> </span> <span *ngIf=\"italicEnabled\"> <a class=\"italic\" [class.clicked]=\"font.isItalic\" (click)=\"setItalic()\"></a> </span> <span *ngIf=\"underLineEnabled\"> <a class=\"underline\" [class.clicked]=\"font.isUnderline\" (click)=\"setUnderline()\"></a> </span> <span *ngIf=\"textAlignEnabled\"> <a class=\"alignLeft\" [class.clicked]=\"alignLeft\" (click)=\"setAlignLeft()\"></a> </span> <span *ngIf=\"textAlignEnabled\"> <a class=\"alignCenter\" [class.clicked]=\"alignCenter\" (click)=\"setAlignCenter()\"></a> </span> <span *ngIf=\"textAlignEnabled\"> <a class=\"alignRight\" [class.clicked]=\"alignRight\" (click)=\"setAlignRight()\"></a> </span> <span *ngIf=\"fontColorEnabled\"> <a class=\"fontColor\"> <font-color-picker [color]=\"fontColor\" (sentColor)=\"setFontColor($event)\"></font-color-picker> </a> </span> </div> </div>","styles":[".design-font-setting { .form-control { background-color: white; } .textToolBar { display: inline-flex; 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: 6px; width: 13px; height: 2px; border: none; } .noResize { resize: none; } .form-control.fc-Form.font-size-select { width: 140px; } }"]}]}],"members":{"font":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":5}}]}],"textAlignEnabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":5}}]}],"boldEnabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":5}}]}],"fontColorEnabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":5}}]}],"italicEnabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":23,"character":5}}]}],"underLineEnabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":25,"character":5}}]}],"FontFamilyEnabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":5}}]}],"fontSizeDropdown":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":75,"character":5},"arguments":["FontSizeDropdown",{"static":false}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":77,"character":26}]}],"ngOnInit":[{"__symbolic":"method"}],"setBold":[{"__symbolic":"method"}],"setItalic":[{"__symbolic":"method"}],"setUnderline":[{"__symbolic":"method"}],"setAlignLeft":[{"__symbolic":"method"}],"setAlignCenter":[{"__symbolic":"method"}],"setAlignRight":[{"__symbolic":"method"}],"onFontFamilyChanged":[{"__symbolic":"method"}],"onFontSizeChanged":[{"__symbolic":"method"}],"onFontSizeKeyDown":[{"__symbolic":"method"}],"setFontColor":[{"__symbolic":"method"}]}}}}]