@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>
105 lines • 7.85 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
// tslint:disable: max-line-length
import { Component, Input, ElementRef, HostBinding, TemplateRef, ViewChild } from '@angular/core';
// tslint:disable-next-line: component-class-suffix
export class Label {
constructor() {
/**
* Sets the unique ID. Defaults to `input-${total count of selects instantiated}`
*/
this.id = `input-${Label.labelCounter++}`;
this.labelState = '';
this.skeleton = false;
this.invalid = false;
this.valid = false;
this.labelClass = true;
Label.labelCounter++;
}
/**
* @return {?}
*/
ngAfterContentInit() {
this.wrapper.nativeElement.querySelector('input,textarea,div').setAttribute('id', this.id);
}
/**
* @param {?} value
* @return {?}
*/
isTemplate(value) {
return value instanceof TemplateRef;
}
}
/**
* Used to build the id of the input item associated with the `Label`.
*/
Label.labelCounter = 0;
Label.decorators = [
{ type: Component, args: [{
selector: 'suka-label',
template: `
<label
[for]="id"
class="label"
[ngClass]="{
'skeleton': skeleton
}">
<ng-content></ng-content>
</label>
<div *ngIf="!skeleton && helperText" class="form__helper-text">{{helperText}}</div>
<div class="text-input__field-wrapper" [attr.data-invalid]="(invalid ? true : null)" #wrapper>
<suka-icon *ngIf="invalid" icon="alert-circle" class="text-input__invalid-icon text-area__invalid-icon"></suka-icon>
<suka-icon *ngIf="valid" icon="check" class="text-input__valid-icon text-area__valid-icon"></suka-icon>
<ng-content select="input,textarea,div"></ng-content>
</div>
<div *ngIf="invalid" class="form-requirement">
<ng-container *ngIf="!isTemplate(invalidText)">{{invalidText}}</ng-container>
<ng-template *ngIf="isTemplate(invalidText)" [ngTemplateOutlet]="invalidText"></ng-template>
</div>
`
}] }
];
/** @nocollapse */
Label.ctorParameters = () => [];
Label.propDecorators = {
id: [{ type: Input }],
labelState: [{ type: Input }],
skeleton: [{ type: Input }],
helperText: [{ type: Input }],
invalidText: [{ type: Input }],
invalid: [{ type: Input }],
valid: [{ type: Input }],
wrapper: [{ type: ViewChild, args: ['wrapper', { static: true },] }],
labelClass: [{ type: HostBinding, args: ['class.form-item',] }]
};
if (false) {
/**
* Used to build the id of the input item associated with the `Label`.
* @type {?}
*/
Label.labelCounter;
/**
* Sets the unique ID. Defaults to `input-${total count of selects instantiated}`
* @type {?}
*/
Label.prototype.id;
/** @type {?} */
Label.prototype.labelState;
/** @type {?} */
Label.prototype.skeleton;
/** @type {?} */
Label.prototype.helperText;
/** @type {?} */
Label.prototype.invalidText;
/** @type {?} */
Label.prototype.invalid;
/** @type {?} */
Label.prototype.valid;
/** @type {?} */
Label.prototype.wrapper;
/** @type {?} */
Label.prototype.labelClass;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibGFiZWwuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vQGt1c2hraS9uZy1zdWthLyIsInNvdXJjZXMiOlsibGliL2lucHV0L2xhYmVsLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7OztBQUVBLE9BQU8sRUFDTCxTQUFTLEVBQ1QsS0FBSyxFQUVMLFVBQVUsRUFDVixXQUFXLEVBQ1gsV0FBVyxFQUNYLFNBQVMsRUFDVixNQUFNLGVBQWUsQ0FBQztBQXlCdkIsbURBQW1EO0FBQ25ELE1BQU0sT0FBTyxLQUFLO0lBa0JoQjs7OztRQVZTLE9BQUUsR0FBRyxTQUFTLEtBQUssQ0FBQyxZQUFZLEVBQUUsRUFBRSxDQUFDO1FBQ3JDLGVBQVUsR0FBeUMsRUFBRSxDQUFDO1FBQ3RELGFBQVEsR0FBRyxLQUFLLENBQUM7UUFHakIsWUFBTyxHQUFHLEtBQUssQ0FBQztRQUNoQixVQUFLLEdBQUcsS0FBSyxDQUFDO1FBRVMsZUFBVSxHQUFHLElBQUksQ0FBQztRQUdoRCxLQUFLLENBQUMsWUFBWSxFQUFFLENBQUM7SUFDdkIsQ0FBQzs7OztJQUVELGtCQUFrQjtRQUNoQixJQUFJLENBQUMsT0FBTyxDQUFDLGFBQWEsQ0FBQyxhQUFhLENBQUMsb0JBQW9CLENBQUMsQ0FBQyxZQUFZLENBQUMsSUFBSSxFQUFFLElBQUksQ0FBQyxFQUFFLENBQUMsQ0FBQztJQUM3RixDQUFDOzs7OztJQUVNLFVBQVUsQ0FBQyxLQUFLO1FBQ3JCLE9BQU8sS0FBSyxZQUFZLFdBQVcsQ0FBQztJQUN0QyxDQUFDOzs7OztBQXhCTSxrQkFBWSxHQUFHLENBQUMsQ0FBQzs7WUE1QnpCLFNBQVMsU0FBQztnQkFDVCxRQUFRLEVBQUUsWUFBWTtnQkFDdEIsUUFBUSxFQUFFOzs7Ozs7Ozs7Ozs7Ozs7Ozs7O0dBbUJUO2FBQ0Y7Ozs7O2lCQVVFLEtBQUs7eUJBQ0wsS0FBSzt1QkFDTCxLQUFLO3lCQUNMLEtBQUs7MEJBQ0wsS0FBSztzQkFDTCxLQUFLO29CQUNMLEtBQUs7c0JBQ0wsU0FBUyxTQUFDLFNBQVMsRUFBRSxFQUFFLE1BQU0sRUFBRSxJQUFJLEVBQUU7eUJBQ3JDLFdBQVcsU0FBQyxpQkFBaUI7Ozs7Ozs7SUFaOUIsbUJBQXdCOzs7OztJQUl4QixtQkFBOEM7O0lBQzlDLDJCQUErRDs7SUFDL0QseUJBQTBCOztJQUMxQiwyQkFBNEI7O0lBQzVCLDRCQUFnRDs7SUFDaEQsd0JBQXlCOztJQUN6QixzQkFBdUI7O0lBQ3ZCLHdCQUE0RTs7SUFDNUUsMkJBQWtEIiwic291cmNlc0NvbnRlbnQiOlsiLy8gdHNsaW50OmRpc2FibGU6IG1heC1saW5lLWxlbmd0aFxuXG5pbXBvcnQge1xuICBDb21wb25lbnQsXG4gIElucHV0LFxuICBBZnRlckNvbnRlbnRJbml0LFxuICBFbGVtZW50UmVmLFxuICBIb3N0QmluZGluZyxcbiAgVGVtcGxhdGVSZWYsXG4gIFZpZXdDaGlsZFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnc3VrYS1sYWJlbCcsXG4gIHRlbXBsYXRlOiBgXG4gICAgPGxhYmVsXG4gICAgICBbZm9yXT1cImlkXCJcbiAgICAgIGNsYXNzPVwibGFiZWxcIlxuICAgICAgW25nQ2xhc3NdPVwie1xuICAgICAgICAnc2tlbGV0b24nOiBza2VsZXRvblxuICAgICAgfVwiPlxuICAgICAgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxuICAgIDwvbGFiZWw+XG4gICAgPGRpdiAqbmdJZj1cIiFza2VsZXRvbiAmJiBoZWxwZXJUZXh0XCIgY2xhc3M9XCJmb3JtX19oZWxwZXItdGV4dFwiPnt7aGVscGVyVGV4dH19PC9kaXY+XG4gICAgPGRpdiBjbGFzcz1cInRleHQtaW5wdXRfX2ZpZWxkLXdyYXBwZXJcIiBbYXR0ci5kYXRhLWludmFsaWRdPVwiKGludmFsaWQgPyB0cnVlIDogbnVsbClcIiAjd3JhcHBlcj5cbiAgICAgIDxzdWthLWljb24gKm5nSWY9XCJpbnZhbGlkXCIgaWNvbj1cImFsZXJ0LWNpcmNsZVwiIGNsYXNzPVwidGV4dC1pbnB1dF9faW52YWxpZC1pY29uIHRleHQtYXJlYV9faW52YWxpZC1pY29uXCI+PC9zdWthLWljb24+XG4gICAgICA8c3VrYS1pY29uICpuZ0lmPVwidmFsaWRcIiBpY29uPVwiY2hlY2tcIiBjbGFzcz1cInRleHQtaW5wdXRfX3ZhbGlkLWljb24gdGV4dC1hcmVhX192YWxpZC1pY29uXCI+PC9zdWthLWljb24+XG4gICAgICA8bmctY29udGVudCBzZWxlY3Q9XCJpbnB1dCx0ZXh0YXJlYSxkaXZcIj48L25nLWNvbnRlbnQ+XG4gICAgPC9kaXY+XG4gICAgPGRpdiAqbmdJZj1cImludmFsaWRcIiBjbGFzcz1cImZvcm0tcmVxdWlyZW1lbnRcIj5cbiAgICAgIDxuZy1jb250YWluZXIgKm5nSWY9XCIhaXNUZW1wbGF0ZShpbnZhbGlkVGV4dClcIj57e2ludmFsaWRUZXh0fX08L25nLWNvbnRhaW5lcj5cbiAgICAgIDxuZy10ZW1wbGF0ZSAqbmdJZj1cImlzVGVtcGxhdGUoaW52YWxpZFRleHQpXCIgW25nVGVtcGxhdGVPdXRsZXRdPVwiaW52YWxpZFRleHRcIj48L25nLXRlbXBsYXRlPlxuICAgIDwvZGl2PlxuICBgXG59KVxuLy8gdHNsaW50OmRpc2FibGUtbmV4dC1saW5lOiBjb21wb25lbnQtY2xhc3Mtc3VmZml4XG5leHBvcnQgY2xhc3MgTGFiZWwgaW1wbGVtZW50cyBBZnRlckNvbnRlbnRJbml0IHtcbiAgLyoqXG4gICAqIFVzZWQgdG8gYnVpbGQgdGhlIGlkIG9mIHRoZSBpbnB1dCBpdGVtIGFzc29jaWF0ZWQgd2l0aCB0aGUgYExhYmVsYC5cbiAgICovXG4gIHN0YXRpYyBsYWJlbENvdW50ZXIgPSAwO1xuICAvKipcbiAgICogU2V0cyB0aGUgdW5pcXVlIElELiBEZWZhdWx0cyB0byBgaW5wdXQtJHt0b3RhbCBjb3VudCBvZiBzZWxlY3RzIGluc3RhbnRpYXRlZH1gXG4gICAqL1xuICBASW5wdXQoKSBpZCA9IGBpbnB1dC0ke0xhYmVsLmxhYmVsQ291bnRlcisrfWA7XG4gIEBJbnB1dCgpIGxhYmVsU3RhdGU6ICdzdWNjZXNzJyB8ICd3YXJuaW5nJyB8ICdlcnJvcicgfCAnJyA9ICcnO1xuICBASW5wdXQoKSBza2VsZXRvbiA9IGZhbHNlO1xuICBASW5wdXQoKSBoZWxwZXJUZXh0OiBzdHJpbmc7XG4gIEBJbnB1dCgpIGludmFsaWRUZXh0OiBzdHJpbmcgfCBUZW1wbGF0ZVJlZjxhbnk+O1xuICBASW5wdXQoKSBpbnZhbGlkID0gZmFsc2U7XG4gIEBJbnB1dCgpIHZhbGlkID0gZmFsc2U7XG4gIEBWaWV3Q2hpbGQoJ3dyYXBwZXInLCB7IHN0YXRpYzogdHJ1ZSB9KSB3cmFwcGVyOiBFbGVtZW50UmVmPEhUTUxEaXZFbGVtZW50PjtcbiAgQEhvc3RCaW5kaW5nKCdjbGFzcy5mb3JtLWl0ZW0nKSBsYWJlbENsYXNzID0gdHJ1ZTtcblxuICBjb25zdHJ1Y3RvcigpIHtcbiAgICBMYWJlbC5sYWJlbENvdW50ZXIrKztcbiAgfVxuXG4gIG5nQWZ0ZXJDb250ZW50SW5pdCgpIHtcbiAgICB0aGlzLndyYXBwZXIubmF0aXZlRWxlbWVudC5xdWVyeVNlbGVjdG9yKCdpbnB1dCx0ZXh0YXJlYSxkaXYnKS5zZXRBdHRyaWJ1dGUoJ2lkJywgdGhpcy5pZCk7XG4gIH1cblxuICBwdWJsaWMgaXNUZW1wbGF0ZSh2YWx1ZSkge1xuICAgIHJldHVybiB2YWx1ZSBpbnN0YW5jZW9mIFRlbXBsYXRlUmVmO1xuICB9XG59XG4iXX0=