@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>
124 lines • 8.43 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';
export class Label {
constructor() {
/**
* Sets the unique ID. Defaults to `input-${total count of selects instantiated}`
*/
this.id = `input-${Label.labelCounter++}`;
/**
* Set to `true` to display a loading label.
*/
this.skeleton = false;
/**
* Set to `true` to display the invalid state.
*/
this.invalid = false;
/**
* Set to `true` to display the valid state.
*/
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 }],
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;
/**
* Set to `true` to display a loading label.
* @type {?}
*/
Label.prototype.skeleton;
/**
* Sets the label helper text.
* @type {?}
*/
Label.prototype.helperText;
/**
* Sets the invalid text to display when the label is invalid.
* @type {?}
*/
Label.prototype.invalidText;
/**
* Set to `true` to display the invalid state.
* @type {?}
*/
Label.prototype.invalid;
/**
* Set to `true` to display the valid state.
* @type {?}
*/
Label.prototype.valid;
/** @type {?} */
Label.prototype.wrapper;
/** @type {?} */
Label.prototype.labelClass;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibGFiZWwuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vQGt1c2hraS9uZy1zdWthLyIsInNvdXJjZXMiOlsibGliL2lucHV0L2xhYmVsLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7OztBQUVBLE9BQU8sRUFDTCxTQUFTLEVBQ1QsS0FBSyxFQUVMLFVBQVUsRUFDVixXQUFXLEVBQ1gsV0FBVyxFQUNYLFNBQVMsRUFDVixNQUFNLGVBQWUsQ0FBQztBQXlCdkIsTUFBTSxPQUFPLEtBQUs7SUFnQ2hCOzs7O1FBeEJTLE9BQUUsR0FBRyxTQUFTLEtBQUssQ0FBQyxZQUFZLEVBQUUsRUFBRSxDQUFDOzs7O1FBSXJDLGFBQVEsR0FBRyxLQUFLLENBQUM7Ozs7UUFZakIsWUFBTyxHQUFHLEtBQUssQ0FBQzs7OztRQUloQixVQUFLLEdBQUcsS0FBSyxDQUFDO1FBRVMsZUFBVSxHQUFHLElBQUksQ0FBQztRQUdoRCxLQUFLLENBQUMsWUFBWSxFQUFFLENBQUM7SUFDdkIsQ0FBQzs7OztJQUVELGtCQUFrQjtRQUNoQixJQUFJLENBQUMsT0FBTyxDQUFDLGFBQWEsQ0FBQyxhQUFhLENBQUMsb0JBQW9CLENBQUMsQ0FBQyxZQUFZLENBQUMsSUFBSSxFQUFFLElBQUksQ0FBQyxFQUFFLENBQUMsQ0FBQztJQUM3RixDQUFDOzs7OztJQUVNLFVBQVUsQ0FBQyxLQUFLO1FBQ3JCLE9BQU8sS0FBSyxZQUFZLFdBQVcsQ0FBQztJQUN0QyxDQUFDOzs7OztBQXRDTSxrQkFBWSxHQUFHLENBQUMsQ0FBQzs7WUEzQnpCLFNBQVMsU0FBQztnQkFDVCxRQUFRLEVBQUUsWUFBWTtnQkFDdEIsUUFBUSxFQUFFOzs7Ozs7Ozs7Ozs7Ozs7Ozs7O0dBbUJUO2FBQ0Y7Ozs7O2lCQVNFLEtBQUs7dUJBSUwsS0FBSzt5QkFJTCxLQUFLOzBCQUlMLEtBQUs7c0JBSUwsS0FBSztvQkFJTCxLQUFLO3NCQUNMLFNBQVMsU0FBQyxTQUFTLEVBQUUsRUFBRSxNQUFNLEVBQUUsSUFBSSxFQUFFO3lCQUNyQyxXQUFXLFNBQUMsaUJBQWlCOzs7Ozs7O0lBMUI5QixtQkFBd0I7Ozs7O0lBSXhCLG1CQUE4Qzs7Ozs7SUFJOUMseUJBQTBCOzs7OztJQUkxQiwyQkFBNEI7Ozs7O0lBSTVCLDRCQUFnRDs7Ozs7SUFJaEQsd0JBQXlCOzs7OztJQUl6QixzQkFBdUI7O0lBQ3ZCLHdCQUE0RTs7SUFDNUUsMkJBQWtEIiwic291cmNlc0NvbnRlbnQiOlsiLy8gdHNsaW50OmRpc2FibGU6IG1heC1saW5lLWxlbmd0aFxuXG5pbXBvcnQge1xuICBDb21wb25lbnQsXG4gIElucHV0LFxuICBBZnRlckNvbnRlbnRJbml0LFxuICBFbGVtZW50UmVmLFxuICBIb3N0QmluZGluZyxcbiAgVGVtcGxhdGVSZWYsXG4gIFZpZXdDaGlsZFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnc3VrYS1sYWJlbCcsXG4gIHRlbXBsYXRlOiBgXG4gICAgPGxhYmVsXG4gICAgICBbZm9yXT1cImlkXCJcbiAgICAgIGNsYXNzPVwibGFiZWxcIlxuICAgICAgW25nQ2xhc3NdPVwie1xuICAgICAgICAnc2tlbGV0b24nOiBza2VsZXRvblxuICAgICAgfVwiPlxuICAgICAgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxuICAgIDwvbGFiZWw+XG4gICAgPGRpdiAqbmdJZj1cIiFza2VsZXRvbiAmJiBoZWxwZXJUZXh0XCIgY2xhc3M9XCJmb3JtX19oZWxwZXItdGV4dFwiPnt7aGVscGVyVGV4dH19PC9kaXY+XG4gICAgPGRpdiBjbGFzcz1cInRleHQtaW5wdXRfX2ZpZWxkLXdyYXBwZXJcIiBbYXR0ci5kYXRhLWludmFsaWRdPVwiKGludmFsaWQgPyB0cnVlIDogbnVsbClcIiAjd3JhcHBlcj5cbiAgICAgIDxzdWthLWljb24gKm5nSWY9XCJpbnZhbGlkXCIgaWNvbj1cImFsZXJ0LWNpcmNsZVwiIGNsYXNzPVwidGV4dC1pbnB1dF9faW52YWxpZC1pY29uIHRleHQtYXJlYV9faW52YWxpZC1pY29uXCI+PC9zdWthLWljb24+XG4gICAgICA8c3VrYS1pY29uICpuZ0lmPVwidmFsaWRcIiBpY29uPVwiY2hlY2tcIiBjbGFzcz1cInRleHQtaW5wdXRfX3ZhbGlkLWljb24gdGV4dC1hcmVhX192YWxpZC1pY29uXCI+PC9zdWthLWljb24+XG4gICAgICA8bmctY29udGVudCBzZWxlY3Q9XCJpbnB1dCx0ZXh0YXJlYSxkaXZcIj48L25nLWNvbnRlbnQ+XG4gICAgPC9kaXY+XG4gICAgPGRpdiAqbmdJZj1cImludmFsaWRcIiBjbGFzcz1cImZvcm0tcmVxdWlyZW1lbnRcIj5cbiAgICAgIDxuZy1jb250YWluZXIgKm5nSWY9XCIhaXNUZW1wbGF0ZShpbnZhbGlkVGV4dClcIj57e2ludmFsaWRUZXh0fX08L25nLWNvbnRhaW5lcj5cbiAgICAgIDxuZy10ZW1wbGF0ZSAqbmdJZj1cImlzVGVtcGxhdGUoaW52YWxpZFRleHQpXCIgW25nVGVtcGxhdGVPdXRsZXRdPVwiaW52YWxpZFRleHRcIj48L25nLXRlbXBsYXRlPlxuICAgIDwvZGl2PlxuICBgXG59KVxuZXhwb3J0IGNsYXNzIExhYmVsIGltcGxlbWVudHMgQWZ0ZXJDb250ZW50SW5pdCB7XG4gIC8qKlxuICAgKiBVc2VkIHRvIGJ1aWxkIHRoZSBpZCBvZiB0aGUgaW5wdXQgaXRlbSBhc3NvY2lhdGVkIHdpdGggdGhlIGBMYWJlbGAuXG4gICAqL1xuICBzdGF0aWMgbGFiZWxDb3VudGVyID0gMDtcbiAgLyoqXG4gICAqIFNldHMgdGhlIHVuaXF1ZSBJRC4gRGVmYXVsdHMgdG8gYGlucHV0LSR7dG90YWwgY291bnQgb2Ygc2VsZWN0cyBpbnN0YW50aWF0ZWR9YFxuICAgKi9cbiAgQElucHV0KCkgaWQgPSBgaW5wdXQtJHtMYWJlbC5sYWJlbENvdW50ZXIrK31gO1xuICAvKipcbiAgICogU2V0IHRvIGB0cnVlYCB0byBkaXNwbGF5IGEgbG9hZGluZyBsYWJlbC5cbiAgICovXG4gIEBJbnB1dCgpIHNrZWxldG9uID0gZmFsc2U7XG4gIC8qKlxuICAgKiBTZXRzIHRoZSBsYWJlbCBoZWxwZXIgdGV4dC5cbiAgICovXG4gIEBJbnB1dCgpIGhlbHBlclRleHQ6IHN0cmluZztcbiAgLyoqXG4gICAqIFNldHMgdGhlIGludmFsaWQgdGV4dCB0byBkaXNwbGF5IHdoZW4gdGhlIGxhYmVsIGlzIGludmFsaWQuXG4gICAqL1xuICBASW5wdXQoKSBpbnZhbGlkVGV4dDogc3RyaW5nIHwgVGVtcGxhdGVSZWY8YW55PjtcbiAgLyoqXG4gICAqIFNldCB0byBgdHJ1ZWAgdG8gZGlzcGxheSB0aGUgaW52YWxpZCBzdGF0ZS5cbiAgICovXG4gIEBJbnB1dCgpIGludmFsaWQgPSBmYWxzZTtcbiAgLyoqXG4gICAqIFNldCB0byBgdHJ1ZWAgdG8gZGlzcGxheSB0aGUgdmFsaWQgc3RhdGUuXG4gICAqL1xuICBASW5wdXQoKSB2YWxpZCA9IGZhbHNlO1xuICBAVmlld0NoaWxkKCd3cmFwcGVyJywgeyBzdGF0aWM6IHRydWUgfSkgd3JhcHBlcjogRWxlbWVudFJlZjxIVE1MRGl2RWxlbWVudD47XG4gIEBIb3N0QmluZGluZygnY2xhc3MuZm9ybS1pdGVtJykgbGFiZWxDbGFzcyA9IHRydWU7XG5cbiAgY29uc3RydWN0b3IoKSB7XG4gICAgTGFiZWwubGFiZWxDb3VudGVyKys7XG4gIH1cblxuICBuZ0FmdGVyQ29udGVudEluaXQoKSB7XG4gICAgdGhpcy53cmFwcGVyLm5hdGl2ZUVsZW1lbnQucXVlcnlTZWxlY3RvcignaW5wdXQsdGV4dGFyZWEsZGl2Jykuc2V0QXR0cmlidXRlKCdpZCcsIHRoaXMuaWQpO1xuICB9XG5cbiAgcHVibGljIGlzVGVtcGxhdGUodmFsdWUpIHtcbiAgICByZXR1cm4gdmFsdWUgaW5zdGFuY2VvZiBUZW1wbGF0ZVJlZjtcbiAgfVxufVxuIl19