@fivethree/core
Version:
Fivethree Core Components
238 lines • 14.9 kB
JavaScript
/**
* @fileoverview added by tsickle
* Generated from: lib/editable-label/editable-label.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
import { Component, Input, HostBinding, forwardRef, Output, EventEmitter, ViewChild } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { trigger, transition, style, animate } from '@angular/animations';
import { IonInput } from '@ionic/angular';
import { timer } from 'rxjs';
/** @type {?} */
export var CUSTOM_EDITIABLE_LABEL_CONTROL_VALUE_ACCESSOR = {
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef((/**
* @return {?}
*/
function () { return FivEditableLabel; })),
multi: true
};
var FivEditableLabel = /** @class */ (function () {
function FivEditableLabel() {
this.type = 'label';
this.disabled = false;
this.blur = new EventEmitter();
}
Object.defineProperty(FivEditableLabel.prototype, "editing", {
get: /**
* @return {?}
*/
function () {
return this._editing;
},
set: /**
* @param {?} edit
* @return {?}
*/
function (edit) {
this._editing = edit;
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
FivEditableLabel.prototype.ngAfterContentInit = /**
* @return {?}
*/
function () {
var _this = this;
timer(0).subscribe((/**
* @return {?}
*/
function () { return (_this.internalValue = _this.value); }));
};
Object.defineProperty(FivEditableLabel.prototype, "internalValue", {
get: /**
* @return {?}
*/
function () {
return this._value;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
if (value !== this._value) {
this._value = value;
if (this.onChangeCallback) {
this.onChangeCallback(this._value);
}
}
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
FivEditableLabel.prototype.edit = /**
* @return {?}
*/
function () {
this.editing = true;
};
/**
* @return {?}
*/
FivEditableLabel.prototype.stopEdit = /**
* @return {?}
*/
function () {
this.editing = false;
};
/**
* @return {?}
*/
FivEditableLabel.prototype.onEscapeClick = /**
* @return {?}
*/
function () {
this.internalValue = this.value;
this.stopEdit();
};
/**
* @return {?}
*/
FivEditableLabel.prototype.onEnterClick = /**
* @return {?}
*/
function () {
this.value = this.internalValue;
this.stopEdit();
};
/**
* @param {?} value
* @return {?}
*/
FivEditableLabel.prototype.writeValue = /**
* @param {?} value
* @return {?}
*/
function (value) {
if (value !== undefined && value !== this._value) {
this._value = value;
}
};
/**
* @return {?}
*/
FivEditableLabel.prototype.onBlur = /**
* @return {?}
*/
function () {
this.blur.emit();
this.stopEdit();
if (this.onTouchedCallback) {
this.onTouchedCallback();
}
};
/**
* @param {?} fn
* @return {?}
*/
FivEditableLabel.prototype.registerOnChange = /**
* @param {?} fn
* @return {?}
*/
function (fn) {
this.onChangeCallback = fn;
};
/**
* @param {?} fn
* @return {?}
*/
FivEditableLabel.prototype.registerOnTouched = /**
* @param {?} fn
* @return {?}
*/
function (fn) {
this.onTouchedCallback = fn;
};
/**
* @param {?} event
* @return {?}
*/
FivEditableLabel.prototype.titleAnimDone = /**
* @param {?} event
* @return {?}
*/
function (event) {
if (event.toState === 'void') {
this.input.setFocus();
}
};
FivEditableLabel.decorators = [
{ type: Component, args: [{
selector: 'fiv-editable-label',
template: "<!-- TODO if value is empty label or title can not be clicked, show placeholder?! -->\n<ion-title *ngIf=\"type === 'title' && !editing\" (click)=\"edit()\" (@titleAnim.done)=\"titleAnimDone($event)\" [@titleAnim]>\n {{value}}</ion-title>\n<ion-label *ngIf=\"type === 'label' && !editing\" class=\"label\" (click)=\"edit()\" (@titleAnim.done)=\"titleAnimDone($event)\" [@titleAnim]>\n {{value}}</ion-label>\n<ion-input *ngIf=\"editing\" [(ngModel)]=\"internalValue\" (blur)=\"onBlur()\" (keyup.enter)=\"onEnterClick()\"\n (keyup.escape)=\"onEscapeClick()\" #input [@titleAnim] [ngClass]=\"{'title-input': type === 'title'}\">\n</ion-input>",
animations: [
trigger('titleAnim', [
transition('void => *', [
style({ opacity: '0', transform: 'translateY(-20%)' }),
animate('175ms ease-out', style({ opacity: '1', transform: 'translateY(0)' }))
])
])
],
providers: [CUSTOM_EDITIABLE_LABEL_CONTROL_VALUE_ACCESSOR],
styles: [":host{width:100%}.label{max-width:100%}:host *{pointer-events:auto}:host(.editable-label-disabled){pointer-events:none}.title-input{font-size:20px;font-weight:500;color:var(--color)}"]
}] }
];
/** @nocollapse */
FivEditableLabel.ctorParameters = function () { return []; };
FivEditableLabel.propDecorators = {
editing: [{ type: Input }],
value: [{ type: Input }],
type: [{ type: Input }],
disabled: [{ type: HostBinding, args: ['class.editable-label-disabled',] }, { type: Input }],
blur: [{ type: Output }],
input: [{ type: ViewChild, args: ['input', { static: false },] }]
};
return FivEditableLabel;
}());
export { FivEditableLabel };
if (false) {
/** @type {?} */
FivEditableLabel.prototype.value;
/** @type {?} */
FivEditableLabel.prototype.type;
/** @type {?} */
FivEditableLabel.prototype.disabled;
/** @type {?} */
FivEditableLabel.prototype.blur;
/** @type {?} */
FivEditableLabel.prototype.input;
/**
* @type {?}
* @private
*/
FivEditableLabel.prototype._editing;
/**
* @type {?}
* @private
*/
FivEditableLabel.prototype._value;
/**
* @type {?}
* @private
*/
FivEditableLabel.prototype.onTouchedCallback;
/**
* @type {?}
* @private
*/
FivEditableLabel.prototype.onChangeCallback;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZWRpdGFibGUtbGFiZWwuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vQGZpdmV0aHJlZS9jb3JlLyIsInNvdXJjZXMiOlsibGliL2VkaXRhYmxlLWxhYmVsL2VkaXRhYmxlLWxhYmVsLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7OztBQUFBLE9BQU8sRUFDTCxTQUFTLEVBQ1QsS0FBSyxFQUNMLFdBQVcsRUFDWCxVQUFVLEVBRVYsTUFBTSxFQUNOLFlBQVksRUFDWixTQUFTLEVBQ1YsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUF3QixpQkFBaUIsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBQ3pFLE9BQU8sRUFBRSxPQUFPLEVBQUUsVUFBVSxFQUFFLEtBQUssRUFBRSxPQUFPLEVBQUUsTUFBTSxxQkFBcUIsQ0FBQztBQUMxRSxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFDMUMsT0FBTyxFQUFFLEtBQUssRUFBRSxNQUFNLE1BQU0sQ0FBQzs7QUFFN0IsTUFBTSxLQUFPLDZDQUE2QyxHQUFRO0lBQ2hFLE9BQU8sRUFBRSxpQkFBaUI7SUFDMUIsV0FBVyxFQUFFLFVBQVU7OztJQUFDLGNBQU0sT0FBQSxnQkFBZ0IsRUFBaEIsQ0FBZ0IsRUFBQztJQUMvQyxLQUFLLEVBQUUsSUFBSTtDQUNaO0FBRUQ7SUEwQ0U7UUFkUyxTQUFJLEdBQXNCLE9BQU8sQ0FBQztRQUczQyxhQUFRLEdBQUcsS0FBSyxDQUFDO1FBRVAsU0FBSSxHQUFHLElBQUksWUFBWSxFQUFFLENBQUM7SUFTckIsQ0FBQztJQXZCaEIsc0JBQ0kscUNBQU87Ozs7UUFEWDtZQUVFLE9BQU8sSUFBSSxDQUFDLFFBQVEsQ0FBQztRQUN2QixDQUFDOzs7OztRQUNELFVBQVksSUFBYTtZQUN2QixJQUFJLENBQUMsUUFBUSxHQUFHLElBQUksQ0FBQztRQUN2QixDQUFDOzs7T0FIQTs7OztJQXNCRCw2Q0FBa0I7OztJQUFsQjtRQUFBLGlCQUVDO1FBREMsS0FBSyxDQUFDLENBQUMsQ0FBQyxDQUFDLFNBQVM7OztRQUFDLGNBQU0sT0FBQSxDQUFDLEtBQUksQ0FBQyxhQUFhLEdBQUcsS0FBSSxDQUFDLEtBQUssQ0FBQyxFQUFqQyxDQUFpQyxFQUFDLENBQUM7SUFDOUQsQ0FBQztJQUVELHNCQUFJLDJDQUFhOzs7O1FBUWpCO1lBQ0UsT0FBTyxJQUFJLENBQUMsTUFBTSxDQUFDO1FBQ3JCLENBQUM7Ozs7O1FBVkQsVUFBa0IsS0FBYTtZQUM3QixJQUFJLEtBQUssS0FBSyxJQUFJLENBQUMsTUFBTSxFQUFFO2dCQUN6QixJQUFJLENBQUMsTUFBTSxHQUFHLEtBQUssQ0FBQztnQkFDcEIsSUFBSSxJQUFJLENBQUMsZ0JBQWdCLEVBQUU7b0JBQ3pCLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLENBQUM7aUJBQ3BDO2FBQ0Y7UUFDSCxDQUFDOzs7T0FBQTs7OztJQUtELCtCQUFJOzs7SUFBSjtRQUNFLElBQUksQ0FBQyxPQUFPLEdBQUcsSUFBSSxDQUFDO0lBQ3RCLENBQUM7Ozs7SUFFRCxtQ0FBUTs7O0lBQVI7UUFDRSxJQUFJLENBQUMsT0FBTyxHQUFHLEtBQUssQ0FBQztJQUN2QixDQUFDOzs7O0lBRUQsd0NBQWE7OztJQUFiO1FBQ0UsSUFBSSxDQUFDLGFBQWEsR0FBRyxJQUFJLENBQUMsS0FBSyxDQUFDO1FBQ2hDLElBQUksQ0FBQyxRQUFRLEVBQUUsQ0FBQztJQUNsQixDQUFDOzs7O0lBRUQsdUNBQVk7OztJQUFaO1FBQ0UsSUFBSSxDQUFDLEtBQUssR0FBRyxJQUFJLENBQUMsYUFBYSxDQUFDO1FBQ2hDLElBQUksQ0FBQyxRQUFRLEVBQUUsQ0FBQztJQUNsQixDQUFDOzs7OztJQUVELHFDQUFVOzs7O0lBQVYsVUFBVyxLQUFVO1FBQ25CLElBQUksS0FBSyxLQUFLLFNBQVMsSUFBSSxLQUFLLEtBQUssSUFBSSxDQUFDLE1BQU0sRUFBRTtZQUNoRCxJQUFJLENBQUMsTUFBTSxHQUFHLEtBQUssQ0FBQztTQUNyQjtJQUNILENBQUM7Ozs7SUFFRCxpQ0FBTTs7O0lBQU47UUFDRSxJQUFJLENBQUMsSUFBSSxDQUFDLElBQUksRUFBRSxDQUFDO1FBQ2pCLElBQUksQ0FBQyxRQUFRLEVBQUUsQ0FBQztRQUNoQixJQUFJLElBQUksQ0FBQyxpQkFBaUIsRUFBRTtZQUMxQixJQUFJLENBQUMsaUJBQWlCLEVBQUUsQ0FBQztTQUMxQjtJQUNILENBQUM7Ozs7O0lBRUQsMkNBQWdCOzs7O0lBQWhCLFVBQWlCLEVBQU87UUFDdEIsSUFBSSxDQUFDLGdCQUFnQixHQUFHLEVBQUUsQ0FBQztJQUM3QixDQUFDOzs7OztJQUVELDRDQUFpQjs7OztJQUFqQixVQUFrQixFQUFPO1FBQ3ZCLElBQUksQ0FBQyxpQkFBaUIsR0FBRyxFQUFFLENBQUM7SUFDOUIsQ0FBQzs7Ozs7SUFFRCx3Q0FBYTs7OztJQUFiLFVBQWMsS0FBSztRQUNqQixJQUFJLEtBQUssQ0FBQyxPQUFPLEtBQUssTUFBTSxFQUFFO1lBQzVCLElBQUksQ0FBQyxLQUFLLENBQUMsUUFBUSxFQUFFLENBQUM7U0FDdkI7SUFDSCxDQUFDOztnQkF4R0YsU0FBUyxTQUFDO29CQUNULFFBQVEsRUFBRSxvQkFBb0I7b0JBQzlCLG1wQkFBOEM7b0JBRTlDLFVBQVUsRUFBRTt3QkFDVixPQUFPLENBQUMsV0FBVyxFQUFFOzRCQUNuQixVQUFVLENBQUMsV0FBVyxFQUFFO2dDQUN0QixLQUFLLENBQUMsRUFBRSxPQUFPLEVBQUUsR0FBRyxFQUFFLFNBQVMsRUFBRSxrQkFBa0IsRUFBRSxDQUFDO2dDQUN0RCxPQUFPLENBQ0wsZ0JBQWdCLEVBQ2hCLEtBQUssQ0FBQyxFQUFFLE9BQU8sRUFBRSxHQUFHLEVBQUUsU0FBUyxFQUFFLGVBQWUsRUFBRSxDQUFDLENBQ3BEOzZCQUNGLENBQUM7eUJBQ0gsQ0FBQztxQkFDSDtvQkFDRCxTQUFTLEVBQUUsQ0FBQyw2Q0FBNkMsQ0FBQzs7aUJBQzNEOzs7OzswQkFHRSxLQUFLO3dCQVFMLEtBQUs7dUJBQ0wsS0FBSzsyQkFDTCxXQUFXLFNBQUMsK0JBQStCLGNBQzNDLEtBQUs7dUJBR0wsTUFBTTt3QkFFTixTQUFTLFNBQUMsT0FBTyxFQUFFLEVBQUUsTUFBTSxFQUFFLEtBQUssRUFBRTs7SUFzRXZDLHVCQUFDO0NBQUEsQUF6R0QsSUF5R0M7U0F4RlksZ0JBQWdCOzs7SUFVM0IsaUNBQXVCOztJQUN2QixnQ0FBMkM7O0lBQzNDLG9DQUVpQjs7SUFFakIsZ0NBQW9DOztJQUVwQyxpQ0FBdUQ7Ozs7O0lBRXZELG9DQUEwQjs7Ozs7SUFDMUIsa0NBQXVCOzs7OztJQUN2Qiw2Q0FBb0M7Ozs7O0lBQ3BDLDRDQUF5QyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIENvbXBvbmVudCxcbiAgSW5wdXQsXG4gIEhvc3RCaW5kaW5nLFxuICBmb3J3YXJkUmVmLFxuICBBZnRlckNvbnRlbnRJbml0LFxuICBPdXRwdXQsXG4gIEV2ZW50RW1pdHRlcixcbiAgVmlld0NoaWxkXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQ29udHJvbFZhbHVlQWNjZXNzb3IsIE5HX1ZBTFVFX0FDQ0VTU09SIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuaW1wb3J0IHsgdHJpZ2dlciwgdHJhbnNpdGlvbiwgc3R5bGUsIGFuaW1hdGUgfSBmcm9tICdAYW5ndWxhci9hbmltYXRpb25zJztcbmltcG9ydCB7IElvbklucHV0IH0gZnJvbSAnQGlvbmljL2FuZ3VsYXInO1xuaW1wb3J0IHsgdGltZXIgfSBmcm9tICdyeGpzJztcblxuZXhwb3J0IGNvbnN0IENVU1RPTV9FRElUSUFCTEVfTEFCRUxfQ09OVFJPTF9WQUxVRV9BQ0NFU1NPUjogYW55ID0ge1xuICBwcm92aWRlOiBOR19WQUxVRV9BQ0NFU1NPUixcbiAgdXNlRXhpc3Rpbmc6IGZvcndhcmRSZWYoKCkgPT4gRml2RWRpdGFibGVMYWJlbCksXG4gIG11bHRpOiB0cnVlXG59O1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdmaXYtZWRpdGFibGUtbGFiZWwnLFxuICB0ZW1wbGF0ZVVybDogJy4vZWRpdGFibGUtbGFiZWwuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9lZGl0YWJsZS1sYWJlbC5jb21wb25lbnQuc2NzcyddLFxuICBhbmltYXRpb25zOiBbXG4gICAgdHJpZ2dlcigndGl0bGVBbmltJywgW1xuICAgICAgdHJhbnNpdGlvbigndm9pZCA9PiAqJywgW1xuICAgICAgICBzdHlsZSh7IG9wYWNpdHk6ICcwJywgdHJhbnNmb3JtOiAndHJhbnNsYXRlWSgtMjAlKScgfSksXG4gICAgICAgIGFuaW1hdGUoXG4gICAgICAgICAgJzE3NW1zIGVhc2Utb3V0JyxcbiAgICAgICAgICBzdHlsZSh7IG9wYWNpdHk6ICcxJywgdHJhbnNmb3JtOiAndHJhbnNsYXRlWSgwKScgfSlcbiAgICAgICAgKVxuICAgICAgXSlcbiAgICBdKVxuICBdLFxuICBwcm92aWRlcnM6IFtDVVNUT01fRURJVElBQkxFX0xBQkVMX0NPTlRST0xfVkFMVUVfQUNDRVNTT1JdXG59KVxuZXhwb3J0IGNsYXNzIEZpdkVkaXRhYmxlTGFiZWxcbiAgaW1wbGVtZW50cyBBZnRlckNvbnRlbnRJbml0LCBDb250cm9sVmFsdWVBY2Nlc3NvciB7XG4gIEBJbnB1dCgpXG4gIGdldCBlZGl0aW5nKCk6IGJvb2xlYW4ge1xuICAgIHJldHVybiB0aGlzLl9lZGl0aW5nO1xuICB9XG4gIHNldCBlZGl0aW5nKGVkaXQ6IGJvb2xlYW4pIHtcbiAgICB0aGlzLl9lZGl0aW5nID0gZWRpdDtcbiAgfVxuXG4gIEBJbnB1dCgpIHZhbHVlOiBzdHJpbmc7XG4gIEBJbnB1dCgpIHR5cGU6ICd0aXRsZScgfCAnbGFiZWwnID0gJ2xhYmVsJztcbiAgQEhvc3RCaW5kaW5nKCdjbGFzcy5lZGl0YWJsZS1sYWJlbC1kaXNhYmxlZCcpXG4gIEBJbnB1dCgpXG4gIGRpc2FibGVkID0gZmFsc2U7XG5cbiAgQE91dHB1dCgpIGJsdXIgPSBuZXcgRXZlbnRFbWl0dGVyKCk7XG5cbiAgQFZpZXdDaGlsZCgnaW5wdXQnLCB7IHN0YXRpYzogZmFsc2UgfSkgaW5wdXQ6IElvbklucHV0O1xuXG4gIHByaXZhdGUgX2VkaXRpbmc6IGJvb2xlYW47XG4gIHByaXZhdGUgX3ZhbHVlOiBzdHJpbmc7XG4gIHByaXZhdGUgb25Ub3VjaGVkQ2FsbGJhY2s6ICgpID0+IHt9O1xuICBwcml2YXRlIG9uQ2hhbmdlQ2FsbGJhY2s6IChfOiBhbnkpID0+IHt9O1xuXG4gIGNvbnN0cnVjdG9yKCkge31cblxuICBuZ0FmdGVyQ29udGVudEluaXQoKSB7XG4gICAgdGltZXIoMCkuc3Vic2NyaWJlKCgpID0+ICh0aGlzLmludGVybmFsVmFsdWUgPSB0aGlzLnZhbHVlKSk7XG4gIH1cblxuICBzZXQgaW50ZXJuYWxWYWx1ZSh2YWx1ZTogc3RyaW5nKSB7XG4gICAgaWYgKHZhbHVlICE9PSB0aGlzLl92YWx1ZSkge1xuICAgICAgdGhpcy5fdmFsdWUgPSB2YWx1ZTtcbiAgICAgIGlmICh0aGlzLm9uQ2hhbmdlQ2FsbGJhY2spIHtcbiAgICAgICAgdGhpcy5vbkNoYW5nZUNhbGxiYWNrKHRoaXMuX3ZhbHVlKTtcbiAgICAgIH1cbiAgICB9XG4gIH1cbiAgZ2V0IGludGVybmFsVmFsdWUoKTogc3RyaW5nIHtcbiAgICByZXR1cm4gdGhpcy5fdmFsdWU7XG4gIH1cblxuICBlZGl0KCkge1xuICAgIHRoaXMuZWRpdGluZyA9IHRydWU7XG4gIH1cblxuICBzdG9wRWRpdCgpIHtcbiAgICB0aGlzLmVkaXRpbmcgPSBmYWxzZTtcbiAgfVxuXG4gIG9uRXNjYXBlQ2xpY2soKSB7XG4gICAgdGhpcy5pbnRlcm5hbFZhbHVlID0gdGhpcy52YWx1ZTtcbiAgICB0aGlzLnN0b3BFZGl0KCk7XG4gIH1cblxuICBvbkVudGVyQ2xpY2soKSB7XG4gICAgdGhpcy52YWx1ZSA9IHRoaXMuaW50ZXJuYWxWYWx1ZTtcbiAgICB0aGlzLnN0b3BFZGl0KCk7XG4gIH1cblxuICB3cml0ZVZhbHVlKHZhbHVlOiBhbnkpIHtcbiAgICBpZiAodmFsdWUgIT09IHVuZGVmaW5lZCAmJiB2YWx1ZSAhPT0gdGhpcy5fdmFsdWUpIHtcbiAgICAgIHRoaXMuX3ZhbHVlID0gdmFsdWU7XG4gICAgfVxuICB9XG5cbiAgb25CbHVyKCkge1xuICAgIHRoaXMuYmx1ci5lbWl0KCk7XG4gICAgdGhpcy5zdG9wRWRpdCgpO1xuICAgIGlmICh0aGlzLm9uVG91Y2hlZENhbGxiYWNrKSB7XG4gICAgICB0aGlzLm9uVG91Y2hlZENhbGxiYWNrKCk7XG4gICAgfVxuICB9XG5cbiAgcmVnaXN0ZXJPbkNoYW5nZShmbjogYW55KSB7XG4gICAgdGhpcy5vbkNoYW5nZUNhbGxiYWNrID0gZm47XG4gIH1cblxuICByZWdpc3Rlck9uVG91Y2hlZChmbjogYW55KSB7XG4gICAgdGhpcy5vblRvdWNoZWRDYWxsYmFjayA9IGZuO1xuICB9XG5cbiAgdGl0bGVBbmltRG9uZShldmVudCkge1xuICAgIGlmIChldmVudC50b1N0YXRlID09PSAndm9pZCcpIHtcbiAgICAgIHRoaXMuaW5wdXQuc2V0Rm9jdXMoKTtcbiAgICB9XG4gIH1cbn1cbiJdfQ==