@elderbyte/ngx-starter 20.12.0-beta.2 → 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,11 +1,11 @@
|
|
|
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';
|
|
8
|
-
import { timer, defer, ReplaySubject, concat, finalize, exhaustMap, BehaviorSubject, Subject, switchMap, of, combineLatest, EMPTY, merge, throwError, forkJoin, mergeWith, Observable, from, toArray, zip, mergeMap as mergeMap$1, fromEvent, mergeAll, skipUntil, filter as filter$1, map as map$1, combineLatestWith as combineLatestWith$1, NEVER } from 'rxjs';
|
|
8
|
+
import { timer, defer, ReplaySubject, concat, finalize, exhaustMap, BehaviorSubject, Subject, switchMap, of, combineLatest, EMPTY, merge, throwError, forkJoin, mergeWith, Observable, from, toArray, zip, mergeMap as mergeMap$1, fromEvent, mergeAll, skipUntil, filter as filter$1, map as map$1, combineLatestWith as combineLatestWith$1, tap as tap$1, takeUntil as takeUntil$1, NEVER } from 'rxjs';
|
|
9
9
|
import { tap, takeUntil, takeWhile, map, filter, distinctUntilChanged, debounceTime, catchError, first, take, switchMap as switchMap$1, mergeMap, expand, reduce, combineLatestWith, startWith, skip, delay, share, skipWhile, timeout } from 'rxjs/operators';
|
|
10
10
|
import { Temporal } from '@js-temporal/polyfill';
|
|
11
11
|
import * as i1$1 from '@angular/common/http';
|
|
@@ -38097,51 +38097,67 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImpor
|
|
|
38097
38097
|
}] });
|
|
38098
38098
|
|
|
38099
38099
|
class ElderDraggablePaneDirective {
|
|
38100
|
-
onMouseUp() {
|
|
38101
|
-
if (this.isDragging()) {
|
|
38102
|
-
this.isDragging.set(false);
|
|
38103
|
-
this.stopEventListenerMouseMove();
|
|
38104
|
-
}
|
|
38105
|
-
}
|
|
38106
38100
|
/***************************************************************************
|
|
38107
38101
|
* *
|
|
38108
38102
|
* Constructor *
|
|
38109
38103
|
* *
|
|
38110
38104
|
**************************************************************************/
|
|
38111
38105
|
constructor() {
|
|
38106
|
+
this.logger = LoggerFactory.getLogger(this.constructor.name);
|
|
38112
38107
|
this.elementRef = inject((ElementRef));
|
|
38113
|
-
|
|
38114
|
-
|
|
38108
|
+
this.renderer = inject(Renderer2);
|
|
38109
|
+
/***************************************************************************
|
|
38110
|
+
* *
|
|
38111
|
+
* Inputs *
|
|
38112
|
+
* *
|
|
38113
|
+
**************************************************************************/
|
|
38115
38114
|
this.minWidth = input(5, ...(ngDevMode ? [{ debugName: "minWidth" }] : []));
|
|
38116
38115
|
this.maxWidth = input(95, ...(ngDevMode ? [{ debugName: "maxWidth" }] : []));
|
|
38117
38116
|
this.handlePosition = input('end', ...(ngDevMode ? [{ debugName: "handlePosition" }] : []));
|
|
38118
|
-
this.
|
|
38119
|
-
|
|
38120
|
-
|
|
38117
|
+
this.handleDisabled = input(false, ...(ngDevMode ? [{ debugName: "handleDisabled" }] : []));
|
|
38118
|
+
/***************************************************************************
|
|
38119
|
+
* *
|
|
38120
|
+
* State *
|
|
38121
|
+
* *
|
|
38122
|
+
**************************************************************************/
|
|
38123
|
+
this.isInComputedWidthMode = signal(false, ...(ngDevMode ? [{ debugName: "isInComputedWidthMode" }] : []));
|
|
38121
38124
|
this.isDragging = signal(false, ...(ngDevMode ? [{ debugName: "isDragging" }] : []));
|
|
38122
38125
|
this.widthInPercent = signal(null, ...(ngDevMode ? [{ debugName: "widthInPercent" }] : []));
|
|
38123
|
-
|
|
38126
|
+
this.containerWidth = 0;
|
|
38127
|
+
this.dragStartMousePosX = 0;
|
|
38128
|
+
this.dragStartPaneWidthInPercent = 0;
|
|
38129
|
+
/***************************************************************************
|
|
38130
|
+
* *
|
|
38131
|
+
* Computed *
|
|
38132
|
+
* *
|
|
38133
|
+
**************************************************************************/
|
|
38124
38134
|
this.constrainedWidth = computed(() => {
|
|
38125
38135
|
const width = this.widthInPercent() ?? 0;
|
|
38126
38136
|
return Math.max(this.minWidth(), Math.min(this.maxWidth(), width));
|
|
38127
38137
|
}, ...(ngDevMode ? [{ debugName: "constrainedWidth" }] : []));
|
|
38128
|
-
|
|
38129
|
-
|
|
38130
|
-
|
|
38131
|
-
|
|
38138
|
+
/***************************************************************************
|
|
38139
|
+
* *
|
|
38140
|
+
* Observables *
|
|
38141
|
+
* *
|
|
38142
|
+
**************************************************************************/
|
|
38143
|
+
this.mouseDown$ = new Subject();
|
|
38144
|
+
this.mouseMove$ = fromEvent(document, 'mousemove');
|
|
38145
|
+
this.mouseUp$ = fromEvent(document, 'mouseup');
|
|
38146
|
+
this.drag$ = this.mouseDown$.pipe(tap$1((event) => {
|
|
38147
|
+
this.initializeIfNecessary();
|
|
38148
|
+
this.processDragStart(event);
|
|
38149
|
+
}), switchMap((event) => this.mouseMove$.pipe(finalize(() => {
|
|
38150
|
+
this.processDragEnd();
|
|
38151
|
+
}), takeUntil$1(this.mouseUp$))));
|
|
38132
38152
|
this.handleMouseMove = (event) => {
|
|
38133
|
-
if (!this.isDragging()) {
|
|
38134
|
-
return;
|
|
38135
|
-
}
|
|
38136
38153
|
event.preventDefault();
|
|
38137
|
-
|
|
38138
|
-
|
|
38139
|
-
console.error('Container width is 0, cannot calculate resize delta');
|
|
38154
|
+
if (this.containerWidth === 0) {
|
|
38155
|
+
this.logger.error('Container width is 0, cannot calculate resize delta');
|
|
38140
38156
|
return;
|
|
38141
38157
|
}
|
|
38142
38158
|
const deltaX = event.clientX - this.dragStartMousePosX;
|
|
38143
38159
|
// Convert pixel delta to percentage delta
|
|
38144
|
-
let delta = (deltaX / this.
|
|
38160
|
+
let delta = (deltaX / this.containerWidth) * 100;
|
|
38145
38161
|
// Invert delta for left-side handles
|
|
38146
38162
|
if (this.handlePosition() === 'start') {
|
|
38147
38163
|
delta = -delta;
|
|
@@ -38149,70 +38165,88 @@ class ElderDraggablePaneDirective {
|
|
|
38149
38165
|
const newWidth = this.dragStartPaneWidthInPercent + delta;
|
|
38150
38166
|
this.widthInPercent.set(newWidth);
|
|
38151
38167
|
};
|
|
38168
|
+
this.drag$.pipe(takeUntilDestroyed()).subscribe((event) => {
|
|
38169
|
+
this.handleMouseMove(event);
|
|
38170
|
+
});
|
|
38152
38171
|
effect(() => {
|
|
38153
|
-
const
|
|
38172
|
+
const constrainedWidth = this.constrainedWidth();
|
|
38173
|
+
const isInComputedWidthMode = this.isInComputedWidthMode();
|
|
38154
38174
|
untracked(() => {
|
|
38155
|
-
if (
|
|
38156
|
-
this.
|
|
38175
|
+
if (isInComputedWidthMode && constrainedWidth !== null) {
|
|
38176
|
+
this.removeExternalWidthStyles();
|
|
38177
|
+
this.setWidthStyle(constrainedWidth);
|
|
38157
38178
|
}
|
|
38158
38179
|
});
|
|
38159
38180
|
});
|
|
38160
38181
|
}
|
|
38161
38182
|
/***************************************************************************
|
|
38162
38183
|
* *
|
|
38163
|
-
*
|
|
38184
|
+
* Life Cycle *
|
|
38164
38185
|
* *
|
|
38165
38186
|
**************************************************************************/
|
|
38166
38187
|
ngOnDestroy() {
|
|
38167
|
-
this.
|
|
38188
|
+
this.mouseDown$.complete();
|
|
38168
38189
|
}
|
|
38169
38190
|
/***************************************************************************
|
|
38170
38191
|
* *
|
|
38171
|
-
*
|
|
38192
|
+
* Private methods *
|
|
38172
38193
|
* *
|
|
38173
38194
|
**************************************************************************/
|
|
38174
|
-
|
|
38175
|
-
|
|
38176
|
-
|
|
38177
|
-
|
|
38178
|
-
|
|
38179
|
-
|
|
38180
|
-
|
|
38181
|
-
|
|
38182
|
-
|
|
38183
|
-
|
|
38184
|
-
|
|
38185
|
-
|
|
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
|
+
}
|
|
38212
|
+
processDragStart(event) {
|
|
38186
38213
|
event.preventDefault();
|
|
38187
38214
|
event.stopPropagation();
|
|
38188
|
-
if (!this.isInitialized()) {
|
|
38189
|
-
this.setWidthInPercentFromElementWidth(containerWidth);
|
|
38190
|
-
}
|
|
38191
38215
|
this.isDragging.set(true);
|
|
38192
38216
|
this.dragStartMousePosX = event.clientX;
|
|
38193
38217
|
this.dragStartPaneWidthInPercent = this.widthInPercent();
|
|
38194
|
-
this.containerWidthInPx = containerWidth;
|
|
38195
|
-
this.startEventListenerMouseMove();
|
|
38196
38218
|
}
|
|
38197
|
-
|
|
38198
|
-
|
|
38199
|
-
* Private methods *
|
|
38200
|
-
* *
|
|
38201
|
-
**************************************************************************/
|
|
38202
|
-
setWidthInPercentFromElementWidth(containerWidth) {
|
|
38203
|
-
// Calculate the current element width as a percentage of container width
|
|
38204
|
-
const elementWidth = this.elementRef.nativeElement.offsetWidth;
|
|
38205
|
-
const percentage = (elementWidth / containerWidth) * 100;
|
|
38206
|
-
this.widthInPercent.set(percentage || 30);
|
|
38219
|
+
processDragEnd() {
|
|
38220
|
+
this.isDragging.set(false);
|
|
38207
38221
|
}
|
|
38208
|
-
|
|
38209
|
-
|
|
38222
|
+
initializeIfNecessary() {
|
|
38223
|
+
if (!this.isInComputedWidthMode()) {
|
|
38224
|
+
this.isInComputedWidthMode.set(true);
|
|
38225
|
+
this.setWidthInPercentFromElementWidth();
|
|
38226
|
+
}
|
|
38210
38227
|
}
|
|
38211
|
-
|
|
38212
|
-
|
|
38228
|
+
setWidthInPercentFromElementWidth() {
|
|
38229
|
+
this.updateContainerWidth();
|
|
38230
|
+
if (this.containerWidth === 0) {
|
|
38231
|
+
this.logger.error('Container width is 0. Can not calculate percent.');
|
|
38232
|
+
return;
|
|
38233
|
+
}
|
|
38234
|
+
// Calculate the current element width as a percentage of container width
|
|
38235
|
+
const paneWidth = this.elementRef.nativeElement.offsetWidth;
|
|
38236
|
+
const percentage = (paneWidth / this.containerWidth) * 100;
|
|
38237
|
+
this.widthInPercent.set(percentage);
|
|
38238
|
+
}
|
|
38239
|
+
updateContainerWidth() {
|
|
38240
|
+
const containerElement = this.elementRef.nativeElement.parentElement;
|
|
38241
|
+
if (!containerElement) {
|
|
38242
|
+
this.logger.error('Container element not found for percentage calculation');
|
|
38243
|
+
return null;
|
|
38244
|
+
}
|
|
38245
|
+
this.containerWidth = containerElement.offsetWidth;
|
|
38246
|
+
return this.containerWidth;
|
|
38213
38247
|
}
|
|
38214
38248
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: ElderDraggablePaneDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
38215
|
-
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 }); }
|
|
38216
38250
|
}
|
|
38217
38251
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: ElderDraggablePaneDirective, decorators: [{
|
|
38218
38252
|
type: Directive,
|
|
@@ -38220,39 +38254,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImpor
|
|
|
38220
38254
|
selector: '[elderDraggablePane]',
|
|
38221
38255
|
host: {
|
|
38222
38256
|
class: 'pane-with-drag-handle',
|
|
38223
|
-
'[class.pane-with-drag-handle-initialized]': 'isInitialized()',
|
|
38224
38257
|
'[class.dragging]': 'isDragging()',
|
|
38225
|
-
'[class.
|
|
38226
|
-
'[style.width.%]': 'constrainedWidth()',
|
|
38227
|
-
'[style.width]': 'widthMode() === "initial" ? "var(--initial-width)" : "var(--dynamic-width)"',
|
|
38228
|
-
'[style.--initial-width]': '(isActive() && initialWidthCss() !== null) ? initialWidthCss() : "auto"',
|
|
38229
|
-
'[style.--dynamic-width]': 'constrainedWidth() + "%"',
|
|
38258
|
+
'[class.resize-mode]': 'isInComputedWidthMode()',
|
|
38230
38259
|
},
|
|
38231
38260
|
}]
|
|
38232
|
-
}], ctorParameters: () => [], propDecorators: {
|
|
38233
|
-
type: HostListener,
|
|
38234
|
-
args: ['document:mouseup']
|
|
38235
|
-
}] } });
|
|
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 }] }] } });
|
|
38236
38262
|
|
|
38237
38263
|
class ElderPaneComponent {
|
|
38238
38264
|
constructor() {
|
|
38239
|
-
this.dragHandleDirective = inject(ElderDraggablePaneDirective, {
|
|
38240
|
-
|
|
38265
|
+
this.dragHandleDirective = inject(ElderDraggablePaneDirective, {
|
|
38266
|
+
optional: true,
|
|
38267
|
+
self: true,
|
|
38268
|
+
});
|
|
38269
|
+
this.hasDragHandle = computed(() => !!this.dragHandleDirective && !this.dragHandleDirective.handleDisabled(), ...(ngDevMode ? [{ debugName: "hasDragHandle" }] : []));
|
|
38241
38270
|
this.hasDragHandleLeft = computed(() => this.dragHandleDirective?.handlePosition() === 'start', ...(ngDevMode ? [{ debugName: "hasDragHandleLeft" }] : []));
|
|
38242
38271
|
this.hasDragHandleRight = computed(() => this.dragHandleDirective?.handlePosition() === 'end', ...(ngDevMode ? [{ debugName: "hasDragHandleRight" }] : []));
|
|
38243
38272
|
}
|
|
38244
38273
|
onDragHandleMouseDown(event) {
|
|
38245
|
-
|
|
38246
|
-
|
|
38274
|
+
if (this.dragHandleDirective) {
|
|
38275
|
+
this.dragHandleDirective.mouseDown$.next(event);
|
|
38276
|
+
}
|
|
38247
38277
|
}
|
|
38248
38278
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: ElderPaneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
38249
|
-
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}:host.
|
|
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 }); }
|
|
38250
38280
|
}
|
|
38251
38281
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: ElderPaneComponent, decorators: [{
|
|
38252
38282
|
type: Component,
|
|
38253
38283
|
args: [{ selector: 'elder-pane', imports: [], host: {
|
|
38254
38284
|
class: 'elder-pane',
|
|
38255
|
-
}, 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}:host.
|
|
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"] }]
|
|
38256
38286
|
}] });
|
|
38257
38287
|
|
|
38258
38288
|
class ElderPaneContentComponent {
|