Skip to content

Commit

Permalink
Fixed #10277 - Button icon css class not set after it has been initia…
Browse files Browse the repository at this point in the history
…lized
  • Loading branch information
yigitfindikli committed Jun 7, 2021
1 parent 03f3d2e commit 51a8426
Showing 1 changed file with 25 additions and 24 deletions.
49 changes: 25 additions & 24 deletions src/app/components/button/button.ts
Original file line number Diff line number Diff line change
@@ -1,38 +1,38 @@
import {NgModule,Directive,Component,ElementRef,EventEmitter,AfterViewInit,Output,OnDestroy,Input,ChangeDetectionStrategy, ViewEncapsulation, ContentChildren, AfterContentInit, TemplateRef, QueryList} from '@angular/core';
import {DomHandler} from 'primeng/dom';
import {CommonModule} from '@angular/common';
import {RippleModule} from 'primeng/ripple';
import {PrimeTemplate} from 'primeng/api';
import {RippleModule} from 'primeng/ripple';
import {PrimeTemplate} from 'primeng/api';

@Directive({
selector: '[pButton]'
})
export class ButtonDirective implements AfterViewInit, OnDestroy {

@Input() iconPos: 'left' | 'right' | 'top' | 'bottom' = 'left';

@Input() loadingIcon: string = "pi pi-spinner pi-spin";

public _label: string;

public _icon: string;

public _loading: boolean = false;

public initialized: boolean;

public _initialStyleClass: string;

constructor(public el: ElementRef) {}

ngAfterViewInit() {
this._initialStyleClass = this.el.nativeElement.className;
DomHandler.addMultipleClasses(this.el.nativeElement, this.getStyleClass());

if (this.icon) {
this.createIconEl();
}

let labelElement = document.createElement("span");
if (this.icon && !this.label) {
labelElement.setAttribute('aria-hidden', 'true');
Expand All @@ -41,13 +41,13 @@ export class ButtonDirective implements AfterViewInit, OnDestroy {

if (this.label)
labelElement.appendChild(document.createTextNode(this.label));
else
else
labelElement.innerHTML = ' ';

this.el.nativeElement.appendChild(labelElement);
this.initialized = true;
}

getStyleClass(): string {
let styleClass = 'p-button p-component';
if (this.icon && !this.label) {
Expand All @@ -59,7 +59,7 @@ export class ButtonDirective implements AfterViewInit, OnDestroy {
if (!this.icon && this.label)
styleClass = styleClass + ' p-button-loading-label-only';
}

return styleClass;
}

Expand All @@ -73,7 +73,7 @@ export class ButtonDirective implements AfterViewInit, OnDestroy {
iconElement.className = 'p-button-icon';
iconElement.setAttribute("aria-hidden", "true");
let iconPosClass = this.label ? 'p-button-icon-' + this.iconPos : null;

if (iconPosClass) {
DomHandler.addClass(iconElement, iconPosClass);
}
Expand All @@ -94,9 +94,9 @@ export class ButtonDirective implements AfterViewInit, OnDestroy {
setIconClass() {
let iconElement = DomHandler.findSingle(this.el.nativeElement, '.p-button-icon');
if (iconElement) {
if (this.iconPos)
if (this.iconPos)
iconElement.className = 'p-button-icon p-button-icon-' + this.iconPos + ' ' + this.getIconClass();
else
else
iconElement.className = 'p-button-icon ' + this.getIconClass();
}
else {
Expand All @@ -108,27 +108,28 @@ export class ButtonDirective implements AfterViewInit, OnDestroy {
let iconElement = DomHandler.findSingle(this.el.nativeElement, '.p-button-icon');
this.el.nativeElement.removeChild(iconElement)
}

@Input() get label(): string {
return this._label;
}

set label(val: string) {
this._label = val;

if (this.initialized) {
DomHandler.findSingle(this.el.nativeElement, '.p-button-label').textContent = this._label || ' ';
this.setIconClass();
this.setStyleClass();
}
}

@Input() get icon(): string {
return this._icon;
}

set icon(val: string) {
this._icon = val;

if (this.initialized) {
this.setIconClass();
this.setStyleClass();
Expand All @@ -141,17 +142,17 @@ export class ButtonDirective implements AfterViewInit, OnDestroy {

set loading(val: boolean) {
this._loading = val;

if (this.initialized) {
if (this.loading || this.icon)
this.setIconClass();
else
else
this.removeIconElement();

this.setStyleClass();
}
}

ngOnDestroy() {
this.initialized = false;
}
Expand Down Expand Up @@ -223,7 +224,7 @@ export class Button implements AfterContentInit {
case 'content':
this.contentTemplate = item.template;
break;

default:
this.contentTemplate = item.template;
break;
Expand Down

0 comments on commit 51a8426

Please sign in to comment.