@elderbyte/ngx-starter 20.12.0-beta.3 → 20.12.0-beta.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.
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as i2 from '@angular/common';
|
|
2
2
|
import { formatDate, CommonModule, formatCurrency, getCurrencySymbol, AsyncPipe, NgTemplateOutlet, NgClass, NgStyle, formatNumber, DecimalPipe, DatePipe, registerLocaleData, CurrencyPipe } from '@angular/common';
|
|
3
3
|
import * as i0 from '@angular/core';
|
|
4
|
-
import { Pipe, LOCALE_ID, Inject, NgModule, Injectable, inject, Optional, SkipSelf, Input, Output, Directive, forwardRef, ViewChild, ElementRef, DestroyRef, model, signal, computed, untracked, HostBinding, ViewChildren, ContentChild, ChangeDetectionStrategy, Component, Host, APP_INITIALIZER, TemplateRef, HostListener, EventEmitter, input, ViewEncapsulation, InjectionToken, output, effect, ContentChildren, contentChildren, viewChild, contentChild, viewChildren, linkedSignal, booleanAttribute, Injector, NgZone } from '@angular/core';
|
|
4
|
+
import { Pipe, LOCALE_ID, Inject, NgModule, Injectable, inject, Optional, SkipSelf, Input, Output, Directive, forwardRef, ViewChild, ElementRef, DestroyRef, model, signal, computed, untracked, HostBinding, ViewChildren, ContentChild, ChangeDetectionStrategy, Component, Host, APP_INITIALIZER, TemplateRef, HostListener, EventEmitter, input, ViewEncapsulation, InjectionToken, output, effect, ContentChildren, contentChildren, viewChild, contentChild, viewChildren, linkedSignal, booleanAttribute, Injector, NgZone, Renderer2 } from '@angular/core';
|
|
5
5
|
import * as i1 from '@angular/platform-browser';
|
|
6
6
|
import { Duration, Period, TemporalQueries, LocalTime, Instant, LocalDate, nativeJs, ZoneId, DateTimeFormatter, convert, ZonedDateTime, Temporal as Temporal$1 } from '@js-joda/core';
|
|
7
7
|
import { LoggerFactory } from '@elderbyte/ts-logger';
|
|
@@ -38105,35 +38105,49 @@ class ElderDraggablePaneDirective {
|
|
|
38105
38105
|
constructor() {
|
|
38106
38106
|
this.logger = LoggerFactory.getLogger(this.constructor.name);
|
|
38107
38107
|
this.elementRef = inject((ElementRef));
|
|
38108
|
-
|
|
38109
|
-
|
|
38110
|
-
|
|
38111
|
-
|
|
38112
|
-
|
|
38113
|
-
|
|
38114
|
-
|
|
38115
|
-
|
|
38108
|
+
this.renderer = inject(Renderer2);
|
|
38109
|
+
/***************************************************************************
|
|
38110
|
+
* *
|
|
38111
|
+
* Inputs *
|
|
38112
|
+
* *
|
|
38113
|
+
**************************************************************************/
|
|
38114
|
+
this.minWidth = input(5, ...(ngDevMode ? [{ debugName: "minWidth" }] : []));
|
|
38115
|
+
this.maxWidth = input(95, ...(ngDevMode ? [{ debugName: "maxWidth" }] : []));
|
|
38116
38116
|
this.handlePosition = input('end', ...(ngDevMode ? [{ debugName: "handlePosition" }] : []));
|
|
38117
|
-
this.
|
|
38118
|
-
|
|
38119
|
-
|
|
38117
|
+
this.handleDisabled = input(false, ...(ngDevMode ? [{ debugName: "handleDisabled" }] : []));
|
|
38118
|
+
/***************************************************************************
|
|
38119
|
+
* *
|
|
38120
|
+
* State *
|
|
38121
|
+
* *
|
|
38122
|
+
**************************************************************************/
|
|
38123
|
+
this.isInComputedWidthMode = signal(false, ...(ngDevMode ? [{ debugName: "isInComputedWidthMode" }] : []));
|
|
38120
38124
|
this.isDragging = signal(false, ...(ngDevMode ? [{ debugName: "isDragging" }] : []));
|
|
38121
38125
|
this.widthInPercent = signal(null, ...(ngDevMode ? [{ debugName: "widthInPercent" }] : []));
|
|
38122
38126
|
this.containerWidth = 0;
|
|
38123
38127
|
this.dragStartMousePosX = 0;
|
|
38124
38128
|
this.dragStartPaneWidthInPercent = 0;
|
|
38125
|
-
|
|
38129
|
+
/***************************************************************************
|
|
38130
|
+
* *
|
|
38131
|
+
* Computed *
|
|
38132
|
+
* *
|
|
38133
|
+
**************************************************************************/
|
|
38126
38134
|
this.constrainedWidth = computed(() => {
|
|
38127
|
-
const width = this.widthInPercent()
|
|
38135
|
+
const width = this.widthInPercent();
|
|
38136
|
+
if (width === null) {
|
|
38137
|
+
return null;
|
|
38138
|
+
}
|
|
38128
38139
|
return Math.max(this.minWidth(), Math.min(this.maxWidth(), width));
|
|
38129
38140
|
}, ...(ngDevMode ? [{ debugName: "constrainedWidth" }] : []));
|
|
38130
|
-
|
|
38141
|
+
/***************************************************************************
|
|
38142
|
+
* *
|
|
38143
|
+
* Observables *
|
|
38144
|
+
* *
|
|
38145
|
+
**************************************************************************/
|
|
38131
38146
|
this.mouseDown$ = new Subject();
|
|
38132
38147
|
this.mouseMove$ = fromEvent(document, 'mousemove');
|
|
38133
38148
|
this.mouseUp$ = fromEvent(document, 'mouseup');
|
|
38134
|
-
// main drag observable
|
|
38135
38149
|
this.drag$ = this.mouseDown$.pipe(tap$1((event) => {
|
|
38136
|
-
this.
|
|
38150
|
+
this.initComputedWidthModeIfNecessary();
|
|
38137
38151
|
this.processDragStart(event);
|
|
38138
38152
|
}), switchMap((event) => this.mouseMove$.pipe(finalize(() => {
|
|
38139
38153
|
this.processDragEnd();
|
|
@@ -38157,6 +38171,17 @@ class ElderDraggablePaneDirective {
|
|
|
38157
38171
|
this.drag$.pipe(takeUntilDestroyed()).subscribe((event) => {
|
|
38158
38172
|
this.handleMouseMove(event);
|
|
38159
38173
|
});
|
|
38174
|
+
/**
|
|
38175
|
+
* Effect syncs the width style with the constrained width.
|
|
38176
|
+
*/
|
|
38177
|
+
effect(() => {
|
|
38178
|
+
const constrainedWidth = this.constrainedWidth();
|
|
38179
|
+
untracked(() => {
|
|
38180
|
+
if (constrainedWidth !== null) {
|
|
38181
|
+
this.setWidthStyle(this.constrainedWidth());
|
|
38182
|
+
}
|
|
38183
|
+
});
|
|
38184
|
+
});
|
|
38160
38185
|
}
|
|
38161
38186
|
/***************************************************************************
|
|
38162
38187
|
* *
|
|
@@ -38171,6 +38196,23 @@ class ElderDraggablePaneDirective {
|
|
|
38171
38196
|
* Private methods *
|
|
38172
38197
|
* *
|
|
38173
38198
|
**************************************************************************/
|
|
38199
|
+
removeExternalWidthStyles() {
|
|
38200
|
+
const stylesToRemove = [
|
|
38201
|
+
'width',
|
|
38202
|
+
'min-width',
|
|
38203
|
+
'max-width',
|
|
38204
|
+
'flex',
|
|
38205
|
+
'flex-grow',
|
|
38206
|
+
'flex-shrink',
|
|
38207
|
+
'flex-basis',
|
|
38208
|
+
];
|
|
38209
|
+
stylesToRemove.forEach((style) => {
|
|
38210
|
+
this.renderer.removeStyle(this.elementRef.nativeElement, style);
|
|
38211
|
+
});
|
|
38212
|
+
}
|
|
38213
|
+
setWidthStyle(width) {
|
|
38214
|
+
this.renderer.setStyle(this.elementRef.nativeElement, 'width', `${width}%`, 2);
|
|
38215
|
+
}
|
|
38174
38216
|
processDragStart(event) {
|
|
38175
38217
|
event.preventDefault();
|
|
38176
38218
|
event.stopPropagation();
|
|
@@ -38181,10 +38223,13 @@ class ElderDraggablePaneDirective {
|
|
|
38181
38223
|
processDragEnd() {
|
|
38182
38224
|
this.isDragging.set(false);
|
|
38183
38225
|
}
|
|
38184
|
-
|
|
38185
|
-
if (!this.
|
|
38186
|
-
this.
|
|
38226
|
+
initComputedWidthModeIfNecessary() {
|
|
38227
|
+
if (!this.isInComputedWidthMode()) {
|
|
38228
|
+
this.isInComputedWidthMode.set(true);
|
|
38187
38229
|
this.setWidthInPercentFromElementWidth();
|
|
38230
|
+
this.removeExternalWidthStyles();
|
|
38231
|
+
// manually set width style after removal of initial styles
|
|
38232
|
+
this.setWidthStyle(this.constrainedWidth());
|
|
38188
38233
|
}
|
|
38189
38234
|
}
|
|
38190
38235
|
setWidthInPercentFromElementWidth() {
|
|
@@ -38208,7 +38253,7 @@ class ElderDraggablePaneDirective {
|
|
|
38208
38253
|
return this.containerWidth;
|
|
38209
38254
|
}
|
|
38210
38255
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: ElderDraggablePaneDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
38211
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.6", type: ElderDraggablePaneDirective, isStandalone: true, selector: "[elderDraggablePane]", inputs: {
|
|
38256
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.6", type: ElderDraggablePaneDirective, isStandalone: true, selector: "[elderDraggablePane]", inputs: { minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, handlePosition: { classPropertyName: "handlePosition", publicName: "handlePosition", isSignal: true, isRequired: false, transformFunction: null }, handleDisabled: { classPropertyName: "handleDisabled", publicName: "handleDisabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.dragging": "isDragging()", "class.resize-mode": "isInComputedWidthMode()" }, classAttribute: "pane-with-drag-handle" }, ngImport: i0 }); }
|
|
38212
38257
|
}
|
|
38213
38258
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: ElderDraggablePaneDirective, decorators: [{
|
|
38214
38259
|
type: Directive,
|
|
@@ -38217,18 +38262,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImpor
|
|
|
38217
38262
|
host: {
|
|
38218
38263
|
class: 'pane-with-drag-handle',
|
|
38219
38264
|
'[class.dragging]': 'isDragging()',
|
|
38220
|
-
'[class.
|
|
38221
|
-
'[style.width]': 'isResizingInitialized() ? "var(--dynamic-width)" : "var(--initial-width)"',
|
|
38222
|
-
'[style.--initial-width]': '(isActive() && initialWidthCss() !== null) ? initialWidthCss() : "auto"',
|
|
38223
|
-
'[style.--dynamic-width]': 'constrainedWidth() + "%"',
|
|
38265
|
+
'[class.resize-mode]': 'isInComputedWidthMode()',
|
|
38224
38266
|
},
|
|
38225
38267
|
}]
|
|
38226
|
-
}], ctorParameters: () => [], propDecorators: {
|
|
38268
|
+
}], ctorParameters: () => [], propDecorators: { minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], handlePosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "handlePosition", required: false }] }], handleDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "handleDisabled", required: false }] }] } });
|
|
38227
38269
|
|
|
38228
38270
|
class ElderPaneComponent {
|
|
38229
38271
|
constructor() {
|
|
38230
|
-
this.dragHandleDirective = inject(ElderDraggablePaneDirective, {
|
|
38231
|
-
|
|
38272
|
+
this.dragHandleDirective = inject(ElderDraggablePaneDirective, {
|
|
38273
|
+
optional: true,
|
|
38274
|
+
self: true,
|
|
38275
|
+
});
|
|
38276
|
+
this.hasDragHandle = computed(() => !!this.dragHandleDirective && !this.dragHandleDirective.handleDisabled(), ...(ngDevMode ? [{ debugName: "hasDragHandle" }] : []));
|
|
38232
38277
|
this.hasDragHandleLeft = computed(() => this.dragHandleDirective?.handlePosition() === 'start', ...(ngDevMode ? [{ debugName: "hasDragHandleLeft" }] : []));
|
|
38233
38278
|
this.hasDragHandleRight = computed(() => this.dragHandleDirective?.handlePosition() === 'end', ...(ngDevMode ? [{ debugName: "hasDragHandleRight" }] : []));
|
|
38234
38279
|
}
|
|
@@ -38238,13 +38283,13 @@ class ElderPaneComponent {
|
|
|
38238
38283
|
}
|
|
38239
38284
|
}
|
|
38240
38285
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: ElderPaneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
38241
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.6", type: ElderPaneComponent, isStandalone: true, selector: "elder-pane", host: { classAttribute: "elder-pane" }, ngImport: i0, template: "@if (hasDragHandle()) {\n <div\n class=\"elder-pane-drag-handle\"\n [class.handle-left]=\"hasDragHandleLeft()\"\n [class.handle-right]=\"hasDragHandleRight()\"\n (mousedown)=\"onDragHandleMouseDown($event)\"\n ></div>\n}\n<div class=\"elder-pane-outer\">\n <div class=\"elder-pane-inner\">\n <ng-content select=\"elder-pane-header\"></ng-content>\n <ng-content select=\"elder-pane-content\"></ng-content>\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [":host{display:flex;height:100%;position:relative;flex:1 1 0;min-width:0;min-height:0}.elder-pane-outer{overflow:hidden;border-radius:var(--elder-pane-border-radius);background-color:var(--elder-pane-bg-color);position:relative;display:flex;flex-flow:column nowrap;width:100%;height:100%}.elder-pane-inner{display:flex;flex-flow:column nowrap;width:100%;height:100%}.elder-pane-drag-handle{position:absolute;top:0;bottom:0;width:
|
|
38286
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.6", type: ElderPaneComponent, isStandalone: true, selector: "elder-pane", host: { classAttribute: "elder-pane" }, ngImport: i0, template: "@if (hasDragHandle()) {\n <div\n class=\"elder-pane-drag-handle\"\n [class.handle-left]=\"hasDragHandleLeft()\"\n [class.handle-right]=\"hasDragHandleRight()\"\n (mousedown)=\"onDragHandleMouseDown($event)\"\n ></div>\n}\n<div class=\"elder-pane-outer\">\n <div class=\"elder-pane-inner\">\n <ng-content select=\"elder-pane-header\"></ng-content>\n <ng-content select=\"elder-pane-content\"></ng-content>\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [":host{--handle-width: 4px;--handle-offset: calc(-1 * var(--elder-pane-gap) / 2 - var(--handle-width) / 2);display:flex;height:100%;position:relative;flex:1 1 0;min-width:0;min-height:0}:host.resize-mode{flex:none!important}.elder-pane-outer{overflow:hidden;border-radius:var(--elder-pane-border-radius);background-color:var(--elder-pane-bg-color);position:relative;display:flex;flex-flow:column nowrap;width:100%;height:100%}.elder-pane-inner{display:flex;flex-flow:column nowrap;width:100%;height:100%}.elder-pane-drag-handle{position:absolute;top:0;bottom:0;width:var(--handle-width);background-color:var(--md-sys-color-outline-variant);cursor:col-resize;border-radius:3px;z-index:10;transition:.1s ease-in-out}.elder-pane-drag-handle.handle-left{left:var(--handle-offset)}.elder-pane-drag-handle.handle-right{right:var(--handle-offset)}:host.dragging{--handle-width: 6px}:host.dragging .elder-pane-drag-handle{background-color:var(--md-sys-color-secondary-container)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
38242
38287
|
}
|
|
38243
38288
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: ElderPaneComponent, decorators: [{
|
|
38244
38289
|
type: Component,
|
|
38245
38290
|
args: [{ selector: 'elder-pane', imports: [], host: {
|
|
38246
38291
|
class: 'elder-pane',
|
|
38247
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [], template: "@if (hasDragHandle()) {\n <div\n class=\"elder-pane-drag-handle\"\n [class.handle-left]=\"hasDragHandleLeft()\"\n [class.handle-right]=\"hasDragHandleRight()\"\n (mousedown)=\"onDragHandleMouseDown($event)\"\n ></div>\n}\n<div class=\"elder-pane-outer\">\n <div class=\"elder-pane-inner\">\n <ng-content select=\"elder-pane-header\"></ng-content>\n <ng-content select=\"elder-pane-content\"></ng-content>\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [":host{display:flex;height:100%;position:relative;flex:1 1 0;min-width:0;min-height:0}.elder-pane-outer{overflow:hidden;border-radius:var(--elder-pane-border-radius);background-color:var(--elder-pane-bg-color);position:relative;display:flex;flex-flow:column nowrap;width:100%;height:100%}.elder-pane-inner{display:flex;flex-flow:column nowrap;width:100%;height:100%}.elder-pane-drag-handle{position:absolute;top:0;bottom:0;width:
|
|
38292
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [], template: "@if (hasDragHandle()) {\n <div\n class=\"elder-pane-drag-handle\"\n [class.handle-left]=\"hasDragHandleLeft()\"\n [class.handle-right]=\"hasDragHandleRight()\"\n (mousedown)=\"onDragHandleMouseDown($event)\"\n ></div>\n}\n<div class=\"elder-pane-outer\">\n <div class=\"elder-pane-inner\">\n <ng-content select=\"elder-pane-header\"></ng-content>\n <ng-content select=\"elder-pane-content\"></ng-content>\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [":host{--handle-width: 4px;--handle-offset: calc(-1 * var(--elder-pane-gap) / 2 - var(--handle-width) / 2);display:flex;height:100%;position:relative;flex:1 1 0;min-width:0;min-height:0}:host.resize-mode{flex:none!important}.elder-pane-outer{overflow:hidden;border-radius:var(--elder-pane-border-radius);background-color:var(--elder-pane-bg-color);position:relative;display:flex;flex-flow:column nowrap;width:100%;height:100%}.elder-pane-inner{display:flex;flex-flow:column nowrap;width:100%;height:100%}.elder-pane-drag-handle{position:absolute;top:0;bottom:0;width:var(--handle-width);background-color:var(--md-sys-color-outline-variant);cursor:col-resize;border-radius:3px;z-index:10;transition:.1s ease-in-out}.elder-pane-drag-handle.handle-left{left:var(--handle-offset)}.elder-pane-drag-handle.handle-right{right:var(--handle-offset)}:host.dragging{--handle-width: 6px}:host.dragging .elder-pane-drag-handle{background-color:var(--md-sys-color-secondary-container)}\n"] }]
|
|
38248
38293
|
}] });
|
|
38249
38294
|
|
|
38250
38295
|
class ElderPaneContentComponent {
|