UNPKG

6.23 kBJavaScriptView Raw
1import { Directive, ElementRef, Input, EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, ContentChildren, Output, NgModule } from '@angular/core';
2import { DomHandler } from 'primeng/dom';
3import { CommonModule } from '@angular/common';
4import { RippleModule } from 'primeng/ripple';
5import { PrimeTemplate } from 'primeng/api';
6
7class ButtonDirective {
8 constructor(el) {
9 this.el = el;
10 this.iconPos = 'left';
11 }
12 ngAfterViewInit() {
13 this._initialStyleClass = this.el.nativeElement.className;
14 DomHandler.addMultipleClasses(this.el.nativeElement, this.getStyleClass());
15 if (this.icon) {
16 let iconElement = document.createElement("span");
17 iconElement.className = 'p-button-icon';
18 iconElement.setAttribute("aria-hidden", "true");
19 let iconPosClass = this.label ? 'p-button-icon-' + this.iconPos : null;
20 if (iconPosClass) {
21 DomHandler.addClass(iconElement, iconPosClass);
22 }
23 DomHandler.addMultipleClasses(iconElement, this.icon);
24 this.el.nativeElement.appendChild(iconElement);
25 }
26 let labelElement = document.createElement("span");
27 if (this.icon && !this.label) {
28 labelElement.setAttribute('aria-hidden', 'true');
29 }
30 labelElement.className = 'p-button-label';
31 labelElement.appendChild(document.createTextNode(this.label || ' '));
32 this.el.nativeElement.appendChild(labelElement);
33 this.initialized = true;
34 }
35 getStyleClass() {
36 let styleClass = 'p-button p-component';
37 if (this.icon && !this.label) {
38 styleClass = styleClass + ' p-button-icon-only';
39 }
40 return styleClass;
41 }
42 setStyleClass() {
43 let styleClass = this.getStyleClass();
44 this.el.nativeElement.className = styleClass + ' ' + this._initialStyleClass;
45 }
46 get label() {
47 return this._label;
48 }
49 set label(val) {
50 this._label = val;
51 if (this.initialized) {
52 DomHandler.findSingle(this.el.nativeElement, '.p-button-label').textContent = this._label || ' ';
53 this.setStyleClass();
54 }
55 }
56 get icon() {
57 return this._icon;
58 }
59 set icon(val) {
60 this._icon = val;
61 if (this.initialized) {
62 if (this.iconPos)
63 DomHandler.findSingle(this.el.nativeElement, '.p-button-icon').className = 'p-button-icon p-button-icon-' + this.iconPos + ' ' + this._icon;
64 else
65 DomHandler.findSingle(this.el.nativeElement, '.p-button-icon').className = 'p-button-icon ' + this._icon;
66 this.setStyleClass();
67 }
68 }
69 ngOnDestroy() {
70 while (this.el.nativeElement.hasChildNodes()) {
71 this.el.nativeElement.removeChild(this.el.nativeElement.lastChild);
72 }
73 this.initialized = false;
74 }
75}
76ButtonDirective.decorators = [
77 { type: Directive, args: [{
78 selector: '[pButton]'
79 },] }
80];
81ButtonDirective.ctorParameters = () => [
82 { type: ElementRef }
83];
84ButtonDirective.propDecorators = {
85 iconPos: [{ type: Input }],
86 label: [{ type: Input }],
87 icon: [{ type: Input }]
88};
89class Button {
90 constructor() {
91 this.type = "button";
92 this.iconPos = 'left';
93 this.onClick = new EventEmitter();
94 this.onFocus = new EventEmitter();
95 this.onBlur = new EventEmitter();
96 }
97 ngAfterContentInit() {
98 this.templates.forEach((item) => {
99 switch (item.getType()) {
100 case 'content':
101 this.contentTemplate = item.template;
102 break;
103 default:
104 this.contentTemplate = item.template;
105 break;
106 }
107 });
108 }
109}
110Button.decorators = [
111 { type: Component, args: [{
112 selector: 'p-button',
113 template: `
114 <button [attr.type]="type" [class]="styleClass" [ngStyle]="style" [disabled]="disabled"
115 [ngClass]="{'p-button p-component':true,
116 'p-button-icon-only': (icon && !label),
117 'p-button-vertical': (iconPos === 'top' || iconPos === 'bottom') && label}"
118 (click)="onClick.emit($event)" (focus)="onFocus.emit($event)" (blur)="onBlur.emit($event)" pRipple>
119 <ng-content></ng-content>
120 <ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
121 <span [ngClass]="{'p-button-icon': true,
122 'p-button-icon-left': iconPos === 'left' && label,
123 'p-button-icon-right': iconPos === 'right' && label,
124 'p-button-icon-top': iconPos === 'top' && label,
125 'p-button-icon-bottom': iconPos === 'bottom' && label}"
126 [class]="icon" *ngIf="icon" [attr.aria-hidden]="true"></span>
127 <span class="p-button-label" [attr.aria-hidden]="icon && !label">{{label||'&nbsp;'}}</span>
128 <span [ngClass]="'p-badge'" *ngIf="badge" [class]="badgeClass">{{badge}}</span>
129 </button>
130 `,
131 changeDetection: ChangeDetectionStrategy.OnPush,
132 encapsulation: ViewEncapsulation.None
133 },] }
134];
135Button.propDecorators = {
136 type: [{ type: Input }],
137 iconPos: [{ type: Input }],
138 icon: [{ type: Input }],
139 badge: [{ type: Input }],
140 label: [{ type: Input }],
141 disabled: [{ type: Input }],
142 style: [{ type: Input }],
143 styleClass: [{ type: Input }],
144 badgeClass: [{ type: Input }],
145 templates: [{ type: ContentChildren, args: [PrimeTemplate,] }],
146 onClick: [{ type: Output }],
147 onFocus: [{ type: Output }],
148 onBlur: [{ type: Output }]
149};
150class ButtonModule {
151}
152ButtonModule.decorators = [
153 { type: NgModule, args: [{
154 imports: [CommonModule, RippleModule],
155 exports: [ButtonDirective, Button],
156 declarations: [ButtonDirective, Button]
157 },] }
158];
159
160/**
161 * Generated bundle index. Do not edit.
162 */
163
164export { Button, ButtonDirective, ButtonModule };
165//# sourceMappingURL=primeng-button.js.map