| 1 | import * as i0 from '@angular/core';
|
|---|
| 2 | import { Directive, Input, EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, ContentChildren, Output, NgModule } from '@angular/core';
|
|---|
| 3 | import { DomHandler } from 'primeng/dom';
|
|---|
| 4 | import * as i2 from '@angular/common';
|
|---|
| 5 | import { CommonModule } from '@angular/common';
|
|---|
| 6 | import * as i1 from 'primeng/ripple';
|
|---|
| 7 | import { RippleModule } from 'primeng/ripple';
|
|---|
| 8 | import { PrimeTemplate } from 'primeng/api';
|
|---|
| 9 |
|
|---|
| 10 | class ButtonDirective {
|
|---|
| 11 | constructor(el) {
|
|---|
| 12 | this.el = el;
|
|---|
| 13 | this.iconPos = 'left';
|
|---|
| 14 | this.loadingIcon = "pi pi-spinner pi-spin";
|
|---|
| 15 | this._loading = false;
|
|---|
| 16 | }
|
|---|
| 17 | ngAfterViewInit() {
|
|---|
| 18 | this._initialStyleClass = this.el.nativeElement.className;
|
|---|
| 19 | DomHandler.addMultipleClasses(this.el.nativeElement, this.getStyleClass());
|
|---|
| 20 | if (this.icon || this.loading) {
|
|---|
| 21 | this.createIconEl();
|
|---|
| 22 | }
|
|---|
| 23 | let labelElement = document.createElement("span");
|
|---|
| 24 | if (this.icon && !this.label) {
|
|---|
| 25 | labelElement.setAttribute('aria-hidden', 'true');
|
|---|
| 26 | }
|
|---|
| 27 | labelElement.className = 'p-button-label';
|
|---|
| 28 | if (this.label)
|
|---|
| 29 | labelElement.appendChild(document.createTextNode(this.label));
|
|---|
| 30 | else
|
|---|
| 31 | labelElement.innerHTML = ' ';
|
|---|
| 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 | if (this.loading) {
|
|---|
| 41 | styleClass = styleClass + ' p-disabled p-button-loading';
|
|---|
| 42 | if (!this.icon && this.label)
|
|---|
| 43 | styleClass = styleClass + ' p-button-loading-label-only';
|
|---|
| 44 | }
|
|---|
| 45 | return styleClass;
|
|---|
| 46 | }
|
|---|
| 47 | setStyleClass() {
|
|---|
| 48 | let styleClass = this.getStyleClass();
|
|---|
| 49 | this.el.nativeElement.className = styleClass + ' ' + this._initialStyleClass;
|
|---|
| 50 | }
|
|---|
| 51 | createIconEl() {
|
|---|
| 52 | let iconElement = document.createElement("span");
|
|---|
| 53 | iconElement.className = 'p-button-icon';
|
|---|
| 54 | iconElement.setAttribute("aria-hidden", "true");
|
|---|
| 55 | let iconPosClass = this.label ? 'p-button-icon-' + this.iconPos : null;
|
|---|
| 56 | if (iconPosClass) {
|
|---|
| 57 | DomHandler.addClass(iconElement, iconPosClass);
|
|---|
| 58 | }
|
|---|
| 59 | let iconClass = this.getIconClass();
|
|---|
| 60 | if (iconClass) {
|
|---|
| 61 | DomHandler.addMultipleClasses(iconElement, iconClass);
|
|---|
| 62 | }
|
|---|
| 63 | let labelEl = DomHandler.findSingle(this.el.nativeElement, '.p-button-label');
|
|---|
| 64 | if (labelEl)
|
|---|
| 65 | this.el.nativeElement.insertBefore(iconElement, labelEl);
|
|---|
| 66 | else
|
|---|
| 67 | this.el.nativeElement.appendChild(iconElement);
|
|---|
| 68 | }
|
|---|
| 69 | getIconClass() {
|
|---|
| 70 | return this.loading ? 'p-button-loading-icon ' + this.loadingIcon : this._icon;
|
|---|
| 71 | }
|
|---|
| 72 | setIconClass() {
|
|---|
| 73 | let iconElement = DomHandler.findSingle(this.el.nativeElement, '.p-button-icon');
|
|---|
| 74 | if (iconElement) {
|
|---|
| 75 | if (this.iconPos)
|
|---|
| 76 | iconElement.className = 'p-button-icon p-button-icon-' + this.iconPos + ' ' + this.getIconClass();
|
|---|
| 77 | else
|
|---|
| 78 | iconElement.className = 'p-button-icon ' + this.getIconClass();
|
|---|
| 79 | }
|
|---|
| 80 | else {
|
|---|
| 81 | this.createIconEl();
|
|---|
| 82 | }
|
|---|
| 83 | }
|
|---|
| 84 | removeIconElement() {
|
|---|
| 85 | let iconElement = DomHandler.findSingle(this.el.nativeElement, '.p-button-icon');
|
|---|
| 86 | this.el.nativeElement.removeChild(iconElement);
|
|---|
| 87 | }
|
|---|
| 88 | get label() {
|
|---|
| 89 | return this._label;
|
|---|
| 90 | }
|
|---|
| 91 | set label(val) {
|
|---|
| 92 | this._label = val;
|
|---|
| 93 | if (this.initialized) {
|
|---|
| 94 | DomHandler.findSingle(this.el.nativeElement, '.p-button-label').textContent = this._label || ' ';
|
|---|
| 95 | if (this.loading || this.icon) {
|
|---|
| 96 | this.setIconClass();
|
|---|
| 97 | }
|
|---|
| 98 | this.setStyleClass();
|
|---|
| 99 | }
|
|---|
| 100 | }
|
|---|
| 101 | get icon() {
|
|---|
| 102 | return this._icon;
|
|---|
| 103 | }
|
|---|
| 104 | set icon(val) {
|
|---|
| 105 | this._icon = val;
|
|---|
| 106 | if (this.initialized) {
|
|---|
| 107 | this.setIconClass();
|
|---|
| 108 | this.setStyleClass();
|
|---|
| 109 | }
|
|---|
| 110 | }
|
|---|
| 111 | get loading() {
|
|---|
| 112 | return this._loading;
|
|---|
| 113 | }
|
|---|
| 114 | set loading(val) {
|
|---|
| 115 | this._loading = val;
|
|---|
| 116 | if (this.initialized) {
|
|---|
| 117 | if (this.loading || this.icon)
|
|---|
| 118 | this.setIconClass();
|
|---|
| 119 | else
|
|---|
| 120 | this.removeIconElement();
|
|---|
| 121 | this.setStyleClass();
|
|---|
| 122 | }
|
|---|
| 123 | }
|
|---|
| 124 | ngOnDestroy() {
|
|---|
| 125 | this.initialized = false;
|
|---|
| 126 | }
|
|---|
| 127 | }
|
|---|
| 128 | ButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ButtonDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|---|
| 129 | ButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.0", type: ButtonDirective, selector: "[pButton]", inputs: { iconPos: "iconPos", loadingIcon: "loadingIcon", label: "label", icon: "icon", loading: "loading" }, host: { classAttribute: "p-element" }, ngImport: i0 });
|
|---|
| 130 | i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ButtonDirective, decorators: [{
|
|---|
| 131 | type: Directive,
|
|---|
| 132 | args: [{
|
|---|
| 133 | selector: '[pButton]',
|
|---|
| 134 | host: {
|
|---|
| 135 | 'class': 'p-element'
|
|---|
| 136 | }
|
|---|
| 137 | }]
|
|---|
| 138 | }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { iconPos: [{
|
|---|
| 139 | type: Input
|
|---|
| 140 | }], loadingIcon: [{
|
|---|
| 141 | type: Input
|
|---|
| 142 | }], label: [{
|
|---|
| 143 | type: Input
|
|---|
| 144 | }], icon: [{
|
|---|
| 145 | type: Input
|
|---|
| 146 | }], loading: [{
|
|---|
| 147 | type: Input
|
|---|
| 148 | }] } });
|
|---|
| 149 | class Button {
|
|---|
| 150 | constructor() {
|
|---|
| 151 | this.type = "button";
|
|---|
| 152 | this.iconPos = 'left';
|
|---|
| 153 | this.loading = false;
|
|---|
| 154 | this.loadingIcon = "pi pi-spinner pi-spin";
|
|---|
| 155 | this.onClick = new EventEmitter();
|
|---|
| 156 | this.onFocus = new EventEmitter();
|
|---|
| 157 | this.onBlur = new EventEmitter();
|
|---|
| 158 | }
|
|---|
| 159 | ngAfterContentInit() {
|
|---|
| 160 | this.templates.forEach((item) => {
|
|---|
| 161 | switch (item.getType()) {
|
|---|
| 162 | case 'content':
|
|---|
| 163 | this.contentTemplate = item.template;
|
|---|
| 164 | break;
|
|---|
| 165 | default:
|
|---|
| 166 | this.contentTemplate = item.template;
|
|---|
| 167 | break;
|
|---|
| 168 | }
|
|---|
| 169 | });
|
|---|
| 170 | }
|
|---|
| 171 | badgeStyleClass() {
|
|---|
| 172 | return {
|
|---|
| 173 | 'p-badge p-component': true,
|
|---|
| 174 | 'p-badge-no-gutter': this.badge && String(this.badge).length === 1
|
|---|
| 175 | };
|
|---|
| 176 | }
|
|---|
| 177 | }
|
|---|
| 178 | Button.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: Button, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|---|
| 179 | Button.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: Button, selector: "p-button", inputs: { type: "type", iconPos: "iconPos", icon: "icon", badge: "badge", label: "label", disabled: "disabled", loading: "loading", loadingIcon: "loadingIcon", style: "style", styleClass: "styleClass", badgeClass: "badgeClass" }, outputs: { onClick: "onClick", onFocus: "onFocus", onBlur: "onBlur" }, host: { classAttribute: "p-element" }, queries: [{ propertyName: "templates", predicate: PrimeTemplate }], ngImport: i0, template: `
|
|---|
| 180 | <button [attr.type]="type" [class]="styleClass" [ngStyle]="style" [disabled]="disabled || loading"
|
|---|
| 181 | [ngClass]="{'p-button p-component':true,
|
|---|
| 182 | 'p-button-icon-only': (icon && !label),
|
|---|
| 183 | 'p-button-vertical': (iconPos === 'top' || iconPos === 'bottom') && label,
|
|---|
| 184 | 'p-disabled': this.disabled || this.loading,
|
|---|
| 185 | 'p-button-loading': this.loading,
|
|---|
| 186 | 'p-button-loading-label-only': this.loading && !this.icon && this.label}"
|
|---|
| 187 | (click)="onClick.emit($event)" (focus)="onFocus.emit($event)" (blur)="onBlur.emit($event)" pRipple>
|
|---|
| 188 | <ng-content></ng-content>
|
|---|
| 189 | <ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
|
|---|
| 190 | <span [ngClass]="{'p-button-icon': true,
|
|---|
| 191 | 'p-button-icon-left': iconPos === 'left' && label,
|
|---|
| 192 | 'p-button-icon-right': iconPos === 'right' && label,
|
|---|
| 193 | 'p-button-icon-top': iconPos === 'top' && label,
|
|---|
| 194 | 'p-button-icon-bottom': iconPos === 'bottom' && label}"
|
|---|
| 195 | [class]="loading ? 'p-button-loading-icon ' + loadingIcon : icon" *ngIf="!contentTemplate && (icon||loading)" [attr.aria-hidden]="true"></span>
|
|---|
| 196 | <span class="p-button-label" [attr.aria-hidden]="icon && !label" *ngIf="!contentTemplate">{{label||' '}}</span>
|
|---|
| 197 | <span [ngClass]="badgeStyleClass()" [class]="badgeClass" *ngIf="!contentTemplate && badge">{{badge}}</span>
|
|---|
| 198 | </button>
|
|---|
| 199 | `, isInline: true, directives: [{ type: i1.Ripple, selector: "[pRipple]" }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|---|
| 200 | i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: Button, decorators: [{
|
|---|
| 201 | type: Component,
|
|---|
| 202 | args: [{
|
|---|
| 203 | selector: 'p-button',
|
|---|
| 204 | template: `
|
|---|
| 205 | <button [attr.type]="type" [class]="styleClass" [ngStyle]="style" [disabled]="disabled || loading"
|
|---|
| 206 | [ngClass]="{'p-button p-component':true,
|
|---|
| 207 | 'p-button-icon-only': (icon && !label),
|
|---|
| 208 | 'p-button-vertical': (iconPos === 'top' || iconPos === 'bottom') && label,
|
|---|
| 209 | 'p-disabled': this.disabled || this.loading,
|
|---|
| 210 | 'p-button-loading': this.loading,
|
|---|
| 211 | 'p-button-loading-label-only': this.loading && !this.icon && this.label}"
|
|---|
| 212 | (click)="onClick.emit($event)" (focus)="onFocus.emit($event)" (blur)="onBlur.emit($event)" pRipple>
|
|---|
| 213 | <ng-content></ng-content>
|
|---|
| 214 | <ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
|
|---|
| 215 | <span [ngClass]="{'p-button-icon': true,
|
|---|
| 216 | 'p-button-icon-left': iconPos === 'left' && label,
|
|---|
| 217 | 'p-button-icon-right': iconPos === 'right' && label,
|
|---|
| 218 | 'p-button-icon-top': iconPos === 'top' && label,
|
|---|
| 219 | 'p-button-icon-bottom': iconPos === 'bottom' && label}"
|
|---|
| 220 | [class]="loading ? 'p-button-loading-icon ' + loadingIcon : icon" *ngIf="!contentTemplate && (icon||loading)" [attr.aria-hidden]="true"></span>
|
|---|
| 221 | <span class="p-button-label" [attr.aria-hidden]="icon && !label" *ngIf="!contentTemplate">{{label||' '}}</span>
|
|---|
| 222 | <span [ngClass]="badgeStyleClass()" [class]="badgeClass" *ngIf="!contentTemplate && badge">{{badge}}</span>
|
|---|
| 223 | </button>
|
|---|
| 224 | `,
|
|---|
| 225 | changeDetection: ChangeDetectionStrategy.OnPush,
|
|---|
| 226 | encapsulation: ViewEncapsulation.None,
|
|---|
| 227 | host: {
|
|---|
| 228 | 'class': 'p-element'
|
|---|
| 229 | }
|
|---|
| 230 | }]
|
|---|
| 231 | }], propDecorators: { type: [{
|
|---|
| 232 | type: Input
|
|---|
| 233 | }], iconPos: [{
|
|---|
| 234 | type: Input
|
|---|
| 235 | }], icon: [{
|
|---|
| 236 | type: Input
|
|---|
| 237 | }], badge: [{
|
|---|
| 238 | type: Input
|
|---|
| 239 | }], label: [{
|
|---|
| 240 | type: Input
|
|---|
| 241 | }], disabled: [{
|
|---|
| 242 | type: Input
|
|---|
| 243 | }], loading: [{
|
|---|
| 244 | type: Input
|
|---|
| 245 | }], loadingIcon: [{
|
|---|
| 246 | type: Input
|
|---|
| 247 | }], style: [{
|
|---|
| 248 | type: Input
|
|---|
| 249 | }], styleClass: [{
|
|---|
| 250 | type: Input
|
|---|
| 251 | }], badgeClass: [{
|
|---|
| 252 | type: Input
|
|---|
| 253 | }], templates: [{
|
|---|
| 254 | type: ContentChildren,
|
|---|
| 255 | args: [PrimeTemplate]
|
|---|
| 256 | }], onClick: [{
|
|---|
| 257 | type: Output
|
|---|
| 258 | }], onFocus: [{
|
|---|
| 259 | type: Output
|
|---|
| 260 | }], onBlur: [{
|
|---|
| 261 | type: Output
|
|---|
| 262 | }] } });
|
|---|
| 263 | class ButtonModule {
|
|---|
| 264 | }
|
|---|
| 265 | ButtonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|---|
| 266 | ButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ButtonModule, declarations: [ButtonDirective, Button], imports: [CommonModule, RippleModule], exports: [ButtonDirective, Button] });
|
|---|
| 267 | ButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ButtonModule, imports: [[CommonModule, RippleModule]] });
|
|---|
| 268 | i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ButtonModule, decorators: [{
|
|---|
| 269 | type: NgModule,
|
|---|
| 270 | args: [{
|
|---|
| 271 | imports: [CommonModule, RippleModule],
|
|---|
| 272 | exports: [ButtonDirective, Button],
|
|---|
| 273 | declarations: [ButtonDirective, Button]
|
|---|
| 274 | }]
|
|---|
| 275 | }] });
|
|---|
| 276 |
|
|---|
| 277 | /**
|
|---|
| 278 | * Generated bundle index. Do not edit.
|
|---|
| 279 | */
|
|---|
| 280 |
|
|---|
| 281 | export { Button, ButtonDirective, ButtonModule };
|
|---|
