import { CommonModule, DOCUMENT } from '@angular/common';
import { ChangeDetectionStrategy, Component, ContentChildren, Directive, EventEmitter, Inject, Input, NgModule, Output, ViewEncapsulation, booleanAttribute, numberAttribute } from '@angular/core';
import { PrimeTemplate, SharedModule } from 'primeng/api';
import { DomHandler } from 'primeng/dom';
import { SpinnerIcon } from 'primeng/icons/spinner';
import { RippleModule } from 'primeng/ripple';
import { ObjectUtils } from 'primeng/utils';
import { AutoFocusModule } from 'primeng/autofocus';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "primeng/ripple";
import * as i3 from "primeng/autofocus";
const INTERNAL_BUTTON_CLASSES = {
button: 'p-button',
component: 'p-component',
iconOnly: 'p-button-icon-only',
disabled: 'p-disabled',
loading: 'p-button-loading',
labelOnly: 'p-button-loading-label-only'
};
/**
* Button directive is an extension to button component.
* @group Components
*/
export class ButtonDirective {
el;
document;
/**
* Position of the icon.
* @group Props
*/
iconPos = 'left';
/**
* Uses to pass attributes to the loading icon's DOM element.
* @group Props
*/
loadingIcon;
/**
* Text of the button.
* @group Props
*/
get label() {
return this._label;
}
set label(val) {
this._label = val;
if (this.initialized) {
this.updateLabel();
this.updateIcon();
this.setStyleClass();
}
}
/**
* Name of the icon.
* @group Props
*/
get icon() {
return this._icon;
}
set icon(val) {
this._icon = val;
if (this.initialized) {
this.updateIcon();
this.setStyleClass();
}
}
/**
* Whether the button is in loading state.
* @group Props
*/
get loading() {
return this._loading;
}
set loading(val) {
this._loading = val;
if (this.initialized) {
this.updateIcon();
this.setStyleClass();
}
}
/**
* Defines the style of the button.
* @group Props
*/
severity;
/**
* Add a shadow to indicate elevation.
* @group Props
*/
raised = false;
/**
* Add a circular border radius to the button.
* @group Props
*/
rounded = false;
/**
* Add a textual class to the button without a background initially.
* @group Props
*/
text = false;
/**
* Add a border class without a background initially.
* @group Props
*/
outlined = false;
/**
* Defines the size of the button.
* @group Props
*/
size = null;
/**
* Add a plain textual class to the button without a background initially.
* @group Props
*/
plain = false;
_label;
_icon;
_loading = false;
initialized;
get htmlElement() {
return this.el.nativeElement;
}
_internalClasses = Object.values(INTERNAL_BUTTON_CLASSES);
spinnerIcon = ``;
constructor(el, document) {
this.el = el;
this.document = document;
}
ngAfterViewInit() {
DomHandler.addMultipleClasses(this.htmlElement, this.getStyleClass().join(' '));
this.createIcon();
this.createLabel();
this.initialized = true;
}
getStyleClass() {
const styleClass = [INTERNAL_BUTTON_CLASSES.button, INTERNAL_BUTTON_CLASSES.component];
if (this.icon && !this.label && ObjectUtils.isEmpty(this.htmlElement.textContent)) {
styleClass.push(INTERNAL_BUTTON_CLASSES.iconOnly);
}
if (this.loading) {
styleClass.push(INTERNAL_BUTTON_CLASSES.disabled, INTERNAL_BUTTON_CLASSES.loading);
if (!this.icon && this.label) {
styleClass.push(INTERNAL_BUTTON_CLASSES.labelOnly);
}
if (this.icon && !this.label && !ObjectUtils.isEmpty(this.htmlElement.textContent)) {
styleClass.push(INTERNAL_BUTTON_CLASSES.iconOnly);
}
}
if (this.text) {
styleClass.push('p-button-text');
}
if (this.severity) {
styleClass.push(`p-button-${this.severity}`);
}
if (this.plain) {
styleClass.push('p-button-plain');
}
if (this.raised) {
styleClass.push('p-button-raised');
}
if (this.size) {
styleClass.push(`p-button-${this.size}`);
}
if (this.outlined) {
styleClass.push('p-button-outlined');
}
if (this.rounded) {
styleClass.push('p-button-rounded');
}
if (this.size === 'small') {
styleClass.push('p-button-sm');
}
if (this.size === 'large') {
styleClass.push('p-button-lg');
}
return styleClass;
}
setStyleClass() {
const styleClass = this.getStyleClass();
this.htmlElement.classList.remove(...this._internalClasses);
this.htmlElement.classList.add(...styleClass);
}
createLabel() {
const created = DomHandler.findSingle(this.htmlElement, '.p-button-label');
if (!created && this.label) {
let labelElement = this.document.createElement('span');
if (this.icon && !this.label) {
labelElement.setAttribute('aria-hidden', 'true');
}
labelElement.className = 'p-button-label';
labelElement.appendChild(this.document.createTextNode(this.label));
this.htmlElement.appendChild(labelElement);
}
}
createIcon() {
const created = DomHandler.findSingle(this.htmlElement, '.p-button-icon');
if (!created && (this.icon || this.loading)) {
let iconElement = this.document.createElement('span');
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);
}
let iconClass = this.getIconClass();
if (iconClass) {
DomHandler.addMultipleClasses(iconElement, iconClass);
}
if (!this.loadingIcon && this.loading) {
iconElement.innerHTML = this.spinnerIcon;
}
this.htmlElement.insertBefore(iconElement, this.htmlElement.firstChild);
}
}
updateLabel() {
let labelElement = DomHandler.findSingle(this.htmlElement, '.p-button-label');
if (!this.label) {
labelElement && this.htmlElement.removeChild(labelElement);
return;
}
labelElement ? (labelElement.textContent = this.label) : this.createLabel();
}
updateIcon() {
let iconElement = DomHandler.findSingle(this.htmlElement, '.p-button-icon');
let labelElement = DomHandler.findSingle(this.htmlElement, '.p-button-label');
if (this.loading && !this.loadingIcon && iconElement) {
iconElement.innerHTML = this.spinnerIcon;
}
else if (iconElement?.innerHTML) {
iconElement.innerHTML = '';
}
if (iconElement) {
if (this.iconPos) {
iconElement.className = 'p-button-icon ' + (labelElement ? 'p-button-icon-' + this.iconPos : '') + ' ' + this.getIconClass();
}
else {
iconElement.className = 'p-button-icon ' + this.getIconClass();
}
}
else {
this.createIcon();
}
}
getIconClass() {
return this.loading ? 'p-button-loading-icon ' + (this.loadingIcon ? this.loadingIcon : 'p-icon') : this.icon || 'p-hidden';
}
ngOnDestroy() {
this.initialized = false;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: ButtonDirective, deps: [{ token: i0.ElementRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "17.3.7", type: ButtonDirective, selector: "[pButton]", inputs: { iconPos: "iconPos", loadingIcon: "loadingIcon", label: "label", icon: "icon", loading: "loading", severity: "severity", raised: ["raised", "raised", booleanAttribute], rounded: ["rounded", "rounded", booleanAttribute], text: ["text", "text", booleanAttribute], outlined: ["outlined", "outlined", booleanAttribute], size: "size", plain: ["plain", "plain", booleanAttribute] }, host: { classAttribute: "p-element" }, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: ButtonDirective, decorators: [{
type: Directive,
args: [{
selector: '[pButton]',
host: {
class: 'p-element'
}
}]
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: Document, decorators: [{
type: Inject,
args: [DOCUMENT]
}] }], propDecorators: { iconPos: [{
type: Input
}], loadingIcon: [{
type: Input
}], label: [{
type: Input
}], icon: [{
type: Input
}], loading: [{
type: Input
}], severity: [{
type: Input
}], raised: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], rounded: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], text: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], outlined: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], size: [{
type: Input
}], plain: [{
type: Input,
args: [{ transform: booleanAttribute }]
}] } });
/**
* Button is an extension to standard button element with icons and theming.
* @group Components
*/
export class Button {
el;
/**
* Type of the button.
* @group Props
*/
type = 'button';
/**
* Position of the icon.
* @group Props
*/
iconPos = 'left';
/**
* Name of the icon.
* @group Props
*/
icon;
/**
* Value of the badge.
* @group Props
*/
badge;
/**
* Uses to pass attributes to the label's DOM element.
* @group Props
*/
label;
/**
* When present, it specifies that the component should be disabled.
* @group Props
*/
disabled;
/**
* Whether the button is in loading state.
* @group Props
*/
loading = false;
/**
* Icon to display in loading state.
* @group Props
*/
loadingIcon;
/**
* Add a shadow to indicate elevation.
* @group Props
*/
raised = false;
/**
* Add a circular border radius to the button.
* @group Props
*/
rounded = false;
/**
* Add a textual class to the button without a background initially.
* @group Props
*/
text = false;
/**
* Add a plain textual class to the button without a background initially.
* @group Props
*/
plain = false;
/**
* Defines the style of the button.
* @group Props
*/
severity;
/**
* Add a border class without a background initially.
* @group Props
*/
outlined = false;
/**
* Add a link style to the button.
* @group Props
*/
link = false;
/**
* Add a tabindex to the button.
* @group Props
*/
tabindex;
/**
* Defines the size of the button.
* @group Props
*/
size;
/**
* Inline style of the element.
* @group Props
*/
style;
/**
* Class of the element.
* @group Props
*/
styleClass;
/**
* Style class of the badge.
* @group Props
*/
badgeClass;
/**
* Used to define a string that autocomplete attribute the current element.
* @group Props
*/
ariaLabel;
/**
* When present, it specifies that the component should automatically get focus on load.
* @group Props
*/
autofocus;
/**
* Callback to execute when button is clicked.
* This event is intended to be used with the component. Using a regular