@bizy/core 20.5.4 → 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.
- package/fesm2022/bizy-core.mjs +51 -9
- package/fesm2022/bizy-core.mjs.map +1 -1
- package/index.d.ts +3 -0
- package/package.json +1 -1
package/fesm2022/bizy-core.mjs
CHANGED
|
@@ -4357,11 +4357,32 @@ class BizyPopupWrapperComponent {
|
|
|
4357
4357
|
disabled = false;
|
|
4358
4358
|
disableClose = false;
|
|
4359
4359
|
disableDrag = false;
|
|
4360
|
-
position =
|
|
4360
|
+
position = {
|
|
4361
|
+
top: '50%',
|
|
4362
|
+
right: '50%',
|
|
4363
|
+
bottom: '50%',
|
|
4364
|
+
left: '50%',
|
|
4365
|
+
transform: 'translate(-50%, -50%)',
|
|
4366
|
+
};
|
|
4361
4367
|
ngOnInit() {
|
|
4362
4368
|
if (this.#data) {
|
|
4363
4369
|
if (this.#data.position) {
|
|
4364
|
-
this.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
|
+
};
|
|
4365
4386
|
}
|
|
4366
4387
|
if (this.#data.disableClose) {
|
|
4367
4388
|
this.disableClose = this.#data.disableClose;
|
|
@@ -4387,16 +4408,16 @@ class BizyPopupWrapperComponent {
|
|
|
4387
4408
|
this.#popup.close({ id: this.#dialogRef.id });
|
|
4388
4409
|
}
|
|
4389
4410
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizyPopupWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4390
|
-
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
|
|
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 });
|
|
4391
4412
|
}
|
|
4392
4413
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizyPopupWrapperComponent, decorators: [{
|
|
4393
4414
|
type: Component,
|
|
4394
4415
|
args: [{ selector: 'bizy-popup-wrapper', imports: [CommonModule, DialogModule, DragDropModule], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
4395
|
-
'[style.top]': 'position
|
|
4396
|
-
'[style.right]': 'position
|
|
4397
|
-
'[style.bottom]': 'position
|
|
4398
|
-
'[style.left]': 'position
|
|
4399
|
-
'[style.transform]': 'position
|
|
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'
|
|
4400
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"] }]
|
|
4401
4422
|
}], propDecorators: { dynamicComponentContainer: [{
|
|
4402
4423
|
type: ViewChild,
|
|
@@ -5579,7 +5600,27 @@ class BizyPopupService {
|
|
|
5579
5600
|
* @param data.disableClose Deprecated
|
|
5580
5601
|
*/
|
|
5581
5602
|
open(data, callback) {
|
|
5603
|
+
if (!data) {
|
|
5604
|
+
return;
|
|
5605
|
+
}
|
|
5582
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
|
+
}
|
|
5583
5624
|
const component = data.fullScreen ? BizyFullScreenPopupWrapperComponent : BizyPopupWrapperComponent;
|
|
5584
5625
|
const dialogRef = this.#dialog.open(component, ({
|
|
5585
5626
|
id: data.id,
|
|
@@ -5587,7 +5628,8 @@ class BizyPopupService {
|
|
|
5587
5628
|
component: data.component,
|
|
5588
5629
|
disableClose: data.disableCloseButton ?? false,
|
|
5589
5630
|
disableDrag: data.disableDragButton ?? false,
|
|
5590
|
-
position
|
|
5631
|
+
position,
|
|
5632
|
+
placement
|
|
5591
5633
|
},
|
|
5592
5634
|
autoFocus: true,
|
|
5593
5635
|
hasBackdrop: true,
|