@ethlete/cdk 4.18.2 → 4.19.0
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.
- package/CHANGELOG.md +8 -0
- package/esm2022/lib/components/carousel/et-carousel-item.directive.mjs +5 -4
- package/esm2022/lib/components/forms/components/select/components/combobox/partials/combobox-body/combobox-body.component.mjs +1 -1
- package/esm2022/lib/components/forms/components/select/components/select/partials/select-body/select-body.component.mjs +2 -2
- package/esm2022/lib/components/overlay/components/menu/components/menu-container/menu-container.component.mjs +2 -2
- package/esm2022/lib/components/overlay/components/overlay/overlay.imports.mjs +3 -1
- package/esm2022/lib/components/overlay/components/overlay/partials/overlay-route-header-template-outlet/overlay-route-header-template-outlet.component.mjs +2 -2
- package/esm2022/lib/components/overlay/components/overlay/partials/overlay-router-outlet/overlay-router-outlet.component.mjs +58 -15
- package/esm2022/lib/components/overlay/components/overlay/partials/overlay-router-outlet-disabled-template/index.mjs +2 -0
- package/esm2022/lib/components/overlay/components/overlay/partials/overlay-router-outlet-disabled-template/overlay-router-outlet-disabled-template.directive.mjs +26 -0
- package/esm2022/lib/components/overlay/components/toggletip/components/toggletip/toggletip.component.mjs +1 -1
- package/esm2022/lib/components/overlay/components/tooltip/components/tooltip/tooltip.component.mjs +1 -1
- package/fesm2022/ethlete-cdk.mjs +88 -20
- package/fesm2022/ethlete-cdk.mjs.map +1 -1
- package/lib/components/carousel/et-carousel-item.directive.d.ts +1 -0
- package/lib/components/overlay/components/overlay/overlay.imports.d.ts +3 -2
- package/lib/components/overlay/components/overlay/partials/overlay-router-outlet/overlay-router-outlet.component.d.ts +7 -1
- package/lib/components/overlay/components/overlay/partials/overlay-router-outlet-disabled-template/index.d.ts +1 -0
- package/lib/components/overlay/components/overlay/partials/overlay-router-outlet-disabled-template/overlay-router-outlet-disabled-template.directive.d.ts +7 -0
- package/package.json +1 -1
package/esm2022/lib/components/overlay/components/tooltip/components/tooltip/tooltip.component.mjs
CHANGED
|
@@ -39,7 +39,7 @@ export class TooltipComponent {
|
|
|
39
39
|
provide: TOOLTIP,
|
|
40
40
|
useExisting: TooltipComponent,
|
|
41
41
|
},
|
|
42
|
-
], viewQueries: [{ propertyName: "_animatedLifecycle", first: true, predicate: ANIMATED_LIFECYCLE_TOKEN, descendants: true, static: true }], hostDirectives: [{ directive: i1.ProvideThemeDirective }], ngImport: i0, template: "<div class=\"et-tooltip-container\" etAnimatedLifecycle>\n @if (tooltipText) {\n {{ tooltipText }}\n }\n\n @if (tooltipTemplate) {\n <ng-container *ngTemplateOutlet=\"tooltipTemplate; injector: injector\" />\n }\n\n <div class=\"tooltip-arrow\" et-floating-arrow></div>\n</div>\n", styles: [":where(.et-tooltip){--background-color: hsl(0 0% 20%);--foreground-color: CanvasText;--border-radius: 4px;--padding-inline: 1.5ch;--padding-block: .75ch;--inline-max-size: 25ch;--arrow-size: 10px;--arrow-radius: 2px}.et-tooltip{pointer-events:none;-webkit-user-select:none;user-select:none;transform:var(--et-floating-translate);will-change:transform}.et-tooltip[et-floating-placement^=top] .tooltip-arrow{bottom:-4px;left:0}.et-tooltip[et-floating-placement^=right] .tooltip-arrow{left:-4px;top:0}.et-tooltip[et-floating-placement^=bottom] .tooltip-arrow{top:-4px;left:0}.et-tooltip[et-floating-placement^=left] .tooltip-arrow{right:-4px;top:0}.et-tooltip-container{z-index:1;inline-size:max-content;max-inline-size:var(--inline-max-size);padding:var(--padding-block) var(--padding-inline);border-radius:var(--border-radius);background:var(--background-color);color:var(--foreground-color);will-change:transform}.et-tooltip-container:before{content:\"; Has tooltip: \";clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.tooltip-arrow{inline-size:var(--arrow-size);block-size:var(--arrow-size);position:absolute;z-index:1;transform:var(--et-floating-arrow-translate);will-change:transform}.tooltip-arrow:before{inline-size:var(--arrow-size);block-size:var(--arrow-size);border-radius:var(--arrow-radius);position:absolute;z-index:-1;transform:rotate(45deg);background:var(--background-color);top:0;left:0;content:\"\"}.et-tooltip.et-with-default-animation .et-tooltip-container.et-animation-enter-from,.et-tooltip.et-with-default-animation .et-tooltip-container.et-animation-leave-to{opacity:0}.et-tooltip.et-with-default-animation .et-tooltip-container.et-animation-enter-active{transition:transform .3s var(--ease-out-5),opacity .3s var(--ease-out-5)}.et-tooltip.et-with-default-animation .et-tooltip-container.et-animation-leave-active{transition:transform .15s var(--ease-in-5),opacity .15s var(--ease-in-5)}.et-tooltip.et-with-default-animation[et-floating-placement^=top] .et-tooltip-container.et-animation-enter-from,.et-tooltip.et-with-default-animation[et-floating-placement^=top] .et-tooltip-container.et-animation-leave-to{transform:translateY(5px)}.et-tooltip.et-with-default-animation[et-floating-placement^=right] .et-tooltip-container.et-animation-enter-from,.et-tooltip.et-with-default-animation[et-floating-placement^=right] .et-tooltip-container.et-animation-leave-to{transform:translate(-5px)}.et-tooltip.et-with-default-animation[et-floating-placement^=bottom] .et-tooltip-container.et-animation-enter-from,.et-tooltip.et-with-default-animation[et-floating-placement^=bottom] .et-tooltip-container.et-animation-leave-to{transform:translateY(-5px)}.et-tooltip.et-with-default-animation[et-floating-placement^=left] .et-tooltip-container.et-animation-enter-from,.et-tooltip.et-with-default-animation[et-floating-placement^=left] .et-tooltip-container.et-animation-leave-to{transform:translate(5px)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: AnimatedLifecycleDirective, selector: "[etAnimatedLifecycle]", inputs: ["skipNextEnter"], outputs: ["skipNextEnterChange"], exportAs: ["etAnimatedLifecycle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
42
|
+
], viewQueries: [{ propertyName: "_animatedLifecycle", first: true, predicate: ANIMATED_LIFECYCLE_TOKEN, descendants: true, static: true }], hostDirectives: [{ directive: i1.ProvideThemeDirective }], ngImport: i0, template: "<div class=\"et-tooltip-container\" etAnimatedLifecycle>\n @if (tooltipText) {\n {{ tooltipText }}\n }\n\n @if (tooltipTemplate) {\n <ng-container *ngTemplateOutlet=\"tooltipTemplate; injector: injector\" />\n }\n\n <div class=\"tooltip-arrow\" et-floating-arrow></div>\n</div>\n", styles: [":where(.et-tooltip){--background-color: hsl(0 0% 20%);--foreground-color: CanvasText;--border-radius: 4px;--padding-inline: 1.5ch;--padding-block: .75ch;--inline-max-size: 25ch;--arrow-size: 10px;--arrow-radius: 2px}.et-tooltip{pointer-events:none;-webkit-user-select:none;user-select:none;transform:var(--et-floating-translate);will-change:transform}.et-tooltip[et-floating-placement^=top] .tooltip-arrow{bottom:-4px;left:0}.et-tooltip[et-floating-placement^=right] .tooltip-arrow{left:-4px;top:0}.et-tooltip[et-floating-placement^=bottom] .tooltip-arrow{top:-4px;left:0}.et-tooltip[et-floating-placement^=left] .tooltip-arrow{right:-4px;top:0}.et-tooltip-container{z-index:1;inline-size:max-content;max-inline-size:var(--inline-max-size);padding:var(--padding-block) var(--padding-inline);border-radius:var(--border-radius);background:var(--background-color);color:var(--foreground-color);will-change:transform}.et-tooltip-container:before{content:\"; Has tooltip: \";clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.tooltip-arrow{inline-size:var(--arrow-size);block-size:var(--arrow-size);position:absolute;z-index:1;transform:var(--et-floating-arrow-translate);will-change:transform}.tooltip-arrow:before{inline-size:var(--arrow-size);block-size:var(--arrow-size);border-radius:var(--arrow-radius);position:absolute;z-index:-1;transform:rotate(45deg);background:var(--background-color);top:0;left:0;content:\"\"}.et-tooltip.et-with-default-animation .et-tooltip-container.et-animation-enter-from,.et-tooltip.et-with-default-animation .et-tooltip-container.et-animation-leave-to{opacity:0}.et-tooltip.et-with-default-animation .et-tooltip-container.et-animation-enter-active{transition:transform .3s var(--ease-out-5),opacity .3s var(--ease-out-5)}.et-tooltip.et-with-default-animation .et-tooltip-container.et-animation-leave-active{transition:transform .15s var(--ease-in-5),opacity .15s var(--ease-in-5)}.et-tooltip.et-with-default-animation[et-floating-placement^=top] .et-tooltip-container.et-animation-enter-from,.et-tooltip.et-with-default-animation[et-floating-placement^=top] .et-tooltip-container.et-animation-leave-to{transform:translateY(5px)}.et-tooltip.et-with-default-animation[et-floating-placement^=right] .et-tooltip-container.et-animation-enter-from,.et-tooltip.et-with-default-animation[et-floating-placement^=right] .et-tooltip-container.et-animation-leave-to{transform:translate(-5px)}.et-tooltip.et-with-default-animation[et-floating-placement^=bottom] .et-tooltip-container.et-animation-enter-from,.et-tooltip.et-with-default-animation[et-floating-placement^=bottom] .et-tooltip-container.et-animation-leave-to{transform:translateY(-5px)}.et-tooltip.et-with-default-animation[et-floating-placement^=left] .et-tooltip-container.et-animation-enter-from,.et-tooltip.et-with-default-animation[et-floating-placement^=left] .et-tooltip-container.et-animation-leave-to{transform:translate(5px)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: AnimatedLifecycleDirective, selector: "[etAnimatedLifecycle]", inputs: ["skipNextEnter"], outputs: ["stateChange", "skipNextEnterChange"], exportAs: ["etAnimatedLifecycle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
43
43
|
}
|
|
44
44
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TooltipComponent, decorators: [{
|
|
45
45
|
type: Component,
|
package/fesm2022/ethlete-cdk.mjs
CHANGED
|
@@ -1236,13 +1236,14 @@ class CarouselItemDirective {
|
|
|
1236
1236
|
this.carousel = inject(CAROUSEL_TOKEN);
|
|
1237
1237
|
this.itemIndex = computed(() => this.carousel.items().indexOf(this));
|
|
1238
1238
|
this.isPreviousActive = computed(() => this.carousel.previousActiveIndex() === this.itemIndex() && this.carousel.isNavigationLocked());
|
|
1239
|
+
this.isActive = computed(() => this.itemIndex() === this.carousel.activeIndex());
|
|
1239
1240
|
this.hostClassBindings = signalHostClasses({
|
|
1240
|
-
active:
|
|
1241
|
+
active: this.isActive,
|
|
1241
1242
|
'previous-active': this.isPreviousActive,
|
|
1242
1243
|
});
|
|
1243
1244
|
this.hostAttributeBindings = signalHostAttributes({
|
|
1244
|
-
inert: computed(() => this.
|
|
1245
|
-
'aria-hidden': computed(() => this.
|
|
1245
|
+
inert: computed(() => !this.isActive()),
|
|
1246
|
+
'aria-hidden': computed(() => !this.isActive()),
|
|
1246
1247
|
});
|
|
1247
1248
|
}
|
|
1248
1249
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: CarouselItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
@@ -5614,7 +5615,7 @@ class ComboboxBodyComponent {
|
|
|
5614
5615
|
provide: COMBOBOX_BODY_TOKEN,
|
|
5615
5616
|
useExisting: ComboboxBodyComponent,
|
|
5616
5617
|
},
|
|
5617
|
-
], viewQueries: [{ propertyName: "_containerElementRef", first: true, predicate: ["containerElement"], descendants: true, read: ElementRef, static: true }, { propertyName: "_animatedLifecycle", first: true, predicate: ANIMATED_LIFECYCLE_TOKEN, descendants: true, static: true }, { propertyName: "_options", predicate: ComboboxOptionComponent, descendants: true }], hostDirectives: [{ directive: i1$1.ClickOutsideDirective }, { directive: i2.ProvideThemeDirective }], ngImport: i0, template: "<div #containerElement class=\"et-combobox-body-container\" etAnimatedLifecycle>\n <ng-container *etLet=\"combobox.options$ | async as options\">\n @if (!options?.length && !combobox.error && !combobox.loading) {\n @if (combobox.customBodyEmptyTpl$ | async; as tpl) {\n <ng-container *ngTemplateOutlet=\"tpl\" />\n } @else {\n @if (combobox.bodyEmptyComponent(); as comp) {\n <ng-container *ngComponentOutlet=\"comp; inputs: combobox.bodyEmptyComponentInputs() ?? undefined\" />\n } @else {\n <p class=\"et-combobox-body--empty\">{{ combobox._tempEmptyText }}</p>\n }\n }\n }\n\n @if (combobox.error && !combobox.loading) {\n @if (combobox.customBodyErrorTpl$ | async; as tpl) {\n <ng-container *ngTemplateOutlet=\"tpl; context: { error: combobox.error }\" />\n } @else {\n @if (combobox.bodyErrorComponent(); as comp) {\n <ng-container *ngComponentOutlet=\"comp; inputs: _customErrorComponentInputs() ?? { error: combobox.error }\" />\n } @else {\n <p class=\"et-combobox-body--error\">{{ combobox.error }}</p>\n }\n }\n }\n\n @if (combobox.loading$ | async) {\n @if (combobox.customBodyLoadingTpl$ | async; as tpl) {\n <ng-container *ngTemplateOutlet=\"tpl\" />\n } @else {\n @if (combobox.bodyLoadingComponent(); as comp) {\n <ng-container *ngComponentOutlet=\"comp; inputs: combobox.bodyLoadingComponentInputs() ?? undefined\" />\n }\n }\n }\n\n @if (!combobox.error) {\n @for (option of options; track combobox._selectionModel.trackByOptionKey) {\n <et-combobox-option [option]=\"option\" />\n }\n }\n\n @if (options?.length && combobox.showBodyMoreItemsHint) {\n @if (combobox.customBodyMoreItemsHintTpl$ | async; as tpl) {\n <ng-container *ngTemplateOutlet=\"tpl\" />\n } @else {\n @if (combobox.bodyMoreItemsHintComponent(); as comp) {\n <ng-container *ngComponentOutlet=\"comp; inputs: combobox.bodyMoreItemsHintComponentInputs() ?? undefined\" />\n } @else {\n @if (combobox.bodyMoreItemsHintText) {\n <p class=\"et-combobox-body--more-items-hint\">\n {{ combobox.bodyMoreItemsHintText }}\n </p>\n }\n }\n }\n }\n </ng-container>\n</div>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "component", type: ComboboxOptionComponent, selector: "et-combobox-option", inputs: ["option"] }, { kind: "directive", type: LetDirective, selector: "[etLet]", inputs: ["etLet"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: AnimatedLifecycleDirective, selector: "[etAnimatedLifecycle]", inputs: ["skipNextEnter"], outputs: ["skipNextEnterChange"], exportAs: ["etAnimatedLifecycle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
5618
|
+
], viewQueries: [{ propertyName: "_containerElementRef", first: true, predicate: ["containerElement"], descendants: true, read: ElementRef, static: true }, { propertyName: "_animatedLifecycle", first: true, predicate: ANIMATED_LIFECYCLE_TOKEN, descendants: true, static: true }, { propertyName: "_options", predicate: ComboboxOptionComponent, descendants: true }], hostDirectives: [{ directive: i1$1.ClickOutsideDirective }, { directive: i2.ProvideThemeDirective }], ngImport: i0, template: "<div #containerElement class=\"et-combobox-body-container\" etAnimatedLifecycle>\n <ng-container *etLet=\"combobox.options$ | async as options\">\n @if (!options?.length && !combobox.error && !combobox.loading) {\n @if (combobox.customBodyEmptyTpl$ | async; as tpl) {\n <ng-container *ngTemplateOutlet=\"tpl\" />\n } @else {\n @if (combobox.bodyEmptyComponent(); as comp) {\n <ng-container *ngComponentOutlet=\"comp; inputs: combobox.bodyEmptyComponentInputs() ?? undefined\" />\n } @else {\n <p class=\"et-combobox-body--empty\">{{ combobox._tempEmptyText }}</p>\n }\n }\n }\n\n @if (combobox.error && !combobox.loading) {\n @if (combobox.customBodyErrorTpl$ | async; as tpl) {\n <ng-container *ngTemplateOutlet=\"tpl; context: { error: combobox.error }\" />\n } @else {\n @if (combobox.bodyErrorComponent(); as comp) {\n <ng-container *ngComponentOutlet=\"comp; inputs: _customErrorComponentInputs() ?? { error: combobox.error }\" />\n } @else {\n <p class=\"et-combobox-body--error\">{{ combobox.error }}</p>\n }\n }\n }\n\n @if (combobox.loading$ | async) {\n @if (combobox.customBodyLoadingTpl$ | async; as tpl) {\n <ng-container *ngTemplateOutlet=\"tpl\" />\n } @else {\n @if (combobox.bodyLoadingComponent(); as comp) {\n <ng-container *ngComponentOutlet=\"comp; inputs: combobox.bodyLoadingComponentInputs() ?? undefined\" />\n }\n }\n }\n\n @if (!combobox.error) {\n @for (option of options; track combobox._selectionModel.trackByOptionKey) {\n <et-combobox-option [option]=\"option\" />\n }\n }\n\n @if (options?.length && combobox.showBodyMoreItemsHint) {\n @if (combobox.customBodyMoreItemsHintTpl$ | async; as tpl) {\n <ng-container *ngTemplateOutlet=\"tpl\" />\n } @else {\n @if (combobox.bodyMoreItemsHintComponent(); as comp) {\n <ng-container *ngComponentOutlet=\"comp; inputs: combobox.bodyMoreItemsHintComponentInputs() ?? undefined\" />\n } @else {\n @if (combobox.bodyMoreItemsHintText) {\n <p class=\"et-combobox-body--more-items-hint\">\n {{ combobox.bodyMoreItemsHintText }}\n </p>\n }\n }\n }\n }\n </ng-container>\n</div>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "component", type: ComboboxOptionComponent, selector: "et-combobox-option", inputs: ["option"] }, { kind: "directive", type: LetDirective, selector: "[etLet]", inputs: ["etLet"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: AnimatedLifecycleDirective, selector: "[etAnimatedLifecycle]", inputs: ["skipNextEnter"], outputs: ["stateChange", "skipNextEnterChange"], exportAs: ["etAnimatedLifecycle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
5618
5619
|
}
|
|
5619
5620
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ComboboxBodyComponent, decorators: [{
|
|
5620
5621
|
type: Component,
|
|
@@ -6318,7 +6319,7 @@ class SelectBodyComponent {
|
|
|
6318
6319
|
<div #containerElement class="et-select-body-container" etAnimatedLifecycle>
|
|
6319
6320
|
<ng-container [ngTemplateOutlet]="_bodyTemplate" />
|
|
6320
6321
|
</div>
|
|
6321
|
-
`, isInline: true, styles: [".et-select-body.et-with-default-animation .et-select-body-container.et-animation-enter-from,.et-select-body.et-with-default-animation .et-select-body-container.et-animation-leave-to{opacity:0;transform:scaleY(0)}.et-select-body.et-with-default-animation .et-select-body-container.et-animation-enter-active{transition:transform 125ms var(--ease-out-5),opacity 125ms var(--ease-out-5)}.et-select-body.et-with-default-animation .et-select-body-container.et-animation-leave-active{transition:transform 50ms var(--ease-in-5),opacity 50ms var(--ease-in-5)}.et-select-body.et-with-default-animation[et-floating-placement^=top] .et-select-body-container{transform-origin:bottom}.et-select-body.et-with-default-animation[et-floating-placement^=bottom] .et-select-body-container{transform-origin:top}.et-select-body{transform:var(--et-floating-translate);will-change:transform}.et-select-body-container{display:block;background-color:#3d3d3d;color:#fff;max-height:min(200px,var(--et-floating-max-height, 200px));overflow:auto}@supports (overflow: overlay){.et-select-body-container{overflow:overlay}}.et-select-body{width:100%;display:grid}\n"], dependencies: [{ kind: "directive", type: AnimatedLifecycleDirective, selector: "[etAnimatedLifecycle]", inputs: ["skipNextEnter"], outputs: ["skipNextEnterChange"], exportAs: ["etAnimatedLifecycle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
6322
|
+
`, isInline: true, styles: [".et-select-body.et-with-default-animation .et-select-body-container.et-animation-enter-from,.et-select-body.et-with-default-animation .et-select-body-container.et-animation-leave-to{opacity:0;transform:scaleY(0)}.et-select-body.et-with-default-animation .et-select-body-container.et-animation-enter-active{transition:transform 125ms var(--ease-out-5),opacity 125ms var(--ease-out-5)}.et-select-body.et-with-default-animation .et-select-body-container.et-animation-leave-active{transition:transform 50ms var(--ease-in-5),opacity 50ms var(--ease-in-5)}.et-select-body.et-with-default-animation[et-floating-placement^=top] .et-select-body-container{transform-origin:bottom}.et-select-body.et-with-default-animation[et-floating-placement^=bottom] .et-select-body-container{transform-origin:top}.et-select-body{transform:var(--et-floating-translate);will-change:transform}.et-select-body-container{display:block;background-color:#3d3d3d;color:#fff;max-height:min(200px,var(--et-floating-max-height, 200px));overflow:auto}@supports (overflow: overlay){.et-select-body-container{overflow:overlay}}.et-select-body{width:100%;display:grid}\n"], dependencies: [{ kind: "directive", type: AnimatedLifecycleDirective, selector: "[etAnimatedLifecycle]", inputs: ["skipNextEnter"], outputs: ["stateChange", "skipNextEnterChange"], exportAs: ["etAnimatedLifecycle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
6322
6323
|
}
|
|
6323
6324
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: SelectBodyComponent, decorators: [{
|
|
6324
6325
|
type: Component,
|
|
@@ -9314,7 +9315,7 @@ class MenuContainerComponent {
|
|
|
9314
9315
|
provide: MENU_CONTAINER,
|
|
9315
9316
|
useExisting: MenuContainerComponent,
|
|
9316
9317
|
},
|
|
9317
|
-
], viewQueries: [{ propertyName: "_animatedLifecycle", first: true, predicate: ANIMATED_LIFECYCLE_TOKEN, descendants: true, static: true }], hostDirectives: [{ directive: i2.ProvideThemeDirective }], ngImport: i0, template: "<div class=\"et-menu-body\" etAnimatedLifecycle>\n <ng-container *ngTemplateOutlet=\"_menuTemplate; injector: injector\" />\n</div>\n", styles: [".et-menu-container{display:block;transform:var(--et-floating-translate);will-change:transform}.et-menu-container .et-menu-body.et-animation-enter-from,.et-menu-container .et-menu-body.et-animation-leave-to{opacity:0;transform:scale(0)}.et-menu-container .et-menu-body.et-animation-enter-active{transition:transform .25s var(--ease-out-5),opacity .25s var(--ease-out-5)}@supports (transition-timing-function: linear(0,1)){.et-menu-container .et-menu-body.et-animation-enter-active{transition:transform .25s var(--ease-spring-1),opacity .25s var(--ease-spring-1)}}.et-menu-container .et-menu-body.et-animation-leave-active{transition:transform .1s var(--ease-in-5),opacity .1s var(--ease-in-5)}.et-menu-container[et-floating-placement=bottom] .et-menu-body.et-animation-enter-to,.et-menu-container[et-floating-placement=bottom] .et-menu-body.et-animation-leave-to{transform-origin:top center}.et-menu-container[et-floating-placement=bottom-start] .et-menu-body.et-animation-enter-to,.et-menu-container[et-floating-placement=bottom-start] .et-menu-body.et-animation-leave-to{transform-origin:top left}.et-menu-container[et-floating-placement=bottom-end] .et-menu-body.et-animation-enter-to,.et-menu-container[et-floating-placement=bottom-end] .et-menu-body.et-animation-leave-to{transform-origin:top right}.et-menu-container[et-floating-placement=top] .et-menu-body.et-animation-enter-to,.et-menu-container[et-floating-placement=top] .et-menu-body.et-animation-leave-to{transform-origin:bottom center}.et-menu-container[et-floating-placement=top-start] .et-menu-body.et-animation-enter-to,.et-menu-container[et-floating-placement=top-start] .et-menu-body.et-animation-leave-to{transform-origin:bottom left}.et-menu-container[et-floating-placement=top-end] .et-menu-body.et-animation-enter-to,.et-menu-container[et-floating-placement=top-end] .et-menu-body.et-animation-leave-to{transform-origin:bottom right}\n"], dependencies: [{ kind: "directive", type: AnimatedLifecycleDirective, selector: "[etAnimatedLifecycle]", inputs: ["skipNextEnter"], outputs: ["skipNextEnterChange"], exportAs: ["etAnimatedLifecycle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
9318
|
+
], viewQueries: [{ propertyName: "_animatedLifecycle", first: true, predicate: ANIMATED_LIFECYCLE_TOKEN, descendants: true, static: true }], hostDirectives: [{ directive: i2.ProvideThemeDirective }], ngImport: i0, template: "<div class=\"et-menu-body\" etAnimatedLifecycle>\n <ng-container *ngTemplateOutlet=\"_menuTemplate; injector: injector\" />\n</div>\n", styles: [".et-menu-container{display:block;transform:var(--et-floating-translate);will-change:transform}.et-menu-container .et-menu-body.et-animation-enter-from,.et-menu-container .et-menu-body.et-animation-leave-to{opacity:0;transform:scale(0)}.et-menu-container .et-menu-body.et-animation-enter-active{transition:transform .25s var(--ease-out-5),opacity .25s var(--ease-out-5)}@supports (transition-timing-function: linear(0,1)){.et-menu-container .et-menu-body.et-animation-enter-active{transition:transform .25s var(--ease-spring-1),opacity .25s var(--ease-spring-1)}}.et-menu-container .et-menu-body.et-animation-leave-active{transition:transform .1s var(--ease-in-5),opacity .1s var(--ease-in-5)}.et-menu-container[et-floating-placement=bottom] .et-menu-body.et-animation-enter-to,.et-menu-container[et-floating-placement=bottom] .et-menu-body.et-animation-leave-to{transform-origin:top center}.et-menu-container[et-floating-placement=bottom-start] .et-menu-body.et-animation-enter-to,.et-menu-container[et-floating-placement=bottom-start] .et-menu-body.et-animation-leave-to{transform-origin:top left}.et-menu-container[et-floating-placement=bottom-end] .et-menu-body.et-animation-enter-to,.et-menu-container[et-floating-placement=bottom-end] .et-menu-body.et-animation-leave-to{transform-origin:top right}.et-menu-container[et-floating-placement=top] .et-menu-body.et-animation-enter-to,.et-menu-container[et-floating-placement=top] .et-menu-body.et-animation-leave-to{transform-origin:bottom center}.et-menu-container[et-floating-placement=top-start] .et-menu-body.et-animation-enter-to,.et-menu-container[et-floating-placement=top-start] .et-menu-body.et-animation-leave-to{transform-origin:bottom left}.et-menu-container[et-floating-placement=top-end] .et-menu-body.et-animation-enter-to,.et-menu-container[et-floating-placement=top-end] .et-menu-body.et-animation-leave-to{transform-origin:bottom right}\n"], dependencies: [{ kind: "directive", type: AnimatedLifecycleDirective, selector: "[etAnimatedLifecycle]", inputs: ["skipNextEnter"], outputs: ["stateChange", "skipNextEnterChange"], exportAs: ["etAnimatedLifecycle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
9318
9319
|
}
|
|
9319
9320
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: MenuContainerComponent, decorators: [{
|
|
9320
9321
|
type: Component,
|
|
@@ -13072,7 +13073,7 @@ class OverlayRouteHeaderTemplateOutletComponent {
|
|
|
13072
13073
|
</ng-container>
|
|
13073
13074
|
</div>
|
|
13074
13075
|
</div>
|
|
13075
|
-
`, isInline: true, styles: [".et-overlay-route-header-template-outlet-host{--_et-overlay-router-transition-easing: var(--ease-in-out-5)}.et-overlay-route-header-template-outlet{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);overflow-x:hidden}.et-overlay-route-header-template-outlet-item{grid-area:1 / 1 / 2 / 2;pointer-events:none}.et-overlay-route-header-template-outlet-item>*{pointer-events:auto}.et-overlay-route-header-template-outlet-item.et-animation-enter-from,.et-overlay-route-header-template-outlet-item.et-animation-leave-to{opacity:0}.et-overlay-route-header-template-outlet-item:is(.et-animation-enter-active,.et-animation-leave-active){transition:transform .3s var(--_et-overlay-router-transition-easing),opacity .3s var(--_et-overlay-router-transition-easing)}\n"], dependencies: [{ kind: "directive", type: AnimatedIfDirective, selector: "[etAnimatedIf]", inputs: ["etAnimatedIf"] }, { kind: "directive", type: AnimatedLifecycleDirective, selector: "[etAnimatedLifecycle]", inputs: ["skipNextEnter"], outputs: ["skipNextEnterChange"], exportAs: ["etAnimatedLifecycle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
13076
|
+
`, isInline: true, styles: [".et-overlay-route-header-template-outlet-host{--_et-overlay-router-transition-easing: var(--ease-in-out-5)}.et-overlay-route-header-template-outlet{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);overflow-x:hidden}.et-overlay-route-header-template-outlet-item{grid-area:1 / 1 / 2 / 2;pointer-events:none}.et-overlay-route-header-template-outlet-item>*{pointer-events:auto}.et-overlay-route-header-template-outlet-item.et-animation-enter-from,.et-overlay-route-header-template-outlet-item.et-animation-leave-to{opacity:0}.et-overlay-route-header-template-outlet-item:is(.et-animation-enter-active,.et-animation-leave-active){transition:transform .3s var(--_et-overlay-router-transition-easing),opacity .3s var(--_et-overlay-router-transition-easing)}\n"], dependencies: [{ kind: "directive", type: AnimatedIfDirective, selector: "[etAnimatedIf]", inputs: ["etAnimatedIf"] }, { kind: "directive", type: AnimatedLifecycleDirective, selector: "[etAnimatedLifecycle]", inputs: ["skipNextEnter"], outputs: ["stateChange", "skipNextEnterChange"], exportAs: ["etAnimatedLifecycle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
13076
13077
|
}
|
|
13077
13078
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: OverlayRouteHeaderTemplateOutletComponent, decorators: [{
|
|
13078
13079
|
type: Component,
|
|
@@ -13129,6 +13130,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
|
|
|
13129
13130
|
}]
|
|
13130
13131
|
}], ctorParameters: () => [] });
|
|
13131
13132
|
|
|
13133
|
+
const OVERLAY_ROUTER_OUTLET_DISABLED_TEMPLATE_TOKEN = new InjectionToken('OVERLAY_ROUTER_OUTLET_DISABLED_TEMPLATE_TOKEN');
|
|
13134
|
+
class OverlayRouterOutletDisabledTemplateDirective {
|
|
13135
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: OverlayRouterOutletDisabledTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
13136
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.4", type: OverlayRouterOutletDisabledTemplateDirective, isStandalone: true, selector: "ng-template[etOverlayRouterOutletDisabledTemplate]", providers: [
|
|
13137
|
+
{
|
|
13138
|
+
provide: OVERLAY_ROUTER_OUTLET_DISABLED_TEMPLATE_TOKEN,
|
|
13139
|
+
useExisting: OverlayRouterOutletDisabledTemplateDirective,
|
|
13140
|
+
},
|
|
13141
|
+
], ngImport: i0 }); }
|
|
13142
|
+
}
|
|
13143
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: OverlayRouterOutletDisabledTemplateDirective, decorators: [{
|
|
13144
|
+
type: Directive,
|
|
13145
|
+
args: [{
|
|
13146
|
+
selector: 'ng-template[etOverlayRouterOutletDisabledTemplate]',
|
|
13147
|
+
standalone: true,
|
|
13148
|
+
providers: [
|
|
13149
|
+
{
|
|
13150
|
+
provide: OVERLAY_ROUTER_OUTLET_DISABLED_TEMPLATE_TOKEN,
|
|
13151
|
+
useExisting: OverlayRouterOutletDisabledTemplateDirective,
|
|
13152
|
+
},
|
|
13153
|
+
],
|
|
13154
|
+
}]
|
|
13155
|
+
}] });
|
|
13156
|
+
|
|
13132
13157
|
const OVERLAY_SHARED_ROUTE_TEMPLATE_TOKEN = new InjectionToken('OVERLAY_SHARED_ROUTE_TEMPLATE_TOKEN');
|
|
13133
13158
|
class OverlaySharedRouteTemplateDirective {
|
|
13134
13159
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: OverlaySharedRouteTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
@@ -13158,7 +13183,13 @@ class OverlayRouterOutletComponent {
|
|
|
13158
13183
|
constructor() {
|
|
13159
13184
|
this.router = inject(OverlayRouterService);
|
|
13160
13185
|
this.sharedRouteTemplate = contentChild(OVERLAY_SHARED_ROUTE_TEMPLATE_TOKEN, { read: TemplateRef });
|
|
13186
|
+
this.outletDisabledTemplate = contentChild(OVERLAY_ROUTER_OUTLET_DISABLED_TEMPLATE_TOKEN, { read: TemplateRef });
|
|
13161
13187
|
this.pageWrappers = viewChildren('pageWrapper');
|
|
13188
|
+
this.disabled = input(false, { transform: booleanAttribute });
|
|
13189
|
+
this.wasDisabled = signal(false);
|
|
13190
|
+
// We need to keep track of the disabled state until the exit animation is finished.
|
|
13191
|
+
// Otherwise, a wrong animation will be played when the disabled state is toggled off.
|
|
13192
|
+
this.keepDisabledTransition = computed(() => this.wasDisabled() || this.disabled());
|
|
13162
13193
|
this.activePageElement = computed(() => {
|
|
13163
13194
|
const wrappers = this.pageWrappers();
|
|
13164
13195
|
const currentPage = this.router.currentPage();
|
|
@@ -13168,11 +13199,15 @@ class OverlayRouterOutletComponent {
|
|
|
13168
13199
|
this.hostClassBindings = signalHostClasses({
|
|
13169
13200
|
'et-overlay-router-outlet-nav-dir--backward': computed(() => this.router.navigationDirection() === 'backward'),
|
|
13170
13201
|
'et-overlay-router-outlet-nav-dir--forward': computed(() => this.router.navigationDirection() === 'forward'),
|
|
13171
|
-
'et-overlay-router-outlet-transition--slide': computed(() => this.router.transitionType() === 'slide'),
|
|
13172
|
-
'et-overlay-router-outlet-transition--fade': computed(() => this.router.transitionType() === 'fade'
|
|
13173
|
-
|
|
13174
|
-
'et-overlay-router-outlet-transition--
|
|
13202
|
+
'et-overlay-router-outlet-transition--slide': computed(() => this.router.transitionType() === 'slide' && !this.keepDisabledTransition()),
|
|
13203
|
+
'et-overlay-router-outlet-transition--fade': computed(() => this.router.transitionType() === 'fade' ||
|
|
13204
|
+
(this.keepDisabledTransition() && this.router.transitionType() !== 'none')),
|
|
13205
|
+
'et-overlay-router-outlet-transition--overlay': computed(() => this.router.transitionType() === 'overlay' && !this.keepDisabledTransition()),
|
|
13206
|
+
'et-overlay-router-outlet-transition--vertical': computed(() => this.router.transitionType() === 'vertical' && !this.keepDisabledTransition()),
|
|
13175
13207
|
'et-overlay-router-outlet-transition--none': computed(() => this.router.transitionType() === 'none'),
|
|
13208
|
+
'et-overlay-router-outlet--disabled': this.disabled,
|
|
13209
|
+
'et-overlay-router-outlet--has-disabled-template': this.outletDisabledTemplate,
|
|
13210
|
+
'et-overlay-router-outlet--has-shared-route-template': this.sharedRouteTemplate,
|
|
13176
13211
|
});
|
|
13177
13212
|
}
|
|
13178
13213
|
scrollActivePageTo(options) {
|
|
@@ -13181,13 +13216,21 @@ class OverlayRouterOutletComponent {
|
|
|
13181
13216
|
activePage.scroll(options);
|
|
13182
13217
|
}
|
|
13183
13218
|
}
|
|
13219
|
+
disabledPageAnimationStateChange(state) {
|
|
13220
|
+
if (state === 'entered') {
|
|
13221
|
+
this.wasDisabled.set(true);
|
|
13222
|
+
}
|
|
13223
|
+
else if (state === 'left') {
|
|
13224
|
+
this.wasDisabled.set(false);
|
|
13225
|
+
}
|
|
13226
|
+
}
|
|
13184
13227
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: OverlayRouterOutletComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
13185
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", type: OverlayRouterOutletComponent, isStandalone: true, selector: "et-overlay-router-outlet", host: { classAttribute: "et-overlay-router-outlet-host" }, providers: [
|
|
13228
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", type: OverlayRouterOutletComponent, isStandalone: true, selector: "et-overlay-router-outlet", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "et-overlay-router-outlet-host" }, providers: [
|
|
13186
13229
|
{
|
|
13187
13230
|
provide: OVERLAY_ROUTER_OUTLET_TOKEN,
|
|
13188
13231
|
useExisting: OverlayRouterOutletComponent,
|
|
13189
13232
|
},
|
|
13190
|
-
], queries: [{ propertyName: "sharedRouteTemplate", first: true, predicate: OVERLAY_SHARED_ROUTE_TEMPLATE_TOKEN, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "pageWrappers", predicate: ["pageWrapper"], descendants: true, isSignal: true }], ngImport: i0, template: `
|
|
13233
|
+
], queries: [{ propertyName: "sharedRouteTemplate", first: true, predicate: OVERLAY_SHARED_ROUTE_TEMPLATE_TOKEN, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "outletDisabledTemplate", first: true, predicate: OVERLAY_ROUTER_OUTLET_DISABLED_TEMPLATE_TOKEN, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "pageWrappers", predicate: ["pageWrapper"], descendants: true, isSignal: true }], ngImport: i0, template: `
|
|
13191
13234
|
<ng-template>
|
|
13192
13235
|
<ng-content />
|
|
13193
13236
|
</ng-template>
|
|
@@ -13200,13 +13243,25 @@ class OverlayRouterOutletComponent {
|
|
|
13200
13243
|
class="et-overlay-router-outlet-page"
|
|
13201
13244
|
etAnimatedLifecycle
|
|
13202
13245
|
>
|
|
13203
|
-
<ng-container *etAnimatedIf="page === router.currentPage()">
|
|
13246
|
+
<ng-container *etAnimatedIf="page === router.currentPage() && !disabled()">
|
|
13204
13247
|
<ng-container *ngComponentOutlet="page.component; inputs: page.inputs" />
|
|
13205
13248
|
</ng-container>
|
|
13206
13249
|
</div>
|
|
13207
13250
|
}
|
|
13251
|
+
|
|
13252
|
+
@if (outletDisabledTemplate()) {
|
|
13253
|
+
<div
|
|
13254
|
+
(stateChange)="disabledPageAnimationStateChange($event)"
|
|
13255
|
+
class="et-overlay-router-outlet-page et-overlay-router-outlet-page--active"
|
|
13256
|
+
etAnimatedLifecycle
|
|
13257
|
+
>
|
|
13258
|
+
<div *etAnimatedIf="disabled()" class="et-overlay-router-outlet-disabled-page">
|
|
13259
|
+
<ng-container *ngTemplateOutlet="outletDisabledTemplate()!" />
|
|
13260
|
+
</div>
|
|
13261
|
+
</div>
|
|
13262
|
+
}
|
|
13208
13263
|
</div>
|
|
13209
|
-
`, isInline: true, styles: [".et-overlay-router-outlet-host{--_et-overlay-router-transition-easing: var(--ease-in-out-4)}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--none .et-overlay-router-outlet-page
|
|
13264
|
+
`, isInline: true, styles: [".et-overlay-router-outlet-host{--_et-overlay-router-transition-easing: var(--ease-in-out-4)}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--none .et-overlay-router-outlet-page.et-animation-enter-from,.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--none .et-overlay-router-outlet-page.et-animation-leave-to{opacity:0}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--none .et-overlay-router-outlet-page.et-animation-enter-active,.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--none .et-overlay-router-outlet-page.et-animation-leave-active{transition:opacity 0ms linear}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--fade .et-overlay-router-outlet-page.et-animation-enter-from,.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--fade .et-overlay-router-outlet-page.et-animation-leave-to{opacity:0}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--fade .et-overlay-router-outlet-page.et-animation-enter-active,.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--fade .et-overlay-router-outlet-page.et-animation-leave-active{transition:opacity .1s linear}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--slide{--_et-overlay-router-transform-from: translateX(100%);--_et-overlay-router-transform-to: translateX(-100%)}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--slide.et-overlay-router-outlet-nav-dir--backward{--_et-overlay-router-transform-from: translateX(-100%);--_et-overlay-router-transform-to: translateX(100%)}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--slide .et-overlay-router-outlet-page.et-animation-enter-from{transform:var(--_et-overlay-router-transform-from);opacity:0}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--slide .et-overlay-router-outlet-page.et-animation-leave-to{transform:var(--_et-overlay-router-transform-to);opacity:0}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--slide .et-overlay-router-outlet-page.et-animation-enter-active,.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--slide .et-overlay-router-outlet-page.et-animation-leave-active{transition:transform .3s var(--_et-overlay-router-transition-easing),opacity .3s var(--_et-overlay-router-transition-easing)}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--overlay{--_et-overlay-router-transform-from: translateX(100%);--_et-overlay-router-transform-to: translateX(-20%);--_et-overlay-router-out-page-brightness: .8}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--overlay.et-overlay-router-outlet-nav-dir--backward{--_et-overlay-router-transform-from: translateX(-20%);--_et-overlay-router-transform-to: translateX(100%)}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--overlay.et-overlay-router-outlet-nav-dir--backward .et-overlay-router-outlet-page.et-animation-enter-from{filter:brightness(var(--_et-overlay-router-out-page-brightness))}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--overlay.et-overlay-router-outlet-nav-dir--backward .et-overlay-router-outlet-page.et-animation-leave-to{filter:brightness(1)}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--overlay.et-overlay-router-outlet-nav-dir--backward .et-overlay-router-outlet-page.et-animation-enter-active{z-index:0}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--overlay.et-overlay-router-outlet-nav-dir--backward .et-overlay-router-outlet-page.et-animation-leave-active{z-index:1}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--overlay .et-overlay-router-outlet-page.et-animation-enter-from{transform:var(--_et-overlay-router-transform-from)}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--overlay .et-overlay-router-outlet-page.et-animation-leave-to{filter:brightness(var(--_et-overlay-router-out-page-brightness));transform:var(--_et-overlay-router-transform-to)}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--overlay .et-overlay-router-outlet-page.et-animation-enter-active{z-index:1}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--overlay .et-overlay-router-outlet-page.et-animation-enter-active,.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--overlay .et-overlay-router-outlet-page.et-animation-leave-active{transition:transform 225ms var(--_et-overlay-router-transition-easing),filter 225ms var(--_et-overlay-router-transition-easing)}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--vertical{--_et-overlay-router-transform-from: translateY(20%);--_et-overlay-router-transform-to: translateY(-20%);--_et-overlay-router-out-page-brightness: .8}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--vertical.et-overlay-router-outlet-nav-dir--backward{--_et-overlay-router-transform-from: translateY(-20%);--_et-overlay-router-transform-to: translateY(20%)}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--vertical.et-overlay-router-outlet-nav-dir--backward .et-overlay-router-outlet-page.et-animation-enter-from{filter:brightness(var(--_et-overlay-router-out-page-brightness))}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--vertical.et-overlay-router-outlet-nav-dir--backward .et-overlay-router-outlet-page.et-animation-leave-to{filter:brightness(1)}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--vertical.et-overlay-router-outlet-nav-dir--backward .et-overlay-router-outlet-page.et-animation-enter-active{z-index:0}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--vertical.et-overlay-router-outlet-nav-dir--backward .et-overlay-router-outlet-page.et-animation-leave-active{z-index:1}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--vertical .et-overlay-router-outlet-page.et-animation-enter-from{transform:var(--_et-overlay-router-transform-from);opacity:0}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--vertical .et-overlay-router-outlet-page.et-animation-leave-to{filter:brightness(var(--_et-overlay-router-out-page-brightness));transform:var(--_et-overlay-router-transform-to);opacity:0}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--vertical .et-overlay-router-outlet-page.et-animation-enter-active{z-index:1}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--vertical .et-overlay-router-outlet-page.et-animation-enter-active,.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--vertical .et-overlay-router-outlet-page.et-animation-leave-active{transition:transform 225ms var(--_et-overlay-router-transition-easing),filter 225ms var(--_et-overlay-router-transition-easing),opacity 225ms var(--_et-overlay-router-transition-easing)}.et-overlay-router-outlet{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);overflow:hidden}.et-overlay-router-outlet-page{grid-area:1/1/2/2;pointer-events:none}.et-overlay-router-outlet-page>*{pointer-events:auto}\n"], dependencies: [{ kind: "directive", type: AnimatedIfDirective, selector: "[etAnimatedIf]", inputs: ["etAnimatedIf"] }, { kind: "directive", type: AnimatedLifecycleDirective, selector: "[etAnimatedLifecycle]", inputs: ["skipNextEnter"], outputs: ["stateChange", "skipNextEnterChange"], exportAs: ["etAnimatedLifecycle"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
13210
13265
|
}
|
|
13211
13266
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: OverlayRouterOutletComponent, decorators: [{
|
|
13212
13267
|
type: Component,
|
|
@@ -13223,20 +13278,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
|
|
|
13223
13278
|
class="et-overlay-router-outlet-page"
|
|
13224
13279
|
etAnimatedLifecycle
|
|
13225
13280
|
>
|
|
13226
|
-
<ng-container *etAnimatedIf="page === router.currentPage()">
|
|
13281
|
+
<ng-container *etAnimatedIf="page === router.currentPage() && !disabled()">
|
|
13227
13282
|
<ng-container *ngComponentOutlet="page.component; inputs: page.inputs" />
|
|
13228
13283
|
</ng-container>
|
|
13229
13284
|
</div>
|
|
13230
13285
|
}
|
|
13286
|
+
|
|
13287
|
+
@if (outletDisabledTemplate()) {
|
|
13288
|
+
<div
|
|
13289
|
+
(stateChange)="disabledPageAnimationStateChange($event)"
|
|
13290
|
+
class="et-overlay-router-outlet-page et-overlay-router-outlet-page--active"
|
|
13291
|
+
etAnimatedLifecycle
|
|
13292
|
+
>
|
|
13293
|
+
<div *etAnimatedIf="disabled()" class="et-overlay-router-outlet-disabled-page">
|
|
13294
|
+
<ng-container *ngTemplateOutlet="outletDisabledTemplate()!" />
|
|
13295
|
+
</div>
|
|
13296
|
+
</div>
|
|
13297
|
+
}
|
|
13231
13298
|
</div>
|
|
13232
13299
|
`, standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
13233
13300
|
class: 'et-overlay-router-outlet-host',
|
|
13234
|
-
}, imports: [AnimatedIfDirective, AnimatedLifecycleDirective, NgComponentOutlet], providers: [
|
|
13301
|
+
}, imports: [AnimatedIfDirective, AnimatedLifecycleDirective, NgComponentOutlet, NgTemplateOutlet], providers: [
|
|
13235
13302
|
{
|
|
13236
13303
|
provide: OVERLAY_ROUTER_OUTLET_TOKEN,
|
|
13237
13304
|
useExisting: OverlayRouterOutletComponent,
|
|
13238
13305
|
},
|
|
13239
|
-
], styles: [".et-overlay-router-outlet-host{--_et-overlay-router-transition-easing: var(--ease-in-out-4)}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--none .et-overlay-router-outlet-page
|
|
13306
|
+
], styles: [".et-overlay-router-outlet-host{--_et-overlay-router-transition-easing: var(--ease-in-out-4)}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--none .et-overlay-router-outlet-page.et-animation-enter-from,.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--none .et-overlay-router-outlet-page.et-animation-leave-to{opacity:0}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--none .et-overlay-router-outlet-page.et-animation-enter-active,.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--none .et-overlay-router-outlet-page.et-animation-leave-active{transition:opacity 0ms linear}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--fade .et-overlay-router-outlet-page.et-animation-enter-from,.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--fade .et-overlay-router-outlet-page.et-animation-leave-to{opacity:0}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--fade .et-overlay-router-outlet-page.et-animation-enter-active,.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--fade .et-overlay-router-outlet-page.et-animation-leave-active{transition:opacity .1s linear}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--slide{--_et-overlay-router-transform-from: translateX(100%);--_et-overlay-router-transform-to: translateX(-100%)}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--slide.et-overlay-router-outlet-nav-dir--backward{--_et-overlay-router-transform-from: translateX(-100%);--_et-overlay-router-transform-to: translateX(100%)}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--slide .et-overlay-router-outlet-page.et-animation-enter-from{transform:var(--_et-overlay-router-transform-from);opacity:0}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--slide .et-overlay-router-outlet-page.et-animation-leave-to{transform:var(--_et-overlay-router-transform-to);opacity:0}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--slide .et-overlay-router-outlet-page.et-animation-enter-active,.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--slide .et-overlay-router-outlet-page.et-animation-leave-active{transition:transform .3s var(--_et-overlay-router-transition-easing),opacity .3s var(--_et-overlay-router-transition-easing)}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--overlay{--_et-overlay-router-transform-from: translateX(100%);--_et-overlay-router-transform-to: translateX(-20%);--_et-overlay-router-out-page-brightness: .8}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--overlay.et-overlay-router-outlet-nav-dir--backward{--_et-overlay-router-transform-from: translateX(-20%);--_et-overlay-router-transform-to: translateX(100%)}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--overlay.et-overlay-router-outlet-nav-dir--backward .et-overlay-router-outlet-page.et-animation-enter-from{filter:brightness(var(--_et-overlay-router-out-page-brightness))}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--overlay.et-overlay-router-outlet-nav-dir--backward .et-overlay-router-outlet-page.et-animation-leave-to{filter:brightness(1)}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--overlay.et-overlay-router-outlet-nav-dir--backward .et-overlay-router-outlet-page.et-animation-enter-active{z-index:0}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--overlay.et-overlay-router-outlet-nav-dir--backward .et-overlay-router-outlet-page.et-animation-leave-active{z-index:1}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--overlay .et-overlay-router-outlet-page.et-animation-enter-from{transform:var(--_et-overlay-router-transform-from)}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--overlay .et-overlay-router-outlet-page.et-animation-leave-to{filter:brightness(var(--_et-overlay-router-out-page-brightness));transform:var(--_et-overlay-router-transform-to)}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--overlay .et-overlay-router-outlet-page.et-animation-enter-active{z-index:1}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--overlay .et-overlay-router-outlet-page.et-animation-enter-active,.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--overlay .et-overlay-router-outlet-page.et-animation-leave-active{transition:transform 225ms var(--_et-overlay-router-transition-easing),filter 225ms var(--_et-overlay-router-transition-easing)}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--vertical{--_et-overlay-router-transform-from: translateY(20%);--_et-overlay-router-transform-to: translateY(-20%);--_et-overlay-router-out-page-brightness: .8}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--vertical.et-overlay-router-outlet-nav-dir--backward{--_et-overlay-router-transform-from: translateY(-20%);--_et-overlay-router-transform-to: translateY(20%)}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--vertical.et-overlay-router-outlet-nav-dir--backward .et-overlay-router-outlet-page.et-animation-enter-from{filter:brightness(var(--_et-overlay-router-out-page-brightness))}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--vertical.et-overlay-router-outlet-nav-dir--backward .et-overlay-router-outlet-page.et-animation-leave-to{filter:brightness(1)}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--vertical.et-overlay-router-outlet-nav-dir--backward .et-overlay-router-outlet-page.et-animation-enter-active{z-index:0}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--vertical.et-overlay-router-outlet-nav-dir--backward .et-overlay-router-outlet-page.et-animation-leave-active{z-index:1}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--vertical .et-overlay-router-outlet-page.et-animation-enter-from{transform:var(--_et-overlay-router-transform-from);opacity:0}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--vertical .et-overlay-router-outlet-page.et-animation-leave-to{filter:brightness(var(--_et-overlay-router-out-page-brightness));transform:var(--_et-overlay-router-transform-to);opacity:0}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--vertical .et-overlay-router-outlet-page.et-animation-enter-active{z-index:1}.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--vertical .et-overlay-router-outlet-page.et-animation-enter-active,.et-overlay-router-outlet-host.et-overlay-router-outlet-transition--vertical .et-overlay-router-outlet-page.et-animation-leave-active{transition:transform 225ms var(--_et-overlay-router-transition-easing),filter 225ms var(--_et-overlay-router-transition-easing),opacity 225ms var(--_et-overlay-router-transition-easing)}.et-overlay-router-outlet{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);overflow:hidden}.et-overlay-router-outlet-page{grid-area:1/1/2/2;pointer-events:none}.et-overlay-router-outlet-page>*{pointer-events:auto}\n"] }]
|
|
13240
13307
|
}] });
|
|
13241
13308
|
|
|
13242
13309
|
class OverlaySharedRouteTemplateOutletComponent {
|
|
@@ -13361,6 +13428,7 @@ const OverlayWithRoutingImports = [
|
|
|
13361
13428
|
OverlayBackOrCloseDirective,
|
|
13362
13429
|
OverlaySharedRouteTemplateOutletComponent,
|
|
13363
13430
|
OverlaySharedRouteTemplateDirective,
|
|
13431
|
+
OverlayRouterOutletDisabledTemplateDirective,
|
|
13364
13432
|
];
|
|
13365
13433
|
const OverlayWithSidebarImports = [...OverlayWithRoutingImports, OverlaySidebarComponent];
|
|
13366
13434
|
const provideOverlay = () => {
|
|
@@ -13547,7 +13615,7 @@ class ToggletipComponent {
|
|
|
13547
13615
|
provide: TOGGLETIP,
|
|
13548
13616
|
useExisting: ToggletipComponent,
|
|
13549
13617
|
},
|
|
13550
|
-
], viewQueries: [{ propertyName: "_animatedLifecycle", first: true, predicate: ANIMATED_LIFECYCLE_TOKEN, descendants: true, static: true }], hostDirectives: [{ directive: i2.ProvideThemeDirective }], ngImport: i0, template: "<div class=\"et-toggletip-container\" etAnimatedLifecycle>\n @if (toggletipText) {\n {{ toggletipText }}\n }\n\n @if (toggletipTemplate) {\n <ng-container *ngTemplateOutlet=\"toggletipTemplate; injector: injector\" />\n }\n\n <div class=\"toggletip-arrow\" et-floating-arrow></div>\n</div>\n", styles: [":where(.et-toggletip){--background-color: hsl(0 0% 20%);--foreground-color: CanvasText;--border-radius: 4px;--padding-inline: 1.5ch;--padding-block: .75ch;--inline-max-size: 25ch;--arrow-size: 10px;--arrow-radius: 2px}.et-toggletip{transform:var(--et-floating-translate);will-change:transform}.et-toggletip[et-floating-placement^=top] .toggletip-arrow{bottom:-4px;left:0}.et-toggletip[et-floating-placement^=right] .toggletip-arrow{left:-4px;top:0}.et-toggletip[et-floating-placement^=bottom] .toggletip-arrow{top:-4px;left:0}.et-toggletip[et-floating-placement^=left] .toggletip-arrow{right:-4px;top:0}.et-toggletip-container{z-index:1;inline-size:max-content;max-inline-size:var(--inline-max-size);padding:var(--padding-block) var(--padding-inline);border-radius:var(--border-radius);background:var(--background-color);color:var(--foreground-color);will-change:transform}.et-toggletip-container:before{content:\"; Has toggletip: \";clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.toggletip-arrow{transform:var(--et-floating-arrow-translate);inline-size:var(--arrow-size);block-size:var(--arrow-size);position:absolute;z-index:1;will-change:transform}.toggletip-arrow:before{inline-size:var(--arrow-size);block-size:var(--arrow-size);border-radius:var(--arrow-radius);position:absolute;z-index:-1;transform:rotate(45deg);background:var(--background-color);top:0;left:0;content:\"\"}.et-toggletip.et-with-default-animation .et-toggletip-container.et-animation-enter-from,.et-toggletip.et-with-default-animation .et-toggletip-container.et-animation-leave-to{opacity:0}.et-toggletip.et-with-default-animation .et-toggletip-container.et-animation-enter-from .toggletip-arrow:before,.et-toggletip.et-with-default-animation .et-toggletip-container.et-animation-leave-to .toggletip-arrow:before{transform:rotate(45deg) scale(0)}.et-toggletip.et-with-default-animation .et-toggletip-container.et-animation-enter-active{transition:transform .2s var(--ease-out-5),opacity .2s var(--ease-out-5)}.et-toggletip.et-with-default-animation .et-toggletip-container.et-animation-enter-active .toggletip-arrow:before{transition:transform .2s var(--ease-out-5)}.et-toggletip.et-with-default-animation .et-toggletip-container.et-animation-leave-active{transition:transform .15s var(--ease-in-5),opacity .15s var(--ease-in-5)}.et-toggletip.et-with-default-animation .et-toggletip-container.et-animation-leave-active .toggletip-arrow:before{transition:transform .15s var(--ease-in-5)}.et-toggletip.et-with-default-animation[et-floating-placement^=top] .et-toggletip-container.et-animation-enter-from,.et-toggletip.et-with-default-animation[et-floating-placement^=top] .et-toggletip-container.et-animation-leave-to{transform:translateY(5px)}.et-toggletip.et-with-default-animation[et-floating-placement^=right] .et-toggletip-container.et-animation-enter-from,.et-toggletip.et-with-default-animation[et-floating-placement^=right] .et-toggletip-container.et-animation-leave-to{transform:translate(-5px)}.et-toggletip.et-with-default-animation[et-floating-placement^=bottom] .et-toggletip-container.et-animation-enter-from,.et-toggletip.et-with-default-animation[et-floating-placement^=bottom] .et-toggletip-container.et-animation-leave-to{transform:translateY(-5px)}.et-toggletip.et-with-default-animation[et-floating-placement^=left] .et-toggletip-container.et-animation-enter-from,.et-toggletip.et-with-default-animation[et-floating-placement^=left] .et-toggletip-container.et-animation-leave-to{transform:translate(5px)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: AnimatedLifecycleDirective, selector: "[etAnimatedLifecycle]", inputs: ["skipNextEnter"], outputs: ["skipNextEnterChange"], exportAs: ["etAnimatedLifecycle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
13618
|
+
], viewQueries: [{ propertyName: "_animatedLifecycle", first: true, predicate: ANIMATED_LIFECYCLE_TOKEN, descendants: true, static: true }], hostDirectives: [{ directive: i2.ProvideThemeDirective }], ngImport: i0, template: "<div class=\"et-toggletip-container\" etAnimatedLifecycle>\n @if (toggletipText) {\n {{ toggletipText }}\n }\n\n @if (toggletipTemplate) {\n <ng-container *ngTemplateOutlet=\"toggletipTemplate; injector: injector\" />\n }\n\n <div class=\"toggletip-arrow\" et-floating-arrow></div>\n</div>\n", styles: [":where(.et-toggletip){--background-color: hsl(0 0% 20%);--foreground-color: CanvasText;--border-radius: 4px;--padding-inline: 1.5ch;--padding-block: .75ch;--inline-max-size: 25ch;--arrow-size: 10px;--arrow-radius: 2px}.et-toggletip{transform:var(--et-floating-translate);will-change:transform}.et-toggletip[et-floating-placement^=top] .toggletip-arrow{bottom:-4px;left:0}.et-toggletip[et-floating-placement^=right] .toggletip-arrow{left:-4px;top:0}.et-toggletip[et-floating-placement^=bottom] .toggletip-arrow{top:-4px;left:0}.et-toggletip[et-floating-placement^=left] .toggletip-arrow{right:-4px;top:0}.et-toggletip-container{z-index:1;inline-size:max-content;max-inline-size:var(--inline-max-size);padding:var(--padding-block) var(--padding-inline);border-radius:var(--border-radius);background:var(--background-color);color:var(--foreground-color);will-change:transform}.et-toggletip-container:before{content:\"; Has toggletip: \";clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.toggletip-arrow{transform:var(--et-floating-arrow-translate);inline-size:var(--arrow-size);block-size:var(--arrow-size);position:absolute;z-index:1;will-change:transform}.toggletip-arrow:before{inline-size:var(--arrow-size);block-size:var(--arrow-size);border-radius:var(--arrow-radius);position:absolute;z-index:-1;transform:rotate(45deg);background:var(--background-color);top:0;left:0;content:\"\"}.et-toggletip.et-with-default-animation .et-toggletip-container.et-animation-enter-from,.et-toggletip.et-with-default-animation .et-toggletip-container.et-animation-leave-to{opacity:0}.et-toggletip.et-with-default-animation .et-toggletip-container.et-animation-enter-from .toggletip-arrow:before,.et-toggletip.et-with-default-animation .et-toggletip-container.et-animation-leave-to .toggletip-arrow:before{transform:rotate(45deg) scale(0)}.et-toggletip.et-with-default-animation .et-toggletip-container.et-animation-enter-active{transition:transform .2s var(--ease-out-5),opacity .2s var(--ease-out-5)}.et-toggletip.et-with-default-animation .et-toggletip-container.et-animation-enter-active .toggletip-arrow:before{transition:transform .2s var(--ease-out-5)}.et-toggletip.et-with-default-animation .et-toggletip-container.et-animation-leave-active{transition:transform .15s var(--ease-in-5),opacity .15s var(--ease-in-5)}.et-toggletip.et-with-default-animation .et-toggletip-container.et-animation-leave-active .toggletip-arrow:before{transition:transform .15s var(--ease-in-5)}.et-toggletip.et-with-default-animation[et-floating-placement^=top] .et-toggletip-container.et-animation-enter-from,.et-toggletip.et-with-default-animation[et-floating-placement^=top] .et-toggletip-container.et-animation-leave-to{transform:translateY(5px)}.et-toggletip.et-with-default-animation[et-floating-placement^=right] .et-toggletip-container.et-animation-enter-from,.et-toggletip.et-with-default-animation[et-floating-placement^=right] .et-toggletip-container.et-animation-leave-to{transform:translate(-5px)}.et-toggletip.et-with-default-animation[et-floating-placement^=bottom] .et-toggletip-container.et-animation-enter-from,.et-toggletip.et-with-default-animation[et-floating-placement^=bottom] .et-toggletip-container.et-animation-leave-to{transform:translateY(-5px)}.et-toggletip.et-with-default-animation[et-floating-placement^=left] .et-toggletip-container.et-animation-enter-from,.et-toggletip.et-with-default-animation[et-floating-placement^=left] .et-toggletip-container.et-animation-leave-to{transform:translate(5px)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: AnimatedLifecycleDirective, selector: "[etAnimatedLifecycle]", inputs: ["skipNextEnter"], outputs: ["stateChange", "skipNextEnterChange"], exportAs: ["etAnimatedLifecycle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
13551
13619
|
}
|
|
13552
13620
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ToggletipComponent, decorators: [{
|
|
13553
13621
|
type: Component,
|
|
@@ -13809,7 +13877,7 @@ class TooltipComponent {
|
|
|
13809
13877
|
provide: TOOLTIP,
|
|
13810
13878
|
useExisting: TooltipComponent,
|
|
13811
13879
|
},
|
|
13812
|
-
], viewQueries: [{ propertyName: "_animatedLifecycle", first: true, predicate: ANIMATED_LIFECYCLE_TOKEN, descendants: true, static: true }], hostDirectives: [{ directive: i2.ProvideThemeDirective }], ngImport: i0, template: "<div class=\"et-tooltip-container\" etAnimatedLifecycle>\n @if (tooltipText) {\n {{ tooltipText }}\n }\n\n @if (tooltipTemplate) {\n <ng-container *ngTemplateOutlet=\"tooltipTemplate; injector: injector\" />\n }\n\n <div class=\"tooltip-arrow\" et-floating-arrow></div>\n</div>\n", styles: [":where(.et-tooltip){--background-color: hsl(0 0% 20%);--foreground-color: CanvasText;--border-radius: 4px;--padding-inline: 1.5ch;--padding-block: .75ch;--inline-max-size: 25ch;--arrow-size: 10px;--arrow-radius: 2px}.et-tooltip{pointer-events:none;-webkit-user-select:none;user-select:none;transform:var(--et-floating-translate);will-change:transform}.et-tooltip[et-floating-placement^=top] .tooltip-arrow{bottom:-4px;left:0}.et-tooltip[et-floating-placement^=right] .tooltip-arrow{left:-4px;top:0}.et-tooltip[et-floating-placement^=bottom] .tooltip-arrow{top:-4px;left:0}.et-tooltip[et-floating-placement^=left] .tooltip-arrow{right:-4px;top:0}.et-tooltip-container{z-index:1;inline-size:max-content;max-inline-size:var(--inline-max-size);padding:var(--padding-block) var(--padding-inline);border-radius:var(--border-radius);background:var(--background-color);color:var(--foreground-color);will-change:transform}.et-tooltip-container:before{content:\"; Has tooltip: \";clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.tooltip-arrow{inline-size:var(--arrow-size);block-size:var(--arrow-size);position:absolute;z-index:1;transform:var(--et-floating-arrow-translate);will-change:transform}.tooltip-arrow:before{inline-size:var(--arrow-size);block-size:var(--arrow-size);border-radius:var(--arrow-radius);position:absolute;z-index:-1;transform:rotate(45deg);background:var(--background-color);top:0;left:0;content:\"\"}.et-tooltip.et-with-default-animation .et-tooltip-container.et-animation-enter-from,.et-tooltip.et-with-default-animation .et-tooltip-container.et-animation-leave-to{opacity:0}.et-tooltip.et-with-default-animation .et-tooltip-container.et-animation-enter-active{transition:transform .3s var(--ease-out-5),opacity .3s var(--ease-out-5)}.et-tooltip.et-with-default-animation .et-tooltip-container.et-animation-leave-active{transition:transform .15s var(--ease-in-5),opacity .15s var(--ease-in-5)}.et-tooltip.et-with-default-animation[et-floating-placement^=top] .et-tooltip-container.et-animation-enter-from,.et-tooltip.et-with-default-animation[et-floating-placement^=top] .et-tooltip-container.et-animation-leave-to{transform:translateY(5px)}.et-tooltip.et-with-default-animation[et-floating-placement^=right] .et-tooltip-container.et-animation-enter-from,.et-tooltip.et-with-default-animation[et-floating-placement^=right] .et-tooltip-container.et-animation-leave-to{transform:translate(-5px)}.et-tooltip.et-with-default-animation[et-floating-placement^=bottom] .et-tooltip-container.et-animation-enter-from,.et-tooltip.et-with-default-animation[et-floating-placement^=bottom] .et-tooltip-container.et-animation-leave-to{transform:translateY(-5px)}.et-tooltip.et-with-default-animation[et-floating-placement^=left] .et-tooltip-container.et-animation-enter-from,.et-tooltip.et-with-default-animation[et-floating-placement^=left] .et-tooltip-container.et-animation-leave-to{transform:translate(5px)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: AnimatedLifecycleDirective, selector: "[etAnimatedLifecycle]", inputs: ["skipNextEnter"], outputs: ["skipNextEnterChange"], exportAs: ["etAnimatedLifecycle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
13880
|
+
], viewQueries: [{ propertyName: "_animatedLifecycle", first: true, predicate: ANIMATED_LIFECYCLE_TOKEN, descendants: true, static: true }], hostDirectives: [{ directive: i2.ProvideThemeDirective }], ngImport: i0, template: "<div class=\"et-tooltip-container\" etAnimatedLifecycle>\n @if (tooltipText) {\n {{ tooltipText }}\n }\n\n @if (tooltipTemplate) {\n <ng-container *ngTemplateOutlet=\"tooltipTemplate; injector: injector\" />\n }\n\n <div class=\"tooltip-arrow\" et-floating-arrow></div>\n</div>\n", styles: [":where(.et-tooltip){--background-color: hsl(0 0% 20%);--foreground-color: CanvasText;--border-radius: 4px;--padding-inline: 1.5ch;--padding-block: .75ch;--inline-max-size: 25ch;--arrow-size: 10px;--arrow-radius: 2px}.et-tooltip{pointer-events:none;-webkit-user-select:none;user-select:none;transform:var(--et-floating-translate);will-change:transform}.et-tooltip[et-floating-placement^=top] .tooltip-arrow{bottom:-4px;left:0}.et-tooltip[et-floating-placement^=right] .tooltip-arrow{left:-4px;top:0}.et-tooltip[et-floating-placement^=bottom] .tooltip-arrow{top:-4px;left:0}.et-tooltip[et-floating-placement^=left] .tooltip-arrow{right:-4px;top:0}.et-tooltip-container{z-index:1;inline-size:max-content;max-inline-size:var(--inline-max-size);padding:var(--padding-block) var(--padding-inline);border-radius:var(--border-radius);background:var(--background-color);color:var(--foreground-color);will-change:transform}.et-tooltip-container:before{content:\"; Has tooltip: \";clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.tooltip-arrow{inline-size:var(--arrow-size);block-size:var(--arrow-size);position:absolute;z-index:1;transform:var(--et-floating-arrow-translate);will-change:transform}.tooltip-arrow:before{inline-size:var(--arrow-size);block-size:var(--arrow-size);border-radius:var(--arrow-radius);position:absolute;z-index:-1;transform:rotate(45deg);background:var(--background-color);top:0;left:0;content:\"\"}.et-tooltip.et-with-default-animation .et-tooltip-container.et-animation-enter-from,.et-tooltip.et-with-default-animation .et-tooltip-container.et-animation-leave-to{opacity:0}.et-tooltip.et-with-default-animation .et-tooltip-container.et-animation-enter-active{transition:transform .3s var(--ease-out-5),opacity .3s var(--ease-out-5)}.et-tooltip.et-with-default-animation .et-tooltip-container.et-animation-leave-active{transition:transform .15s var(--ease-in-5),opacity .15s var(--ease-in-5)}.et-tooltip.et-with-default-animation[et-floating-placement^=top] .et-tooltip-container.et-animation-enter-from,.et-tooltip.et-with-default-animation[et-floating-placement^=top] .et-tooltip-container.et-animation-leave-to{transform:translateY(5px)}.et-tooltip.et-with-default-animation[et-floating-placement^=right] .et-tooltip-container.et-animation-enter-from,.et-tooltip.et-with-default-animation[et-floating-placement^=right] .et-tooltip-container.et-animation-leave-to{transform:translate(-5px)}.et-tooltip.et-with-default-animation[et-floating-placement^=bottom] .et-tooltip-container.et-animation-enter-from,.et-tooltip.et-with-default-animation[et-floating-placement^=bottom] .et-tooltip-container.et-animation-leave-to{transform:translateY(-5px)}.et-tooltip.et-with-default-animation[et-floating-placement^=left] .et-tooltip-container.et-animation-enter-from,.et-tooltip.et-with-default-animation[et-floating-placement^=left] .et-tooltip-container.et-animation-leave-to{transform:translate(5px)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: AnimatedLifecycleDirective, selector: "[etAnimatedLifecycle]", inputs: ["skipNextEnter"], outputs: ["stateChange", "skipNextEnterChange"], exportAs: ["etAnimatedLifecycle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
13813
13881
|
}
|
|
13814
13882
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TooltipComponent, decorators: [{
|
|
13815
13883
|
type: Component,
|