osl-base-extended 9.3.0 → 9.4.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.
|
@@ -42,6 +42,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
42
42
|
args: [{ selector: 'lib-osl-base-extended', imports: [], template: ` <p>osl-base-extended works!</p> ` }]
|
|
43
43
|
}] });
|
|
44
44
|
|
|
45
|
+
// Minimum sliver (px) of the dialog that must stay on-screen on every edge while dragging.
|
|
46
|
+
const DRAG_MIN_VISIBLE = 60;
|
|
45
47
|
class DialogWrapper {
|
|
46
48
|
dialogRef;
|
|
47
49
|
data;
|
|
@@ -58,12 +60,22 @@ class DialogWrapper {
|
|
|
58
60
|
this.dialogData.component = data.component;
|
|
59
61
|
this.dialogData.isDraggable = data.isDraggable;
|
|
60
62
|
}
|
|
63
|
+
// Lets the dialog be dragged past the viewport edges but keeps at least
|
|
64
|
+
// DRAG_MIN_VISIBLE px of it on-screen so it can never be fully lost off-screen.
|
|
65
|
+
dragConstrainPosition = (point, _dragRef, dimensions, pickupPositionInElement) => {
|
|
66
|
+
const x = point.x - pickupPositionInElement.x;
|
|
67
|
+
const y = point.y - pickupPositionInElement.y;
|
|
68
|
+
return {
|
|
69
|
+
x: Math.min(Math.max(x, DRAG_MIN_VISIBLE - dimensions.width), window.innerWidth - DRAG_MIN_VISIBLE),
|
|
70
|
+
y: Math.min(Math.max(y, DRAG_MIN_VISIBLE - dimensions.height), window.innerHeight - DRAG_MIN_VISIBLE),
|
|
71
|
+
};
|
|
72
|
+
};
|
|
61
73
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DialogWrapper, deps: [{ token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
|
|
62
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DialogWrapper, isStandalone: true, selector: "dialog-wrapper", ngImport: i0, template: "\r\n@if(dialogData.component){\r\n <ng-container [ngComponentOutlet]=\"dialogData.component\" [ngComponentOutletInputs]=\"{ data: dialogData }\"></ng-container>\r\n}\r\n@else{\r\n <div\r\n class=\"dialog-container\"\r\n cdkDrag\r\n
|
|
74
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DialogWrapper, isStandalone: true, selector: "dialog-wrapper", ngImport: i0, template: "\r\n@if(dialogData.component){\r\n <ng-container [ngComponentOutlet]=\"dialogData.component\" [ngComponentOutletInputs]=\"{ data: dialogData }\"></ng-container>\r\n}\r\n@else{\r\n <div\r\n class=\"dialog-container\"\r\n cdkDrag\r\n cdkDragRootElement=\".cdk-overlay-pane\"\r\n [cdkDragConstrainPosition]=\"dragConstrainPosition\"\r\n [cdkDragDisabled]=\"!dialogData.isDraggable\">\r\n\r\n <!-- Header -->\r\n @if(typeof dialogData.header == 'string') {\r\n <div class=\"dialog-header\" [class.draggable]=\"dialogData.isDraggable\" cdkDragHandle [cdkDragHandleDisabled]=\"!dialogData.isDraggable\" mat-dialog-title>\r\n <div class=\"dialog-header-left\">\r\n <div class=\"dialog-icon-ring\">\r\n <mat-icon class=\"dialog-icon\">\r\n {{ dialogData.header.startsWith('Add') ? 'add_circle' : dialogData.header.startsWith('Edit') ? 'edit' : 'info' }}\r\n </mat-icon>\r\n </div>\r\n <div class=\"dialog-title-group\">\r\n <span class=\"dialog-mode-label\">\r\n {{ dialogData.header.startsWith('Add') ? 'Creating New' : dialogData.header.startsWith('Edit') ? 'Edit' : '' }}\r\n </span>\r\n <span class=\"dialog-heading\"> {{ dialogData.header.startsWith('Add') ? dialogData.header.replace('Add','') : dialogData.header.startsWith('Edit') ? dialogData.header.replace('Edit','') : '' }}</span>\r\n </div>\r\n </div>\r\n @if(dialogData.isDraggable) {\r\n <div class=\"dialog-drag-handle\" title=\"Drag to move\">\r\n <mat-icon>drag_indicator</mat-icon>\r\n </div>\r\n }\r\n @if(dialogData.partialHeader) {\r\n\r\n <ng-container *ngTemplateOutlet=\"dialogData.partialHeader; context: { $implicit: dialogData }\"></ng-container>\r\n }\r\n <button mat-icon-button class=\"dialog-close-btn\" mat-dialog-close>\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n\r\n </div>\r\n } @else {\r\n <ng-container *ngTemplateOutlet=\"dialogData.header; context: { $implicit: dialogData }\"></ng-container>\r\n }\r\n \r\n <!-- Body -->\r\n <mat-dialog-content class=\"dialog-content\">\r\n @if(dialogData.formBody) {\r\n <div class=\"dialog-body\">\r\n <ng-container *ngTemplateOutlet=\"dialogData.formBody; context: { $implicit: dialogData }\"></ng-container>\r\n </div>\r\n }\r\n </mat-dialog-content>\r\n \r\n <!-- Footer -->\r\n @if(dialogData.formFooter) {\r\n <mat-dialog-actions class=\"dialog-actions\" [class.draggable]=\"dialogData.isDraggable\" cdkDragHandle [cdkDragHandleDisabled]=\"!dialogData.isDraggable\">\r\n <div class=\"dialog-footer\">\r\n <ng-container *ngTemplateOutlet=\"dialogData.formFooter; context: { $implicit: dialogData }\"></ng-container>\r\n </div>\r\n </mat-dialog-actions>\r\n }\r\n \r\n </div>\r\n\r\n}\r\n", styles: [".dialog-container{display:flex;flex-direction:column;overflow:hidden}.dialog-header{position:relative;display:flex;align-items:center;justify-content:space-between;padding:20px 20px 16px;background:linear-gradient(135deg,#f0f6ff,#e8f0fe);border-bottom:1px solid rgba(37,99,235,.12);gap:12px}.dialog-header:before{display:none}.dialog-header.draggable{cursor:move}.dialog-drag-handle{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;color:#9ca3af;cursor:move;pointer-events:none}.dialog-drag-handle .mat-icon{font-size:20px;width:20px;height:20px}.dialog-header-left{display:flex;align-items:center;gap:14px;flex:1;min-width:0}.dialog-icon-ring{flex-shrink:0;width:48px;height:48px;border-radius:12px;background:linear-gradient(135deg,var(--osl-primary, #2563eb),#3b82f6);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px #2563eb4d;animation:icon-pop .25s cubic-bezier(.34,1.56,.64,1)}.dialog-icon{color:#fff;font-size:24px;width:24px;height:24px}.dialog-title-group{display:flex;flex-direction:column;min-width:0}.dialog-mode-label{font-size:11px;font-weight:500;color:var(--osl-primary, #2563eb);text-transform:uppercase;letter-spacing:.6px;line-height:1.2}.dialog-heading{font-size:18px;font-weight:600;color:#111827;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dialog-close-btn{flex-shrink:0;color:#6b7280;transition:color .15s ease,background .15s ease}.dialog-close-btn:hover{color:#111827;background:#0000000f}.dialog-close-btn .mat-icon{font-size:20px;width:20px;height:20px}.dialog-content{padding:0!important;max-height:65vh;overflow-y:auto}.dialog-content::-webkit-scrollbar{width:5px}.dialog-content::-webkit-scrollbar-track{background:transparent}.dialog-content::-webkit-scrollbar-thumb{background:#2563eb33;border-radius:4px}.dialog-body{padding:20px 24px}.dialog-actions{padding:0!important;min-height:unset!important;border-top:1px solid #e5e7eb;background:#fafafa}.dialog-actions.draggable{cursor:move}.dialog-footer{width:100%;padding:14px 24px}@keyframes icon-pop{0%{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}.mat-mdc-dialog-title:before{display:none}\n"], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i3$1.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: i3$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }] });
|
|
63
75
|
}
|
|
64
76
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DialogWrapper, decorators: [{
|
|
65
77
|
type: Component,
|
|
66
|
-
args: [{ selector: 'dialog-wrapper', imports: [MatDialogModule, MatIconModule, NgTemplateOutlet, MatIconButton, NgComponentOutlet, DragDropModule], template: "\r\n@if(dialogData.component){\r\n <ng-container [ngComponentOutlet]=\"dialogData.component\" [ngComponentOutletInputs]=\"{ data: dialogData }\"></ng-container>\r\n}\r\n@else{\r\n <div\r\n class=\"dialog-container\"\r\n cdkDrag\r\n
|
|
78
|
+
args: [{ selector: 'dialog-wrapper', imports: [MatDialogModule, MatIconModule, NgTemplateOutlet, MatIconButton, NgComponentOutlet, DragDropModule], template: "\r\n@if(dialogData.component){\r\n <ng-container [ngComponentOutlet]=\"dialogData.component\" [ngComponentOutletInputs]=\"{ data: dialogData }\"></ng-container>\r\n}\r\n@else{\r\n <div\r\n class=\"dialog-container\"\r\n cdkDrag\r\n cdkDragRootElement=\".cdk-overlay-pane\"\r\n [cdkDragConstrainPosition]=\"dragConstrainPosition\"\r\n [cdkDragDisabled]=\"!dialogData.isDraggable\">\r\n\r\n <!-- Header -->\r\n @if(typeof dialogData.header == 'string') {\r\n <div class=\"dialog-header\" [class.draggable]=\"dialogData.isDraggable\" cdkDragHandle [cdkDragHandleDisabled]=\"!dialogData.isDraggable\" mat-dialog-title>\r\n <div class=\"dialog-header-left\">\r\n <div class=\"dialog-icon-ring\">\r\n <mat-icon class=\"dialog-icon\">\r\n {{ dialogData.header.startsWith('Add') ? 'add_circle' : dialogData.header.startsWith('Edit') ? 'edit' : 'info' }}\r\n </mat-icon>\r\n </div>\r\n <div class=\"dialog-title-group\">\r\n <span class=\"dialog-mode-label\">\r\n {{ dialogData.header.startsWith('Add') ? 'Creating New' : dialogData.header.startsWith('Edit') ? 'Edit' : '' }}\r\n </span>\r\n <span class=\"dialog-heading\"> {{ dialogData.header.startsWith('Add') ? dialogData.header.replace('Add','') : dialogData.header.startsWith('Edit') ? dialogData.header.replace('Edit','') : '' }}</span>\r\n </div>\r\n </div>\r\n @if(dialogData.isDraggable) {\r\n <div class=\"dialog-drag-handle\" title=\"Drag to move\">\r\n <mat-icon>drag_indicator</mat-icon>\r\n </div>\r\n }\r\n @if(dialogData.partialHeader) {\r\n\r\n <ng-container *ngTemplateOutlet=\"dialogData.partialHeader; context: { $implicit: dialogData }\"></ng-container>\r\n }\r\n <button mat-icon-button class=\"dialog-close-btn\" mat-dialog-close>\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n\r\n </div>\r\n } @else {\r\n <ng-container *ngTemplateOutlet=\"dialogData.header; context: { $implicit: dialogData }\"></ng-container>\r\n }\r\n \r\n <!-- Body -->\r\n <mat-dialog-content class=\"dialog-content\">\r\n @if(dialogData.formBody) {\r\n <div class=\"dialog-body\">\r\n <ng-container *ngTemplateOutlet=\"dialogData.formBody; context: { $implicit: dialogData }\"></ng-container>\r\n </div>\r\n }\r\n </mat-dialog-content>\r\n \r\n <!-- Footer -->\r\n @if(dialogData.formFooter) {\r\n <mat-dialog-actions class=\"dialog-actions\" [class.draggable]=\"dialogData.isDraggable\" cdkDragHandle [cdkDragHandleDisabled]=\"!dialogData.isDraggable\">\r\n <div class=\"dialog-footer\">\r\n <ng-container *ngTemplateOutlet=\"dialogData.formFooter; context: { $implicit: dialogData }\"></ng-container>\r\n </div>\r\n </mat-dialog-actions>\r\n }\r\n \r\n </div>\r\n\r\n}\r\n", styles: [".dialog-container{display:flex;flex-direction:column;overflow:hidden}.dialog-header{position:relative;display:flex;align-items:center;justify-content:space-between;padding:20px 20px 16px;background:linear-gradient(135deg,#f0f6ff,#e8f0fe);border-bottom:1px solid rgba(37,99,235,.12);gap:12px}.dialog-header:before{display:none}.dialog-header.draggable{cursor:move}.dialog-drag-handle{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;color:#9ca3af;cursor:move;pointer-events:none}.dialog-drag-handle .mat-icon{font-size:20px;width:20px;height:20px}.dialog-header-left{display:flex;align-items:center;gap:14px;flex:1;min-width:0}.dialog-icon-ring{flex-shrink:0;width:48px;height:48px;border-radius:12px;background:linear-gradient(135deg,var(--osl-primary, #2563eb),#3b82f6);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px #2563eb4d;animation:icon-pop .25s cubic-bezier(.34,1.56,.64,1)}.dialog-icon{color:#fff;font-size:24px;width:24px;height:24px}.dialog-title-group{display:flex;flex-direction:column;min-width:0}.dialog-mode-label{font-size:11px;font-weight:500;color:var(--osl-primary, #2563eb);text-transform:uppercase;letter-spacing:.6px;line-height:1.2}.dialog-heading{font-size:18px;font-weight:600;color:#111827;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dialog-close-btn{flex-shrink:0;color:#6b7280;transition:color .15s ease,background .15s ease}.dialog-close-btn:hover{color:#111827;background:#0000000f}.dialog-close-btn .mat-icon{font-size:20px;width:20px;height:20px}.dialog-content{padding:0!important;max-height:65vh;overflow-y:auto}.dialog-content::-webkit-scrollbar{width:5px}.dialog-content::-webkit-scrollbar-track{background:transparent}.dialog-content::-webkit-scrollbar-thumb{background:#2563eb33;border-radius:4px}.dialog-body{padding:20px 24px}.dialog-actions{padding:0!important;min-height:unset!important;border-top:1px solid #e5e7eb;background:#fafafa}.dialog-actions.draggable{cursor:move}.dialog-footer{width:100%;padding:14px 24px}@keyframes icon-pop{0%{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}.mat-mdc-dialog-title:before{display:none}\n"] }]
|
|
67
79
|
}], ctorParameters: () => [{ type: i1.MatDialogRef }, { type: Dialog, decorators: [{
|
|
68
80
|
type: Inject,
|
|
69
81
|
args: [MAT_DIALOG_DATA]
|