@flywheel-io/vision 2.2.0 → 2.3.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/components/popover/popover-panel/popover-panel.component.d.ts +2 -1
- package/components/popover/popover.component.d.ts +14 -5
- package/components/tooltip/tooltip.component.d.ts +12 -1
- package/esm2022/components/avatar/avatar.component.mjs +1 -1
- package/esm2022/components/menu/menu-container/menu-container.component.mjs +2 -2
- package/esm2022/components/navbar/navbar-item/navbar-item.component.mjs +1 -1
- package/esm2022/components/navbar/navbar-sub-item/navbar-sub-item.component.mjs +2 -2
- package/esm2022/components/popover/popover-panel/popover-panel.component.mjs +6 -4
- package/esm2022/components/popover/popover.component.mjs +55 -12
- package/esm2022/components/tooltip/tooltip.component.mjs +49 -4
- package/fesm2022/flywheel-io-vision.mjs +105 -18
- package/fesm2022/flywheel-io-vision.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -1,8 +1,19 @@
|
|
|
1
|
-
|
|
1
|
+
/* eslint-disable @rx-angular/prefer-no-layout-sensitive-apis */
|
|
2
|
+
import { animate, style, transition, trigger } from '@angular/animations';
|
|
3
|
+
import { Component, computed, HostBinding, Input, input } from '@angular/core';
|
|
2
4
|
import * as i0 from "@angular/core";
|
|
3
5
|
import * as i1 from "@angular/common";
|
|
4
6
|
import * as i2 from "@angular/cdk/overlay";
|
|
5
7
|
import * as i3 from "./tooltip-panel/tooltip-panel.component";
|
|
8
|
+
const delayMap = {
|
|
9
|
+
'none': 0,
|
|
10
|
+
'short': 400,
|
|
11
|
+
'long': 700,
|
|
12
|
+
};
|
|
13
|
+
/**
|
|
14
|
+
* component for giving extra context when a user hovers something
|
|
15
|
+
* @see [Vision Docs](https://cdn.flywheel.io/docs/vision/master/?path=/docs/components-tooltip--docs)
|
|
16
|
+
*/
|
|
6
17
|
export class FwTooltipComponent {
|
|
7
18
|
constructor() {
|
|
8
19
|
this.color = 'light';
|
|
@@ -10,6 +21,8 @@ export class FwTooltipComponent {
|
|
|
10
21
|
this.maxWidth = 200;
|
|
11
22
|
this.fullWidth = false;
|
|
12
23
|
this.isOpen = false;
|
|
24
|
+
this.delay = input('short');
|
|
25
|
+
this.delayMs = computed(() => delayMap[this.delay()]);
|
|
13
26
|
this.positionMap = {
|
|
14
27
|
'none': { originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom', offsetY: 3 },
|
|
15
28
|
'above': { originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom', offsetY: 3 },
|
|
@@ -22,12 +35,44 @@ export class FwTooltipComponent {
|
|
|
22
35
|
return ['fw-tooltip', this.fullWidth ? 'full-width' : null].filter(Boolean).join(' ');
|
|
23
36
|
}
|
|
24
37
|
;
|
|
38
|
+
handleMouseEnter() {
|
|
39
|
+
this.openDelayTimer = window.setTimeout(() => {
|
|
40
|
+
this.isOpen = true;
|
|
41
|
+
this.openDelayTimer = null;
|
|
42
|
+
}, this.delayMs());
|
|
43
|
+
}
|
|
44
|
+
handleMouseLeave() {
|
|
45
|
+
if (this.openDelayTimer) {
|
|
46
|
+
window.clearTimeout(this.openDelayTimer);
|
|
47
|
+
}
|
|
48
|
+
this.isOpen = false;
|
|
49
|
+
}
|
|
25
50
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
26
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
51
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: FwTooltipComponent, selector: "fw-tooltip", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: false, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: false, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: false, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: false, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: false, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: false, isRequired: false, transformFunction: null }, trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: false, isRequired: false, transformFunction: null }, delay: { classPropertyName: "delay", publicName: "delay", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.class": "this.classes" } }, ngImport: i0, template: "<ng-template\n @fadeInFadeOut\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"isOpen\"\n [cdkConnectedOverlayPositions]=\"[positionMap[position]]\">\n <fw-tooltip-panel\n *ngIf=\"title\"\n [position]=\"position\"\n [color]=\"color\"\n [maxWidth]=\"maxWidth\">\n <h5 class=\"vision-h5\">{{ title }}</h5>\n </fw-tooltip-panel>\n</ng-template>\n\n<div\n title=\"\" [ngClass]=\"['tooltip-trigger',fullWidth?'full-width':'']\"\n cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\"\n (mouseenter)=\"handleMouseEnter()\" (mouseleave)=\"handleMouseLeave()\">\n <ng-content></ng-content>\n</div>\n", styles: [":host.full-width{flex:1;display:flex;width:stretch}:host.full-width button{flex:1}:host .tooltip-trigger{width:fit-content;display:inline-block}:host .tooltip-trigger.full-width{flex:1;display:flex;width:stretch}:host .tooltip-trigger.full-width button{flex:1}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: i3.FwTooltipPanelComponent, selector: "fw-tooltip-panel", inputs: ["position", "color", "maxWidth"], outputs: ["mouseLeave"] }], animations: [
|
|
52
|
+
trigger('fadeInFadeOut', [
|
|
53
|
+
transition(':enter', [
|
|
54
|
+
style({ opacity: 0 }),
|
|
55
|
+
animate('150ms', style({ opacity: 1 })),
|
|
56
|
+
]),
|
|
57
|
+
transition(':leave', [
|
|
58
|
+
animate('200ms', style({ opacity: 0 })),
|
|
59
|
+
]),
|
|
60
|
+
]),
|
|
61
|
+
] }); }
|
|
27
62
|
}
|
|
28
63
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwTooltipComponent, decorators: [{
|
|
29
64
|
type: Component,
|
|
30
|
-
args: [{ selector: 'fw-tooltip',
|
|
65
|
+
args: [{ selector: 'fw-tooltip', animations: [
|
|
66
|
+
trigger('fadeInFadeOut', [
|
|
67
|
+
transition(':enter', [
|
|
68
|
+
style({ opacity: 0 }),
|
|
69
|
+
animate('150ms', style({ opacity: 1 })),
|
|
70
|
+
]),
|
|
71
|
+
transition(':leave', [
|
|
72
|
+
animate('200ms', style({ opacity: 0 })),
|
|
73
|
+
]),
|
|
74
|
+
]),
|
|
75
|
+
], template: "<ng-template\n @fadeInFadeOut\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"isOpen\"\n [cdkConnectedOverlayPositions]=\"[positionMap[position]]\">\n <fw-tooltip-panel\n *ngIf=\"title\"\n [position]=\"position\"\n [color]=\"color\"\n [maxWidth]=\"maxWidth\">\n <h5 class=\"vision-h5\">{{ title }}</h5>\n </fw-tooltip-panel>\n</ng-template>\n\n<div\n title=\"\" [ngClass]=\"['tooltip-trigger',fullWidth?'full-width':'']\"\n cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\"\n (mouseenter)=\"handleMouseEnter()\" (mouseleave)=\"handleMouseLeave()\">\n <ng-content></ng-content>\n</div>\n", styles: [":host.full-width{flex:1;display:flex;width:stretch}:host.full-width button{flex:1}:host .tooltip-trigger{width:fit-content;display:inline-block}:host .tooltip-trigger.full-width{flex:1;display:flex;width:stretch}:host .tooltip-trigger.full-width button{flex:1}\n"] }]
|
|
31
76
|
}], propDecorators: { title: [{
|
|
32
77
|
type: Input
|
|
33
78
|
}], color: [{
|
|
@@ -46,4 +91,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
46
91
|
type: HostBinding,
|
|
47
92
|
args: ['attr.class']
|
|
48
93
|
}] } });
|
|
49
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
94
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidG9vbHRpcC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9zcmMvY29tcG9uZW50cy90b29sdGlwL3Rvb2x0aXAuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvdG9vbHRpcC90b29sdGlwLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLGdFQUFnRTtBQUNoRSxPQUFPLEVBQUUsT0FBTyxFQUFFLEtBQUssRUFBRSxVQUFVLEVBQUUsT0FBTyxFQUFFLE1BQU0scUJBQXFCLENBQUM7QUFFMUUsT0FBTyxFQUFFLFNBQVMsRUFBRSxRQUFRLEVBQUUsV0FBVyxFQUFFLEtBQUssRUFBQyxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7Ozs7O0FBSzlFLE1BQU0sUUFBUSxHQUFhO0lBQ3pCLE1BQU0sRUFBRSxDQUFDO0lBQ1QsT0FBTyxFQUFFLEdBQUc7SUFDWixNQUFNLEVBQUUsR0FBRztDQUNaLENBQUE7QUFFRDs7O0dBR0c7QUFpQkgsTUFBTSxPQUFPLGtCQUFrQjtJQWhCL0I7UUFrQlcsVUFBSyxHQUFxQixPQUFPLENBQUM7UUFDbEMsYUFBUSxHQUFrRCxPQUFPLENBQUM7UUFDbEUsYUFBUSxHQUFZLEdBQUcsQ0FBQztRQUN4QixjQUFTLEdBQWEsS0FBSyxDQUFDO1FBQzVCLFdBQU0sR0FBWSxLQUFLLENBQUM7UUFHakMsVUFBSyxHQUFHLEtBQUssQ0FBYyxPQUFPLENBQUMsQ0FBQztRQUNwQyxZQUFPLEdBQUcsUUFBUSxDQUFDLEdBQUcsRUFBRSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsS0FBSyxFQUFFLENBQUMsQ0FBQyxDQUFDO1FBTWpELGdCQUFXLEdBQXlDO1lBQ2xELE1BQU0sRUFBRSxFQUFFLE9BQU8sRUFBRSxRQUFRLEVBQUUsT0FBTyxFQUFFLEtBQUssRUFBRSxRQUFRLEVBQUUsUUFBUSxFQUFFLFFBQVEsRUFBRSxRQUFRLEVBQUUsT0FBTyxFQUFFLENBQUMsRUFBRTtZQUNqRyxPQUFPLEVBQUUsRUFBRSxPQUFPLEVBQUUsUUFBUSxFQUFFLE9BQU8sRUFBRSxLQUFLLEVBQUUsUUFBUSxFQUFFLFFBQVEsRUFBRSxRQUFRLEVBQUUsUUFBUSxFQUFFLE9BQU8sRUFBRSxDQUFDLEVBQUU7WUFDbEcsT0FBTyxFQUFFLEVBQUUsT0FBTyxFQUFFLFFBQVEsRUFBRSxPQUFPLEVBQUUsUUFBUSxFQUFFLFFBQVEsRUFBRSxRQUFRLEVBQUUsUUFBUSxFQUFFLEtBQUssRUFBRSxPQUFPLEVBQUUsQ0FBQyxDQUFDLEVBQUU7WUFDbkcsTUFBTSxFQUFFLEVBQUUsT0FBTyxFQUFFLE9BQU8sRUFBRSxPQUFPLEVBQUUsUUFBUSxFQUFFLFFBQVEsRUFBRSxLQUFLLEVBQUUsUUFBUSxFQUFFLFFBQVEsRUFBRTtZQUNwRixPQUFPLEVBQUUsRUFBRSxPQUFPLEVBQUUsS0FBSyxFQUFFLE9BQU8sRUFBRSxRQUFRLEVBQUUsUUFBUSxFQUFFLE9BQU8sRUFBRSxRQUFRLEVBQUUsUUFBUSxFQUFFO1NBQ3RGLENBQUM7S0FpQkg7SUEzQkMsSUFBK0IsT0FBTztRQUNwQyxPQUFPLENBQUMsWUFBWSxFQUFFLElBQUksQ0FBQyxTQUFTLENBQUMsQ0FBQyxDQUFDLFlBQVksQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLENBQUMsTUFBTSxDQUFDLE9BQU8sQ0FBQyxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQztJQUN4RixDQUFDO0lBQUEsQ0FBQztJQVlGLGdCQUFnQjtRQUNkLElBQUksQ0FBQyxjQUFjLEdBQUcsTUFBTSxDQUFDLFVBQVUsQ0FBQyxHQUFHLEVBQUU7WUFDM0MsSUFBSSxDQUFDLE1BQU0sR0FBRyxJQUFJLENBQUM7WUFDbkIsSUFBSSxDQUFDLGNBQWMsR0FBRyxJQUFJLENBQUM7UUFDN0IsQ0FBQyxFQUFFLElBQUksQ0FBQyxPQUFPLEVBQUUsQ0FBQyxDQUFDO0lBQ3JCLENBQUM7SUFFRCxnQkFBZ0I7UUFDZCxJQUFJLElBQUksQ0FBQyxjQUFjLEVBQUUsQ0FBQztZQUN4QixNQUFNLENBQUMsWUFBWSxDQUFDLElBQUksQ0FBQyxjQUFjLENBQUMsQ0FBQztRQUMzQyxDQUFDO1FBQ0QsSUFBSSxDQUFDLE1BQU0sR0FBRyxLQUFLLENBQUM7SUFDdEIsQ0FBQzsrR0F0Q1Usa0JBQWtCO21HQUFsQixrQkFBa0Isb21DQ2xDL0IsaXBCQXFCQSwyeUREQ2M7WUFDVixPQUFPLENBQUMsZUFBZSxFQUFFO2dCQUN2QixVQUFVLENBQUMsUUFBUSxFQUFFO29CQUNuQixLQUFLLENBQUMsRUFBRSxPQUFPLEVBQUUsQ0FBQyxFQUFFLENBQUM7b0JBQ3JCLE9BQU8sQ0FBQyxPQUFPLEVBQUUsS0FBSyxDQUFDLEVBQUUsT0FBTyxFQUFFLENBQUMsRUFBRSxDQUFDLENBQUM7aUJBQ3hDLENBQUM7Z0JBQ0YsVUFBVSxDQUFDLFFBQVEsRUFBRTtvQkFDbkIsT0FBTyxDQUFDLE9BQU8sRUFBRSxLQUFLLENBQUMsRUFBRSxPQUFPLEVBQUUsQ0FBQyxFQUFFLENBQUMsQ0FBQztpQkFDeEMsQ0FBQzthQUNILENBQUM7U0FDSDs7NEZBRVUsa0JBQWtCO2tCQWhCOUIsU0FBUzsrQkFDRSxZQUFZLGNBR1Y7d0JBQ1YsT0FBTyxDQUFDLGVBQWUsRUFBRTs0QkFDdkIsVUFBVSxDQUFDLFFBQVEsRUFBRTtnQ0FDbkIsS0FBSyxDQUFDLEVBQUUsT0FBTyxFQUFFLENBQUMsRUFBRSxDQUFDO2dDQUNyQixPQUFPLENBQUMsT0FBTyxFQUFFLEtBQUssQ0FBQyxFQUFFLE9BQU8sRUFBRSxDQUFDLEVBQUUsQ0FBQyxDQUFDOzZCQUN4QyxDQUFDOzRCQUNGLFVBQVUsQ0FBQyxRQUFRLEVBQUU7Z0NBQ25CLE9BQU8sQ0FBQyxPQUFPLEVBQUUsS0FBSyxDQUFDLEVBQUUsT0FBTyxFQUFFLENBQUMsRUFBRSxDQUFDLENBQUM7NkJBQ3hDLENBQUM7eUJBQ0gsQ0FBQztxQkFDSDs4QkFHUSxLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csS0FBSztzQkFBYixLQUFLO2dCQUNHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBQ0csUUFBUTtzQkFBaEIsS0FBSztnQkFDRyxTQUFTO3NCQUFqQixLQUFLO2dCQUNHLE1BQU07c0JBQWQsS0FBSztnQkFDRyxPQUFPO3NCQUFmLEtBQUs7Z0JBS3lCLE9BQU87c0JBQXJDLFdBQVc7dUJBQUMsWUFBWSIsInNvdXJjZXNDb250ZW50IjpbIi8qIGVzbGludC1kaXNhYmxlIEByeC1hbmd1bGFyL3ByZWZlci1uby1sYXlvdXQtc2Vuc2l0aXZlLWFwaXMgKi9cbmltcG9ydCB7IGFuaW1hdGUsIHN0eWxlLCB0cmFuc2l0aW9uLCB0cmlnZ2VyIH0gZnJvbSAnQGFuZ3VsYXIvYW5pbWF0aW9ucyc7XG5pbXBvcnQgeyBDZGtPdmVybGF5T3JpZ2luLCBDb25uZWN0ZWRQb3NpdGlvbiwgRmxleGlibGVDb25uZWN0ZWRQb3NpdGlvblN0cmF0ZWd5T3JpZ2luIH0gZnJvbSAnQGFuZ3VsYXIvY2RrL292ZXJsYXknO1xuaW1wb3J0IHsgQ29tcG9uZW50LCBjb21wdXRlZCwgSG9zdEJpbmRpbmcsIElucHV0LGlucHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbnR5cGUgRGVsYXlMZW5ndGggPSAnbm9uZScgfCAnc2hvcnQnIHwgJ2xvbmcnO1xudHlwZSBEZWxheU1hcCA9IHsgW0sgaW4gRGVsYXlMZW5ndGhdOiBudW1iZXIgfTtcblxuY29uc3QgZGVsYXlNYXA6IERlbGF5TWFwID0ge1xuICAnbm9uZSc6IDAsXG4gICdzaG9ydCc6IDQwMCxcbiAgJ2xvbmcnOiA3MDAsXG59XG5cbi8qKlxuICogY29tcG9uZW50IGZvciBnaXZpbmcgZXh0cmEgY29udGV4dCB3aGVuIGEgdXNlciBob3ZlcnMgc29tZXRoaW5nXG4gKiBAc2VlIFtWaXNpb24gRG9jc10oaHR0cHM6Ly9jZG4uZmx5d2hlZWwuaW8vZG9jcy92aXNpb24vbWFzdGVyLz9wYXRoPS9kb2NzL2NvbXBvbmVudHMtdG9vbHRpcC0tZG9jcylcbiAqL1xuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnZnctdG9vbHRpcCcsXG4gIHRlbXBsYXRlVXJsOiAnLi90b29sdGlwLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vdG9vbHRpcC5jb21wb25lbnQuc2NzcyddLFxuICBhbmltYXRpb25zOiBbXG4gICAgdHJpZ2dlcignZmFkZUluRmFkZU91dCcsIFtcbiAgICAgIHRyYW5zaXRpb24oJzplbnRlcicsIFtcbiAgICAgICAgc3R5bGUoeyBvcGFjaXR5OiAwIH0pLFxuICAgICAgICBhbmltYXRlKCcxNTBtcycsIHN0eWxlKHsgb3BhY2l0eTogMSB9KSksXG4gICAgICBdKSxcbiAgICAgIHRyYW5zaXRpb24oJzpsZWF2ZScsIFtcbiAgICAgICAgYW5pbWF0ZSgnMjAwbXMnLCBzdHlsZSh7IG9wYWNpdHk6IDAgfSkpLFxuICAgICAgXSksXG4gICAgXSksXG4gIF0sXG59KVxuZXhwb3J0IGNsYXNzIEZ3VG9vbHRpcENvbXBvbmVudCB7XG4gIEBJbnB1dCgpIHRpdGxlOiBzdHJpbmc7XG4gIEBJbnB1dCgpIGNvbG9yOiAnbGlnaHQnIHwgJ2RhcmsnID0gJ2xpZ2h0JztcbiAgQElucHV0KCkgcG9zaXRpb246ICdhYm92ZScgfCAnYmVsb3cnIHwgJ2xlZnQnIHwgJ3JpZ2h0JyB8ICdub25lJyA9ICdhYm92ZSc7XG4gIEBJbnB1dCgpIG1heFdpZHRoPzogbnVtYmVyID0gMjAwO1xuICBASW5wdXQoKSBmdWxsV2lkdGg/OiBib29sZWFuID0gZmFsc2U7XG4gIEBJbnB1dCgpIGlzT3BlbjogYm9vbGVhbiA9IGZhbHNlO1xuICBASW5wdXQoKSB0cmlnZ2VyOiBDZGtPdmVybGF5T3JpZ2luIHwgRmxleGlibGVDb25uZWN0ZWRQb3NpdGlvblN0cmF0ZWd5T3JpZ2luO1xuXG4gIGRlbGF5ID0gaW5wdXQ8RGVsYXlMZW5ndGg+KCdzaG9ydCcpO1xuICBkZWxheU1zID0gY29tcHV0ZWQoKCkgPT4gZGVsYXlNYXBbdGhpcy5kZWxheSgpXSk7XG5cbiAgQEhvc3RCaW5kaW5nKCdhdHRyLmNsYXNzJykgZ2V0IGNsYXNzZXMoKTogc3RyaW5nIHtcbiAgICByZXR1cm4gWydmdy10b29sdGlwJywgdGhpcy5mdWxsV2lkdGggPyAnZnVsbC13aWR0aCcgOiBudWxsXS5maWx0ZXIoQm9vbGVhbikuam9pbignICcpO1xuICB9O1xuXG4gIHBvc2l0aW9uTWFwOiB7IFtrZXk6IHN0cmluZ106IENvbm5lY3RlZFBvc2l0aW9uIH0gPSB7XG4gICAgJ25vbmUnOiB7IG9yaWdpblg6ICdjZW50ZXInLCBvcmlnaW5ZOiAndG9wJywgb3ZlcmxheVg6ICdjZW50ZXInLCBvdmVybGF5WTogJ2JvdHRvbScsIG9mZnNldFk6IDMgfSxcbiAgICAnYWJvdmUnOiB7IG9yaWdpblg6ICdjZW50ZXInLCBvcmlnaW5ZOiAndG9wJywgb3ZlcmxheVg6ICdjZW50ZXInLCBvdmVybGF5WTogJ2JvdHRvbScsIG9mZnNldFk6IDMgfSxcbiAgICAnYmVsb3cnOiB7IG9yaWdpblg6ICdjZW50ZXInLCBvcmlnaW5ZOiAnYm90dG9tJywgb3ZlcmxheVg6ICdjZW50ZXInLCBvdmVybGF5WTogJ3RvcCcsIG9mZnNldFk6IC0zIH0sXG4gICAgJ2xlZnQnOiB7IG9yaWdpblg6ICdzdGFydCcsIG9yaWdpblk6ICdjZW50ZXInLCBvdmVybGF5WDogJ2VuZCcsIG92ZXJsYXlZOiAnY2VudGVyJyB9LFxuICAgICdyaWdodCc6IHsgb3JpZ2luWDogJ2VuZCcsIG9yaWdpblk6ICdjZW50ZXInLCBvdmVybGF5WDogJ3N0YXJ0Jywgb3ZlcmxheVk6ICdjZW50ZXInIH0sXG4gIH07XG5cbiAgcHJpdmF0ZSBvcGVuRGVsYXlUaW1lcjogbnVtYmVyO1xuXG4gIGhhbmRsZU1vdXNlRW50ZXIoKTogdm9pZCB7XG4gICAgdGhpcy5vcGVuRGVsYXlUaW1lciA9IHdpbmRvdy5zZXRUaW1lb3V0KCgpID0+IHtcbiAgICAgIHRoaXMuaXNPcGVuID0gdHJ1ZTtcbiAgICAgIHRoaXMub3BlbkRlbGF5VGltZXIgPSBudWxsO1xuICAgIH0sIHRoaXMuZGVsYXlNcygpKTtcbiAgfVxuXG4gIGhhbmRsZU1vdXNlTGVhdmUoKTogdm9pZCB7XG4gICAgaWYgKHRoaXMub3BlbkRlbGF5VGltZXIpIHtcbiAgICAgIHdpbmRvdy5jbGVhclRpbWVvdXQodGhpcy5vcGVuRGVsYXlUaW1lcik7XG4gICAgfVxuICAgIHRoaXMuaXNPcGVuID0gZmFsc2U7XG4gIH1cbn1cbiIsIjxuZy10ZW1wbGF0ZVxuICBAZmFkZUluRmFkZU91dFxuICBjZGtDb25uZWN0ZWRPdmVybGF5XG4gIFtjZGtDb25uZWN0ZWRPdmVybGF5T3JpZ2luXT1cInRyaWdnZXJcIlxuICBbY2RrQ29ubmVjdGVkT3ZlcmxheU9wZW5dPVwiaXNPcGVuXCJcbiAgW2Nka0Nvbm5lY3RlZE92ZXJsYXlQb3NpdGlvbnNdPVwiW3Bvc2l0aW9uTWFwW3Bvc2l0aW9uXV1cIj5cbiAgPGZ3LXRvb2x0aXAtcGFuZWxcbiAgICAqbmdJZj1cInRpdGxlXCJcbiAgICBbcG9zaXRpb25dPVwicG9zaXRpb25cIlxuICAgIFtjb2xvcl09XCJjb2xvclwiXG4gICAgW21heFdpZHRoXT1cIm1heFdpZHRoXCI+XG4gICAgPGg1IGNsYXNzPVwidmlzaW9uLWg1XCI+e3sgdGl0bGUgfX08L2g1PlxuICA8L2Z3LXRvb2x0aXAtcGFuZWw+XG48L25nLXRlbXBsYXRlPlxuXG48ZGl2XG4gIHRpdGxlPVwiXCIgW25nQ2xhc3NdPVwiWyd0b29sdGlwLXRyaWdnZXInLGZ1bGxXaWR0aD8nZnVsbC13aWR0aCc6JyddXCJcbiAgY2RrT3ZlcmxheU9yaWdpbiAjdHJpZ2dlcj1cImNka092ZXJsYXlPcmlnaW5cIlxuICAobW91c2VlbnRlcik9XCJoYW5kbGVNb3VzZUVudGVyKClcIiAobW91c2VsZWF2ZSk9XCJoYW5kbGVNb3VzZUxlYXZlKClcIj5cbiAgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxuPC9kaXY+XG4iXX0=
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { HostBinding, Input, ChangeDetectionStrategy, Component, EventEmitter, Output, NgModule, input, model, computed, ContentChildren, ViewChild, ViewEncapsulation, Directive, forwardRef, HostListener, Optional, Inject, SkipSelf, Injectable, Pipe, ContentChild, output, contentChildren, signal, Host, viewChild,
|
|
2
|
+
import { HostBinding, Input, ChangeDetectionStrategy, Component, EventEmitter, Output, NgModule, input, model, computed, ContentChildren, ViewChild, ViewEncapsulation, Directive, forwardRef, HostListener, Optional, Inject, SkipSelf, Injectable, Pipe, ContentChild, effect, output, contentChildren, signal, Host, viewChild, ViewChildren, Self } from '@angular/core';
|
|
3
3
|
import * as i1$1 from '@angular/common';
|
|
4
4
|
import { CommonModule } from '@angular/common';
|
|
5
5
|
import * as i1 from '@angular/platform-browser';
|
|
@@ -3918,6 +3918,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
3918
3918
|
class FwPopoverPanelComponent {
|
|
3919
3919
|
constructor() {
|
|
3920
3920
|
this.mouseLeave = new EventEmitter();
|
|
3921
|
+
this.showCaret = input(true);
|
|
3921
3922
|
}
|
|
3922
3923
|
get classes() {
|
|
3923
3924
|
return ['fw-popover-panel', 'fw-popover-' + this.position].join(' ');
|
|
@@ -3926,11 +3927,11 @@ class FwPopoverPanelComponent {
|
|
|
3926
3927
|
this.mouseLeave.emit(e);
|
|
3927
3928
|
}
|
|
3928
3929
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwPopoverPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3929
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
3930
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: FwPopoverPanelComponent, selector: "fw-popover-panel", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: false, isRequired: false, transformFunction: null }, showCaret: { classPropertyName: "showCaret", publicName: "showCaret", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { mouseLeave: "mouseLeave" }, host: { listeners: { "mouseleave": "hidePopover($event)" }, properties: { "attr.class": "this.classes" } }, ngImport: i0, template: "<div class=\"fw-popover-content-wrapper\">\n <ng-content></ng-content>\n <div *ngIf=\"showCaret()\" class=\"fw-popover-caret\"></div>\n</div>\n", styles: [".vision-shadow-extra-large{box-shadow:0 8px 25px #0000001a}.vision-shadow-large,:host .fw-popover-content-wrapper{box-shadow:0 5px 15px #0000001a}.vision-shadow-medium{box-shadow:0 2px 5px #0000001a}.vision-shadow-small{box-shadow:0 1px 2px #0000000d}.vision-shadow-inner{box-shadow:0 2px 4px #00000014 inset}:host{opacity:1}:host .fw-popover-content-wrapper{position:relative;background:var(--card-background);border-radius:8px;border:1px solid var(--separations-border);min-width:60px;box-sizing:border-box}:host .fw-popover-content-wrapper .fw-popover-caret{position:absolute;overflow:hidden;width:25px;height:25px}:host .fw-popover-content-wrapper .fw-popover-caret:after{display:block;content:\"\";width:16px;height:16px;background:var(--card-background);border:1px solid var(--separations-border);transform:rotate(45deg);position:relative}:host.fw-popover-above{padding-bottom:16px}:host.fw-popover-above .fw-popover-caret{left:calc(50% - 12.5px);bottom:-16px;height:16px!important}:host.fw-popover-above .fw-popover-caret:after{margin:-9px auto;width:16px}:host.fw-popover-above-left{padding-bottom:16px}:host.fw-popover-above-left .fw-popover-caret{right:25px;bottom:-16px;height:16px!important}:host.fw-popover-above-left .fw-popover-caret:after{margin:-9px auto;width:16px}:host.fw-popover-above-right{padding-bottom:16px}:host.fw-popover-above-right .fw-popover-caret{left:25px;bottom:-16px;height:16px!important}:host.fw-popover-above-right .fw-popover-caret:after{margin:-9px auto;width:16px}:host.fw-popover-below{margin-top:16px}:host.fw-popover-below .fw-popover-caret{left:calc(50% - 12.5px);top:-16px;height:16px!important}:host.fw-popover-below .fw-popover-caret:after{top:16px;margin:-9px auto;width:16px}:host.fw-popover-below-left{margin-top:16px}:host.fw-popover-below-left .fw-popover-caret{right:25px;top:-16px;height:16px!important}:host.fw-popover-below-left .fw-popover-caret:after{top:16px;margin:-9px auto;width:16px}:host.fw-popover-below-right{margin-top:16px}:host.fw-popover-below-right .fw-popover-caret{left:25px;top:-16px;height:16px!important}:host.fw-popover-below-right .fw-popover-caret:after{top:16px;margin:-9px auto;width:16px}:host.fw-popover-left{margin-right:16px}:host.fw-popover-left .fw-popover-caret{right:-16px;top:calc(50% - 12.5px);width:16px!important}:host.fw-popover-left .fw-popover-caret:after{top:calc(50% - 8px);left:-9px;width:16px}:host.fw-popover-left-above{margin-right:16px}:host.fw-popover-left-above .fw-popover-caret{right:-16px;bottom:25px;width:16px!important}:host.fw-popover-left-above .fw-popover-caret:after{top:calc(50% - 8px);left:-9px;width:16px}:host.fw-popover-left-below{margin-right:16px}:host.fw-popover-left-below .fw-popover-caret{right:-16px;top:25px;width:16px!important}:host.fw-popover-left-below .fw-popover-caret:after{top:calc(50% - 8px);left:-9px;width:16px}:host.fw-popover-right{margin-left:16px}:host.fw-popover-right .fw-popover-caret{left:-16px;top:calc(50% - 12.5px);width:16px!important}:host.fw-popover-right .fw-popover-caret:after{top:calc(50% - 8px);right:-9px;width:16px}:host.fw-popover-right-above{margin-left:16px}:host.fw-popover-right-above .fw-popover-caret{left:-16px;bottom:25px;width:16px!important}:host.fw-popover-right-above .fw-popover-caret:after{top:calc(50% - 8px);right:-9px;width:16px}:host.fw-popover-right-below{margin-left:16px}:host.fw-popover-right-below .fw-popover-caret{left:-16px;top:25px;width:16px!important}:host.fw-popover-right-below .fw-popover-caret:after{top:calc(50% - 8px);right:-9px;width:16px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
|
3930
3931
|
}
|
|
3931
3932
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwPopoverPanelComponent, decorators: [{
|
|
3932
3933
|
type: Component,
|
|
3933
|
-
args: [{ selector: 'fw-popover-panel', template: "<div class=\"fw-popover-content-wrapper\">\n <ng-content></ng-content>\n <div class=\"fw-popover-caret\"></div>\n</div>\n", styles: [".vision-shadow-extra-large{box-shadow:0 8px 25px #0000001a}.vision-shadow-large,:host .fw-popover-content-wrapper{box-shadow:0 5px 15px #0000001a}.vision-shadow-medium{box-shadow:0 2px 5px #0000001a}.vision-shadow-small{box-shadow:0 1px 2px #0000000d}.vision-shadow-inner{box-shadow:0 2px 4px #00000014 inset}:host .fw-popover-content-wrapper{position:relative;background:var(--card-background);border-radius:8px;border:1px solid var(--separations-border);min-width:60px;box-sizing:border-box}:host .fw-popover-content-wrapper .fw-popover-caret{position:absolute;overflow:hidden;width:25px;height:25px}:host .fw-popover-content-wrapper .fw-popover-caret:after{display:block;content:\"\";width:16px;height:16px;background:var(--card-background);border:1px solid var(--separations-border);transform:rotate(45deg);position:relative}:host.fw-popover-above{padding-bottom:16px}:host.fw-popover-above .fw-popover-caret{left:calc(50% - 12.5px);bottom:-16px;height:16px!important}:host.fw-popover-above .fw-popover-caret:after{margin:-9px auto;width:16px}:host.fw-popover-above-left{padding-bottom:16px}:host.fw-popover-above-left .fw-popover-caret{right:25px;bottom:-16px;height:16px!important}:host.fw-popover-above-left .fw-popover-caret:after{margin:-9px auto;width:16px}:host.fw-popover-above-right{padding-bottom:16px}:host.fw-popover-above-right .fw-popover-caret{left:25px;bottom:-16px;height:16px!important}:host.fw-popover-above-right .fw-popover-caret:after{margin:-9px auto;width:16px}:host.fw-popover-below{margin-top:16px}:host.fw-popover-below .fw-popover-caret{left:calc(50% - 12.5px);top:-16px;height:16px!important}:host.fw-popover-below .fw-popover-caret:after{top:16px;margin:-9px auto;width:16px}:host.fw-popover-below-left{margin-top:16px}:host.fw-popover-below-left .fw-popover-caret{right:25px;top:-16px;height:16px!important}:host.fw-popover-below-left .fw-popover-caret:after{top:16px;margin:-9px auto;width:16px}:host.fw-popover-below-right{margin-top:16px}:host.fw-popover-below-right .fw-popover-caret{left:25px;top:-16px;height:16px!important}:host.fw-popover-below-right .fw-popover-caret:after{top:16px;margin:-9px auto;width:16px}:host.fw-popover-left{margin-right:16px}:host.fw-popover-left .fw-popover-caret{right:-16px;top:calc(50% - 12.5px);width:16px!important}:host.fw-popover-left .fw-popover-caret:after{top:calc(50% - 8px);left:-9px;width:16px}:host.fw-popover-left-above{margin-right:16px}:host.fw-popover-left-above .fw-popover-caret{right:-16px;bottom:25px;width:16px!important}:host.fw-popover-left-above .fw-popover-caret:after{top:calc(50% - 8px);left:-9px;width:16px}:host.fw-popover-left-below{margin-right:16px}:host.fw-popover-left-below .fw-popover-caret{right:-16px;top:25px;width:16px!important}:host.fw-popover-left-below .fw-popover-caret:after{top:calc(50% - 8px);left:-9px;width:16px}:host.fw-popover-right{margin-left:16px}:host.fw-popover-right .fw-popover-caret{left:-16px;top:calc(50% - 12.5px);width:16px!important}:host.fw-popover-right .fw-popover-caret:after{top:calc(50% - 8px);right:-9px;width:16px}:host.fw-popover-right-above{margin-left:16px}:host.fw-popover-right-above .fw-popover-caret{left:-16px;bottom:25px;width:16px!important}:host.fw-popover-right-above .fw-popover-caret:after{top:calc(50% - 8px);right:-9px;width:16px}:host.fw-popover-right-below{margin-left:16px}:host.fw-popover-right-below .fw-popover-caret{left:-16px;top:25px;width:16px!important}:host.fw-popover-right-below .fw-popover-caret:after{top:calc(50% - 8px);right:-9px;width:16px}\n"] }]
|
|
3934
|
+
args: [{ selector: 'fw-popover-panel', template: "<div class=\"fw-popover-content-wrapper\">\n <ng-content></ng-content>\n <div *ngIf=\"showCaret()\" class=\"fw-popover-caret\"></div>\n</div>\n", styles: [".vision-shadow-extra-large{box-shadow:0 8px 25px #0000001a}.vision-shadow-large,:host .fw-popover-content-wrapper{box-shadow:0 5px 15px #0000001a}.vision-shadow-medium{box-shadow:0 2px 5px #0000001a}.vision-shadow-small{box-shadow:0 1px 2px #0000000d}.vision-shadow-inner{box-shadow:0 2px 4px #00000014 inset}:host{opacity:1}:host .fw-popover-content-wrapper{position:relative;background:var(--card-background);border-radius:8px;border:1px solid var(--separations-border);min-width:60px;box-sizing:border-box}:host .fw-popover-content-wrapper .fw-popover-caret{position:absolute;overflow:hidden;width:25px;height:25px}:host .fw-popover-content-wrapper .fw-popover-caret:after{display:block;content:\"\";width:16px;height:16px;background:var(--card-background);border:1px solid var(--separations-border);transform:rotate(45deg);position:relative}:host.fw-popover-above{padding-bottom:16px}:host.fw-popover-above .fw-popover-caret{left:calc(50% - 12.5px);bottom:-16px;height:16px!important}:host.fw-popover-above .fw-popover-caret:after{margin:-9px auto;width:16px}:host.fw-popover-above-left{padding-bottom:16px}:host.fw-popover-above-left .fw-popover-caret{right:25px;bottom:-16px;height:16px!important}:host.fw-popover-above-left .fw-popover-caret:after{margin:-9px auto;width:16px}:host.fw-popover-above-right{padding-bottom:16px}:host.fw-popover-above-right .fw-popover-caret{left:25px;bottom:-16px;height:16px!important}:host.fw-popover-above-right .fw-popover-caret:after{margin:-9px auto;width:16px}:host.fw-popover-below{margin-top:16px}:host.fw-popover-below .fw-popover-caret{left:calc(50% - 12.5px);top:-16px;height:16px!important}:host.fw-popover-below .fw-popover-caret:after{top:16px;margin:-9px auto;width:16px}:host.fw-popover-below-left{margin-top:16px}:host.fw-popover-below-left .fw-popover-caret{right:25px;top:-16px;height:16px!important}:host.fw-popover-below-left .fw-popover-caret:after{top:16px;margin:-9px auto;width:16px}:host.fw-popover-below-right{margin-top:16px}:host.fw-popover-below-right .fw-popover-caret{left:25px;top:-16px;height:16px!important}:host.fw-popover-below-right .fw-popover-caret:after{top:16px;margin:-9px auto;width:16px}:host.fw-popover-left{margin-right:16px}:host.fw-popover-left .fw-popover-caret{right:-16px;top:calc(50% - 12.5px);width:16px!important}:host.fw-popover-left .fw-popover-caret:after{top:calc(50% - 8px);left:-9px;width:16px}:host.fw-popover-left-above{margin-right:16px}:host.fw-popover-left-above .fw-popover-caret{right:-16px;bottom:25px;width:16px!important}:host.fw-popover-left-above .fw-popover-caret:after{top:calc(50% - 8px);left:-9px;width:16px}:host.fw-popover-left-below{margin-right:16px}:host.fw-popover-left-below .fw-popover-caret{right:-16px;top:25px;width:16px!important}:host.fw-popover-left-below .fw-popover-caret:after{top:calc(50% - 8px);left:-9px;width:16px}:host.fw-popover-right{margin-left:16px}:host.fw-popover-right .fw-popover-caret{left:-16px;top:calc(50% - 12.5px);width:16px!important}:host.fw-popover-right .fw-popover-caret:after{top:calc(50% - 8px);right:-9px;width:16px}:host.fw-popover-right-above{margin-left:16px}:host.fw-popover-right-above .fw-popover-caret{left:-16px;bottom:25px;width:16px!important}:host.fw-popover-right-above .fw-popover-caret:after{top:calc(50% - 8px);right:-9px;width:16px}:host.fw-popover-right-below{margin-left:16px}:host.fw-popover-right-below .fw-popover-caret{left:-16px;top:25px;width:16px!important}:host.fw-popover-right-below .fw-popover-caret:after{top:calc(50% - 8px);right:-9px;width:16px}\n"] }]
|
|
3934
3935
|
}], propDecorators: { position: [{
|
|
3935
3936
|
type: Input
|
|
3936
3937
|
}], mouseLeave: [{
|
|
@@ -3943,11 +3944,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
3943
3944
|
args: ['mouseleave', ['$event']]
|
|
3944
3945
|
}] } });
|
|
3945
3946
|
|
|
3947
|
+
/* eslint-disable @rx-angular/prefer-no-layout-sensitive-apis */
|
|
3948
|
+
const delayMap$1 = {
|
|
3949
|
+
'none': 0,
|
|
3950
|
+
'short': 400,
|
|
3951
|
+
'long': 700,
|
|
3952
|
+
};
|
|
3953
|
+
/**
|
|
3954
|
+
* component for mounting content in a floating container
|
|
3955
|
+
* @see [Vision Docs](https://cdn.flywheel.io/?path=/docs/components-popover--docs)
|
|
3956
|
+
*/
|
|
3946
3957
|
class FwPopoverComponent {
|
|
3947
3958
|
constructor() {
|
|
3948
3959
|
this.position = 'above';
|
|
3960
|
+
this.trigger = input();
|
|
3949
3961
|
this.isOpen = false;
|
|
3950
3962
|
this.action = 'mouseenter';
|
|
3963
|
+
this.delay = input('short');
|
|
3964
|
+
this.delayMs = computed(() => {
|
|
3965
|
+
return delayMap$1[this.delay()];
|
|
3966
|
+
});
|
|
3967
|
+
this.showCaret = input(true);
|
|
3951
3968
|
this.positionMap = {
|
|
3952
3969
|
'above': { originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom' },
|
|
3953
3970
|
'above-left': { originX: 'center', originY: 'top', overlayX: 'end', overlayY: 'bottom', offsetX: 40 },
|
|
@@ -3962,18 +3979,21 @@ class FwPopoverComponent {
|
|
|
3962
3979
|
'right-above': { originX: 'end', originY: 'center', overlayX: 'start', overlayY: 'bottom', offsetY: 37 },
|
|
3963
3980
|
'right-below': { originX: 'end', originY: 'center', overlayX: 'start', overlayY: 'top', offsetY: -40 },
|
|
3964
3981
|
};
|
|
3965
|
-
|
|
3966
|
-
|
|
3967
|
-
|
|
3968
|
-
|
|
3982
|
+
this.registerEventListeners = effect(() => {
|
|
3983
|
+
const trigger = this.trigger();
|
|
3984
|
+
if (!this.trigger) {
|
|
3985
|
+
return;
|
|
3986
|
+
}
|
|
3969
3987
|
if (this.action === 'mouseenter' && !trigger.onmouseenter) {
|
|
3970
3988
|
trigger.onclick = undefined;
|
|
3971
3989
|
trigger.style.cursor = 'pointer';
|
|
3990
|
+
let timerId;
|
|
3972
3991
|
trigger.onmouseenter = () => {
|
|
3973
|
-
|
|
3992
|
+
timerId = this.openOnDelay();
|
|
3974
3993
|
};
|
|
3975
3994
|
// @ts-expect-error MouseEvent
|
|
3976
3995
|
trigger.onmouseleave = (e) => {
|
|
3996
|
+
window.clearTimeout(timerId);
|
|
3977
3997
|
const relatedTarget = e.relatedTarget;
|
|
3978
3998
|
if (!relatedTarget?.classList.contains('fw-popover-panel') && !relatedTarget?.classList.contains('fw-popover-caret') && !relatedTarget?.classList.contains('cdk-overlay-pane')) {
|
|
3979
3999
|
this.isOpen = false;
|
|
@@ -3987,7 +4007,12 @@ class FwPopoverComponent {
|
|
|
3987
4007
|
this.isOpen = !this.isOpen;
|
|
3988
4008
|
};
|
|
3989
4009
|
}
|
|
3990
|
-
}
|
|
4010
|
+
});
|
|
4011
|
+
}
|
|
4012
|
+
openOnDelay() {
|
|
4013
|
+
return window.setTimeout(() => {
|
|
4014
|
+
this.isOpen = true;
|
|
4015
|
+
}, this.delayMs());
|
|
3991
4016
|
}
|
|
3992
4017
|
backdropClick() {
|
|
3993
4018
|
this.isOpen = false;
|
|
@@ -3998,15 +4023,33 @@ class FwPopoverComponent {
|
|
|
3998
4023
|
}
|
|
3999
4024
|
}
|
|
4000
4025
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwPopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4001
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
4026
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: FwPopoverComponent, selector: "fw-popover", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: false, isRequired: false, transformFunction: null }, trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: false, isRequired: false, transformFunction: null }, action: { classPropertyName: "action", publicName: "action", isSignal: false, isRequired: false, transformFunction: null }, flyoutPanel: { classPropertyName: "flyoutPanel", publicName: "flyoutPanel", isSignal: false, isRequired: false, transformFunction: null }, delay: { classPropertyName: "delay", publicName: "delay", isSignal: true, isRequired: false, transformFunction: null }, showCaret: { classPropertyName: "showCaret", publicName: "showCaret", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"trigger()\"\n [cdkConnectedOverlayOpen]=\"isOpen\"\n [cdkConnectedOverlayHasBackdrop]=\"action==='click'\"\n cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n [cdkConnectedOverlayPositions]=\"[positionMap[position]]\"\n (backdropClick)=\"backdropClick()\"\n (detach)=\"backdropClick()\">\n <fw-popover-panel\n @fadeInFadeOut\n [position]=\"position\"\n (mouseLeave)=\"handlePanelLeave()\"\n [showCaret]=\"showCaret()\">\n <ng-content></ng-content>\n </fw-popover-panel>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1$3.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: FwPopoverPanelComponent, selector: "fw-popover-panel", inputs: ["position", "showCaret"], outputs: ["mouseLeave"] }], animations: [
|
|
4027
|
+
trigger('fadeInFadeOut', [
|
|
4028
|
+
transition(':enter', [
|
|
4029
|
+
style({ opacity: 0 }),
|
|
4030
|
+
animate('150ms', style({ opacity: 1 })),
|
|
4031
|
+
]),
|
|
4032
|
+
transition(':leave', [
|
|
4033
|
+
animate('200ms', style({ opacity: 0 })),
|
|
4034
|
+
]),
|
|
4035
|
+
]),
|
|
4036
|
+
] }); }
|
|
4002
4037
|
}
|
|
4003
4038
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwPopoverComponent, decorators: [{
|
|
4004
4039
|
type: Component,
|
|
4005
|
-
args: [{ selector: 'fw-popover',
|
|
4040
|
+
args: [{ selector: 'fw-popover', animations: [
|
|
4041
|
+
trigger('fadeInFadeOut', [
|
|
4042
|
+
transition(':enter', [
|
|
4043
|
+
style({ opacity: 0 }),
|
|
4044
|
+
animate('150ms', style({ opacity: 1 })),
|
|
4045
|
+
]),
|
|
4046
|
+
transition(':leave', [
|
|
4047
|
+
animate('200ms', style({ opacity: 0 })),
|
|
4048
|
+
]),
|
|
4049
|
+
]),
|
|
4050
|
+
], template: "<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"trigger()\"\n [cdkConnectedOverlayOpen]=\"isOpen\"\n [cdkConnectedOverlayHasBackdrop]=\"action==='click'\"\n cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n [cdkConnectedOverlayPositions]=\"[positionMap[position]]\"\n (backdropClick)=\"backdropClick()\"\n (detach)=\"backdropClick()\">\n <fw-popover-panel\n @fadeInFadeOut\n [position]=\"position\"\n (mouseLeave)=\"handlePanelLeave()\"\n [showCaret]=\"showCaret()\">\n <ng-content></ng-content>\n </fw-popover-panel>\n</ng-template>\n" }]
|
|
4006
4051
|
}], propDecorators: { position: [{
|
|
4007
4052
|
type: Input
|
|
4008
|
-
}], trigger: [{
|
|
4009
|
-
type: Input
|
|
4010
4053
|
}], isOpen: [{
|
|
4011
4054
|
type: Input
|
|
4012
4055
|
}], action: [{
|
|
@@ -4084,6 +4127,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
4084
4127
|
args: ['mouseleave', ['$event']]
|
|
4085
4128
|
}] } });
|
|
4086
4129
|
|
|
4130
|
+
/* eslint-disable @rx-angular/prefer-no-layout-sensitive-apis */
|
|
4131
|
+
const delayMap = {
|
|
4132
|
+
'none': 0,
|
|
4133
|
+
'short': 400,
|
|
4134
|
+
'long': 700,
|
|
4135
|
+
};
|
|
4136
|
+
/**
|
|
4137
|
+
* component for giving extra context when a user hovers something
|
|
4138
|
+
* @see [Vision Docs](https://cdn.flywheel.io/docs/vision/master/?path=/docs/components-tooltip--docs)
|
|
4139
|
+
*/
|
|
4087
4140
|
class FwTooltipComponent {
|
|
4088
4141
|
constructor() {
|
|
4089
4142
|
this.color = 'light';
|
|
@@ -4091,6 +4144,8 @@ class FwTooltipComponent {
|
|
|
4091
4144
|
this.maxWidth = 200;
|
|
4092
4145
|
this.fullWidth = false;
|
|
4093
4146
|
this.isOpen = false;
|
|
4147
|
+
this.delay = input('short');
|
|
4148
|
+
this.delayMs = computed(() => delayMap[this.delay()]);
|
|
4094
4149
|
this.positionMap = {
|
|
4095
4150
|
'none': { originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom', offsetY: 3 },
|
|
4096
4151
|
'above': { originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom', offsetY: 3 },
|
|
@@ -4103,12 +4158,44 @@ class FwTooltipComponent {
|
|
|
4103
4158
|
return ['fw-tooltip', this.fullWidth ? 'full-width' : null].filter(Boolean).join(' ');
|
|
4104
4159
|
}
|
|
4105
4160
|
;
|
|
4161
|
+
handleMouseEnter() {
|
|
4162
|
+
this.openDelayTimer = window.setTimeout(() => {
|
|
4163
|
+
this.isOpen = true;
|
|
4164
|
+
this.openDelayTimer = null;
|
|
4165
|
+
}, this.delayMs());
|
|
4166
|
+
}
|
|
4167
|
+
handleMouseLeave() {
|
|
4168
|
+
if (this.openDelayTimer) {
|
|
4169
|
+
window.clearTimeout(this.openDelayTimer);
|
|
4170
|
+
}
|
|
4171
|
+
this.isOpen = false;
|
|
4172
|
+
}
|
|
4106
4173
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4107
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
4174
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: FwTooltipComponent, selector: "fw-tooltip", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: false, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: false, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: false, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: false, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: false, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: false, isRequired: false, transformFunction: null }, trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: false, isRequired: false, transformFunction: null }, delay: { classPropertyName: "delay", publicName: "delay", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.class": "this.classes" } }, ngImport: i0, template: "<ng-template\n @fadeInFadeOut\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"isOpen\"\n [cdkConnectedOverlayPositions]=\"[positionMap[position]]\">\n <fw-tooltip-panel\n *ngIf=\"title\"\n [position]=\"position\"\n [color]=\"color\"\n [maxWidth]=\"maxWidth\">\n <h5 class=\"vision-h5\">{{ title }}</h5>\n </fw-tooltip-panel>\n</ng-template>\n\n<div\n title=\"\" [ngClass]=\"['tooltip-trigger',fullWidth?'full-width':'']\"\n cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\"\n (mouseenter)=\"handleMouseEnter()\" (mouseleave)=\"handleMouseLeave()\">\n <ng-content></ng-content>\n</div>\n", styles: [":host.full-width{flex:1;display:flex;width:stretch}:host.full-width button{flex:1}:host .tooltip-trigger{width:fit-content;display:inline-block}:host .tooltip-trigger.full-width{flex:1;display:flex;width:stretch}:host .tooltip-trigger.full-width button{flex:1}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$3.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: FwTooltipPanelComponent, selector: "fw-tooltip-panel", inputs: ["position", "color", "maxWidth"], outputs: ["mouseLeave"] }], animations: [
|
|
4175
|
+
trigger('fadeInFadeOut', [
|
|
4176
|
+
transition(':enter', [
|
|
4177
|
+
style({ opacity: 0 }),
|
|
4178
|
+
animate('150ms', style({ opacity: 1 })),
|
|
4179
|
+
]),
|
|
4180
|
+
transition(':leave', [
|
|
4181
|
+
animate('200ms', style({ opacity: 0 })),
|
|
4182
|
+
]),
|
|
4183
|
+
]),
|
|
4184
|
+
] }); }
|
|
4108
4185
|
}
|
|
4109
4186
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwTooltipComponent, decorators: [{
|
|
4110
4187
|
type: Component,
|
|
4111
|
-
args: [{ selector: 'fw-tooltip',
|
|
4188
|
+
args: [{ selector: 'fw-tooltip', animations: [
|
|
4189
|
+
trigger('fadeInFadeOut', [
|
|
4190
|
+
transition(':enter', [
|
|
4191
|
+
style({ opacity: 0 }),
|
|
4192
|
+
animate('150ms', style({ opacity: 1 })),
|
|
4193
|
+
]),
|
|
4194
|
+
transition(':leave', [
|
|
4195
|
+
animate('200ms', style({ opacity: 0 })),
|
|
4196
|
+
]),
|
|
4197
|
+
]),
|
|
4198
|
+
], template: "<ng-template\n @fadeInFadeOut\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"isOpen\"\n [cdkConnectedOverlayPositions]=\"[positionMap[position]]\">\n <fw-tooltip-panel\n *ngIf=\"title\"\n [position]=\"position\"\n [color]=\"color\"\n [maxWidth]=\"maxWidth\">\n <h5 class=\"vision-h5\">{{ title }}</h5>\n </fw-tooltip-panel>\n</ng-template>\n\n<div\n title=\"\" [ngClass]=\"['tooltip-trigger',fullWidth?'full-width':'']\"\n cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\"\n (mouseenter)=\"handleMouseEnter()\" (mouseleave)=\"handleMouseLeave()\">\n <ng-content></ng-content>\n</div>\n", styles: [":host.full-width{flex:1;display:flex;width:stretch}:host.full-width button{flex:1}:host .tooltip-trigger{width:fit-content;display:inline-block}:host .tooltip-trigger.full-width{flex:1;display:flex;width:stretch}:host .tooltip-trigger.full-width button{flex:1}\n"] }]
|
|
4112
4199
|
}], propDecorators: { title: [{
|
|
4113
4200
|
type: Input
|
|
4114
4201
|
}], color: [{
|
|
@@ -4269,7 +4356,7 @@ class FwMenuContainerComponent {
|
|
|
4269
4356
|
const shouldBeHidden = !this.filteredMenuItems.includes(menuItem);
|
|
4270
4357
|
menuItem.hidden = shouldBeHidden;
|
|
4271
4358
|
});
|
|
4272
|
-
this.noResults.set(allMenuItems.every(item => item.hidden));
|
|
4359
|
+
this.noResults.set(allMenuItems.length > 0 && allMenuItems.every(item => item.hidden));
|
|
4273
4360
|
this.filteredMenuItemChange.emit(this.filteredMenuItems);
|
|
4274
4361
|
}
|
|
4275
4362
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwMenuContainerComponent, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
@@ -4442,7 +4529,7 @@ class FwNavbarSubItemComponent {
|
|
|
4442
4529
|
this.selected = false;
|
|
4443
4530
|
}
|
|
4444
4531
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwNavbarSubItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4445
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FwNavbarSubItemComponent, selector: "fw-navbar-sub-item", inputs: { value: "value", title: "title", description: "description", icon: "icon", disabled: "disabled", hidden: "hidden", tooltipText: "tooltipText", showTooltip: "showTooltip", href: "href", target: "target", collapsed: "collapsed", selected: "selected" }, host: { properties: { "class.collapsed": "this.collapsed", "class.selected": "this.selected" } }, ngImport: i0, template: "<div\n *ngIf=\"!hidden\"\n [@openClose]=\"{value: collapsed?'closed':'open'}\">\n <a [href]=\"href?href:'javascript:void(0)'\" [target]=\"target?target:''\">\n <fw-tooltip [title]=\"showTooltip ? tooltipText || title : ''\" position=\"right\" [fullWidth]=\"true\">\n <div\n [ngClass]=\"['navbar-sub-item', disabled?'disabled':'']\"\n [class.disabled]=\"disabled\">\n <div class=\"navbar-text\" *ngIf=\"title\">\n <h5>{{ title }}</h5>\n <p *ngIf=\"description\" class=\"vision-p4 description\">{{ description }}</p>\n </div>\n <div class=\"key-text vision-p2\">\n <ng-content select=\"p\"></ng-content>\n <ng-content select=\"fw-badge\"></ng-content>\n <ng-content select=\"fw-icon\"></ng-content>\n <ng-content select=\"fw-icon-button\"></ng-content>\n </div>\n </div>\n </fw-tooltip>\n </a>\n</div>\n", styles: [":host{position:relative;display:flex;flex-direction:column}:host a{text-decoration:none;color:var(--typography-base);outline:none;display:flex;flex:1;max-width:100%}:host h5{text-overflow:ellipsis}:host:hover .navbar-sub-item:not(.disabled),:host.focused:not(.selected) .navbar-sub-item:not(.disabled){background-color:var(--primary-hover);cursor:pointer}:host:hover .navbar-sub-item:not(.disabled) .navbar-icon,:host.focused:not(.selected) .navbar-sub-item:not(.disabled) .navbar-icon{color:var(--primary-base)}:host:hover .navbar-sub-item:not(.disabled) .navbar-text h5,:host.focused:not(.selected) .navbar-sub-item:not(.disabled) .navbar-text h5{color:var(--typography-base)}:host.selected .navbar-sub-item{background-color:var(--primary-hover);cursor:pointer}:host.selected .navbar-sub-item .navbar-icon{color:var(--primary-base)}:host.selected .navbar-sub-item .navbar-text h5{color:var(--typography-base)}:host.selected .navbar-sub-item:before{position:absolute;content:\" \";height:16px;border-left:3px solid var(--primary-base);margin-left:-16px}:host.collapsed .navbar-sub-item{container-name:navbaritem;container-type:size}:host fw-tooltip{display:flex;flex-direction:row;flex:1;width:stretch}:host fw-tooltip .tooltip-trigger{display:flex;flex-direction:row;flex:1;width:stretch}:host .navbar-sub-item{box-sizing:border-box;display:flex;flex-direction:row;align-items:center;flex:1;gap:8px;padding:8px 16px;border-radius:6px;margin:1px 4px;color:var(--typography-muted);height:30px;width:stretch;cursor:pointer}:host .navbar-sub-item .navbar-icon{font-size:18px;white-space:nowrap}:host .navbar-sub-item .navbar-text{flex:1;overflow:hidden;padding:2px 0 2px 26px}:host .navbar-sub-item .navbar-text h5{margin:0;color:var(--typography-muted);white-space:nowrap;overflow:hidden}:host .navbar-sub-item .navbar-text p{margin:0}:host .navbar-sub-item .navbar-text p.description{color:var(--typography-light)}:host .navbar-sub-item .key-text{display:flex;align-items:center;gap:8px;color:var(--typography-light)}:host .navbar-sub-item .key-text fw-icon-button{min-height:22px!important;min-width:22px!important}:host .navbar-sub-item.disabled{opacity:.4;cursor:not-allowed}@container navbaritem (max-width: 60px){.navbar-sub-item{gap:0}.navbar-sub-item .navbar-text{opacity:0}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FwTooltipComponent, selector: "fw-tooltip", inputs: ["title", "color", "position", "maxWidth", "fullWidth", "isOpen", "trigger"] }], animations: [
|
|
4532
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FwNavbarSubItemComponent, selector: "fw-navbar-sub-item", inputs: { value: "value", title: "title", description: "description", icon: "icon", disabled: "disabled", hidden: "hidden", tooltipText: "tooltipText", showTooltip: "showTooltip", href: "href", target: "target", collapsed: "collapsed", selected: "selected" }, host: { properties: { "class.collapsed": "this.collapsed", "class.selected": "this.selected" } }, ngImport: i0, template: "<div\n *ngIf=\"!hidden\"\n [@openClose]=\"{value: collapsed?'closed':'open'}\">\n <a [href]=\"href?href:'javascript:void(0)'\" [target]=\"target?target:''\">\n <fw-tooltip [title]=\"showTooltip ? tooltipText || title : ''\" position=\"right\" [fullWidth]=\"true\">\n <div\n [ngClass]=\"['navbar-sub-item', disabled?'disabled':'']\"\n [class.disabled]=\"disabled\">\n <div class=\"navbar-text\" *ngIf=\"title\">\n <h5>{{ title }}</h5>\n <p *ngIf=\"description\" class=\"vision-p4 description\">{{ description }}</p>\n </div>\n <div class=\"key-text vision-p2\">\n <ng-content select=\"p\"></ng-content>\n <ng-content select=\"fw-badge\"></ng-content>\n <ng-content select=\"fw-icon\"></ng-content>\n <ng-content select=\"fw-icon-button\"></ng-content>\n </div>\n </div>\n </fw-tooltip>\n </a>\n</div>\n", styles: [":host{position:relative;display:flex;flex-direction:column}:host a{text-decoration:none;color:var(--typography-base);outline:none;display:flex;flex:1;max-width:100%}:host h5{text-overflow:ellipsis}:host:hover .navbar-sub-item:not(.disabled),:host.focused:not(.selected) .navbar-sub-item:not(.disabled){background-color:var(--primary-hover);cursor:pointer}:host:hover .navbar-sub-item:not(.disabled) .navbar-icon,:host.focused:not(.selected) .navbar-sub-item:not(.disabled) .navbar-icon{color:var(--primary-base)}:host:hover .navbar-sub-item:not(.disabled) .navbar-text h5,:host.focused:not(.selected) .navbar-sub-item:not(.disabled) .navbar-text h5{color:var(--typography-base)}:host.selected .navbar-sub-item{background-color:var(--primary-hover);cursor:pointer}:host.selected .navbar-sub-item .navbar-icon{color:var(--primary-base)}:host.selected .navbar-sub-item .navbar-text h5{color:var(--typography-base)}:host.selected .navbar-sub-item:before{position:absolute;content:\" \";height:16px;border-left:3px solid var(--primary-base);margin-left:-16px}:host.collapsed .navbar-sub-item{container-name:navbaritem;container-type:size}:host fw-tooltip{display:flex;flex-direction:row;flex:1;width:stretch}:host fw-tooltip .tooltip-trigger{display:flex;flex-direction:row;flex:1;width:stretch}:host .navbar-sub-item{box-sizing:border-box;display:flex;flex-direction:row;align-items:center;flex:1;gap:8px;padding:8px 16px;border-radius:6px;margin:1px 4px;color:var(--typography-muted);height:30px;width:stretch;cursor:pointer}:host .navbar-sub-item .navbar-icon{font-size:18px;white-space:nowrap}:host .navbar-sub-item .navbar-text{flex:1;overflow:hidden;padding:2px 0 2px 26px}:host .navbar-sub-item .navbar-text h5{margin:0;color:var(--typography-muted);white-space:nowrap;overflow:hidden}:host .navbar-sub-item .navbar-text p{margin:0}:host .navbar-sub-item .navbar-text p.description{color:var(--typography-light)}:host .navbar-sub-item .key-text{display:flex;align-items:center;gap:8px;color:var(--typography-light)}:host .navbar-sub-item .key-text fw-icon-button{min-height:22px!important;min-width:22px!important}:host .navbar-sub-item.disabled{opacity:.4;cursor:not-allowed}@container navbaritem (max-width: 60px){.navbar-sub-item{gap:0}.navbar-sub-item .navbar-text{opacity:0}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FwTooltipComponent, selector: "fw-tooltip", inputs: ["title", "color", "position", "maxWidth", "fullWidth", "isOpen", "trigger", "delay"] }], animations: [
|
|
4446
4533
|
trigger('openClose', [
|
|
4447
4534
|
// ...
|
|
4448
4535
|
state('open', style({
|
|
@@ -4547,7 +4634,7 @@ class FwNavbarItemComponent {
|
|
|
4547
4634
|
return false;
|
|
4548
4635
|
}
|
|
4549
4636
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwNavbarItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4550
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FwNavbarItemComponent, selector: "fw-navbar-item", inputs: { value: "value", title: "title", description: "description", icon: "icon", iconColor: "iconColor", disabled: "disabled", hidden: "hidden", tooltipText: "tooltipText", showTooltip: "showTooltip", collapsed: "collapsed", href: "href", target: "target", subItemsOpen: "subItemsOpen", subItemsTooltipTitle: "subItemsTooltipTitle", selected: "selected" }, host: { properties: { "class.collapsed": "this.collapsed", "class.selected": "this.selected" } }, queries: [{ propertyName: "subItems", predicate: FwNavbarSubItemComponent }], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"!hidden\">\n <a [href]=\"href?href:'javascript:void(0)'\" [target]=\"target?target:''\">\n <fw-tooltip [title]=\"showTooltip ? tooltipText || title : ''\" position=\"right\" [fullWidth]=\"true\">\n <div\n [ngClass]=\"['navbar-item', disabled?'disabled':'']\"\n [class.disabled]=\"disabled\">\n <fw-icon [color]=\"iconColor\" *ngIf=\"icon\" class=\"navbar-icon {{iconColor}}\">{{ icon }}</fw-icon>\n <ng-content select=\"fw-avatar\"></ng-content>\n <div class=\"navbar-text\" *ngIf=\"title\">\n <h5 class=\"vision-h5\">{{ title }}</h5>\n <p *ngIf=\"description\" class=\"vision-p4 description\">{{ description }}</p>\n </div>\n <div class=\"key-text vision-p2\">\n <ng-content select=\"p\"></ng-content>\n <ng-content select=\"fw-badge\"></ng-content>\n <ng-content select=\"fw-icon\"></ng-content>\n <ng-content select=\"fw-icon-button\"></ng-content>\n <fw-tooltip\n *ngIf=\"subItems.length>0 && !collapsed\"\n [title]=\"subItemsTooltipTitle\"\n position=\"right\">\n <fw-icon-button\n [size]=\"'small'\"\n [icon]=\"subItemsOpen?'chevron-up':'chevron-down'\"\n (click)=\"toggleSubItemsView($event)\">\n </fw-icon-button>\n </fw-tooltip>\n </div>\n </div>\n </fw-tooltip>\n </a>\n</div>\n<div class=\"item-subitems\">\n <ng-content select=\"fw-navbar-sub-item\"></ng-content>\n</div>\n", styles: [":host{position:relative;display:flex;flex-direction:column}:host a{text-decoration:none;color:var(--typography-base);outline:none;display:flex;flex:1;max-width:100%}:host h5{text-overflow:ellipsis}:host:hover:not(.selected) .navbar-item:not(.disabled),:host.focused:not(.selected) .navbar-item:not(.disabled){background-color:var(--primary-hover);cursor:pointer}:host:hover:not(.selected) .navbar-item:not(.disabled) .navbar-text h5,:host.focused:not(.selected) .navbar-item:not(.disabled) .navbar-text h5{color:var(--typography-base)}:host.selected .navbar-item{background-color:var(--primary-hover);cursor:pointer}:host.selected .navbar-item .navbar-icon{color:var(--primary-base)}:host.selected .navbar-item .navbar-text h5{color:var(--typography-base)}:host.selected .navbar-item:before{position:absolute;content:\" \";height:16px;border-left:3px solid var(--primary-base);margin-left:-16px}:host.collapsed .navbar-item{container-name:navbaritem;container-type:size}:host .navbar-item{box-sizing:border-box;display:flex;flex-direction:row;align-items:center;flex:1;gap:8px;padding:8px 16px;border-radius:6px;margin:1px 4px;color:var(--typography-muted);height:34px;width:stretch;cursor:pointer}:host .navbar-item .navbar-icon{font-size:18px;width:18px;max-width:18px;white-space:nowrap}:host .navbar-item .navbar-text{flex:1;overflow:hidden;padding:2px 0}:host .navbar-item .navbar-text h5{margin:0;color:var(--typography-muted);white-space:nowrap;overflow:hidden}:host .navbar-item .navbar-text p{margin:0}:host .navbar-item .navbar-text p.description{color:var(--typography-light)}:host .navbar-item .key-text{display:flex;align-items:center;gap:8px;color:var(--typography-light)}:host .navbar-item .key-text fw-icon-button{min-height:22px!important;min-width:22px!important;margin-top:2px;margin-right:-4px}:host .navbar-item.disabled{opacity:.4;cursor:not-allowed}:host .item-subitems{display:flex;flex-direction:column}@container navbaritem (max-width: 60px){.navbar-item{gap:0}.navbar-item .navbar-text{opacity:0}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FwIconButtonComponent, selector: "fw-icon-button", inputs: ["color", "icon", "size", "disabled", "selected"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }, { kind: "component", type: FwTooltipComponent, selector: "fw-tooltip", inputs: ["title", "color", "position", "maxWidth", "fullWidth", "isOpen", "trigger"] }] }); }
|
|
4637
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FwNavbarItemComponent, selector: "fw-navbar-item", inputs: { value: "value", title: "title", description: "description", icon: "icon", iconColor: "iconColor", disabled: "disabled", hidden: "hidden", tooltipText: "tooltipText", showTooltip: "showTooltip", collapsed: "collapsed", href: "href", target: "target", subItemsOpen: "subItemsOpen", subItemsTooltipTitle: "subItemsTooltipTitle", selected: "selected" }, host: { properties: { "class.collapsed": "this.collapsed", "class.selected": "this.selected" } }, queries: [{ propertyName: "subItems", predicate: FwNavbarSubItemComponent }], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"!hidden\">\n <a [href]=\"href?href:'javascript:void(0)'\" [target]=\"target?target:''\">\n <fw-tooltip [title]=\"showTooltip ? tooltipText || title : ''\" position=\"right\" [fullWidth]=\"true\">\n <div\n [ngClass]=\"['navbar-item', disabled?'disabled':'']\"\n [class.disabled]=\"disabled\">\n <fw-icon [color]=\"iconColor\" *ngIf=\"icon\" class=\"navbar-icon {{iconColor}}\">{{ icon }}</fw-icon>\n <ng-content select=\"fw-avatar\"></ng-content>\n <div class=\"navbar-text\" *ngIf=\"title\">\n <h5 class=\"vision-h5\">{{ title }}</h5>\n <p *ngIf=\"description\" class=\"vision-p4 description\">{{ description }}</p>\n </div>\n <div class=\"key-text vision-p2\">\n <ng-content select=\"p\"></ng-content>\n <ng-content select=\"fw-badge\"></ng-content>\n <ng-content select=\"fw-icon\"></ng-content>\n <ng-content select=\"fw-icon-button\"></ng-content>\n <fw-tooltip\n *ngIf=\"subItems.length>0 && !collapsed\"\n [title]=\"subItemsTooltipTitle\"\n position=\"right\">\n <fw-icon-button\n [size]=\"'small'\"\n [icon]=\"subItemsOpen?'chevron-up':'chevron-down'\"\n (click)=\"toggleSubItemsView($event)\">\n </fw-icon-button>\n </fw-tooltip>\n </div>\n </div>\n </fw-tooltip>\n </a>\n</div>\n<div class=\"item-subitems\">\n <ng-content select=\"fw-navbar-sub-item\"></ng-content>\n</div>\n", styles: [":host{position:relative;display:flex;flex-direction:column}:host a{text-decoration:none;color:var(--typography-base);outline:none;display:flex;flex:1;max-width:100%}:host h5{text-overflow:ellipsis}:host:hover:not(.selected) .navbar-item:not(.disabled),:host.focused:not(.selected) .navbar-item:not(.disabled){background-color:var(--primary-hover);cursor:pointer}:host:hover:not(.selected) .navbar-item:not(.disabled) .navbar-text h5,:host.focused:not(.selected) .navbar-item:not(.disabled) .navbar-text h5{color:var(--typography-base)}:host.selected .navbar-item{background-color:var(--primary-hover);cursor:pointer}:host.selected .navbar-item .navbar-icon{color:var(--primary-base)}:host.selected .navbar-item .navbar-text h5{color:var(--typography-base)}:host.selected .navbar-item:before{position:absolute;content:\" \";height:16px;border-left:3px solid var(--primary-base);margin-left:-16px}:host.collapsed .navbar-item{container-name:navbaritem;container-type:size}:host .navbar-item{box-sizing:border-box;display:flex;flex-direction:row;align-items:center;flex:1;gap:8px;padding:8px 16px;border-radius:6px;margin:1px 4px;color:var(--typography-muted);height:34px;width:stretch;cursor:pointer}:host .navbar-item .navbar-icon{font-size:18px;width:18px;max-width:18px;white-space:nowrap}:host .navbar-item .navbar-text{flex:1;overflow:hidden;padding:2px 0}:host .navbar-item .navbar-text h5{margin:0;color:var(--typography-muted);white-space:nowrap;overflow:hidden}:host .navbar-item .navbar-text p{margin:0}:host .navbar-item .navbar-text p.description{color:var(--typography-light)}:host .navbar-item .key-text{display:flex;align-items:center;gap:8px;color:var(--typography-light)}:host .navbar-item .key-text fw-icon-button{min-height:22px!important;min-width:22px!important;margin-top:2px;margin-right:-4px}:host .navbar-item.disabled{opacity:.4;cursor:not-allowed}:host .item-subitems{display:flex;flex-direction:column}@container navbaritem (max-width: 60px){.navbar-item{gap:0}.navbar-item .navbar-text{opacity:0}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FwIconButtonComponent, selector: "fw-icon-button", inputs: ["color", "icon", "size", "disabled", "selected"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }, { kind: "component", type: FwTooltipComponent, selector: "fw-tooltip", inputs: ["title", "color", "position", "maxWidth", "fullWidth", "isOpen", "trigger", "delay"] }] }); }
|
|
4551
4638
|
}
|
|
4552
4639
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwNavbarItemComponent, decorators: [{
|
|
4553
4640
|
type: Component,
|