@alauda/ui 7.4.2-beta.17 → 7.4.2-beta.19
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,7 +1,11 @@
|
|
|
1
1
|
import { EventEmitter, TemplateRef } from '@angular/core';
|
|
2
|
-
import {
|
|
2
|
+
import { CustomBeforeAction } from '../dialog';
|
|
3
|
+
import { ButtonPosition, EditableMode } from './editable.type';
|
|
3
4
|
import * as i0 from "@angular/core";
|
|
4
5
|
export declare class EditableComponent {
|
|
6
|
+
beforeSave: CustomBeforeAction<unknown>;
|
|
7
|
+
get position(): ButtonPosition;
|
|
8
|
+
set position(val: ButtonPosition);
|
|
5
9
|
save: EventEmitter<void>;
|
|
6
10
|
cancel: EventEmitter<void>;
|
|
7
11
|
modeChange: EventEmitter<EditableMode>;
|
|
@@ -9,10 +13,13 @@ export declare class EditableComponent {
|
|
|
9
13
|
editor: TemplateRef<unknown>;
|
|
10
14
|
EditableMode: typeof EditableMode;
|
|
11
15
|
bem: import("../internal/utils").Bem;
|
|
16
|
+
loading: boolean;
|
|
12
17
|
$$mode: import("@angular/core").WritableSignal<EditableMode>;
|
|
18
|
+
$$position: import("@angular/core").WritableSignal<ButtonPosition>;
|
|
19
|
+
$hostClass: import("@angular/core").Signal<string>;
|
|
13
20
|
constructor();
|
|
14
21
|
saveEdit(): void;
|
|
15
22
|
cancelEdit(): void;
|
|
16
23
|
static ɵfac: i0.ɵɵFactoryDeclaration<EditableComponent, never>;
|
|
17
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<EditableComponent, "aui-editable", never, {}, { "save": "save"; "cancel": "cancel"; "modeChange": "modeChange"; }, ["viewer", "editor"], never, true, never>;
|
|
24
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<EditableComponent, "aui-editable", never, { "beforeSave": { "alias": "beforeSave"; "required": false; }; "position": { "alias": "position"; "required": false; }; }, { "save": "save"; "cancel": "cancel"; "modeChange": "modeChange"; }, ["viewer", "editor"], never, true, never>;
|
|
18
25
|
}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { AsyncPipe, NgFor, NgIf, NgTemplateOutlet } from '@angular/common';
|
|
2
|
-
import { ChangeDetectionStrategy, Component, ContentChild, EventEmitter, Output, TemplateRef, effect, signal, } from '@angular/core';
|
|
2
|
+
import { ChangeDetectionStrategy, Component, ContentChild, EventEmitter, Input, Output, TemplateRef, computed, effect, signal, } from '@angular/core';
|
|
3
|
+
import { finalize, first, from } from 'rxjs';
|
|
3
4
|
import { ButtonModule } from '../button';
|
|
4
5
|
import { IconComponent } from '../icon';
|
|
5
6
|
import { buildBem } from '../internal/utils';
|
|
@@ -9,27 +10,48 @@ import * as i0 from "@angular/core";
|
|
|
9
10
|
import * as i1 from "../button/button.component";
|
|
10
11
|
const bem = buildBem('aui-editable');
|
|
11
12
|
export class EditableComponent {
|
|
13
|
+
get position() {
|
|
14
|
+
return this.$$position();
|
|
15
|
+
}
|
|
16
|
+
set position(val) {
|
|
17
|
+
if (this.$$position() !== val) {
|
|
18
|
+
this.$$position.set(val);
|
|
19
|
+
}
|
|
20
|
+
}
|
|
12
21
|
constructor() {
|
|
13
22
|
this.save = new EventEmitter();
|
|
14
23
|
this.cancel = new EventEmitter();
|
|
15
24
|
this.modeChange = new EventEmitter();
|
|
16
25
|
this.EditableMode = EditableMode;
|
|
17
26
|
this.bem = bem;
|
|
27
|
+
this.loading = false;
|
|
18
28
|
this.$$mode = signal(EditableMode.View);
|
|
29
|
+
this.$$position = signal('center');
|
|
30
|
+
this.$hostClass = computed(() => {
|
|
31
|
+
return `${bem.block()} ${bem.modifier(this.$$position())}`;
|
|
32
|
+
});
|
|
19
33
|
effect(() => {
|
|
20
34
|
this.modeChange.emit(this.$$mode());
|
|
21
35
|
});
|
|
22
36
|
}
|
|
23
37
|
saveEdit() {
|
|
24
|
-
this
|
|
25
|
-
this.
|
|
38
|
+
this.loading = true;
|
|
39
|
+
from(this.beforeSave?.() || Promise.resolve())
|
|
40
|
+
.pipe(first(), finalize(() => (this.loading = false)))
|
|
41
|
+
.subscribe(isContinue => {
|
|
42
|
+
if (isContinue === false) {
|
|
43
|
+
return;
|
|
44
|
+
}
|
|
45
|
+
this.$$mode.set(EditableMode.View);
|
|
46
|
+
this.save.emit();
|
|
47
|
+
});
|
|
26
48
|
}
|
|
27
49
|
cancelEdit() {
|
|
28
50
|
this.$$mode.set(EditableMode.View);
|
|
29
51
|
this.cancel.emit();
|
|
30
52
|
}
|
|
31
53
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: EditableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
32
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.3", type: EditableComponent, isStandalone: true, selector: "aui-editable", outputs: { save: "save", cancel: "cancel", modeChange: "modeChange" }, queries: [{ propertyName: "viewer", first: true, predicate: EditableViewerDirective, descendants: true, read: TemplateRef }, { propertyName: "editor", first: true, predicate: EditableEditorDirective, descendants: true, read: TemplateRef }], ngImport: i0, template: "<div [class]=\"
|
|
54
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.3", type: EditableComponent, isStandalone: true, selector: "aui-editable", inputs: { beforeSave: "beforeSave", position: "position" }, outputs: { save: "save", cancel: "cancel", modeChange: "modeChange" }, queries: [{ propertyName: "viewer", first: true, predicate: EditableViewerDirective, descendants: true, read: TemplateRef }, { propertyName: "editor", first: true, predicate: EditableEditorDirective, descendants: true, read: TemplateRef }], ngImport: i0, template: "<div [class]=\"$hostClass()\">\n <div\n [class]=\"bem.element('viewer-container')\"\n *ngIf=\"$$mode() === EditableMode.View\"\n >\n <ng-container [ngTemplateOutlet]=\"viewer\"> </ng-container>\n <button\n aui-button=\"text\"\n [square]=\"true\"\n (click)=\"$$mode.set(EditableMode.Edit)\"\n >\n <aui-icon icon=\"pencil\"></aui-icon>\n </button>\n </div>\n <ng-container *ngIf=\"$$mode() === EditableMode.Edit\">\n <div [class]=\"bem.element('editor-container')\">\n <ng-container [ngTemplateOutlet]=\"editor\"> </ng-container>\n\n <button\n aui-button=\"text\"\n [square]=\"true\"\n [disabled]=\"loading\"\n (click)=\"saveEdit()\"\n >\n <aui-icon [icon]=\"loading ? 'spinner' : 'check'\"></aui-icon>\n </button>\n <button\n aui-button=\"text\"\n [square]=\"true\"\n (click)=\"cancelEdit()\"\n >\n <aui-icon icon=\"xmark\"></aui-icon>\n </button>\n </div>\n </ng-container>\n</div>\n", styles: [".aui-editable .aui-button--text{color:rgb(var(--aui-color-main-text))}.aui-editable .aui-button--text:first-of-type{margin-left:8px}.aui-editable .aui-button--text:hover{color:rgb(var(--aui-color-primary))}.aui-editable .aui-button--text[disabled]{color:rgb(var(--aui-color-main-text))!important}.aui-editable--center .aui-editable__view-container,.aui-editable--center .aui-editable__editor-container{display:flex;align-items:center}.aui-editable--top .aui-editable__view-container,.aui-editable--top .aui-editable__editor-container{display:flex;align-items:flex-start}.aui-editable--bottom .aui-editable__view-container,.aui-editable--bottom .aui-editable__editor-container{display:flex;align-items:flex-end}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "aui-icon", inputs: ["icon", "light", "dark", "link", "margin", "size", "color", "background", "backgroundColor"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1.ButtonComponent, selector: "button[aui-button]", inputs: ["aui-button", "size", "plain", "loading", "round", "square"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
33
55
|
}
|
|
34
56
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: EditableComponent, decorators: [{
|
|
35
57
|
type: Component,
|
|
@@ -40,8 +62,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImpor
|
|
|
40
62
|
NgTemplateOutlet,
|
|
41
63
|
IconComponent,
|
|
42
64
|
ButtonModule,
|
|
43
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"
|
|
44
|
-
}], ctorParameters: function () { return []; }, propDecorators: {
|
|
65
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"$hostClass()\">\n <div\n [class]=\"bem.element('viewer-container')\"\n *ngIf=\"$$mode() === EditableMode.View\"\n >\n <ng-container [ngTemplateOutlet]=\"viewer\"> </ng-container>\n <button\n aui-button=\"text\"\n [square]=\"true\"\n (click)=\"$$mode.set(EditableMode.Edit)\"\n >\n <aui-icon icon=\"pencil\"></aui-icon>\n </button>\n </div>\n <ng-container *ngIf=\"$$mode() === EditableMode.Edit\">\n <div [class]=\"bem.element('editor-container')\">\n <ng-container [ngTemplateOutlet]=\"editor\"> </ng-container>\n\n <button\n aui-button=\"text\"\n [square]=\"true\"\n [disabled]=\"loading\"\n (click)=\"saveEdit()\"\n >\n <aui-icon [icon]=\"loading ? 'spinner' : 'check'\"></aui-icon>\n </button>\n <button\n aui-button=\"text\"\n [square]=\"true\"\n (click)=\"cancelEdit()\"\n >\n <aui-icon icon=\"xmark\"></aui-icon>\n </button>\n </div>\n </ng-container>\n</div>\n", styles: [".aui-editable .aui-button--text{color:rgb(var(--aui-color-main-text))}.aui-editable .aui-button--text:first-of-type{margin-left:8px}.aui-editable .aui-button--text:hover{color:rgb(var(--aui-color-primary))}.aui-editable .aui-button--text[disabled]{color:rgb(var(--aui-color-main-text))!important}.aui-editable--center .aui-editable__view-container,.aui-editable--center .aui-editable__editor-container{display:flex;align-items:center}.aui-editable--top .aui-editable__view-container,.aui-editable--top .aui-editable__editor-container{display:flex;align-items:flex-start}.aui-editable--bottom .aui-editable__view-container,.aui-editable--bottom .aui-editable__editor-container{display:flex;align-items:flex-end}\n"] }]
|
|
66
|
+
}], ctorParameters: function () { return []; }, propDecorators: { beforeSave: [{
|
|
67
|
+
type: Input
|
|
68
|
+
}], position: [{
|
|
69
|
+
type: Input
|
|
70
|
+
}], save: [{
|
|
45
71
|
type: Output
|
|
46
72
|
}], cancel: [{
|
|
47
73
|
type: Output
|
|
@@ -54,4 +80,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImpor
|
|
|
54
80
|
type: ContentChild,
|
|
55
81
|
args: [EditableEditorDirective, { read: TemplateRef }]
|
|
56
82
|
}] } });
|
|
57
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
83
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZWRpdGFibGUuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL2VkaXRhYmxlL2VkaXRhYmxlLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uL3NyYy9lZGl0YWJsZS9lZGl0YWJsZS5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxJQUFJLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUMzRSxPQUFPLEVBQ0wsdUJBQXVCLEVBQ3ZCLFNBQVMsRUFDVCxZQUFZLEVBQ1osWUFBWSxFQUNaLEtBQUssRUFDTCxNQUFNLEVBQ04sV0FBVyxFQUNYLFFBQVEsRUFDUixNQUFNLEVBQ04sTUFBTSxHQUNQLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBRSxRQUFRLEVBQUUsS0FBSyxFQUFFLElBQUksRUFBRSxNQUFNLE1BQU0sQ0FBQztBQUU3QyxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0sV0FBVyxDQUFDO0FBRXpDLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxTQUFTLENBQUM7QUFDeEMsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLG1CQUFtQixDQUFDO0FBRTdDLE9BQU8sRUFDTCx1QkFBdUIsRUFDdkIsdUJBQXVCLEdBQ3hCLE1BQU0sc0JBQXNCLENBQUM7QUFDOUIsT0FBTyxFQUFrQixZQUFZLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQzs7O0FBRS9ELE1BQU0sR0FBRyxHQUFHLFFBQVEsQ0FBQyxjQUFjLENBQUMsQ0FBQztBQWlCckMsTUFBTSxPQUFPLGlCQUFpQjtJQUk1QixJQUNJLFFBQVE7UUFDVixPQUFPLElBQUksQ0FBQyxVQUFVLEVBQUUsQ0FBQztJQUMzQixDQUFDO0lBRUQsSUFBSSxRQUFRLENBQUMsR0FBRztRQUNkLElBQUksSUFBSSxDQUFDLFVBQVUsRUFBRSxLQUFLLEdBQUcsRUFBRTtZQUM3QixJQUFJLENBQUMsVUFBVSxDQUFDLEdBQUcsQ0FBQyxHQUFHLENBQUMsQ0FBQztTQUMxQjtJQUNILENBQUM7SUF3QkQ7UUF0QlUsU0FBSSxHQUF1QixJQUFJLFlBQVksRUFBUSxDQUFDO1FBQ3BELFdBQU0sR0FBdUIsSUFBSSxZQUFZLEVBQVEsQ0FBQztRQUN0RCxlQUFVLEdBQ2xCLElBQUksWUFBWSxFQUFnQixDQUFDO1FBUW5DLGlCQUFZLEdBQUcsWUFBWSxDQUFDO1FBQzVCLFFBQUcsR0FBRyxHQUFHLENBQUM7UUFDVixZQUFPLEdBQUcsS0FBSyxDQUFDO1FBRWhCLFdBQU0sR0FBRyxNQUFNLENBQUMsWUFBWSxDQUFDLElBQUksQ0FBQyxDQUFDO1FBQ25DLGVBQVUsR0FBRyxNQUFNLENBQWlCLFFBQVEsQ0FBQyxDQUFDO1FBRTlDLGVBQVUsR0FBRyxRQUFRLENBQUMsR0FBRyxFQUFFO1lBQ3pCLE9BQU8sR0FBRyxHQUFHLENBQUMsS0FBSyxFQUFFLElBQUksR0FBRyxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsVUFBVSxFQUFFLENBQUMsRUFBRSxDQUFDO1FBQzdELENBQUMsQ0FBQyxDQUFDO1FBR0QsTUFBTSxDQUFDLEdBQUcsRUFBRTtZQUNWLElBQUksQ0FBQyxVQUFVLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxNQUFNLEVBQUUsQ0FBQyxDQUFDO1FBQ3RDLENBQUMsQ0FBQyxDQUFDO0lBQ0wsQ0FBQztJQUVELFFBQVE7UUFDTixJQUFJLENBQUMsT0FBTyxHQUFHLElBQUksQ0FBQztRQUNwQixJQUFJLENBQUMsSUFBSSxDQUFDLFVBQVUsRUFBRSxFQUFFLElBQUksT0FBTyxDQUFDLE9BQU8sRUFBRSxDQUFDO2FBQzNDLElBQUksQ0FDSCxLQUFLLEVBQUUsRUFDUCxRQUFRLENBQUMsR0FBRyxFQUFFLENBQUMsQ0FBQyxJQUFJLENBQUMsT0FBTyxHQUFHLEtBQUssQ0FBQyxDQUFDLENBQ3ZDO2FBQ0EsU0FBUyxDQUFDLFVBQVUsQ0FBQyxFQUFFO1lBQ3RCLElBQUksVUFBVSxLQUFLLEtBQUssRUFBRTtnQkFDeEIsT0FBTzthQUNSO1lBQ0QsSUFBSSxDQUFDLE1BQU0sQ0FBQyxHQUFHLENBQUMsWUFBWSxDQUFDLElBQUksQ0FBQyxDQUFDO1lBQ25DLElBQUksQ0FBQyxJQUFJLENBQUMsSUFBSSxFQUFFLENBQUM7UUFDbkIsQ0FBQyxDQUFDLENBQUM7SUFDUCxDQUFDO0lBRUQsVUFBVTtRQUNSLElBQUksQ0FBQyxNQUFNLENBQUMsR0FBRyxDQUFDLFlBQVksQ0FBQyxJQUFJLENBQUMsQ0FBQztRQUNuQyxJQUFJLENBQUMsTUFBTSxDQUFDLElBQUksRUFBRSxDQUFDO0lBQ3JCLENBQUM7OEdBOURVLGlCQUFpQjtrR0FBakIsaUJBQWlCLCtPQW9CZCx1QkFBdUIsMkJBQVUsV0FBVyxzREFHNUMsdUJBQXVCLDJCQUFVLFdBQVcsNkJDbEU1RCx3Z0NBb0NBLGt3QkRGSSxJQUFJLDZGQUdKLGdCQUFnQixvSkFDaEIsYUFBYSwySkFDYixZQUFZOzsyRkFJSCxpQkFBaUI7a0JBZjdCLFNBQVM7K0JBQ0UsY0FBYyxjQUdaLElBQUksV0FDUDt3QkFDUCxJQUFJO3dCQUNKLEtBQUs7d0JBQ0wsU0FBUzt3QkFDVCxnQkFBZ0I7d0JBQ2hCLGFBQWE7d0JBQ2IsWUFBWTtxQkFDYixtQkFDZ0IsdUJBQXVCLENBQUMsTUFBTTswRUFJL0MsVUFBVTtzQkFEVCxLQUFLO2dCQUlGLFFBQVE7c0JBRFgsS0FBSztnQkFXSSxJQUFJO3NCQUFiLE1BQU07Z0JBQ0csTUFBTTtzQkFBZixNQUFNO2dCQUNHLFVBQVU7c0JBQW5CLE1BQU07Z0JBSVAsTUFBTTtzQkFETCxZQUFZO3VCQUFDLHVCQUF1QixFQUFFLEVBQUUsSUFBSSxFQUFFLFdBQVcsRUFBRTtnQkFJNUQsTUFBTTtzQkFETCxZQUFZO3VCQUFDLHVCQUF1QixFQUFFLEVBQUUsSUFBSSxFQUFFLFdBQVcsRUFBRSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEFzeW5jUGlwZSwgTmdGb3IsIE5nSWYsIE5nVGVtcGxhdGVPdXRsZXQgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHtcbiAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gIENvbXBvbmVudCxcbiAgQ29udGVudENoaWxkLFxuICBFdmVudEVtaXR0ZXIsXG4gIElucHV0LFxuICBPdXRwdXQsXG4gIFRlbXBsYXRlUmVmLFxuICBjb21wdXRlZCxcbiAgZWZmZWN0LFxuICBzaWduYWwsXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgZmluYWxpemUsIGZpcnN0LCBmcm9tIH0gZnJvbSAncnhqcyc7XG5cbmltcG9ydCB7IEJ1dHRvbk1vZHVsZSB9IGZyb20gJy4uL2J1dHRvbic7XG5pbXBvcnQgeyBDdXN0b21CZWZvcmVBY3Rpb24gfSBmcm9tICcuLi9kaWFsb2cnO1xuaW1wb3J0IHsgSWNvbkNvbXBvbmVudCB9IGZyb20gJy4uL2ljb24nO1xuaW1wb3J0IHsgYnVpbGRCZW0gfSBmcm9tICcuLi9pbnRlcm5hbC91dGlscyc7XG5cbmltcG9ydCB7XG4gIEVkaXRhYmxlRWRpdG9yRGlyZWN0aXZlLFxuICBFZGl0YWJsZVZpZXdlckRpcmVjdGl2ZSxcbn0gZnJvbSAnLi9lZGl0YWJsZS5kaXJlY3RpdmUnO1xuaW1wb3J0IHsgQnV0dG9uUG9zaXRpb24sIEVkaXRhYmxlTW9kZSB9IGZyb20gJy4vZWRpdGFibGUudHlwZSc7XG5cbmNvbnN0IGJlbSA9IGJ1aWxkQmVtKCdhdWktZWRpdGFibGUnKTtcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnYXVpLWVkaXRhYmxlJyxcbiAgdGVtcGxhdGVVcmw6ICdlZGl0YWJsZS5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWydlZGl0YWJsZS5jb21wb25lbnQuc2NzcyddLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbXG4gICAgTmdJZixcbiAgICBOZ0ZvcixcbiAgICBBc3luY1BpcGUsXG4gICAgTmdUZW1wbGF0ZU91dGxldCxcbiAgICBJY29uQ29tcG9uZW50LFxuICAgIEJ1dHRvbk1vZHVsZSxcbiAgXSxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG59KVxuZXhwb3J0IGNsYXNzIEVkaXRhYmxlQ29tcG9uZW50IHtcbiAgQElucHV0KClcbiAgYmVmb3JlU2F2ZTogQ3VzdG9tQmVmb3JlQWN0aW9uPHVua25vd24+O1xuXG4gIEBJbnB1dCgpXG4gIGdldCBwb3NpdGlvbigpIHtcbiAgICByZXR1cm4gdGhpcy4kJHBvc2l0aW9uKCk7XG4gIH1cblxuICBzZXQgcG9zaXRpb24odmFsKSB7XG4gICAgaWYgKHRoaXMuJCRwb3NpdGlvbigpICE9PSB2YWwpIHtcbiAgICAgIHRoaXMuJCRwb3NpdGlvbi5zZXQodmFsKTtcbiAgICB9XG4gIH1cblxuICBAT3V0cHV0KCkgc2F2ZTogRXZlbnRFbWl0dGVyPHZvaWQ+ID0gbmV3IEV2ZW50RW1pdHRlcjx2b2lkPigpO1xuICBAT3V0cHV0KCkgY2FuY2VsOiBFdmVudEVtaXR0ZXI8dm9pZD4gPSBuZXcgRXZlbnRFbWl0dGVyPHZvaWQ+KCk7XG4gIEBPdXRwdXQoKSBtb2RlQ2hhbmdlOiBFdmVudEVtaXR0ZXI8RWRpdGFibGVNb2RlPiA9XG4gICAgbmV3IEV2ZW50RW1pdHRlcjxFZGl0YWJsZU1vZGU+KCk7XG5cbiAgQENvbnRlbnRDaGlsZChFZGl0YWJsZVZpZXdlckRpcmVjdGl2ZSwgeyByZWFkOiBUZW1wbGF0ZVJlZiB9KVxuICB2aWV3ZXI6IFRlbXBsYXRlUmVmPHVua25vd24+O1xuXG4gIEBDb250ZW50Q2hpbGQoRWRpdGFibGVFZGl0b3JEaXJlY3RpdmUsIHsgcmVhZDogVGVtcGxhdGVSZWYgfSlcbiAgZWRpdG9yOiBUZW1wbGF0ZVJlZjx1bmtub3duPjtcblxuICBFZGl0YWJsZU1vZGUgPSBFZGl0YWJsZU1vZGU7XG4gIGJlbSA9IGJlbTtcbiAgbG9hZGluZyA9IGZhbHNlO1xuXG4gICQkbW9kZSA9IHNpZ25hbChFZGl0YWJsZU1vZGUuVmlldyk7XG4gICQkcG9zaXRpb24gPSBzaWduYWw8QnV0dG9uUG9zaXRpb24+KCdjZW50ZXInKTtcblxuICAkaG9zdENsYXNzID0gY29tcHV0ZWQoKCkgPT4ge1xuICAgIHJldHVybiBgJHtiZW0uYmxvY2soKX0gJHtiZW0ubW9kaWZpZXIodGhpcy4kJHBvc2l0aW9uKCkpfWA7XG4gIH0pO1xuXG4gIGNvbnN0cnVjdG9yKCkge1xuICAgIGVmZmVjdCgoKSA9PiB7XG4gICAgICB0aGlzLm1vZGVDaGFuZ2UuZW1pdCh0aGlzLiQkbW9kZSgpKTtcbiAgICB9KTtcbiAgfVxuXG4gIHNhdmVFZGl0KCkge1xuICAgIHRoaXMubG9hZGluZyA9IHRydWU7XG4gICAgZnJvbSh0aGlzLmJlZm9yZVNhdmU/LigpIHx8IFByb21pc2UucmVzb2x2ZSgpKVxuICAgICAgLnBpcGUoXG4gICAgICAgIGZpcnN0KCksXG4gICAgICAgIGZpbmFsaXplKCgpID0+ICh0aGlzLmxvYWRpbmcgPSBmYWxzZSkpLFxuICAgICAgKVxuICAgICAgLnN1YnNjcmliZShpc0NvbnRpbnVlID0+IHtcbiAgICAgICAgaWYgKGlzQ29udGludWUgPT09IGZhbHNlKSB7XG4gICAgICAgICAgcmV0dXJuO1xuICAgICAgICB9XG4gICAgICAgIHRoaXMuJCRtb2RlLnNldChFZGl0YWJsZU1vZGUuVmlldyk7XG4gICAgICAgIHRoaXMuc2F2ZS5lbWl0KCk7XG4gICAgICB9KTtcbiAgfVxuXG4gIGNhbmNlbEVkaXQoKSB7XG4gICAgdGhpcy4kJG1vZGUuc2V0KEVkaXRhYmxlTW9kZS5WaWV3KTtcbiAgICB0aGlzLmNhbmNlbC5lbWl0KCk7XG4gIH1cbn1cbiIsIjxkaXYgW2NsYXNzXT1cIiRob3N0Q2xhc3MoKVwiPlxuICA8ZGl2XG4gICAgW2NsYXNzXT1cImJlbS5lbGVtZW50KCd2aWV3ZXItY29udGFpbmVyJylcIlxuICAgICpuZ0lmPVwiJCRtb2RlKCkgPT09IEVkaXRhYmxlTW9kZS5WaWV3XCJcbiAgPlxuICAgIDxuZy1jb250YWluZXIgW25nVGVtcGxhdGVPdXRsZXRdPVwidmlld2VyXCI+IDwvbmctY29udGFpbmVyPlxuICAgIDxidXR0b25cbiAgICAgIGF1aS1idXR0b249XCJ0ZXh0XCJcbiAgICAgIFtzcXVhcmVdPVwidHJ1ZVwiXG4gICAgICAoY2xpY2spPVwiJCRtb2RlLnNldChFZGl0YWJsZU1vZGUuRWRpdClcIlxuICAgID5cbiAgICAgIDxhdWktaWNvbiBpY29uPVwicGVuY2lsXCI+PC9hdWktaWNvbj5cbiAgICA8L2J1dHRvbj5cbiAgPC9kaXY+XG4gIDxuZy1jb250YWluZXIgKm5nSWY9XCIkJG1vZGUoKSA9PT0gRWRpdGFibGVNb2RlLkVkaXRcIj5cbiAgICA8ZGl2IFtjbGFzc109XCJiZW0uZWxlbWVudCgnZWRpdG9yLWNvbnRhaW5lcicpXCI+XG4gICAgICA8bmctY29udGFpbmVyIFtuZ1RlbXBsYXRlT3V0bGV0XT1cImVkaXRvclwiPiA8L25nLWNvbnRhaW5lcj5cblxuICAgICAgPGJ1dHRvblxuICAgICAgICBhdWktYnV0dG9uPVwidGV4dFwiXG4gICAgICAgIFtzcXVhcmVdPVwidHJ1ZVwiXG4gICAgICAgIFtkaXNhYmxlZF09XCJsb2FkaW5nXCJcbiAgICAgICAgKGNsaWNrKT1cInNhdmVFZGl0KClcIlxuICAgICAgPlxuICAgICAgICA8YXVpLWljb24gW2ljb25dPVwibG9hZGluZyA/ICdzcGlubmVyJyA6ICdjaGVjaydcIj48L2F1aS1pY29uPlxuICAgICAgPC9idXR0b24+XG4gICAgICA8YnV0dG9uXG4gICAgICAgIGF1aS1idXR0b249XCJ0ZXh0XCJcbiAgICAgICAgW3NxdWFyZV09XCJ0cnVlXCJcbiAgICAgICAgKGNsaWNrKT1cImNhbmNlbEVkaXQoKVwiXG4gICAgICA+XG4gICAgICAgIDxhdWktaWNvbiBpY29uPVwieG1hcmtcIj48L2F1aS1pY29uPlxuICAgICAgPC9idXR0b24+XG4gICAgPC9kaXY+XG4gIDwvbmctY29udGFpbmVyPlxuPC9kaXY+XG4iXX0=
|
|
@@ -3,4 +3,4 @@ export var EditableMode;
|
|
|
3
3
|
EditableMode["View"] = "view";
|
|
4
4
|
EditableMode["Edit"] = "edit";
|
|
5
5
|
})(EditableMode || (EditableMode = {}));
|
|
6
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
6
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZWRpdGFibGUudHlwZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9lZGl0YWJsZS9lZGl0YWJsZS50eXBlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE1BQU0sQ0FBTixJQUFZLFlBR1g7QUFIRCxXQUFZLFlBQVk7SUFDdEIsNkJBQWEsQ0FBQTtJQUNiLDZCQUFhLENBQUE7QUFDZixDQUFDLEVBSFcsWUFBWSxLQUFaLFlBQVksUUFHdkIiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgZW51bSBFZGl0YWJsZU1vZGUge1xuICBWaWV3ID0gJ3ZpZXcnLFxuICBFZGl0ID0gJ2VkaXQnLFxufVxuXG5leHBvcnQgdHlwZSBCdXR0b25Qb3NpdGlvbiA9ICd0b3AnIHwgJ2NlbnRlcicgfCAnYm90dG9tJztcbiJdfQ==
|
package/fesm2022/alauda-ui.mjs
CHANGED
|
@@ -2,7 +2,7 @@ import { CdkAccordion, CdkAccordionItem, CdkAccordionModule } from '@angular/cdk
|
|
|
2
2
|
import * as i0 from '@angular/core';
|
|
3
3
|
import { Component, ViewEncapsulation, ChangeDetectionStrategy, SkipSelf, Optional, Input, HostBinding, booleanAttribute, TemplateRef, Injectable, Pipe, Inject, NgModule, Directive, ContentChild, EventEmitter, Output, ElementRef, ContentChildren, ChangeDetectorRef, forwardRef, ViewChild, HostListener, Host, InjectionToken, signal, inject, computed, isDevMode, numberAttribute, Injector, Type, effect, ViewContainerRef, ViewChildren, Renderer2 } from '@angular/core';
|
|
4
4
|
import { DOCUMENT, NgIf, NgClass, CommonModule, NgTemplateOutlet, NgFor, AsyncPipe, DecimalPipe, NgStyle, DatePipe, NgComponentOutlet, NgSwitch, NgSwitchCase, NgSwitchDefault } from '@angular/common';
|
|
5
|
-
import { Observable, ReplaySubject, share, startWith, map, distinctUntilChanged, Subject, takeUntil, filter, take, merge as merge$1, fromEvent, combineLatest, debounceTime, switchMap, of, EMPTY, tap, BehaviorSubject, withLatestFrom, delay, first, throttleTime, firstValueFrom, NEVER, observeOn, animationFrameScheduler, repeat, takeWhile, endWith, Subscription } from 'rxjs';
|
|
5
|
+
import { Observable, ReplaySubject, share, startWith, map, distinctUntilChanged, Subject, takeUntil, filter, take, merge as merge$1, fromEvent, combineLatest, debounceTime, switchMap, of, EMPTY, tap, BehaviorSubject, withLatestFrom, delay, first, throttleTime, firstValueFrom, from, finalize, NEVER, observeOn, animationFrameScheduler, repeat, takeWhile, endWith, Subscription } from 'rxjs';
|
|
6
6
|
import * as i1 from '@angular/common/http';
|
|
7
7
|
import * as i2 from '@angular/cdk/a11y';
|
|
8
8
|
import { FocusKeyManager, A11yModule } from '@angular/cdk/a11y';
|
|
@@ -7414,27 +7414,48 @@ var EditableMode;
|
|
|
7414
7414
|
|
|
7415
7415
|
const bem = buildBem('aui-editable');
|
|
7416
7416
|
class EditableComponent {
|
|
7417
|
+
get position() {
|
|
7418
|
+
return this.$$position();
|
|
7419
|
+
}
|
|
7420
|
+
set position(val) {
|
|
7421
|
+
if (this.$$position() !== val) {
|
|
7422
|
+
this.$$position.set(val);
|
|
7423
|
+
}
|
|
7424
|
+
}
|
|
7417
7425
|
constructor() {
|
|
7418
7426
|
this.save = new EventEmitter();
|
|
7419
7427
|
this.cancel = new EventEmitter();
|
|
7420
7428
|
this.modeChange = new EventEmitter();
|
|
7421
7429
|
this.EditableMode = EditableMode;
|
|
7422
7430
|
this.bem = bem;
|
|
7431
|
+
this.loading = false;
|
|
7423
7432
|
this.$$mode = signal(EditableMode.View);
|
|
7433
|
+
this.$$position = signal('center');
|
|
7434
|
+
this.$hostClass = computed(() => {
|
|
7435
|
+
return `${bem.block()} ${bem.modifier(this.$$position())}`;
|
|
7436
|
+
});
|
|
7424
7437
|
effect(() => {
|
|
7425
7438
|
this.modeChange.emit(this.$$mode());
|
|
7426
7439
|
});
|
|
7427
7440
|
}
|
|
7428
7441
|
saveEdit() {
|
|
7429
|
-
this
|
|
7430
|
-
this.
|
|
7442
|
+
this.loading = true;
|
|
7443
|
+
from(this.beforeSave?.() || Promise.resolve())
|
|
7444
|
+
.pipe(first(), finalize(() => (this.loading = false)))
|
|
7445
|
+
.subscribe(isContinue => {
|
|
7446
|
+
if (isContinue === false) {
|
|
7447
|
+
return;
|
|
7448
|
+
}
|
|
7449
|
+
this.$$mode.set(EditableMode.View);
|
|
7450
|
+
this.save.emit();
|
|
7451
|
+
});
|
|
7431
7452
|
}
|
|
7432
7453
|
cancelEdit() {
|
|
7433
7454
|
this.$$mode.set(EditableMode.View);
|
|
7434
7455
|
this.cancel.emit();
|
|
7435
7456
|
}
|
|
7436
7457
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: EditableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7437
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.3", type: EditableComponent, isStandalone: true, selector: "aui-editable", outputs: { save: "save", cancel: "cancel", modeChange: "modeChange" }, queries: [{ propertyName: "viewer", first: true, predicate: EditableViewerDirective, descendants: true, read: TemplateRef }, { propertyName: "editor", first: true, predicate: EditableEditorDirective, descendants: true, read: TemplateRef }], ngImport: i0, template: "<div [class]=\"
|
|
7458
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.3", type: EditableComponent, isStandalone: true, selector: "aui-editable", inputs: { beforeSave: "beforeSave", position: "position" }, outputs: { save: "save", cancel: "cancel", modeChange: "modeChange" }, queries: [{ propertyName: "viewer", first: true, predicate: EditableViewerDirective, descendants: true, read: TemplateRef }, { propertyName: "editor", first: true, predicate: EditableEditorDirective, descendants: true, read: TemplateRef }], ngImport: i0, template: "<div [class]=\"$hostClass()\">\n <div\n [class]=\"bem.element('viewer-container')\"\n *ngIf=\"$$mode() === EditableMode.View\"\n >\n <ng-container [ngTemplateOutlet]=\"viewer\"> </ng-container>\n <button\n aui-button=\"text\"\n [square]=\"true\"\n (click)=\"$$mode.set(EditableMode.Edit)\"\n >\n <aui-icon icon=\"pencil\"></aui-icon>\n </button>\n </div>\n <ng-container *ngIf=\"$$mode() === EditableMode.Edit\">\n <div [class]=\"bem.element('editor-container')\">\n <ng-container [ngTemplateOutlet]=\"editor\"> </ng-container>\n\n <button\n aui-button=\"text\"\n [square]=\"true\"\n [disabled]=\"loading\"\n (click)=\"saveEdit()\"\n >\n <aui-icon [icon]=\"loading ? 'spinner' : 'check'\"></aui-icon>\n </button>\n <button\n aui-button=\"text\"\n [square]=\"true\"\n (click)=\"cancelEdit()\"\n >\n <aui-icon icon=\"xmark\"></aui-icon>\n </button>\n </div>\n </ng-container>\n</div>\n", styles: [".aui-editable .aui-button--text{color:rgb(var(--aui-color-main-text))}.aui-editable .aui-button--text:first-of-type{margin-left:8px}.aui-editable .aui-button--text:hover{color:rgb(var(--aui-color-primary))}.aui-editable .aui-button--text[disabled]{color:rgb(var(--aui-color-main-text))!important}.aui-editable--center .aui-editable__view-container,.aui-editable--center .aui-editable__editor-container{display:flex;align-items:center}.aui-editable--top .aui-editable__view-container,.aui-editable--top .aui-editable__editor-container{display:flex;align-items:flex-start}.aui-editable--bottom .aui-editable__view-container,.aui-editable--bottom .aui-editable__editor-container{display:flex;align-items:flex-end}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "aui-icon", inputs: ["icon", "light", "dark", "link", "margin", "size", "color", "background", "backgroundColor"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: ButtonComponent, selector: "button[aui-button]", inputs: ["aui-button", "size", "plain", "loading", "round", "square"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
7438
7459
|
}
|
|
7439
7460
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: EditableComponent, decorators: [{
|
|
7440
7461
|
type: Component,
|
|
@@ -7445,8 +7466,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImpor
|
|
|
7445
7466
|
NgTemplateOutlet,
|
|
7446
7467
|
IconComponent,
|
|
7447
7468
|
ButtonModule,
|
|
7448
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"
|
|
7449
|
-
}], ctorParameters: function () { return []; }, propDecorators: {
|
|
7469
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"$hostClass()\">\n <div\n [class]=\"bem.element('viewer-container')\"\n *ngIf=\"$$mode() === EditableMode.View\"\n >\n <ng-container [ngTemplateOutlet]=\"viewer\"> </ng-container>\n <button\n aui-button=\"text\"\n [square]=\"true\"\n (click)=\"$$mode.set(EditableMode.Edit)\"\n >\n <aui-icon icon=\"pencil\"></aui-icon>\n </button>\n </div>\n <ng-container *ngIf=\"$$mode() === EditableMode.Edit\">\n <div [class]=\"bem.element('editor-container')\">\n <ng-container [ngTemplateOutlet]=\"editor\"> </ng-container>\n\n <button\n aui-button=\"text\"\n [square]=\"true\"\n [disabled]=\"loading\"\n (click)=\"saveEdit()\"\n >\n <aui-icon [icon]=\"loading ? 'spinner' : 'check'\"></aui-icon>\n </button>\n <button\n aui-button=\"text\"\n [square]=\"true\"\n (click)=\"cancelEdit()\"\n >\n <aui-icon icon=\"xmark\"></aui-icon>\n </button>\n </div>\n </ng-container>\n</div>\n", styles: [".aui-editable .aui-button--text{color:rgb(var(--aui-color-main-text))}.aui-editable .aui-button--text:first-of-type{margin-left:8px}.aui-editable .aui-button--text:hover{color:rgb(var(--aui-color-primary))}.aui-editable .aui-button--text[disabled]{color:rgb(var(--aui-color-main-text))!important}.aui-editable--center .aui-editable__view-container,.aui-editable--center .aui-editable__editor-container{display:flex;align-items:center}.aui-editable--top .aui-editable__view-container,.aui-editable--top .aui-editable__editor-container{display:flex;align-items:flex-start}.aui-editable--bottom .aui-editable__view-container,.aui-editable--bottom .aui-editable__editor-container{display:flex;align-items:flex-end}\n"] }]
|
|
7470
|
+
}], ctorParameters: function () { return []; }, propDecorators: { beforeSave: [{
|
|
7471
|
+
type: Input
|
|
7472
|
+
}], position: [{
|
|
7473
|
+
type: Input
|
|
7474
|
+
}], save: [{
|
|
7450
7475
|
type: Output
|
|
7451
7476
|
}], cancel: [{
|
|
7452
7477
|
type: Output
|