@bizy/core 20.5.3 → 20.5.5

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.
@@ -740,7 +740,8 @@ class BizyBarLineChartComponent {
740
740
  onSelect = new EventEmitter();
741
741
  #echarts = null;
742
742
  #resizeObserver = null;
743
- #subscription = new Subscription();
743
+ #afterViewInitSubscription = new Subscription();
744
+ #resizeSubscription = new Subscription();
744
745
  #chartContainer = null;
745
746
  #afterViewInit = new BehaviorSubject(false);
746
747
  #resize$ = new Subject();
@@ -770,7 +771,7 @@ class BizyBarLineChartComponent {
770
771
  this.#leftYAxis = 0;
771
772
  this.#chartStacks = [];
772
773
  this.#chartNames = [];
773
- this.#subscription.add(this.#afterViewInit.pipe(filter(value => value === true), take$1(1)).subscribe(() => {
774
+ this.#afterViewInitSubscription.add(this.#afterViewInit.pipe(filter(value => value === true), take$1(1)).subscribe(() => {
774
775
  this.#createChartContainer();
775
776
  if (!this.#chartContainer) {
776
777
  return;
@@ -1014,10 +1015,12 @@ class BizyBarLineChartComponent {
1014
1015
  this.#echarts.on('click', params => {
1015
1016
  this.onSelect.emit(params.name);
1016
1017
  });
1018
+ this.#resizeSubscription.unsubscribe();
1017
1019
  this.#resizeObserver = new ResizeObserver(() => this.#resize$.next());
1018
1020
  const resizeRef = this.resizeRef ? this.resizeRef : this.#renderer.parentNode(this.#elementRef.nativeElement) ? this.#renderer.parentNode(this.#elementRef.nativeElement) : this.#elementRef.nativeElement;
1019
1021
  this.#resizeObserver.observe(resizeRef);
1020
- this.#subscription.add(this.#resize$.pipe(skip(1), auditTime(300), throttleTime(500)).subscribe(() => {
1022
+ this.#resizeSubscription = new Subscription();
1023
+ this.#resizeSubscription.add(this.#resize$.pipe(skip(1), auditTime(300), throttleTime(500)).subscribe(() => {
1021
1024
  this.#deleteChartContainer();
1022
1025
  this.#createChartContainer();
1023
1026
  if (!this.#chartContainer) {
@@ -1069,7 +1072,8 @@ class BizyBarLineChartComponent {
1069
1072
  return rootValue;
1070
1073
  };
1071
1074
  ngOnDestroy() {
1072
- this.#subscription.unsubscribe();
1075
+ this.#afterViewInitSubscription.unsubscribe();
1076
+ this.#resizeSubscription.unsubscribe();
1073
1077
  if (this.#resizeObserver) {
1074
1078
  this.#resizeObserver.disconnect();
1075
1079
  }
@@ -3588,7 +3592,8 @@ class BizyHeatMapChartComponent {
3588
3592
  onSelect = new EventEmitter();
3589
3593
  #echarts = null;
3590
3594
  #resizeObserver = null;
3591
- #subscription = new Subscription();
3595
+ #afterViewInitSubscription = new Subscription();
3596
+ #resizeSubscription = new Subscription();
3592
3597
  #chartContainer = null;
3593
3598
  #afterViewInit = new BehaviorSubject(false);
3594
3599
  #resize$ = new Subject();
@@ -3610,7 +3615,7 @@ class BizyHeatMapChartComponent {
3610
3615
  }
3611
3616
  async #setChartData(data) {
3612
3617
  this.#data = data;
3613
- this.#subscription.add(this.#afterViewInit.pipe(filter(value => value === true), take$1(1)).subscribe(() => {
3618
+ this.#afterViewInitSubscription.add(this.#afterViewInit.pipe(filter(value => value === true), take$1(1)).subscribe(() => {
3614
3619
  this.#createChartContainer();
3615
3620
  if (!this.#chartContainer) {
3616
3621
  return;
@@ -3711,10 +3716,12 @@ class BizyHeatMapChartComponent {
3711
3716
  this.#echarts.on('click', params => {
3712
3717
  this.onSelect.emit(params.name);
3713
3718
  });
3719
+ this.#resizeSubscription.unsubscribe();
3714
3720
  this.#resizeObserver = new ResizeObserver(() => this.#resize$.next());
3715
3721
  const resizeRef = this.resizeRef ? this.resizeRef : this.#renderer.parentNode(this.#elementRef.nativeElement) ? this.#renderer.parentNode(this.#elementRef.nativeElement) : this.#elementRef.nativeElement;
3716
3722
  this.#resizeObserver.observe(resizeRef);
3717
- this.#subscription.add(this.#resize$.pipe(skip(1), auditTime(300), throttleTime(500)).subscribe(() => {
3723
+ this.#resizeSubscription = new Subscription();
3724
+ this.#resizeSubscription.add(this.#resize$.pipe(skip(1), auditTime(300), throttleTime(500)).subscribe(() => {
3718
3725
  this.#deleteChartContainer();
3719
3726
  this.#createChartContainer();
3720
3727
  if (!this.#chartContainer) {
@@ -3766,7 +3773,8 @@ class BizyHeatMapChartComponent {
3766
3773
  return rootValue;
3767
3774
  };
3768
3775
  ngOnDestroy() {
3769
- this.#subscription.unsubscribe();
3776
+ this.#afterViewInitSubscription.unsubscribe();
3777
+ this.#resizeSubscription.unsubscribe();
3770
3778
  if (this.#resizeObserver) {
3771
3779
  this.#resizeObserver.disconnect();
3772
3780
  }
@@ -4055,7 +4063,8 @@ class BizyPieChartComponent {
4055
4063
  onDownload = new EventEmitter();
4056
4064
  #echarts = null;
4057
4065
  #resizeObserver = null;
4058
- #subscription = new Subscription();
4066
+ #afterViewInitSubscription = new Subscription();
4067
+ #resizeSubscription = new Subscription();
4059
4068
  #chartContainer = null;
4060
4069
  #afterViewInit = new BehaviorSubject(false);
4061
4070
  #resize$ = new Subject();
@@ -4077,7 +4086,7 @@ class BizyPieChartComponent {
4077
4086
  }
4078
4087
  }
4079
4088
  async #setChartData(data) {
4080
- this.#subscription.add(this.#afterViewInit.pipe(filter(value => value === true), take$1(1)).subscribe(() => {
4089
+ this.#afterViewInitSubscription.add(this.#afterViewInit.pipe(filter(value => value === true), take$1(1)).subscribe(() => {
4081
4090
  this.#createChartContainer();
4082
4091
  if (!this.#chartContainer) {
4083
4092
  return;
@@ -4223,10 +4232,12 @@ class BizyPieChartComponent {
4223
4232
  this.#echarts.on('click', params => {
4224
4233
  this.onSelect.emit(params.name);
4225
4234
  });
4235
+ this.#resizeSubscription.unsubscribe();
4226
4236
  this.#resizeObserver = new ResizeObserver(() => this.#resize$.next());
4227
4237
  const resizeRef = this.resizeRef ? this.resizeRef : this.#renderer.parentNode(this.#elementRef.nativeElement) ? this.#renderer.parentNode(this.#elementRef.nativeElement) : this.#elementRef.nativeElement;
4228
4238
  this.#resizeObserver.observe(resizeRef);
4229
- this.#subscription.add(this.#resize$.pipe(skip(1), auditTime(300), throttleTime(500)).subscribe(() => {
4239
+ this.#resizeSubscription = new Subscription();
4240
+ this.#resizeSubscription.add(this.#resize$.pipe(skip(1), auditTime(300), throttleTime(500)).subscribe(() => {
4230
4241
  this.#deleteChartContainer();
4231
4242
  this.#createChartContainer();
4232
4243
  if (!this.#chartContainer) {
@@ -4278,7 +4289,8 @@ class BizyPieChartComponent {
4278
4289
  return rootValue || null;
4279
4290
  };
4280
4291
  ngOnDestroy() {
4281
- this.#subscription.unsubscribe();
4292
+ this.#afterViewInitSubscription.unsubscribe();
4293
+ this.#resizeSubscription.unsubscribe();
4282
4294
  if (this.#resizeObserver) {
4283
4295
  this.#resizeObserver.disconnect();
4284
4296
  }
@@ -4345,11 +4357,32 @@ class BizyPopupWrapperComponent {
4345
4357
  disabled = false;
4346
4358
  disableClose = false;
4347
4359
  disableDrag = false;
4348
- position = null;
4360
+ position = {
4361
+ top: '50%',
4362
+ right: '50%',
4363
+ bottom: '50%',
4364
+ left: '50%',
4365
+ transform: 'translate(-50%, -50%)',
4366
+ };
4349
4367
  ngOnInit() {
4350
4368
  if (this.#data) {
4351
4369
  if (this.#data.position) {
4352
- this.position = this.#data.position;
4370
+ this.position = {
4371
+ top: this.#data.position.top,
4372
+ right: this.#data.position.right,
4373
+ bottom: this.#data.position.bottom,
4374
+ left: this.#data.position.left,
4375
+ transform: '',
4376
+ };
4377
+ }
4378
+ else if (this.#data.placement) {
4379
+ this.position = {
4380
+ top: this.#data.placement === 'top' ? '2rem' : '',
4381
+ right: this.#data.placement === 'right' ? '2rem' : '',
4382
+ bottom: this.#data.placement === 'bottom' ? '2rem' : '',
4383
+ left: this.#data.placement === 'left' ? '2rem' : '',
4384
+ transform: this.#data.placement === 'top' || this.#data.placement === 'bottom' ? 'translateX(-50%)' : this.#data.placement === 'right' || this.#data.placement === 'left' ? 'translatey(-50%)' : '',
4385
+ };
4353
4386
  }
4354
4387
  if (this.#data.disableClose) {
4355
4388
  this.disableClose = this.#data.disableClose;
@@ -4375,16 +4408,16 @@ class BizyPopupWrapperComponent {
4375
4408
  this.#popup.close({ id: this.#dialogRef.id });
4376
4409
  }
4377
4410
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizyPopupWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
4378
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.5", type: BizyPopupWrapperComponent, isStandalone: true, selector: "bizy-popup-wrapper", host: { properties: { "style.top": "position && position.top ? position.top : position ? \"\" : \"50%\"", "style.right": "position && position.right ? position.right : position ? \"\" : \"50%\"", "style.bottom": "position && position.bottom ? position.bottom : position ? \"\" : \"50%\"", "style.left": "position && position.left ? position.left : position ? \"\" : \"50%\"", "style.transform": "position ? \"\" : \"translate(-50%, -50%)\"" } }, viewQueries: [{ propertyName: "dynamicComponentContainer", first: true, predicate: ["dynamicComponentContainer"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<div class=\"bizy-popup-wrapper\" cdkDrag *ngIf=\"!disableDrag\">\n\n <button class=\"bizy-popup-wrapper__drag-button\" cdkDragHandle>\n\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\" class=\"bizy-popup-wrapper__drag-button__icon\">\n <path d=\"M278.6 9.4c-12.5-12.5-32.8-12.5-45.3 0l-64 64c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l9.4-9.4V224H109.3l9.4-9.4c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-64 64c-12.5 12.5-12.5 32.8 0 45.3l64 64c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-9.4-9.4H224V402.7l-9.4-9.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l64 64c12.5 12.5 32.8 12.5 45.3 0l64-64c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-9.4 9.4V288H402.7l-9.4 9.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l64-64c12.5-12.5 12.5-32.8 0-45.3l-64-64c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l9.4 9.4H288V109.3l9.4 9.4c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-64-64z\"/>\n </svg>\n\n </button>\n\n <button *ngIf=\"!disableClose\" class=\"bizy-popup-wrapper__close-button\" (click)=\"close()\" (keyup.enter)=\"close()\">\n\n\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 384 512\" class=\"bizy-popup-wrapper__close-button__icon\">\n <path d=\"M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z\"/>\n </svg>\n\n </button>\n\n <ng-container #dynamicComponentContainer></ng-container>\n\n</div>\n\n<div class=\"bizy-popup-wrapper\" *ngIf=\"disableDrag\">\n\n <button *ngIf=\"!disableClose\" class=\"bizy-popup-wrapper__close-button\" (click)=\"close()\" (keyup.enter)=\"close()\">\n\n\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 384 512\" class=\"bizy-popup-wrapper__close-button__icon\">\n <path d=\"M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z\"/>\n </svg>\n\n </button>\n\n <ng-container #dynamicComponentContainer></ng-container>\n\n</div>", styles: [":host{font-size:1rem;position:fixed!important;min-height:150px;min-width:150px;width:fit-content;height:fit-content;z-index:10}.bizy-popup-wrapper{position:relative;padding:var(--bizy-popup-padding);background-color:var(--bizy-popup-background-color);min-width:var(--bizy-popup-min-width);width:var(--bizy-popup-width);max-width:var(--bizy-popup-max-width);border-radius:var(--bizy-popup-border-radius)}.bizy-popup-wrapper__drag-button{position:absolute;left:-.9rem;top:-.9rem;border:var(--bizy-popup-drag-button-border);border-radius:50%;padding:.2rem;place-items:center;display:grid;background-color:var(--bizy-popup-drag-button-background-color);cursor:pointer;transition:transform .2s;z-index:1}.bizy-popup-wrapper__drag-button:hover{transform:scale(1.1)}.bizy-popup-wrapper__drag-button__icon{height:1rem}.bizy-popup-wrapper__drag-button__icon{fill:var(--bizy-popup-drag-button-color)}.bizy-popup-wrapper__close-button{position:absolute;right:-.9rem;top:-.9rem;border:var(--bizy-popup-close-button-border);border-radius:50%;padding:.25rem .35rem;place-items:center;display:grid;background-color:var(--bizy-popup-close-button-background-color);cursor:pointer;transition:transform .2s;z-index:1}.bizy-popup-wrapper__close-button:hover .bizy-popup-wrapper__close-button__icon{transform:scale(1.1)}.bizy-popup-wrapper__close-button:hover .bizy-popup-wrapper__close-button__icon{fill:var(--bizy-popup-close-button-hover-color)}.bizy-popup-wrapper__close-button__icon{height:1rem;transition:fill .2s ease,}.bizy-popup-wrapper__close-button__icon{fill:var(--bizy-popup-close-button-color)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: DialogModule }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i2$3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i2$3.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
4411
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.5", type: BizyPopupWrapperComponent, isStandalone: true, selector: "bizy-popup-wrapper", host: { properties: { "style.top": "position.top", "style.right": "position.right", "style.bottom": "position.bottom", "style.left": "position.left", "style.transform": "position.transform" } }, viewQueries: [{ propertyName: "dynamicComponentContainer", first: true, predicate: ["dynamicComponentContainer"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<div class=\"bizy-popup-wrapper\" cdkDrag *ngIf=\"!disableDrag\">\n\n <button class=\"bizy-popup-wrapper__drag-button\" cdkDragHandle>\n\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\" class=\"bizy-popup-wrapper__drag-button__icon\">\n <path d=\"M278.6 9.4c-12.5-12.5-32.8-12.5-45.3 0l-64 64c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l9.4-9.4V224H109.3l9.4-9.4c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-64 64c-12.5 12.5-12.5 32.8 0 45.3l64 64c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-9.4-9.4H224V402.7l-9.4-9.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l64 64c12.5 12.5 32.8 12.5 45.3 0l64-64c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-9.4 9.4V288H402.7l-9.4 9.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l64-64c12.5-12.5 12.5-32.8 0-45.3l-64-64c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l9.4 9.4H288V109.3l9.4 9.4c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-64-64z\"/>\n </svg>\n\n </button>\n\n <button *ngIf=\"!disableClose\" class=\"bizy-popup-wrapper__close-button\" (click)=\"close()\" (keyup.enter)=\"close()\">\n\n\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 384 512\" class=\"bizy-popup-wrapper__close-button__icon\">\n <path d=\"M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z\"/>\n </svg>\n\n </button>\n\n <ng-container #dynamicComponentContainer></ng-container>\n\n</div>\n\n<div class=\"bizy-popup-wrapper\" *ngIf=\"disableDrag\">\n\n <button *ngIf=\"!disableClose\" class=\"bizy-popup-wrapper__close-button\" (click)=\"close()\" (keyup.enter)=\"close()\">\n\n\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 384 512\" class=\"bizy-popup-wrapper__close-button__icon\">\n <path d=\"M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z\"/>\n </svg>\n\n </button>\n\n <ng-container #dynamicComponentContainer></ng-container>\n\n</div>", styles: [":host{font-size:1rem;position:fixed!important;min-height:150px;min-width:150px;width:fit-content;height:fit-content;z-index:10}.bizy-popup-wrapper{position:relative;padding:var(--bizy-popup-padding);background-color:var(--bizy-popup-background-color);min-width:var(--bizy-popup-min-width);width:var(--bizy-popup-width);max-width:var(--bizy-popup-max-width);border-radius:var(--bizy-popup-border-radius)}.bizy-popup-wrapper__drag-button{position:absolute;left:-.9rem;top:-.9rem;border:var(--bizy-popup-drag-button-border);border-radius:50%;padding:.2rem;place-items:center;display:grid;background-color:var(--bizy-popup-drag-button-background-color);cursor:pointer;transition:transform .2s;z-index:1}.bizy-popup-wrapper__drag-button:hover{transform:scale(1.1)}.bizy-popup-wrapper__drag-button__icon{height:1rem}.bizy-popup-wrapper__drag-button__icon{fill:var(--bizy-popup-drag-button-color)}.bizy-popup-wrapper__close-button{position:absolute;right:-.9rem;top:-.9rem;border:var(--bizy-popup-close-button-border);border-radius:50%;padding:.25rem .35rem;place-items:center;display:grid;background-color:var(--bizy-popup-close-button-background-color);cursor:pointer;transition:transform .2s;z-index:1}.bizy-popup-wrapper__close-button:hover .bizy-popup-wrapper__close-button__icon{transform:scale(1.1)}.bizy-popup-wrapper__close-button:hover .bizy-popup-wrapper__close-button__icon{fill:var(--bizy-popup-close-button-hover-color)}.bizy-popup-wrapper__close-button__icon{height:1rem;transition:fill .2s ease,}.bizy-popup-wrapper__close-button__icon{fill:var(--bizy-popup-close-button-color)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: DialogModule }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i2$3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i2$3.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
4379
4412
  }
4380
4413
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizyPopupWrapperComponent, decorators: [{
4381
4414
  type: Component,
4382
4415
  args: [{ selector: 'bizy-popup-wrapper', imports: [CommonModule, DialogModule, DragDropModule], changeDetection: ChangeDetectionStrategy.OnPush, host: {
4383
- '[style.top]': 'position && position.top ? position.top : position ? "" : "50%"',
4384
- '[style.right]': 'position && position.right ? position.right : position ? "" : "50%"',
4385
- '[style.bottom]': 'position && position.bottom ? position.bottom : position ? "" : "50%"',
4386
- '[style.left]': 'position && position.left ? position.left : position ? "" : "50%"',
4387
- '[style.transform]': 'position ? "" : "translate(-50%, -50%)"'
4416
+ '[style.top]': 'position.top',
4417
+ '[style.right]': 'position.right',
4418
+ '[style.bottom]': 'position.bottom',
4419
+ '[style.left]': 'position.left',
4420
+ '[style.transform]': 'position.transform'
4388
4421
  }, template: "<div class=\"bizy-popup-wrapper\" cdkDrag *ngIf=\"!disableDrag\">\n\n <button class=\"bizy-popup-wrapper__drag-button\" cdkDragHandle>\n\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\" class=\"bizy-popup-wrapper__drag-button__icon\">\n <path d=\"M278.6 9.4c-12.5-12.5-32.8-12.5-45.3 0l-64 64c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l9.4-9.4V224H109.3l9.4-9.4c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-64 64c-12.5 12.5-12.5 32.8 0 45.3l64 64c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-9.4-9.4H224V402.7l-9.4-9.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l64 64c12.5 12.5 32.8 12.5 45.3 0l64-64c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-9.4 9.4V288H402.7l-9.4 9.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l64-64c12.5-12.5 12.5-32.8 0-45.3l-64-64c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l9.4 9.4H288V109.3l9.4 9.4c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-64-64z\"/>\n </svg>\n\n </button>\n\n <button *ngIf=\"!disableClose\" class=\"bizy-popup-wrapper__close-button\" (click)=\"close()\" (keyup.enter)=\"close()\">\n\n\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 384 512\" class=\"bizy-popup-wrapper__close-button__icon\">\n <path d=\"M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z\"/>\n </svg>\n\n </button>\n\n <ng-container #dynamicComponentContainer></ng-container>\n\n</div>\n\n<div class=\"bizy-popup-wrapper\" *ngIf=\"disableDrag\">\n\n <button *ngIf=\"!disableClose\" class=\"bizy-popup-wrapper__close-button\" (click)=\"close()\" (keyup.enter)=\"close()\">\n\n\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 384 512\" class=\"bizy-popup-wrapper__close-button__icon\">\n <path d=\"M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z\"/>\n </svg>\n\n </button>\n\n <ng-container #dynamicComponentContainer></ng-container>\n\n</div>", styles: [":host{font-size:1rem;position:fixed!important;min-height:150px;min-width:150px;width:fit-content;height:fit-content;z-index:10}.bizy-popup-wrapper{position:relative;padding:var(--bizy-popup-padding);background-color:var(--bizy-popup-background-color);min-width:var(--bizy-popup-min-width);width:var(--bizy-popup-width);max-width:var(--bizy-popup-max-width);border-radius:var(--bizy-popup-border-radius)}.bizy-popup-wrapper__drag-button{position:absolute;left:-.9rem;top:-.9rem;border:var(--bizy-popup-drag-button-border);border-radius:50%;padding:.2rem;place-items:center;display:grid;background-color:var(--bizy-popup-drag-button-background-color);cursor:pointer;transition:transform .2s;z-index:1}.bizy-popup-wrapper__drag-button:hover{transform:scale(1.1)}.bizy-popup-wrapper__drag-button__icon{height:1rem}.bizy-popup-wrapper__drag-button__icon{fill:var(--bizy-popup-drag-button-color)}.bizy-popup-wrapper__close-button{position:absolute;right:-.9rem;top:-.9rem;border:var(--bizy-popup-close-button-border);border-radius:50%;padding:.25rem .35rem;place-items:center;display:grid;background-color:var(--bizy-popup-close-button-background-color);cursor:pointer;transition:transform .2s;z-index:1}.bizy-popup-wrapper__close-button:hover .bizy-popup-wrapper__close-button__icon{transform:scale(1.1)}.bizy-popup-wrapper__close-button:hover .bizy-popup-wrapper__close-button__icon{fill:var(--bizy-popup-close-button-hover-color)}.bizy-popup-wrapper__close-button__icon{height:1rem;transition:fill .2s ease,}.bizy-popup-wrapper__close-button__icon{fill:var(--bizy-popup-close-button-color)}\n"] }]
4389
4422
  }], propDecorators: { dynamicComponentContainer: [{
4390
4423
  type: ViewChild,
@@ -5567,7 +5600,27 @@ class BizyPopupService {
5567
5600
  * @param data.disableClose Deprecated
5568
5601
  */
5569
5602
  open(data, callback) {
5603
+ if (!data) {
5604
+ return;
5605
+ }
5570
5606
  this.#data = data.data;
5607
+ let position = data.position ?? null;
5608
+ let placement = null;
5609
+ if (data.element) {
5610
+ const rect = data.element.getBoundingClientRect();
5611
+ if (!data.placement) {
5612
+ data.placement = 'right';
5613
+ }
5614
+ position = {
5615
+ top: data.placement === 'top' ? `${rect.top - data.element.offsetHeight + Number(position.top)}px ` : `${rect.top + Number(position.top)}px`,
5616
+ left: data.placement === 'left' ? `${rect.left - data.element.offsetWidth + Number(position.left)}px` : `${rect.left + Number(position.left)}px`,
5617
+ bottom: data.placement === 'bottom' ? `${rect.bottom + data.element.offsetHeight + Number(position.bottom)}px` : `${rect.bottom + Number(position.bottom)}px`,
5618
+ right: data.placement === 'right' ? `${rect.right + data.element.offsetWidth + Number(position.right)}px` : `${rect.right + Number(position.right)}px`,
5619
+ };
5620
+ }
5621
+ else {
5622
+ placement = data.placement ?? null;
5623
+ }
5571
5624
  const component = data.fullScreen ? BizyFullScreenPopupWrapperComponent : BizyPopupWrapperComponent;
5572
5625
  const dialogRef = this.#dialog.open(component, ({
5573
5626
  id: data.id,
@@ -5575,7 +5628,8 @@ class BizyPopupService {
5575
5628
  component: data.component,
5576
5629
  disableClose: data.disableCloseButton ?? false,
5577
5630
  disableDrag: data.disableDragButton ?? false,
5578
- position: data.position,
5631
+ position,
5632
+ placement
5579
5633
  },
5580
5634
  autoFocus: true,
5581
5635
  hasBackdrop: true,