@alauda/ui 7.2.1-beta.9 → 7.3.0
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.
- package/drawer/component/drawer.component.d.ts +12 -10
- package/drawer/component/internal/internal.component.d.ts +12 -13
- package/drawer/drawer-ref.d.ts +5 -4
- package/drawer/drawer.service.d.ts +9 -12
- package/drawer/types.d.ts +12 -10
- package/esm2022/drawer/component/drawer.component.mjs +15 -11
- package/esm2022/drawer/component/internal/internal.component.mjs +100 -84
- package/esm2022/drawer/drawer-ref.mjs +5 -2
- package/esm2022/drawer/drawer.service.mjs +26 -54
- package/esm2022/drawer/types.mjs +6 -7
- package/esm2022/form/form-item/form-item.component.mjs +3 -3
- package/fesm2022/alauda-ui.mjs +144 -150
- package/fesm2022/alauda-ui.mjs.map +1 -1
- package/package.json +1 -1
package/fesm2022/alauda-ui.mjs
CHANGED
|
@@ -3038,11 +3038,11 @@ class FormItemComponent {
|
|
|
3038
3038
|
this.destroy$$.next();
|
|
3039
3039
|
}
|
|
3040
3040
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: FormItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: FormDirective, optional: true }, { token: i1$3.NgForm, optional: true }, { token: i1$3.FormGroupDirective, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
3041
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.3", type: FormItemComponent, isStandalone: true, selector: "aui-form-item", inputs: { labelWidth: "labelWidth", width: "width", labelPosition: "labelPosition", emptyAddon: "emptyAddon", plain: "plain" }, queries: [{ propertyName: "itemLabel", first: true, predicate: FormItemLabelDirective, descendants: true }, { propertyName: "itemControl", first: true, predicate: FormItemControlDirective, descendants: true }, { propertyName: "ngControls", predicate: NgControl, descendants: true }, { propertyName: "addons", predicate: FormItemAddonDirective }, { propertyName: "errors", predicate: FormItemErrorDirective }, { propertyName: "hints", predicate: FormItemHintDirective }], ngImport: i0, template: "<div\n [class]=\"bem.block(labelPosition)\"\n [class.isPlain]=\"plain\"\n [class.hasError]=\"hasError$ | async\"\n>\n <div\n [ngClass]=\"\n bem.element(\n 'label-wrapper',\n { required: !!itemControl?.required },\n labelPosition\n )\n \"\n [class.hasLabel]=\"!!itemLabel\"\n [style.width]=\"labelWidth\"\n >\n <ng-content select=\"label[auiFormItemLabel]\"></ng-content>\n </div>\n <div class=\"aui-form-item__container\">\n <div\n class=\"aui-form-item__content\"\n [ngClass]=\"formItemWidthClass\"\n >\n <ng-content></ng-content>\n <div\n *ngIf=\"emptyAddon || addons?.length\"\n class=\"aui-form-item__addon-wrapper\"\n >\n <ng-content select=\"[auiFormItemAddon]\"></ng-content>\n </div>\n </div>\n <div\n *ngIf=\"(hasError$ | async) && (errorCount$ | async)\"\n class=\"aui-form-item__error-wrapper\"\n >\n <ng-content select=\"[auiFormItemError]\"></ng-content>\n </div>\n <div\n *ngIf=\"hintCount$ | async\"\n class=\"aui-form-item__hint-wrapper\"\n >\n <ng-content select=\"[auiFormItemHint]\"></ng-content>\n </div>\n </div>\n</div>\n", styles: [".aui-form-item{display:flex;align-items:flex-start;margin-bottom:var(--aui-spacing-xl);font-size:var(--aui-font-size-m);line-height:var(--aui-line-height-m);font-weight:var(--aui-font-weight-normal);color:rgb(var(--aui-color-main-text))}.aui-form-item--top{flex-direction:column}.aui-form-item--top .aui-form-item__label-wrapper{line-height:var(--aui-line-height-m);margin-bottom:var(--aui-spacing-
|
|
3041
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.3", type: FormItemComponent, isStandalone: true, selector: "aui-form-item", inputs: { labelWidth: "labelWidth", width: "width", labelPosition: "labelPosition", emptyAddon: "emptyAddon", plain: "plain" }, queries: [{ propertyName: "itemLabel", first: true, predicate: FormItemLabelDirective, descendants: true }, { propertyName: "itemControl", first: true, predicate: FormItemControlDirective, descendants: true }, { propertyName: "ngControls", predicate: NgControl, descendants: true }, { propertyName: "addons", predicate: FormItemAddonDirective }, { propertyName: "errors", predicate: FormItemErrorDirective }, { propertyName: "hints", predicate: FormItemHintDirective }], ngImport: i0, template: "<div\n [class]=\"bem.block(labelPosition)\"\n [class.isPlain]=\"plain\"\n [class.hasError]=\"hasError$ | async\"\n>\n <div\n [ngClass]=\"\n bem.element(\n 'label-wrapper',\n { required: !!itemControl?.required },\n labelPosition\n )\n \"\n [class.hasLabel]=\"!!itemLabel\"\n [style.width]=\"labelWidth\"\n >\n <ng-content select=\"label[auiFormItemLabel]\"></ng-content>\n </div>\n <div class=\"aui-form-item__container\">\n <div\n class=\"aui-form-item__content\"\n [ngClass]=\"formItemWidthClass\"\n >\n <ng-content></ng-content>\n <div\n *ngIf=\"emptyAddon || addons?.length\"\n class=\"aui-form-item__addon-wrapper\"\n >\n <ng-content select=\"[auiFormItemAddon]\"></ng-content>\n </div>\n </div>\n <div\n *ngIf=\"(hasError$ | async) && (errorCount$ | async)\"\n class=\"aui-form-item__error-wrapper\"\n >\n <ng-content select=\"[auiFormItemError]\"></ng-content>\n </div>\n <div\n *ngIf=\"hintCount$ | async\"\n class=\"aui-form-item__hint-wrapper\"\n >\n <ng-content select=\"[auiFormItemHint]\"></ng-content>\n </div>\n </div>\n</div>\n", styles: [".aui-form-item{display:flex;align-items:flex-start;margin-bottom:var(--aui-spacing-xl);font-size:var(--aui-font-size-m);line-height:var(--aui-line-height-m);font-weight:var(--aui-font-weight-normal);color:rgb(var(--aui-color-main-text))}.aui-form-item--top{flex-direction:column}.aui-form-item--top .aui-form-item__label{line-height:var(--aui-line-height-m)}.aui-form-item--top .aui-form-item__label-wrapper{line-height:var(--aui-line-height-m);margin-bottom:var(--aui-spacing-s)}.aui-form-item--top .aui-form-item__label-wrapper:after{display:none}.aui-form-item__label-wrapper{display:flex;align-items:center;line-height:var(--aui-inline-height-m);flex-shrink:0;padding-right:var(--aui-spacing-m);overflow:hidden}.aui-form-item__label-wrapper--required .aui-form-item__label:before{content:\"*\";color:rgb(var(--aui-color-red));margin-right:var(--aui-spacing-s)}.aui-form-item__label-wrapper.hasLabel:after{content:\":\";align-self:flex-start;margin-left:var(--aui-spacing-xs)}.aui-form-item__label-wrapper--left{justify-content:flex-start}.aui-form-item__label-wrapper--left .aui-form-item__label{text-align:start}.aui-form-item__label-wrapper--right{justify-content:flex-end}.aui-form-item__label-wrapper--right .aui-form-item__label{text-align:end}.aui-form-item__label{display:block;line-height:var(--aui-line-height-s)}.aui-form-item__container{width:100%;min-width:0}.aui-form-item__content{display:flex;align-items:center;min-height:var(--aui-inline-height-m)}.aui-form-item__content--large .aui-form-item__control{flex:1;max-width:var(--aui-form-item-width-l)}.aui-form-item__content--medium .aui-form-item__control{flex:1;max-width:var(--aui-form-item-width-m)}.aui-form-item__content--small .aui-form-item__control{flex:1;max-width:var(--aui-form-item-width-s)}.aui-form-item__content+.aui-form-item__hint-wrapper,.aui-form-item__content+.aui-form-item__error-wrapper{margin-top:var(--aui-spacing-s)}.aui-form-item__hint-wrapper,.aui-form-item__error-wrapper{font-size:var(--aui-font-size-s);line-height:var(--aui-line-height-s);font-weight:var(--aui-font-weight-normal)}.aui-form-item__hint-wrapper{color:rgb(var(--aui-color-help-text))}.aui-form-item__error-wrapper{color:rgb(var(--aui-color-red))}.aui-form-item__addon-wrapper{align-self:flex-start;display:flex;align-items:center;flex-shrink:0;box-sizing:content-box;height:var(--aui-inline-height-m);min-width:var(--aui-icon-size-m);padding-left:var(--aui-spacing-m);color:rgb(var(--aui-color-n-4));font-size:var(--aui-font-size-m)}.aui-form-item__addon-wrapper aui-icon{font-size:var(--aui-icon-size-m)}.aui-form-item.isPlain .aui-form-item__label-wrapper{line-height:var(--aui-line-height-m)}.aui-form-item.isPlain .aui-form-item__label-wrapper--required .aui-form-item__label:before{display:none}.aui-form-item.isPlain .aui-form-item__content{min-height:var(--aui-line-height-m)}.aui-form-item.isPlain .aui-form-item__addon-wrapper{height:var(--aui-line-height-m)}.aui-form--inline{display:flex}.aui-form--inline .aui-form-item{margin-bottom:0;margin-right:var(--aui-spacing-m)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
3042
3042
|
}
|
|
3043
3043
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: FormItemComponent, decorators: [{
|
|
3044
3044
|
type: Component,
|
|
3045
|
-
args: [{ selector: 'aui-form-item', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, standalone: true, imports: [NgClass, NgIf, AsyncPipe], template: "<div\n [class]=\"bem.block(labelPosition)\"\n [class.isPlain]=\"plain\"\n [class.hasError]=\"hasError$ | async\"\n>\n <div\n [ngClass]=\"\n bem.element(\n 'label-wrapper',\n { required: !!itemControl?.required },\n labelPosition\n )\n \"\n [class.hasLabel]=\"!!itemLabel\"\n [style.width]=\"labelWidth\"\n >\n <ng-content select=\"label[auiFormItemLabel]\"></ng-content>\n </div>\n <div class=\"aui-form-item__container\">\n <div\n class=\"aui-form-item__content\"\n [ngClass]=\"formItemWidthClass\"\n >\n <ng-content></ng-content>\n <div\n *ngIf=\"emptyAddon || addons?.length\"\n class=\"aui-form-item__addon-wrapper\"\n >\n <ng-content select=\"[auiFormItemAddon]\"></ng-content>\n </div>\n </div>\n <div\n *ngIf=\"(hasError$ | async) && (errorCount$ | async)\"\n class=\"aui-form-item__error-wrapper\"\n >\n <ng-content select=\"[auiFormItemError]\"></ng-content>\n </div>\n <div\n *ngIf=\"hintCount$ | async\"\n class=\"aui-form-item__hint-wrapper\"\n >\n <ng-content select=\"[auiFormItemHint]\"></ng-content>\n </div>\n </div>\n</div>\n", styles: [".aui-form-item{display:flex;align-items:flex-start;margin-bottom:var(--aui-spacing-xl);font-size:var(--aui-font-size-m);line-height:var(--aui-line-height-m);font-weight:var(--aui-font-weight-normal);color:rgb(var(--aui-color-main-text))}.aui-form-item--top{flex-direction:column}.aui-form-item--top .aui-form-item__label-wrapper{line-height:var(--aui-line-height-m);margin-bottom:var(--aui-spacing-
|
|
3045
|
+
args: [{ selector: 'aui-form-item', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, standalone: true, imports: [NgClass, NgIf, AsyncPipe], template: "<div\n [class]=\"bem.block(labelPosition)\"\n [class.isPlain]=\"plain\"\n [class.hasError]=\"hasError$ | async\"\n>\n <div\n [ngClass]=\"\n bem.element(\n 'label-wrapper',\n { required: !!itemControl?.required },\n labelPosition\n )\n \"\n [class.hasLabel]=\"!!itemLabel\"\n [style.width]=\"labelWidth\"\n >\n <ng-content select=\"label[auiFormItemLabel]\"></ng-content>\n </div>\n <div class=\"aui-form-item__container\">\n <div\n class=\"aui-form-item__content\"\n [ngClass]=\"formItemWidthClass\"\n >\n <ng-content></ng-content>\n <div\n *ngIf=\"emptyAddon || addons?.length\"\n class=\"aui-form-item__addon-wrapper\"\n >\n <ng-content select=\"[auiFormItemAddon]\"></ng-content>\n </div>\n </div>\n <div\n *ngIf=\"(hasError$ | async) && (errorCount$ | async)\"\n class=\"aui-form-item__error-wrapper\"\n >\n <ng-content select=\"[auiFormItemError]\"></ng-content>\n </div>\n <div\n *ngIf=\"hintCount$ | async\"\n class=\"aui-form-item__hint-wrapper\"\n >\n <ng-content select=\"[auiFormItemHint]\"></ng-content>\n </div>\n </div>\n</div>\n", styles: [".aui-form-item{display:flex;align-items:flex-start;margin-bottom:var(--aui-spacing-xl);font-size:var(--aui-font-size-m);line-height:var(--aui-line-height-m);font-weight:var(--aui-font-weight-normal);color:rgb(var(--aui-color-main-text))}.aui-form-item--top{flex-direction:column}.aui-form-item--top .aui-form-item__label{line-height:var(--aui-line-height-m)}.aui-form-item--top .aui-form-item__label-wrapper{line-height:var(--aui-line-height-m);margin-bottom:var(--aui-spacing-s)}.aui-form-item--top .aui-form-item__label-wrapper:after{display:none}.aui-form-item__label-wrapper{display:flex;align-items:center;line-height:var(--aui-inline-height-m);flex-shrink:0;padding-right:var(--aui-spacing-m);overflow:hidden}.aui-form-item__label-wrapper--required .aui-form-item__label:before{content:\"*\";color:rgb(var(--aui-color-red));margin-right:var(--aui-spacing-s)}.aui-form-item__label-wrapper.hasLabel:after{content:\":\";align-self:flex-start;margin-left:var(--aui-spacing-xs)}.aui-form-item__label-wrapper--left{justify-content:flex-start}.aui-form-item__label-wrapper--left .aui-form-item__label{text-align:start}.aui-form-item__label-wrapper--right{justify-content:flex-end}.aui-form-item__label-wrapper--right .aui-form-item__label{text-align:end}.aui-form-item__label{display:block;line-height:var(--aui-line-height-s)}.aui-form-item__container{width:100%;min-width:0}.aui-form-item__content{display:flex;align-items:center;min-height:var(--aui-inline-height-m)}.aui-form-item__content--large .aui-form-item__control{flex:1;max-width:var(--aui-form-item-width-l)}.aui-form-item__content--medium .aui-form-item__control{flex:1;max-width:var(--aui-form-item-width-m)}.aui-form-item__content--small .aui-form-item__control{flex:1;max-width:var(--aui-form-item-width-s)}.aui-form-item__content+.aui-form-item__hint-wrapper,.aui-form-item__content+.aui-form-item__error-wrapper{margin-top:var(--aui-spacing-s)}.aui-form-item__hint-wrapper,.aui-form-item__error-wrapper{font-size:var(--aui-font-size-s);line-height:var(--aui-line-height-s);font-weight:var(--aui-font-weight-normal)}.aui-form-item__hint-wrapper{color:rgb(var(--aui-color-help-text))}.aui-form-item__error-wrapper{color:rgb(var(--aui-color-red))}.aui-form-item__addon-wrapper{align-self:flex-start;display:flex;align-items:center;flex-shrink:0;box-sizing:content-box;height:var(--aui-inline-height-m);min-width:var(--aui-icon-size-m);padding-left:var(--aui-spacing-m);color:rgb(var(--aui-color-n-4));font-size:var(--aui-font-size-m)}.aui-form-item__addon-wrapper aui-icon{font-size:var(--aui-icon-size-m)}.aui-form-item.isPlain .aui-form-item__label-wrapper{line-height:var(--aui-line-height-m)}.aui-form-item.isPlain .aui-form-item__label-wrapper--required .aui-form-item__label:before{display:none}.aui-form-item.isPlain .aui-form-item__content{min-height:var(--aui-line-height-m)}.aui-form-item.isPlain .aui-form-item__addon-wrapper{height:var(--aui-line-height-m)}.aui-form--inline{display:flex}.aui-form--inline .aui-form-item{margin-bottom:0;margin-right:var(--aui-spacing-m)}\n"] }]
|
|
3046
3046
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: FormDirective, decorators: [{
|
|
3047
3047
|
type: Optional
|
|
3048
3048
|
}] }, { type: i1$3.NgForm, decorators: [{
|
|
@@ -6766,12 +6766,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImpor
|
|
|
6766
6766
|
}]
|
|
6767
6767
|
}] });
|
|
6768
6768
|
|
|
6769
|
-
|
|
6770
|
-
|
|
6771
|
-
|
|
6772
|
-
|
|
6773
|
-
|
|
6774
|
-
})(DrawerSize || (DrawerSize = {}));
|
|
6769
|
+
const DrawerSize = {
|
|
6770
|
+
Small: 'small',
|
|
6771
|
+
Medium: 'medium',
|
|
6772
|
+
Big: 'big',
|
|
6773
|
+
};
|
|
6775
6774
|
|
|
6776
6775
|
const DATA = new InjectionToken('drawer-data');
|
|
6777
6776
|
const SIZE_MAPPER = {
|
|
@@ -6779,16 +6778,16 @@ const SIZE_MAPPER = {
|
|
|
6779
6778
|
[DrawerSize.Medium]: 600,
|
|
6780
6779
|
[DrawerSize.Big]: 800,
|
|
6781
6780
|
};
|
|
6781
|
+
const DRAWER_OVERLAY_BACKDROP_CLASS = 'aui-drawer-mask';
|
|
6782
6782
|
const duration = '300ms';
|
|
6783
6783
|
class DrawerInternalComponent {
|
|
6784
|
-
cdr;
|
|
6785
6784
|
injector;
|
|
6786
|
-
maskClick = new EventEmitter();
|
|
6787
|
-
closeClick = new EventEmitter();
|
|
6788
6785
|
bodyPortalOutlet;
|
|
6786
|
+
mask;
|
|
6789
6787
|
animationStep$ = new Subject();
|
|
6790
6788
|
options;
|
|
6791
|
-
showHide = 'hide';
|
|
6789
|
+
showHide$$ = new BehaviorSubject('hide');
|
|
6790
|
+
maskVisible$ = new Subject();
|
|
6792
6791
|
get drawerClasses() {
|
|
6793
6792
|
return {
|
|
6794
6793
|
'aui-drawer': true,
|
|
@@ -6799,11 +6798,10 @@ class DrawerInternalComponent {
|
|
|
6799
6798
|
};
|
|
6800
6799
|
}
|
|
6801
6800
|
get width() {
|
|
6802
|
-
return (this.options.width || SIZE_MAPPER[this.options.size || DrawerSize.Medium]);
|
|
6801
|
+
return handlePixel(this.options.width || SIZE_MAPPER[this.options.size || DrawerSize.Medium]);
|
|
6803
6802
|
}
|
|
6804
6803
|
isTemplateRef = isTemplateRef;
|
|
6805
|
-
constructor(
|
|
6806
|
-
this.cdr = cdr;
|
|
6804
|
+
constructor(injector) {
|
|
6807
6805
|
this.injector = injector;
|
|
6808
6806
|
}
|
|
6809
6807
|
ngAfterViewInit() {
|
|
@@ -6812,65 +6810,92 @@ class DrawerInternalComponent {
|
|
|
6812
6810
|
attachBodyContent() {
|
|
6813
6811
|
this.bodyPortalOutlet?.dispose();
|
|
6814
6812
|
const content = this.options.content;
|
|
6815
|
-
if (content instanceof Type) {
|
|
6816
|
-
|
|
6817
|
-
providers: [
|
|
6818
|
-
{
|
|
6819
|
-
provide: DATA,
|
|
6820
|
-
useValue: this.options.contentParams,
|
|
6821
|
-
},
|
|
6822
|
-
],
|
|
6823
|
-
parent: this.injector,
|
|
6824
|
-
}));
|
|
6825
|
-
const componentRef = this.bodyPortalOutlet?.attachComponentPortal(componentPortal);
|
|
6826
|
-
Object.assign(componentRef.instance, this.options.contentParams);
|
|
6827
|
-
componentRef.changeDetectorRef.detectChanges();
|
|
6813
|
+
if (!(content instanceof Type)) {
|
|
6814
|
+
return;
|
|
6828
6815
|
}
|
|
6816
|
+
const componentPortal = new ComponentPortal(content, null, Injector.create({
|
|
6817
|
+
providers: [
|
|
6818
|
+
{
|
|
6819
|
+
provide: DATA,
|
|
6820
|
+
useValue: this.options.contentParams,
|
|
6821
|
+
},
|
|
6822
|
+
],
|
|
6823
|
+
parent: this.injector,
|
|
6824
|
+
}));
|
|
6825
|
+
const componentRef = this.bodyPortalOutlet?.attachComponentPortal(componentPortal);
|
|
6826
|
+
Object.assign(componentRef.instance, this.options.contentParams);
|
|
6827
|
+
componentRef.changeDetectorRef.detectChanges();
|
|
6829
6828
|
}
|
|
6830
6829
|
onAnimation(event) {
|
|
6831
6830
|
const { phaseName, toState } = event;
|
|
6832
|
-
if (['show', 'hide'].includes(toState)) {
|
|
6833
|
-
|
|
6834
|
-
|
|
6835
|
-
|
|
6836
|
-
|
|
6837
|
-
|
|
6831
|
+
if (!['show', 'hide'].includes(toState)) {
|
|
6832
|
+
return;
|
|
6833
|
+
}
|
|
6834
|
+
const step = [
|
|
6835
|
+
toState,
|
|
6836
|
+
phaseName.charAt(0).toUpperCase() + phaseName.slice(1),
|
|
6837
|
+
].join('');
|
|
6838
|
+
this.animationStep$.next(step);
|
|
6839
|
+
const backdropElement = this.mask?.nativeElement;
|
|
6840
|
+
if (!backdropElement) {
|
|
6841
|
+
return;
|
|
6842
|
+
}
|
|
6843
|
+
const enters = [
|
|
6844
|
+
`${DRAWER_OVERLAY_BACKDROP_CLASS}-enter`,
|
|
6845
|
+
`${DRAWER_OVERLAY_BACKDROP_CLASS}-enter-active`,
|
|
6846
|
+
];
|
|
6847
|
+
const leaves = [
|
|
6848
|
+
`${DRAWER_OVERLAY_BACKDROP_CLASS}-leave`,
|
|
6849
|
+
`${DRAWER_OVERLAY_BACKDROP_CLASS}-leave-active`,
|
|
6850
|
+
];
|
|
6851
|
+
switch (step) {
|
|
6852
|
+
case 'showStart': {
|
|
6853
|
+
backdropElement.classList.add(...enters);
|
|
6854
|
+
this.maskVisible$.next(true);
|
|
6855
|
+
break;
|
|
6856
|
+
}
|
|
6857
|
+
case 'hideStart': {
|
|
6858
|
+
backdropElement.classList.add(...leaves);
|
|
6859
|
+
break;
|
|
6860
|
+
}
|
|
6861
|
+
case 'showDone': {
|
|
6862
|
+
backdropElement.classList.remove(...enters);
|
|
6863
|
+
break;
|
|
6864
|
+
}
|
|
6865
|
+
case 'hideDone': {
|
|
6866
|
+
this.maskVisible$.next(false);
|
|
6867
|
+
backdropElement.classList.remove(...leaves);
|
|
6868
|
+
break;
|
|
6869
|
+
}
|
|
6838
6870
|
}
|
|
6839
6871
|
}
|
|
6840
6872
|
show() {
|
|
6841
|
-
this.showHide
|
|
6842
|
-
this.cdr.markForCheck();
|
|
6873
|
+
this.showHide$$.next('show');
|
|
6843
6874
|
}
|
|
6844
6875
|
hide() {
|
|
6845
|
-
this.showHide
|
|
6846
|
-
|
|
6876
|
+
this.showHide$$.next('hide');
|
|
6877
|
+
}
|
|
6878
|
+
maskClick() {
|
|
6879
|
+
if (this.options.maskClosable) {
|
|
6880
|
+
this.hide();
|
|
6881
|
+
}
|
|
6847
6882
|
}
|
|
6848
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: DrawerInternalComponent, deps: [{ token: i0.
|
|
6849
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.3", type: DrawerInternalComponent, isStandalone: true, selector: "ng-component",
|
|
6883
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: DrawerInternalComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
|
|
6884
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.3", type: DrawerInternalComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "bodyPortalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true }, { propertyName: "mask", first: true, predicate: ["mask"], descendants: true }], ngImport: i0, template: "<div\n #mask\n class=\"aui-drawer-mask\"\n *ngIf=\"options.mask\"\n [class.isOpen]=\"maskVisible$ | async\"\n (click)=\"maskClick()\"\n></div>\n<div\n [style.marginTop]=\"options.offsetY\"\n [ngClass]=\"drawerClasses\"\n [@showHide]=\"showHide$$ | async\"\n (@showHide.start)=\"onAnimation($event)\"\n (@showHide.done)=\"onAnimation($event)\"\n [style.width]=\"width\"\n>\n <div class=\"aui-drawer__content\">\n <div class=\"aui-drawer__body-wrapper\">\n <div class=\"aui-drawer__header\">\n <div class=\"aui-drawer__title\">\n <ng-container\n *ngIf=\"isTemplateRef(options.title); else normal\"\n [ngTemplateOutlet]=\"options.title\"\n [ngTemplateOutletContext]=\"options.contentParams\"\n ></ng-container>\n <ng-template #normal>\n {{ options.title }}\n </ng-template>\n </div>\n <aui-icon\n *ngIf=\"options.showClose\"\n class=\"aui-drawer__close\"\n icon=\"xmark\"\n (click)=\"hide()\"\n ></aui-icon>\n </div>\n\n <div\n class=\"aui-drawer__body\"\n cdkScrollable\n >\n <ng-template cdkPortalOutlet></ng-template>\n <ng-container\n *ngIf=\"isTemplateRef(options.content)\"\n [ngTemplateOutlet]=\"options.content\"\n [ngTemplateOutletContext]=\"options.contentParams\"\n >\n </ng-container>\n </div>\n\n <div\n *ngIf=\"options.footer\"\n class=\"aui-drawer__footer\"\n >\n <ng-container\n *ngIf=\"isTemplateRef(options.footer); else normal\"\n [ngTemplateOutlet]=\"options.footer\"\n [ngTemplateOutletContext]=\"options.contentParams\"\n ></ng-container>\n <ng-template #normal>\n {{ options.footer }}\n </ng-template>\n </div>\n </div>\n </div>\n</div>\n", styles: ["@keyframes aui-fade-in{0%{opacity:0}to{opacity:1}}@keyframes aui-fade-out{0%{opacity:1}to{opacity:0}}@keyframes aui-zoom-in{0%{transform:scale(.2);opacity:0}to{transform:scale(1);opacity:1}}@keyframes aui-zoom-out{0%{transform:scale(1)}to{transform:scale(.2);opacity:0}}.aui-drawer-mask{position:absolute;top:0;left:0;width:100%;height:0}:root .aui-drawer-mask{background-color:rgba(var(--aui-color-origin-shadow),.4)}html[aui-theme-mode=light] .aui-drawer-mask{background-color:rgba(var(--aui-color-origin-shadow),.4)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] .aui-drawer-mask{background-color:rgba(var(--aui-color-origin-shadow),.75)}}html[aui-theme-mode=dark] .aui-drawer-mask{background-color:rgba(var(--aui-color-origin-shadow),.75)}.aui-drawer-mask.isOpen{height:100%}.aui-drawer-mask-enter,.aui-drawer-mask-leave{animation-duration:.3s;animation-fill-mode:both;animation-play-state:paused}.aui-drawer-mask-enter.aui-drawer-mask-enter-active,.aui-drawer-mask-leave.aui-drawer-mask-leave-active{animation-play-state:running;pointer-events:none}.aui-drawer-mask-enter.aui-drawer-mask-enter-active{animation-name:aui-fade-in}.aui-drawer-mask-leave.aui-drawer-mask-leave-active{animation-name:aui-fade-out}.aui-drawer-mask-enter{opacity:0;animation-timing-function:linear}.aui-drawer-mask-leave{animation-timing-function:linear}.aui-drawer{position:fixed;top:0;bottom:0;right:0;z-index:9999;font-size:var(--aui-font-size-m);line-height:var(--aui-line-height-m);font-weight:var(--aui-font-weight-normal);color:rgb(var(--aui-color-main-text))}.aui-drawer__content{background-color:rgb(var(--aui-color-n-10));position:absolute;height:100%;right:0;width:100%}:root .aui-drawer__content{box-shadow:-2px 0 8px 0 rgba(var(--aui-color-origin-shadow),.2)}html[aui-theme-mode=light] .aui-drawer__content{box-shadow:-2px 0 8px 0 rgba(var(--aui-color-origin-shadow),.2)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] .aui-drawer__content{box-shadow:-2px 0 8px 0 rgba(var(--aui-color-origin-shadow),.75)}}html[aui-theme-mode=dark] .aui-drawer__content{box-shadow:-2px 0 8px 0 rgba(var(--aui-color-origin-shadow),.75)}.aui-drawer__header{padding:20px;display:flex;flex-shrink:0;justify-content:space-between}.aui-drawer__title{flex:1;font-size:var(--aui-font-size-xxl);line-height:var(--aui-line-height-xxl);font-weight:var(--aui-font-weight-bolder);color:rgb(var(--aui-color-main-text));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.aui-drawer__close{z-index:10;flex-shrink:0;margin-top:2px;margin-left:var(--aui-spacing-xl);display:flex;justify-content:center;align-items:center;width:24px;height:24px;font-size:var(--aui-icon-size-l);color:rgb(var(--aui-color-secondary-text));border-radius:var(--aui-border-radius-m);cursor:pointer}.aui-drawer__close:hover{color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-p-6))}.aui-drawer__close:active{color:rgb(var(--aui-color-p-0));background-color:rgb(var(--aui-color-p-5))}.aui-drawer__body-wrapper{width:100%;height:100%;display:flex;flex-flow:column nowrap;position:relative;z-index:1}.aui-drawer__body{padding:0 20px;overflow:hidden;overflow-y:auto;height:100%}.aui-drawer__footer{padding:20px}.aui-drawer.hasDivider .aui-drawer__header{padding-bottom:16px;border-bottom:1px solid rgb(var(--aui-color-n-8))}.aui-drawer.hasDivider .aui-drawer__body{padding:16px 20px}.aui-drawer.hasDivider .aui-drawer__footer{padding-top:16px;border-top:1px solid rgb(var(--aui-color-n-8))}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: "directive", type: CdkScrollable$1, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1$4.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], animations: [
|
|
6850
6885
|
trigger('showHide', [
|
|
6886
|
+
state('show', style({
|
|
6887
|
+
opacity: 1,
|
|
6888
|
+
transform: 'translateX(0)',
|
|
6889
|
+
})),
|
|
6890
|
+
state('hide, void', style({
|
|
6891
|
+
opacity: 0,
|
|
6892
|
+
transform: 'translateX(100%)',
|
|
6893
|
+
})),
|
|
6851
6894
|
transition('hide => show, void => show', [
|
|
6852
|
-
animate(`${duration} ${TimingFunction.easeOut}
|
|
6853
|
-
style({
|
|
6854
|
-
opacity: 0,
|
|
6855
|
-
transform: 'translateX(100%)',
|
|
6856
|
-
}),
|
|
6857
|
-
style({
|
|
6858
|
-
opacity: 1,
|
|
6859
|
-
transform: 'translateX(0)',
|
|
6860
|
-
}),
|
|
6861
|
-
])),
|
|
6895
|
+
animate(`${duration} ${TimingFunction.easeOut}`),
|
|
6862
6896
|
]),
|
|
6863
6897
|
transition('show => hide, show => void', [
|
|
6864
|
-
animate(`${duration} ${TimingFunction.easeInOut}
|
|
6865
|
-
style({
|
|
6866
|
-
opacity: 1,
|
|
6867
|
-
transform: 'translateX(0)',
|
|
6868
|
-
}),
|
|
6869
|
-
style({
|
|
6870
|
-
opacity: 0,
|
|
6871
|
-
transform: 'translateX(100%)',
|
|
6872
|
-
}),
|
|
6873
|
-
])),
|
|
6898
|
+
animate(`${duration} ${TimingFunction.easeInOut}`),
|
|
6874
6899
|
]),
|
|
6875
6900
|
]),
|
|
6876
6901
|
], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
@@ -6885,41 +6910,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImpor
|
|
|
6885
6910
|
IconComponent,
|
|
6886
6911
|
CdkScrollable$1,
|
|
6887
6912
|
PortalModule,
|
|
6913
|
+
AsyncPipe,
|
|
6888
6914
|
], animations: [
|
|
6889
6915
|
trigger('showHide', [
|
|
6916
|
+
state('show', style({
|
|
6917
|
+
opacity: 1,
|
|
6918
|
+
transform: 'translateX(0)',
|
|
6919
|
+
})),
|
|
6920
|
+
state('hide, void', style({
|
|
6921
|
+
opacity: 0,
|
|
6922
|
+
transform: 'translateX(100%)',
|
|
6923
|
+
})),
|
|
6890
6924
|
transition('hide => show, void => show', [
|
|
6891
|
-
animate(`${duration} ${TimingFunction.easeOut}
|
|
6892
|
-
style({
|
|
6893
|
-
opacity: 0,
|
|
6894
|
-
transform: 'translateX(100%)',
|
|
6895
|
-
}),
|
|
6896
|
-
style({
|
|
6897
|
-
opacity: 1,
|
|
6898
|
-
transform: 'translateX(0)',
|
|
6899
|
-
}),
|
|
6900
|
-
])),
|
|
6925
|
+
animate(`${duration} ${TimingFunction.easeOut}`),
|
|
6901
6926
|
]),
|
|
6902
6927
|
transition('show => hide, show => void', [
|
|
6903
|
-
animate(`${duration} ${TimingFunction.easeInOut}
|
|
6904
|
-
style({
|
|
6905
|
-
opacity: 1,
|
|
6906
|
-
transform: 'translateX(0)',
|
|
6907
|
-
}),
|
|
6908
|
-
style({
|
|
6909
|
-
opacity: 0,
|
|
6910
|
-
transform: 'translateX(100%)',
|
|
6911
|
-
}),
|
|
6912
|
-
])),
|
|
6928
|
+
animate(`${duration} ${TimingFunction.easeInOut}`),
|
|
6913
6929
|
]),
|
|
6914
6930
|
]),
|
|
6915
|
-
], template: "<div\n [style.marginTop]=\"options.offsetY\"\n [ngClass]=\"drawerClasses\"\n [@showHide]=\"showHide\"\n (@showHide.start)=\"onAnimation($event)\"\n (@showHide.done)=\"onAnimation($event)\"\n [
|
|
6916
|
-
}], ctorParameters: function () { return [{ type: i0.
|
|
6917
|
-
type: Output
|
|
6918
|
-
}], closeClick: [{
|
|
6919
|
-
type: Output
|
|
6920
|
-
}], bodyPortalOutlet: [{
|
|
6931
|
+
], template: "<div\n #mask\n class=\"aui-drawer-mask\"\n *ngIf=\"options.mask\"\n [class.isOpen]=\"maskVisible$ | async\"\n (click)=\"maskClick()\"\n></div>\n<div\n [style.marginTop]=\"options.offsetY\"\n [ngClass]=\"drawerClasses\"\n [@showHide]=\"showHide$$ | async\"\n (@showHide.start)=\"onAnimation($event)\"\n (@showHide.done)=\"onAnimation($event)\"\n [style.width]=\"width\"\n>\n <div class=\"aui-drawer__content\">\n <div class=\"aui-drawer__body-wrapper\">\n <div class=\"aui-drawer__header\">\n <div class=\"aui-drawer__title\">\n <ng-container\n *ngIf=\"isTemplateRef(options.title); else normal\"\n [ngTemplateOutlet]=\"options.title\"\n [ngTemplateOutletContext]=\"options.contentParams\"\n ></ng-container>\n <ng-template #normal>\n {{ options.title }}\n </ng-template>\n </div>\n <aui-icon\n *ngIf=\"options.showClose\"\n class=\"aui-drawer__close\"\n icon=\"xmark\"\n (click)=\"hide()\"\n ></aui-icon>\n </div>\n\n <div\n class=\"aui-drawer__body\"\n cdkScrollable\n >\n <ng-template cdkPortalOutlet></ng-template>\n <ng-container\n *ngIf=\"isTemplateRef(options.content)\"\n [ngTemplateOutlet]=\"options.content\"\n [ngTemplateOutletContext]=\"options.contentParams\"\n >\n </ng-container>\n </div>\n\n <div\n *ngIf=\"options.footer\"\n class=\"aui-drawer__footer\"\n >\n <ng-container\n *ngIf=\"isTemplateRef(options.footer); else normal\"\n [ngTemplateOutlet]=\"options.footer\"\n [ngTemplateOutletContext]=\"options.contentParams\"\n ></ng-container>\n <ng-template #normal>\n {{ options.footer }}\n </ng-template>\n </div>\n </div>\n </div>\n</div>\n", styles: ["@keyframes aui-fade-in{0%{opacity:0}to{opacity:1}}@keyframes aui-fade-out{0%{opacity:1}to{opacity:0}}@keyframes aui-zoom-in{0%{transform:scale(.2);opacity:0}to{transform:scale(1);opacity:1}}@keyframes aui-zoom-out{0%{transform:scale(1)}to{transform:scale(.2);opacity:0}}.aui-drawer-mask{position:absolute;top:0;left:0;width:100%;height:0}:root .aui-drawer-mask{background-color:rgba(var(--aui-color-origin-shadow),.4)}html[aui-theme-mode=light] .aui-drawer-mask{background-color:rgba(var(--aui-color-origin-shadow),.4)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] .aui-drawer-mask{background-color:rgba(var(--aui-color-origin-shadow),.75)}}html[aui-theme-mode=dark] .aui-drawer-mask{background-color:rgba(var(--aui-color-origin-shadow),.75)}.aui-drawer-mask.isOpen{height:100%}.aui-drawer-mask-enter,.aui-drawer-mask-leave{animation-duration:.3s;animation-fill-mode:both;animation-play-state:paused}.aui-drawer-mask-enter.aui-drawer-mask-enter-active,.aui-drawer-mask-leave.aui-drawer-mask-leave-active{animation-play-state:running;pointer-events:none}.aui-drawer-mask-enter.aui-drawer-mask-enter-active{animation-name:aui-fade-in}.aui-drawer-mask-leave.aui-drawer-mask-leave-active{animation-name:aui-fade-out}.aui-drawer-mask-enter{opacity:0;animation-timing-function:linear}.aui-drawer-mask-leave{animation-timing-function:linear}.aui-drawer{position:fixed;top:0;bottom:0;right:0;z-index:9999;font-size:var(--aui-font-size-m);line-height:var(--aui-line-height-m);font-weight:var(--aui-font-weight-normal);color:rgb(var(--aui-color-main-text))}.aui-drawer__content{background-color:rgb(var(--aui-color-n-10));position:absolute;height:100%;right:0;width:100%}:root .aui-drawer__content{box-shadow:-2px 0 8px 0 rgba(var(--aui-color-origin-shadow),.2)}html[aui-theme-mode=light] .aui-drawer__content{box-shadow:-2px 0 8px 0 rgba(var(--aui-color-origin-shadow),.2)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] .aui-drawer__content{box-shadow:-2px 0 8px 0 rgba(var(--aui-color-origin-shadow),.75)}}html[aui-theme-mode=dark] .aui-drawer__content{box-shadow:-2px 0 8px 0 rgba(var(--aui-color-origin-shadow),.75)}.aui-drawer__header{padding:20px;display:flex;flex-shrink:0;justify-content:space-between}.aui-drawer__title{flex:1;font-size:var(--aui-font-size-xxl);line-height:var(--aui-line-height-xxl);font-weight:var(--aui-font-weight-bolder);color:rgb(var(--aui-color-main-text));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.aui-drawer__close{z-index:10;flex-shrink:0;margin-top:2px;margin-left:var(--aui-spacing-xl);display:flex;justify-content:center;align-items:center;width:24px;height:24px;font-size:var(--aui-icon-size-l);color:rgb(var(--aui-color-secondary-text));border-radius:var(--aui-border-radius-m);cursor:pointer}.aui-drawer__close:hover{color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-p-6))}.aui-drawer__close:active{color:rgb(var(--aui-color-p-0));background-color:rgb(var(--aui-color-p-5))}.aui-drawer__body-wrapper{width:100%;height:100%;display:flex;flex-flow:column nowrap;position:relative;z-index:1}.aui-drawer__body{padding:0 20px;overflow:hidden;overflow-y:auto;height:100%}.aui-drawer__footer{padding:20px}.aui-drawer.hasDivider .aui-drawer__header{padding-bottom:16px;border-bottom:1px solid rgb(var(--aui-color-n-8))}.aui-drawer.hasDivider .aui-drawer__body{padding:16px 20px}.aui-drawer.hasDivider .aui-drawer__footer{padding-top:16px;border-top:1px solid rgb(var(--aui-color-n-8))}\n"] }]
|
|
6932
|
+
}], ctorParameters: function () { return [{ type: i0.Injector }]; }, propDecorators: { bodyPortalOutlet: [{
|
|
6921
6933
|
type: ViewChild,
|
|
6922
6934
|
args: [CdkPortalOutlet, { static: false }]
|
|
6935
|
+
}], mask: [{
|
|
6936
|
+
type: ViewChild,
|
|
6937
|
+
args: ['mask']
|
|
6923
6938
|
}] } });
|
|
6924
6939
|
|
|
6925
6940
|
class DrawerRef {
|
|
@@ -6942,45 +6957,44 @@ class DrawerRef {
|
|
|
6942
6957
|
this.afterClosed$.complete();
|
|
6943
6958
|
});
|
|
6944
6959
|
}
|
|
6945
|
-
|
|
6960
|
+
open() {
|
|
6961
|
+
this.drawerInstance.show();
|
|
6962
|
+
}
|
|
6963
|
+
close(result) {
|
|
6946
6964
|
this.result = result;
|
|
6947
6965
|
this.drawerInstance.hide();
|
|
6948
6966
|
}
|
|
6949
6967
|
}
|
|
6950
6968
|
|
|
6951
6969
|
const DRAWER_OVERLAY_CLASS = 'aui-drawer-overlay';
|
|
6952
|
-
const DRAWER_OVERLAY_BACKDROP_CLASS = 'aui-drawer-mask';
|
|
6953
6970
|
class DrawerService {
|
|
6954
6971
|
overlay;
|
|
6955
6972
|
overlayRef;
|
|
6956
6973
|
options;
|
|
6957
|
-
|
|
6958
|
-
|
|
6974
|
+
drawerRef;
|
|
6975
|
+
invisible$ = new Subject();
|
|
6976
|
+
drawerInternalComponentRef;
|
|
6959
6977
|
constructor(overlay) {
|
|
6960
6978
|
this.overlay = overlay;
|
|
6961
6979
|
}
|
|
6962
6980
|
open(options) {
|
|
6963
|
-
this.disposeOverlay();
|
|
6964
6981
|
this.updateOptions(options);
|
|
6965
6982
|
this.createOverlay();
|
|
6966
|
-
|
|
6967
|
-
|
|
6968
|
-
|
|
6969
|
-
this.
|
|
6983
|
+
this.createDrawer();
|
|
6984
|
+
this.drawerRef = new DrawerRef(this.drawerInternalComponentRef.instance);
|
|
6985
|
+
this.drawerRef.open();
|
|
6986
|
+
return this.drawerRef;
|
|
6970
6987
|
}
|
|
6971
6988
|
updateOptions(options) {
|
|
6972
6989
|
this.options = options;
|
|
6973
6990
|
}
|
|
6974
6991
|
createOverlay() {
|
|
6975
|
-
|
|
6976
|
-
|
|
6977
|
-
|
|
6978
|
-
this.close();
|
|
6979
|
-
}
|
|
6980
|
-
});
|
|
6992
|
+
if (!this.overlayRef) {
|
|
6993
|
+
this.overlayRef = this.overlay.create(this.getOverlayConfig());
|
|
6994
|
+
}
|
|
6981
6995
|
this.overlayRef
|
|
6982
6996
|
.outsidePointerEvents()
|
|
6983
|
-
.pipe(takeUntil(this.
|
|
6997
|
+
.pipe(takeUntil(this.invisible$))
|
|
6984
6998
|
.subscribe(event => {
|
|
6985
6999
|
if (this.overlayRef &&
|
|
6986
7000
|
this.options.hideOnClickOutside &&
|
|
@@ -6988,49 +7002,31 @@ class DrawerService {
|
|
|
6988
7002
|
!this.overlayRef.hostElement?.parentNode?.contains(event.target)) {
|
|
6989
7003
|
event.stopPropagation();
|
|
6990
7004
|
event.preventDefault();
|
|
6991
|
-
this.close();
|
|
7005
|
+
this.drawerRef.close();
|
|
6992
7006
|
}
|
|
6993
7007
|
});
|
|
6994
7008
|
this.overlayRef.getConfig().scrollStrategy.enable();
|
|
6995
7009
|
if (this.options.mask) {
|
|
6996
7010
|
fromEvent(window, 'resize')
|
|
6997
|
-
.pipe(debounceTime(100), filter(() => document.documentElement.scrollHeight > window.innerHeight), takeUntil(this.
|
|
7011
|
+
.pipe(debounceTime(100), filter(() => document.documentElement.scrollHeight > window.innerHeight), takeUntil(this.invisible$))
|
|
6998
7012
|
.subscribe(() => {
|
|
6999
7013
|
this.overlayRef.getConfig().scrollStrategy.enable();
|
|
7000
7014
|
});
|
|
7001
7015
|
}
|
|
7002
7016
|
}
|
|
7003
7017
|
createDrawer() {
|
|
7004
|
-
|
|
7005
|
-
|
|
7006
|
-
|
|
7007
|
-
|
|
7008
|
-
|
|
7009
|
-
|
|
7010
|
-
`${DRAWER_OVERLAY_BACKDROP_CLASS}-enter`,
|
|
7011
|
-
`${DRAWER_OVERLAY_BACKDROP_CLASS}-enter-active`,
|
|
7012
|
-
];
|
|
7013
|
-
const leaves = [
|
|
7014
|
-
`${DRAWER_OVERLAY_BACKDROP_CLASS}-leave`,
|
|
7015
|
-
`${DRAWER_OVERLAY_BACKDROP_CLASS}-leave-active`,
|
|
7016
|
-
];
|
|
7017
|
-
if (step === 'showStart') {
|
|
7018
|
-
backdropElement.classList.add(...enters);
|
|
7019
|
-
}
|
|
7020
|
-
if (step === 'hideStart') {
|
|
7021
|
-
backdropElement.classList.add(...leaves);
|
|
7022
|
-
}
|
|
7023
|
-
if (['showDone', 'hideDone'].includes(step)) {
|
|
7024
|
-
backdropElement.classList.remove(...enters, ...leaves);
|
|
7025
|
-
}
|
|
7026
|
-
}
|
|
7018
|
+
if (this.drawerInternalComponentRef) {
|
|
7019
|
+
return;
|
|
7020
|
+
}
|
|
7021
|
+
const drawerInternalComponentRef = this.overlayRef.attach(new ComponentPortal((DrawerInternalComponent)));
|
|
7022
|
+
drawerInternalComponentRef.instance.options = this.options;
|
|
7023
|
+
drawerInternalComponentRef.instance.animationStep$.subscribe(step => {
|
|
7027
7024
|
if (step === 'hideDone') {
|
|
7028
|
-
this.
|
|
7025
|
+
this.invisible$.next();
|
|
7026
|
+
this.overlayRef?.getConfig().scrollStrategy.disable();
|
|
7029
7027
|
}
|
|
7030
7028
|
});
|
|
7031
|
-
|
|
7032
|
-
this.drawerCpt.instance.show();
|
|
7033
|
-
return drawerRef;
|
|
7029
|
+
this.drawerInternalComponentRef = drawerInternalComponentRef;
|
|
7034
7030
|
}
|
|
7035
7031
|
getOverlayConfig() {
|
|
7036
7032
|
return new OverlayConfig({
|
|
@@ -7039,21 +7035,15 @@ class DrawerService {
|
|
|
7039
7035
|
scrollStrategy: this.options.mask
|
|
7040
7036
|
? this.overlay.scrollStrategies.block()
|
|
7041
7037
|
: this.overlay.scrollStrategies.noop(),
|
|
7042
|
-
hasBackdrop: this.options.mask,
|
|
7043
|
-
backdropClass: DRAWER_OVERLAY_BACKDROP_CLASS,
|
|
7044
7038
|
});
|
|
7045
7039
|
}
|
|
7046
|
-
|
|
7047
|
-
this.
|
|
7048
|
-
this.onDestroy$.complete();
|
|
7040
|
+
ngOnDestroy() {
|
|
7041
|
+
this.invisible$.next();
|
|
7049
7042
|
if (this.overlayRef) {
|
|
7050
7043
|
this.overlayRef.getConfig().scrollStrategy.disable();
|
|
7051
7044
|
this.overlayRef.dispose();
|
|
7045
|
+
this.overlayRef = null;
|
|
7052
7046
|
}
|
|
7053
|
-
this.overlayRef = null;
|
|
7054
|
-
}
|
|
7055
|
-
ngOnDestroy() {
|
|
7056
|
-
this.disposeOverlay();
|
|
7057
7047
|
}
|
|
7058
7048
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: DrawerService, deps: [{ token: i1$2.Overlay }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
7059
7049
|
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: DrawerService });
|
|
@@ -7110,10 +7100,13 @@ class DrawerComponent {
|
|
|
7110
7100
|
mask;
|
|
7111
7101
|
maskClosable;
|
|
7112
7102
|
divider = true;
|
|
7103
|
+
width;
|
|
7104
|
+
contentParams;
|
|
7113
7105
|
close = new EventEmitter();
|
|
7114
7106
|
titleTemplate;
|
|
7115
7107
|
contentTemplateOrComponent;
|
|
7116
7108
|
footerTemplate;
|
|
7109
|
+
drawerRef;
|
|
7117
7110
|
constructor(drawerService) {
|
|
7118
7111
|
this.drawerService = drawerService;
|
|
7119
7112
|
}
|
|
@@ -7122,10 +7115,13 @@ class DrawerComponent {
|
|
|
7122
7115
|
if (visible) {
|
|
7123
7116
|
const value = visible.currentValue;
|
|
7124
7117
|
if (value) {
|
|
7125
|
-
this.open();
|
|
7118
|
+
this.drawerRef = this.drawerService.open(this);
|
|
7119
|
+
this.drawerRef.afterClosed.pipe(first()).subscribe(res => {
|
|
7120
|
+
this.close.emit(res);
|
|
7121
|
+
});
|
|
7126
7122
|
}
|
|
7127
7123
|
else if (!visible.firstChange) {
|
|
7128
|
-
this.
|
|
7124
|
+
this.drawerRef.close();
|
|
7129
7125
|
}
|
|
7130
7126
|
}
|
|
7131
7127
|
}
|
|
@@ -7134,20 +7130,14 @@ class DrawerComponent {
|
|
|
7134
7130
|
this.content = this.content || this.contentTemplateOrComponent;
|
|
7135
7131
|
this.footer = this.footer || this.footerTemplate;
|
|
7136
7132
|
}
|
|
7137
|
-
open() {
|
|
7138
|
-
const ref = this.drawerService.open(this);
|
|
7139
|
-
ref.afterClosed.pipe(first()).subscribe(res => {
|
|
7140
|
-
this.close.emit(res);
|
|
7141
|
-
});
|
|
7142
|
-
}
|
|
7143
7133
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: DrawerComponent, deps: [{ token: DrawerService }], target: i0.ɵɵFactoryTarget.Component });
|
|
7144
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.3", type: DrawerComponent, isStandalone: true, selector: "aui-drawer", inputs: { title: "title", footer: "footer", size: "size", offsetY: "offsetY", visible: "visible", content: "content", hideOnClickOutside: "hideOnClickOutside", showClose: "showClose", drawerClass: "drawerClass", mask: "mask", maskClosable: "maskClosable", divider: "divider" }, outputs: { close: "close" }, providers: [DrawerService], queries: [{ propertyName: "titleTemplate", first: true, predicate: DrawerHeaderDirective, descendants: true, read: TemplateRef }, { propertyName: "contentTemplateOrComponent", first: true, predicate: DrawerContentDirective, descendants: true, read: TemplateRef }, { propertyName: "footerTemplate", first: true, predicate: DrawerFooterDirective, descendants: true, read: TemplateRef }], usesOnChanges: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
7134
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.3", type: DrawerComponent, isStandalone: true, selector: "aui-drawer", inputs: { title: "title", footer: "footer", size: "size", offsetY: "offsetY", visible: "visible", content: "content", hideOnClickOutside: "hideOnClickOutside", showClose: "showClose", drawerClass: "drawerClass", mask: "mask", maskClosable: "maskClosable", divider: "divider", width: "width", contentParams: "contentParams" }, outputs: { close: "close" }, providers: [DrawerService], queries: [{ propertyName: "titleTemplate", first: true, predicate: DrawerHeaderDirective, descendants: true, read: TemplateRef }, { propertyName: "contentTemplateOrComponent", first: true, predicate: DrawerContentDirective, descendants: true, read: TemplateRef }, { propertyName: "footerTemplate", first: true, predicate: DrawerFooterDirective, descendants: true, read: TemplateRef }], usesOnChanges: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
7145
7135
|
}
|
|
7146
7136
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: DrawerComponent, decorators: [{
|
|
7147
7137
|
type: Component,
|
|
7148
7138
|
args: [{
|
|
7149
7139
|
selector: 'aui-drawer',
|
|
7150
|
-
template: '',
|
|
7140
|
+
template: '<ng-content></ng-content>',
|
|
7151
7141
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
7152
7142
|
standalone: true,
|
|
7153
7143
|
providers: [DrawerService],
|
|
@@ -7176,6 +7166,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImpor
|
|
|
7176
7166
|
type: Input
|
|
7177
7167
|
}], divider: [{
|
|
7178
7168
|
type: Input
|
|
7169
|
+
}], width: [{
|
|
7170
|
+
type: Input
|
|
7171
|
+
}], contentParams: [{
|
|
7172
|
+
type: Input
|
|
7179
7173
|
}], close: [{
|
|
7180
7174
|
type: Output
|
|
7181
7175
|
}], titleTemplate: [{
|