@fivethree/core
Version:
Fivethree Core Components
193 lines • 13.2 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 const CUSTOM_EDITIABLE_LABEL_CONTROL_VALUE_ACCESSOR = {
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef((/**
* @return {?}
*/
() => FivEditableLabel)),
multi: true
};
export class FivEditableLabel {
constructor() {
this.type = 'label';
this.disabled = false;
this.blur = new EventEmitter();
}
/**
* @return {?}
*/
get editing() {
return this._editing;
}
/**
* @param {?} edit
* @return {?}
*/
set editing(edit) {
this._editing = edit;
}
/**
* @return {?}
*/
ngAfterContentInit() {
timer(0).subscribe((/**
* @return {?}
*/
() => (this.internalValue = this.value)));
}
/**
* @param {?} value
* @return {?}
*/
set internalValue(value) {
if (value !== this._value) {
this._value = value;
if (this.onChangeCallback) {
this.onChangeCallback(this._value);
}
}
}
/**
* @return {?}
*/
get internalValue() {
return this._value;
}
/**
* @return {?}
*/
edit() {
this.editing = true;
}
/**
* @return {?}
*/
stopEdit() {
this.editing = false;
}
/**
* @return {?}
*/
onEscapeClick() {
this.internalValue = this.value;
this.stopEdit();
}
/**
* @return {?}
*/
onEnterClick() {
this.value = this.internalValue;
this.stopEdit();
}
/**
* @param {?} value
* @return {?}
*/
writeValue(value) {
if (value !== undefined && value !== this._value) {
this._value = value;
}
}
/**
* @return {?}
*/
onBlur() {
this.blur.emit();
this.stopEdit();
if (this.onTouchedCallback) {
this.onTouchedCallback();
}
}
/**
* @param {?} fn
* @return {?}
*/
registerOnChange(fn) {
this.onChangeCallback = fn;
}
/**
* @param {?} fn
* @return {?}
*/
registerOnTouched(fn) {
this.onTouchedCallback = fn;
}
/**
* @param {?} event
* @return {?}
*/
titleAnimDone(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 = () => [];
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 },] }]
};
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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZWRpdGFibGUtbGFiZWwuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vQGZpdmV0aHJlZS9jb3JlLyIsInNvdXJjZXMiOlsibGliL2VkaXRhYmxlLWxhYmVsL2VkaXRhYmxlLWxhYmVsLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7OztBQUFBLE9BQU8sRUFDTCxTQUFTLEVBQ1QsS0FBSyxFQUNMLFdBQVcsRUFDWCxVQUFVLEVBRVYsTUFBTSxFQUNOLFlBQVksRUFDWixTQUFTLEVBQ1YsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUF3QixpQkFBaUIsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBQ3pFLE9BQU8sRUFBRSxPQUFPLEVBQUUsVUFBVSxFQUFFLEtBQUssRUFBRSxPQUFPLEVBQUUsTUFBTSxxQkFBcUIsQ0FBQztBQUMxRSxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFDMUMsT0FBTyxFQUFFLEtBQUssRUFBRSxNQUFNLE1BQU0sQ0FBQzs7QUFFN0IsTUFBTSxPQUFPLDZDQUE2QyxHQUFRO0lBQ2hFLE9BQU8sRUFBRSxpQkFBaUI7SUFDMUIsV0FBVyxFQUFFLFVBQVU7OztJQUFDLEdBQUcsRUFBRSxDQUFDLGdCQUFnQixFQUFDO0lBQy9DLEtBQUssRUFBRSxJQUFJO0NBQ1o7QUFtQkQsTUFBTSxPQUFPLGdCQUFnQjtJQXlCM0I7UUFkUyxTQUFJLEdBQXNCLE9BQU8sQ0FBQztRQUczQyxhQUFRLEdBQUcsS0FBSyxDQUFDO1FBRVAsU0FBSSxHQUFHLElBQUksWUFBWSxFQUFFLENBQUM7SUFTckIsQ0FBQzs7OztJQXZCaEIsSUFDSSxPQUFPO1FBQ1QsT0FBTyxJQUFJLENBQUMsUUFBUSxDQUFDO0lBQ3ZCLENBQUM7Ozs7O0lBQ0QsSUFBSSxPQUFPLENBQUMsSUFBYTtRQUN2QixJQUFJLENBQUMsUUFBUSxHQUFHLElBQUksQ0FBQztJQUN2QixDQUFDOzs7O0lBbUJELGtCQUFrQjtRQUNoQixL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QUEyQzs7SUFDM0Msb0NBRWlCOztJQUVqQixnQ0FBb0M7O0lBRXBDLGlDQUF1RDs7Ozs7SUFFdkQsb0NBQTBCOzs7OztJQUMxQixrQ0FBdUI7Ozs7O0lBQ3ZCLDZDQUFvQzs7Ozs7SUFDcEMsNENBQXlDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ29tcG9uZW50LFxuICBJbnB1dCxcbiAgSG9zdEJpbmRpbmcsXG4gIGZvcndhcmRSZWYsXG4gIEFmdGVyQ29udGVudEluaXQsXG4gIE91dHB1dCxcbiAgRXZlbnRFbWl0dGVyLFxuICBWaWV3Q2hpbGRcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBDb250cm9sVmFsdWVBY2Nlc3NvciwgTkdfVkFMVUVfQUNDRVNTT1IgfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5pbXBvcnQgeyB0cmlnZ2VyLCB0cmFuc2l0aW9uLCBzdHlsZSwgYW5pbWF0ZSB9IGZyb20gJ0Bhbmd1bGFyL2FuaW1hdGlvbnMnO1xuaW1wb3J0IHsgSW9uSW5wdXQgfSBmcm9tICdAaW9uaWMvYW5ndWxhcic7XG5pbXBvcnQgeyB0aW1lciB9IGZyb20gJ3J4anMnO1xuXG5leHBvcnQgY29uc3QgQ1VTVE9NX0VESVRJQUJMRV9MQUJFTF9DT05UUk9MX1ZBTFVFX0FDQ0VTU09SOiBhbnkgPSB7XG4gIHByb3ZpZGU6IE5HX1ZBTFVFX0FDQ0VTU09SLFxuICB1c2VFeGlzdGluZzogZm9yd2FyZFJlZigoKSA9PiBGaXZFZGl0YWJsZUxhYmVsKSxcbiAgbXVsdGk6IHRydWVcbn07XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2Zpdi1lZGl0YWJsZS1sYWJlbCcsXG4gIHRlbXBsYXRlVXJsOiAnLi9lZGl0YWJsZS1sYWJlbC5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL2VkaXRhYmxlLWxhYmVsLmNvbXBvbmVudC5zY3NzJ10sXG4gIGFuaW1hdGlvbnM6IFtcbiAgICB0cmlnZ2VyKCd0aXRsZUFuaW0nLCBbXG4gICAgICB0cmFuc2l0aW9uKCd2b2lkID0+IConLCBbXG4gICAgICAgIHN0eWxlKHsgb3BhY2l0eTogJzAnLCB0cmFuc2Zvcm06ICd0cmFuc2xhdGVZKC0yMCUpJyB9KSxcbiAgICAgICAgYW5pbWF0ZShcbiAgICAgICAgICAnMTc1bXMgZWFzZS1vdXQnLFxuICAgICAgICAgIHN0eWxlKHsgb3BhY2l0eTogJzEnLCB0cmFuc2Zvcm06ICd0cmFuc2xhdGVZKDApJyB9KVxuICAgICAgICApXG4gICAgICBdKVxuICAgIF0pXG4gIF0sXG4gIHByb3ZpZGVyczogW0NVU1RPTV9FRElUSUFCTEVfTEFCRUxfQ09OVFJPTF9WQUxVRV9BQ0NFU1NPUl1cbn0pXG5leHBvcnQgY2xhc3MgRml2RWRpdGFibGVMYWJlbFxuICBpbXBsZW1lbnRzIEFmdGVyQ29udGVudEluaXQsIENvbnRyb2xWYWx1ZUFjY2Vzc29yIHtcbiAgQElucHV0KClcbiAgZ2V0IGVkaXRpbmcoKTogYm9vbGVhbiB7XG4gICAgcmV0dXJuIHRoaXMuX2VkaXRpbmc7XG4gIH1cbiAgc2V0IGVkaXRpbmcoZWRpdDogYm9vbGVhbikge1xuICAgIHRoaXMuX2VkaXRpbmcgPSBlZGl0O1xuICB9XG5cbiAgQElucHV0KCkgdmFsdWU6IHN0cmluZztcbiAgQElucHV0KCkgdHlwZTogJ3RpdGxlJyB8ICdsYWJlbCcgPSAnbGFiZWwnO1xuICBASG9zdEJpbmRpbmcoJ2NsYXNzLmVkaXRhYmxlLWxhYmVsLWRpc2FibGVkJylcbiAgQElucHV0KClcbiAgZGlzYWJsZWQgPSBmYWxzZTtcblxuICBAT3V0cHV0KCkgYmx1ciA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcblxuICBAVmlld0NoaWxkKCdpbnB1dCcsIHsgc3RhdGljOiBmYWxzZSB9KSBpbnB1dDogSW9uSW5wdXQ7XG5cbiAgcHJpdmF0ZSBfZWRpdGluZzogYm9vbGVhbjtcbiAgcHJpdmF0ZSBfdmFsdWU6IHN0cmluZztcbiAgcHJpdmF0ZSBvblRvdWNoZWRDYWxsYmFjazogKCkgPT4ge307XG4gIHByaXZhdGUgb25DaGFuZ2VDYWxsYmFjazogKF86IGFueSkgPT4ge307XG5cbiAgY29uc3RydWN0b3IoKSB7fVxuXG4gIG5nQWZ0ZXJDb250ZW50SW5pdCgpIHtcbiAgICB0aW1lcigwKS5zdWJzY3JpYmUoKCkgPT4gKHRoaXMuaW50ZXJuYWxWYWx1ZSA9IHRoaXMudmFsdWUpKTtcbiAgfVxuXG4gIHNldCBpbnRlcm5hbFZhbHVlKHZhbHVlOiBzdHJpbmcpIHtcbiAgICBpZiAodmFsdWUgIT09IHRoaXMuX3ZhbHVlKSB7XG4gICAgICB0aGlzLl92YWx1ZSA9IHZhbHVlO1xuICAgICAgaWYgKHRoaXMub25DaGFuZ2VDYWxsYmFjaykge1xuICAgICAgICB0aGlzLm9uQ2hhbmdlQ2FsbGJhY2sodGhpcy5fdmFsdWUpO1xuICAgICAgfVxuICAgIH1cbiAgfVxuICBnZXQgaW50ZXJuYWxWYWx1ZSgpOiBzdHJpbmcge1xuICAgIHJldHVybiB0aGlzLl92YWx1ZTtcbiAgfVxuXG4gIGVkaXQoKSB7XG4gICAgdGhpcy5lZGl0aW5nID0gdHJ1ZTtcbiAgfVxuXG4gIHN0b3BFZGl0KCkge1xuICAgIHRoaXMuZWRpdGluZyA9IGZhbHNlO1xuICB9XG5cbiAgb25Fc2NhcGVDbGljaygpIHtcbiAgICB0aGlzLmludGVybmFsVmFsdWUgPSB0aGlzLnZhbHVlO1xuICAgIHRoaXMuc3RvcEVkaXQoKTtcbiAgfVxuXG4gIG9uRW50ZXJDbGljaygpIHtcbiAgICB0aGlzLnZhbHVlID0gdGhpcy5pbnRlcm5hbFZhbHVlO1xuICAgIHRoaXMuc3RvcEVkaXQoKTtcbiAgfVxuXG4gIHdyaXRlVmFsdWUodmFsdWU6IGFueSkge1xuICAgIGlmICh2YWx1ZSAhPT0gdW5kZWZpbmVkICYmIHZhbHVlICE9PSB0aGlzLl92YWx1ZSkge1xuICAgICAgdGhpcy5fdmFsdWUgPSB2YWx1ZTtcbiAgICB9XG4gIH1cblxuICBvbkJsdXIoKSB7XG4gICAgdGhpcy5ibHVyLmVtaXQoKTtcbiAgICB0aGlzLnN0b3BFZGl0KCk7XG4gICAgaWYgKHRoaXMub25Ub3VjaGVkQ2FsbGJhY2spIHtcbiAgICAgIHRoaXMub25Ub3VjaGVkQ2FsbGJhY2soKTtcbiAgICB9XG4gIH1cblxuICByZWdpc3Rlck9uQ2hhbmdlKGZuOiBhbnkpIHtcbiAgICB0aGlzLm9uQ2hhbmdlQ2FsbGJhY2sgPSBmbjtcbiAgfVxuXG4gIHJlZ2lzdGVyT25Ub3VjaGVkKGZuOiBhbnkpIHtcbiAgICB0aGlzLm9uVG91Y2hlZENhbGxiYWNrID0gZm47XG4gIH1cblxuICB0aXRsZUFuaW1Eb25lKGV2ZW50KSB7XG4gICAgaWYgKGV2ZW50LnRvU3RhdGUgPT09ICd2b2lkJykge1xuICAgICAgdGhpcy5pbnB1dC5zZXRGb2N1cygpO1xuICAgIH1cbiAgfVxufVxuIl19