@educarehq/solaris-components 0.5.5 → 0.5.6
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
|
}
|
|
@@ -3277,6 +3303,8 @@ class SolarisDialogStepsContainer {
|
|
|
3277
3303
|
this.transitioning.set(true);
|
|
3278
3304
|
this.transitionHalfway.set(false);
|
|
3279
3305
|
this.currentStepIndex.set(targetIndex);
|
|
3306
|
+
this.observeActiveStepHeight(targetIndex);
|
|
3307
|
+
this.scheduleActiveStepHeightMeasure(targetIndex);
|
|
3280
3308
|
if (this.transitionBlur) {
|
|
3281
3309
|
this.halfwayTimer = globalThis.setTimeout(() => {
|
|
3282
3310
|
if (this.transitioning()) {
|
|
@@ -3300,15 +3328,46 @@ class SolarisDialogStepsContainer {
|
|
|
3300
3328
|
descriptionParams: step?.descriptionParams ?? this.configuration.descriptionParams,
|
|
3301
3329
|
});
|
|
3302
3330
|
}
|
|
3331
|
+
scheduleActiveStepHeightMeasure(index = this.currentStepIndex()) {
|
|
3332
|
+
if (this.measureRaf) {
|
|
3333
|
+
cancelAnimationFrame(this.measureRaf);
|
|
3334
|
+
}
|
|
3335
|
+
this.measureRaf = requestAnimationFrame(() => {
|
|
3336
|
+
this.measureStepHeight(index);
|
|
3337
|
+
});
|
|
3338
|
+
}
|
|
3339
|
+
measureStepHeight(index = this.currentStepIndex()) {
|
|
3340
|
+
const element = this.stepElements?.toArray()[index]?.nativeElement;
|
|
3341
|
+
if (!element) {
|
|
3342
|
+
this.activeStepHeight.set('auto');
|
|
3343
|
+
return;
|
|
3344
|
+
}
|
|
3345
|
+
const height = Math.ceil(element.scrollHeight);
|
|
3346
|
+
this.activeStepHeight.set(`${height}px`);
|
|
3347
|
+
}
|
|
3348
|
+
observeActiveStepHeight(index = this.currentStepIndex()) {
|
|
3349
|
+
this.resizeObserver?.disconnect();
|
|
3350
|
+
const element = this.stepElements?.toArray()[index]?.nativeElement;
|
|
3351
|
+
if (!element || typeof ResizeObserver === 'undefined') {
|
|
3352
|
+
return;
|
|
3353
|
+
}
|
|
3354
|
+
this.resizeObserver = new ResizeObserver(() => {
|
|
3355
|
+
this.scheduleActiveStepHeightMeasure(index);
|
|
3356
|
+
});
|
|
3357
|
+
this.resizeObserver.observe(element);
|
|
3358
|
+
}
|
|
3303
3359
|
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
|
|
3360
|
+
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
3361
|
}
|
|
3306
3362
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisDialogStepsContainer, decorators: [{
|
|
3307
3363
|
type: Component,
|
|
3308
3364
|
args: [{ selector: 'solaris-dialog-steps-container', standalone: true, imports: [
|
|
3309
3365
|
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: () => []
|
|
3366
|
+
], 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"] }]
|
|
3367
|
+
}], ctorParameters: () => [], propDecorators: { stepElements: [{
|
|
3368
|
+
type: ViewChildren,
|
|
3369
|
+
args: ['stepElement', { read: ElementRef }]
|
|
3370
|
+
}] } });
|
|
3312
3371
|
|
|
3313
3372
|
class SolarisDialogContainer {
|
|
3314
3373
|
contentHost;
|