@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>
187 lines • 12 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
import { Component, Input, Output, EventEmitter, ElementRef, TemplateRef } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
export class DatePickerInput {
/**
* @param {?} elementRef
*/
constructor(elementRef) {
this.elementRef = elementRef;
/**
* Select a calendar type for the `model`.
* Internal purposes only.
*/
this.type = 'simple';
this.id = `datepicker-${DatePickerInput.datePickerCount++}`;
this.hasIcon = false;
this.placeholder = 'dd/mm/yyyy';
this.pattern = '^\\d{1,2}/\\d{1,2}/\\d{4}$';
this.valueChange = new EventEmitter();
this.disabled = false;
this.invalid = false;
this.skeleton = false;
this.value = '';
this.onTouched = (/**
* @return {?}
*/
() => { });
this.propagateChange = (/**
* @param {?} _
* @return {?}
*/
(_) => { });
}
/**
* @param {?} event
* @return {?}
*/
onChange(event) {
this.value = event.target.value;
this.valueChange.emit(this.value);
this.propagateChange(this.value);
this.onTouched();
}
/**
* @param {?} value
* @return {?}
*/
writeValue(value) {
this.value = value;
}
/**
* @param {?} fn
* @return {?}
*/
registerOnChange(fn) {
this.propagateChange = fn;
}
/**
* @param {?} fn
* @return {?}
*/
registerOnTouched(fn) {
this.onTouched = fn;
}
/**
* @param {?} value
* @return {?}
*/
isTemplate(value) {
return value instanceof TemplateRef;
}
}
DatePickerInput.datePickerCount = 0;
DatePickerInput.decorators = [
{ type: Component, args: [{
selector: 'suka-date-picker-input',
template: `
<div class="date-picker-input"
[ngClass]="{
'date-picker--single' : type === 'single',
'date-picker--range' : type === 'range',
'skeleton' : skeleton
}">
<div class="date-picker-input-container">
<label *ngIf="label" [for]="id" class="label">
<ng-container *ngIf="!isTemplate(label)">{{label}}</ng-container>
<ng-template *ngIf="isTemplate(label)" [ngTemplateOutlet]="label"></ng-template>
</label>
<div class="date-picker-input__wrapper">
<input
*ngIf="!skeleton"
autocomplete="off"
type="text"
class="date-picker__input"
[value]="value"
[pattern]="pattern"
[placeholder]="placeholder"
[id]= "id"
[disabled]="disabled"
(change)="onChange($event)"/>
<suka-icon
icon="calendar"
class="date-picker__icon">
</suka-icon>
</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>
</div>
</div>
`,
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: DatePickerInput,
multi: true
}
]
}] }
];
/** @nocollapse */
DatePickerInput.ctorParameters = () => [
{ type: ElementRef }
];
DatePickerInput.propDecorators = {
type: [{ type: Input }],
id: [{ type: Input }],
hasIcon: [{ type: Input }],
label: [{ type: Input }],
placeholder: [{ type: Input }],
pattern: [{ type: Input }],
valueChange: [{ type: Output }],
disabled: [{ type: Input }],
invalid: [{ type: Input }],
invalidText: [{ type: Input }],
skeleton: [{ type: Input }],
value: [{ type: Input }]
};
if (false) {
/**
* @type {?}
* @private
*/
DatePickerInput.datePickerCount;
/**
* Select a calendar type for the `model`.
* Internal purposes only.
* @type {?}
*/
DatePickerInput.prototype.type;
/** @type {?} */
DatePickerInput.prototype.id;
/** @type {?} */
DatePickerInput.prototype.hasIcon;
/** @type {?} */
DatePickerInput.prototype.label;
/** @type {?} */
DatePickerInput.prototype.placeholder;
/** @type {?} */
DatePickerInput.prototype.pattern;
/** @type {?} */
DatePickerInput.prototype.valueChange;
/** @type {?} */
DatePickerInput.prototype.disabled;
/** @type {?} */
DatePickerInput.prototype.invalid;
/** @type {?} */
DatePickerInput.prototype.invalidText;
/** @type {?} */
DatePickerInput.prototype.skeleton;
/** @type {?} */
DatePickerInput.prototype.value;
/** @type {?} */
DatePickerInput.prototype.onTouched;
/** @type {?} */
DatePickerInput.prototype.propagateChange;
/**
* @type {?}
* @protected
*/
DatePickerInput.prototype.elementRef;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGF0ZXBpY2tlci1pbnB1dC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9Aa3VzaGtpL25nLXN1a2EvIiwic291cmNlcyI6WyJsaWIvZGF0ZXBpY2tlci1pbnB1dC9kYXRlcGlja2VyLWlucHV0LmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7O0FBQUEsT0FBTyxFQUNMLFNBQVMsRUFDVCxLQUFLLEVBQ0wsTUFBTSxFQUNOLFlBQVksRUFDWixVQUFVLEVBQ1YsV0FBVyxFQUNaLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBZ0RuRCxNQUFNLE9BQU8sZUFBZTs7OztJQStCMUIsWUFBc0IsVUFBc0I7UUFBdEIsZUFBVSxHQUFWLFVBQVUsQ0FBWTs7Ozs7UUF4Qm5DLFNBQUksR0FBa0MsUUFBUSxDQUFDO1FBRS9DLE9BQUUsR0FBRyxjQUFjLGVBQWUsQ0FBQyxlQUFlLEVBQUUsRUFBRSxDQUFDO1FBRXZELFlBQU8sR0FBRyxLQUFLLENBQUM7UUFJaEIsZ0JBQVcsR0FBRyxZQUFZLENBQUM7UUFFM0IsWUFBTyxHQUFHLDRCQUE0QixDQUFDO1FBRXRDLGdCQUFXLEdBQXlCLElBQUksWUFBWSxFQUFFLENBQUM7UUFFeEQsYUFBUSxHQUFHLEtBQUssQ0FBQztRQUVqQixZQUFPLEdBQUcsS0FBSyxDQUFDO1FBSWhCLGFBQVEsR0FBRyxLQUFLLENBQUM7UUFFakIsVUFBSyxHQUFHLEVBQUUsQ0FBQztRQXVCcEIsY0FBUzs7O1FBQWMsR0FBRyxFQUFFLEdBQUcsQ0FBQyxFQUFDO1FBRWpDLG9CQUFlOzs7O1FBQUcsQ0FBQyxDQUFNLEVBQUUsRUFBRSxHQUFHLENBQUMsRUFBQztJQXZCYyxDQUFDOzs7OztJQUVqRCxRQUFRLENBQUMsS0FBSztRQUNaLElBQUksQ0FBQyxLQUFLLEdBQUcsS0FBSyxDQUFDLE1BQU0sQ0FBQyxLQUFLLENBQUM7UUFDaEMsSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO1FBQ2xDLElBQUksQ0FBQyxlQUFlLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO1FBQ2pDLElBQUksQ0FBQyxTQUFTLEVBQUUsQ0FBQztJQUNuQixDQUFDOzs7OztJQUVNLFVBQVUsQ0FBQyxLQUFVO1FBQzFCLElBQUksQ0FBQyxLQUFLLEdBQUcsS0FBSyxDQUFDO0lBQ3JCLENBQUM7Ozs7O0lBRU0sZ0JBQWdCLENBQUMsRUFBTztRQUM3QixJQUFJLENBQUMsZUFBZSxHQUFHLEVBQUUsQ0FBQztJQUM1QixDQUFDOzs7OztJQUVNLGlCQUFpQixDQUFDLEVBQU87UUFDOUIsSUFBSSxDQUFDLFNBQVMsR0FBRyxFQUFFLENBQUM7SUFDdEIsQ0FBQzs7Ozs7SUFNTSxVQUFVLENBQUMsS0FBSztRQUNyQixPQUFPLEtBQUssWUFBWSxXQUFXLENBQUM7SUFDdEMsQ0FBQzs7QUF6RGMsK0JBQWUsR0FBRyxDQUFDLENBQUM7O1lBL0NwQyxTQUFTLFNBQUM7Z0JBQ1QsUUFBUSxFQUFFLHdCQUF3QjtnQkFDbEMsUUFBUSxFQUFFOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztHQW1DVDtnQkFDRCxTQUFTLEVBQUU7b0JBQ1Q7d0JBQ0UsT0FBTyxFQUFFLGlCQUFpQjt3QkFDMUIsV0FBVyxFQUFFLGVBQWU7d0JBQzVCLEtBQUssRUFBRSxJQUFJO3FCQUNaO2lCQUNGO2FBQ0Y7Ozs7WUFsREMsVUFBVTs7O21CQTBEVCxLQUFLO2lCQUVMLEtBQUs7c0JBRUwsS0FBSztvQkFFTCxLQUFLOzBCQUVMLEtBQUs7c0JBRUwsS0FBSzswQkFFTCxNQUFNO3VCQUVOLEtBQUs7c0JBRUwsS0FBSzswQkFFTCxLQUFLO3VCQUVMLEtBQUs7b0JBRUwsS0FBSzs7Ozs7OztJQTVCTixnQ0FBbUM7Ozs7OztJQU1uQywrQkFBd0Q7O0lBRXhELDZCQUFnRTs7SUFFaEUsa0NBQXlCOztJQUV6QixnQ0FBMEM7O0lBRTFDLHNDQUFvQzs7SUFFcEMsa0NBQWdEOztJQUVoRCxzQ0FBaUU7O0lBRWpFLG1DQUEwQjs7SUFFMUIsa0NBQXlCOztJQUV6QixzQ0FBZ0Q7O0lBRWhELG1DQUEwQjs7SUFFMUIsZ0NBQW9COztJQXVCcEIsb0NBQWlDOztJQUVqQywwQ0FBa0M7Ozs7O0lBdkJ0QixxQ0FBZ0MiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBDb21wb25lbnQsXG4gIElucHV0LFxuICBPdXRwdXQsXG4gIEV2ZW50RW1pdHRlcixcbiAgRWxlbWVudFJlZixcbiAgVGVtcGxhdGVSZWZcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBOR19WQUxVRV9BQ0NFU1NPUiB9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnc3VrYS1kYXRlLXBpY2tlci1pbnB1dCcsXG4gIHRlbXBsYXRlOiBgXG4gICAgPGRpdiBjbGFzcz1cImRhdGUtcGlja2VyLWlucHV0XCJcbiAgICAgIFtuZ0NsYXNzXT1cIntcbiAgICAgICAgJ2RhdGUtcGlja2VyLS1zaW5nbGUnIDogdHlwZSA9PT0gJ3NpbmdsZScsXG4gICAgICAgICdkYXRlLXBpY2tlci0tcmFuZ2UnIDogdHlwZSA9PT0gJ3JhbmdlJyxcbiAgICAgICAgJ3NrZWxldG9uJyA6IHNrZWxldG9uXG4gICAgICB9XCI+XG4gICAgICA8ZGl2IGNsYXNzPVwiZGF0ZS1waWNrZXItaW5wdXQtY29udGFpbmVyXCI+XG4gICAgICAgIDxsYWJlbCAqbmdJZj1cImxhYmVsXCIgW2Zvcl09XCJpZFwiIGNsYXNzPVwibGFiZWxcIj5cbiAgICAgICAgICA8bmctY29udGFpbmVyICpuZ0lmPVwiIWlzVGVtcGxhdGUobGFiZWwpXCI+e3tsYWJlbH19PC9uZy1jb250YWluZXI+XG4gICAgICAgICAgPG5nLXRlbXBsYXRlICpuZ0lmPVwiaXNUZW1wbGF0ZShsYWJlbClcIiBbbmdUZW1wbGF0ZU91dGxldF09XCJsYWJlbFwiPjwvbmctdGVtcGxhdGU+XG4gICAgICAgIDwvbGFiZWw+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJkYXRlLXBpY2tlci1pbnB1dF9fd3JhcHBlclwiPlxuICAgICAgICAgIDxpbnB1dFxuICAgICAgICAgICAgKm5nSWY9XCIhc2tlbGV0b25cIlxuICAgICAgICAgICAgYXV0b2NvbXBsZXRlPVwib2ZmXCJcbiAgICAgICAgICAgIHR5cGU9XCJ0ZXh0XCJcbiAgICAgICAgICAgIGNsYXNzPVwiZGF0ZS1waWNrZXJfX2lucHV0XCJcbiAgICAgICAgICAgIFt2YWx1ZV09XCJ2YWx1ZVwiXG4gICAgICAgICAgICBbcGF0dGVybl09XCJwYXR0ZXJuXCJcbiAgICAgICAgICAgIFtwbGFjZWhvbGRlcl09XCJwbGFjZWhvbGRlclwiXG4gICAgICAgICAgICBbaWRdPSBcImlkXCJcbiAgICAgICAgICAgIFtkaXNhYmxlZF09XCJkaXNhYmxlZFwiXG4gICAgICAgICAgICAoY2hhbmdlKT1cIm9uQ2hhbmdlKCRldmVudClcIi8+XG4gICAgICAgICAgICA8c3VrYS1pY29uXG4gICAgICAgICAgICAgIGljb249XCJjYWxlbmRhclwiXG4gICAgICAgICAgICAgIGNsYXNzPVwiZGF0ZS1waWNrZXJfX2ljb25cIj5cbiAgICAgICAgICAgIDwvc3VrYS1pY29uPlxuICAgICAgICA8L2Rpdj5cbiAgICAgICAgPGRpdiAqbmdJZj1cImludmFsaWRcIiBjbGFzcz1cImZvcm0tcmVxdWlyZW1lbnRcIj5cbiAgICAgICAgICA8bmctY29udGFpbmVyICpuZ0lmPVwiIWlzVGVtcGxhdGUoaW52YWxpZFRleHQpXCI+e3tpbnZhbGlkVGV4dH19PC9uZy1jb250YWluZXI+XG4gICAgICAgICAgPG5nLXRlbXBsYXRlICpuZ0lmPVwiaXNUZW1wbGF0ZShpbnZhbGlkVGV4dClcIiBbbmdUZW1wbGF0ZU91dGxldF09XCJpbnZhbGlkVGV4dFwiPjwvbmctdGVtcGxhdGU+XG4gICAgICAgIDwvZGl2PlxuICAgICAgPC9kaXY+XG4gICAgPC9kaXY+XG4gIGAsXG4gIHByb3ZpZGVyczogW1xuICAgIHtcbiAgICAgIHByb3ZpZGU6IE5HX1ZBTFVFX0FDQ0VTU09SLFxuICAgICAgdXNlRXhpc3Rpbmc6IERhdGVQaWNrZXJJbnB1dCxcbiAgICAgIG11bHRpOiB0cnVlXG4gICAgfVxuICBdXG59KVxuZXhwb3J0IGNsYXNzIERhdGVQaWNrZXJJbnB1dCB7XG4gIHByaXZhdGUgc3RhdGljIGRhdGVQaWNrZXJDb3VudCA9IDA7XG5cbiAgLyoqXG4gICAqIFNlbGVjdCBhIGNhbGVuZGFyIHR5cGUgZm9yIHRoZSBgbW9kZWxgLlxuICAgKiBJbnRlcm5hbCBwdXJwb3NlcyBvbmx5LlxuICAgKi9cbiAgQElucHV0KCkgdHlwZTogJ3NpbXBsZScgfCAnc2luZ2xlJyB8ICdyYW5nZScgPSAnc2ltcGxlJztcblxuICBASW5wdXQoKSBpZCA9IGBkYXRlcGlja2VyLSR7RGF0ZVBpY2tlcklucHV0LmRhdGVQaWNrZXJDb3VudCsrfWA7XG5cbiAgQElucHV0KCkgaGFzSWNvbiA9IGZhbHNlO1xuXG4gIEBJbnB1dCgpIGxhYmVsOiBzdHJpbmcgfCBUZW1wbGF0ZVJlZjxhbnk+O1xuXG4gIEBJbnB1dCgpIHBsYWNlaG9sZGVyID0gJ2RkL21tL3l5eXknO1xuXG4gIEBJbnB1dCgpIHBhdHRlcm4gPSAnXlxcXFxkezEsMn0vXFxcXGR7MSwyfS9cXFxcZHs0fSQnO1xuXG4gIEBPdXRwdXQoKSB2YWx1ZUNoYW5nZTogRXZlbnRFbWl0dGVyPHN0cmluZz4gPSBuZXcgRXZlbnRFbWl0dGVyKCk7XG5cbiAgQElucHV0KCkgZGlzYWJsZWQgPSBmYWxzZTtcblxuICBASW5wdXQoKSBpbnZhbGlkID0gZmFsc2U7XG5cbiAgQElucHV0KCkgaW52YWxpZFRleHQ6IHN0cmluZyB8IFRlbXBsYXRlUmVmPGFueT47XG5cbiAgQElucHV0KCkgc2tlbGV0b24gPSBmYWxzZTtcblxuICBASW5wdXQoKSB2YWx1ZSA9ICcnO1xuXG4gIGNvbnN0cnVjdG9yKHByb3RlY3RlZCBlbGVtZW50UmVmOiBFbGVtZW50UmVmKSB7IH1cblxuICBvbkNoYW5nZShldmVudCkge1xuICAgIHRoaXMudmFsdWUgPSBldmVudC50YXJnZXQudmFsdWU7XG4gICAgdGhpcy52YWx1ZUNoYW5nZS5lbWl0KHRoaXMudmFsdWUpO1xuICAgIHRoaXMucHJvcGFnYXRlQ2hhbmdlKHRoaXMudmFsdWUpO1xuICAgIHRoaXMub25Ub3VjaGVkKCk7XG4gIH1cblxuICBwdWJsaWMgd3JpdGVWYWx1ZSh2YWx1ZTogYW55KSB7XG4gICAgdGhpcy52YWx1ZSA9IHZhbHVlO1xuICB9XG5cbiAgcHVibGljIHJlZ2lzdGVyT25DaGFuZ2UoZm46IGFueSkge1xuICAgIHRoaXMucHJvcGFnYXRlQ2hhbmdlID0gZm47XG4gIH1cblxuICBwdWJsaWMgcmVnaXN0ZXJPblRvdWNoZWQoZm46IGFueSkge1xuICAgIHRoaXMub25Ub3VjaGVkID0gZm47XG4gIH1cblxuICBvblRvdWNoZWQ6ICgpID0+IGFueSA9ICgpID0+IHsgfTtcblxuICBwcm9wYWdhdGVDaGFuZ2UgPSAoXzogYW55KSA9PiB7IH07XG5cbiAgcHVibGljIGlzVGVtcGxhdGUodmFsdWUpIHtcbiAgICByZXR1cm4gdmFsdWUgaW5zdGFuY2VvZiBUZW1wbGF0ZVJlZjtcbiAgfVxufVxuIl19