@kushki/ng-suka
Version:
<p align="center"> <h1 align="center">Suka Components Angular</h1> <p align="center"> An Angular implementation of the Suka Design System </p> </p>
165 lines • 12.5 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
import { Directive, HostBinding, Input, ChangeDetectorRef, ElementRef, Renderer2, ViewContainerRef, ComponentFactoryResolver } from '@angular/core';
import { Loading } from '../loading/loading.module';
export class Button {
/**
* @param {?} ref
* @param {?} el
* @param {?} renderer
* @param {?} viewContainerRef
* @param {?} componentFactoryResolver
*/
constructor(ref, el, renderer, viewContainerRef, componentFactoryResolver) {
this.ref = ref;
this.el = el;
this.renderer = renderer;
this.viewContainerRef = viewContainerRef;
this.componentFactoryResolver = componentFactoryResolver;
this.sukaButton = 'basic';
this.size = 'md';
this.class = '';
this.skeleton = false;
this.outline = false;
this.hover = false;
this.fullWidth = false;
this.inGroup = false;
this.loading = false;
}
/**
* @return {?}
*/
get attrClass() {
return `btn--${this.sukaButton ? this.sukaButton : 'basic'} ${this.class}`;
}
/**
* @return {?}
*/
get buttonSmall() {
return this.size === 'sm';
}
/**
* @return {?}
*/
get buttonLarge() {
return this.size === 'lg';
}
/**
* @return {?}
*/
ngOnInit() {
// Create the spinner
/** @type {?} */
const factory = this.componentFactoryResolver.resolveComponentFactory(Loading);
/** @type {?} */
const componentRef = this.viewContainerRef.createComponent(factory);
this.loadingSpinner = componentRef.instance;
this.loadingSpinner.size = 'sm';
this.renderer.setStyle(this.loadingSpinner.elementRef.nativeElement, 'display', 'none');
this.renderer.appendChild(this.el.nativeElement, this.loadingSpinner.elementRef.nativeElement);
if (this.loading) {
this.renderer.setStyle(this.loadingSpinner.elementRef.nativeElement, 'display', 'inherit');
this.el.nativeElement.disabled = true;
}
}
/**
* @param {?} changes
* @return {?}
*/
ngOnChanges(changes) {
if (this.loadingSpinner) {
if (this.loading) {
this.renderer.setStyle(this.loadingSpinner.elementRef.nativeElement, 'display', 'inherit');
}
else {
this.renderer.setStyle(this.loadingSpinner.elementRef.nativeElement, 'display', 'none');
}
this.el.nativeElement.disabled = changes.loading.currentValue;
}
}
/**
* @return {?}
*/
ngAfterViewInit() {
this.ref.detectChanges();
}
}
Button.decorators = [
{ type: Directive, args: [{
selector: '[sukaButton]'
},] }
];
/** @nocollapse */
Button.ctorParameters = () => [
{ type: ChangeDetectorRef },
{ type: ElementRef },
{ type: Renderer2 },
{ type: ViewContainerRef },
{ type: ComponentFactoryResolver }
];
Button.propDecorators = {
sukaButton: [{ type: Input }],
size: [{ type: Input }],
class: [{ type: Input }],
attrClass: [{ type: HostBinding, args: ['attr.class',] }],
skeleton: [{ type: HostBinding, args: ['class.skeleton',] }, { type: Input }],
outline: [{ type: HostBinding, args: ['class.btn--outline',] }, { type: Input }],
hover: [{ type: HostBinding, args: ['class.btn--hover',] }, { type: Input }],
fullWidth: [{ type: HostBinding, args: ['class.btn--full_width',] }, { type: Input }],
inGroup: [{ type: HostBinding, args: ['class.btn--group_item',] }, { type: Input }],
loading: [{ type: HostBinding, args: ['class.btn--loading',] }, { type: Input }],
buttonSmall: [{ type: HostBinding, args: ['class.btn--sm',] }],
buttonLarge: [{ type: HostBinding, args: ['class.btn--lg',] }]
};
if (false) {
/** @type {?} */
Button.prototype.sukaButton;
/** @type {?} */
Button.prototype.size;
/** @type {?} */
Button.prototype.class;
/** @type {?} */
Button.prototype.skeleton;
/** @type {?} */
Button.prototype.outline;
/** @type {?} */
Button.prototype.hover;
/** @type {?} */
Button.prototype.fullWidth;
/** @type {?} */
Button.prototype.inGroup;
/** @type {?} */
Button.prototype.loading;
/** @type {?} */
Button.prototype.originalInnerText;
/** @type {?} */
Button.prototype.loadingSpinner;
/**
* @type {?}
* @private
*/
Button.prototype.ref;
/**
* @type {?}
* @private
*/
Button.prototype.el;
/**
* @type {?}
* @private
*/
Button.prototype.renderer;
/**
* @type {?}
* @private
*/
Button.prototype.viewContainerRef;
/**
* @type {?}
* @private
*/
Button.prototype.componentFactoryResolver;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnV0dG9uLmRpcmVjdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiJuZzovL0BrdXNoa2kvbmctc3VrYS8iLCJzb3VyY2VzIjpbImxpYi9idXR0b24vYnV0dG9uLmRpcmVjdGl2ZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7O0FBQUEsT0FBTyxFQUNMLFNBQVMsRUFDVCxXQUFXLEVBQ1gsS0FBSyxFQUlMLGlCQUFpQixFQUNqQixVQUFVLEVBQ1YsU0FBUyxFQUNULGdCQUFnQixFQUNoQix3QkFBd0IsRUFFekIsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFFLE9BQU8sRUFBRSxNQUFNLDJCQUEyQixDQUFDO0FBS3BELE1BQU0sT0FBTyxNQUFNOzs7Ozs7OztJQTJCakIsWUFDVSxHQUFzQixFQUN0QixFQUFjLEVBQ2QsUUFBbUIsRUFDbkIsZ0JBQWtDLEVBQ2xDLHdCQUFrRDtRQUpsRCxRQUFHLEdBQUgsR0FBRyxDQUFtQjtRQUN0QixPQUFFLEdBQUYsRUFBRSxDQUFZO1FBQ2QsYUFBUSxHQUFSLFFBQVEsQ0FBVztRQUNuQixxQkFBZ0IsR0FBaEIsZ0JBQWdCLENBQWtCO1FBQ2xDLDZCQUF3QixHQUF4Qix3QkFBd0IsQ0FBMEI7UUEvQm5ELGVBQVUsR0FBb0UsT0FBTyxDQUFDO1FBQ3RGLFNBQUksR0FBdUIsSUFBSSxDQUFDO1FBRWhDLFVBQUssR0FBRyxFQUFFLENBQUM7UUFNb0IsYUFBUSxHQUFHLEtBQUssQ0FBQztRQUNiLFlBQU8sR0FBRyxLQUFLLENBQUM7UUFDbEIsVUFBSyxHQUFHLEtBQUssQ0FBQztRQUNULGNBQVMsR0FBRyxLQUFLLENBQUM7UUFDbEIsWUFBTyxHQUFHLEtBQUssQ0FBQztRQUNuQixZQUFPLEdBQUcsS0FBSyxDQUFDO0lBa0J6RCxDQUFDOzs7O0lBM0JKLElBQStCLFNBQVM7UUFDdEMsT0FBTyxRQUFRLElBQUksQ0FBQyxVQUFVLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxVQUFVLENBQUMsQ0FBQyxDQUFDLE9BQU8sSUFB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akUseUJBQStEOztJQUMvRCx5QkFBNEQ7O0lBUzVELG1DQUEwQjs7SUFDMUIsZ0NBQXdCOzs7OztJQUd0QixxQkFBOEI7Ozs7O0lBQzlCLG9CQUFzQjs7Ozs7SUFDdEIsMEJBQTJCOzs7OztJQUMzQixrQ0FBMEM7Ozs7O0lBQzFDLDBDQUEwRCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIERpcmVjdGl2ZSxcbiAgSG9zdEJpbmRpbmcsXG4gIElucHV0LFxuICBPbkluaXQsXG4gIE9uQ2hhbmdlcyxcbiAgQWZ0ZXJWaWV3SW5pdCxcbiAgQ2hhbmdlRGV0ZWN0b3JSZWYsXG4gIEVsZW1lbnRSZWYsXG4gIFJlbmRlcmVyMixcbiAgVmlld0NvbnRhaW5lclJlZixcbiAgQ29tcG9uZW50RmFjdG9yeVJlc29sdmVyLFxuICBTaW1wbGVDaGFuZ2VzXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgTG9hZGluZyB9IGZyb20gJy4uL2xvYWRpbmcvbG9hZGluZy5tb2R1bGUnO1xuXG5ARGlyZWN0aXZlKHtcbiAgc2VsZWN0b3I6ICdbc3VrYUJ1dHRvbl0nXG59KVxuZXhwb3J0IGNsYXNzIEJ1dHRvbiBpbXBsZW1lbnRzIE9uSW5pdCwgQWZ0ZXJWaWV3SW5pdCwgT25DaGFuZ2VzIHtcbiAgQElucHV0KCkgc3VrYUJ1dHRvbjogJ3ByaW1hcnknIHwgJ2Jhc2ljJyB8ICdwbGFpbicgfCAnZGVzdHJ1Y3RpdmUnIHwgJ291dGxpbmVfd2hpdGUnID0gJ2Jhc2ljJztcbiAgQElucHV0KCkgc2l6ZTogJ21kJyB8ICdzbScgfCAnbGcnID0gJ21kJztcblxuICBASW5wdXQoKSBjbGFzcyA9ICcnO1xuXG4gIEBIb3N0QmluZGluZygnYXR0ci5jbGFzcycpIGdldCBhdHRyQ2xhc3MoKSB7XG4gICAgcmV0dXJuIGBidG4tLSR7dGhpcy5zdWthQnV0dG9uID8gdGhpcy5zdWthQnV0dG9uIDogJ2Jhc2ljJ30gJHt0aGlzLmNsYXNzfWA7XG4gIH1cblxuICBASG9zdEJpbmRpbmcoJ2NsYXNzLnNrZWxldG9uJykgQElucHV0KCkgc2tlbGV0b24gPSBmYWxzZTtcbiAgQEhvc3RCaW5kaW5nKCdjbGFzcy5idG4tLW91dGxpbmUnKSBASW5wdXQoKSBvdXRsaW5lID0gZmFsc2U7XG4gIEBIb3N0QmluZGluZygnY2xhc3MuYnRuLS1ob3ZlcicpIEBJbnB1dCgpIGhvdmVyID0gZmFsc2U7XG4gIEBIb3N0QmluZGluZygnY2xhc3MuYnRuLS1mdWxsX3dpZHRoJykgQElucHV0KCkgZnVsbFdpZHRoID0gZmFsc2U7XG4gIEBIb3N0QmluZGluZygnY2xhc3MuYnRuLS1ncm91cF9pdGVtJykgQElucHV0KCkgaW5Hcm91cCA9IGZhbHNlO1xuICBASG9zdEJpbmRpbmcoJ2NsYXNzLmJ0bi0tbG9hZGluZycpIEBJbnB1dCgpIGxvYWRpbmcgPSBmYWxzZTtcblxuICBASG9zdEJpbmRpbmcoJ2NsYXNzLmJ0bi0tc20nKSBnZXQgYnV0dG9uU21hbGwoKSB7XG4gICAgcmV0dXJuIHRoaXMuc2l6ZSA9PT0gJ3NtJztcbiAgfVxuICBASG9zdEJpbmRpbmcoJ2NsYXNzLmJ0bi0tbGcnKSBnZXQgYnV0dG9uTGFyZ2UoKSB7XG4gICAgcmV0dXJuIHRoaXMuc2l6ZSA9PT0gJ2xnJztcbiAgfVxuXG4gIG9yaWdpbmFsSW5uZXJUZXh0OiBzdHJpbmc7XG4gIGxvYWRpbmdTcGlubmVyOiBMb2FkaW5nO1xuXG4gIGNvbnN0cnVjdG9yKFxuICAgIHByaXZhdGUgcmVmOiBDaGFuZ2VEZXRlY3RvclJlZixcbiAgICBwcml2YXRlIGVsOiBFbGVtZW50UmVmLFxuICAgIHByaXZhdGUgcmVuZGVyZXI6IFJlbmRlcmVyMixcbiAgICBwcml2YXRlIHZpZXdDb250YWluZXJSZWY6IFZpZXdDb250YWluZXJSZWYsXG4gICAgcHJpdmF0ZSBjb21wb25lbnRGYWN0b3J5UmVzb2x2ZXI6IENvbXBvbmVudEZhY3RvcnlSZXNvbHZlclxuICApIHt9XG5cbiAgcHVibGljIG5nT25Jbml0KCkge1xuICAgIC8vIENyZWF0ZSB0aGUgc3Bpbm5lclxuICAgIGNvbnN0IGZhY3RvcnkgPSB0aGlzLmNvbXBvbmVudEZhY3RvcnlSZXNvbHZlci5yZXNvbHZlQ29tcG9uZW50RmFjdG9yeShMb2FkaW5nKTtcbiAgICBjb25zdCBjb21wb25lbnRSZWYgPSB0aGlzLnZpZXdDb250YWluZXJSZWYuY3JlYXRlQ29tcG9uZW50KGZhY3RvcnkpO1xuICAgIHRoaXMubG9hZGluZ1NwaW5uZXIgPSBjb21wb25lbnRSZWYuaW5zdGFuY2U7XG5cbiAgICB0aGlzLmxvYWRpbmdTcGlubmVyLnNpemUgPSAnc20nO1xuXG4gICAgdGhpcy5yZW5kZXJlci5zZXRTdHlsZSh0aGlzLmxvYWRpbmdTcGlubmVyLmVsZW1lbnRSZWYubmF0aXZlRWxlbWVudCwgJ2Rpc3BsYXknLCAnbm9uZScpO1xuXG4gICAgdGhpcy5yZW5kZXJlci5hcHBlbmRDaGlsZCh0aGlzLmVsLm5hdGl2ZUVsZW1lbnQsIHRoaXMubG9hZGluZ1NwaW5uZXIuZWxlbWVudFJlZi5uYXRpdmVFbGVtZW50KTtcblxuICAgIGlmICh0aGlzLmxvYWRpbmcpIHtcbiAgICAgIHRoaXMucmVuZGVyZXIuc2V0U3R5bGUodGhpcy5sb2FkaW5nU3Bpbm5lci5lbGVtZW50UmVmLm5hdGl2ZUVsZW1lbnQsICdkaXNwbGF5JywgJ2luaGVyaXQnKTtcbiAgICAgIHRoaXMuZWwubmF0aXZlRWxlbWVudC5kaXNhYmxlZCA9IHRydWU7XG4gICAgfVxuICB9XG5cbiAgbmdPbkNoYW5nZXMoY2hhbmdlczogU2ltcGxlQ2hhbmdlcykge1xuICAgIGlmICh0aGlzLmxvYWRpbmdTcGlubmVyKSB7XG4gICAgICBpZiAodGhpcy5sb2FkaW5nKSB7XG4gICAgICAgIHRoaXMucmVuZGVyZXIuc2V0U3R5bGUodGhpcy5sb2FkaW5nU3Bpbm5lci5lbGVtZW50UmVmLm5hdGl2ZUVsZW1lbnQsICdkaXNwbGF5JywgJ2luaGVyaXQnKTtcbiAgICAgIH0gZWxzZSB7XG4gICAgICAgIHRoaXMucmVuZGVyZXIuc2V0U3R5bGUodGhpcy5sb2FkaW5nU3Bpbm5lci5lbGVtZW50UmVmLm5hdGl2ZUVsZW1lbnQsICdkaXNwbGF5JywgJ25vbmUnKTtcbiAgICAgIH1cblxuICAgICAgdGhpcy5lbC5uYXRpdmVFbGVtZW50LmRpc2FibGVkID0gY2hhbmdlcy5sb2FkaW5nLmN1cnJlbnRWYWx1ZTtcbiAgICB9XG4gIH1cblxuICBuZ0FmdGVyVmlld0luaXQoKSB7XG4gICAgdGhpcy5yZWYuZGV0ZWN0Q2hhbmdlcygpO1xuICB9XG59XG4iXX0=