verben-ng-ui 0.0.9 → 0.1.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.
|
@@ -18,11 +18,14 @@ export class VerbenDialogueComponent {
|
|
|
18
18
|
padding = '10px';
|
|
19
19
|
borderRadius = '10px';
|
|
20
20
|
dialogueBgColor = '#fff';
|
|
21
|
-
closeIcon = 'close';
|
|
22
21
|
closeIconClass = 'closeIconClass';
|
|
23
22
|
boxShadow = 'box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1)';
|
|
24
23
|
enableTransition = true;
|
|
25
24
|
modalData;
|
|
25
|
+
// New inputs for drawer mode
|
|
26
|
+
mode = 'dialogue';
|
|
27
|
+
position = 'right';
|
|
28
|
+
drawerWidth = '500px';
|
|
26
29
|
openModal = new EventEmitter();
|
|
27
30
|
closeModal = new EventEmitter();
|
|
28
31
|
ngOnChanges() {
|
|
@@ -48,11 +51,11 @@ export class VerbenDialogueComponent {
|
|
|
48
51
|
this.closeModal.emit(this.modalData);
|
|
49
52
|
}
|
|
50
53
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: VerbenDialogueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
51
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.5", type: VerbenDialogueComponent, selector: "verben-dialogue", inputs: { headerTemplate: "headerTemplate", bodyTemplate: "bodyTemplate", footerTemplate: "footerTemplate", showCloseIcon: "showCloseIcon", dismissOutsideClick: "dismissOutsideClick", closeOnEscape: "closeOnEscape", isVisible: "isVisible", size: "size", backdropColor: "backdropColor", customClass: "customClass", disableFooter: "disableFooter", margin: "margin", padding: "padding", borderRadius: "borderRadius", dialogueBgColor: "dialogueBgColor",
|
|
54
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.5", type: VerbenDialogueComponent, selector: "verben-dialogue", inputs: { headerTemplate: "headerTemplate", bodyTemplate: "bodyTemplate", footerTemplate: "footerTemplate", showCloseIcon: "showCloseIcon", dismissOutsideClick: "dismissOutsideClick", closeOnEscape: "closeOnEscape", isVisible: "isVisible", size: "size", backdropColor: "backdropColor", customClass: "customClass", disableFooter: "disableFooter", margin: "margin", padding: "padding", borderRadius: "borderRadius", dialogueBgColor: "dialogueBgColor", closeIconClass: "closeIconClass", boxShadow: "boxShadow", enableTransition: "enableTransition", modalData: "modalData", mode: "mode", position: "position", drawerWidth: "drawerWidth" }, outputs: { openModal: "openModal", closeModal: "closeModal" }, host: { listeners: { "document:keydown.escape": "onKeydownHandler($event)", "document:click": "onOutsideClick($event)" } }, usesOnChanges: true, ngImport: i0, template: "<div\n class=\"modal-wrapper fixed inset-0 flex justify-center items-center\"\n [ngClass]=\"{\n 'visible opacity-100': isVisible,\n 'invisible opacity-0': !isVisible,\n 'justify-start': mode === 'drawer' && position === 'left',\n 'justify-end': mode === 'drawer' && position === 'right'\n }\"\n [ngStyle]=\"{ 'background-color': backdropColor, 'transition': 'opacity 0.3s ease' }\"\n>\n <div\n [style.padding]=\"padding\"\n [style.margin]=\"margin\"\n [style.background-color]=\"dialogueBgColor\"\n [style.border-radius]=\"mode==='dialogue' && borderRadius\"\n [style.box-shadow]=\"boxShadow\"\n [class]=\"customClass\"\n [ngStyle]=\"{'max-width':mode==='drawer'&&drawerWidth}\"\n [ngClass]=\"{\n 'modal-content p-4': mode === 'dialogue',\n 'max-w-sm': size === 'small' && mode === 'dialogue',\n 'max-w-md': size === 'medium' && mode === 'dialogue',\n 'max-w-lg': size === 'large' && mode === 'dialogue',\n 'drawer-left': mode === 'drawer' && position === 'left',\n 'drawer-right': mode === 'drawer' && position === 'right',\n 'drawer-show-left': mode === 'drawer' && position === 'left' && isVisible,\n 'drawer-show-right': mode === 'drawer' && position === 'right' && isVisible\n }\"\n >\n <!-- Close Icon -->\n <verben-svg\n *ngIf=\"showCloseIcon\"\n [class]=\"closeIconClass\"\n (click)=\"onClose()\"\n icon=\"close\"\n [width]=\"20\"\n [height]=\"20\"\n fill=\"white\"\n stroke=\"#000\"\n ></verben-svg>\n\n <!-- Modal Header -->\n <div class=\"modal-header text-lg font-semibold mb-4\">\n <ng-container *ngIf=\"headerTemplate\">\n <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n </ng-container>\n </div>\n\n <!-- Modal Body -->\n <div class=\"modal-body mb-4\">\n <ng-container *ngIf=\"bodyTemplate\">\n <ng-container *ngTemplateOutlet=\"bodyTemplate\"></ng-container>\n </ng-container>\n </div>\n\n <!-- Modal Footer -->\n <div *ngIf=\"!disableFooter\" class=\"modal-footer flex justify-end space-x-2\">\n <ng-container *ngIf=\"footerTemplate\">\n <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n </ng-container>\n </div>\n </div>\n</div>\n", styles: [".modal-wrapper{display:flex;justify-content:center;align-items:center;position:fixed;inset:0;z-index:1000;background-color:#00000080;transition:.3s ease-in-out}.modal-wrapper.visible{visibility:visible}.modal-wrapper.invisible{visibility:hidden;transition:.3s ease,visibility 0s .3s}.pos-left{position:fixed;top:0;left:0;height:100vh}.modal-wrapper.fade-in{opacity:1}.modal-wrapper.fade-out{opacity:0}.no-animation{transition:none}.closeIconClass{position:absolute;top:0;right:0;cursor:pointer}.modal-content{position:relative;max-width:600px;width:100%}.drawer-left,.drawer-right{position:fixed;top:0;height:100%;width:100%;background-color:#fff;overflow-y:auto;transition:.4s ease-in-out}.drawer-left{left:0;transform:translate(-100%)}.drawer-right{right:0;transform:translate(100%)}.drawer-show-left,.drawer-show-right{transform:translate(0)}.max-w-sm{max-width:400px}.max-w-md{max-width:600px}.max-w-lg{max-width:800px}@media (max-width: 768px){.modal-content{width:100%;max-width:none;margin:0 1rem}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.SvgComponent, selector: "verben-svg", inputs: ["icon", "width", "height", "fill", "stroke", "size"] }] });
|
|
52
55
|
}
|
|
53
56
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: VerbenDialogueComponent, decorators: [{
|
|
54
57
|
type: Component,
|
|
55
|
-
args: [{ selector: 'verben-dialogue', template: "<div
|
|
58
|
+
args: [{ selector: 'verben-dialogue', template: "<div\n class=\"modal-wrapper fixed inset-0 flex justify-center items-center\"\n [ngClass]=\"{\n 'visible opacity-100': isVisible,\n 'invisible opacity-0': !isVisible,\n 'justify-start': mode === 'drawer' && position === 'left',\n 'justify-end': mode === 'drawer' && position === 'right'\n }\"\n [ngStyle]=\"{ 'background-color': backdropColor, 'transition': 'opacity 0.3s ease' }\"\n>\n <div\n [style.padding]=\"padding\"\n [style.margin]=\"margin\"\n [style.background-color]=\"dialogueBgColor\"\n [style.border-radius]=\"mode==='dialogue' && borderRadius\"\n [style.box-shadow]=\"boxShadow\"\n [class]=\"customClass\"\n [ngStyle]=\"{'max-width':mode==='drawer'&&drawerWidth}\"\n [ngClass]=\"{\n 'modal-content p-4': mode === 'dialogue',\n 'max-w-sm': size === 'small' && mode === 'dialogue',\n 'max-w-md': size === 'medium' && mode === 'dialogue',\n 'max-w-lg': size === 'large' && mode === 'dialogue',\n 'drawer-left': mode === 'drawer' && position === 'left',\n 'drawer-right': mode === 'drawer' && position === 'right',\n 'drawer-show-left': mode === 'drawer' && position === 'left' && isVisible,\n 'drawer-show-right': mode === 'drawer' && position === 'right' && isVisible\n }\"\n >\n <!-- Close Icon -->\n <verben-svg\n *ngIf=\"showCloseIcon\"\n [class]=\"closeIconClass\"\n (click)=\"onClose()\"\n icon=\"close\"\n [width]=\"20\"\n [height]=\"20\"\n fill=\"white\"\n stroke=\"#000\"\n ></verben-svg>\n\n <!-- Modal Header -->\n <div class=\"modal-header text-lg font-semibold mb-4\">\n <ng-container *ngIf=\"headerTemplate\">\n <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n </ng-container>\n </div>\n\n <!-- Modal Body -->\n <div class=\"modal-body mb-4\">\n <ng-container *ngIf=\"bodyTemplate\">\n <ng-container *ngTemplateOutlet=\"bodyTemplate\"></ng-container>\n </ng-container>\n </div>\n\n <!-- Modal Footer -->\n <div *ngIf=\"!disableFooter\" class=\"modal-footer flex justify-end space-x-2\">\n <ng-container *ngIf=\"footerTemplate\">\n <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n </ng-container>\n </div>\n </div>\n</div>\n", styles: [".modal-wrapper{display:flex;justify-content:center;align-items:center;position:fixed;inset:0;z-index:1000;background-color:#00000080;transition:.3s ease-in-out}.modal-wrapper.visible{visibility:visible}.modal-wrapper.invisible{visibility:hidden;transition:.3s ease,visibility 0s .3s}.pos-left{position:fixed;top:0;left:0;height:100vh}.modal-wrapper.fade-in{opacity:1}.modal-wrapper.fade-out{opacity:0}.no-animation{transition:none}.closeIconClass{position:absolute;top:0;right:0;cursor:pointer}.modal-content{position:relative;max-width:600px;width:100%}.drawer-left,.drawer-right{position:fixed;top:0;height:100%;width:100%;background-color:#fff;overflow-y:auto;transition:.4s ease-in-out}.drawer-left{left:0;transform:translate(-100%)}.drawer-right{right:0;transform:translate(100%)}.drawer-show-left,.drawer-show-right{transform:translate(0)}.max-w-sm{max-width:400px}.max-w-md{max-width:600px}.max-w-lg{max-width:800px}@media (max-width: 768px){.modal-content{width:100%;max-width:none;margin:0 1rem}}\n"] }]
|
|
56
59
|
}], propDecorators: { headerTemplate: [{
|
|
57
60
|
type: Input
|
|
58
61
|
}], bodyTemplate: [{
|
|
@@ -83,8 +86,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
|
|
|
83
86
|
type: Input
|
|
84
87
|
}], dialogueBgColor: [{
|
|
85
88
|
type: Input
|
|
86
|
-
}], closeIcon: [{
|
|
87
|
-
type: Input
|
|
88
89
|
}], closeIconClass: [{
|
|
89
90
|
type: Input
|
|
90
91
|
}], boxShadow: [{
|
|
@@ -93,6 +94,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
|
|
|
93
94
|
type: Input
|
|
94
95
|
}], modalData: [{
|
|
95
96
|
type: Input
|
|
97
|
+
}], mode: [{
|
|
98
|
+
type: Input
|
|
99
|
+
}], position: [{
|
|
100
|
+
type: Input
|
|
101
|
+
}], drawerWidth: [{
|
|
102
|
+
type: Input
|
|
96
103
|
}], openModal: [{
|
|
97
104
|
type: Output
|
|
98
105
|
}], closeModal: [{
|
|
@@ -104,4 +111,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
|
|
|
104
111
|
type: HostListener,
|
|
105
112
|
args: ['document:click', ['$event']]
|
|
106
113
|
}] } });
|
|
107
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
114
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidmVyYmVuLWRpYWxvZ3VlLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3ZlcmJlbi1uZy11aS9zcmMvbGliL2NvbXBvbmVudHMvdmVyYmVuLWRpYWxvZ3VlL3ZlcmJlbi1kaWFsb2d1ZS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy92ZXJiZW4tbmctdWkvc3JjL2xpYi9jb21wb25lbnRzL3ZlcmJlbi1kaWFsb2d1ZS92ZXJiZW4tZGlhbG9ndWUuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNMLFNBQVMsRUFDVCxZQUFZLEVBQ1osS0FBSyxFQUNMLE1BQU0sRUFDTixZQUFZLEdBRWIsTUFBTSxlQUFlLENBQUM7Ozs7QUFPdkIsTUFBTSxPQUFPLHVCQUF1QjtJQUN6QixjQUFjLEdBQTRCLElBQUksQ0FBQztJQUMvQyxZQUFZLEdBQTRCLElBQUksQ0FBQztJQUM3QyxjQUFjLEdBQTRCLElBQUksQ0FBQztJQUMvQyxhQUFhLEdBQVksSUFBSSxDQUFDO0lBQzlCLG1CQUFtQixHQUFZLElBQUksQ0FBQztJQUNwQyxhQUFhLEdBQVksSUFBSSxDQUFDO0lBQzlCLFNBQVMsR0FBWSxLQUFLLENBQUM7SUFDM0IsSUFBSSxHQUFpQyxPQUFPLENBQUM7SUFDN0MsYUFBYSxHQUFXLFdBQVcsQ0FBQztJQUNwQyxXQUFXLEdBQVcsRUFBRSxDQUFDO0lBQ3pCLGFBQWEsR0FBWSxLQUFLLENBQUM7SUFDL0IsTUFBTSxHQUFXLEVBQUUsQ0FBQztJQUNwQixPQUFPLEdBQVcsTUFBTSxDQUFDO0lBQ3pCLFlBQVksR0FBVyxNQUFNLENBQUM7SUFDOUIsZUFBZSxHQUFXLE1BQU0sQ0FBQztJQUNqQyxjQUFjLEdBQVcsZ0JBQWdCLENBQUM7SUFDMUMsU0FBUyxHQUFXLDJDQUEyQyxDQUFDO0lBQ2hFLGdCQUFnQixHQUFZLElBQUksQ0FBQztJQUNqQyxTQUFTLENBQU07SUFFeEIsNkJBQTZCO0lBQ3BCLElBQUksR0FBMEIsVUFBVSxDQUFDO0lBQ3pDLFFBQVEsR0FBcUIsT0FBTyxDQUFDO0lBQ3JDLFdBQVcsR0FBVyxPQUFPLENBQUM7SUFDN0IsU0FBUyxHQUFHLElBQUksWUFBWSxFQUFPLENBQUM7SUFDcEMsVUFBVSxHQUFHLElBQUksWUFBWSxFQUFPLENBQUM7SUFFL0MsV0FBVztRQUNULElBQUksSUFBSSxDQUFDLFNBQVMsRUFBRSxDQUFDO1lBQ25CLElBQUksQ0FBQyxTQUFTLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxTQUFTLENBQUMsQ0FBQztRQUN0QyxDQUFDO0lBQ0gsQ0FBQztJQUlELGdCQUFnQixDQUFDLEtBQW9CO1FBQ25DLElBQUksSUFBSSxDQUFDLGFBQWEsSUFBSSxJQUFJLENBQUMsU0FBUyxFQUFFLENBQUM7WUFDekMsSUFBSSxDQUFDLE9BQU8sRUFBRSxDQUFDO1FBQ2pCLENBQUM7SUFDSCxDQUFDO0lBR0QsY0FBYyxDQUFDLEtBQWlCO1FBQzlCLElBQUksSUFBSSxDQUFDLG1CQUFtQixJQUFJLElBQUksQ0FBQyxTQUFTLEVBQUUsQ0FBQztZQUMvQyxNQUFNLE1BQU0sR0FBRyxLQUFLLENBQUMsTUFBcUIsQ0FBQztZQUMzQyxJQUFJLE1BQU0sQ0FBQyxTQUFTLENBQUMsUUFBUSxDQUFDLGVBQWUsQ0FBQyxFQUFFLENBQUM7Z0JBQy9DLElBQUksQ0FBQyxPQUFPLEVBQUUsQ0FBQztZQUNqQixDQUFDO1FBQ0gsQ0FBQztJQUNILENBQUM7SUFFRCxPQUFPO1FBQ0wsSUFBSSxDQUFDLFNBQVMsR0FBRyxLQUFLLENBQUM7UUFDdkIsSUFBSSxDQUFDLFVBQVUsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLFNBQVMsQ0FBQyxDQUFDO0lBQ3ZDLENBQUM7dUdBdkRVLHVCQUF1QjsyRkFBdkIsdUJBQXVCLG00QkNkcEMsK3ZFQStEQTs7MkZEakRhLHVCQUF1QjtrQkFMbkMsU0FBUzsrQkFDRSxpQkFBaUI7OEJBS2xCLGNBQWM7c0JBQXRCLEtBQUs7Z0JBQ0csWUFBWTtzQkFBcEIsS0FBSztnQkFDRyxjQUFjO3NCQUF0QixLQUFLO2dCQUNHLGFBQWE7c0JBQXJCLEtBQUs7Z0JBQ0csbUJBQW1CO3NCQUEzQixLQUFLO2dCQUNHLGFBQWE7c0JBQXJCLEtBQUs7Z0JBQ0csU0FBUztzQkFBakIsS0FBSztnQkFDRyxJQUFJO3NCQUFaLEtBQUs7Z0JBQ0csYUFBYTtzQkFBckIsS0FBSztnQkFDRyxXQUFXO3NCQUFuQixLQUFLO2dCQUNHLGFBQWE7c0JBQXJCLEtBQUs7Z0JBQ0csTUFBTTtzQkFBZCxLQUFLO2dCQUNHLE9BQU87c0JBQWYsS0FBSztnQkFDRyxZQUFZO3NCQUFwQixLQUFLO2dCQUNHLGVBQWU7c0JBQXZCLEtBQUs7Z0JBQ0csY0FBYztzQkFBdEIsS0FBSztnQkFDRyxTQUFTO3NCQUFqQixLQUFLO2dCQUNHLGdCQUFnQjtzQkFBeEIsS0FBSztnQkFDRyxTQUFTO3NCQUFqQixLQUFLO2dCQUdHLElBQUk7c0JBQVosS0FBSztnQkFDRyxRQUFRO3NCQUFoQixLQUFLO2dCQUNHLFdBQVc7c0JBQW5CLEtBQUs7Z0JBQ0ksU0FBUztzQkFBbEIsTUFBTTtnQkFDRyxVQUFVO3NCQUFuQixNQUFNO2dCQVVQLGdCQUFnQjtzQkFEZixZQUFZO3VCQUFDLHlCQUF5QixFQUFFLENBQUMsUUFBUSxDQUFDO2dCQVFuRCxjQUFjO3NCQURiLFlBQVk7dUJBQUMsZ0JBQWdCLEVBQUUsQ0FBQyxRQUFRLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBDb21wb25lbnQsXG4gIEV2ZW50RW1pdHRlcixcbiAgSW5wdXQsXG4gIE91dHB1dCxcbiAgSG9zdExpc3RlbmVyLFxuICBUZW1wbGF0ZVJlZixcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3ZlcmJlbi1kaWFsb2d1ZScsXG4gIHRlbXBsYXRlVXJsOiAnLi92ZXJiZW4tZGlhbG9ndWUuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi92ZXJiZW4tZGlhbG9ndWUuY29tcG9uZW50LmNzcyddLFxufSlcbmV4cG9ydCBjbGFzcyBWZXJiZW5EaWFsb2d1ZUNvbXBvbmVudCB7XG4gIEBJbnB1dCgpIGhlYWRlclRlbXBsYXRlOiBUZW1wbGF0ZVJlZjxhbnk+IHwgbnVsbCA9IG51bGw7XG4gIEBJbnB1dCgpIGJvZHlUZW1wbGF0ZTogVGVtcGxhdGVSZWY8YW55PiB8IG51bGwgPSBudWxsO1xuICBASW5wdXQoKSBmb290ZXJUZW1wbGF0ZTogVGVtcGxhdGVSZWY8YW55PiB8IG51bGwgPSBudWxsO1xuICBASW5wdXQoKSBzaG93Q2xvc2VJY29uOiBib29sZWFuID0gdHJ1ZTtcbiAgQElucHV0KCkgZGlzbWlzc091dHNpZGVDbGljazogYm9vbGVhbiA9IHRydWU7XG4gIEBJbnB1dCgpIGNsb3NlT25Fc2NhcGU6IGJvb2xlYW4gPSB0cnVlO1xuICBASW5wdXQoKSBpc1Zpc2libGU6IGJvb2xlYW4gPSBmYWxzZTtcbiAgQElucHV0KCkgc2l6ZTogJ3NtYWxsJyB8ICdtZWRpdW0nIHwgJ2xhcmdlJyA9ICdzbWFsbCc7XG4gIEBJbnB1dCgpIGJhY2tkcm9wQ29sb3I6IHN0cmluZyA9ICcjMDAwMDAwNWQnO1xuICBASW5wdXQoKSBjdXN0b21DbGFzczogc3RyaW5nID0gJyc7XG4gIEBJbnB1dCgpIGRpc2FibGVGb290ZXI6IGJvb2xlYW4gPSBmYWxzZTtcbiAgQElucHV0KCkgbWFyZ2luOiBzdHJpbmcgPSAnJztcbiAgQElucHV0KCkgcGFkZGluZzogc3RyaW5nID0gJzEwcHgnO1xuICBASW5wdXQoKSBib3JkZXJSYWRpdXM6IHN0cmluZyA9ICcxMHB4JztcbiAgQElucHV0KCkgZGlhbG9ndWVCZ0NvbG9yOiBzdHJpbmcgPSAnI2ZmZic7XG4gIEBJbnB1dCgpIGNsb3NlSWNvbkNsYXNzOiBzdHJpbmcgPSAnY2xvc2VJY29uQ2xhc3MnO1xuICBASW5wdXQoKSBib3hTaGFkb3c6IHN0cmluZyA9ICdib3gtc2hhZG93OiAwIDJweCAxMHB4IHJnYmEoMCwgMCwgMCwgMC4xKSc7XG4gIEBJbnB1dCgpIGVuYWJsZVRyYW5zaXRpb246IGJvb2xlYW4gPSB0cnVlO1xuICBASW5wdXQoKSBtb2RhbERhdGE6IGFueTtcblxuICAvLyBOZXcgaW5wdXRzIGZvciBkcmF3ZXIgbW9kZVxuICBASW5wdXQoKSBtb2RlOiAnZGlhbG9ndWUnIHwgJ2RyYXdlcicgPSAnZGlhbG9ndWUnO1xuICBASW5wdXQoKSBwb3NpdGlvbjogJ2xlZnQnIHwgJ3JpZ2h0JyA9ICdyaWdodCc7XG4gIEBJbnB1dCgpIGRyYXdlcldpZHRoOiBzdHJpbmcgPSAnNTAwcHgnO1xuICBAT3V0cHV0KCkgb3Blbk1vZGFsID0gbmV3IEV2ZW50RW1pdHRlcjxhbnk+KCk7XG4gIEBPdXRwdXQoKSBjbG9zZU1vZGFsID0gbmV3IEV2ZW50RW1pdHRlcjxhbnk+KCk7XG5cbiAgbmdPbkNoYW5nZXMoKSB7XG4gICAgaWYgKHRoaXMuaXNWaXNpYmxlKSB7XG4gICAgICB0aGlzLm9wZW5Nb2RhbC5lbWl0KHRoaXMubW9kYWxEYXRhKTtcbiAgICB9XG4gIH1cbiAgXG5cbiAgQEhvc3RMaXN0ZW5lcignZG9jdW1lbnQ6a2V5ZG93bi5lc2NhcGUnLCBbJyRldmVudCddKVxuICBvbktleWRvd25IYW5kbGVyKGV2ZW50OiBLZXlib2FyZEV2ZW50KSB7XG4gICAgaWYgKHRoaXMuY2xvc2VPbkVzY2FwZSAmJiB0aGlzLmlzVmlzaWJsZSkge1xuICAgICAgdGhpcy5vbkNsb3NlKCk7XG4gICAgfVxuICB9XG5cbiAgQEhvc3RMaXN0ZW5lcignZG9jdW1lbnQ6Y2xpY2snLCBbJyRldmVudCddKVxuICBvbk91dHNpZGVDbGljayhldmVudDogTW91c2VFdmVudCkge1xuICAgIGlmICh0aGlzLmRpc21pc3NPdXRzaWRlQ2xpY2sgJiYgdGhpcy5pc1Zpc2libGUpIHtcbiAgICAgIGNvbnN0IHRhcmdldCA9IGV2ZW50LnRhcmdldCBhcyBIVE1MRWxlbWVudDtcbiAgICAgIGlmICh0YXJnZXQuY2xhc3NMaXN0LmNvbnRhaW5zKCdtb2RhbC13cmFwcGVyJykpIHtcbiAgICAgICAgdGhpcy5vbkNsb3NlKCk7XG4gICAgICB9XG4gICAgfVxuICB9XG5cbiAgb25DbG9zZSgpIHtcbiAgICB0aGlzLmlzVmlzaWJsZSA9IGZhbHNlO1xuICAgIHRoaXMuY2xvc2VNb2RhbC5lbWl0KHRoaXMubW9kYWxEYXRhKTtcbiAgfVxufVxuIiwiPGRpdlxuICBjbGFzcz1cIm1vZGFsLXdyYXBwZXIgZml4ZWQgaW5zZXQtMCBmbGV4IGp1c3RpZnktY2VudGVyIGl0ZW1zLWNlbnRlclwiXG4gIFtuZ0NsYXNzXT1cIntcbiAgICAndmlzaWJsZSBvcGFjaXR5LTEwMCc6IGlzVmlzaWJsZSxcbiAgICAnaW52aXNpYmxlIG9wYWNpdHktMCc6ICFpc1Zpc2libGUsXG4gICAgJ2p1c3RpZnktc3RhcnQnOiBtb2RlID09PSAnZHJhd2VyJyAmJiBwb3NpdGlvbiA9PT0gJ2xlZnQnLFxuICAgICdqdXN0aWZ5LWVuZCc6IG1vZGUgPT09ICdkcmF3ZXInICYmIHBvc2l0aW9uID09PSAncmlnaHQnXG4gIH1cIlxuICBbbmdTdHlsZV09XCJ7ICdiYWNrZ3JvdW5kLWNvbG9yJzogYmFja2Ryb3BDb2xvciwgJ3RyYW5zaXRpb24nOiAnb3BhY2l0eSAwLjNzIGVhc2UnIH1cIlxuPlxuICA8ZGl2XG4gICAgW3N0eWxlLnBhZGRpbmddPVwicGFkZGluZ1wiXG4gICAgW3N0eWxlLm1hcmdpbl09XCJtYXJnaW5cIlxuICAgIFtzdHlsZS5iYWNrZ3JvdW5kLWNvbG9yXT1cImRpYWxvZ3VlQmdDb2xvclwiXG4gICAgW3N0eWxlLmJvcmRlci1yYWRpdXNdPVwibW9kZT09PSdkaWFsb2d1ZScgJiYgYm9yZGVyUmFkaXVzXCJcbiAgICBbc3R5bGUuYm94LXNoYWRvd109XCJib3hTaGFkb3dcIlxuICAgIFtjbGFzc109XCJjdXN0b21DbGFzc1wiXG4gICAgW25nU3R5bGVdPVwieydtYXgtd2lkdGgnOm1vZGU9PT0nZHJhd2VyJyYmZHJhd2VyV2lkdGh9XCJcbiAgICBbbmdDbGFzc109XCJ7XG4gICAgICAnbW9kYWwtY29udGVudCBwLTQnOiBtb2RlID09PSAnZGlhbG9ndWUnLFxuICAgICAgJ21heC13LXNtJzogc2l6ZSA9PT0gJ3NtYWxsJyAmJiBtb2RlID09PSAnZGlhbG9ndWUnLFxuICAgICAgJ21heC13LW1kJzogc2l6ZSA9PT0gJ21lZGl1bScgJiYgbW9kZSA9PT0gJ2RpYWxvZ3VlJyxcbiAgICAgICdtYXgtdy1sZyc6IHNpemUgPT09ICdsYXJnZScgJiYgbW9kZSA9PT0gJ2RpYWxvZ3VlJyxcbiAgICAgICdkcmF3ZXItbGVmdCc6IG1vZGUgPT09ICdkcmF3ZXInICYmIHBvc2l0aW9uID09PSAnbGVmdCcsXG4gICAgICAnZHJhd2VyLXJpZ2h0JzogbW9kZSA9PT0gJ2RyYXdlcicgJiYgcG9zaXRpb24gPT09ICdyaWdodCcsXG4gICAgICAnZHJhd2VyLXNob3ctbGVmdCc6IG1vZGUgPT09ICdkcmF3ZXInICYmIHBvc2l0aW9uID09PSAnbGVmdCcgJiYgaXNWaXNpYmxlLFxuICAgICAgJ2RyYXdlci1zaG93LXJpZ2h0JzogbW9kZSA9PT0gJ2RyYXdlcicgJiYgcG9zaXRpb24gPT09ICdyaWdodCcgJiYgaXNWaXNpYmxlXG4gICAgfVwiXG4gID5cbiAgICA8IS0tIENsb3NlIEljb24gLS0+XG4gICAgPHZlcmJlbi1zdmdcbiAgICAgICpuZ0lmPVwic2hvd0Nsb3NlSWNvblwiXG4gICAgICBbY2xhc3NdPVwiY2xvc2VJY29uQ2xhc3NcIlxuICAgICAgKGNsaWNrKT1cIm9uQ2xvc2UoKVwiXG4gICAgICBpY29uPVwiY2xvc2VcIlxuICAgICAgW3dpZHRoXT1cIjIwXCJcbiAgICAgIFtoZWlnaHRdPVwiMjBcIlxuICAgICAgZmlsbD1cIndoaXRlXCJcbiAgICAgIHN0cm9rZT1cIiMwMDBcIlxuICAgID48L3ZlcmJlbi1zdmc+XG5cbiAgICA8IS0tIE1vZGFsIEhlYWRlciAtLT5cbiAgICA8ZGl2IGNsYXNzPVwibW9kYWwtaGVhZGVyIHRleHQtbGcgZm9udC1zZW1pYm9sZCBtYi00XCI+XG4gICAgICA8bmctY29udGFpbmVyICpuZ0lmPVwiaGVhZGVyVGVtcGxhdGVcIj5cbiAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdUZW1wbGF0ZU91dGxldD1cImhlYWRlclRlbXBsYXRlXCI+PC9uZy1jb250YWluZXI+XG4gICAgICA8L25nLWNvbnRhaW5lcj5cbiAgICA8L2Rpdj5cblxuICAgIDwhLS0gTW9kYWwgQm9keSAtLT5cbiAgICA8ZGl2IGNsYXNzPVwibW9kYWwtYm9keSBtYi00XCI+XG4gICAgICA8bmctY29udGFpbmVyICpuZ0lmPVwiYm9keVRlbXBsYXRlXCI+XG4gICAgICAgIDxuZy1jb250YWluZXIgKm5nVGVtcGxhdGVPdXRsZXQ9XCJib2R5VGVtcGxhdGVcIj48L25nLWNvbnRhaW5lcj5cbiAgICAgIDwvbmctY29udGFpbmVyPlxuICAgIDwvZGl2PlxuXG4gICAgPCEtLSBNb2RhbCBGb290ZXIgLS0+XG4gICAgPGRpdiAqbmdJZj1cIiFkaXNhYmxlRm9vdGVyXCIgY2xhc3M9XCJtb2RhbC1mb290ZXIgZmxleCBqdXN0aWZ5LWVuZCBzcGFjZS14LTJcIj5cbiAgICAgIDxuZy1jb250YWluZXIgKm5nSWY9XCJmb290ZXJUZW1wbGF0ZVwiPlxuICAgICAgICA8bmctY29udGFpbmVyICpuZ1RlbXBsYXRlT3V0bGV0PVwiZm9vdGVyVGVtcGxhdGVcIj48L25nLWNvbnRhaW5lcj5cbiAgICAgIDwvbmctY29udGFpbmVyPlxuICAgIDwvZGl2PlxuICA8L2Rpdj5cbjwvZGl2PlxuIl19
|
|
@@ -5459,11 +5459,14 @@ class VerbenDialogueComponent {
|
|
|
5459
5459
|
padding = '10px';
|
|
5460
5460
|
borderRadius = '10px';
|
|
5461
5461
|
dialogueBgColor = '#fff';
|
|
5462
|
-
closeIcon = 'close';
|
|
5463
5462
|
closeIconClass = 'closeIconClass';
|
|
5464
5463
|
boxShadow = 'box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1)';
|
|
5465
5464
|
enableTransition = true;
|
|
5466
5465
|
modalData;
|
|
5466
|
+
// New inputs for drawer mode
|
|
5467
|
+
mode = 'dialogue';
|
|
5468
|
+
position = 'right';
|
|
5469
|
+
drawerWidth = '500px';
|
|
5467
5470
|
openModal = new EventEmitter();
|
|
5468
5471
|
closeModal = new EventEmitter();
|
|
5469
5472
|
ngOnChanges() {
|
|
@@ -5489,11 +5492,11 @@ class VerbenDialogueComponent {
|
|
|
5489
5492
|
this.closeModal.emit(this.modalData);
|
|
5490
5493
|
}
|
|
5491
5494
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: VerbenDialogueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5492
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.5", type: VerbenDialogueComponent, selector: "verben-dialogue", inputs: { headerTemplate: "headerTemplate", bodyTemplate: "bodyTemplate", footerTemplate: "footerTemplate", showCloseIcon: "showCloseIcon", dismissOutsideClick: "dismissOutsideClick", closeOnEscape: "closeOnEscape", isVisible: "isVisible", size: "size", backdropColor: "backdropColor", customClass: "customClass", disableFooter: "disableFooter", margin: "margin", padding: "padding", borderRadius: "borderRadius", dialogueBgColor: "dialogueBgColor",
|
|
5495
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.5", type: VerbenDialogueComponent, selector: "verben-dialogue", inputs: { headerTemplate: "headerTemplate", bodyTemplate: "bodyTemplate", footerTemplate: "footerTemplate", showCloseIcon: "showCloseIcon", dismissOutsideClick: "dismissOutsideClick", closeOnEscape: "closeOnEscape", isVisible: "isVisible", size: "size", backdropColor: "backdropColor", customClass: "customClass", disableFooter: "disableFooter", margin: "margin", padding: "padding", borderRadius: "borderRadius", dialogueBgColor: "dialogueBgColor", closeIconClass: "closeIconClass", boxShadow: "boxShadow", enableTransition: "enableTransition", modalData: "modalData", mode: "mode", position: "position", drawerWidth: "drawerWidth" }, outputs: { openModal: "openModal", closeModal: "closeModal" }, host: { listeners: { "document:keydown.escape": "onKeydownHandler($event)", "document:click": "onOutsideClick($event)" } }, usesOnChanges: true, ngImport: i0, template: "<div\n class=\"modal-wrapper fixed inset-0 flex justify-center items-center\"\n [ngClass]=\"{\n 'visible opacity-100': isVisible,\n 'invisible opacity-0': !isVisible,\n 'justify-start': mode === 'drawer' && position === 'left',\n 'justify-end': mode === 'drawer' && position === 'right'\n }\"\n [ngStyle]=\"{ 'background-color': backdropColor, 'transition': 'opacity 0.3s ease' }\"\n>\n <div\n [style.padding]=\"padding\"\n [style.margin]=\"margin\"\n [style.background-color]=\"dialogueBgColor\"\n [style.border-radius]=\"mode==='dialogue' && borderRadius\"\n [style.box-shadow]=\"boxShadow\"\n [class]=\"customClass\"\n [ngStyle]=\"{'max-width':mode==='drawer'&&drawerWidth}\"\n [ngClass]=\"{\n 'modal-content p-4': mode === 'dialogue',\n 'max-w-sm': size === 'small' && mode === 'dialogue',\n 'max-w-md': size === 'medium' && mode === 'dialogue',\n 'max-w-lg': size === 'large' && mode === 'dialogue',\n 'drawer-left': mode === 'drawer' && position === 'left',\n 'drawer-right': mode === 'drawer' && position === 'right',\n 'drawer-show-left': mode === 'drawer' && position === 'left' && isVisible,\n 'drawer-show-right': mode === 'drawer' && position === 'right' && isVisible\n }\"\n >\n <!-- Close Icon -->\n <verben-svg\n *ngIf=\"showCloseIcon\"\n [class]=\"closeIconClass\"\n (click)=\"onClose()\"\n icon=\"close\"\n [width]=\"20\"\n [height]=\"20\"\n fill=\"white\"\n stroke=\"#000\"\n ></verben-svg>\n\n <!-- Modal Header -->\n <div class=\"modal-header text-lg font-semibold mb-4\">\n <ng-container *ngIf=\"headerTemplate\">\n <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n </ng-container>\n </div>\n\n <!-- Modal Body -->\n <div class=\"modal-body mb-4\">\n <ng-container *ngIf=\"bodyTemplate\">\n <ng-container *ngTemplateOutlet=\"bodyTemplate\"></ng-container>\n </ng-container>\n </div>\n\n <!-- Modal Footer -->\n <div *ngIf=\"!disableFooter\" class=\"modal-footer flex justify-end space-x-2\">\n <ng-container *ngIf=\"footerTemplate\">\n <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n </ng-container>\n </div>\n </div>\n</div>\n", styles: [".modal-wrapper{display:flex;justify-content:center;align-items:center;position:fixed;inset:0;z-index:1000;background-color:#00000080;transition:.3s ease-in-out}.modal-wrapper.visible{visibility:visible}.modal-wrapper.invisible{visibility:hidden;transition:.3s ease,visibility 0s .3s}.pos-left{position:fixed;top:0;left:0;height:100vh}.modal-wrapper.fade-in{opacity:1}.modal-wrapper.fade-out{opacity:0}.no-animation{transition:none}.closeIconClass{position:absolute;top:0;right:0;cursor:pointer}.modal-content{position:relative;max-width:600px;width:100%}.drawer-left,.drawer-right{position:fixed;top:0;height:100%;width:100%;background-color:#fff;overflow-y:auto;transition:.4s ease-in-out}.drawer-left{left:0;transform:translate(-100%)}.drawer-right{right:0;transform:translate(100%)}.drawer-show-left,.drawer-show-right{transform:translate(0)}.max-w-sm{max-width:400px}.max-w-md{max-width:600px}.max-w-lg{max-width:800px}@media (max-width: 768px){.modal-content{width:100%;max-width:none;margin:0 1rem}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: SvgComponent, selector: "verben-svg", inputs: ["icon", "width", "height", "fill", "stroke", "size"] }] });
|
|
5493
5496
|
}
|
|
5494
5497
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: VerbenDialogueComponent, decorators: [{
|
|
5495
5498
|
type: Component,
|
|
5496
|
-
args: [{ selector: 'verben-dialogue', template: "<div
|
|
5499
|
+
args: [{ selector: 'verben-dialogue', template: "<div\n class=\"modal-wrapper fixed inset-0 flex justify-center items-center\"\n [ngClass]=\"{\n 'visible opacity-100': isVisible,\n 'invisible opacity-0': !isVisible,\n 'justify-start': mode === 'drawer' && position === 'left',\n 'justify-end': mode === 'drawer' && position === 'right'\n }\"\n [ngStyle]=\"{ 'background-color': backdropColor, 'transition': 'opacity 0.3s ease' }\"\n>\n <div\n [style.padding]=\"padding\"\n [style.margin]=\"margin\"\n [style.background-color]=\"dialogueBgColor\"\n [style.border-radius]=\"mode==='dialogue' && borderRadius\"\n [style.box-shadow]=\"boxShadow\"\n [class]=\"customClass\"\n [ngStyle]=\"{'max-width':mode==='drawer'&&drawerWidth}\"\n [ngClass]=\"{\n 'modal-content p-4': mode === 'dialogue',\n 'max-w-sm': size === 'small' && mode === 'dialogue',\n 'max-w-md': size === 'medium' && mode === 'dialogue',\n 'max-w-lg': size === 'large' && mode === 'dialogue',\n 'drawer-left': mode === 'drawer' && position === 'left',\n 'drawer-right': mode === 'drawer' && position === 'right',\n 'drawer-show-left': mode === 'drawer' && position === 'left' && isVisible,\n 'drawer-show-right': mode === 'drawer' && position === 'right' && isVisible\n }\"\n >\n <!-- Close Icon -->\n <verben-svg\n *ngIf=\"showCloseIcon\"\n [class]=\"closeIconClass\"\n (click)=\"onClose()\"\n icon=\"close\"\n [width]=\"20\"\n [height]=\"20\"\n fill=\"white\"\n stroke=\"#000\"\n ></verben-svg>\n\n <!-- Modal Header -->\n <div class=\"modal-header text-lg font-semibold mb-4\">\n <ng-container *ngIf=\"headerTemplate\">\n <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n </ng-container>\n </div>\n\n <!-- Modal Body -->\n <div class=\"modal-body mb-4\">\n <ng-container *ngIf=\"bodyTemplate\">\n <ng-container *ngTemplateOutlet=\"bodyTemplate\"></ng-container>\n </ng-container>\n </div>\n\n <!-- Modal Footer -->\n <div *ngIf=\"!disableFooter\" class=\"modal-footer flex justify-end space-x-2\">\n <ng-container *ngIf=\"footerTemplate\">\n <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n </ng-container>\n </div>\n </div>\n</div>\n", styles: [".modal-wrapper{display:flex;justify-content:center;align-items:center;position:fixed;inset:0;z-index:1000;background-color:#00000080;transition:.3s ease-in-out}.modal-wrapper.visible{visibility:visible}.modal-wrapper.invisible{visibility:hidden;transition:.3s ease,visibility 0s .3s}.pos-left{position:fixed;top:0;left:0;height:100vh}.modal-wrapper.fade-in{opacity:1}.modal-wrapper.fade-out{opacity:0}.no-animation{transition:none}.closeIconClass{position:absolute;top:0;right:0;cursor:pointer}.modal-content{position:relative;max-width:600px;width:100%}.drawer-left,.drawer-right{position:fixed;top:0;height:100%;width:100%;background-color:#fff;overflow-y:auto;transition:.4s ease-in-out}.drawer-left{left:0;transform:translate(-100%)}.drawer-right{right:0;transform:translate(100%)}.drawer-show-left,.drawer-show-right{transform:translate(0)}.max-w-sm{max-width:400px}.max-w-md{max-width:600px}.max-w-lg{max-width:800px}@media (max-width: 768px){.modal-content{width:100%;max-width:none;margin:0 1rem}}\n"] }]
|
|
5497
5500
|
}], propDecorators: { headerTemplate: [{
|
|
5498
5501
|
type: Input
|
|
5499
5502
|
}], bodyTemplate: [{
|
|
@@ -5524,8 +5527,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
|
|
|
5524
5527
|
type: Input
|
|
5525
5528
|
}], dialogueBgColor: [{
|
|
5526
5529
|
type: Input
|
|
5527
|
-
}], closeIcon: [{
|
|
5528
|
-
type: Input
|
|
5529
5530
|
}], closeIconClass: [{
|
|
5530
5531
|
type: Input
|
|
5531
5532
|
}], boxShadow: [{
|
|
@@ -5534,6 +5535,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
|
|
|
5534
5535
|
type: Input
|
|
5535
5536
|
}], modalData: [{
|
|
5536
5537
|
type: Input
|
|
5538
|
+
}], mode: [{
|
|
5539
|
+
type: Input
|
|
5540
|
+
}], position: [{
|
|
5541
|
+
type: Input
|
|
5542
|
+
}], drawerWidth: [{
|
|
5543
|
+
type: Input
|
|
5537
5544
|
}], openModal: [{
|
|
5538
5545
|
type: Output
|
|
5539
5546
|
}], closeModal: [{
|