@alauda-fe/common
Version:
Alauda frontend team common codes.
102 lines • 13.4 kB
JavaScript
import { InputComponent } from '@alauda/ui';
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, Output, ViewChild, } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@alauda/ui";
import * as i3 from "@angular/forms";
import * as i4 from "../disabled-container/disabled-container.component";
const _c0 = ["textInput"];
const _c1 = ["textPlaceholder"];
const _c2 = a0 => ({ height: a0 });
const TEXTAREA_BASE_HEIGHT = 'var(--aui-inline-height-m)';
export class EditableTextComponent {
set value(val) {
this.textModel = val ? val.trim() : '';
}
constructor(cdr) {
this.cdr = cdr;
this.textChange = new EventEmitter();
this.editMode = false;
this.inputHeight$$ = new BehaviorSubject(TEXTAREA_BASE_HEIGHT);
this.focused = false;
this.textModel = '';
}
modelChange(text) {
this.textModel = text;
}
edit() {
this.editMode = true;
}
blur() {
this.editMode = false;
this.focused = false;
this.textChange.emit(this.textModel.trim());
}
ngAfterViewChecked() {
if (!this.inputEl) {
this.inputEl = this.textInput.elementRef.nativeElement;
}
if (!this.focused) {
this.inputEl.focus();
}
this.textPlaceholder.nativeElement.setAttribute('width', `${this.inputEl.offsetWidth}px`);
this.inputHeight$$.next(`${this.textPlaceholder.nativeElement.offsetHeight}px`);
this.cdr.detectChanges();
}
static { this.ɵfac = function EditableTextComponent_Factory(t) { return new (t || EditableTextComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); }; }
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: EditableTextComponent, selectors: [["acl-editable-text"]], viewQuery: function EditableTextComponent_Query(rf, ctx) { if (rf & 1) {
i0.ɵɵviewQuery(_c0, 5);
i0.ɵɵviewQuery(_c1, 5);
} if (rf & 2) {
let _t;
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.textInput = _t.first);
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.textPlaceholder = _t.first);
} }, inputs: { value: "value", isAllowed: "isAllowed" }, outputs: { textChange: "textChange" }, decls: 12, vars: 12, consts: [["textInput", ""], ["textPlaceholder", ""], ["aui-input", "", "name", "text", 1, "edit-input", 3, "ngModelChange", "blur", "ngModel", "hidden", "ngStyle"], [1, "text-placeholder"], [3, "hidden"], [1, "text-display"], [3, "isAllowed"], ["aui-button", "text", "size", "small", 3, "click", "square"], ["icon", "pencil"]], template: function EditableTextComponent_Template(rf, ctx) { if (rf & 1) {
const _r1 = i0.ɵɵgetCurrentView();
i0.ɵɵelementStart(0, "textarea", 2, 0);
i0.ɵɵpipe(2, "async");
i0.ɵɵlistener("ngModelChange", function EditableTextComponent_Template_textarea_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.modelChange($event)); })("blur", function EditableTextComponent_Template_textarea_blur_0_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.blur()); });
i0.ɵɵelementEnd();
i0.ɵɵelementStart(3, "div", 3, 1);
i0.ɵɵtext(5);
i0.ɵɵelementEnd();
i0.ɵɵelementStart(6, "div", 4)(7, "span", 5);
i0.ɵɵtext(8);
i0.ɵɵelementEnd();
i0.ɵɵelementStart(9, "acl-disabled-container", 6)(10, "button", 7);
i0.ɵɵlistener("click", function EditableTextComponent_Template_button_click_10_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.edit()); });
i0.ɵɵelement(11, "aui-icon", 8);
i0.ɵɵelementEnd()()();
} if (rf & 2) {
i0.ɵɵproperty("ngModel", ctx.textModel)("hidden", !ctx.editMode)("ngStyle", i0.ɵɵpureFunction1(10, _c2, i0.ɵɵpipeBind1(2, 8, ctx.inputHeight$$)));
i0.ɵɵadvance(5);
i0.ɵɵtextInterpolate1(" ", ctx.textModel, "\n");
i0.ɵɵadvance();
i0.ɵɵproperty("hidden", ctx.editMode);
i0.ɵɵadvance(2);
i0.ɵɵtextInterpolate1(" ", ctx.textModel.trim(), " ");
i0.ɵɵadvance();
i0.ɵɵproperty("isAllowed", ctx.isAllowed);
i0.ɵɵadvance();
i0.ɵɵproperty("square", true);
} }, dependencies: [i1.NgStyle, i2.IconComponent, i2.ButtonComponent, i2.InputComponent, i3.DefaultValueAccessor, i3.NgControlStatus, i3.NgModel, i4.DisabledContainerComponent, i1.AsyncPipe], styles: ["[_nghost-%COMP%]{position:relative}.text-placeholder[_ngcontent-%COMP%]{white-space:pre-line;word-break:break-all;padding:var(--aui-inline-padding-xxs) var(--aui-inline-padding-xs);border:1px solid transparent;position:absolute;visibility:hidden;z-index:-999}.text-display[_ngcontent-%COMP%]{white-space:pre-line;word-break:break-all}"], changeDetection: 0 }); }
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(EditableTextComponent, [{
type: Component,
args: [{ selector: 'acl-editable-text', changeDetection: ChangeDetectionStrategy.OnPush, template: "<textarea\n aui-input\n class=\"edit-input\"\n name=\"text\"\n [ngModel]=\"textModel\"\n [hidden]=\"!editMode\"\n (ngModelChange)=\"modelChange($event)\"\n (blur)=\"blur()\"\n [ngStyle]=\"{ height: (inputHeight$$ | async) }\"\n #textInput\n></textarea>\n<div\n class=\"text-placeholder\"\n #textPlaceholder\n>\n {{ textModel }}\n</div>\n<div [hidden]=\"editMode\">\n <span class=\"text-display\">\n {{ textModel.trim() }}\n </span>\n <acl-disabled-container [isAllowed]=\"isAllowed\">\n <button\n aui-button=\"text\"\n [square]=\"true\"\n size=\"small\"\n (click)=\"edit()\"\n >\n <aui-icon icon=\"pencil\"></aui-icon>\n </button>\n </acl-disabled-container>\n</div>\n", styles: [":host{position:relative}.text-placeholder{white-space:pre-line;word-break:break-all;padding:var(--aui-inline-padding-xxs) var(--aui-inline-padding-xs);border:1px solid transparent;position:absolute;visibility:hidden;z-index:-999}.text-display{white-space:pre-line;word-break:break-all}\n"] }]
}], () => [{ type: i0.ChangeDetectorRef }], { textInput: [{
type: ViewChild,
args: ['textInput']
}], textPlaceholder: [{
type: ViewChild,
args: ['textPlaceholder']
}], value: [{
type: Input
}], isAllowed: [{
type: Input
}], textChange: [{
type: Output
}] }); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(EditableTextComponent, { className: "EditableTextComponent" }); })();
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vbGlicy9jb21tb24vc3JjL2VkaXRhYmxlLXRleHQvY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vbGlicy9jb21tb24vc3JjL2VkaXRhYmxlLXRleHQvdGVtcGxhdGUuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsY0FBYyxFQUFFLE1BQU0sWUFBWSxDQUFDO0FBQzVDLE9BQU8sRUFFTCx1QkFBdUIsRUFDdkIsaUJBQWlCLEVBQ2pCLFNBQVMsRUFDVCxVQUFVLEVBQ1YsWUFBWSxFQUNaLEtBQUssRUFDTCxNQUFNLEVBQ04sU0FBUyxHQUNWLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSxNQUFNLENBQUM7Ozs7Ozs7OztBQUV2QyxNQUFNLG9CQUFvQixHQUFHLDRCQUE0QixDQUFDO0FBUTFELE1BQU0sT0FBTyxxQkFBcUI7SUFJaEMsSUFDSSxLQUFLLENBQUMsR0FBVztRQUNuQixJQUFJLENBQUMsU0FBUyxHQUFHLEdBQUcsQ0FBQyxDQUFDLENBQUMsR0FBRyxDQUFDLElBQUksRUFBRSxDQUFDLENBQUMsQ0FBQyxFQUFFLENBQUM7SUFDekMsQ0FBQztJQWlCRCxZQUE2QixHQUFzQjtRQUF0QixRQUFHLEdBQUgsR0FBRyxDQUFtQjtRQVhuRCxlQUFVLEdBQUcsSUFBSSxZQUFZLEVBQVUsQ0FBQztRQUV4QyxhQUFRLEdBQUcsS0FBSyxDQUFDO1FBR2pCLGtCQUFhLEdBQUcsSUFBSSxlQUFlLENBQVMsb0JBQW9CLENBQUMsQ0FBQztRQUVsRSxZQUFPLEdBQUcsS0FBSyxDQUFDO1FBRWhCLGNBQVMsR0FBRyxFQUFFLENBQUM7SUFFdUMsQ0FBQztJQUV2RCxXQUFXLENBQUMsSUFBWTtRQUN0QixJQUFJLENBQUMsU0FBUyxHQUFHLElBQUksQ0FBQztJQUN4QixDQUFDO0lBRUQsSUFBSTtRQUNGLElBQUksQ0FBQyxRQUFRLEdBQUcsSUFBSSxDQUFDO0lBQ3ZCLENBQUM7SUFFRCxJQUFJO1FBQ0YsSUFBSSxDQUFDLFFBQVEsR0FBRyxLQUFLLENBQUM7UUFDdEIsSUFBSSxDQUFDLE9BQU8sR0FBRyxLQUFLLENBQUM7UUFDckIsSUFBSSxDQUFDLFVBQVUsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLFNBQVMsQ0FBQyxJQUFJLEVBQUUsQ0FBQyxDQUFDO0lBQzlDLENBQUM7SUFFRCxrQkFBa0I7UUFDaEIsSUFBSSxDQUFDLElBQUksQ0FBQyxPQUFPLEVBQUUsQ0FBQztZQUNsQixJQUFJLENBQUMsT0FBTyxHQUFHLElBQUksQ0FBQyxTQUFTLENBQUMsVUFBVSxDQUFDLGFBQWEsQ0FBQztRQUN6RCxDQUFDO1FBQ0QsSUFBSSxDQUFDLElBQUksQ0FBQyxPQUFPLEVBQUUsQ0FBQztZQUNsQixJQUFJLENBQUMsT0FBTyxDQUFDLEtBQUssRUFBRSxDQUFDO1FBQ3ZCLENBQUM7UUFDRCxJQUFJLENBQUMsZUFBZSxDQUFDLGFBQWEsQ0FBQyxZQUFZLENBQzdDLE9BQU8sRUFDUCxHQUFHLElBQUksQ0FBQyxPQUFPLENBQUMsV0FBVyxJQUFJLENBQ2hDLENBQUM7UUFDRixJQUFJLENBQUMsYUFBYSxDQUFDLElBQUksQ0FDckIsR0FBRyxJQUFJLENBQUMsZUFBZSxDQUFDLGFBQWEsQ0FBQyxZQUFZLElBQUksQ0FDdkQsQ0FBQztRQUNGLElBQUksQ0FBQyxHQUFHLENBQUMsYUFBYSxFQUFFLENBQUM7SUFDM0IsQ0FBQztzRkF2RFUscUJBQXFCO29FQUFyQixxQkFBcUI7Ozs7Ozs7OztZQ3RCbEMsc0NBVUM7O1lBSEMsQUFEQSxnS0FBaUIsdUJBQW1CLEtBQUMsMkhBQzdCLFVBQU0sS0FBQztZQUdoQixpQkFBVztZQUNaLGlDQUdDO1lBQ0MsWUFDRjtZQUFBLGlCQUFNO1lBRUosQUFERiw4QkFBeUIsY0FDSTtZQUN6QixZQUNGO1lBQUEsaUJBQU87WUFFTCxBQURGLGlEQUFnRCxpQkFNN0M7WUFEQyx5SUFBUyxVQUFNLEtBQUM7WUFFaEIsK0JBQW1DO1lBR3pDLEFBREUsQUFERSxpQkFBUyxFQUNjLEVBQ3JCOztZQXZCSixBQUhBLEFBREEsdUNBQXFCLHlCQUNELGlGQUcyQjtZQU8vQyxlQUNGO1lBREUsK0NBQ0Y7WUFDSyxjQUFtQjtZQUFuQixxQ0FBbUI7WUFFcEIsZUFDRjtZQURFLHFEQUNGO1lBQ3dCLGNBQXVCO1lBQXZCLHlDQUF1QjtZQUczQyxjQUFlO1lBQWYsNkJBQWU7OztpRkRGUixxQkFBcUI7Y0FOakMsU0FBUzsyQkFDRSxtQkFBbUIsbUJBR1osdUJBQXVCLENBQUMsTUFBTTtrREFHdkIsU0FBUztrQkFBaEMsU0FBUzttQkFBQyxXQUFXO1lBQ1EsZUFBZTtrQkFBNUMsU0FBUzttQkFBQyxpQkFBaUI7WUFHeEIsS0FBSztrQkFEUixLQUFLO1lBTU4sU0FBUztrQkFEUixLQUFLO1lBSU4sVUFBVTtrQkFEVCxNQUFNOztrRkFaSSxxQkFBcUIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBJbnB1dENvbXBvbmVudCB9IGZyb20gJ0BhbGF1ZGEvdWknO1xuaW1wb3J0IHtcbiAgQWZ0ZXJWaWV3Q2hlY2tlZCxcbiAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gIENoYW5nZURldGVjdG9yUmVmLFxuICBDb21wb25lbnQsXG4gIEVsZW1lbnRSZWYsXG4gIEV2ZW50RW1pdHRlcixcbiAgSW5wdXQsXG4gIE91dHB1dCxcbiAgVmlld0NoaWxkLFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEJlaGF2aW9yU3ViamVjdCB9IGZyb20gJ3J4anMnO1xuXG5jb25zdCBURVhUQVJFQV9CQVNFX0hFSUdIVCA9ICd2YXIoLS1hdWktaW5saW5lLWhlaWdodC1tKSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2FjbC1lZGl0YWJsZS10ZXh0JyxcbiAgdGVtcGxhdGVVcmw6ICd0ZW1wbGF0ZS5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vc3R5bGUuc2NzcyddLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbn0pXG5leHBvcnQgY2xhc3MgRWRpdGFibGVUZXh0Q29tcG9uZW50IGltcGxlbWVudHMgQWZ0ZXJWaWV3Q2hlY2tlZCB7XG4gIEBWaWV3Q2hpbGQoJ3RleHRJbnB1dCcpIHRleHRJbnB1dDogSW5wdXRDb21wb25lbnQ7XG4gIEBWaWV3Q2hpbGQoJ3RleHRQbGFjZWhvbGRlcicpIHRleHRQbGFjZWhvbGRlcjogRWxlbWVudFJlZjxIVE1MRGl2RWxlbWVudD47XG5cbiAgQElucHV0KClcbiAgc2V0IHZhbHVlKHZhbDogc3RyaW5nKSB7XG4gICAgdGhpcy50ZXh0TW9kZWwgPSB2YWwgPyB2YWwudHJpbSgpIDogJyc7XG4gIH1cblxuICBASW5wdXQoKVxuICBpc0FsbG93ZWQ6IGJvb2xlYW47XG5cbiAgQE91dHB1dCgpXG4gIHRleHRDaGFuZ2UgPSBuZXcgRXZlbnRFbWl0dGVyPHN0cmluZz4oKTtcblxuICBlZGl0TW9kZSA9IGZhbHNlO1xuICBpbnB1dEVsOiBIVE1MSW5wdXRFbGVtZW50O1xuXG4gIGlucHV0SGVpZ2h0JCQgPSBuZXcgQmVoYXZpb3JTdWJqZWN0PHN0cmluZz4oVEVYVEFSRUFfQkFTRV9IRUlHSFQpO1xuXG4gIGZvY3VzZWQgPSBmYWxzZTtcblxuICB0ZXh0TW9kZWwgPSAnJztcblxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIHJlYWRvbmx5IGNkcjogQ2hhbmdlRGV0ZWN0b3JSZWYpIHt9XG5cbiAgbW9kZWxDaGFuZ2UodGV4dDogc3RyaW5nKSB7XG4gICAgdGhpcy50ZXh0TW9kZWwgPSB0ZXh0O1xuICB9XG5cbiAgZWRpdCgpIHtcbiAgICB0aGlzLmVkaXRNb2RlID0gdHJ1ZTtcbiAgfVxuXG4gIGJsdXIoKSB7XG4gICAgdGhpcy5lZGl0TW9kZSA9IGZhbHNlO1xuICAgIHRoaXMuZm9jdXNlZCA9IGZhbHNlO1xuICAgIHRoaXMudGV4dENoYW5nZS5lbWl0KHRoaXMudGV4dE1vZGVsLnRyaW0oKSk7XG4gIH1cblxuICBuZ0FmdGVyVmlld0NoZWNrZWQoKSB7XG4gICAgaWYgKCF0aGlzLmlucHV0RWwpIHtcbiAgICAgIHRoaXMuaW5wdXRFbCA9IHRoaXMudGV4dElucHV0LmVsZW1lbnRSZWYubmF0aXZlRWxlbWVudDtcbiAgICB9XG4gICAgaWYgKCF0aGlzLmZvY3VzZWQpIHtcbiAgICAgIHRoaXMuaW5wdXRFbC5mb2N1cygpO1xuICAgIH1cbiAgICB0aGlzLnRleHRQbGFjZWhvbGRlci5uYXRpdmVFbGVtZW50LnNldEF0dHJpYnV0ZShcbiAgICAgICd3aWR0aCcsXG4gICAgICBgJHt0aGlzLmlucHV0RWwub2Zmc2V0V2lkdGh9cHhgLFxuICAgICk7XG4gICAgdGhpcy5pbnB1dEhlaWdodCQkLm5leHQoXG4gICAgICBgJHt0aGlzLnRleHRQbGFjZWhvbGRlci5uYXRpdmVFbGVtZW50Lm9mZnNldEhlaWdodH1weGAsXG4gICAgKTtcbiAgICB0aGlzLmNkci5kZXRlY3RDaGFuZ2VzKCk7XG4gIH1cbn1cbiIsIjx0ZXh0YXJlYVxuICBhdWktaW5wdXRcbiAgY2xhc3M9XCJlZGl0LWlucHV0XCJcbiAgbmFtZT1cInRleHRcIlxuICBbbmdNb2RlbF09XCJ0ZXh0TW9kZWxcIlxuICBbaGlkZGVuXT1cIiFlZGl0TW9kZVwiXG4gIChuZ01vZGVsQ2hhbmdlKT1cIm1vZGVsQ2hhbmdlKCRldmVudClcIlxuICAoYmx1cik9XCJibHVyKClcIlxuICBbbmdTdHlsZV09XCJ7IGhlaWdodDogKGlucHV0SGVpZ2h0JCQgfCBhc3luYykgfVwiXG4gICN0ZXh0SW5wdXRcbj48L3RleHRhcmVhPlxuPGRpdlxuICBjbGFzcz1cInRleHQtcGxhY2Vob2xkZXJcIlxuICAjdGV4dFBsYWNlaG9sZGVyXG4+XG4gIHt7IHRleHRNb2RlbCB9fVxuPC9kaXY+XG48ZGl2IFtoaWRkZW5dPVwiZWRpdE1vZGVcIj5cbiAgPHNwYW4gY2xhc3M9XCJ0ZXh0LWRpc3BsYXlcIj5cbiAgICB7eyB0ZXh0TW9kZWwudHJpbSgpIH19XG4gIDwvc3Bhbj5cbiAgPGFjbC1kaXNhYmxlZC1jb250YWluZXIgW2lzQWxsb3dlZF09XCJpc0FsbG93ZWRcIj5cbiAgICA8YnV0dG9uXG4gICAgICBhdWktYnV0dG9uPVwidGV4dFwiXG4gICAgICBbc3F1YXJlXT1cInRydWVcIlxuICAgICAgc2l6ZT1cInNtYWxsXCJcbiAgICAgIChjbGljayk9XCJlZGl0KClcIlxuICAgID5cbiAgICAgIDxhdWktaWNvbiBpY29uPVwicGVuY2lsXCI+PC9hdWktaWNvbj5cbiAgICA8L2J1dHRvbj5cbiAgPC9hY2wtZGlzYWJsZWQtY29udGFpbmVyPlxuPC9kaXY+XG4iXX0=