@xui/components
Version:
xUI Components for Angular
114 lines (112 loc) • 14.5 kB
JavaScript
import { booleanAttribute, ChangeDetectionStrategy, Component, computed, ElementRef, EventEmitter, Host, input, Input, Optional, Output, signal } from '@angular/core';
import { BUTTON_MODULE, XuiConfigService } from '../config';
import { delay } from '../utils';
import { XuiButtonGroup } from './button-group';
import * as i0 from "@angular/core";
import * as i1 from "../config";
import * as i2 from "./button-group";
export class XuiButton {
constructor(
// TODO: Anchor for popover; consider removing it and refactoring
elementRef, configService, group) {
this.elementRef = elementRef;
this.configService = configService;
this.group = group;
this._moduleName = BUTTON_MODULE;
this._state = signal(0);
this.type = input();
this.size = input();
this.color = input();
this.shine = input(false, { transform: booleanAttribute });
this.disabled = input(false, { transform: booleanAttribute });
this.stateDelay = input(5000);
// Used to emit event when user interacts with button with spacebar or enter
// eslint-disable-next-line @angular-eslint/no-output-native
this.click = new EventEmitter();
this._class = computed(() => {
const config = this.configService.getConfigForComponent(BUTTON_MODULE);
return (`x-button-${this.size() ?? this.group?.size() ?? config?.size ?? 'medium'} ` +
`x-button-${this.type() ?? this.group?.type() ?? config?.type ?? 'normal'} ` +
`x-button-${this.color() ?? this.group?.color() ?? config?.color ?? 'primary'}`);
});
}
async _keyboardInteraction(event) {
if (this.disabled()) {
return;
}
this.click.emit(event);
await this._onAsync(event);
}
async _onAsync(event) {
if (this.disabled()) {
return;
}
// Do not prevent events when button is disabled
event?.preventDefault();
event?.stopPropagation();
if (!this.onClick) {
return;
}
this._state.set(1);
try {
this._state.set((await this.onClick()) ? 2 : 3);
}
catch {
this._state.set(2);
}
await delay(5000);
this._state.set(0);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XuiButton, deps: [{ token: i0.ElementRef }, { token: i1.XuiConfigService }, { token: i2.XuiButtonGroup, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.1", type: XuiButton, selector: "xui-button", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, shine: { classPropertyName: "shine", publicName: "shine", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, stateDelay: { classPropertyName: "stateDelay", publicName: "stateDelay", isSignal: true, isRequired: false, transformFunction: null }, onClick: { classPropertyName: "onClick", publicName: "onClick", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { click: "click" }, host: { listeners: { "click": "_onAsync($event)", "keydown.enter": "_keyboardInteraction($event)", "keydown.space": "_keyboardInteraction($event)" }, properties: { "class": "_class()", "class.x-button--non-idle": "_state() != 0", "class.x-button--loading": "_state() == 1", "class.x-button--succeeded": "_state() == 2", "class.x-button--failed": "_state() == 3", "tabindex": "disabled() ? -1 : 0", "attr.disabled": "disabled() || null" }, classAttribute: "x-button" }, ngImport: i0, template: `<div class="x-button-content">
<ng-content />
</div>
<div class="x-button-state-image"></div>
(shine() && !disabled()) {
<div class="x-button-shine">
<div class="x-button-shine-inner">
<div class="x-button-shine-element"></div>
</div>
</div>
}`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XuiButton, decorators: [{
type: Component,
args: [{
selector: 'xui-button',
changeDetection: ChangeDetectionStrategy.OnPush,
template: `<div class="x-button-content">
<ng-content />
</div>
<div class="x-button-state-image"></div>
(shine() && !disabled()) {
<div class="x-button-shine">
<div class="x-button-shine-inner">
<div class="x-button-shine-element"></div>
</div>
</div>
}`,
host: {
class: 'x-button',
'[class]': '_class()',
'[class.x-button--non-idle]': '_state() != 0',
'[class.x-button--loading]': '_state() == 1',
'[class.x-button--succeeded]': '_state() == 2',
'[class.x-button--failed]': '_state() == 3',
'[tabindex]': 'disabled() ? -1 : 0',
'[attr.disabled]': 'disabled() || null',
'(click)': '_onAsync($event)',
'(keydown.enter)': '_keyboardInteraction($event)',
'(keydown.space)': '_keyboardInteraction($event)'
}
}]
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.XuiConfigService }, { type: i2.XuiButtonGroup, decorators: [{
type: Optional
}, {
type: Host
}] }], propDecorators: { onClick: [{
type: Input
}], click: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnV0dG9uLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vbGlicy94dWkvc3JjL2J1dHRvbi9idXR0b24udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNMLGdCQUFnQixFQUNoQix1QkFBdUIsRUFDdkIsU0FBUyxFQUNULFFBQVEsRUFDUixVQUFVLEVBQ1YsWUFBWSxFQUNaLElBQUksRUFDSixLQUFLLEVBQ0wsS0FBSyxFQUNMLFFBQVEsRUFDUixNQUFNLEVBQ04sTUFBTSxFQUNQLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBRSxhQUFhLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSxXQUFXLENBQUM7QUFDNUQsT0FBTyxFQUFFLEtBQUssRUFBRSxNQUFNLFVBQVUsQ0FBQztBQUVqQyxPQUFPLEVBQUUsY0FBYyxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7Ozs7QUErQmhELE1BQU0sT0FBTyxTQUFTO0lBeUJwQjtJQUNFLGlFQUFpRTtJQUMxRCxVQUFzQixFQUNyQixhQUErQixFQUNYLEtBQXNCO1FBRjNDLGVBQVUsR0FBVixVQUFVLENBQVk7UUFDckIsa0JBQWEsR0FBYixhQUFhLENBQWtCO1FBQ1gsVUFBSyxHQUFMLEtBQUssQ0FBaUI7UUE1Qm5DLGdCQUFXLEdBQUcsYUFBYSxDQUFDO1FBQzdDLFdBQU0sR0FBRyxNQUFNLENBQWdCLENBQUMsQ0FBQyxDQUFDO1FBRWxDLFNBQUksR0FBRyxLQUFLLEVBQWMsQ0FBQztRQUMzQixTQUFJLEdBQUcsS0FBSyxFQUFjLENBQUM7UUFDM0IsVUFBSyxHQUFHLEtBQUssRUFBZSxDQUFDO1FBQzdCLFVBQUssR0FBRyxLQUFLLENBQUMsS0FBSyxFQUFFLEVBQUUsU0FBUyxFQUFFLGdCQUFnQixFQUFFLENBQUMsQ0FBQztRQUN0RCxhQUFRLEdBQUcsS0FBSyxDQUFDLEtBQUssRUFBRSxFQUFFLFNBQVMsRUFBRSxnQkFBZ0IsRUFBRSxDQUFDLENBQUM7UUFDekQsZUFB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cUJBQ2xEO2lCQUNGOzswQkE4QkksUUFBUTs7MEJBQUksSUFBSTt5Q0FuQlYsT0FBTztzQkFBZixLQUFLO2dCQUlhLEtBQUs7c0JBQXZCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBib29sZWFuQXR0cmlidXRlLFxuICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcbiAgQ29tcG9uZW50LFxuICBjb21wdXRlZCxcbiAgRWxlbWVudFJlZixcbiAgRXZlbnRFbWl0dGVyLFxuICBIb3N0LFxuICBpbnB1dCxcbiAgSW5wdXQsXG4gIE9wdGlvbmFsLFxuICBPdXRwdXQsXG4gIHNpZ25hbFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEJVVFRPTl9NT0RVTEUsIFh1aUNvbmZpZ1NlcnZpY2UgfSBmcm9tICcuLi9jb25maWcnO1xuaW1wb3J0IHsgZGVsYXkgfSBmcm9tICcuLi91dGlscyc7XG5pbXBvcnQgeyBCdXR0b25Db2xvciwgQnV0dG9uU2l6ZSwgQnV0dG9uVHlwZSB9IGZyb20gJy4vYnV0dG9uLnR5cGVzJztcbmltcG9ydCB7IFh1aUJ1dHRvbkdyb3VwIH0gZnJvbSAnLi9idXR0b24tZ3JvdXAnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICd4dWktYnV0dG9uJyxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG4gIHRlbXBsYXRlOiBgPGRpdiBjbGFzcz1cIngtYnV0dG9uLWNvbnRlbnRcIj5cbiAgICAgIDxuZy1jb250ZW50IC8+XG4gICAgPC9kaXY+XG4gICAgPGRpdiBjbGFzcz1cIngtYnV0dG9uLXN0YXRlLWltYWdlXCI+PC9kaXY+XG5cbiAgICBAaWYgKHNoaW5lKCkgJiYgIWRpc2FibGVkKCkpIHtcbiAgICAgIDxkaXYgY2xhc3M9XCJ4LWJ1dHRvbi1zaGluZVwiPlxuICAgICAgICA8ZGl2IGNsYXNzPVwieC1idXR0b24tc2hpbmUtaW5uZXJcIj5cbiAgICAgICAgICA8ZGl2IGNsYXNzPVwieC1idXR0b24tc2hpbmUtZWxlbWVudFwiPjwvZGl2PlxuICAgICAgICA8L2Rpdj5cbiAgICAgIDwvZGl2PlxuICAgIH1gLFxuICBob3N0OiB7XG4gICAgY2xhc3M6ICd4LWJ1dHRvbicsXG4gICAgJ1tjbGFzc10nOiAnX2NsYXNzKCknLFxuICAgICdbY2xhc3MueC1idXR0b24tLW5vbi1pZGxlXSc6ICdfc3RhdGUoKSAhPSAwJyxcbiAgICAnW2NsYXNzLngtYnV0dG9uLS1sb2FkaW5nXSc6ICdfc3RhdGUoKSA9PSAxJyxcbiAgICAnW2NsYXNzLngtYnV0dG9uLS1zdWNjZWVkZWRdJzogJ19zdGF0ZSgpID09IDInLFxuICAgICdbY2xhc3MueC1idXR0b24tLWZhaWxlZF0nOiAnX3N0YXRlKCkgPT0gMycsXG4gICAgJ1t0YWJpbmRleF0nOiAnZGlzYWJsZWQoKSA/IC0xIDogMCcsXG4gICAgJ1thdHRyLmRpc2FibGVkXSc6ICdkaXNhYmxlZCgpIHx8IG51bGwnLFxuICAgICcoY2xpY2spJzogJ19vbkFzeW5jKCRldmVudCknLFxuICAgICcoa2V5ZG93bi5lbnRlciknOiAnX2tleWJvYXJkSW50ZXJhY3Rpb24oJGV2ZW50KScsXG4gICAgJyhrZXlkb3duLnNwYWNlKSc6ICdfa2V5Ym9hcmRJbnRlcmFjdGlvbigkZXZlbnQpJ1xuICB9XG59KVxuZXhwb3J0IGNsYXNzIFh1aUJ1dHRvbiB7XG4gIHByaXZhdGUgcmVhZG9ubHkgX21vZHVsZU5hbWUgPSBCVVRUT05fTU9EVUxFO1xuICBfc3RhdGUgPSBzaWduYWw8MCB8IDEgfCAyIHwgMz4oMCk7XG5cbiAgdHlwZSA9IGlucHV0PEJ1dHRvblR5cGU+KCk7XG4gIHNpemUgPSBpbnB1dDxCdXR0b25TaXplPigpO1xuICBjb2xvciA9IGlucHV0PEJ1dHRvbkNvbG9yPigpO1xuICBzaGluZSA9IGlucHV0KGZhbHNlLCB7IHRyYW5zZm9ybTogYm9vbGVhbkF0dHJpYnV0ZSB9KTtcbiAgZGlzYWJsZWQgPSBpbnB1dChmYWxzZSwgeyB0cmFuc2Zvcm06IGJvb2xlYW5BdHRyaWJ1dGUgfSk7XG4gIHN0YXRlRGVsYXkgPSBpbnB1dDxudW1iZXI+KDUwMDApO1xuICBASW5wdXQoKSBvbkNsaWNrPzogKCkgPT4gUHJvbWlzZTxib29sZWFuPjtcblxuICAvLyBVc2VkIHRvIGVtaXQgZXZlbnQgd2hlbiB1c2VyIGludGVyYWN0cyB3aXRoIGJ1dHRvbiB3aXRoIHNwYWNlYmFyIG9yIGVudGVyXG4gIC8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBAYW5ndWxhci1lc2xpbnQvbm8tb3V0cHV0LW5hdGl2ZVxuICBAT3V0cHV0KCkgcmVhZG9ubHkgY2xpY2sgPSBuZXcgRXZlbnRFbWl0dGVyPHVua25vd24+KCk7XG5cbiAgX2NsYXNzID0gY29tcHV0ZWQoKCkgPT4ge1xuICAgIGNvbnN0IGNvbmZpZyA9IHRoaXMuY29uZmlnU2VydmljZS5nZXRDb25maWdGb3JDb21wb25lbnQoQlVUVE9OX01PRFVMRSk7XG4gICAgcmV0dXJuIChcbiAgICAgIGB4LWJ1dHRvbi0ke3RoaXMuc2l6ZSgpID8/IHRoaXMuZ3JvdXA/LnNpemUoKSA/PyBjb25maWc/LnNpemUgPz8gJ21lZGl1bSd9IGAgK1xuICAgICAgYHgtYnV0dG9uLSR7dGhpcy50eXBlKCkgPz8gdGhpcy5ncm91cD8udHlwZSgpID8/IGNvbmZpZz8udHlwZSA/PyAnbm9ybWFsJ30gYCArXG4gICAgICBgeC1idXR0b24tJHt0aGlzLmNvbG9yKCkgPz8gdGhpcy5ncm91cD8uY29sb3IoKSA/PyBjb25maWc/LmNvbG9yID8/ICdwcmltYXJ5J31gXG4gICAgKTtcbiAgfSk7XG5cbiAgY29uc3RydWN0b3IoXG4gICAgLy8gVE9ETzogQW5jaG9yIGZvciBwb3BvdmVyOyBjb25zaWRlciByZW1vdmluZyBpdCBhbmQgcmVmYWN0b3JpbmdcbiAgICBwdWJsaWMgZWxlbWVudFJlZjogRWxlbWVudFJlZixcbiAgICBwcml2YXRlIGNvbmZpZ1NlcnZpY2U6IFh1aUNvbmZpZ1NlcnZpY2UsXG4gICAgQE9wdGlvbmFsKCkgQEhvc3QoKSBwcml2YXRlIGdyb3VwPzogWHVpQnV0dG9uR3JvdXBcbiAgKSB7fVxuXG4gIGFzeW5jIF9rZXlib2FyZEludGVyYWN0aW9uKGV2ZW50PzogTW91c2VFdmVudCB8IEtleWJvYXJkRXZlbnQpIHtcbiAgICBpZiAodGhpcy5kaXNhYmxlZCgpKSB7XG4gICAgICByZXR1cm47XG4gICAgfVxuXG4gICAgdGhpcy5jbGljay5lbWl0KGV2ZW50KTtcbiAgICBhd2FpdCB0aGlzLl9vbkFzeW5jKGV2ZW50KTtcbiAgfVxuXG4gIGFzeW5jIF9vbkFzeW5jKGV2ZW50PzogTW91c2VFdmVudCB8IEtleWJvYXJkRXZlbnQgfCBFdmVudCkge1xuICAgIGlmICh0aGlzLmRpc2FibGVkKCkpIHtcbiAgICAgIHJldHVybjtcbiAgICB9XG5cbiAgICAvLyBEbyBub3QgcHJldmVudCBldmVudHMgd2hlbiBidXR0b24gaXMgZGlzYWJsZWRcbiAgICBldmVudD8ucHJldmVudERlZmF1bHQoKTtcbiAgICBldmVudD8uc3RvcFByb3BhZ2F0aW9uKCk7XG5cbiAgICBpZiAoIXRoaXMub25DbGljaykge1xuICAgICAgcmV0dXJuO1xuICAgIH1cblxuICAgIHRoaXMuX3N0YXRlLnNldCgxKTtcblxuICAgIHRyeSB7XG4gICAgICB0aGlzLl9zdGF0ZS5zZXQoKGF3YWl0IHRoaXMub25DbGljaygpKSA/IDIgOiAzKTtcbiAgICB9IGNhdGNoIHtcbiAgICAgIHRoaXMuX3N0YXRlLnNldCgyKTtcbiAgICB9XG5cbiAgICBhd2FpdCBkZWxheSg1MDAwKTtcbiAgICB0aGlzLl9zdGF0ZS5zZXQoMCk7XG4gIH1cbn1cbiJdfQ==