@engie-group/fluid-design-system-angular
Version:
Fluid Design System Angular
94 lines • 14.1 kB
JavaScript
import { CommonModule } from '@angular/common';
import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, ViewEncapsulation } from '@angular/core';
import { IconComponent } from '../icon/icon.component';
import { buttonSizeToCSS } from './button.model';
import { SpinnerComponent } from '../spinner/spinner.component';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
export class ButtonComponent {
constructor() {
/**
* @ignore
*/
this.buttonClassName = 'nj-btn';
/**
* Type of the button. Some values may be submit, reset...
*/
this.type = 'button';
/**
* Button emphasis
*/
this.emphasis = 'bold';
/**
* Button variant theme
*/
this.variant = 'primary';
/**
* Whether button has custom icon
*/
this.hasCustomIcon = false;
/**
* Button click output. Emits a MouseEvent
*/
this.buttonClick = new EventEmitter();
}
/**
* @ignore
*/
getButtonEmphasisClass() {
if (!this.emphasis || this.emphasis === 'bold') {
return '';
}
return `${this.buttonClassName}--${this.emphasis}`;
}
/**
* @ignore
*/
getButtonVariantClass() {
if (!this.variant || this.variant === 'primary') {
return '';
}
return `${this.buttonClassName}--${this.variant}`;
}
getButtonSizeClass() {
if (!this.size || this.size === 'medium' || this.size === 'normal') {
return '';
}
return `${this.buttonClassName}--${buttonSizeToCSS(this.size)}`;
}
/**
* @ignore
*/
getButtonIsLoadingClass() {
return this.isLoading ? `${this.buttonClassName}--is-loading` : '';
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ButtonComponent, isStandalone: true, selector: "nj-button", inputs: { type: "type", isDisabled: "isDisabled", isLoading: "isLoading", tabIndex: "tabIndex", emphasis: "emphasis", variant: "variant", size: "size", hasCustomIcon: "hasCustomIcon", icon: "icon", ariaLabel: "ariaLabel" }, outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "<button\n class=\"nj-btn\"\n [type]=\"type\"\n (click)=\"buttonClick.emit($event)\"\n [disabled]=\"isDisabled\"\n [ngClass]=\"[getButtonEmphasisClass(), getButtonVariantClass(), getButtonSizeClass(), getButtonIsLoadingClass()]\"\n [attr.tabindex]=\"tabIndex ? tabIndex : null\"\n [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\n>\n <ng-container *ngIf=\"!isLoading\">\n <ng-container *ngTemplateOutlet=\"itemContent\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"isLoading\">\n <ng-container *ngTemplateOutlet=\"itemSpinner\"></ng-container>\n </ng-container>\n</button>\n\n<ng-template #itemContent>\n <span *ngIf=\"hasCustomIcon || icon\" class=\"nj-btn__icon\">\n <nj-icon *ngIf=\"icon\" [name]=\"icon\" size=\"inherit\" variant=\"inherit\"></nj-icon>\n <ng-container *ngIf=\"!icon\">\n <ng-content select=\"[custom-icon]\"></ng-content>\n </ng-container>\n </span>\n <ng-content></ng-content>\n</ng-template>\n\n<ng-template #itemSpinner>\n <nj-spinner [isLoading]=\"true\" [isBlock]=\"false\" />\n</ng-template>\n", dependencies: [{ kind: "component", type: IconComponent, selector: "nj-icon", inputs: ["size", "variant"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SpinnerComponent, selector: "nj-spinner", inputs: ["variant", "size", "isLoading", "isBlock"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ButtonComponent, decorators: [{
type: Component,
args: [{ selector: 'nj-button', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [IconComponent, CommonModule, SpinnerComponent], template: "<button\n class=\"nj-btn\"\n [type]=\"type\"\n (click)=\"buttonClick.emit($event)\"\n [disabled]=\"isDisabled\"\n [ngClass]=\"[getButtonEmphasisClass(), getButtonVariantClass(), getButtonSizeClass(), getButtonIsLoadingClass()]\"\n [attr.tabindex]=\"tabIndex ? tabIndex : null\"\n [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\n>\n <ng-container *ngIf=\"!isLoading\">\n <ng-container *ngTemplateOutlet=\"itemContent\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"isLoading\">\n <ng-container *ngTemplateOutlet=\"itemSpinner\"></ng-container>\n </ng-container>\n</button>\n\n<ng-template #itemContent>\n <span *ngIf=\"hasCustomIcon || icon\" class=\"nj-btn__icon\">\n <nj-icon *ngIf=\"icon\" [name]=\"icon\" size=\"inherit\" variant=\"inherit\"></nj-icon>\n <ng-container *ngIf=\"!icon\">\n <ng-content select=\"[custom-icon]\"></ng-content>\n </ng-container>\n </span>\n <ng-content></ng-content>\n</ng-template>\n\n<ng-template #itemSpinner>\n <nj-spinner [isLoading]=\"true\" [isBlock]=\"false\" />\n</ng-template>\n" }]
}], propDecorators: { type: [{
type: Input
}], isDisabled: [{
type: Input
}], isLoading: [{
type: Input
}], tabIndex: [{
type: Input
}], emphasis: [{
type: Input
}], variant: [{
type: Input
}], size: [{
type: Input
}], hasCustomIcon: [{
type: Input
}], icon: [{
type: Input
}], ariaLabel: [{
type: Input
}], buttonClick: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnV0dG9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL2J1dHRvbi9idXR0b24uY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvYnV0dG9uL2J1dHRvbi5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUFFLHVCQUF1QixFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUNuSCxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sd0JBQXdCLENBQUM7QUFDdkQsT0FBTyxFQUE4QixlQUFlLEVBQWlCLE1BQU0sZ0JBQWdCLENBQUM7QUFDNUYsT0FBTyxFQUFFLGdCQUFnQixFQUFFLE1BQU0sOEJBQThCLENBQUM7OztBQVVoRSxNQUFNLE9BQU8sZUFBZTtJQVI1QjtRQVNFOztXQUVHO1FBQ2Msb0JBQWUsR0FBRyxRQUFRLENBQUM7UUFFNUM7O1dBRUc7UUFDTSxTQUFJLEdBQUcsUUFBUSxDQUFDO1FBaUJ6Qjs7V0FFRztRQUNNLGFBQVEsR0FBbUIsTUFBTSxDQUFDO1FBRTNDOztXQUVHO1FBQ00sWUFBTyxHQUFrQixTQUFTLENBQUM7UUFPNUM7O1dBRUc7UUFDTSxrQkFBYSxHQUFHLEtBQUssQ0FBQztRQWEvQjs7V0FFRztRQUNPLGdCQUFXLEdBQUcsSUFBSSxZQUFZLEVBQWMsQ0FBQztLQW1DeEQ7SUFqQ0M7O09BRUc7SUFDSCxzQkFBc0I7UUFDcEIsSUFBSSxDQUFDLElBQUksQ0FBQyxRQUFRLElBQUksSUFBSSxDQUFDLFFBQVEsS0FBSyxNQUFNLEVBQUU7WUFDOUMsT0FBTyxFQUFFLENBQUM7U0FDWDtRQUNELE9BQU8sR0FBRyxJQUFJLENBQUMsZUFBZSxLQUFLLElBQUksQ0FBQyxRQUFRLEVBQUUsQ0FBQztJQUNyRCxDQUFDO0lBRUQ7O09BRUc7SUFDSCxxQkFBcUI7UUFDbkIsSUFBSSxDQUFDLElBQUksQ0FBQyxPQUFPLElBQUksSUFBSSxDQUFDLE9BQU8sS0FBSyxTQUFTLEVBQUU7WUFDL0MsT0FBTyxFQUFFLENBQUM7U0FDWDtRQUNELE9BQU8sR0FBRyxJQUFJLENBQUMsZUFBZSxLQUFLLElBQUksQ0FBQyxPQUFPLEVBQUUsQ0FBQztJQUNwRCxDQUFDO0lBRVMsa0JBQWtCO1FBQzFCLElBQUksQ0FBQyxJQUFJLENBQUMsSUFBSSxJQUFJLElBQUksQ0FBQyxJQUFJLEtBQUssUUFBUSxJQUFJLElBQUksQ0FBQyxJQUFJLEtBQUssUUFBUSxFQUFFO1lBQ2xFLE9BQU8sRUFBRSxDQUFDO1NBQ1g7UUFDRCxPQUFPLEdBQUcsSUFBSSxDQUFDLGVBQWUsS0FBSyxlQUFlLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxFQUFFLENBQUM7SUFDbEUsQ0FBQztJQUVEOztPQUVHO0lBQ0gsdUJBQXVCO1FBQ3JCLE9BQU8sSUFBSSxDQUFDLFNBQVMsQ0FBQyxDQUFDLENBQUMsR0FBRyxJQUFJLENBQUMsZUFBZSxjQUFjLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQztJQUNyRSxDQUFDOytHQTlGVSxlQUFlO21HQUFmLGVBQWUsOFVDZDVCLGdqQ0E4QkEsNENEbEJZLGFBQWEsZ0ZBQUUsWUFBWSx3WUFBRSxnQkFBZ0I7OzRGQUU1QyxlQUFlO2tCQVIzQixTQUFTOytCQUNFLFdBQVcsbUJBRUosdUJBQXVCLENBQUMsTUFBTSxpQkFDaEMsaUJBQWlCLENBQUMsSUFBSSxjQUN6QixJQUFJLFdBQ1AsQ0FBQyxhQUFhLEVBQUUsWUFBWSxFQUFFLGdCQUFnQixDQUFDOzhCQVcvQyxJQUFJO3NCQUFaLEtBQUs7Z0JBS0csVUFBVTtzQkFBbEIsS0FBSztnQkFLRyxTQUFTO3NCQUFqQixLQUFLO2dCQUtHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBS0csUUFBUTtzQkFBaEIsS0FBSztnQkFLRyxPQUFPO3NCQUFmLEtBQUs7Z0JBS0csSUFBSTtzQkFBWixLQUFLO2dCQUtHLGFBQWE7c0JBQXJCLEtBQUs7Z0JBS0csSUFBSTtzQkFBWixLQUFLO2dCQU1HLFNBQVM7c0JBQWpCLEtBQUs7Z0JBS0ksV0FBVztzQkFBcEIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIElucHV0LCBPdXRwdXQsIFZpZXdFbmNhcHN1bGF0aW9uIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBJY29uQ29tcG9uZW50IH0gZnJvbSAnLi4vaWNvbi9pY29uLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBCdXR0b25FbXBoYXNpcywgQnV0dG9uU2l6ZSwgYnV0dG9uU2l6ZVRvQ1NTLCBCdXR0b25WYXJpYW50IH0gZnJvbSAnLi9idXR0b24ubW9kZWwnO1xuaW1wb3J0IHsgU3Bpbm5lckNvbXBvbmVudCB9IGZyb20gJy4uL3NwaW5uZXIvc3Bpbm5lci5jb21wb25lbnQnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICduai1idXR0b24nLFxuICB0ZW1wbGF0ZVVybDogJy4vYnV0dG9uLmNvbXBvbmVudC5odG1sJyxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG4gIGVuY2Fwc3VsYXRpb246IFZpZXdFbmNhcHN1bGF0aW9uLk5vbmUsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGltcG9ydHM6IFtJY29uQ29tcG9uZW50LCBDb21tb25Nb2R1bGUsIFNwaW5uZXJDb21wb25lbnRdXG59KVxuZXhwb3J0IGNsYXNzIEJ1dHRvbkNvbXBvbmVudCB7XG4gIC8qKlxuICAgKiBAaWdub3JlXG4gICAqL1xuICBwcml2YXRlIHJlYWRvbmx5IGJ1dHRvbkNsYXNzTmFtZSA9ICduai1idG4nO1xuXG4gIC8qKlxuICAgKiBUeXBlIG9mIHRoZSBidXR0b24uIFNvbWUgdmFsdWVzIG1heSBiZSBzdWJtaXQsIHJlc2V0Li4uXG4gICAqL1xuICBASW5wdXQoKSB0eXBlID0gJ2J1dHRvbic7XG5cbiAgLyoqXG4gICAqIFdoZXRoZXIgYnV0dG9uIGlzIGRpc2FibGVkIG9yIG5vdFxuICAgKi9cbiAgQElucHV0KCkgaXNEaXNhYmxlZD86IGJvb2xlYW47XG5cbiAgLyoqXG4gICAqIFdoZXRoZXIgYnV0dG9uIGlzIGxvYWRpbmcgb3Igbm90XG4gICAqL1xuICBASW5wdXQoKSBpc0xvYWRpbmc/OiBib29sZWFuO1xuXG4gIC8qKlxuICAgKiBUYWIgaW5kZXgsIGFsbG93cyB5b3UgdG8gY3VzdG9taXplIGtleWJvYXJkIG5hdmlnYXRpb25cbiAgICovXG4gIEBJbnB1dCgpIHRhYkluZGV4PzogbnVtYmVyO1xuXG4gIC8qKlxuICAgKiBCdXR0b24gZW1waGFzaXNcbiAgICovXG4gIEBJbnB1dCgpIGVtcGhhc2lzOiBCdXR0b25FbXBoYXNpcyA9ICdib2xkJztcblxuICAvKipcbiAgICogQnV0dG9uIHZhcmlhbnQgdGhlbWVcbiAgICovXG4gIEBJbnB1dCgpIHZhcmlhbnQ6IEJ1dHRvblZhcmlhbnQgPSAncHJpbWFyeSc7XG5cbiAgLyoqXG4gICAqIEJ1dHRvbiBzaXplXG4gICAqL1xuICBASW5wdXQoKSBzaXplPzogQnV0dG9uU2l6ZTtcblxuICAvKipcbiAgICogV2hldGhlciBidXR0b24gaGFzIGN1c3RvbSBpY29uXG4gICAqL1xuICBASW5wdXQoKSBoYXNDdXN0b21JY29uID0gZmFsc2U7XG5cbiAgLyoqXG4gICAqIEJ1dHRvbiBtYXRlcmlhbCBpY29uXG4gICAqL1xuICBASW5wdXQoKSBpY29uPzogc3RyaW5nO1xuXG4gIC8qKlxuICAgKiBUZXh0IGFsdGVybmF0aXZlIGZvciBhc3Npc3RpdmUgdGVjaG5vbG9naWVzXG4gICAqIEBzZWUgaHR0cHM6Ly9kZXZlbG9wZXIubW96aWxsYS5vcmcvZW4tVVMvZG9jcy9XZWIvQWNjZXNzaWJpbGl0eS9BUklBL0F0dHJpYnV0ZXMvYXJpYS1sYWJlbFxuICAgKi9cbiAgQElucHV0KCkgYXJpYUxhYmVsPzogc3RyaW5nO1xuXG4gIC8qKlxuICAgKiBCdXR0b24gY2xpY2sgb3V0cHV0LiBFbWl0cyBhIE1vdXNlRXZlbnRcbiAgICovXG4gIEBPdXRwdXQoKSBidXR0b25DbGljayA9IG5ldyBFdmVudEVtaXR0ZXI8TW91c2VFdmVudD4oKTtcblxuICAvKipcbiAgICogQGlnbm9yZVxuICAgKi9cbiAgZ2V0QnV0dG9uRW1waGFzaXNDbGFzcygpOiBzdHJpbmcge1xuICAgIGlmICghdGhpcy5lbXBoYXNpcyB8fCB0aGlzLmVtcGhhc2lzID09PSAnYm9sZCcpIHtcbiAgICAgIHJldHVybiAnJztcbiAgICB9XG4gICAgcmV0dXJuIGAke3RoaXMuYnV0dG9uQ2xhc3NOYW1lfS0tJHt0aGlzLmVtcGhhc2lzfWA7XG4gIH1cblxuICAvKipcbiAgICogQGlnbm9yZVxuICAgKi9cbiAgZ2V0QnV0dG9uVmFyaWFudENsYXNzKCk6IHN0cmluZyB7XG4gICAgaWYgKCF0aGlzLnZhcmlhbnQgfHwgdGhpcy52YXJpYW50ID09PSAncHJpbWFyeScpIHtcbiAgICAgIHJldHVybiAnJztcbiAgICB9XG4gICAgcmV0dXJuIGAke3RoaXMuYnV0dG9uQ2xhc3NOYW1lfS0tJHt0aGlzLnZhcmlhbnR9YDtcbiAgfVxuXG4gIHByb3RlY3RlZCBnZXRCdXR0b25TaXplQ2xhc3MoKTogc3RyaW5nIHtcbiAgICBpZiAoIXRoaXMuc2l6ZSB8fCB0aGlzLnNpemUgPT09ICdtZWRpdW0nIHx8IHRoaXMuc2l6ZSA9PT0gJ25vcm1hbCcpIHtcbiAgICAgIHJldHVybiAnJztcbiAgICB9XG4gICAgcmV0dXJuIGAke3RoaXMuYnV0dG9uQ2xhc3NOYW1lfS0tJHtidXR0b25TaXplVG9DU1ModGhpcy5zaXplKX1gO1xuICB9XG5cbiAgLyoqXG4gICAqIEBpZ25vcmVcbiAgICovXG4gIGdldEJ1dHRvbklzTG9hZGluZ0NsYXNzKCk6IHN0cmluZyB7XG4gICAgcmV0dXJuIHRoaXMuaXNMb2FkaW5nID8gYCR7dGhpcy5idXR0b25DbGFzc05hbWV9LS1pcy1sb2FkaW5nYCA6ICcnO1xuICB9XG59XG4iLCI8YnV0dG9uXG4gIGNsYXNzPVwibmotYnRuXCJcbiAgW3R5cGVdPVwidHlwZVwiXG4gIChjbGljayk9XCJidXR0b25DbGljay5lbWl0KCRldmVudClcIlxuICBbZGlzYWJsZWRdPVwiaXNEaXNhYmxlZFwiXG4gIFtuZ0NsYXNzXT1cIltnZXRCdXR0b25FbXBoYXNpc0NsYXNzKCksIGdldEJ1dHRvblZhcmlhbnRDbGFzcygpLCBnZXRCdXR0b25TaXplQ2xhc3MoKSwgZ2V0QnV0dG9uSXNMb2FkaW5nQ2xhc3MoKV1cIlxuICBbYXR0ci50YWJpbmRleF09XCJ0YWJJbmRleCA/IHRhYkluZGV4IDogbnVsbFwiXG4gIFthdHRyLmFyaWEtbGFiZWxdPVwiYXJpYUxhYmVsID8gYXJpYUxhYmVsIDogbnVsbFwiXG4+XG4gIDxuZy1jb250YWluZXIgKm5nSWY9XCIhaXNMb2FkaW5nXCI+XG4gICAgPG5nLWNvbnRhaW5lciAqbmdUZW1wbGF0ZU91dGxldD1cIml0ZW1Db250ZW50XCI+PC9uZy1jb250YWluZXI+XG4gIDwvbmctY29udGFpbmVyPlxuICA8bmctY29udGFpbmVyICpuZ0lmPVwiaXNMb2FkaW5nXCI+XG4gICAgPG5nLWNvbnRhaW5lciAqbmdUZW1wbGF0ZU91dGxldD1cIml0ZW1TcGlubmVyXCI+PC9uZy1jb250YWluZXI+XG4gIDwvbmctY29udGFpbmVyPlxuPC9idXR0b24+XG5cbjxuZy10ZW1wbGF0ZSAjaXRlbUNvbnRlbnQ+XG4gIDxzcGFuICpuZ0lmPVwiaGFzQ3VzdG9tSWNvbiB8fCBpY29uXCIgY2xhc3M9XCJuai1idG5fX2ljb25cIj5cbiAgICA8bmotaWNvbiAqbmdJZj1cImljb25cIiBbbmFtZV09XCJpY29uXCIgc2l6ZT1cImluaGVyaXRcIiB2YXJpYW50PVwiaW5oZXJpdFwiPjwvbmotaWNvbj5cbiAgICA8bmctY29udGFpbmVyICpuZ0lmPVwiIWljb25cIj5cbiAgICAgIDxuZy1jb250ZW50IHNlbGVjdD1cIltjdXN0b20taWNvbl1cIj48L25nLWNvbnRlbnQ+XG4gICAgPC9uZy1jb250YWluZXI+XG4gIDwvc3Bhbj5cbiAgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxuPC9uZy10ZW1wbGF0ZT5cblxuPG5nLXRlbXBsYXRlICNpdGVtU3Bpbm5lcj5cbiAgPG5qLXNwaW5uZXIgW2lzTG9hZGluZ109XCJ0cnVlXCIgW2lzQmxvY2tdPVwiZmFsc2VcIiAvPlxuPC9uZy10ZW1wbGF0ZT5cbiJdfQ==