@alauda-fe/common
Version:
Alauda frontend team common codes.
98 lines • 13 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";
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);
} }, 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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vbGlicy9jb21tb24vc3JjL2VkaXRhYmxlLXRleHQvY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vbGlicy9jb21tb24vc3JjL2VkaXRhYmxlLXRleHQvdGVtcGxhdGUuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsY0FBYyxFQUFFLE1BQU0sWUFBWSxDQUFDO0FBQzVDLE9BQU8sRUFFTCx1QkFBdUIsRUFDdkIsaUJBQWlCLEVBQ2pCLFNBQVMsRUFDVCxVQUFVLEVBQ1YsWUFBWSxFQUNaLEtBQUssRUFDTCxNQUFNLEVBQ04sU0FBUyxHQUNWLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSxNQUFNLENBQUM7Ozs7O0FBRXZDLE1BQU0sb0JBQW9CLEdBQUcsNEJBQTRCLENBQUM7QUFRMUQsTUFBTSxPQUFPLHFCQUFxQjtJQUloQyxJQUNJLEtBQUssQ0FBQyxHQUFXO1FBQ25CLElBQUksQ0FBQyxTQUFTLEdBQUcsR0FBRyxDQUFDLENBQUMsQ0FBQyxHQUFHLENBQUMsSUFBSSxFQUFFLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQztJQUN6QyxDQUFDO0lBaUJELFlBQTZCLEdBQXNCO1FBQXRCLFFBQUcsR0FBSCxHQUFHLENBQW1CO1FBWG5ELGVBQVUsR0FBRyxJQUFJLFlBQVksRUFBVSxDQUFDO1FBRXhDLGFBQVEsR0FBRyxLQUFLLENBQUM7UUFHakIsa0JBQWEsR0FBRyxJQUFJLGVBQWUsQ0FBUyxvQkFBb0IsQ0FBQyxDQUFDO1FBRWxFLFlBQU8sR0FBRyxLQUFLLENBQUM7UUFFaEIsY0FBUyxHQUFHLEVBQUUsQ0FBQztJQUV1QyxDQUFDO0lBRXZELFdBQVcsQ0FBQyxJQUFZO1FBQ3RCLElBQUksQ0FBQyxTQUFTLEdBQUcsSUFBSSxDQUFDO0lBQ3hCLENBQUM7SUFFRCxJQUFJO1FBQ0YsSUFBSSxDQUFDLFFBQVEsR0FBRyxJQUFJLENBQUM7SUFDdkIsQ0FBQztJQUVELElBQUk7UUFDRixJQUFJLENBQUMsUUFBUSxHQUFHLEtBQUssQ0FBQztRQUN0QixJQUFJLENBQUMsT0FBTyxHQUFHLEtBQUssQ0FBQztRQUNyQixJQUFJLENBQUMsVUFBVSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDLElBQUksRUFBRSxDQUFDLENBQUM7SUFDOUMsQ0FBQztJQUVELGtCQUFrQjtRQUNoQixJQUFJLENBQUMsSUFBSSxDQUFDLE9BQU8sRUFBRSxDQUFDO1lBQ2xCLElBQUksQ0FBQyxPQUFPLEdBQUcsSUFBSSxDQUFDLFNBQVMsQ0FBQyxVQUFVLENBQUMsYUFBYSxDQUFDO1FBQ3pELENBQUM7UUFDRCxJQUFJLENBQUMsSUFBSSxDQUFDLE9BQU8sRUFBRSxDQUFDO1lBQ2xCLElBQUksQ0FBQyxPQUFPLENBQUMsS0FBSyxFQUFFLENBQUM7UUFDdkIsQ0FBQztRQUNELElBQUksQ0FBQyxlQUFlLENBQUMsYUFBYSxDQUFDLFlBQVksQ0FDN0MsT0FBTyxFQUNQLEdBQUcsSUFBSSxDQUFDLE9BQU8sQ0FBQyxXQUFXLElBQUksQ0FDaEMsQ0FBQztRQUNGLElBQUksQ0FBQyxhQUFhLENBQUMsSUFBSSxDQUNyQixHQUFHLElBQUksQ0FBQyxlQUFlLENBQUMsYUFBYSxDQUFDLFlBQVksSUFBSSxDQUN2RCxDQUFDO1FBQ0YsSUFBSSxDQUFDLEdBQUcsQ0FBQyxhQUFhLEVBQUUsQ0FBQztJQUMzQixDQUFDO3NGQXZEVSxxQkFBcUI7b0VBQXJCLHFCQUFxQjs7Ozs7Ozs7O1lDdEJsQyxzQ0FVQzs7WUFIQyxBQURBLGdLQUFpQix1QkFBbUIsS0FBQywySEFDN0IsVUFBTSxLQUFDO1lBR2hCLGlCQUFXO1lBQ1osaUNBR0M7WUFDQyxZQUNGO1lBQUEsaUJBQU07WUFFSixBQURGLDhCQUF5QixjQUNJO1lBQ3pCLFlBQ0Y7WUFBQSxpQkFBTztZQUVMLEFBREYsaURBQWdELGlCQU03QztZQURDLHlJQUFTLFVBQU0sS0FBQztZQUVoQiwrQkFBbUM7WUFHekMsQUFERSxBQURFLGlCQUFTLEVBQ2MsRUFDckI7O1lBdkJKLEFBSEEsQUFEQSx1Q0FBcUIseUJBQ0QsaUZBRzJCO1lBTy9DLGVBQ0Y7WUFERSwrQ0FDRjtZQUNLLGNBQW1CO1lBQW5CLHFDQUFtQjtZQUVwQixlQUNGO1lBREUscURBQ0Y7WUFDd0IsY0FBdUI7WUFBdkIseUNBQXVCO1lBRzNDLGNBQWU7WUFBZiw2QkFBZTs7O2lGREZSLHFCQUFxQjtjQU5qQyxTQUFTOzJCQUNFLG1CQUFtQixtQkFHWix1QkFBdUIsQ0FBQyxNQUFNO2tEQUd2QixTQUFTO2tCQUFoQyxTQUFTO21CQUFDLFdBQVc7WUFDUSxlQUFlO2tCQUE1QyxTQUFTO21CQUFDLGlCQUFpQjtZQUd4QixLQUFLO2tCQURSLEtBQUs7WUFNTixTQUFTO2tCQURSLEtBQUs7WUFJTixVQUFVO2tCQURULE1BQU07O2tGQVpJLHFCQUFxQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IElucHV0Q29tcG9uZW50IH0gZnJvbSAnQGFsYXVkYS91aSc7XG5pbXBvcnQge1xuICBBZnRlclZpZXdDaGVja2VkLFxuICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcbiAgQ2hhbmdlRGV0ZWN0b3JSZWYsXG4gIENvbXBvbmVudCxcbiAgRWxlbWVudFJlZixcbiAgRXZlbnRFbWl0dGVyLFxuICBJbnB1dCxcbiAgT3V0cHV0LFxuICBWaWV3Q2hpbGQsXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQmVoYXZpb3JTdWJqZWN0IH0gZnJvbSAncnhqcyc7XG5cbmNvbnN0IFRFWFRBUkVBX0JBU0VfSEVJR0hUID0gJ3ZhcigtLWF1aS1pbmxpbmUtaGVpZ2h0LW0pJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnYWNsLWVkaXRhYmxlLXRleHQnLFxuICB0ZW1wbGF0ZVVybDogJ3RlbXBsYXRlLmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9zdHlsZS5zY3NzJ10sXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxufSlcbmV4cG9ydCBjbGFzcyBFZGl0YWJsZVRleHRDb21wb25lbnQgaW1wbGVtZW50cyBBZnRlclZpZXdDaGVja2VkIHtcbiAgQFZpZXdDaGlsZCgndGV4dElucHV0JykgdGV4dElucHV0OiBJbnB1dENvbXBvbmVudDtcbiAgQFZpZXdDaGlsZCgndGV4dFBsYWNlaG9sZGVyJykgdGV4dFBsYWNlaG9sZGVyOiBFbGVtZW50UmVmPEhUTUxEaXZFbGVtZW50PjtcblxuICBASW5wdXQoKVxuICBzZXQgdmFsdWUodmFsOiBzdHJpbmcpIHtcbiAgICB0aGlzLnRleHRNb2RlbCA9IHZhbCA/IHZhbC50cmltKCkgOiAnJztcbiAgfVxuXG4gIEBJbnB1dCgpXG4gIGlzQWxsb3dlZDogYm9vbGVhbjtcblxuICBAT3V0cHV0KClcbiAgdGV4dENoYW5nZSA9IG5ldyBFdmVudEVtaXR0ZXI8c3RyaW5nPigpO1xuXG4gIGVkaXRNb2RlID0gZmFsc2U7XG4gIGlucHV0RWw6IEhUTUxJbnB1dEVsZW1lbnQ7XG5cbiAgaW5wdXRIZWlnaHQkJCA9IG5ldyBCZWhhdmlvclN1YmplY3Q8c3RyaW5nPihURVhUQVJFQV9CQVNFX0hFSUdIVCk7XG5cbiAgZm9jdXNlZCA9IGZhbHNlO1xuXG4gIHRleHRNb2RlbCA9ICcnO1xuXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgcmVhZG9ubHkgY2RyOiBDaGFuZ2VEZXRlY3RvclJlZikge31cblxuICBtb2RlbENoYW5nZSh0ZXh0OiBzdHJpbmcpIHtcbiAgICB0aGlzLnRleHRNb2RlbCA9IHRleHQ7XG4gIH1cblxuICBlZGl0KCkge1xuICAgIHRoaXMuZWRpdE1vZGUgPSB0cnVlO1xuICB9XG5cbiAgYmx1cigpIHtcbiAgICB0aGlzLmVkaXRNb2RlID0gZmFsc2U7XG4gICAgdGhpcy5mb2N1c2VkID0gZmFsc2U7XG4gICAgdGhpcy50ZXh0Q2hhbmdlLmVtaXQodGhpcy50ZXh0TW9kZWwudHJpbSgpKTtcbiAgfVxuXG4gIG5nQWZ0ZXJWaWV3Q2hlY2tlZCgpIHtcbiAgICBpZiAoIXRoaXMuaW5wdXRFbCkge1xuICAgICAgdGhpcy5pbnB1dEVsID0gdGhpcy50ZXh0SW5wdXQuZWxlbWVudFJlZi5uYXRpdmVFbGVtZW50O1xuICAgIH1cbiAgICBpZiAoIXRoaXMuZm9jdXNlZCkge1xuICAgICAgdGhpcy5pbnB1dEVsLmZvY3VzKCk7XG4gICAgfVxuICAgIHRoaXMudGV4dFBsYWNlaG9sZGVyLm5hdGl2ZUVsZW1lbnQuc2V0QXR0cmlidXRlKFxuICAgICAgJ3dpZHRoJyxcbiAgICAgIGAke3RoaXMuaW5wdXRFbC5vZmZzZXRXaWR0aH1weGAsXG4gICAgKTtcbiAgICB0aGlzLmlucHV0SGVpZ2h0JCQubmV4dChcbiAgICAgIGAke3RoaXMudGV4dFBsYWNlaG9sZGVyLm5hdGl2ZUVsZW1lbnQub2Zmc2V0SGVpZ2h0fXB4YCxcbiAgICApO1xuICAgIHRoaXMuY2RyLmRldGVjdENoYW5nZXMoKTtcbiAgfVxufVxuIiwiPHRleHRhcmVhXG4gIGF1aS1pbnB1dFxuICBjbGFzcz1cImVkaXQtaW5wdXRcIlxuICBuYW1lPVwidGV4dFwiXG4gIFtuZ01vZGVsXT1cInRleHRNb2RlbFwiXG4gIFtoaWRkZW5dPVwiIWVkaXRNb2RlXCJcbiAgKG5nTW9kZWxDaGFuZ2UpPVwibW9kZWxDaGFuZ2UoJGV2ZW50KVwiXG4gIChibHVyKT1cImJsdXIoKVwiXG4gIFtuZ1N0eWxlXT1cInsgaGVpZ2h0OiAoaW5wdXRIZWlnaHQkJCB8IGFzeW5jKSB9XCJcbiAgI3RleHRJbnB1dFxuPjwvdGV4dGFyZWE+XG48ZGl2XG4gIGNsYXNzPVwidGV4dC1wbGFjZWhvbGRlclwiXG4gICN0ZXh0UGxhY2Vob2xkZXJcbj5cbiAge3sgdGV4dE1vZGVsIH19XG48L2Rpdj5cbjxkaXYgW2hpZGRlbl09XCJlZGl0TW9kZVwiPlxuICA8c3BhbiBjbGFzcz1cInRleHQtZGlzcGxheVwiPlxuICAgIHt7IHRleHRNb2RlbC50cmltKCkgfX1cbiAgPC9zcGFuPlxuICA8YWNsLWRpc2FibGVkLWNvbnRhaW5lciBbaXNBbGxvd2VkXT1cImlzQWxsb3dlZFwiPlxuICAgIDxidXR0b25cbiAgICAgIGF1aS1idXR0b249XCJ0ZXh0XCJcbiAgICAgIFtzcXVhcmVdPVwidHJ1ZVwiXG4gICAgICBzaXplPVwic21hbGxcIlxuICAgICAgKGNsaWNrKT1cImVkaXQoKVwiXG4gICAgPlxuICAgICAgPGF1aS1pY29uIGljb249XCJwZW5jaWxcIj48L2F1aS1pY29uPlxuICAgIDwvYnV0dG9uPlxuICA8L2FjbC1kaXNhYmxlZC1jb250YWluZXI+XG48L2Rpdj5cbiJdfQ==