@elderbyte/ngx-starter 20.12.0-beta.3 → 20.12.0-beta.4
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,33 +38105,44 @@ 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
38135
|
const width = this.widthInPercent() ?? 0;
|
|
38128
38136
|
return Math.max(this.minWidth(), Math.min(this.maxWidth(), width));
|
|
38129
38137
|
}, ...(ngDevMode ? [{ debugName: "constrainedWidth" }] : []));
|
|
38130
|
-
|
|
38138
|
+
/***************************************************************************
|
|
38139
|
+
* *
|
|
38140
|
+
* Observables *
|
|
38141
|
+
* *
|
|
38142
|
+
**************************************************************************/
|
|
38131
38143
|
this.mouseDown$ = new Subject();
|
|
38132
38144
|
this.mouseMove$ = fromEvent(document, 'mousemove');
|
|
38133
38145
|
this.mouseUp$ = fromEvent(document, 'mouseup');
|
|
38134
|
-
// main drag observable
|
|
38135
38146
|
this.drag$ = this.mouseDown$.pipe(tap$1((event) => {
|
|
38136
38147
|
this.initializeIfNecessary();
|
|
38137
38148
|
this.processDragStart(event);
|
|
@@ -38157,6 +38168,16 @@ class ElderDraggablePaneDirective {
|
|
|
38157
38168
|
this.drag$.pipe(takeUntilDestroyed()).subscribe((event) => {
|
|
38158
38169
|
this.handleMouseMove(event);
|
|
38159
38170
|
});
|
|
38171
|
+
effect(() => {
|
|
38172
|
+
const constrainedWidth = this.constrainedWidth();
|
|
38173
|
+
const isInComputedWidthMode = this.isInComputedWidthMode();
|
|
38174
|
+
untracked(() => {
|
|
38175
|
+
if (isInComputedWidthMode && constrainedWidth !== null) {
|
|
38176
|
+
this.removeExternalWidthStyles();
|
|
38177
|
+
this.setWidthStyle(constrainedWidth);
|
|
38178
|
+
}
|
|
38179
|
+
});
|
|
38180
|
+
});
|
|
38160
38181
|
}
|
|
38161
38182
|
/***************************************************************************
|
|
38162
38183
|
* *
|
|
@@ -38171,6 +38192,23 @@ class ElderDraggablePaneDirective {
|
|
|
38171
38192
|
* Private methods *
|
|
38172
38193
|
* *
|
|
38173
38194
|
**************************************************************************/
|
|
38195
|
+
removeExternalWidthStyles() {
|
|
38196
|
+
const stylesToRemove = [
|
|
38197
|
+
'width',
|
|
38198
|
+
'min-width',
|
|
38199
|
+
'max-width',
|
|
38200
|
+
'flex',
|
|
38201
|
+
'flex-grow',
|
|
38202
|
+
'flex-shrink',
|
|
38203
|
+
'flex-basis',
|
|
38204
|
+
];
|
|
38205
|
+
stylesToRemove.forEach((style) => {
|
|
38206
|
+
this.renderer.removeStyle(this.elementRef.nativeElement, style);
|
|
38207
|
+
});
|
|
38208
|
+
}
|
|
38209
|
+
setWidthStyle(width) {
|
|
38210
|
+
this.renderer.setStyle(this.elementRef.nativeElement, 'width', `${width}%`, 2);
|
|
38211
|
+
}
|
|
38174
38212
|
processDragStart(event) {
|
|
38175
38213
|
event.preventDefault();
|
|
38176
38214
|
event.stopPropagation();
|
|
@@ -38182,8 +38220,8 @@ class ElderDraggablePaneDirective {
|
|
|
38182
38220
|
this.isDragging.set(false);
|
|
38183
38221
|
}
|
|
38184
38222
|
initializeIfNecessary() {
|
|
38185
|
-
if (!this.
|
|
38186
|
-
this.
|
|
38223
|
+
if (!this.isInComputedWidthMode()) {
|
|
38224
|
+
this.isInComputedWidthMode.set(true);
|
|
38187
38225
|
this.setWidthInPercentFromElementWidth();
|
|
38188
38226
|
}
|
|
38189
38227
|
}
|
|
@@ -38208,7 +38246,7 @@ class ElderDraggablePaneDirective {
|
|
|
38208
38246
|
return this.containerWidth;
|
|
38209
38247
|
}
|
|
38210
38248
|
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: {
|
|
38249
|
+
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
38250
|
}
|
|
38213
38251
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: ElderDraggablePaneDirective, decorators: [{
|
|
38214
38252
|
type: Directive,
|
|
@@ -38217,18 +38255,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImpor
|
|
|
38217
38255
|
host: {
|
|
38218
38256
|
class: 'pane-with-drag-handle',
|
|
38219
38257
|
'[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() + "%"',
|
|
38258
|
+
'[class.resize-mode]': 'isInComputedWidthMode()',
|
|
38224
38259
|
},
|
|
38225
38260
|
}]
|
|
38226
|
-
}], ctorParameters: () => [], propDecorators: {
|
|
38261
|
+
}], 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
38262
|
|
|
38228
38263
|
class ElderPaneComponent {
|
|
38229
38264
|
constructor() {
|
|
38230
|
-
this.dragHandleDirective = inject(ElderDraggablePaneDirective, {
|
|
38231
|
-
|
|
38265
|
+
this.dragHandleDirective = inject(ElderDraggablePaneDirective, {
|
|
38266
|
+
optional: true,
|
|
38267
|
+
self: true,
|
|
38268
|
+
});
|
|
38269
|
+
this.hasDragHandle = computed(() => !!this.dragHandleDirective && !this.dragHandleDirective.handleDisabled(), ...(ngDevMode ? [{ debugName: "hasDragHandle" }] : []));
|
|
38232
38270
|
this.hasDragHandleLeft = computed(() => this.dragHandleDirective?.handlePosition() === 'start', ...(ngDevMode ? [{ debugName: "hasDragHandleLeft" }] : []));
|
|
38233
38271
|
this.hasDragHandleRight = computed(() => this.dragHandleDirective?.handlePosition() === 'end', ...(ngDevMode ? [{ debugName: "hasDragHandleRight" }] : []));
|
|
38234
38272
|
}
|
|
@@ -38238,13 +38276,13 @@ class ElderPaneComponent {
|
|
|
38238
38276
|
}
|
|
38239
38277
|
}
|
|
38240
38278
|
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:
|
|
38279
|
+
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
38280
|
}
|
|
38243
38281
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: ElderPaneComponent, decorators: [{
|
|
38244
38282
|
type: Component,
|
|
38245
38283
|
args: [{ selector: 'elder-pane', imports: [], host: {
|
|
38246
38284
|
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:
|
|
38285
|
+
}, 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
38286
|
}] });
|
|
38249
38287
|
|
|
38250
38288
|
class ElderPaneContentComponent {
|