gentics-ui-core
Version:
This is the common core framework for the Gentics CMS and Mesh UI, and other Angular applications.
103 lines • 10.9 kB
JavaScript
import { Component, Input, HostListener } from '@angular/core';
import * as i0 from "@angular/core";
/**
* A Button component.
*
* ```html
* <gtx-button>Click me</gtx-button>
* <gtx-button size="large">Buy Now!</gtx-button>
* <gtx-button type="alert">Delete all stuff</gtx-button>
* <gtx-button icon>
* <i class="material-icons">settings</i>
* </gtx-button>
* ```
*/
export class Button {
constructor() {
/**
* Sets the input field to be auto-focused. Handled by `AutofocusDirective`.
*/
this.autofocus = false;
/**
* Specify the size of the button. Can be "small", "regular" or "large".
*/
this.size = 'regular';
/**
* Type determines the style of the button. Can be "default", "secondary",
* "success", "warning" or "alert".
*/
this.type = 'default';
this.buttonType = 'button';
this.isFlat = false;
this.isIcon = false;
this.isDisabled = false;
}
/**
* Setting the "flat" attribute gives the button a transparent background
* and only depth on hover.
*/
get flat() {
return this.isFlat;
}
set flat(val) {
this.isFlat = val != null && val !== false;
}
/**
* Setting the "icon" attribute turns the button into an "icon button", which is
* like a flat button without a border, suitable for wrapping an icon.
*/
get icon() {
return this.isIcon;
}
set icon(val) {
this.isIcon = val != null && val !== false;
}
/**
* Controls whether the button is disabled.
*/
get disabled() {
return this.isDisabled;
}
set disabled(disabled) {
this.isDisabled = disabled === '' || !!disabled;
}
/**
* Set button as a submit button.
*/
set submit(value) {
this.buttonType = (value != null && value !== false) ? 'submit' : 'button';
}
// In some browsers, disabled elements don't fire mouse events, but bubble them up the DOM tree.
// To not trigger actions when the button is disabled, we need to prevent them manually.
preventDisabledClick(event) {
if (event && this.isDisabled) {
event.preventDefault();
event.stopImmediatePropagation();
event.stopPropagation();
}
}
}
/** @nocollapse */ Button.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: Button, deps: [], target: i0.ɵɵFactoryTarget.Component });
/** @nocollapse */ Button.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: Button, selector: "gtx-button", inputs: { autofocus: "autofocus", size: "size", type: "type", flat: "flat", icon: "icon", disabled: "disabled", submit: "submit" }, host: { listeners: { "click": "preventDisabledClick($event)" } }, ngImport: i0, template: "<div class=\"button-event-wrapper\" (click)=\"preventDisabledClick($event)\">\n <button class=\"btn {{size}} {{type}}\"\n [type]=\"buttonType\"\n [disabled]=\"disabled\"\n [class.btn-flat]=\"flat || icon\"\n [class.btn-icon]=\"icon\"\n (click)=\"preventDisabledClick($event)\"\n ><ng-content></ng-content></button>\n</div>\n" });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: Button, decorators: [{
type: Component,
args: [{ selector: 'gtx-button', template: "<div class=\"button-event-wrapper\" (click)=\"preventDisabledClick($event)\">\n <button class=\"btn {{size}} {{type}}\"\n [type]=\"buttonType\"\n [disabled]=\"disabled\"\n [class.btn-flat]=\"flat || icon\"\n [class.btn-icon]=\"icon\"\n (click)=\"preventDisabledClick($event)\"\n ><ng-content></ng-content></button>\n</div>\n" }]
}], propDecorators: { autofocus: [{
type: Input
}], size: [{
type: Input
}], type: [{
type: Input
}], flat: [{
type: Input
}], icon: [{
type: Input
}], disabled: [{
type: Input
}], submit: [{
type: Input
}], preventDisabledClick: [{
type: HostListener,
args: ['click', ['$event']]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnV0dG9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL2J1dHRvbi9idXR0b24uY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvYnV0dG9uL2J1dHRvbi50cGwuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxZQUFZLEVBQUUsTUFBTSxlQUFlLENBQUM7O0FBRS9EOzs7Ozs7Ozs7OztHQVdHO0FBS0gsTUFBTSxPQUFPLE1BQU07SUFKbkI7UUFLSTs7V0FFRztRQUNNLGNBQVMsR0FBWSxLQUFLLENBQUM7UUFFcEM7O1dBRUc7UUFDTSxTQUFJLEdBQWtDLFNBQVMsQ0FBQztRQUV6RDs7O1dBR0c7UUFDTSxTQUFJLEdBQThELFNBQVMsQ0FBQztRQTZDckYsZUFBVSxHQUFHLFFBQVEsQ0FBQztRQUN0QixXQUFNLEdBQVksS0FBSyxDQUFDO1FBQ3hCLFdBQU0sR0FBWSxLQUFLLENBQUM7UUFDeEIsZUFBVSxHQUFZLEtBQUssQ0FBQztLQVkvQjtJQTFERzs7O09BR0c7SUFDSCxJQUNJLElBQUk7UUFDSixPQUFPLElBQUksQ0FBQyxNQUFNLENBQUM7SUFDdkIsQ0FBQztJQUNELElBQUksSUFBSSxDQUFDLEdBQVk7UUFDakIsSUFBSSxDQUFDLE1BQU0sR0FBRyxHQUFHLElBQUksSUFBSSxJQUFJLEdBQUcsS0FBSyxLQUFLLENBQUM7SUFDL0MsQ0FBQztJQUVEOzs7T0FHRztJQUNILElBQ0ksSUFBSTtRQUNKLE9BQU8sSUFBSSxDQUFDLE1BQU0sQ0FBQztJQUN2QixDQUFDO0lBQ0QsSUFBSSxJQUFJLENBQUMsR0FBWTtRQUNqQixJQUFJLENBQUMsTUFBTSxHQUFHLEdBQUcsSUFBSSxJQUFJLElBQUksR0FBRyxLQUFLLEtBQUssQ0FBQztJQUMvQyxDQUFDO0lBRUQ7O09BRUc7SUFDSCxJQUNJLFFBQVE7UUFDUixPQUFPLElBQUksQ0FBQyxVQUFVLENBQUM7SUFDM0IsQ0FBQztJQUNELElBQUksUUFBUSxDQUFDLFFBQWlCO1FBQzFCLElBQUksQ0FBQyxVQUFVLEdBQVUsUUFBUyxLQUFLLEVBQUUsSUFBSSxDQUFDLENBQUMsUUFBUSxDQUFDO0lBQzVELENBQUM7SUFFRDs7T0FFRztJQUNILElBQ0ksTUFBTSxDQUFDLEtBQWM7UUFDckIsSUFBSSxDQUFDLFVBQVUsR0FBRyxDQUFDLEtBQUssSUFBSSxJQUFJLElBQUksS0FBSyxLQUFLLEtBQUssQ0FBQyxDQUFDLENBQUMsQ0FBQyxRQUFRLENBQUMsQ0FBQyxDQUFDLFFBQVEsQ0FBQztJQUMvRSxDQUFDO0lBT0QsZ0dBQWdHO0lBQ2hHLHdGQUF3RjtJQUV4RixvQkFBb0IsQ0FBQyxLQUFZO1FBQzdCLElBQUksS0FBSyxJQUFJLElBQUksQ0FBQyxVQUFVLEVBQUU7WUFDMUIsS0FBSyxDQUFDLGNBQWMsRUFBRSxDQUFDO1lBQ3ZCLEtBQUssQ0FBQyx3QkFBd0IsRUFBRSxDQUFDO1lBQ2pDLEtBQUssQ0FBQyxlQUFlLEVBQUUsQ0FBQztTQUMzQjtJQUNMLENBQUM7O3NIQTFFUSxNQUFNOzBHQUFOLE1BQU0sd1BDbEJuQixtWUFTQTsyRkRTYSxNQUFNO2tCQUpsQixTQUFTOytCQUNJLFlBQVk7OEJBT2IsU0FBUztzQkFBakIsS0FBSztnQkFLRyxJQUFJO3NCQUFaLEtBQUs7Z0JBTUcsSUFBSTtzQkFBWixLQUFLO2dCQU9GLElBQUk7c0JBRFAsS0FBSztnQkFhRixJQUFJO3NCQURQLEtBQUs7Z0JBWUYsUUFBUTtzQkFEWCxLQUFLO2dCQVlGLE1BQU07c0JBRFQsS0FBSztnQkFhTixvQkFBb0I7c0JBRG5CLFlBQVk7dUJBQUMsT0FBTyxFQUFFLENBQUMsUUFBUSxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBJbnB1dCwgSG9zdExpc3RlbmVyIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbi8qKlxuICogQSBCdXR0b24gY29tcG9uZW50LlxuICpcbiAqIGBgYGh0bWxcbiAqIDxndHgtYnV0dG9uPkNsaWNrIG1lPC9ndHgtYnV0dG9uPlxuICogPGd0eC1idXR0b24gc2l6ZT1cImxhcmdlXCI+QnV5IE5vdyE8L2d0eC1idXR0b24+XG4gKiA8Z3R4LWJ1dHRvbiB0eXBlPVwiYWxlcnRcIj5EZWxldGUgYWxsIHN0dWZmPC9ndHgtYnV0dG9uPlxuICogPGd0eC1idXR0b24gaWNvbj5cbiAqICAgICA8aSBjbGFzcz1cIm1hdGVyaWFsLWljb25zXCI+c2V0dGluZ3M8L2k+XG4gKiA8L2d0eC1idXR0b24+XG4gKiBgYGBcbiAqL1xuQENvbXBvbmVudCh7XG4gICAgc2VsZWN0b3I6ICdndHgtYnV0dG9uJyxcbiAgICB0ZW1wbGF0ZVVybDogJy4vYnV0dG9uLnRwbC5odG1sJ1xufSlcbmV4cG9ydCBjbGFzcyBCdXR0b24ge1xuICAgIC8qKlxuICAgICAqIFNldHMgdGhlIGlucHV0IGZpZWxkIHRvIGJlIGF1dG8tZm9jdXNlZC4gSGFuZGxlZCBieSBgQXV0b2ZvY3VzRGlyZWN0aXZlYC5cbiAgICAgKi9cbiAgICBASW5wdXQoKSBhdXRvZm9jdXM6IGJvb2xlYW4gPSBmYWxzZTtcblxuICAgIC8qKlxuICAgICAqIFNwZWNpZnkgdGhlIHNpemUgb2YgdGhlIGJ1dHRvbi4gQ2FuIGJlIFwic21hbGxcIiwgXCJyZWd1bGFyXCIgb3IgXCJsYXJnZVwiLlxuICAgICAqL1xuICAgIEBJbnB1dCgpIHNpemU6ICdzbWFsbCcgfCAncmVndWxhcicgfCAnbGFyZ2UnID0gJ3JlZ3VsYXInO1xuXG4gICAgLyoqXG4gICAgICogVHlwZSBkZXRlcm1pbmVzIHRoZSBzdHlsZSBvZiB0aGUgYnV0dG9uLiBDYW4gYmUgXCJkZWZhdWx0XCIsIFwic2Vjb25kYXJ5XCIsXG4gICAgICogXCJzdWNjZXNzXCIsIFwid2FybmluZ1wiIG9yIFwiYWxlcnRcIi5cbiAgICAgKi9cbiAgICBASW5wdXQoKSB0eXBlOiAnZGVmYXVsdCcgfCAnc2Vjb25kYXJ5JyB8ICdzdWNjZXNzJyB8ICd3YXJuaW5nJyB8ICdhbGVydCcgPSAnZGVmYXVsdCc7XG5cbiAgICAvKipcbiAgICAgKiBTZXR0aW5nIHRoZSBcImZsYXRcIiBhdHRyaWJ1dGUgZ2l2ZXMgdGhlIGJ1dHRvbiBhIHRyYW5zcGFyZW50IGJhY2tncm91bmRcbiAgICAgKiBhbmQgb25seSBkZXB0aCBvbiBob3Zlci5cbiAgICAgKi9cbiAgICBASW5wdXQoKVxuICAgIGdldCBmbGF0KCk6IGJvb2xlYW4ge1xuICAgICAgICByZXR1cm4gdGhpcy5pc0ZsYXQ7XG4gICAgfVxuICAgIHNldCBmbGF0KHZhbDogYm9vbGVhbikge1xuICAgICAgICB0aGlzLmlzRmxhdCA9IHZhbCAhPSBudWxsICYmIHZhbCAhPT0gZmFsc2U7XG4gICAgfVxuXG4gICAgLyoqXG4gICAgICogU2V0dGluZyB0aGUgXCJpY29uXCIgYXR0cmlidXRlIHR1cm5zIHRoZSBidXR0b24gaW50byBhbiBcImljb24gYnV0dG9uXCIsIHdoaWNoIGlzXG4gICAgICogbGlrZSBhIGZsYXQgYnV0dG9uIHdpdGhvdXQgYSBib3JkZXIsIHN1aXRhYmxlIGZvciB3cmFwcGluZyBhbiBpY29uLlxuICAgICAqL1xuICAgIEBJbnB1dCgpXG4gICAgZ2V0IGljb24oKTogYm9vbGVhbiB7XG4gICAgICAgIHJldHVybiB0aGlzLmlzSWNvbjtcbiAgICB9XG4gICAgc2V0IGljb24odmFsOiBib29sZWFuKSB7XG4gICAgICAgIHRoaXMuaXNJY29uID0gdmFsICE9IG51bGwgJiYgdmFsICE9PSBmYWxzZTtcbiAgICB9XG5cbiAgICAvKipcbiAgICAgKiBDb250cm9scyB3aGV0aGVyIHRoZSBidXR0b24gaXMgZGlzYWJsZWQuXG4gICAgICovXG4gICAgQElucHV0KClcbiAgICBnZXQgZGlzYWJsZWQoKTogYm9vbGVhbiB7XG4gICAgICAgIHJldHVybiB0aGlzLmlzRGlzYWJsZWQ7XG4gICAgfVxuICAgIHNldCBkaXNhYmxlZChkaXNhYmxlZDogYm9vbGVhbikge1xuICAgICAgICB0aGlzLmlzRGlzYWJsZWQgPSAoPGFueT4gZGlzYWJsZWQpID09PSAnJyB8fCAhIWRpc2FibGVkO1xuICAgIH1cblxuICAgIC8qKlxuICAgICAqIFNldCBidXR0b24gYXMgYSBzdWJtaXQgYnV0dG9uLlxuICAgICAqL1xuICAgIEBJbnB1dCgpXG4gICAgc2V0IHN1Ym1pdCh2YWx1ZTogYm9vbGVhbikge1xuICAgICAgICB0aGlzLmJ1dHRvblR5cGUgPSAodmFsdWUgIT0gbnVsbCAmJiB2YWx1ZSAhPT0gZmFsc2UpID8gJ3N1Ym1pdCcgOiAnYnV0dG9uJztcbiAgICB9XG5cbiAgICBidXR0b25UeXBlID0gJ2J1dHRvbic7XG4gICAgaXNGbGF0OiBib29sZWFuID0gZmFsc2U7XG4gICAgaXNJY29uOiBib29sZWFuID0gZmFsc2U7XG4gICAgaXNEaXNhYmxlZDogYm9vbGVhbiA9IGZhbHNlO1xuXG4gICAgLy8gSW4gc29tZSBicm93c2VycywgZGlzYWJsZWQgZWxlbWVudHMgZG9uJ3QgZmlyZSBtb3VzZSBldmVudHMsIGJ1dCBidWJibGUgdGhlbSB1cCB0aGUgRE9NIHRyZWUuXG4gICAgLy8gVG8gbm90IHRyaWdnZXIgYWN0aW9ucyB3aGVuIHRoZSBidXR0b24gaXMgZGlzYWJsZWQsIHdlIG5lZWQgdG8gcHJldmVudCB0aGVtIG1hbnVhbGx5LlxuICAgIEBIb3N0TGlzdGVuZXIoJ2NsaWNrJywgWyckZXZlbnQnXSlcbiAgICBwcmV2ZW50RGlzYWJsZWRDbGljayhldmVudDogRXZlbnQpOiB2b2lkIHtcbiAgICAgICAgaWYgKGV2ZW50ICYmIHRoaXMuaXNEaXNhYmxlZCkge1xuICAgICAgICAgICAgZXZlbnQucHJldmVudERlZmF1bHQoKTtcbiAgICAgICAgICAgIGV2ZW50LnN0b3BJbW1lZGlhdGVQcm9wYWdhdGlvbigpO1xuICAgICAgICAgICAgZXZlbnQuc3RvcFByb3BhZ2F0aW9uKCk7XG4gICAgICAgIH1cbiAgICB9XG59XG4iLCI8ZGl2IGNsYXNzPVwiYnV0dG9uLWV2ZW50LXdyYXBwZXJcIiAoY2xpY2spPVwicHJldmVudERpc2FibGVkQ2xpY2soJGV2ZW50KVwiPlxuICAgIDxidXR0b24gY2xhc3M9XCJidG4ge3tzaXplfX0ge3t0eXBlfX1cIlxuICAgICAgICAgICAgW3R5cGVdPVwiYnV0dG9uVHlwZVwiXG4gICAgICAgICAgICBbZGlzYWJsZWRdPVwiZGlzYWJsZWRcIlxuICAgICAgICAgICAgW2NsYXNzLmJ0bi1mbGF0XT1cImZsYXQgfHwgaWNvblwiXG4gICAgICAgICAgICBbY2xhc3MuYnRuLWljb25dPVwiaWNvblwiXG4gICAgICAgICAgICAoY2xpY2spPVwicHJldmVudERpc2FibGVkQ2xpY2soJGV2ZW50KVwiXG4gICAgPjxuZy1jb250ZW50PjwvbmctY29udGVudD48L2J1dHRvbj5cbjwvZGl2PlxuIl19