UNPKG

@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>

264 lines 15.3 kB
/** * @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`. */ this.type = 'simple'; /** * Sets the id for the `DatePickerInput`. */ this.id = `datepicker-${DatePickerInput.datePickerCount++}`; /** * Set to `true` to display a calendar icon */ this.hasIcon = false; /** * Sets the input's placeholder. */ this.placeholder = 'dd/mm/yyyy'; /** * Sets the pattern to follow. */ this.pattern = '^\\d{1,2}/\\d{1,2}/\\d{4}$'; /** * Emits event notifying other classes of a value change. */ this.valueChange = new EventEmitter(); /** * Set to `true` to disable the input */ this.disabled = false; /** * Set to `true` to display invalid state. */ this.invalid = false; /** * Sets a time picker icon for input */ this.timePicker = false; /** * Skeleton state. */ this.skeleton = false; /** * Sets the `DatepickerInput` value. */ this.value = ''; this.onTouched = (/** * @return {?} */ () => { }); this.propagateChange = (/** * @param {?} _ * @return {?} */ (_) => { }); } /** * Sets the value, marks the input as touched and emits a value change event. * @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" *ngIf="!timePicker" > </suka-icon> <suka-icon icon="clock" class="date-picker__icon" *ngIf="timePicker" > </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 }], timePicker: [{ type: Input }], skeleton: [{ type: Input }], value: [{ type: Input }] }; if (false) { /** * @type {?} * @private */ DatePickerInput.datePickerCount; /** * Select a calendar type for the `model`. * @type {?} */ DatePickerInput.prototype.type; /** * Sets the id for the `DatePickerInput`. * @type {?} */ DatePickerInput.prototype.id; /** * Set to `true` to display a calendar icon * @type {?} */ DatePickerInput.prototype.hasIcon; /** * label content. * @type {?} */ DatePickerInput.prototype.label; /** * Sets the input's placeholder. * @type {?} */ DatePickerInput.prototype.placeholder; /** * Sets the pattern to follow. * @type {?} */ DatePickerInput.prototype.pattern; /** * Emits event notifying other classes of a value change. * @type {?} */ DatePickerInput.prototype.valueChange; /** * Set to `true` to disable the input * @type {?} */ DatePickerInput.prototype.disabled; /** * Set to `true` to display invalid state. * @type {?} */ DatePickerInput.prototype.invalid; /** * Feedback message to display when `DatepickerInput` is invalid. * @type {?} */ DatePickerInput.prototype.invalidText; /** * Sets a time picker icon for input * @type {?} */ DatePickerInput.prototype.timePicker; /** * Skeleton state. * @type {?} */ DatePickerInput.prototype.skeleton; /** * Sets the `DatepickerInput` value. * @type {?} */ DatePickerInput.prototype.value; /** @type {?} */ DatePickerInput.prototype.onTouched; /** @type {?} */ DatePickerInput.prototype.propagateChange; /** * @type {?} * @protected */ DatePickerInput.prototype.elementRef; } //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGF0ZXBpY2tlci1pbnB1dC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9Aa3VzaGtpL25nLXN1a2EvIiwic291cmNlcyI6WyJsaWIvZGF0ZXBpY2tlci1pbnB1dC9kYXRlcGlja2VyLWlucHV0LmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7O0FBQUEsT0FBTyxFQUNMLFNBQVMsRUFDVCxLQUFLLEVBQ0wsTUFBTSxFQUNOLFlBQVksRUFDWixVQUFVLEVBQ1YsV0FBVyxFQUNaLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBd0RuRCxNQUFNLE9BQU8sZUFBZTs7OztJQW9FMUIsWUFBc0IsVUFBc0I7UUFBdEIsZUFBVSxHQUFWLFVBQVUsQ0FBWTs7OztRQTlEbkMsU0FBSSxHQUFrQyxRQUFRLENBQUM7Ozs7UUFLL0MsT0FBRSxHQUFHLGNBQWMsZUFBZSxDQUFDLGVBQWUsRUFBRSxFQUFFLENBQUM7Ozs7UUFLdkQsWUFBTyxHQUFHLEtBQUssQ0FBQzs7OztRQVVoQixnQkFBVyxHQUFHLFlBQVksQ0FBQzs7OztRQUszQixZQUFPLEdBQUcsNEJBQTRCLENBQUM7Ozs7UUFLdEMsZ0JBQVcsR0FBeUIsSUFBSSxZQUFZLEVBQUUsQ0FBQzs7OztRQUt4RCxhQUFRLEdBQUcsS0FBSyxDQUFDOzs7O1FBS2pCLFlBQU8sR0FBRyxLQUFLLENBQUM7Ozs7UUFVaEIsZUFBVSxHQUFHLEtBQUssQ0FBQzs7OztRQUtuQixhQUFRLEdBQUcsS0FBSyxDQUFDOzs7O1FBS2pCLFVBQUssR0FBRyxFQUFFLENBQUM7UUEwQnBCLGNBQVM7OztRQUFjLEdBQUcsRUFBRSxHQUFHLENBQUMsRUFBQztRQUVqQyxvQkFBZTs7OztRQUFHLENBQUMsQ0FBTSxFQUFFLEVBQUUsR0FBRyxDQUFDLEVBQUM7SUExQmMsQ0FBQzs7Ozs7O0lBS2pELFFBQVEsQ0FBQyxLQUFLO1FBQ1osSUFBSSxDQUFDLEtBQUssR0FBRyxLQUFLLENBQUMsTUFBTSxDQUFDLEtBQUssQ0FBQztRQUNoQyxJQUFJLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7UUFDbEMsSUFBSSxDQUFDLGVBQWUsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7UUFDakMsSUFBSSxDQUFDLFNBQVMsRUFBRSxDQUFDO0lBQ25CLENBQUM7Ozs7O0lBRU0sVUFBVSxDQUFDLEtBQVU7UUFDMUIsSUFBSSxDQUFDLEtBQUssR0FBRyxLQUFLLENBQUM7SUFDckIsQ0FBQzs7Ozs7SUFFTSxnQkFBZ0IsQ0FBQyxFQUFPO1FBQzdCLElBQUksQ0FBQyxlQUFlLEdBQUcsRUFBRSxDQUFDO0lBQzVCLENBQUM7Ozs7O0lBRU0saUJBQWlCLENBQUMsRUFBTztRQUM5QixJQUFJLENBQUMsU0FBUyxHQUFHLEVBQUUsQ0FBQztJQUN0QixDQUFDOzs7OztJQU1NLFVBQVUsQ0FBQyxLQUFLO1FBQ3JCLE9BQU8sS0FBSyxZQUFZLFdBQVcsQ0FBQztJQUN0QyxDQUFDOztBQWpHYywrQkFBZSxHQUFHLENBQUMsQ0FBQzs7WUF2RHBDLFNBQVMsU0FBQztnQkFDVCxRQUFRLEVBQUUsd0JBQXdCO2dCQUNsQyxRQUFRLEVBQUU7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7R0EyQ1Q7Z0JBQ0QsU0FBUyxFQUFFO29CQUNUO3dCQUNFLE9BQU8sRUFBRSxpQkFBaUI7d0JBQzFCLFdBQVcsRUFBRSxlQUFlO3dCQUM1QixLQUFLLEVBQUUsSUFBSTtxQkFDWjtpQkFDRjthQUNGOzs7O1lBMURDLFVBQVU7OzttQkFpRVQsS0FBSztpQkFLTCxLQUFLO3NCQUtMLEtBQUs7b0JBS0wsS0FBSzswQkFLTCxLQUFLO3NCQUtMLEtBQUs7MEJBS0wsTUFBTTt1QkFLTixLQUFLO3NCQUtMLEtBQUs7MEJBS0wsS0FBSzt5QkFLTCxLQUFLO3VCQUtMLEtBQUs7b0JBS0wsS0FBSzs7Ozs7OztJQWpFTixnQ0FBbUM7Ozs7O0lBS25DLCtCQUF3RDs7Ozs7SUFLeEQsNkJBQWdFOzs7OztJQUtoRSxrQ0FBeUI7Ozs7O0lBS3pCLGdDQUEwQzs7Ozs7SUFLMUMsc0NBQW9DOzs7OztJQUtwQyxrQ0FBZ0Q7Ozs7O0lBS2hELHNDQUFpRTs7Ozs7SUFLakUsbUNBQTBCOzs7OztJQUsxQixrQ0FBeUI7Ozs7O0lBS3pCLHNDQUFnRDs7Ozs7SUFLaEQscUNBQTRCOzs7OztJQUs1QixtQ0FBMEI7Ozs7O0lBSzFCLGdDQUFvQjs7SUEwQnBCLG9DQUFpQzs7SUFFakMsMENBQWtDOzs7OztJQTFCdEIscUNBQWdDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ29tcG9uZW50LFxuICBJbnB1dCxcbiAgT3V0cHV0LFxuICBFdmVudEVtaXR0ZXIsXG4gIEVsZW1lbnRSZWYsXG4gIFRlbXBsYXRlUmVmXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgTkdfVkFMVUVfQUNDRVNTT1IgfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3N1a2EtZGF0ZS1waWNrZXItaW5wdXQnLFxuICB0ZW1wbGF0ZTogYFxuICAgIDxkaXYgY2xhc3M9XCJkYXRlLXBpY2tlci1pbnB1dFwiXG4gICAgICBbbmdDbGFzc109XCJ7XG4gICAgICAgICdkYXRlLXBpY2tlci0tc2luZ2xlJyA6IHR5cGUgPT09ICdzaW5nbGUnLFxuICAgICAgICAnZGF0ZS1waWNrZXItLXJhbmdlJyA6IHR5cGUgPT09ICdyYW5nZScsXG4gICAgICAgICdza2VsZXRvbicgOiBza2VsZXRvblxuICAgICAgfVwiPlxuICAgICAgPGRpdiBjbGFzcz1cImRhdGUtcGlja2VyLWlucHV0LWNvbnRhaW5lclwiPlxuICAgICAgICA8bGFiZWwgKm5nSWY9XCJsYWJlbFwiIFtmb3JdPVwiaWRcIiBjbGFzcz1cImxhYmVsXCI+XG4gICAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdJZj1cIiFpc1RlbXBsYXRlKGxhYmVsKVwiPnt7bGFiZWx9fTwvbmctY29udGFpbmVyPlxuICAgICAgICAgIDxuZy10ZW1wbGF0ZSAqbmdJZj1cImlzVGVtcGxhdGUobGFiZWwpXCIgW25nVGVtcGxhdGVPdXRsZXRdPVwibGFiZWxcIj48L25nLXRlbXBsYXRlPlxuICAgICAgICA8L2xhYmVsPlxuICAgICAgICA8ZGl2IGNsYXNzPVwiZGF0ZS1waWNrZXItaW5wdXRfX3dyYXBwZXJcIj5cbiAgICAgICAgICA8aW5wdXRcbiAgICAgICAgICAgICpuZ0lmPVwiIXNrZWxldG9uXCJcbiAgICAgICAgICAgIGF1dG9jb21wbGV0ZT1cIm9mZlwiXG4gICAgICAgICAgICB0eXBlPVwidGV4dFwiXG4gICAgICAgICAgICBjbGFzcz1cImRhdGUtcGlja2VyX19pbnB1dFwiXG4gICAgICAgICAgICBbdmFsdWVdPVwidmFsdWVcIlxuICAgICAgICAgICAgW3BhdHRlcm5dPVwicGF0dGVyblwiXG4gICAgICAgICAgICBbcGxhY2Vob2xkZXJdPVwicGxhY2Vob2xkZXJcIlxuICAgICAgICAgICAgW2lkXT0gXCJpZFwiXG4gICAgICAgICAgICBbZGlzYWJsZWRdPVwiZGlzYWJsZWRcIlxuICAgICAgICAgICAgKGNoYW5nZSk9XCJvbkNoYW5nZSgkZXZlbnQpXCIvPlxuICAgICAgICAgICAgPHN1a2EtaWNvblxuICAgICAgICAgICAgICBpY29uPVwiY2FsZW5kYXJcIlxuICAgICAgICAgICAgICBjbGFzcz1cImRhdGUtcGlja2VyX19pY29uXCJcbiAgICAgICAgICAgICAgKm5nSWY9XCIhdGltZVBpY2tlclwiXG4gICAgICAgICAgICA+XG4gICAgICAgICAgICA8L3N1a2EtaWNvbj5cbiAgICAgICAgICAgIDxzdWthLWljb25cbiAgICAgICAgICAgICAgaWNvbj1cImNsb2NrXCJcbiAgICAgICAgICAgICAgY2xhc3M9XCJkYXRlLXBpY2tlcl9faWNvblwiXG4gICAgICAgICAgICAgICpuZ0lmPVwidGltZVBpY2tlclwiXG4gICAgICAgICAgICA+XG4gICAgICAgICAgICA8L3N1a2EtaWNvbj5cbiAgICAgICAgPC9kaXY+XG4gICAgICAgIDxkaXYgKm5nSWY9XCJpbnZhbGlkXCIgY2xhc3M9XCJmb3JtLXJlcXVpcmVtZW50XCI+XG4gICAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdJZj1cIiFpc1RlbXBsYXRlKGludmFsaWRUZXh0KVwiPnt7aW52YWxpZFRleHR9fTwvbmctY29udGFpbmVyPlxuICAgICAgICAgIDxuZy10ZW1wbGF0ZSAqbmdJZj1cImlzVGVtcGxhdGUoaW52YWxpZFRleHQpXCIgW25nVGVtcGxhdGVPdXRsZXRdPVwiaW52YWxpZFRleHRcIj48L25nLXRlbXBsYXRlPlxuICAgICAgICA8L2Rpdj5cbiAgICAgIDwvZGl2PlxuICAgIDwvZGl2PlxuICBgLFxuICBwcm92aWRlcnM6IFtcbiAgICB7XG4gICAgICBwcm92aWRlOiBOR19WQUxVRV9BQ0NFU1NPUixcbiAgICAgIHVzZUV4aXN0aW5nOiBEYXRlUGlja2VySW5wdXQsXG4gICAgICBtdWx0aTogdHJ1ZVxuICAgIH1cbiAgXVxufSlcbmV4cG9ydCBjbGFzcyBEYXRlUGlja2VySW5wdXQge1xuICBwcml2YXRlIHN0YXRpYyBkYXRlUGlja2VyQ291bnQgPSAwO1xuXG4gIC8qKlxuICAgKiBTZWxlY3QgYSBjYWxlbmRhciB0eXBlIGZvciB0aGUgYG1vZGVsYC5cbiAgICovXG4gIEBJbnB1dCgpIHR5cGU6ICdzaW1wbGUnIHwgJ3NpbmdsZScgfCAncmFuZ2UnID0gJ3NpbXBsZSc7XG5cbiAgLyoqXG4gICAqIFNldHMgdGhlIGlkIGZvciB0aGUgYERhdGVQaWNrZXJJbnB1dGAuXG4gICAqL1xuICBASW5wdXQoKSBpZCA9IGBkYXRlcGlja2VyLSR7RGF0ZVBpY2tlcklucHV0LmRhdGVQaWNrZXJDb3VudCsrfWA7XG5cbiAgLyoqXG4gICAqICBTZXQgdG8gYHRydWVgIHRvIGRpc3BsYXkgYSBjYWxlbmRhciBpY29uXG4gICAqL1xuICBASW5wdXQoKSBoYXNJY29uID0gZmFsc2U7XG5cbiAgLyoqXG4gICAqIGxhYmVsIGNvbnRlbnQuXG4gICAqL1xuICBASW5wdXQoKSBsYWJlbDogc3RyaW5nIHwgVGVtcGxhdGVSZWY8YW55PjtcblxuICAvKipcbiAgICogU2V0cyB0aGUgaW5wdXQncyBwbGFjZWhvbGRlci5cbiAgICovXG4gIEBJbnB1dCgpIHBsYWNlaG9sZGVyID0gJ2RkL21tL3l5eXknO1xuXG4gIC8qKlxuICAgKiBTZXRzIHRoZSBwYXR0ZXJuIHRvIGZvbGxvdy5cbiAgICovXG4gIEBJbnB1dCgpIHBhdHRlcm4gPSAnXlxcXFxkezEsMn0vXFxcXGR7MSwyfS9cXFxcZHs0fSQnO1xuXG4gIC8qKlxuICAgKiBFbWl0cyBldmVudCBub3RpZnlpbmcgb3RoZXIgY2xhc3NlcyBvZiBhIHZhbHVlIGNoYW5nZS5cbiAgICovXG4gIEBPdXRwdXQoKSB2YWx1ZUNoYW5nZTogRXZlbnRFbWl0dGVyPHN0cmluZz4gPSBuZXcgRXZlbnRFbWl0dGVyKCk7XG5cbiAgLyoqXG4gICAqIFNldCB0byBgdHJ1ZWAgdG8gZGlzYWJsZSB0aGUgaW5wdXRcbiAgICovXG4gIEBJbnB1dCgpIGRpc2FibGVkID0gZmFsc2U7XG5cbiAgLyoqXG4gICAqIFNldCB0byBgdHJ1ZWAgdG8gZGlzcGxheSBpbnZhbGlkIHN0YXRlLlxuICAgKi9cbiAgQElucHV0KCkgaW52YWxpZCA9IGZhbHNlO1xuXG4gIC8qKlxuICAgKiBGZWVkYmFjayBtZXNzYWdlIHRvIGRpc3BsYXkgd2hlbiBgRGF0ZXBpY2tlcklucHV0YCBpcyBpbnZhbGlkLlxuICAgKi9cbiAgQElucHV0KCkgaW52YWxpZFRleHQ6IHN0cmluZyB8IFRlbXBsYXRlUmVmPGFueT47XG5cbiAgLyoqXG4gICAqIFNldHMgYSB0aW1lIHBpY2tlciBpY29uIGZvciBpbnB1dFxuICAgKi9cbiAgQElucHV0KCkgdGltZVBpY2tlciA9IGZhbHNlO1xuXG4gIC8qKlxuICAgKiBTa2VsZXRvbiBzdGF0ZS5cbiAgICovXG4gIEBJbnB1dCgpIHNrZWxldG9uID0gZmFsc2U7XG5cbiAgLyoqXG4gICAqIFNldHMgdGhlIGBEYXRlcGlja2VySW5wdXRgIHZhbHVlLlxuICAgKi9cbiAgQElucHV0KCkgdmFsdWUgPSAnJztcblxuICBjb25zdHJ1Y3Rvcihwcm90ZWN0ZWQgZWxlbWVudFJlZjogRWxlbWVudFJlZikgeyB9XG5cbiAgLyoqXG4gICAqIFNldHMgdGhlIHZhbHVlLCBtYXJrcyB0aGUgaW5wdXQgYXMgdG91Y2hlZCBhbmQgZW1pdHMgYSB2YWx1ZSBjaGFuZ2UgZXZlbnQuXG4gICAqL1xuICBvbkNoYW5nZShldmVudCkge1xuICAgIHRoaXMudmFsdWUgPSBldmVudC50YXJnZXQudmFsdWU7XG4gICAgdGhpcy52YWx1ZUNoYW5nZS5lbWl0KHRoaXMudmFsdWUpO1xuICAgIHRoaXMucHJvcGFnYXRlQ2hhbmdlKHRoaXMudmFsdWUpO1xuICAgIHRoaXMub25Ub3VjaGVkKCk7XG4gIH1cblxuICBwdWJsaWMgd3JpdGVWYWx1ZSh2YWx1ZTogYW55KSB7XG4gICAgdGhpcy52YWx1ZSA9IHZhbHVlO1xuICB9XG5cbiAgcHVibGljIHJlZ2lzdGVyT25DaGFuZ2UoZm46IGFueSkge1xuICAgIHRoaXMucHJvcGFnYXRlQ2hhbmdlID0gZm47XG4gIH1cblxuICBwdWJsaWMgcmVnaXN0ZXJPblRvdWNoZWQoZm46IGFueSkge1xuICAgIHRoaXMub25Ub3VjaGVkID0gZm47XG4gIH1cblxuICBvblRvdWNoZWQ6ICgpID0+IGFueSA9ICgpID0+IHsgfTtcblxuICBwcm9wYWdhdGVDaGFuZ2UgPSAoXzogYW55KSA9PiB7IH07XG5cbiAgcHVibGljIGlzVGVtcGxhdGUodmFsdWUpIHtcbiAgICByZXR1cm4gdmFsdWUgaW5zdGFuY2VvZiBUZW1wbGF0ZVJlZjtcbiAgfVxufVxuIl19