@alauda/ui 7.2.1-beta.19 → 7.2.1-beta.20
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 +1 -1
- package/drawer/component/internal/internal.component.d.ts +6 -7
- package/drawer/drawer.service.d.ts +3 -4
- package/drawer/types.d.ts +2 -6
- package/esm2022/drawer/component/drawer.component.mjs +2 -3
- package/esm2022/drawer/component/internal/internal.component.mjs +66 -63
- package/esm2022/drawer/drawer-ref.mjs +2 -2
- package/esm2022/drawer/drawer.service.mjs +12 -15
- package/esm2022/drawer/types.mjs +2 -7
- package/fesm2022/alauda-ui.mjs +78 -84
- package/fesm2022/alauda-ui.mjs.map +1 -1
- package/package.json +1 -1
package/fesm2022/alauda-ui.mjs
CHANGED
|
@@ -6766,30 +6766,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImpor
|
|
|
6766
6766
|
}]
|
|
6767
6767
|
}] });
|
|
6768
6768
|
|
|
6769
|
-
var DrawerSize;
|
|
6770
|
-
(function (DrawerSize) {
|
|
6771
|
-
DrawerSize["Small"] = "small";
|
|
6772
|
-
DrawerSize["Medium"] = "medium";
|
|
6773
|
-
DrawerSize["Big"] = "big";
|
|
6774
|
-
})(DrawerSize || (DrawerSize = {}));
|
|
6775
|
-
|
|
6776
6769
|
const DATA = new InjectionToken('drawer-data');
|
|
6777
6770
|
const SIZE_MAPPER = {
|
|
6778
|
-
|
|
6779
|
-
|
|
6780
|
-
|
|
6771
|
+
small: 400,
|
|
6772
|
+
medium: 600,
|
|
6773
|
+
big: 800,
|
|
6781
6774
|
};
|
|
6782
6775
|
const DRAWER_OVERLAY_BACKDROP_CLASS = 'aui-drawer-mask';
|
|
6783
6776
|
const duration = '300ms';
|
|
6784
6777
|
class DrawerInternalComponent {
|
|
6785
|
-
cdr;
|
|
6786
6778
|
injector;
|
|
6787
6779
|
bodyPortalOutlet;
|
|
6788
6780
|
mask;
|
|
6789
6781
|
animationStep$ = new Subject();
|
|
6790
6782
|
options;
|
|
6791
|
-
showHide =
|
|
6792
|
-
maskVisible;
|
|
6783
|
+
showHide$ = new Subject();
|
|
6784
|
+
maskVisible$ = new Subject();
|
|
6793
6785
|
get drawerClasses() {
|
|
6794
6786
|
return {
|
|
6795
6787
|
'aui-drawer': true,
|
|
@@ -6800,11 +6792,10 @@ class DrawerInternalComponent {
|
|
|
6800
6792
|
};
|
|
6801
6793
|
}
|
|
6802
6794
|
get width() {
|
|
6803
|
-
return handlePixel(this.options.width || SIZE_MAPPER[this.options.size ||
|
|
6795
|
+
return handlePixel(this.options.width || SIZE_MAPPER[this.options.size || 'medium']);
|
|
6804
6796
|
}
|
|
6805
6797
|
isTemplateRef = isTemplateRef;
|
|
6806
|
-
constructor(
|
|
6807
|
-
this.cdr = cdr;
|
|
6798
|
+
constructor(injector) {
|
|
6808
6799
|
this.injector = injector;
|
|
6809
6800
|
}
|
|
6810
6801
|
ngAfterViewInit() {
|
|
@@ -6813,71 +6804,76 @@ class DrawerInternalComponent {
|
|
|
6813
6804
|
attachBodyContent() {
|
|
6814
6805
|
this.bodyPortalOutlet?.dispose();
|
|
6815
6806
|
const content = this.options.content;
|
|
6816
|
-
if (content instanceof Type) {
|
|
6817
|
-
|
|
6818
|
-
providers: [
|
|
6819
|
-
{
|
|
6820
|
-
provide: DATA,
|
|
6821
|
-
useValue: this.options.contentParams,
|
|
6822
|
-
},
|
|
6823
|
-
],
|
|
6824
|
-
parent: this.injector,
|
|
6825
|
-
}));
|
|
6826
|
-
const componentRef = this.bodyPortalOutlet?.attachComponentPortal(componentPortal);
|
|
6827
|
-
Object.assign(componentRef.instance, this.options.contentParams);
|
|
6828
|
-
componentRef.changeDetectorRef.detectChanges();
|
|
6807
|
+
if (!(content instanceof Type)) {
|
|
6808
|
+
return;
|
|
6829
6809
|
}
|
|
6810
|
+
const componentPortal = new ComponentPortal(content, null, Injector.create({
|
|
6811
|
+
providers: [
|
|
6812
|
+
{
|
|
6813
|
+
provide: DATA,
|
|
6814
|
+
useValue: this.options.contentParams,
|
|
6815
|
+
},
|
|
6816
|
+
],
|
|
6817
|
+
parent: this.injector,
|
|
6818
|
+
}));
|
|
6819
|
+
const componentRef = this.bodyPortalOutlet?.attachComponentPortal(componentPortal);
|
|
6820
|
+
Object.assign(componentRef.instance, this.options.contentParams);
|
|
6821
|
+
componentRef.changeDetectorRef.detectChanges();
|
|
6830
6822
|
}
|
|
6831
6823
|
onAnimation(event) {
|
|
6832
6824
|
const { phaseName, toState } = event;
|
|
6833
|
-
if (['show', 'hide'].includes(toState)) {
|
|
6834
|
-
|
|
6835
|
-
|
|
6836
|
-
|
|
6837
|
-
|
|
6838
|
-
|
|
6839
|
-
|
|
6840
|
-
|
|
6841
|
-
|
|
6842
|
-
|
|
6843
|
-
|
|
6844
|
-
|
|
6845
|
-
|
|
6846
|
-
|
|
6847
|
-
|
|
6848
|
-
|
|
6849
|
-
|
|
6850
|
-
|
|
6851
|
-
|
|
6852
|
-
|
|
6853
|
-
|
|
6854
|
-
|
|
6855
|
-
|
|
6856
|
-
|
|
6857
|
-
|
|
6858
|
-
|
|
6859
|
-
|
|
6860
|
-
|
|
6861
|
-
|
|
6862
|
-
|
|
6825
|
+
if (!['show', 'hide'].includes(toState)) {
|
|
6826
|
+
return;
|
|
6827
|
+
}
|
|
6828
|
+
const step = [
|
|
6829
|
+
toState,
|
|
6830
|
+
phaseName.charAt(0).toUpperCase() + phaseName.slice(1),
|
|
6831
|
+
].join('');
|
|
6832
|
+
this.animationStep$.next(step);
|
|
6833
|
+
const backdropElement = this.mask?.nativeElement;
|
|
6834
|
+
if (!backdropElement) {
|
|
6835
|
+
return;
|
|
6836
|
+
}
|
|
6837
|
+
const enters = [
|
|
6838
|
+
`${DRAWER_OVERLAY_BACKDROP_CLASS}-enter`,
|
|
6839
|
+
`${DRAWER_OVERLAY_BACKDROP_CLASS}-enter-active`,
|
|
6840
|
+
];
|
|
6841
|
+
const leaves = [
|
|
6842
|
+
`${DRAWER_OVERLAY_BACKDROP_CLASS}-leave`,
|
|
6843
|
+
`${DRAWER_OVERLAY_BACKDROP_CLASS}-leave-active`,
|
|
6844
|
+
];
|
|
6845
|
+
switch (step) {
|
|
6846
|
+
case 'showStart': {
|
|
6847
|
+
this.maskVisible$.next(true);
|
|
6848
|
+
backdropElement.classList.add(...enters);
|
|
6849
|
+
break;
|
|
6850
|
+
}
|
|
6851
|
+
case 'hideStart': {
|
|
6852
|
+
backdropElement.classList.add(...leaves);
|
|
6853
|
+
break;
|
|
6854
|
+
}
|
|
6855
|
+
case 'hideDone': {
|
|
6856
|
+
this.maskVisible$.next(false);
|
|
6857
|
+
break;
|
|
6863
6858
|
}
|
|
6864
6859
|
}
|
|
6860
|
+
if (['showDone', 'hideDone'].includes(step)) {
|
|
6861
|
+
backdropElement.classList.remove(...enters, ...leaves);
|
|
6862
|
+
}
|
|
6865
6863
|
}
|
|
6866
6864
|
show() {
|
|
6867
|
-
this.showHide
|
|
6868
|
-
this.cdr.markForCheck();
|
|
6865
|
+
this.showHide$.next('show');
|
|
6869
6866
|
}
|
|
6870
6867
|
hide() {
|
|
6871
|
-
this.showHide
|
|
6872
|
-
this.cdr.markForCheck();
|
|
6868
|
+
this.showHide$.next('hide');
|
|
6873
6869
|
}
|
|
6874
6870
|
maskClick() {
|
|
6875
6871
|
if (this.options.maskClosable) {
|
|
6876
6872
|
this.hide();
|
|
6877
6873
|
}
|
|
6878
6874
|
}
|
|
6879
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: DrawerInternalComponent, deps: [{ token: i0.
|
|
6880
|
-
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\"\n (click)=\"maskClick()\"\n></div>\n<div\n [style.marginTop]=\"options.offsetY\"\n [ngClass]=\"drawerClasses\"\n [@showHide]=\"showHide\"\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
|
|
6875
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: DrawerInternalComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
|
|
6876
|
+
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: [
|
|
6881
6877
|
trigger('showHide', [
|
|
6882
6878
|
state('show', style({
|
|
6883
6879
|
opacity: 1,
|
|
@@ -6906,6 +6902,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImpor
|
|
|
6906
6902
|
IconComponent,
|
|
6907
6903
|
CdkScrollable$1,
|
|
6908
6904
|
PortalModule,
|
|
6905
|
+
AsyncPipe,
|
|
6909
6906
|
], animations: [
|
|
6910
6907
|
trigger('showHide', [
|
|
6911
6908
|
state('show', style({
|
|
@@ -6923,8 +6920,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImpor
|
|
|
6923
6920
|
animate(`${duration} ${TimingFunction.easeInOut}`),
|
|
6924
6921
|
]),
|
|
6925
6922
|
]),
|
|
6926
|
-
], template: "<div\n #mask\n class=\"aui-drawer-mask\"\n *ngIf=\"options.mask\"\n [class.isOpen]=\"maskVisible\"\n (click)=\"maskClick()\"\n></div>\n<div\n [style.marginTop]=\"options.offsetY\"\n [ngClass]=\"drawerClasses\"\n [@showHide]=\"showHide\"\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
|
|
6927
|
-
}], ctorParameters: function () { return [{ type: i0.
|
|
6923
|
+
], 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"] }]
|
|
6924
|
+
}], ctorParameters: function () { return [{ type: i0.Injector }]; }, propDecorators: { bodyPortalOutlet: [{
|
|
6928
6925
|
type: ViewChild,
|
|
6929
6926
|
args: [CdkPortalOutlet, { static: false }]
|
|
6930
6927
|
}], mask: [{
|
|
@@ -6955,7 +6952,7 @@ class DrawerRef {
|
|
|
6955
6952
|
open() {
|
|
6956
6953
|
this.drawerInstance.show();
|
|
6957
6954
|
}
|
|
6958
|
-
close(result
|
|
6955
|
+
close(result) {
|
|
6959
6956
|
this.result = result;
|
|
6960
6957
|
this.drawerInstance.hide();
|
|
6961
6958
|
}
|
|
@@ -6968,7 +6965,7 @@ class DrawerService {
|
|
|
6968
6965
|
options;
|
|
6969
6966
|
drawerRef;
|
|
6970
6967
|
invisible$ = new Subject();
|
|
6971
|
-
|
|
6968
|
+
drawerInternalComponentRef;
|
|
6972
6969
|
constructor(overlay) {
|
|
6973
6970
|
this.overlay = overlay;
|
|
6974
6971
|
}
|
|
@@ -6976,7 +6973,7 @@ class DrawerService {
|
|
|
6976
6973
|
this.updateOptions(options);
|
|
6977
6974
|
this.createOverlay();
|
|
6978
6975
|
this.createDrawer();
|
|
6979
|
-
this.drawerRef = new DrawerRef(this.
|
|
6976
|
+
this.drawerRef = new DrawerRef(this.drawerInternalComponentRef.instance);
|
|
6980
6977
|
this.drawerRef.open();
|
|
6981
6978
|
return this.drawerRef;
|
|
6982
6979
|
}
|
|
@@ -7010,18 +7007,18 @@ class DrawerService {
|
|
|
7010
7007
|
}
|
|
7011
7008
|
}
|
|
7012
7009
|
createDrawer() {
|
|
7013
|
-
if (this.
|
|
7010
|
+
if (this.drawerInternalComponentRef) {
|
|
7014
7011
|
return;
|
|
7015
7012
|
}
|
|
7016
|
-
const
|
|
7017
|
-
|
|
7018
|
-
|
|
7013
|
+
const drawerInternalComponentRef = this.overlayRef.attach(new ComponentPortal((DrawerInternalComponent)));
|
|
7014
|
+
drawerInternalComponentRef.instance.options = this.options;
|
|
7015
|
+
drawerInternalComponentRef.instance.animationStep$.subscribe(step => {
|
|
7019
7016
|
if (step === 'hideDone') {
|
|
7020
|
-
this.invisible$.next(
|
|
7017
|
+
this.invisible$.next();
|
|
7021
7018
|
this.overlayRef?.getConfig().scrollStrategy.disable();
|
|
7022
7019
|
}
|
|
7023
7020
|
});
|
|
7024
|
-
this.
|
|
7021
|
+
this.drawerInternalComponentRef = drawerInternalComponentRef;
|
|
7025
7022
|
}
|
|
7026
7023
|
getOverlayConfig() {
|
|
7027
7024
|
return new OverlayConfig({
|
|
@@ -7032,16 +7029,13 @@ class DrawerService {
|
|
|
7032
7029
|
: this.overlay.scrollStrategies.noop(),
|
|
7033
7030
|
});
|
|
7034
7031
|
}
|
|
7035
|
-
|
|
7036
|
-
this.invisible$.next(
|
|
7032
|
+
ngOnDestroy() {
|
|
7033
|
+
this.invisible$.next();
|
|
7037
7034
|
if (this.overlayRef) {
|
|
7038
7035
|
this.overlayRef.getConfig().scrollStrategy.disable();
|
|
7039
7036
|
this.overlayRef.dispose();
|
|
7037
|
+
this.overlayRef = null;
|
|
7040
7038
|
}
|
|
7041
|
-
this.overlayRef = null;
|
|
7042
|
-
}
|
|
7043
|
-
ngOnDestroy() {
|
|
7044
|
-
this.disposeOverlay();
|
|
7045
7039
|
}
|
|
7046
7040
|
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 });
|
|
7047
7041
|
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: DrawerService });
|
|
@@ -7088,7 +7082,7 @@ class DrawerComponent {
|
|
|
7088
7082
|
drawerService;
|
|
7089
7083
|
title;
|
|
7090
7084
|
footer;
|
|
7091
|
-
size =
|
|
7085
|
+
size = 'medium';
|
|
7092
7086
|
offsetY = '0px';
|
|
7093
7087
|
visible;
|
|
7094
7088
|
content;
|
|
@@ -12436,5 +12430,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImpor
|
|
|
12436
12430
|
}]
|
|
12437
12431
|
}] });
|
|
12438
12432
|
|
|
12439
|
-
export { ACCORDION_MODULE, ANCHOR_MODULE, AUTOCOMPLETE_MODULE, AccordionComponent, AccordionItemComponent, AccordionItemContentDirective, AccordionItemHeaderDirective, AccordionModule, AnchorComponent, AnchorDirective, AnchorDirectiveChild, AnchorLabelDirective, AnchorModule, AnchorTreeComponent, AuiSelectValidators, AutoCompleteDirective, AutocompleteComponent, AutocompleteModule, AutocompletePlaceholderComponent, AutosizeDirective, BREADCRUMB_MODULE, BackTopComponent, BackTopModule, BaseDialogConfig, BaseTooltip, Bem, BreadcrumbComponent, BreadcrumbItemComponent, BreadcrumbModule, ButtonComponent, ButtonGroupComponent, ButtonModule, ButtonType, CARD_MODULE, CHECKBOX_MODULE, CONTROL_ITEM_HEIGHT, CalendarFooterComponent, CalendarHeaderComponent, CardComponent, CardFooterDirective, CardHeaderDirective, CardModule, CheckTagComponent, CheckboxComponent, CheckboxGroupComponent, CheckboxModule, ColorPickerComponent, ColorPickerModule, CommonFormControl, ComponentSize, ConfirmDialogConfig, ConfirmType, CssVarPipe, CustomAutoCompleteDirective, DATE, DATE_NAV_RANGES, DATE_TYPES, DAY, DAY_PANEL_COLUMN_COUNT, DAY_PANEL_ROW_COUNT, DIALOG_DATA, DISPLAY_DELAY, DateNavRange, DatePickerComponent, DatePickerModule, DatePickerPanelComponent, DatePickerTriggerComponent, DatePickerType, DateRangePickerPanelComponent, DialogCloseDirective, DialogComponent, DialogConfig, DialogContentComponent, DialogFooterComponent, DialogHeaderComponent, DialogModule, DialogRef, DialogService, DialogSize, DrawerComponent, DrawerContentDirective, DrawerFooterDirective, DrawerHeaderDirective, DrawerModule, DrawerRef, DrawerService,
|
|
12433
|
+
export { ACCORDION_MODULE, ANCHOR_MODULE, AUTOCOMPLETE_MODULE, AccordionComponent, AccordionItemComponent, AccordionItemContentDirective, AccordionItemHeaderDirective, AccordionModule, AnchorComponent, AnchorDirective, AnchorDirectiveChild, AnchorLabelDirective, AnchorModule, AnchorTreeComponent, AuiSelectValidators, AutoCompleteDirective, AutocompleteComponent, AutocompleteModule, AutocompletePlaceholderComponent, AutosizeDirective, BREADCRUMB_MODULE, BackTopComponent, BackTopModule, BaseDialogConfig, BaseTooltip, Bem, BreadcrumbComponent, BreadcrumbItemComponent, BreadcrumbModule, ButtonComponent, ButtonGroupComponent, ButtonModule, ButtonType, CARD_MODULE, CHECKBOX_MODULE, CONTROL_ITEM_HEIGHT, CalendarFooterComponent, CalendarHeaderComponent, CardComponent, CardFooterDirective, CardHeaderDirective, CardModule, CheckTagComponent, CheckboxComponent, CheckboxGroupComponent, CheckboxModule, ColorPickerComponent, ColorPickerModule, CommonFormControl, ComponentSize, ConfirmDialogConfig, ConfirmType, CssVarPipe, CustomAutoCompleteDirective, DATE, DATE_NAV_RANGES, DATE_TYPES, DAY, DAY_PANEL_COLUMN_COUNT, DAY_PANEL_ROW_COUNT, DIALOG_DATA, DISPLAY_DELAY, DateNavRange, DatePickerComponent, DatePickerModule, DatePickerPanelComponent, DatePickerTriggerComponent, DatePickerType, DateRangePickerPanelComponent, DialogCloseDirective, DialogComponent, DialogConfig, DialogContentComponent, DialogFooterComponent, DialogHeaderComponent, DialogModule, DialogRef, DialogService, DialogSize, DrawerComponent, DrawerContentDirective, DrawerFooterDirective, DrawerHeaderDirective, DrawerModule, DrawerRef, DrawerService, DropdownActiveDirective, DropdownButtonComponent, DropdownDirective, DropdownModule, FORM_MODULE, FixedSizeTableVirtualScrollDirective, FixedSizeTableVirtualScrollStrategy, FixedSizeVirtualScrollDirective, FormDirective, FormItemAddonDirective, FormItemComponent, FormItemControlDirective, FormItemErrorDirective, FormItemHintDirective, FormItemLabelDirective, FormItemWidth, FormModule, HIDDEN_DELAY, HOUR, HOUR_ITEMS, I18NInterfaceToken, I18nModule, I18nPipe, I18nService, INLINE_ALERT_MODULE, INPUT_ERROR_KEY, INPUT_GROUP_MODULE, IconComponent, IconModule, IconRegisterService, IncludesDirective, InlineAlertComponent, InlineAlertModule, InlineAlertTitleDirective, InlineAlertType, InputAddonAfterDirective, InputAddonBeforeDirective, InputComponent, InputGroupComponent, InputModule, InputPrefixDirective, InputSuffixDirective, LabelPosition, MESSAGE_CONFIG, MESSAGE_DEFAULT_CONFIG, MINUTE, MINUTE_ITEMS, MONTH, MONTH_PANEL_COLUMN_COUNT, MONTH_PANEL_ROW_COUNT, MenuComponent, MenuGroupComponent, MenuGroupTitleDirective, MenuItemComponent, MenuItemType, MessageConfig, MessageModule, MessageService, MessageType, MultiSelectComponent, NOTIFICATION_CONFIG, NOTIFICATION_DEFAULT_CONFIG, NUMBER_INPUT_MODULE, NotificationComponent, NotificationModule, NotificationService, NumberInputComponent, OptionComponent, OptionContentDirective, OptionGroupComponent, OptionGroupTitleDirective, OptionPlaceholderComponent, PaginatorComponent, PaginatorIntl, PaginatorModule, PickerPanelComponent, RadioButtonComponent, RadioComponent, RadioGroupComponent, RadioModule, RadioSize, RangePickerComponent, RgbColorPipe, RgbaColorPipe, SECOND, SECOND_ITEMS, SELECT_MODULE, SORT_MODULE, ScrollingModule, SearchComponent, SectionComponent, SectionTitleDirective, SelectAllStatus, SelectComponent, SelectModule, Side, SortDirective, SortHeaderComponent, SortModule, StatusBarComponent, StatusBarModule, StatusBarSize, StatusType, StepState, StepsComponent, StepsModule, SubmenuComponent, SuggestionComponent, SuggestionGroupComponent, SuggestionGroupTitleDirective, SwitchComponent, SwitchModule, TABLE_MODULE, TABLE_OF_CONTENTS_MODULE, TABS_MODULE, TabBodyComponent, TabBodyPortalDirective, TabChangeEvent, TabComponent, TabContentDirective, TabContextService, TabGroupComponent, TabHeaderActiveIndicatorComponent, TabHeaderAddonDirective, TabHeaderComponent, TabLabelDirective, TabLabelWrapperDirective, TabSize, TabTitleDirective, TabType, TableCellDefDirective, TableCellDirective, TableColumnDefDirective, TableComponent, TableExpandButtonCellComponent, TableExpandPanelCellComponent, TableHeaderCellDefDirective, TableHeaderCellDirective, TableHeaderRowComponent, TableHeaderRowDefDirective, TableModule, TableOfContentsModule, TablePlaceholderDefDirective, TablePlaceholderOutletDirective, TableRowComponent, TableRowDefDirective, TableScrollWrapperDirective, TableScrollableDirective, TabsModule, TagComponent, TagModule, TagType, TagsInputComponent, ThemeModule, ThemePickerPipe, ThemeService, TimePickerComponent, TimePickerControlType, TimePickerModule, TimePickerPanelComponent, TocContainerDirective, TocContentDirective, TocLinkDirective, TooltipActiveDirective, TooltipComponent, TooltipCopyDirective, TooltipCopyIntl, TooltipDirective, TooltipModule, TooltipTrigger, TooltipType, TreeNodeComponent, TreeNodePlaceholderComponent, TreeSelectComponent, TreeSelectModule, VirtualForOfDirective, VirtualScrollViewportComponent, YEAR, YEAR_PANEL_COLUMN_COUNT, YEAR_PANEL_ROW_COUNT, _tableVirtualScrollDirectiveStrategyFactory, buildBem, coerceAttrBoolean, coerceString, cssVar, en, getAnchorTreeItems, getElementOffset, getSortDuplicateSortableIdError, getSortHeaderMissingIdError, getSortHeaderNotContainedWithinSortError, getSortInvalidDirectionError, handlePixel, isNumberValue, isString, isTemplateRef, isTimePickerModel, last, observeMutationOn, observeResizeOn, publishRef, rgbColor, rgbaColor, scrollIntoView, sleep, watchContentExist, zh };
|
|
12440
12434
|
//# sourceMappingURL=alauda-ui.mjs.map
|