1 | import { Directive, ElementRef, Input, EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, ContentChildren, Output, NgModule } from '@angular/core';
|
2 | import { DomHandler } from 'primeng/dom';
|
3 | import { CommonModule } from '@angular/common';
|
4 | import { RippleModule } from 'primeng/ripple';
|
5 | import { PrimeTemplate } from 'primeng/api';
|
6 |
|
7 | class 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 | }
|
76 | ButtonDirective.decorators = [
|
77 | { type: Directive, args: [{
|
78 | selector: '[pButton]'
|
79 | },] }
|
80 | ];
|
81 | ButtonDirective.ctorParameters = () => [
|
82 | { type: ElementRef }
|
83 | ];
|
84 | ButtonDirective.propDecorators = {
|
85 | iconPos: [{ type: Input }],
|
86 | label: [{ type: Input }],
|
87 | icon: [{ type: Input }]
|
88 | };
|
89 | class 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 | }
|
110 | Button.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||' '}}</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 | ];
|
135 | Button.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 | };
|
150 | class ButtonModule {
|
151 | }
|
152 | ButtonModule.decorators = [
|
153 | { type: NgModule, args: [{
|
154 | imports: [CommonModule, RippleModule],
|
155 | exports: [ButtonDirective, Button],
|
156 | declarations: [ButtonDirective, Button]
|
157 | },] }
|
158 | ];
|
159 |
|
160 |
|
161 |
|
162 |
|
163 |
|
164 | export { Button, ButtonDirective, ButtonModule };
|
165 |
|