@alauda/ui 7.2.1-beta.8 → 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 +18 -49
- package/drawer/component/internal/internal.component.d.ts +31 -0
- package/drawer/drawer-ref.d.ts +13 -0
- package/drawer/drawer.module.d.ts +1 -1
- package/drawer/drawer.service.d.ts +15 -27
- package/drawer/index.d.ts +3 -2
- package/drawer/types.d.ts +25 -0
- package/esm2022/drawer/component/drawer.component.mjs +36 -197
- package/esm2022/drawer/component/internal/internal.component.mjs +177 -0
- package/esm2022/drawer/drawer-ref.mjs +30 -0
- package/esm2022/drawer/drawer.module.mjs +3 -3
- package/esm2022/drawer/drawer.service.mjs +69 -22
- package/esm2022/drawer/{component/helper-directives.mjs → helper-directives.mjs} +1 -1
- package/esm2022/drawer/index.mjs +4 -3
- package/esm2022/drawer/types.mjs +6 -0
- package/esm2022/form/form-item/form-item.component.mjs +3 -3
- package/fesm2022/alauda-ui.mjs +321 -240
- package/fesm2022/alauda-ui.mjs.map +1 -1
- package/package.json +1 -1
- package/drawer/component/drawer-ref.d.ts +0 -27
- package/esm2022/drawer/component/drawer-ref.mjs +0 -9
- /package/drawer/{component/helper-directives.d.ts → helper-directives.d.ts} +0 -0
package/fesm2022/alauda-ui.mjs
CHANGED
|
@@ -1306,10 +1306,10 @@ var TimingFunction;
|
|
|
1306
1306
|
TimingFunction["easeInOut"] = "cubic-bezier(0.38, 0, 0.24, 1)";
|
|
1307
1307
|
})(TimingFunction || (TimingFunction = {}));
|
|
1308
1308
|
|
|
1309
|
-
const duration = '160ms';
|
|
1309
|
+
const duration$1 = '160ms';
|
|
1310
1310
|
const scale = [
|
|
1311
1311
|
transition('scale-hide => scale-show, void => scale-show', [
|
|
1312
|
-
animate(`${duration} ${TimingFunction.easeOut}`, keyframes([
|
|
1312
|
+
animate(`${duration$1} ${TimingFunction.easeOut}`, keyframes([
|
|
1313
1313
|
style({
|
|
1314
1314
|
opacity: 0,
|
|
1315
1315
|
transform: 'scale(0)',
|
|
@@ -1321,7 +1321,7 @@ const scale = [
|
|
|
1321
1321
|
])),
|
|
1322
1322
|
]),
|
|
1323
1323
|
transition('scale-show => scale-hide, scale-show => void', [
|
|
1324
|
-
animate(`${duration} ${TimingFunction.easeInOut}`, keyframes([
|
|
1324
|
+
animate(`${duration$1} ${TimingFunction.easeInOut}`, keyframes([
|
|
1325
1325
|
style({
|
|
1326
1326
|
opacity: 1,
|
|
1327
1327
|
transform: 'scale(1)',
|
|
@@ -1335,7 +1335,7 @@ const scale = [
|
|
|
1335
1335
|
];
|
|
1336
1336
|
const scaleY = [
|
|
1337
1337
|
transition('scaleY-hide => scaleY-show, void => scaleY-show', [
|
|
1338
|
-
animate(`${duration} ${TimingFunction.easeOut}`, keyframes([
|
|
1338
|
+
animate(`${duration$1} ${TimingFunction.easeOut}`, keyframes([
|
|
1339
1339
|
style({
|
|
1340
1340
|
opacity: 0,
|
|
1341
1341
|
transform: 'scaleY(0)',
|
|
@@ -1347,7 +1347,7 @@ const scaleY = [
|
|
|
1347
1347
|
])),
|
|
1348
1348
|
]),
|
|
1349
1349
|
transition('scaleY-show => scaleY-hide, scaleY-show => void', [
|
|
1350
|
-
animate(`${duration} ${TimingFunction.easeInOut}`, keyframes([
|
|
1350
|
+
animate(`${duration$1} ${TimingFunction.easeInOut}`, keyframes([
|
|
1351
1351
|
style({
|
|
1352
1352
|
opacity: 1,
|
|
1353
1353
|
transform: 'scaleY(1)',
|
|
@@ -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,14 +6766,291 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImpor
|
|
|
6766
6766
|
}]
|
|
6767
6767
|
}] });
|
|
6768
6768
|
|
|
6769
|
-
|
|
6770
|
-
|
|
6771
|
-
|
|
6772
|
-
|
|
6773
|
-
|
|
6774
|
-
|
|
6769
|
+
const DrawerSize = {
|
|
6770
|
+
Small: 'small',
|
|
6771
|
+
Medium: 'medium',
|
|
6772
|
+
Big: 'big',
|
|
6773
|
+
};
|
|
6774
|
+
|
|
6775
|
+
const DATA = new InjectionToken('drawer-data');
|
|
6776
|
+
const SIZE_MAPPER = {
|
|
6777
|
+
[DrawerSize.Small]: 400,
|
|
6778
|
+
[DrawerSize.Medium]: 600,
|
|
6779
|
+
[DrawerSize.Big]: 800,
|
|
6780
|
+
};
|
|
6781
|
+
const DRAWER_OVERLAY_BACKDROP_CLASS = 'aui-drawer-mask';
|
|
6782
|
+
const duration = '300ms';
|
|
6783
|
+
class DrawerInternalComponent {
|
|
6784
|
+
injector;
|
|
6785
|
+
bodyPortalOutlet;
|
|
6786
|
+
mask;
|
|
6787
|
+
animationStep$ = new Subject();
|
|
6788
|
+
options;
|
|
6789
|
+
showHide$$ = new BehaviorSubject('hide');
|
|
6790
|
+
maskVisible$ = new Subject();
|
|
6791
|
+
get drawerClasses() {
|
|
6792
|
+
return {
|
|
6793
|
+
'aui-drawer': true,
|
|
6794
|
+
hasDivider: this.options.divider,
|
|
6795
|
+
...(this.options.drawerClass
|
|
6796
|
+
? { [this.options.drawerClass]: true }
|
|
6797
|
+
: null),
|
|
6798
|
+
};
|
|
6799
|
+
}
|
|
6800
|
+
get width() {
|
|
6801
|
+
return handlePixel(this.options.width || SIZE_MAPPER[this.options.size || DrawerSize.Medium]);
|
|
6802
|
+
}
|
|
6803
|
+
isTemplateRef = isTemplateRef;
|
|
6804
|
+
constructor(injector) {
|
|
6805
|
+
this.injector = injector;
|
|
6806
|
+
}
|
|
6807
|
+
ngAfterViewInit() {
|
|
6808
|
+
this.attachBodyContent();
|
|
6809
|
+
}
|
|
6810
|
+
attachBodyContent() {
|
|
6811
|
+
this.bodyPortalOutlet?.dispose();
|
|
6812
|
+
const content = this.options.content;
|
|
6813
|
+
if (!(content instanceof Type)) {
|
|
6814
|
+
return;
|
|
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();
|
|
6828
|
+
}
|
|
6829
|
+
onAnimation(event) {
|
|
6830
|
+
const { phaseName, toState } = event;
|
|
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
|
+
}
|
|
6870
|
+
}
|
|
6871
|
+
}
|
|
6872
|
+
show() {
|
|
6873
|
+
this.showHide$$.next('show');
|
|
6874
|
+
}
|
|
6875
|
+
hide() {
|
|
6876
|
+
this.showHide$$.next('hide');
|
|
6877
|
+
}
|
|
6878
|
+
maskClick() {
|
|
6879
|
+
if (this.options.maskClosable) {
|
|
6880
|
+
this.hide();
|
|
6881
|
+
}
|
|
6882
|
+
}
|
|
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: [
|
|
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
|
+
})),
|
|
6894
|
+
transition('hide => show, void => show', [
|
|
6895
|
+
animate(`${duration} ${TimingFunction.easeOut}`),
|
|
6896
|
+
]),
|
|
6897
|
+
transition('show => hide, show => void', [
|
|
6898
|
+
animate(`${duration} ${TimingFunction.easeInOut}`),
|
|
6899
|
+
]),
|
|
6900
|
+
]),
|
|
6901
|
+
], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
6902
|
+
}
|
|
6903
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: DrawerInternalComponent, decorators: [{
|
|
6904
|
+
type: Component,
|
|
6905
|
+
args: [{ encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
|
|
6906
|
+
NgIf,
|
|
6907
|
+
NgClass,
|
|
6908
|
+
NgStyle,
|
|
6909
|
+
NgTemplateOutlet,
|
|
6910
|
+
IconComponent,
|
|
6911
|
+
CdkScrollable$1,
|
|
6912
|
+
PortalModule,
|
|
6913
|
+
AsyncPipe,
|
|
6914
|
+
], animations: [
|
|
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
|
+
})),
|
|
6924
|
+
transition('hide => show, void => show', [
|
|
6925
|
+
animate(`${duration} ${TimingFunction.easeOut}`),
|
|
6926
|
+
]),
|
|
6927
|
+
transition('show => hide, show => void', [
|
|
6928
|
+
animate(`${duration} ${TimingFunction.easeInOut}`),
|
|
6929
|
+
]),
|
|
6930
|
+
]),
|
|
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: [{
|
|
6933
|
+
type: ViewChild,
|
|
6934
|
+
args: [CdkPortalOutlet, { static: false }]
|
|
6935
|
+
}], mask: [{
|
|
6936
|
+
type: ViewChild,
|
|
6937
|
+
args: ['mask']
|
|
6938
|
+
}] } });
|
|
6939
|
+
|
|
6775
6940
|
class DrawerRef {
|
|
6941
|
+
drawerInstance;
|
|
6942
|
+
result;
|
|
6943
|
+
afterOpen$ = new Subject();
|
|
6944
|
+
afterClosed$ = new Subject();
|
|
6945
|
+
get afterOpen() {
|
|
6946
|
+
return this.afterOpen$.asObservable();
|
|
6947
|
+
}
|
|
6948
|
+
get afterClosed() {
|
|
6949
|
+
return this.afterClosed$.asObservable();
|
|
6950
|
+
}
|
|
6951
|
+
constructor(drawerInstance) {
|
|
6952
|
+
this.drawerInstance = drawerInstance;
|
|
6953
|
+
this.drawerInstance.animationStep$
|
|
6954
|
+
.pipe(filter(step => step === 'hideDone'))
|
|
6955
|
+
.subscribe(() => {
|
|
6956
|
+
this.afterClosed$.next(this.result);
|
|
6957
|
+
this.afterClosed$.complete();
|
|
6958
|
+
});
|
|
6959
|
+
}
|
|
6960
|
+
open() {
|
|
6961
|
+
this.drawerInstance.show();
|
|
6962
|
+
}
|
|
6963
|
+
close(result) {
|
|
6964
|
+
this.result = result;
|
|
6965
|
+
this.drawerInstance.hide();
|
|
6966
|
+
}
|
|
6967
|
+
}
|
|
6968
|
+
|
|
6969
|
+
const DRAWER_OVERLAY_CLASS = 'aui-drawer-overlay';
|
|
6970
|
+
class DrawerService {
|
|
6971
|
+
overlay;
|
|
6972
|
+
overlayRef;
|
|
6973
|
+
options;
|
|
6974
|
+
drawerRef;
|
|
6975
|
+
invisible$ = new Subject();
|
|
6976
|
+
drawerInternalComponentRef;
|
|
6977
|
+
constructor(overlay) {
|
|
6978
|
+
this.overlay = overlay;
|
|
6979
|
+
}
|
|
6980
|
+
open(options) {
|
|
6981
|
+
this.updateOptions(options);
|
|
6982
|
+
this.createOverlay();
|
|
6983
|
+
this.createDrawer();
|
|
6984
|
+
this.drawerRef = new DrawerRef(this.drawerInternalComponentRef.instance);
|
|
6985
|
+
this.drawerRef.open();
|
|
6986
|
+
return this.drawerRef;
|
|
6987
|
+
}
|
|
6988
|
+
updateOptions(options) {
|
|
6989
|
+
this.options = options;
|
|
6990
|
+
}
|
|
6991
|
+
createOverlay() {
|
|
6992
|
+
if (!this.overlayRef) {
|
|
6993
|
+
this.overlayRef = this.overlay.create(this.getOverlayConfig());
|
|
6994
|
+
}
|
|
6995
|
+
this.overlayRef
|
|
6996
|
+
.outsidePointerEvents()
|
|
6997
|
+
.pipe(takeUntil(this.invisible$))
|
|
6998
|
+
.subscribe(event => {
|
|
6999
|
+
if (this.overlayRef &&
|
|
7000
|
+
this.options.hideOnClickOutside &&
|
|
7001
|
+
event.target instanceof Node &&
|
|
7002
|
+
!this.overlayRef.hostElement?.parentNode?.contains(event.target)) {
|
|
7003
|
+
event.stopPropagation();
|
|
7004
|
+
event.preventDefault();
|
|
7005
|
+
this.drawerRef.close();
|
|
7006
|
+
}
|
|
7007
|
+
});
|
|
7008
|
+
this.overlayRef.getConfig().scrollStrategy.enable();
|
|
7009
|
+
if (this.options.mask) {
|
|
7010
|
+
fromEvent(window, 'resize')
|
|
7011
|
+
.pipe(debounceTime(100), filter(() => document.documentElement.scrollHeight > window.innerHeight), takeUntil(this.invisible$))
|
|
7012
|
+
.subscribe(() => {
|
|
7013
|
+
this.overlayRef.getConfig().scrollStrategy.enable();
|
|
7014
|
+
});
|
|
7015
|
+
}
|
|
7016
|
+
}
|
|
7017
|
+
createDrawer() {
|
|
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 => {
|
|
7024
|
+
if (step === 'hideDone') {
|
|
7025
|
+
this.invisible$.next();
|
|
7026
|
+
this.overlayRef?.getConfig().scrollStrategy.disable();
|
|
7027
|
+
}
|
|
7028
|
+
});
|
|
7029
|
+
this.drawerInternalComponentRef = drawerInternalComponentRef;
|
|
7030
|
+
}
|
|
7031
|
+
getOverlayConfig() {
|
|
7032
|
+
return new OverlayConfig({
|
|
7033
|
+
panelClass: DRAWER_OVERLAY_CLASS,
|
|
7034
|
+
positionStrategy: this.overlay.position().global(),
|
|
7035
|
+
scrollStrategy: this.options.mask
|
|
7036
|
+
? this.overlay.scrollStrategies.block()
|
|
7037
|
+
: this.overlay.scrollStrategies.noop(),
|
|
7038
|
+
});
|
|
7039
|
+
}
|
|
7040
|
+
ngOnDestroy() {
|
|
7041
|
+
this.invisible$.next();
|
|
7042
|
+
if (this.overlayRef) {
|
|
7043
|
+
this.overlayRef.getConfig().scrollStrategy.disable();
|
|
7044
|
+
this.overlayRef.dispose();
|
|
7045
|
+
this.overlayRef = null;
|
|
7046
|
+
}
|
|
7047
|
+
}
|
|
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 });
|
|
7049
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: DrawerService });
|
|
6776
7050
|
}
|
|
7051
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: DrawerService, decorators: [{
|
|
7052
|
+
type: Injectable
|
|
7053
|
+
}], ctorParameters: function () { return [{ type: i1$2.Overlay }]; } });
|
|
6777
7054
|
|
|
6778
7055
|
class DrawerHeaderDirective {
|
|
6779
7056
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: DrawerHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
@@ -6809,18 +7086,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImpor
|
|
|
6809
7086
|
}]
|
|
6810
7087
|
}] });
|
|
6811
7088
|
|
|
6812
|
-
|
|
6813
|
-
|
|
6814
|
-
const SIZE_MAPPER = {
|
|
6815
|
-
[DrawerSize.Small]: 400,
|
|
6816
|
-
[DrawerSize.Medium]: 600,
|
|
6817
|
-
[DrawerSize.Big]: 800,
|
|
6818
|
-
};
|
|
6819
|
-
class DrawerComponent extends DrawerRef {
|
|
6820
|
-
viewContainerRef;
|
|
6821
|
-
overlay;
|
|
6822
|
-
injector;
|
|
6823
|
-
cdr;
|
|
7089
|
+
class DrawerComponent {
|
|
7090
|
+
drawerService;
|
|
6824
7091
|
title;
|
|
6825
7092
|
footer;
|
|
6826
7093
|
size = DrawerSize.Medium;
|
|
@@ -6833,188 +7100,49 @@ class DrawerComponent extends DrawerRef {
|
|
|
6833
7100
|
mask;
|
|
6834
7101
|
maskClosable;
|
|
6835
7102
|
divider = true;
|
|
6836
|
-
|
|
6837
|
-
|
|
6838
|
-
this._value = value;
|
|
6839
|
-
}
|
|
6840
|
-
get width() {
|
|
6841
|
-
return this._value;
|
|
6842
|
-
}
|
|
6843
|
-
get drawerClasses() {
|
|
6844
|
-
return {
|
|
6845
|
-
'aui-drawer': true,
|
|
6846
|
-
hasDivider: this.divider,
|
|
6847
|
-
...(this.drawerClass ? { [this.drawerClass]: true } : null),
|
|
6848
|
-
};
|
|
6849
|
-
}
|
|
6850
|
-
afterClosed$ = new Subject();
|
|
6851
|
-
get afterClosed() {
|
|
6852
|
-
return this.afterClosed$.asObservable();
|
|
6853
|
-
}
|
|
6854
|
-
afterOpen$ = new Subject();
|
|
6855
|
-
get afterOpen() {
|
|
6856
|
-
return this.afterOpen$.asObservable();
|
|
6857
|
-
}
|
|
6858
|
-
drawerViewInit = new EventEmitter();
|
|
7103
|
+
width;
|
|
7104
|
+
contentParams;
|
|
6859
7105
|
close = new EventEmitter();
|
|
6860
|
-
drawerTemplate;
|
|
6861
|
-
bodyPortalOutlet;
|
|
6862
7106
|
titleTemplate;
|
|
6863
|
-
|
|
7107
|
+
contentTemplateOrComponent;
|
|
6864
7108
|
footerTemplate;
|
|
6865
|
-
|
|
6866
|
-
|
|
6867
|
-
|
|
6868
|
-
contentParams;
|
|
6869
|
-
overlayRef;
|
|
6870
|
-
portal;
|
|
6871
|
-
templateContext = {};
|
|
6872
|
-
get transform() {
|
|
6873
|
-
return `translateX(${this.visible ? 0 : '100%'})`;
|
|
6874
|
-
}
|
|
6875
|
-
constructor(viewContainerRef, overlay, injector, cdr) {
|
|
6876
|
-
super();
|
|
6877
|
-
this.viewContainerRef = viewContainerRef;
|
|
6878
|
-
this.overlay = overlay;
|
|
6879
|
-
this.injector = injector;
|
|
6880
|
-
this.cdr = cdr;
|
|
6881
|
-
}
|
|
6882
|
-
ngOnInit() {
|
|
6883
|
-
this.attachOverlay();
|
|
6884
|
-
this.updateBodyOverflow();
|
|
6885
|
-
this.templateContext = { $implicit: this.contentParams };
|
|
6886
|
-
if (this.mask) {
|
|
6887
|
-
fromEvent(window, 'resize')
|
|
6888
|
-
.pipe(debounceTime(100), filter(() => document.documentElement.scrollHeight > window.innerHeight), takeUntil(this.onDestroy$))
|
|
6889
|
-
.subscribe(() => {
|
|
6890
|
-
this.overlayRef.getConfig().scrollStrategy.enable();
|
|
6891
|
-
});
|
|
6892
|
-
}
|
|
6893
|
-
this.cdr.detectChanges();
|
|
7109
|
+
drawerRef;
|
|
7110
|
+
constructor(drawerService) {
|
|
7111
|
+
this.drawerService = drawerService;
|
|
6894
7112
|
}
|
|
6895
7113
|
ngOnChanges(changes) {
|
|
6896
7114
|
const { visible } = changes;
|
|
6897
7115
|
if (visible) {
|
|
6898
7116
|
const value = visible.currentValue;
|
|
6899
7117
|
if (value) {
|
|
6900
|
-
this.open();
|
|
7118
|
+
this.drawerRef = this.drawerService.open(this);
|
|
7119
|
+
this.drawerRef.afterClosed.pipe(first()).subscribe(res => {
|
|
7120
|
+
this.close.emit(res);
|
|
7121
|
+
});
|
|
6901
7122
|
}
|
|
6902
7123
|
else if (!visible.firstChange) {
|
|
6903
|
-
this.
|
|
7124
|
+
this.drawerRef.close();
|
|
6904
7125
|
}
|
|
6905
7126
|
}
|
|
6906
7127
|
}
|
|
6907
7128
|
ngAfterViewInit() {
|
|
6908
|
-
this.
|
|
6909
|
-
|
|
6910
|
-
|
|
6911
|
-
}, 0);
|
|
6912
|
-
}
|
|
6913
|
-
attachOverlay() {
|
|
6914
|
-
if (!this.overlayRef) {
|
|
6915
|
-
this.portal = new TemplatePortal(this.drawerTemplate, this.viewContainerRef);
|
|
6916
|
-
this.overlayRef = this.overlay.create(this.getOverlayConfig());
|
|
6917
|
-
}
|
|
6918
|
-
if (this.overlayRef) {
|
|
6919
|
-
this.overlayRef.attach(this.portal);
|
|
6920
|
-
this.overlayRef
|
|
6921
|
-
.outsidePointerEvents()
|
|
6922
|
-
.pipe(takeUntil(this.onDestroy$))
|
|
6923
|
-
.subscribe(event => {
|
|
6924
|
-
if (this.visible &&
|
|
6925
|
-
this.hideOnClickOutside &&
|
|
6926
|
-
event.target instanceof Node &&
|
|
6927
|
-
!this.overlayRef.hostElement?.parentNode?.contains(event.target)) {
|
|
6928
|
-
event.stopPropagation();
|
|
6929
|
-
event.preventDefault();
|
|
6930
|
-
this.dispose();
|
|
6931
|
-
}
|
|
6932
|
-
});
|
|
6933
|
-
}
|
|
6934
|
-
}
|
|
6935
|
-
getOverlayConfig() {
|
|
6936
|
-
return new OverlayConfig({
|
|
6937
|
-
panelClass: DRAWER_OVERLAY_CLASS,
|
|
6938
|
-
positionStrategy: this.overlay.position().global(),
|
|
6939
|
-
scrollStrategy: this.mask
|
|
6940
|
-
? this.overlay.scrollStrategies.block()
|
|
6941
|
-
: this.overlay.scrollStrategies.noop(),
|
|
6942
|
-
});
|
|
6943
|
-
}
|
|
6944
|
-
attachBodyContent() {
|
|
6945
|
-
this.bodyPortalOutlet?.dispose();
|
|
6946
|
-
const content = this.content || this.contentTemplate;
|
|
6947
|
-
if (content instanceof Type) {
|
|
6948
|
-
const componentPortal = new ComponentPortal(content, null, Injector.create({
|
|
6949
|
-
providers: [
|
|
6950
|
-
{
|
|
6951
|
-
provide: DATA,
|
|
6952
|
-
useValue: this.contentParams,
|
|
6953
|
-
},
|
|
6954
|
-
],
|
|
6955
|
-
parent: this.injector,
|
|
6956
|
-
}));
|
|
6957
|
-
const componentRef = this.bodyPortalOutlet?.attachComponentPortal(componentPortal);
|
|
6958
|
-
this.componentInstance = componentRef.instance;
|
|
6959
|
-
Object.assign(componentRef.instance, this.contentParams);
|
|
6960
|
-
componentRef.changeDetectorRef.detectChanges();
|
|
6961
|
-
}
|
|
6962
|
-
}
|
|
6963
|
-
updateBodyOverflow() {
|
|
6964
|
-
if (this.overlayRef) {
|
|
6965
|
-
if (this.visible) {
|
|
6966
|
-
this.overlayRef.getConfig().scrollStrategy.enable();
|
|
6967
|
-
}
|
|
6968
|
-
else {
|
|
6969
|
-
this.overlayRef.getConfig().scrollStrategy.disable();
|
|
6970
|
-
}
|
|
6971
|
-
}
|
|
6972
|
-
}
|
|
6973
|
-
open() {
|
|
6974
|
-
this.visible = true;
|
|
6975
|
-
this.afterOpen$.next();
|
|
6976
|
-
this.afterOpen$.complete();
|
|
6977
|
-
this.updateBodyOverflow();
|
|
6978
|
-
this.cdr.markForCheck();
|
|
6979
|
-
}
|
|
6980
|
-
dispose(result = null) {
|
|
6981
|
-
this.visible = false;
|
|
6982
|
-
this.close.emit();
|
|
6983
|
-
this.afterClosed$.next(result);
|
|
6984
|
-
this.afterClosed$.complete();
|
|
6985
|
-
this.updateBodyOverflow();
|
|
6986
|
-
this.cdr.markForCheck();
|
|
7129
|
+
this.title = this.title || this.titleTemplate;
|
|
7130
|
+
this.content = this.content || this.contentTemplateOrComponent;
|
|
7131
|
+
this.footer = this.footer || this.footerTemplate;
|
|
6987
7132
|
}
|
|
6988
|
-
|
|
6989
|
-
|
|
6990
|
-
this.overlayRef.dispose();
|
|
6991
|
-
}
|
|
6992
|
-
this.overlayRef = null;
|
|
6993
|
-
}
|
|
6994
|
-
maskClick() {
|
|
6995
|
-
if (this.maskClosable && this.mask) {
|
|
6996
|
-
this.dispose();
|
|
6997
|
-
}
|
|
6998
|
-
}
|
|
6999
|
-
ngOnDestroy() {
|
|
7000
|
-
this.onDestroy$.next();
|
|
7001
|
-
this.disposeOverlay();
|
|
7002
|
-
}
|
|
7003
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: DrawerComponent, deps: [{ token: i0.ViewContainerRef }, { token: i1$2.Overlay }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
7004
|
-
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" }, outputs: { drawerViewInit: "drawerViewInit", close: "close" }, queries: [{ propertyName: "titleTemplate", first: true, predicate: DrawerHeaderDirective, descendants: true, read: TemplateRef }, { propertyName: "contentTemplate", first: true, predicate: DrawerContentDirective, descendants: true, read: TemplateRef }, { propertyName: "footerTemplate", first: true, predicate: DrawerFooterDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "drawerTemplate", first: true, predicate: ["drawerTemplate"], descendants: true, static: true }, { propertyName: "bodyPortalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-template #drawerTemplate>\n <div\n *ngIf=\"mask\"\n class=\"aui-drawer-mask\"\n [class.isOpen]=\"visible\"\n (click)=\"maskClick()\"\n ></div>\n <div\n [style.marginTop]=\"offsetY\"\n [ngClass]=\"drawerClasses\"\n [class.isOpen]=\"visible\"\n [ngStyle]=\"{\n transform: transform,\n width: width + 'px'\n }\"\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(title || titleTemplate); else elseTemplate\"\n >\n {{ title }}\n </ng-container>\n <ng-template #elseTemplate>\n <ng-container\n *ngIf=\"title || titleTemplate\"\n [ngTemplateOutlet]=\"$any(title || titleTemplate)\"\n [ngTemplateOutletContext]=\"templateContext\"\n ></ng-container>\n </ng-template>\n </div>\n <aui-icon\n *ngIf=\"showClose\"\n class=\"aui-drawer__close\"\n icon=\"xmark\"\n (click)=\"dispose()\"\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 *ngIf=\"isTemplateRef(content || contentTemplate)\">\n <ng-container\n *ngTemplateOutlet=\"\n $any(content || contentTemplate);\n context: templateContext\n \"\n >\n </ng-container>\n </ng-container>\n </div>\n\n <div\n *ngIf=\"footer || footerTemplate\"\n class=\"aui-drawer__footer\"\n >\n <ng-container\n *ngIf=\"!isTemplateRef(footer || footerTemplate); else elseTemplate\"\n >\n {{ footer }}\n </ng-container>\n <ng-template #elseTemplate>\n <ng-container\n *ngIf=\"footer || footerTemplate\"\n [ngTemplateOutlet]=\"$any(footer || footerTemplate)\"\n [ngTemplateOutletContext]=\"templateContext\"\n ></ng-container>\n </ng-template>\n </div>\n </div>\n </div>\n </div>\n</ng-template>\n", styles: [".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{position:fixed;top:0;bottom:0;right:0;z-index:9999;transition:transform .3s,opacity .3s,box-shaow .3s;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))}:root .aui-drawer.isOpen .aui-drawer__content{box-shadow:-2px 0 8px 0 rgba(var(--aui-color-origin-shadow),.2)}html[aui-theme-mode=light] .aui-drawer.isOpen .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.isOpen .aui-drawer__content{box-shadow:-2px 0 8px 0 rgba(var(--aui-color-origin-shadow),.75)}}html[aui-theme-mode=dark] .aui-drawer.isOpen .aui-drawer__content{box-shadow:-2px 0 8px 0 rgba(var(--aui-color-origin-shadow),.75)}.aui-drawer__content{background-color:rgb(var(--aui-color-n-10));position:absolute;height:100%;right:0;width:100%}.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: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
7133
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: DrawerComponent, deps: [{ token: DrawerService }], target: i0.ɵɵFactoryTarget.Component });
|
|
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 });
|
|
7005
7135
|
}
|
|
7006
7136
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: DrawerComponent, decorators: [{
|
|
7007
7137
|
type: Component,
|
|
7008
|
-
args: [{
|
|
7009
|
-
|
|
7010
|
-
|
|
7011
|
-
|
|
7012
|
-
|
|
7013
|
-
|
|
7014
|
-
|
|
7015
|
-
|
|
7016
|
-
], template: "<ng-template #drawerTemplate>\n <div\n *ngIf=\"mask\"\n class=\"aui-drawer-mask\"\n [class.isOpen]=\"visible\"\n (click)=\"maskClick()\"\n ></div>\n <div\n [style.marginTop]=\"offsetY\"\n [ngClass]=\"drawerClasses\"\n [class.isOpen]=\"visible\"\n [ngStyle]=\"{\n transform: transform,\n width: width + 'px'\n }\"\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(title || titleTemplate); else elseTemplate\"\n >\n {{ title }}\n </ng-container>\n <ng-template #elseTemplate>\n <ng-container\n *ngIf=\"title || titleTemplate\"\n [ngTemplateOutlet]=\"$any(title || titleTemplate)\"\n [ngTemplateOutletContext]=\"templateContext\"\n ></ng-container>\n </ng-template>\n </div>\n <aui-icon\n *ngIf=\"showClose\"\n class=\"aui-drawer__close\"\n icon=\"xmark\"\n (click)=\"dispose()\"\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 *ngIf=\"isTemplateRef(content || contentTemplate)\">\n <ng-container\n *ngTemplateOutlet=\"\n $any(content || contentTemplate);\n context: templateContext\n \"\n >\n </ng-container>\n </ng-container>\n </div>\n\n <div\n *ngIf=\"footer || footerTemplate\"\n class=\"aui-drawer__footer\"\n >\n <ng-container\n *ngIf=\"!isTemplateRef(footer || footerTemplate); else elseTemplate\"\n >\n {{ footer }}\n </ng-container>\n <ng-template #elseTemplate>\n <ng-container\n *ngIf=\"footer || footerTemplate\"\n [ngTemplateOutlet]=\"$any(footer || footerTemplate)\"\n [ngTemplateOutletContext]=\"templateContext\"\n ></ng-container>\n </ng-template>\n </div>\n </div>\n </div>\n </div>\n</ng-template>\n", styles: [".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{position:fixed;top:0;bottom:0;right:0;z-index:9999;transition:transform .3s,opacity .3s,box-shaow .3s;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))}:root .aui-drawer.isOpen .aui-drawer__content{box-shadow:-2px 0 8px 0 rgba(var(--aui-color-origin-shadow),.2)}html[aui-theme-mode=light] .aui-drawer.isOpen .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.isOpen .aui-drawer__content{box-shadow:-2px 0 8px 0 rgba(var(--aui-color-origin-shadow),.75)}}html[aui-theme-mode=dark] .aui-drawer.isOpen .aui-drawer__content{box-shadow:-2px 0 8px 0 rgba(var(--aui-color-origin-shadow),.75)}.aui-drawer__content{background-color:rgb(var(--aui-color-n-10));position:absolute;height:100%;right:0;width:100%}.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"] }]
|
|
7017
|
-
}], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i1$2.Overlay }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { title: [{
|
|
7138
|
+
args: [{
|
|
7139
|
+
selector: 'aui-drawer',
|
|
7140
|
+
template: '<ng-content></ng-content>',
|
|
7141
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
7142
|
+
standalone: true,
|
|
7143
|
+
providers: [DrawerService],
|
|
7144
|
+
}]
|
|
7145
|
+
}], ctorParameters: function () { return [{ type: DrawerService }]; }, propDecorators: { title: [{
|
|
7018
7146
|
type: Input
|
|
7019
7147
|
}], footer: [{
|
|
7020
7148
|
type: Input
|
|
@@ -7040,20 +7168,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImpor
|
|
|
7040
7168
|
type: Input
|
|
7041
7169
|
}], width: [{
|
|
7042
7170
|
type: Input
|
|
7043
|
-
}],
|
|
7044
|
-
type:
|
|
7171
|
+
}], contentParams: [{
|
|
7172
|
+
type: Input
|
|
7045
7173
|
}], close: [{
|
|
7046
7174
|
type: Output
|
|
7047
|
-
}], drawerTemplate: [{
|
|
7048
|
-
type: ViewChild,
|
|
7049
|
-
args: ['drawerTemplate', { static: true }]
|
|
7050
|
-
}], bodyPortalOutlet: [{
|
|
7051
|
-
type: ViewChild,
|
|
7052
|
-
args: [CdkPortalOutlet, { static: false }]
|
|
7053
7175
|
}], titleTemplate: [{
|
|
7054
7176
|
type: ContentChild,
|
|
7055
7177
|
args: [DrawerHeaderDirective, { read: TemplateRef }]
|
|
7056
|
-
}],
|
|
7178
|
+
}], contentTemplateOrComponent: [{
|
|
7057
7179
|
type: ContentChild,
|
|
7058
7180
|
args: [DrawerContentDirective, { read: TemplateRef }]
|
|
7059
7181
|
}], footerTemplate: [{
|
|
@@ -7061,47 +7183,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImpor
|
|
|
7061
7183
|
args: [DrawerFooterDirective, { read: TemplateRef }]
|
|
7062
7184
|
}] } });
|
|
7063
7185
|
|
|
7064
|
-
class DrawerService {
|
|
7065
|
-
overlay;
|
|
7066
|
-
drawerRef;
|
|
7067
|
-
overlayRef;
|
|
7068
|
-
unsubscribe$ = new Subject();
|
|
7069
|
-
constructor(overlay) {
|
|
7070
|
-
this.overlay = overlay;
|
|
7071
|
-
}
|
|
7072
|
-
open(options) {
|
|
7073
|
-
this.drawerRef?.instance?.dispose();
|
|
7074
|
-
this.createDrawer();
|
|
7075
|
-
this.updateOptions(options);
|
|
7076
|
-
return this.drawerRef?.instance;
|
|
7077
|
-
}
|
|
7078
|
-
updateOptions(options) {
|
|
7079
|
-
Object.assign(this.drawerRef.instance, options);
|
|
7080
|
-
}
|
|
7081
|
-
createDrawer() {
|
|
7082
|
-
this.overlayRef = this.overlay.create();
|
|
7083
|
-
this.drawerRef = this.overlayRef.attach(new ComponentPortal(DrawerComponent));
|
|
7084
|
-
this.drawerRef.instance.drawerViewInit
|
|
7085
|
-
.pipe(takeUntil(this.unsubscribe$))
|
|
7086
|
-
.subscribe(() => {
|
|
7087
|
-
this.drawerRef.instance.open();
|
|
7088
|
-
});
|
|
7089
|
-
this.drawerRef.instance.afterClosed
|
|
7090
|
-
.pipe(takeUntil(this.unsubscribe$))
|
|
7091
|
-
.subscribe(() => {
|
|
7092
|
-
this.overlayRef.dispose();
|
|
7093
|
-
this.drawerRef = null;
|
|
7094
|
-
this.unsubscribe$.next();
|
|
7095
|
-
this.unsubscribe$.complete();
|
|
7096
|
-
});
|
|
7097
|
-
}
|
|
7098
|
-
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 });
|
|
7099
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: DrawerService });
|
|
7100
|
-
}
|
|
7101
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: DrawerService, decorators: [{
|
|
7102
|
-
type: Injectable
|
|
7103
|
-
}], ctorParameters: function () { return [{ type: i1$2.Overlay }]; } });
|
|
7104
|
-
|
|
7105
7186
|
const COMMON = [
|
|
7106
7187
|
DrawerComponent,
|
|
7107
7188
|
DrawerHeaderDirective,
|
|
@@ -7117,7 +7198,7 @@ class DrawerModule {
|
|
|
7117
7198
|
DrawerHeaderDirective,
|
|
7118
7199
|
DrawerContentDirective,
|
|
7119
7200
|
DrawerFooterDirective] });
|
|
7120
|
-
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: DrawerModule, providers: [DrawerService], imports: [CommonModule, IconModule, OverlayModule, PortalModule
|
|
7201
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: DrawerModule, providers: [DrawerService], imports: [CommonModule, IconModule, OverlayModule, PortalModule] });
|
|
7121
7202
|
}
|
|
7122
7203
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: DrawerModule, decorators: [{
|
|
7123
7204
|
type: NgModule,
|
|
@@ -12357,5 +12438,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImpor
|
|
|
12357
12438
|
}]
|
|
12358
12439
|
}] });
|
|
12359
12440
|
|
|
12360
|
-
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,
|
|
12441
|
+
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, DrawerSize, 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 };
|
|
12361
12442
|
//# sourceMappingURL=alauda-ui.mjs.map
|