@doku-dev/doku-fragment
Version:
A new Angular UI library that moving away from Bootstrap and built from scratch.
91 lines • 10.1 kB
JavaScript
import { CommonModule } from '@angular/common';
import { ChangeDetectionStrategy, Component, HostBinding, HostListener, Input, ViewEncapsulation, } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
export class DokuButton {
constructor(elementRef) {
this.elementRef = elementRef;
/**
* Variant of the button.
*
* @default `primary`
*/
this.variant = 'primary';
/**
* Size of the button.
*
* @default `medium`
*/
this.size = 'medium';
/**
* Whether button should be disabled.
*
* @default false
*/
this.disabled = false;
/**
* Whether button should be on loading state.
*
* If `true`, the button cannot be clicked.
*
* When `disabled` and `loading` are true, the `disabled` will take precedence.
*
* @default false
*/
this.loading = false;
}
get element() {
return this.elementRef.nativeElement;
}
get classes() {
return ['d-btn', `d-btn-${this.variant}`, `d-btn-${this.size}`];
}
/**
* Provide native `disabled` attribute to prevent button from being clicked.
*/
get disabledAttribute() {
return this.disabled || this.loading || null;
}
get isIconOnly() {
return Array.from(this.element.children).some((child) => child.hasAttribute('icon-only'));
}
onClick(e) {
if (this.disabled || this.loading) {
e.preventDefault();
e.stopImmediatePropagation();
}
}
}
DokuButton.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuButton, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
DokuButton.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DokuButton, isStandalone: true, selector: "button[doku-button], a[doku-button]", inputs: { variant: "variant", size: "size", disabled: "disabled", loading: "loading" }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.d-btn-disabled": "this.disabled", "class.d-btn-loading": "this.loading", "class": "this.classes", "attr.disabled": "this.disabledAttribute", "class.d-btn-icon": "this.isIconOnly" } }, exportAs: ["dokuButton"], ngImport: i0, template: "<span *ngIf=\"this.loading && !this.disabled\" class=\"d-btn-spinner\"><span></span></span>\n\n<ng-content select=\"[icon-left]\"></ng-content>\n\n<ng-content></ng-content>\n\n<ng-content select=\"[icon-right]\"></ng-content>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuButton, decorators: [{
type: Component,
args: [{ selector: 'button[doku-button], a[doku-button]', exportAs: 'dokuButton', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<span *ngIf=\"this.loading && !this.disabled\" class=\"d-btn-spinner\"><span></span></span>\n\n<ng-content select=\"[icon-left]\"></ng-content>\n\n<ng-content></ng-content>\n\n<ng-content select=\"[icon-right]\"></ng-content>\n" }]
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { variant: [{
type: Input
}], size: [{
type: Input
}], disabled: [{
type: HostBinding,
args: ['class.d-btn-disabled']
}, {
type: Input
}], loading: [{
type: HostBinding,
args: ['class.d-btn-loading']
}, {
type: Input
}], classes: [{
type: HostBinding,
args: ['class']
}], disabledAttribute: [{
type: HostBinding,
args: ['attr.disabled']
}], isIconOnly: [{
type: HostBinding,
args: ['class.d-btn-icon']
}], onClick: [{
type: HostListener,
args: ['click', ['$event']]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnV0dG9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2Rva3UtZnJhZ21lbnQvc3JjL2xpYi9idXR0b24vYnV0dG9uLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2Rva3UtZnJhZ21lbnQvc3JjL2xpYi9idXR0b24vYnV0dG9uLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxZQUFZLEVBQVcsTUFBTSxpQkFBaUIsQ0FBQztBQUN4RCxPQUFPLEVBQ0wsdUJBQXVCLEVBQ3ZCLFNBQVMsRUFFVCxXQUFXLEVBQ1gsWUFBWSxFQUNaLEtBQUssRUFDTCxpQkFBaUIsR0FDbEIsTUFBTSxlQUFlLENBQUM7OztBQVd2QixNQUFNLE9BQU8sVUFBVTtJQXFDckIsWUFBb0IsVUFBc0I7UUFBdEIsZUFBVSxHQUFWLFVBQVUsQ0FBWTtRQXBDMUM7Ozs7V0FJRztRQUNNLFlBQU8sR0FBZ0QsU0FBUyxDQUFDO1FBRTFFOzs7O1dBSUc7UUFDTSxTQUFJLEdBQWlDLFFBQVEsQ0FBQztRQUV2RDs7OztXQUlHO1FBR0gsYUFBUSxHQUFHLEtBQUssQ0FBQztRQUVqQjs7Ozs7Ozs7V0FRRztRQUdILFlBQU8sR0FBRyxLQUFLLENBQUM7SUFFNkIsQ0FBQztJQUU5QyxJQUFjLE9BQU87UUFDbkIsT0FBTyxJQUFJLENBQUMsVUFBVSxDQUFDLGFBQWEsQ0FBQztJQUN2QyxDQUFDO0lBRUQsSUFDYyxPQUFPO1FBQ25CLE9BQU8sQ0FBQyxPQUFPLEVBQUUsU0FBUyxJQUFJLENBQUMsT0FBTyxFQUFFLEVBQUUsU0FBUyxJQUFJLENBQUMsSUFBSSxFQUFFLENBQUMsQ0FBQztJQUNsRSxDQUFDO0lBRUQ7O09BRUc7SUFDSCxJQUNjLGlCQUFpQjtRQUM3QixPQUFPLElBQUksQ0FBQyxRQUFRLElBQUksSUFBSSxDQUFDLE9BQU8sSUFBSSxJQUFJLENBQUM7SUFDL0MsQ0FBQztJQUVELElBQ2MsVUFBVTtRQUN0QixPQUFPLEtBQUssQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxRQUFRLENBQUMsQ0FBQyxJQUFJLENBQUMsQ0FBQyxLQUFLLEVBQUUsRUFBRSxDQUFDLEtBQUssQ0FBQyxZQUFZLENBQUMsV0FBVyxDQUFDLENBQUMsQ0FBQztJQUM1RixDQUFDO0lBR1MsT0FBTyxDQUFDLENBQVE7UUFDeEIsSUFBSSxJQUFJLENBQUMsUUFBUSxJQUFJLElBQUksQ0FBQyxPQUFPLEVBQUU7WUFDakMsQ0FBQyxDQUFDLGNBQWMsRUFBRSxDQUFDO1lBQ25CLENBQUMsQ0FBQyx3QkFBd0IsRUFBRSxDQUFDO1NBQzlCO0lBQ0gsQ0FBQzs7dUdBbkVVLFVBQVU7MkZBQVYsVUFBVSxpZENwQnZCLHFPQU9BLDJDRFFZLFlBQVk7MkZBS1gsVUFBVTtrQkFUdEIsU0FBUzsrQkFDRSxxQ0FBcUMsWUFDckMsWUFBWSxjQUNWLElBQUksV0FDUCxDQUFDLFlBQVksQ0FBQyxpQkFFUixpQkFBaUIsQ0FBQyxJQUFJLG1CQUNwQix1QkFBdUIsQ0FBQyxNQUFNO2lHQVF0QyxPQUFPO3NCQUFmLEtBQUs7Z0JBT0csSUFBSTtzQkFBWixLQUFLO2dCQVNOLFFBQVE7c0JBRlAsV0FBVzt1QkFBQyxzQkFBc0I7O3NCQUNsQyxLQUFLO2dCQWNOLE9BQU87c0JBRk4sV0FBVzt1QkFBQyxxQkFBcUI7O3NCQUNqQyxLQUFLO2dCQVVRLE9BQU87c0JBRHBCLFdBQVc7dUJBQUMsT0FBTztnQkFTTixpQkFBaUI7c0JBRDlCLFdBQVc7dUJBQUMsZUFBZTtnQkFNZCxVQUFVO3NCQUR2QixXQUFXO3VCQUFDLGtCQUFrQjtnQkFNckIsT0FBTztzQkFEaEIsWUFBWTt1QkFBQyxPQUFPLEVBQUUsQ0FBQyxRQUFRLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21tb25Nb2R1bGUsIE5nQ2xhc3MgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHtcbiAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gIENvbXBvbmVudCxcbiAgRWxlbWVudFJlZixcbiAgSG9zdEJpbmRpbmcsXG4gIEhvc3RMaXN0ZW5lcixcbiAgSW5wdXQsXG4gIFZpZXdFbmNhcHN1bGF0aW9uLFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnYnV0dG9uW2Rva3UtYnV0dG9uXSwgYVtkb2t1LWJ1dHRvbl0nLFxuICBleHBvcnRBczogJ2Rva3VCdXR0b24nLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbQ29tbW9uTW9kdWxlXSxcbiAgdGVtcGxhdGVVcmw6ICcuL2J1dHRvbi5jb21wb25lbnQuaHRtbCcsXG4gIGVuY2Fwc3VsYXRpb246IFZpZXdFbmNhcHN1bGF0aW9uLk5vbmUsXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxufSlcbmV4cG9ydCBjbGFzcyBEb2t1QnV0dG9uIHtcbiAgLyoqXG4gICAqIFZhcmlhbnQgb2YgdGhlIGJ1dHRvbi5cbiAgICpcbiAgICogQGRlZmF1bHQgYHByaW1hcnlgXG4gICAqL1xuICBASW5wdXQoKSB2YXJpYW50OiAncHJpbWFyeScgfCAnc2Vjb25kYXJ5JyB8ICd0ZXh0JyB8ICdub3JtYWwnID0gJ3ByaW1hcnknO1xuXG4gIC8qKlxuICAgKiBTaXplIG9mIHRoZSBidXR0b24uXG4gICAqXG4gICAqIEBkZWZhdWx0IGBtZWRpdW1gXG4gICAqL1xuICBASW5wdXQoKSBzaXplOiAnc21hbGwnIHwgJ21lZGl1bScgfCAnbGFyZ2UnID0gJ21lZGl1bSc7XG5cbiAgLyoqXG4gICAqIFdoZXRoZXIgYnV0dG9uIHNob3VsZCBiZSBkaXNhYmxlZC5cbiAgICpcbiAgICogQGRlZmF1bHQgZmFsc2VcbiAgICovXG4gIEBIb3N0QmluZGluZygnY2xhc3MuZC1idG4tZGlzYWJsZWQnKVxuICBASW5wdXQoKVxuICBkaXNhYmxlZCA9IGZhbHNlO1xuXG4gIC8qKlxuICAgKiBXaGV0aGVyIGJ1dHRvbiBzaG91bGQgYmUgb24gbG9hZGluZyBzdGF0ZS5cbiAgICpcbiAgICogSWYgYHRydWVgLCB0aGUgYnV0dG9uIGNhbm5vdCBiZSBjbGlja2VkLlxuICAgKlxuICAgKiBXaGVuIGBkaXNhYmxlZGAgYW5kIGBsb2FkaW5nYCBhcmUgdHJ1ZSwgdGhlIGBkaXNhYmxlZGAgd2lsbCB0YWtlIHByZWNlZGVuY2UuXG4gICAqXG4gICAqIEBkZWZhdWx0IGZhbHNlXG4gICAqL1xuICBASG9zdEJpbmRpbmcoJ2NsYXNzLmQtYnRuLWxvYWRpbmcnKVxuICBASW5wdXQoKVxuICBsb2FkaW5nID0gZmFsc2U7XG5cbiAgY29uc3RydWN0b3IocHJpdmF0ZSBlbGVtZW50UmVmOiBFbGVtZW50UmVmKSB7fVxuXG4gIHByb3RlY3RlZCBnZXQgZWxlbWVudCgpOiBIVE1MRWxlbWVudCB7XG4gICAgcmV0dXJuIHRoaXMuZWxlbWVudFJlZi5uYXRpdmVFbGVtZW50O1xuICB9XG5cbiAgQEhvc3RCaW5kaW5nKCdjbGFzcycpXG4gIHByb3RlY3RlZCBnZXQgY2xhc3NlcygpOiBOZ0NsYXNzWyduZ0NsYXNzJ10ge1xuICAgIHJldHVybiBbJ2QtYnRuJywgYGQtYnRuLSR7dGhpcy52YXJpYW50fWAsIGBkLWJ0bi0ke3RoaXMuc2l6ZX1gXTtcbiAgfVxuXG4gIC8qKlxuICAgKiBQcm92aWRlIG5hdGl2ZSBgZGlzYWJsZWRgIGF0dHJpYnV0ZSB0byBwcmV2ZW50IGJ1dHRvbiBmcm9tIGJlaW5nIGNsaWNrZWQuXG4gICAqL1xuICBASG9zdEJpbmRpbmcoJ2F0dHIuZGlzYWJsZWQnKVxuICBwcm90ZWN0ZWQgZ2V0IGRpc2FibGVkQXR0cmlidXRlKCk6IGJvb2xlYW4gfCBudWxsIHtcbiAgICByZXR1cm4gdGhpcy5kaXNhYmxlZCB8fCB0aGlzLmxvYWRpbmcgfHwgbnVsbDtcbiAgfVxuXG4gIEBIb3N0QmluZGluZygnY2xhc3MuZC1idG4taWNvbicpXG4gIHByb3RlY3RlZCBnZXQgaXNJY29uT25seSgpOiBib29sZWFuIHtcbiAgICByZXR1cm4gQXJyYXkuZnJvbSh0aGlzLmVsZW1lbnQuY2hpbGRyZW4pLnNvbWUoKGNoaWxkKSA9PiBjaGlsZC5oYXNBdHRyaWJ1dGUoJ2ljb24tb25seScpKTtcbiAgfVxuXG4gIEBIb3N0TGlzdGVuZXIoJ2NsaWNrJywgWyckZXZlbnQnXSlcbiAgcHJvdGVjdGVkIG9uQ2xpY2soZTogRXZlbnQpIHtcbiAgICBpZiAodGhpcy5kaXNhYmxlZCB8fCB0aGlzLmxvYWRpbmcpIHtcbiAgICAgIGUucHJldmVudERlZmF1bHQoKTtcbiAgICAgIGUuc3RvcEltbWVkaWF0ZVByb3BhZ2F0aW9uKCk7XG4gICAgfVxuICB9XG59XG4iLCI8c3BhbiAqbmdJZj1cInRoaXMubG9hZGluZyAmJiAhdGhpcy5kaXNhYmxlZFwiIGNsYXNzPVwiZC1idG4tc3Bpbm5lclwiPjxzcGFuPjwvc3Bhbj48L3NwYW4+XG5cbjxuZy1jb250ZW50IHNlbGVjdD1cIltpY29uLWxlZnRdXCI+PC9uZy1jb250ZW50PlxuXG48bmctY29udGVudD48L25nLWNvbnRlbnQ+XG5cbjxuZy1jb250ZW50IHNlbGVjdD1cIltpY29uLXJpZ2h0XVwiPjwvbmctY29udGVudD5cbiJdfQ==