@educarehq/solaris-components 0.5.5 → 0.5.7
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.
|
@@ -3097,6 +3097,10 @@ class SolarisDialogStepsContainer {
|
|
|
3097
3097
|
transitioning = signal(false, ...(ngDevMode ? [{ debugName: "transitioning" }] : []));
|
|
3098
3098
|
transitionHalfway = signal(false, ...(ngDevMode ? [{ debugName: "transitionHalfway" }] : []));
|
|
3099
3099
|
currentStepIndex = signal(this.resolveInitialStepIndex(), ...(ngDevMode ? [{ debugName: "currentStepIndex" }] : []));
|
|
3100
|
+
stepElements;
|
|
3101
|
+
activeStepHeight = signal('auto', ...(ngDevMode ? [{ debugName: "activeStepHeight" }] : []));
|
|
3102
|
+
measureRaf = 0;
|
|
3103
|
+
resizeObserver;
|
|
3100
3104
|
halfwayTimer = 0;
|
|
3101
3105
|
transitionTimer = 0;
|
|
3102
3106
|
stepInjectors = this.steps.map(step => Injector.create({
|
|
@@ -3119,7 +3123,16 @@ class SolarisDialogStepsContainer {
|
|
|
3119
3123
|
return `${this.transitionDurationMs}ms`;
|
|
3120
3124
|
}, ...(ngDevMode ? [{ debugName: "transitionDuration" }] : []));
|
|
3121
3125
|
constructor() {
|
|
3122
|
-
this.
|
|
3126
|
+
this.destroyRef.onDestroy(() => {
|
|
3127
|
+
globalThis.clearTimeout(this.halfwayTimer);
|
|
3128
|
+
globalThis.clearTimeout(this.transitionTimer);
|
|
3129
|
+
if (this.measureRaf) {
|
|
3130
|
+
cancelAnimationFrame(this.measureRaf);
|
|
3131
|
+
}
|
|
3132
|
+
this.resizeObserver?.disconnect();
|
|
3133
|
+
});
|
|
3134
|
+
this.dialogRef.afterAction()
|
|
3135
|
+
.pipe(takeUntilDestroyed(this.destroyRef))
|
|
3123
3136
|
.subscribe(action => {
|
|
3124
3137
|
void this.handleAction(action.value);
|
|
3125
3138
|
});
|
|
@@ -3128,11 +3141,24 @@ class SolarisDialogStepsContainer {
|
|
|
3128
3141
|
this.loading();
|
|
3129
3142
|
this.updateDialogHeader();
|
|
3130
3143
|
this.updateDialogActions();
|
|
3144
|
+
queueMicrotask(() => {
|
|
3145
|
+
this.observeActiveStepHeight();
|
|
3146
|
+
this.scheduleActiveStepHeightMeasure();
|
|
3147
|
+
});
|
|
3131
3148
|
});
|
|
3132
3149
|
queueMicrotask(() => {
|
|
3133
3150
|
void this.runBeforeEnter(this.currentStepIndex(), 'initial');
|
|
3134
3151
|
});
|
|
3135
3152
|
}
|
|
3153
|
+
ngAfterViewInit() {
|
|
3154
|
+
this.stepElements.changes.pipe(takeUntilDestroyed(this.destroyRef))
|
|
3155
|
+
.subscribe(() => {
|
|
3156
|
+
this.observeActiveStepHeight();
|
|
3157
|
+
this.scheduleActiveStepHeightMeasure();
|
|
3158
|
+
});
|
|
3159
|
+
this.observeActiveStepHeight();
|
|
3160
|
+
this.scheduleActiveStepHeightMeasure();
|
|
3161
|
+
}
|
|
3136
3162
|
stepInjector(index) {
|
|
3137
3163
|
return this.stepInjectors[index];
|
|
3138
3164
|
}
|
|
@@ -3217,8 +3243,9 @@ class SolarisDialogStepsContainer {
|
|
|
3217
3243
|
return;
|
|
3218
3244
|
}
|
|
3219
3245
|
const step = this.steps[this.currentStepIndex()];
|
|
3220
|
-
|
|
3221
|
-
|
|
3246
|
+
const customActions = this.resolveStepActions(step);
|
|
3247
|
+
if (customActions.length) {
|
|
3248
|
+
this.dialogRef.updateActions(customActions.map(action => ({
|
|
3222
3249
|
...action,
|
|
3223
3250
|
disabled: action.disabled || this.loading(),
|
|
3224
3251
|
})));
|
|
@@ -3264,6 +3291,20 @@ class SolarisDialogStepsContainer {
|
|
|
3264
3291
|
};
|
|
3265
3292
|
this.dialogRef.updateActions([leftAction, rightAction]);
|
|
3266
3293
|
}
|
|
3294
|
+
resolveStepActions(step) {
|
|
3295
|
+
if (!step?.actions) {
|
|
3296
|
+
return [];
|
|
3297
|
+
}
|
|
3298
|
+
if (typeof step.actions === 'function') {
|
|
3299
|
+
return step.actions({
|
|
3300
|
+
index: this.currentStepIndex(),
|
|
3301
|
+
loading: this.loading(),
|
|
3302
|
+
isFirstStep: this.isFirstStep(),
|
|
3303
|
+
isLastStep: this.isLastStep(),
|
|
3304
|
+
});
|
|
3305
|
+
}
|
|
3306
|
+
return step.actions;
|
|
3307
|
+
}
|
|
3267
3308
|
resolveInitialStepIndex() {
|
|
3268
3309
|
if (!this.steps.length) {
|
|
3269
3310
|
return 0;
|
|
@@ -3277,6 +3318,8 @@ class SolarisDialogStepsContainer {
|
|
|
3277
3318
|
this.transitioning.set(true);
|
|
3278
3319
|
this.transitionHalfway.set(false);
|
|
3279
3320
|
this.currentStepIndex.set(targetIndex);
|
|
3321
|
+
this.observeActiveStepHeight(targetIndex);
|
|
3322
|
+
this.scheduleActiveStepHeightMeasure(targetIndex);
|
|
3280
3323
|
if (this.transitionBlur) {
|
|
3281
3324
|
this.halfwayTimer = globalThis.setTimeout(() => {
|
|
3282
3325
|
if (this.transitioning()) {
|
|
@@ -3300,15 +3343,46 @@ class SolarisDialogStepsContainer {
|
|
|
3300
3343
|
descriptionParams: step?.descriptionParams ?? this.configuration.descriptionParams,
|
|
3301
3344
|
});
|
|
3302
3345
|
}
|
|
3346
|
+
scheduleActiveStepHeightMeasure(index = this.currentStepIndex()) {
|
|
3347
|
+
if (this.measureRaf) {
|
|
3348
|
+
cancelAnimationFrame(this.measureRaf);
|
|
3349
|
+
}
|
|
3350
|
+
this.measureRaf = requestAnimationFrame(() => {
|
|
3351
|
+
this.measureStepHeight(index);
|
|
3352
|
+
});
|
|
3353
|
+
}
|
|
3354
|
+
measureStepHeight(index = this.currentStepIndex()) {
|
|
3355
|
+
const element = this.stepElements?.toArray()[index]?.nativeElement;
|
|
3356
|
+
if (!element) {
|
|
3357
|
+
this.activeStepHeight.set('auto');
|
|
3358
|
+
return;
|
|
3359
|
+
}
|
|
3360
|
+
const height = Math.ceil(element.scrollHeight);
|
|
3361
|
+
this.activeStepHeight.set(`${height}px`);
|
|
3362
|
+
}
|
|
3363
|
+
observeActiveStepHeight(index = this.currentStepIndex()) {
|
|
3364
|
+
this.resizeObserver?.disconnect();
|
|
3365
|
+
const element = this.stepElements?.toArray()[index]?.nativeElement;
|
|
3366
|
+
if (!element || typeof ResizeObserver === 'undefined') {
|
|
3367
|
+
return;
|
|
3368
|
+
}
|
|
3369
|
+
this.resizeObserver = new ResizeObserver(() => {
|
|
3370
|
+
this.scheduleActiveStepHeightMeasure(index);
|
|
3371
|
+
});
|
|
3372
|
+
this.resizeObserver.observe(element);
|
|
3373
|
+
}
|
|
3303
3374
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisDialogStepsContainer, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3304
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: SolarisDialogStepsContainer, isStandalone: true, selector: "solaris-dialog-steps-container", ngImport: i0, template: "<div class=\"solaris-dialog-steps\" [class.is-transitioning]=\"transitioning()\" [class.is-halfway]=\"transitionHalfway()\"\r\n [class.has-transition-blur]=\"transitionBlur\" [style.--solaris-dialog-steps-min-height]=\"contentMinHeight\">\r\n @if (showProgress) {\r\n <div class=\"solaris-dialog-steps__progress\" aria-hidden=\"true\">\r\n @for (step of steps; track step.key; let index = $index) {\r\n <span class=\"solaris-dialog-steps__dot\" [class.is-active]=\"index === currentStepIndex()\"\r\n [class.is-complete]=\"index < currentStepIndex()\"></span>\r\n }\r\n </div>\r\n }\r\n\r\n <div class=\"solaris-dialog-steps__viewport\">\r\n <div class=\"solaris-dialog-steps__track\" [style.transform]=\"trackTransform()\"\r\n [style.--solaris-dialog-steps-transition-duration]=\"transitionDuration()\">\r\n @for (step of steps; track step.key; let index = $index) {\r\n <section class=\"solaris-dialog-steps__step\" [class.is-active]=\"index === currentStepIndex()\"\r\n [class.is-before]=\"index < currentStepIndex()\" [class.is-after]=\"index > currentStepIndex()\">\r\n <div class=\"solaris-dialog-steps__step-inner\">\r\n <ng-container
|
|
3375
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: SolarisDialogStepsContainer, isStandalone: true, selector: "solaris-dialog-steps-container", viewQueries: [{ propertyName: "stepElements", predicate: ["stepElement"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"solaris-dialog-steps\" [class.is-transitioning]=\"transitioning()\" [class.is-halfway]=\"transitionHalfway()\"\r\n [class.has-transition-blur]=\"transitionBlur\" [style.--solaris-dialog-steps-min-height]=\"contentMinHeight\"\r\n [style.--solaris-dialog-steps-active-height]=\"activeStepHeight()\">\r\n @if (showProgress) {\r\n <div class=\"solaris-dialog-steps__progress\" aria-hidden=\"true\">\r\n @for (step of steps; track step.key; let index = $index) {\r\n <span class=\"solaris-dialog-steps__dot\" [class.is-active]=\"index === currentStepIndex()\"\r\n [class.is-complete]=\"index < currentStepIndex()\"></span>\r\n }\r\n </div>\r\n }\r\n\r\n <div class=\"solaris-dialog-steps__viewport\">\r\n <div class=\"solaris-dialog-steps__track\" [style.transform]=\"trackTransform()\"\r\n [style.--solaris-dialog-steps-transition-duration]=\"transitionDuration()\">\r\n @for (step of steps; track step.key; let index = $index) {\r\n <section #stepElement class=\"solaris-dialog-steps__step\" [class.is-active]=\"index === currentStepIndex()\"\r\n [class.is-before]=\"index < currentStepIndex()\" [class.is-after]=\"index > currentStepIndex()\">\r\n <div class=\"solaris-dialog-steps__step-inner\">\r\n <ng-container\r\n *ngComponentOutlet=\"step.component; injector: stepInjector(index)\"\r\n ></ng-container>\r\n </div>\r\n </section>\r\n }\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [":host{display:block;min-inline-size:0}.solaris-dialog-steps{--solaris-dialog-steps-min-height: 0;--solaris-dialog-steps-active-height: auto;--solaris-dialog-steps-transition-duration: .42s;display:grid;min-inline-size:0;gap:var(--solaris-space-5)}.solaris-dialog-steps__progress{display:flex;align-items:center;justify-content:center;gap:var(--solaris-space-2)}.solaris-dialog-steps__dot{inline-size:.8rem;block-size:.8rem;border-radius:var(--solaris-radius-full);background:color-mix(in srgb,var(--solaris-color-text-muted) 35%,transparent);transition:background-color .18s ease,transform .18s ease}.solaris-dialog-steps__dot.is-active{background:var(--solaris-color-primary);transform:scale(1.2)}.solaris-dialog-steps__dot.is-complete{background:color-mix(in srgb,var(--solaris-color-primary) 72%,white)}.solaris-dialog-steps__viewport{overflow:hidden;inline-size:100%;min-inline-size:0;block-size:var(--solaris-dialog-steps-active-height, auto);min-block-size:var(--solaris-dialog-steps-min-height);transition:block-size var(--solaris-dialog-steps-transition-duration) cubic-bezier(.22,1,.36,1)}.solaris-dialog-steps__track{display:flex;align-items:flex-start;inline-size:100%;min-inline-size:0;will-change:transform;transition:transform var(--solaris-dialog-steps-transition-duration) cubic-bezier(.22,1,.36,1)}.solaris-dialog-steps__step{flex:0 0 100%;inline-size:100%;min-inline-size:100%;min-block-size:var(--solaris-dialog-steps-min-height);display:grid;align-content:center;overflow:visible}.solaris-dialog-steps__step-inner{inline-size:100%;min-inline-size:0;transition:filter .18s ease,opacity .18s ease,transform .18s ease}.solaris-dialog-steps.has-transition-blur.is-transitioning.is-halfway .solaris-dialog-steps__step:not(.is-active) .solaris-dialog-steps__step-inner{filter:blur(.35rem);opacity:.45;transform:scale(.985)}.solaris-dialog-steps.has-transition-blur.is-transitioning.is-halfway .solaris-dialog-steps__step.is-active .solaris-dialog-steps__step-inner{filter:blur(0);opacity:1;transform:scale(1)}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3305
3376
|
}
|
|
3306
3377
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisDialogStepsContainer, decorators: [{
|
|
3307
3378
|
type: Component,
|
|
3308
3379
|
args: [{ selector: 'solaris-dialog-steps-container', standalone: true, imports: [
|
|
3309
3380
|
NgComponentOutlet
|
|
3310
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"solaris-dialog-steps\" [class.is-transitioning]=\"transitioning()\" [class.is-halfway]=\"transitionHalfway()\"\r\n [class.has-transition-blur]=\"transitionBlur\" [style.--solaris-dialog-steps-min-height]=\"contentMinHeight\">\r\n @if (showProgress) {\r\n <div class=\"solaris-dialog-steps__progress\" aria-hidden=\"true\">\r\n @for (step of steps; track step.key; let index = $index) {\r\n <span class=\"solaris-dialog-steps__dot\" [class.is-active]=\"index === currentStepIndex()\"\r\n [class.is-complete]=\"index < currentStepIndex()\"></span>\r\n }\r\n </div>\r\n }\r\n\r\n <div class=\"solaris-dialog-steps__viewport\">\r\n <div class=\"solaris-dialog-steps__track\" [style.transform]=\"trackTransform()\"\r\n [style.--solaris-dialog-steps-transition-duration]=\"transitionDuration()\">\r\n @for (step of steps; track step.key; let index = $index) {\r\n <section class=\"solaris-dialog-steps__step\" [class.is-active]=\"index === currentStepIndex()\"\r\n [class.is-before]=\"index < currentStepIndex()\" [class.is-after]=\"index > currentStepIndex()\">\r\n <div class=\"solaris-dialog-steps__step-inner\">\r\n <ng-container
|
|
3311
|
-
}], ctorParameters: () => []
|
|
3381
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"solaris-dialog-steps\" [class.is-transitioning]=\"transitioning()\" [class.is-halfway]=\"transitionHalfway()\"\r\n [class.has-transition-blur]=\"transitionBlur\" [style.--solaris-dialog-steps-min-height]=\"contentMinHeight\"\r\n [style.--solaris-dialog-steps-active-height]=\"activeStepHeight()\">\r\n @if (showProgress) {\r\n <div class=\"solaris-dialog-steps__progress\" aria-hidden=\"true\">\r\n @for (step of steps; track step.key; let index = $index) {\r\n <span class=\"solaris-dialog-steps__dot\" [class.is-active]=\"index === currentStepIndex()\"\r\n [class.is-complete]=\"index < currentStepIndex()\"></span>\r\n }\r\n </div>\r\n }\r\n\r\n <div class=\"solaris-dialog-steps__viewport\">\r\n <div class=\"solaris-dialog-steps__track\" [style.transform]=\"trackTransform()\"\r\n [style.--solaris-dialog-steps-transition-duration]=\"transitionDuration()\">\r\n @for (step of steps; track step.key; let index = $index) {\r\n <section #stepElement class=\"solaris-dialog-steps__step\" [class.is-active]=\"index === currentStepIndex()\"\r\n [class.is-before]=\"index < currentStepIndex()\" [class.is-after]=\"index > currentStepIndex()\">\r\n <div class=\"solaris-dialog-steps__step-inner\">\r\n <ng-container\r\n *ngComponentOutlet=\"step.component; injector: stepInjector(index)\"\r\n ></ng-container>\r\n </div>\r\n </section>\r\n }\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [":host{display:block;min-inline-size:0}.solaris-dialog-steps{--solaris-dialog-steps-min-height: 0;--solaris-dialog-steps-active-height: auto;--solaris-dialog-steps-transition-duration: .42s;display:grid;min-inline-size:0;gap:var(--solaris-space-5)}.solaris-dialog-steps__progress{display:flex;align-items:center;justify-content:center;gap:var(--solaris-space-2)}.solaris-dialog-steps__dot{inline-size:.8rem;block-size:.8rem;border-radius:var(--solaris-radius-full);background:color-mix(in srgb,var(--solaris-color-text-muted) 35%,transparent);transition:background-color .18s ease,transform .18s ease}.solaris-dialog-steps__dot.is-active{background:var(--solaris-color-primary);transform:scale(1.2)}.solaris-dialog-steps__dot.is-complete{background:color-mix(in srgb,var(--solaris-color-primary) 72%,white)}.solaris-dialog-steps__viewport{overflow:hidden;inline-size:100%;min-inline-size:0;block-size:var(--solaris-dialog-steps-active-height, auto);min-block-size:var(--solaris-dialog-steps-min-height);transition:block-size var(--solaris-dialog-steps-transition-duration) cubic-bezier(.22,1,.36,1)}.solaris-dialog-steps__track{display:flex;align-items:flex-start;inline-size:100%;min-inline-size:0;will-change:transform;transition:transform var(--solaris-dialog-steps-transition-duration) cubic-bezier(.22,1,.36,1)}.solaris-dialog-steps__step{flex:0 0 100%;inline-size:100%;min-inline-size:100%;min-block-size:var(--solaris-dialog-steps-min-height);display:grid;align-content:center;overflow:visible}.solaris-dialog-steps__step-inner{inline-size:100%;min-inline-size:0;transition:filter .18s ease,opacity .18s ease,transform .18s ease}.solaris-dialog-steps.has-transition-blur.is-transitioning.is-halfway .solaris-dialog-steps__step:not(.is-active) .solaris-dialog-steps__step-inner{filter:blur(.35rem);opacity:.45;transform:scale(.985)}.solaris-dialog-steps.has-transition-blur.is-transitioning.is-halfway .solaris-dialog-steps__step.is-active .solaris-dialog-steps__step-inner{filter:blur(0);opacity:1;transform:scale(1)}\n"] }]
|
|
3382
|
+
}], ctorParameters: () => [], propDecorators: { stepElements: [{
|
|
3383
|
+
type: ViewChildren,
|
|
3384
|
+
args: ['stepElement', { read: ElementRef }]
|
|
3385
|
+
}] } });
|
|
3312
3386
|
|
|
3313
3387
|
class SolarisDialogContainer {
|
|
3314
3388
|
contentHost;
|