iptdevs-design-system
Version:
Library common elements into IPT Plattform.
64 lines (62 loc) • 7.07 kB
JavaScript
import { Component, Input, Output, EventEmitter } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
export class ButtonComponent {
constructor() {
this.primary = false;
this.size = 'medium';
this.label = 'Button';
this.isEnabled = true;
this.onClick = new EventEmitter();
}
get classes() {
const mode = this.primary && this.isEnabled === true
? 'ipt-button--primary'
: this.isEnabled === false ? 'ipt-button--primary-disabled'
: 'ipt-button--secondary';
return ['ipt-button', `ipt-button--${this.size}`, mode];
}
}
ButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: ButtonComponent, selector: "ipt-button", inputs: { primary: "primary", size: "size", label: "label", buttonType: "buttonType", isEnabled: "isEnabled" }, outputs: { onClick: "onClick" }, ngImport: i0, template: `<button *ngIf="isEnabled"
type="{{ buttonType }}"
(click)="onClick.emit($event)"
[ngClass]="classes"
>
{{ label }}
</button>
<button *ngIf="!isEnabled"
type="{{ buttonType }}"
[ngClass]="classes"
>
{{ label }}
</button>`, isInline: true, styles: [".ipt-button{font-family:Poppins,sans-serif;font-weight:700;border:0;border-radius:4px;cursor:pointer;display:inline-block;line-height:1;transition:.4s;width:100%;box-shadow:#06182c66 0 0,#06182ca6 1px 1px 1px 1px,#ffffff14 0 0 inset}.ipt-button:hover{box-shadow:0 10px 20px #1b1b1b80;transform:translateY(-3px)}.ipt-button:active{transform:scale(.99)}.ipt-button--primary{color:#fff;background-color:#1c77f7}.ipt-button--primary-disabled{color:gray;background-color:#fff;border:1px solid gray;box-shadow:none;cursor:not-allowed}.ipt-button--primary-disabled:hover{box-shadow:none;transform:translateY(0)}.ipt-button--secondary{color:#1c77f7;background-color:#fff;box-shadow:#06182c66 0 0 0 2px,#06182ca6 0 4px 6px -1px,#ffffff14 0 1px inset}.ipt-button--small{font-size:12px;padding:10px 16px}.ipt-button--medium{font-size:14px;padding:11px 20px}.ipt-button--large{font-size:16px;padding:12px 24px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: ButtonComponent, decorators: [{
type: Component,
args: [{ selector: 'ipt-button', template: `<button *ngIf="isEnabled"
type="{{ buttonType }}"
(click)="onClick.emit($event)"
[ngClass]="classes"
>
{{ label }}
</button>
<button *ngIf="!isEnabled"
type="{{ buttonType }}"
[ngClass]="classes"
>
{{ label }}
</button>`, styles: [".ipt-button{font-family:Poppins,sans-serif;font-weight:700;border:0;border-radius:4px;cursor:pointer;display:inline-block;line-height:1;transition:.4s;width:100%;box-shadow:#06182c66 0 0,#06182ca6 1px 1px 1px 1px,#ffffff14 0 0 inset}.ipt-button:hover{box-shadow:0 10px 20px #1b1b1b80;transform:translateY(-3px)}.ipt-button:active{transform:scale(.99)}.ipt-button--primary{color:#fff;background-color:#1c77f7}.ipt-button--primary-disabled{color:gray;background-color:#fff;border:1px solid gray;box-shadow:none;cursor:not-allowed}.ipt-button--primary-disabled:hover{box-shadow:none;transform:translateY(0)}.ipt-button--secondary{color:#1c77f7;background-color:#fff;box-shadow:#06182c66 0 0 0 2px,#06182ca6 0 4px 6px -1px,#ffffff14 0 1px inset}.ipt-button--small{font-size:12px;padding:10px 16px}.ipt-button--medium{font-size:14px;padding:11px 20px}.ipt-button--large{font-size:16px;padding:12px 24px}\n"] }]
}], propDecorators: { primary: [{
type: Input
}], size: [{
type: Input
}], label: [{
type: Input
}], buttonType: [{
type: Input
}], isEnabled: [{
type: Input
}], onClick: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnV0dG9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL2Rlc2lnbi1zeXN0ZW0vc3JjL2xpYi9jb21wb25lbnRzL2F0b21zL2J1dHRvbi9idXR0b24uY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxZQUFZLEVBQUUsTUFBTSxlQUFlLENBQUM7OztBQW9CdkUsTUFBTSxPQUFPLGVBQWU7SUFsQjVCO1FBb0JXLFlBQU8sR0FBWSxLQUFLLENBQUM7UUFDekIsU0FBSSxHQUFpQyxRQUFRLENBQUM7UUFDOUMsVUFBSyxHQUFXLFFBQVEsQ0FBQztRQUV6QixjQUFTLEdBQVksSUFBSSxDQUFDO1FBRXpCLFlBQU8sR0FBRyxJQUFJLFlBQVksRUFBUyxDQUFDO0tBVS9DO0lBUkMsSUFBVyxPQUFPO1FBQ2hCLE1BQU0sSUFBSSxHQUFHLElBQUksQ0FBQyxPQUFPLElBQUksSUFBSSxDQUFDLFNBQVMsS0FBSyxJQUFJO1lBQ2xELENBQUMsQ0FBQyxxQkFBcUI7WUFDdkIsQ0FBQyxDQUFDLElBQUksQ0FBQyxTQUFTLEtBQUssS0FBSyxDQUFDLENBQUMsQ0FBQyw4QkFBOEI7Z0JBQzNELENBQUMsQ0FBQyx1QkFBdUIsQ0FBQztRQUU1QixPQUFPLENBQUMsWUFBWSxFQUFFLGVBQWUsSUFBSSxDQUFDLElBQUksRUFBRSxFQUFFLElBQUksQ0FBQyxDQUFDO0lBQzFELENBQUM7OzRHQWpCVSxlQUFlO2dHQUFmLGVBQWUsbU1BaEJoQjs7Ozs7Ozs7Ozs7OztZQWFBOzJGQUdDLGVBQWU7a0JBbEIzQixTQUFTOytCQUNFLFlBQVksWUFDWjs7Ozs7Ozs7Ozs7OztZQWFBOzhCQUtELE9BQU87c0JBQWYsS0FBSztnQkFDRyxJQUFJO3NCQUFaLEtBQUs7Z0JBQ0csS0FBSztzQkFBYixLQUFLO2dCQUNHLFVBQVU7c0JBQWxCLEtBQUs7Z0JBQ0csU0FBUztzQkFBakIsS0FBSztnQkFFSSxPQUFPO3NCQUFoQixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBJbnB1dCwgT3V0cHV0LCBFdmVudEVtaXR0ZXIgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnaXB0LWJ1dHRvbicsXG4gIHRlbXBsYXRlOiBgPGJ1dHRvbiAqbmdJZj1cImlzRW5hYmxlZFwiXG4gICAgdHlwZT1cInt7IGJ1dHRvblR5cGUgfX1cIlxuICAgIChjbGljayk9XCJvbkNsaWNrLmVtaXQoJGV2ZW50KVwiXG4gICAgW25nQ2xhc3NdPVwiY2xhc3Nlc1wiXG4gID5cbiAgICB7eyBsYWJlbCB9fVxuICA8L2J1dHRvbj5cblxuICA8YnV0dG9uICpuZ0lmPVwiIWlzRW5hYmxlZFwiXG4gICAgdHlwZT1cInt7IGJ1dHRvblR5cGUgfX1cIlxuICAgIFtuZ0NsYXNzXT1cImNsYXNzZXNcIlxuICA+XG4gICAge3sgbGFiZWwgfX1cbiAgPC9idXR0b24+YCxcbiAgc3R5bGVVcmxzOiBbJy4vYnV0dG9uLmNzcyddLFxufSlcbmV4cG9ydCBjbGFzcyBCdXR0b25Db21wb25lbnQge1xuXG4gIEBJbnB1dCgpIHByaW1hcnk6IGJvb2xlYW4gPSBmYWxzZTtcbiAgQElucHV0KCkgc2l6ZTogJ3NtYWxsJyB8ICdtZWRpdW0nIHwgJ2xhcmdlJyA9ICdtZWRpdW0nO1xuICBASW5wdXQoKSBsYWJlbDogc3RyaW5nID0gJ0J1dHRvbic7XG4gIEBJbnB1dCgpIGJ1dHRvblR5cGU/OiBzdHJpbmc7XG4gIEBJbnB1dCgpIGlzRW5hYmxlZDogYm9vbGVhbiA9IHRydWU7XG5cbiAgQE91dHB1dCgpIG9uQ2xpY2sgPSBuZXcgRXZlbnRFbWl0dGVyPEV2ZW50PigpO1xuXG4gIHB1YmxpYyBnZXQgY2xhc3NlcygpOiBzdHJpbmdbXSB7XG4gICAgY29uc3QgbW9kZSA9IHRoaXMucHJpbWFyeSAmJiB0aGlzLmlzRW5hYmxlZCA9PT0gdHJ1ZVxuICAgICAgPyAnaXB0LWJ1dHRvbi0tcHJpbWFyeSdcbiAgICAgIDogdGhpcy5pc0VuYWJsZWQgPT09IGZhbHNlID8gJ2lwdC1idXR0b24tLXByaW1hcnktZGlzYWJsZWQnXG4gICAgICA6ICdpcHQtYnV0dG9uLS1zZWNvbmRhcnknO1xuXG4gICAgcmV0dXJuIFsnaXB0LWJ1dHRvbicsIGBpcHQtYnV0dG9uLS0ke3RoaXMuc2l6ZX1gLCBtb2RlXTtcbiAgfVxufVxuIl19