@ipi-soft/ng-components
Version:
Custom Angular Components
69 lines (65 loc) • 7.7 kB
JavaScript
import * as i0 from '@angular/core';
import { EventEmitter, Component, Input, Output } from '@angular/core';
import { CommonModule } from '@angular/common';
import * as i1 from '@angular/router';
import { RouterModule } from '@angular/router';
import { Subject, throttleTime } from 'rxjs';
import { IpiImageComponent } from '@ipi-soft/ng-components/image';
const defaultOptions = {
throttleTimeMs: 300,
};
class IpiButtonComponent {
constructor() {
this.link = null;
this.state = null;
this.ariaLabel = 'Button';
this.focusChange = new EventEmitter();
this.clickChange = new EventEmitter();
this.clickSubject = new Subject();
}
ngAfterViewInit() {
this.options = { ...defaultOptions, ...this.options };
this.clickSubject
.pipe(throttleTime(this.options.throttleTimeMs))
.subscribe(event => this.clickChange.emit(event));
}
onClick(event) {
this.clickSubject.next(event);
}
onFocusChange(event) {
this.focusChange.emit(event);
}
handleKeydown(event) {
if (event.code === 'Enter' || event.code === 'Space') {
event.preventDefault();
this.onClick(event);
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: IpiButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: IpiButtonComponent, isStandalone: true, selector: "ipi-button", inputs: { link: "link", state: "state", options: "options", ariaLabel: "ariaLabel" }, outputs: { focusChange: "focusChange", clickChange: "clickChange" }, ngImport: i0, template: "<a [class]=\"['button']\"\n [routerLink]=\"link\"\n [state]=\"state\"\n (click)=\"onClick($event)\"\n (keydown)=\"handleKeydown($event)\"\n (focusin)=\"onFocusChange($event)\"\n (focusout)=\"onFocusChange($event)\"\n tabindex=\"0\"\n role=\"button\"\n [attr.aria-label]=\"ariaLabel\">\n \n <div class=\"button-wrapper\">\n @if (options && options.iconLeft) {\n <div class=\"icon left\">\n <ipi-img [src]=\"'assets/img/' + options.iconLeft\" [ariaLabel]=\"'Left side of button icon.'\"></ipi-img>\n </div>\n }\n\n <span>\n <ng-content></ng-content>\n </span>\n\n @if (options && options.iconRight) {\n <div class=\"icon right\">\n <ipi-img [src]=\"'assets/img/' + options.iconRight\" [ariaLabel]=\"'Right side of button icon.'\"></ipi-img>\n </div>\n }\n </div>\n</a>\n", styles: [":host{display:block}:host(.fluid) .button{width:100%;min-width:unset}:host(.mobile) .button{font-size:14px}:host(.disabled) .button{cursor:not-allowed;background-color:var(--ipi-button-disabled-background-color, #E7E7E7)}:host(.table) .button{height:38px;min-width:unset;margin-top:0}a:focus{outline:var(--ipi-button-focus-outline, 2px solid #F96138)}.button-wrapper{display:flex;width:100%;justify-content:center;align-items:center;padding:0 16px}.icon{width:20px;height:20px;display:flex;justify-content:center;align-items:center}.icon.right{margin-left:8px}.icon.left{margin-right:8px}.icon ipi-img{max-width:20px;max-height:20px;display:flex;justify-content:center;align-items:center}.icon.left ipi-img path{fill:var(--ipi-button-left-svg-fill, #FFFFFF);stroke:var(--ipi-button-left-svg-stroke, #ffffff00)}.icon.right ipi-img path{fill:var(--ipi-button-right-svg-fill, #FFFFFF);stroke:var(--ipi-button-right-svg-stroke, #ffffff00)}.button{width:fit-content;min-width:164px;height:44px;cursor:pointer;display:flex;align-items:center;color:var(--ipi-button-text-color, #FFFFFF);border-radius:var(--ipi-button-border-radius, 4px);border:1px solid var(--ipi-button-border-color, none);background-color:var(--ipi-button-background-color, #0B1222);text-decoration:none;box-sizing:border-box}.button:hover{opacity:.8}.button span{font-weight:600}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: IpiImageComponent, selector: "ipi-img", inputs: ["src", "ariaLabel"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: IpiButtonComponent, decorators: [{
type: Component,
args: [{ selector: 'ipi-button', imports: [
CommonModule,
RouterModule,
IpiImageComponent,
], template: "<a [class]=\"['button']\"\n [routerLink]=\"link\"\n [state]=\"state\"\n (click)=\"onClick($event)\"\n (keydown)=\"handleKeydown($event)\"\n (focusin)=\"onFocusChange($event)\"\n (focusout)=\"onFocusChange($event)\"\n tabindex=\"0\"\n role=\"button\"\n [attr.aria-label]=\"ariaLabel\">\n \n <div class=\"button-wrapper\">\n @if (options && options.iconLeft) {\n <div class=\"icon left\">\n <ipi-img [src]=\"'assets/img/' + options.iconLeft\" [ariaLabel]=\"'Left side of button icon.'\"></ipi-img>\n </div>\n }\n\n <span>\n <ng-content></ng-content>\n </span>\n\n @if (options && options.iconRight) {\n <div class=\"icon right\">\n <ipi-img [src]=\"'assets/img/' + options.iconRight\" [ariaLabel]=\"'Right side of button icon.'\"></ipi-img>\n </div>\n }\n </div>\n</a>\n", styles: [":host{display:block}:host(.fluid) .button{width:100%;min-width:unset}:host(.mobile) .button{font-size:14px}:host(.disabled) .button{cursor:not-allowed;background-color:var(--ipi-button-disabled-background-color, #E7E7E7)}:host(.table) .button{height:38px;min-width:unset;margin-top:0}a:focus{outline:var(--ipi-button-focus-outline, 2px solid #F96138)}.button-wrapper{display:flex;width:100%;justify-content:center;align-items:center;padding:0 16px}.icon{width:20px;height:20px;display:flex;justify-content:center;align-items:center}.icon.right{margin-left:8px}.icon.left{margin-right:8px}.icon ipi-img{max-width:20px;max-height:20px;display:flex;justify-content:center;align-items:center}.icon.left ipi-img path{fill:var(--ipi-button-left-svg-fill, #FFFFFF);stroke:var(--ipi-button-left-svg-stroke, #ffffff00)}.icon.right ipi-img path{fill:var(--ipi-button-right-svg-fill, #FFFFFF);stroke:var(--ipi-button-right-svg-stroke, #ffffff00)}.button{width:fit-content;min-width:164px;height:44px;cursor:pointer;display:flex;align-items:center;color:var(--ipi-button-text-color, #FFFFFF);border-radius:var(--ipi-button-border-radius, 4px);border:1px solid var(--ipi-button-border-color, none);background-color:var(--ipi-button-background-color, #0B1222);text-decoration:none;box-sizing:border-box}.button:hover{opacity:.8}.button span{font-weight:600}\n"] }]
}], ctorParameters: () => [], propDecorators: { link: [{
type: Input
}], state: [{
type: Input
}], options: [{
type: Input
}], ariaLabel: [{
type: Input
}], focusChange: [{
type: Output
}], clickChange: [{
type: Output
}] } });
/**
* Generated bundle index. Do not edit.
*/
export { IpiButtonComponent };
//# sourceMappingURL=ipi-soft-ng-components-button.mjs.map