@flywheel-io/vision 19.3.3 → 19.4.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.
|
@@ -6,18 +6,19 @@ export type SimplePosition = 'above' | 'below' | 'left' | 'right';
|
|
|
6
6
|
export declare class FwTooltipPanelComponent {
|
|
7
7
|
animation: any;
|
|
8
8
|
trigger: import("@angular/core").InputSignalWithTransform<CdkOverlayOrigin, ElementRef<HTMLElement> | CdkOverlayOrigin>;
|
|
9
|
-
title: string
|
|
9
|
+
title: import("@angular/core").InputSignal<string>;
|
|
10
10
|
isOpen: import("@angular/core").InputSignal<boolean>;
|
|
11
11
|
position: import("@angular/core").InputSignal<SimplePosition>;
|
|
12
12
|
connectedPosition: import("@angular/core").Signal<ConnectedPosition[]>;
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
13
|
+
positionClass: import("@angular/core").Signal<string>;
|
|
14
|
+
color: import("@angular/core").InputSignal<"dark" | "light">;
|
|
15
|
+
maxWidth: import("@angular/core").InputSignal<number>;
|
|
16
|
+
displayCaret: import("@angular/core").InputSignal<boolean>;
|
|
17
17
|
delay: import("@angular/core").InputSignal<DelayLength>;
|
|
18
18
|
delayMs: import("@angular/core").Signal<number>;
|
|
19
|
-
|
|
19
|
+
contentClass: import("@angular/core").InputSignal<string>;
|
|
20
|
+
mouseLeave: EventEmitter<MouseEvent>;
|
|
20
21
|
hidePopover(e: MouseEvent): void;
|
|
21
22
|
static ɵfac: i0.ɵɵFactoryDeclaration<FwTooltipPanelComponent, never>;
|
|
22
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<FwTooltipPanelComponent, "fw-tooltip-panel", never, { "trigger": { "alias": "trigger"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; }; "isOpen": { "alias": "isOpen"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; }; "maxWidth": { "alias": "maxWidth"; "required": false; }; "displayCaret": { "alias": "displayCaret"; "required": false; }; "delay": { "alias": "delay"; "required": false; "isSignal": true; }; }, { "mouseLeave": "mouseLeave"; }, never, ["*"], true, never>;
|
|
23
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<FwTooltipPanelComponent, "fw-tooltip-panel", never, { "trigger": { "alias": "trigger"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "isOpen": { "alias": "isOpen"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "maxWidth": { "alias": "maxWidth"; "required": false; "isSignal": true; }; "displayCaret": { "alias": "displayCaret"; "required": false; "isSignal": true; }; "delay": { "alias": "delay"; "required": false; "isSignal": true; }; "contentClass": { "alias": "contentClass"; "required": false; "isSignal": true; }; }, { "mouseLeave": "mouseLeave"; }, never, ["*"], true, never>;
|
|
23
24
|
}
|
|
@@ -6,7 +6,7 @@ import * as i0 from "@angular/core";
|
|
|
6
6
|
type DelayLength = 'none' | 'short' | 'long';
|
|
7
7
|
/**
|
|
8
8
|
* Directive for displaying extra context on hover
|
|
9
|
-
* @see [Vision
|
|
9
|
+
* @see [Vision Storybook](https://cdn.flywheel.io/docs/vision/master/?path=/docs/components-tooltip--docs)
|
|
10
10
|
*/
|
|
11
11
|
export declare class FwTooltipDirective implements OnInit, OnDestroy {
|
|
12
12
|
/***** External Context *****/
|
|
@@ -31,6 +31,10 @@ export declare class FwTooltipDirective implements OnInit, OnDestroy {
|
|
|
31
31
|
* maximum width of the tooltip in pixels
|
|
32
32
|
*/
|
|
33
33
|
maxWidth: import("@angular/core").ModelSignal<number>;
|
|
34
|
+
/**
|
|
35
|
+
* Custom class to apply to the content of the tooltip
|
|
36
|
+
*/
|
|
37
|
+
contentClass: import("@angular/core").ModelSignal<string>;
|
|
34
38
|
/**
|
|
35
39
|
* amount of delay before the tooltip displays
|
|
36
40
|
*
|
|
@@ -58,6 +62,6 @@ export declare class FwTooltipDirective implements OnInit, OnDestroy {
|
|
|
58
62
|
hideTooltip(): void;
|
|
59
63
|
ngOnDestroy(): void;
|
|
60
64
|
static ɵfac: i0.ɵɵFactoryDeclaration<FwTooltipDirective, never>;
|
|
61
|
-
static ɵdir: i0.ɵɵDirectiveDeclaration<FwTooltipDirective, "[fwTooltip]", never, { "title": { "alias": "fwTooltip"; "required": false; "isSignal": true; }; "position": { "alias": "fwTooltipPosition"; "required": false; "isSignal": true; }; "maxWidth": { "alias": "fwTooltipMaxWidthPx"; "required": false; "isSignal": true; }; "delayMs": { "alias": "fwTooltipDelay"; "required": false; "isSignal": true; }; "displayCaret": { "alias": "fwTooltipCaret"; "required": false; "isSignal": true; }; "enabled": { "alias": "fwTooltipEnabled"; "required": false; "isSignal": true; }; }, { "title": "fwTooltipChange"; "position": "fwTooltipPositionChange"; "maxWidth": "fwTooltipMaxWidthPxChange"; "enabled": "fwTooltipEnabledChange"; }, never, never, true, never>;
|
|
65
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<FwTooltipDirective, "[fwTooltip]", never, { "title": { "alias": "fwTooltip"; "required": false; "isSignal": true; }; "position": { "alias": "fwTooltipPosition"; "required": false; "isSignal": true; }; "maxWidth": { "alias": "fwTooltipMaxWidthPx"; "required": false; "isSignal": true; }; "contentClass": { "alias": "fwTooltipClass"; "required": false; "isSignal": true; }; "delayMs": { "alias": "fwTooltipDelay"; "required": false; "isSignal": true; }; "displayCaret": { "alias": "fwTooltipCaret"; "required": false; "isSignal": true; }; "enabled": { "alias": "fwTooltipEnabled"; "required": false; "isSignal": true; }; }, { "title": "fwTooltipChange"; "position": "fwTooltipPositionChange"; "maxWidth": "fwTooltipMaxWidthPxChange"; "contentClass": "fwTooltipClassChange"; "enabled": "fwTooltipEnabledChange"; }, never, never, true, never>;
|
|
62
66
|
}
|
|
63
67
|
export {};
|
|
@@ -920,25 +920,24 @@ class FwTooltipPanelComponent {
|
|
|
920
920
|
return unparsed;
|
|
921
921
|
},
|
|
922
922
|
});
|
|
923
|
-
this.title = '';
|
|
923
|
+
this.title = input('');
|
|
924
924
|
this.isOpen = input(false);
|
|
925
925
|
this.position = input('below');
|
|
926
926
|
this.connectedPosition = computed(() => [positionMap$1[this.position()]]);
|
|
927
|
-
this.
|
|
928
|
-
this.
|
|
929
|
-
this.
|
|
930
|
-
this.
|
|
927
|
+
this.positionClass = computed(() => `fw-tooltip-${this.position()}`);
|
|
928
|
+
this.color = input('dark');
|
|
929
|
+
this.maxWidth = input(200);
|
|
930
|
+
this.displayCaret = input(true);
|
|
931
931
|
this.delay = input('short');
|
|
932
932
|
this.delayMs = computed(() => delayMap$1[this.delay()]);
|
|
933
|
-
|
|
934
|
-
|
|
935
|
-
return ['fw-tooltip-panel', 'fw-tooltip-' + this.position].join(' ');
|
|
933
|
+
this.contentClass = input('');
|
|
934
|
+
this.mouseLeave = new EventEmitter();
|
|
936
935
|
}
|
|
937
936
|
hidePopover(e) {
|
|
938
937
|
this.mouseLeave.emit(e);
|
|
939
938
|
}
|
|
940
939
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: FwTooltipPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
941
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: FwTooltipPanelComponent, isStandalone: true, selector: "fw-tooltip-panel", inputs: { trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal:
|
|
940
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: FwTooltipPanelComponent, isStandalone: true, selector: "fw-tooltip-panel", inputs: { trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, displayCaret: { classPropertyName: "displayCaret", publicName: "displayCaret", isSignal: true, isRequired: false, transformFunction: null }, delay: { classPropertyName: "delay", publicName: "delay", isSignal: true, isRequired: false, transformFunction: null }, contentClass: { classPropertyName: "contentClass", publicName: "contentClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { mouseLeave: "mouseLeave" }, host: { listeners: { "mouseleave": "hidePopover($event)" }, properties: { "class.fw-tooltip-panel": "true", "class": "positionClass()", "@fadeInFadeOut": "this.animation" } }, ngImport: i0, template: "<div\n class=\"fw-tooltip-content-wrapper vision-dark-theme\"\n [ngClass]=\"'fw-tooltip-' + position()\"\n [ngStyle]=\"{'maxWidth': maxWidth()+'px'}\">\n <ng-content></ng-content>\n <h5 [ngClass]=\"contentClass()\" class=\"vision-h5\">{{ title() }}</h5>\n @if (displayCaret()) {\n <div class=\"fw-tooltip-caret\"></div>\n }\n</div>\n", styles: [".fw-tooltip-content-wrapper{display:inline-block;position:relative;border-radius:8px;border:1px solid var(--separations-border);min-width:60px;box-sizing:border-box;padding:4px 8px;background-color:var(--card-header);text-align:center;overflow-wrap:break-word;white-space:pre-wrap}.fw-tooltip-content-wrapper h5{margin:0!important;color:var(--typography-muted)}.fw-tooltip-content-wrapper .fw-tooltip-caret{position:absolute;overflow:hidden;width:16px;height:16px}.fw-tooltip-content-wrapper .fw-tooltip-caret:after{display:block;content:\"\";width:10px;height:10px;background:var(--separations-border);border:1px solid var(--separations-border);transform:rotate(45deg);position:relative}.fw-tooltip-content-wrapper.fw-tooltip-none{margin-bottom:10px}.fw-tooltip-content-wrapper.fw-tooltip-none .fw-tooltip-caret{display:none}.fw-tooltip-content-wrapper.fw-tooltip-above{margin-bottom:10px}.fw-tooltip-content-wrapper.fw-tooltip-above .fw-tooltip-caret{left:calc(50% - 8px);bottom:-10px;height:10px!important}.fw-tooltip-content-wrapper.fw-tooltip-above .fw-tooltip-caret:after{margin:-8px auto;width:10px}.fw-tooltip-content-wrapper.fw-tooltip-below{margin-top:10px}.fw-tooltip-content-wrapper.fw-tooltip-below .fw-tooltip-caret{left:calc(50% - 8px);top:-10px;height:10px!important}.fw-tooltip-content-wrapper.fw-tooltip-below .fw-tooltip-caret:after{top:10px;margin:-4px auto;width:10px}.fw-tooltip-content-wrapper.fw-tooltip-left{margin-right:10px}.fw-tooltip-content-wrapper.fw-tooltip-left .fw-tooltip-caret{right:-10px;top:max(50% - 10px,3px);width:10px!important}.fw-tooltip-content-wrapper.fw-tooltip-left .fw-tooltip-caret:after{top:calc(50% - 5px);left:-8px;width:10px}.fw-tooltip-content-wrapper.fw-tooltip-right{margin-left:10px}.fw-tooltip-content-wrapper.fw-tooltip-right .fw-tooltip-caret{left:-10px;top:max(50% - 10px,3px);width:10px!important}.fw-tooltip-content-wrapper.fw-tooltip-right .fw-tooltip-caret:after{top:calc(50% - 5px);right:-6px;width:10px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], animations: [
|
|
942
941
|
trigger('fadeInFadeOut', [
|
|
943
942
|
transition(':enter', [
|
|
944
943
|
style({ opacity: 0 }),
|
|
@@ -948,11 +947,11 @@ class FwTooltipPanelComponent {
|
|
|
948
947
|
animate('200ms', style({ opacity: 0 })),
|
|
949
948
|
]),
|
|
950
949
|
]),
|
|
951
|
-
],
|
|
950
|
+
], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
952
951
|
}
|
|
953
952
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: FwTooltipPanelComponent, decorators: [{
|
|
954
953
|
type: Component,
|
|
955
|
-
args: [{ selector: 'fw-tooltip-panel', encapsulation: ViewEncapsulation.
|
|
954
|
+
args: [{ selector: 'fw-tooltip-panel', encapsulation: ViewEncapsulation.Emulated, animations: [
|
|
956
955
|
trigger('fadeInFadeOut', [
|
|
957
956
|
transition(':enter', [
|
|
958
957
|
style({ opacity: 0 }),
|
|
@@ -962,23 +961,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
962
961
|
animate('200ms', style({ opacity: 0 })),
|
|
963
962
|
]),
|
|
964
963
|
]),
|
|
965
|
-
],
|
|
964
|
+
], host: {
|
|
965
|
+
'[class.fw-tooltip-panel]': 'true',
|
|
966
|
+
'[class]': 'positionClass()',
|
|
967
|
+
}, imports: [NgClass, NgStyle], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"fw-tooltip-content-wrapper vision-dark-theme\"\n [ngClass]=\"'fw-tooltip-' + position()\"\n [ngStyle]=\"{'maxWidth': maxWidth()+'px'}\">\n <ng-content></ng-content>\n <h5 [ngClass]=\"contentClass()\" class=\"vision-h5\">{{ title() }}</h5>\n @if (displayCaret()) {\n <div class=\"fw-tooltip-caret\"></div>\n }\n</div>\n", styles: [".fw-tooltip-content-wrapper{display:inline-block;position:relative;border-radius:8px;border:1px solid var(--separations-border);min-width:60px;box-sizing:border-box;padding:4px 8px;background-color:var(--card-header);text-align:center;overflow-wrap:break-word;white-space:pre-wrap}.fw-tooltip-content-wrapper h5{margin:0!important;color:var(--typography-muted)}.fw-tooltip-content-wrapper .fw-tooltip-caret{position:absolute;overflow:hidden;width:16px;height:16px}.fw-tooltip-content-wrapper .fw-tooltip-caret:after{display:block;content:\"\";width:10px;height:10px;background:var(--separations-border);border:1px solid var(--separations-border);transform:rotate(45deg);position:relative}.fw-tooltip-content-wrapper.fw-tooltip-none{margin-bottom:10px}.fw-tooltip-content-wrapper.fw-tooltip-none .fw-tooltip-caret{display:none}.fw-tooltip-content-wrapper.fw-tooltip-above{margin-bottom:10px}.fw-tooltip-content-wrapper.fw-tooltip-above .fw-tooltip-caret{left:calc(50% - 8px);bottom:-10px;height:10px!important}.fw-tooltip-content-wrapper.fw-tooltip-above .fw-tooltip-caret:after{margin:-8px auto;width:10px}.fw-tooltip-content-wrapper.fw-tooltip-below{margin-top:10px}.fw-tooltip-content-wrapper.fw-tooltip-below .fw-tooltip-caret{left:calc(50% - 8px);top:-10px;height:10px!important}.fw-tooltip-content-wrapper.fw-tooltip-below .fw-tooltip-caret:after{top:10px;margin:-4px auto;width:10px}.fw-tooltip-content-wrapper.fw-tooltip-left{margin-right:10px}.fw-tooltip-content-wrapper.fw-tooltip-left .fw-tooltip-caret{right:-10px;top:max(50% - 10px,3px);width:10px!important}.fw-tooltip-content-wrapper.fw-tooltip-left .fw-tooltip-caret:after{top:calc(50% - 5px);left:-8px;width:10px}.fw-tooltip-content-wrapper.fw-tooltip-right{margin-left:10px}.fw-tooltip-content-wrapper.fw-tooltip-right .fw-tooltip-caret{left:-10px;top:max(50% - 10px,3px);width:10px!important}.fw-tooltip-content-wrapper.fw-tooltip-right .fw-tooltip-caret:after{top:calc(50% - 5px);right:-6px;width:10px}\n"] }]
|
|
966
968
|
}], propDecorators: { animation: [{
|
|
967
969
|
type: HostBinding,
|
|
968
970
|
args: ['@fadeInFadeOut']
|
|
969
|
-
}], title: [{
|
|
970
|
-
type: Input
|
|
971
|
-
}], color: [{
|
|
972
|
-
type: Input
|
|
973
|
-
}], maxWidth: [{
|
|
974
|
-
type: Input
|
|
975
|
-
}], displayCaret: [{
|
|
976
|
-
type: Input
|
|
977
971
|
}], mouseLeave: [{
|
|
978
972
|
type: Output
|
|
979
|
-
}], classes: [{
|
|
980
|
-
type: HostBinding,
|
|
981
|
-
args: ['attr.class']
|
|
982
973
|
}], hidePopover: [{
|
|
983
974
|
type: HostListener,
|
|
984
975
|
args: ['mouseleave', ['$event']]
|
|
@@ -1004,7 +995,7 @@ const positionMap = {
|
|
|
1004
995
|
/* eslint-enable @rx-angular/prefer-no-layout-sensitive-apis */
|
|
1005
996
|
/**
|
|
1006
997
|
* Directive for displaying extra context on hover
|
|
1007
|
-
* @see [Vision
|
|
998
|
+
* @see [Vision Storybook](https://cdn.flywheel.io/docs/vision/master/?path=/docs/components-tooltip--docs)
|
|
1008
999
|
*/
|
|
1009
1000
|
class FwTooltipDirective {
|
|
1010
1001
|
constructor() {
|
|
@@ -1015,6 +1006,7 @@ class FwTooltipDirective {
|
|
|
1015
1006
|
/***** Internal Refs *****/
|
|
1016
1007
|
this.overlayRef = signal(undefined);
|
|
1017
1008
|
this.tooltipRef = signal(undefined);
|
|
1009
|
+
this.tooltipPortal = new ComponentPortal(FwTooltipPanelComponent, this.viewContainerRef);
|
|
1018
1010
|
/***** Inputs *****/
|
|
1019
1011
|
// a lot of these ideally wouldn't be models,
|
|
1020
1012
|
// but it makes it easier to interact with this from derivative directives
|
|
@@ -1039,6 +1031,12 @@ class FwTooltipDirective {
|
|
|
1039
1031
|
this.maxWidth = model(200, {
|
|
1040
1032
|
alias: 'fwTooltipMaxWidthPx',
|
|
1041
1033
|
});
|
|
1034
|
+
/**
|
|
1035
|
+
* Custom class to apply to the content of the tooltip
|
|
1036
|
+
*/
|
|
1037
|
+
this.contentClass = model('', {
|
|
1038
|
+
alias: 'fwTooltipClass',
|
|
1039
|
+
});
|
|
1042
1040
|
/**
|
|
1043
1041
|
* amount of delay before the tooltip displays
|
|
1044
1042
|
*
|
|
@@ -1095,6 +1093,7 @@ class FwTooltipDirective {
|
|
|
1095
1093
|
this.hideTooltip();
|
|
1096
1094
|
});
|
|
1097
1095
|
});
|
|
1096
|
+
this.openDelayTimer = 0;
|
|
1098
1097
|
// updates the tooltip panel's caret position if a fallback position is used
|
|
1099
1098
|
this.handlePositionChange = effect(() => {
|
|
1100
1099
|
this.positionChangeSub?.unsubscribe();
|
|
@@ -1110,13 +1109,11 @@ class FwTooltipDirective {
|
|
|
1110
1109
|
});
|
|
1111
1110
|
if (newPositionName) {
|
|
1112
1111
|
this.tooltipRef()?.setInput('position', newPositionName);
|
|
1113
|
-
this.tooltipRef()?.changeDetectorRef.detectChanges();
|
|
1114
1112
|
}
|
|
1115
1113
|
});
|
|
1116
1114
|
});
|
|
1117
1115
|
}
|
|
1118
1116
|
ngOnInit() {
|
|
1119
|
-
this.tooltipPortal = new ComponentPortal(FwTooltipPanelComponent, this.viewContainerRef);
|
|
1120
1117
|
this.overlayRef.set(this.overlayService.create());
|
|
1121
1118
|
}
|
|
1122
1119
|
showTooltip() {
|
|
@@ -1124,6 +1121,9 @@ class FwTooltipDirective {
|
|
|
1124
1121
|
return;
|
|
1125
1122
|
}
|
|
1126
1123
|
const overlayRef = this.overlayRef();
|
|
1124
|
+
if (!overlayRef) {
|
|
1125
|
+
return;
|
|
1126
|
+
}
|
|
1127
1127
|
overlayRef.updatePositionStrategy(this.positionStrategy());
|
|
1128
1128
|
if (this.openDelayTimer) {
|
|
1129
1129
|
return;
|
|
@@ -1135,12 +1135,12 @@ class FwTooltipDirective {
|
|
|
1135
1135
|
tooltipRef.setInput('position', this.position());
|
|
1136
1136
|
tooltipRef.setInput('maxWidth', this.maxWidth());
|
|
1137
1137
|
tooltipRef.setInput('displayCaret', this.displayCaret());
|
|
1138
|
-
tooltipRef.
|
|
1138
|
+
tooltipRef.setInput('contentClass', this.contentClass());
|
|
1139
1139
|
}, this.delayMs());
|
|
1140
1140
|
}
|
|
1141
1141
|
hideTooltip() {
|
|
1142
1142
|
window.clearTimeout(this.openDelayTimer);
|
|
1143
|
-
this.openDelayTimer =
|
|
1143
|
+
this.openDelayTimer = 0;
|
|
1144
1144
|
this.overlayRef()?.detach();
|
|
1145
1145
|
this.tooltipRef.set(undefined);
|
|
1146
1146
|
}
|
|
@@ -1149,7 +1149,7 @@ class FwTooltipDirective {
|
|
|
1149
1149
|
this.hideTooltip();
|
|
1150
1150
|
}
|
|
1151
1151
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: FwTooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1152
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.18", type: FwTooltipDirective, isStandalone: true, selector: "[fwTooltip]", inputs: { title: { classPropertyName: "title", publicName: "fwTooltip", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "fwTooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "fwTooltipMaxWidthPx", isSignal: true, isRequired: false, transformFunction: null }, delayMs: { classPropertyName: "delayMs", publicName: "fwTooltipDelay", isSignal: true, isRequired: false, transformFunction: null }, displayCaret: { classPropertyName: "displayCaret", publicName: "fwTooltipCaret", isSignal: true, isRequired: false, transformFunction: null }, enabled: { classPropertyName: "enabled", publicName: "fwTooltipEnabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { title: "fwTooltipChange", position: "fwTooltipPositionChange", maxWidth: "fwTooltipMaxWidthPxChange", enabled: "fwTooltipEnabledChange" }, ngImport: i0 }); }
|
|
1152
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.18", type: FwTooltipDirective, isStandalone: true, selector: "[fwTooltip]", inputs: { title: { classPropertyName: "title", publicName: "fwTooltip", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "fwTooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "fwTooltipMaxWidthPx", isSignal: true, isRequired: false, transformFunction: null }, contentClass: { classPropertyName: "contentClass", publicName: "fwTooltipClass", isSignal: true, isRequired: false, transformFunction: null }, delayMs: { classPropertyName: "delayMs", publicName: "fwTooltipDelay", isSignal: true, isRequired: false, transformFunction: null }, displayCaret: { classPropertyName: "displayCaret", publicName: "fwTooltipCaret", isSignal: true, isRequired: false, transformFunction: null }, enabled: { classPropertyName: "enabled", publicName: "fwTooltipEnabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { title: "fwTooltipChange", position: "fwTooltipPositionChange", maxWidth: "fwTooltipMaxWidthPxChange", contentClass: "fwTooltipClassChange", enabled: "fwTooltipEnabledChange" }, ngImport: i0 }); }
|
|
1153
1153
|
}
|
|
1154
1154
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: FwTooltipDirective, decorators: [{
|
|
1155
1155
|
type: Directive,
|
|
@@ -1186,7 +1186,7 @@ class FwTooltipComponent {
|
|
|
1186
1186
|
}
|
|
1187
1187
|
;
|
|
1188
1188
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: FwTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1189
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.18", type: FwTooltipComponent, isStandalone: true, 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", "attr.title": "this.attrTitle" } }, ngImport: i0, template: "<div\n [ngClass]=\"['tooltip-trigger',fullWidth?'full-width':'']\"\n [fwTooltip]=\"title\"\n [fwTooltipDelay]=\"delay()\"\n [fwTooltipPosition]=\"position\">\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: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: FwTooltipDirective, selector: "[fwTooltip]", inputs: ["fwTooltip", "fwTooltipPosition", "fwTooltipMaxWidthPx", "fwTooltipDelay", "fwTooltipCaret", "fwTooltipEnabled"], outputs: ["fwTooltipChange", "fwTooltipPositionChange", "fwTooltipMaxWidthPxChange", "fwTooltipEnabledChange"] }] }); }
|
|
1189
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.18", type: FwTooltipComponent, isStandalone: true, 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", "attr.title": "this.attrTitle" } }, ngImport: i0, template: "<div\n [ngClass]=\"['tooltip-trigger',fullWidth?'full-width':'']\"\n [fwTooltip]=\"title\"\n [fwTooltipDelay]=\"delay()\"\n [fwTooltipPosition]=\"position\">\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: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: FwTooltipDirective, selector: "[fwTooltip]", inputs: ["fwTooltip", "fwTooltipPosition", "fwTooltipMaxWidthPx", "fwTooltipClass", "fwTooltipDelay", "fwTooltipCaret", "fwTooltipEnabled"], outputs: ["fwTooltipChange", "fwTooltipPositionChange", "fwTooltipMaxWidthPxChange", "fwTooltipClassChange", "fwTooltipEnabledChange"] }] }); }
|
|
1190
1190
|
}
|
|
1191
1191
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: FwTooltipComponent, decorators: [{
|
|
1192
1192
|
type: Component,
|
|
@@ -4841,7 +4841,7 @@ class FwTextInputComponent {
|
|
|
4841
4841
|
provide: NG_VALUE_ACCESSOR,
|
|
4842
4842
|
useExisting: FwTextInputComponent,
|
|
4843
4843
|
multi: true,
|
|
4844
|
-
}], queries: [{ propertyName: "textInput", first: true, predicate: ["textInput"], descendants: true }], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "<div class=\"full-container\" [ngClass]=\"{'disabled': disabled}\">\n <div class=\"input-container\" [class]=\"size\">\n <fw-icon\n *ngIf=\"!!leftIcon\"\n (click)=\"useActionableIcons?onLeftIconClick():null\"\n [ngClass]=\"useActionableIcons?'actionable':''\">{{ leftIcon }}\n </fw-icon>\n <p class=\"vision-p2 context\" *ngIf=\"!!prefix\">{{ prefix }}</p>\n\n <input\n #input\n *ngIf=\"!textInput\"\n [type]=\"type\"\n (keyup)=\"changeHandler($event)\"\n (blur)=\"blurHandler()\"\n [value]=\"value\"\n [attr.maxlength]=\"maxLength\"\n [placeholder]=\"placeholder || ''\"\n [readOnly]=\"readOnly\"\n [disabled]=\"disabled\"\n [autofocus]=\"autofocus\"\n [autocomplete]=\"autocomplete\"\n >\n <ng-content select=\"input\"></ng-content>\n <p class=\"vision-p2 context\" *ngIf=\"!!context\">{{ context }}</p>\n\n <fw-icon class=\"error-icon\" [fwTooltip]=\"errorInIconTooltip ? errorText : ''\">warning-circle</fw-icon>\n <fw-icon\n *ngIf=\"!!rightIcon\"\n (click)=\"useActionableIcons?onRightIconClick():null\"\n [ngClass]=\"useActionableIcons?'actionable':''\">{{ rightIcon }}\n </fw-icon>\n <ng-content></ng-content>\n </div>\n <p class=\"vision-p4 helper-text\" *ngIf=\"!!helperText\">{{ helperText }}</p>\n <p class=\"vision-p4 error-text\" *ngIf=\"!!errorText && !errorInIconTooltip\">{{ errorText }}</p>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700\";.vision-h1{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:22px}.vision-h2{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:18px}.vision-h3{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:16px}.vision-h4{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:14px}.vision-h5{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:12px;line-height:130%}.vision-h6{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:10px;line-height:120%}.vision-p1{font-size:18px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p2{font-size:14px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p3{font-size:12px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p4{font-size:10px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p5{font-size:8px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-link{text-decoration:underline;color:var(--primary-base);cursor:pointer}.vision-link:hover{text-decoration:none}.vision-link:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link:visited{color:var(--secondary-base)}.vision-link-inherited{text-decoration:underline;color:var(--primary-base);cursor:pointer}.vision-link-inherited:hover{text-decoration:none}.vision-link-inherited:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link-inherited:visited{color:var(--secondary-base)}.vision-link-inherited,.vision-link-inherited:visited{color:inherit}.vision-link-no-visited{text-decoration:underline;color:var(--primary-base);cursor:pointer}.vision-link-no-visited:hover{text-decoration:none}.vision-link-no-visited:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link-no-visited:visited{color:var(--secondary-base)}.vision-link-no-visited:visited{color:var(--primary-base)}.full-container.disabled{cursor:not-allowed}.full-container.disabled fw-icon{cursor:not-allowed!important}.full-container{display:flex;flex-direction:column;line-height:21px}.full-container .input-container{box-sizing:border-box;color:var(--typography-light);background:var(--page-light);display:flex;padding:8px;align-items:center;gap:5px;border-radius:6px;border:1px solid var(--separations-input);font-family:Inter,sans-serif}.full-container .input-container:focus-within{border:1px solid var(--primary-base)}.full-container .input-container input{min-width:0;font-size:14px;flex-grow:1;color:var(--typography-base);background:var(--page-light);border:none}.full-container .input-container input:focus{outline:none;border:none}.full-container .input-container input::placeholder{color:var(--typography-light)}.full-container .input-container .context{color:var(--typography-light)}.full-container .error-icon{display:none}.full-container .helper-text,.full-container .error-text{margin-top:4px;color:var(--typography-light);line-height:13px;margin-left:6px;margin-bottom:0}.full-container .error-text{text-align:left;color:var(--red-base);display:none}fw-icon.actionable{cursor:pointer}fw-icon.actionable:hover{color:var(--primary-base);background-color:var(--primary-hover);border-radius:50%}.small{height:30px}.small>fw-icon{font-size:18px;min-width:18px;width:18px}.medium{height:36px}.medium>fw-icon{font-size:20px;min-width:20px;width:20px}.large{height:40px}.large>fw-icon{font-size:24px;min-width:24px;width:24px}:host.errored .input-container,:host.ng-touched.ng-invalid .input-container{border:1px solid var(--red-base)}:host.errored .error-icon,:host.ng-touched.ng-invalid .error-icon{color:var(--red-base);display:inline!important}:host.errored .helper-text,:host.errored .full-container .error-text,:host.ng-touched.ng-invalid .helper-text,:host.ng-touched.ng-invalid .full-container .error-text{display:none}:host.errored .error-text,:host.ng-touched.ng-invalid .error-text{display:block!important}:disabled{opacity:.4;cursor:not-allowed}.disabled .actionable:hover{color:var(--typography-light);background-color:transparent}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }, { kind: "directive", type: FwTooltipDirective, selector: "[fwTooltip]", inputs: ["fwTooltip", "fwTooltipPosition", "fwTooltipMaxWidthPx", "fwTooltipDelay", "fwTooltipCaret", "fwTooltipEnabled"], outputs: ["fwTooltipChange", "fwTooltipPositionChange", "fwTooltipMaxWidthPxChange", "fwTooltipEnabledChange"] }] }); }
|
|
4844
|
+
}], queries: [{ propertyName: "textInput", first: true, predicate: ["textInput"], descendants: true }], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "<div class=\"full-container\" [ngClass]=\"{'disabled': disabled}\">\n <div class=\"input-container\" [class]=\"size\">\n <fw-icon\n *ngIf=\"!!leftIcon\"\n (click)=\"useActionableIcons?onLeftIconClick():null\"\n [ngClass]=\"useActionableIcons?'actionable':''\">{{ leftIcon }}\n </fw-icon>\n <p class=\"vision-p2 context\" *ngIf=\"!!prefix\">{{ prefix }}</p>\n\n <input\n #input\n *ngIf=\"!textInput\"\n [type]=\"type\"\n (keyup)=\"changeHandler($event)\"\n (blur)=\"blurHandler()\"\n [value]=\"value\"\n [attr.maxlength]=\"maxLength\"\n [placeholder]=\"placeholder || ''\"\n [readOnly]=\"readOnly\"\n [disabled]=\"disabled\"\n [autofocus]=\"autofocus\"\n [autocomplete]=\"autocomplete\"\n >\n <ng-content select=\"input\"></ng-content>\n <p class=\"vision-p2 context\" *ngIf=\"!!context\">{{ context }}</p>\n\n <fw-icon class=\"error-icon\" [fwTooltip]=\"errorInIconTooltip ? errorText : ''\">warning-circle</fw-icon>\n <fw-icon\n *ngIf=\"!!rightIcon\"\n (click)=\"useActionableIcons?onRightIconClick():null\"\n [ngClass]=\"useActionableIcons?'actionable':''\">{{ rightIcon }}\n </fw-icon>\n <ng-content></ng-content>\n </div>\n <p class=\"vision-p4 helper-text\" *ngIf=\"!!helperText\">{{ helperText }}</p>\n <p class=\"vision-p4 error-text\" *ngIf=\"!!errorText && !errorInIconTooltip\">{{ errorText }}</p>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700\";.vision-h1{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:22px}.vision-h2{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:18px}.vision-h3{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:16px}.vision-h4{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:14px}.vision-h5{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:12px;line-height:130%}.vision-h6{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:10px;line-height:120%}.vision-p1{font-size:18px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p2{font-size:14px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p3{font-size:12px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p4{font-size:10px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p5{font-size:8px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-link{text-decoration:underline;color:var(--primary-base);cursor:pointer}.vision-link:hover{text-decoration:none}.vision-link:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link:visited{color:var(--secondary-base)}.vision-link-inherited{text-decoration:underline;color:var(--primary-base);cursor:pointer}.vision-link-inherited:hover{text-decoration:none}.vision-link-inherited:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link-inherited:visited{color:var(--secondary-base)}.vision-link-inherited,.vision-link-inherited:visited{color:inherit}.vision-link-no-visited{text-decoration:underline;color:var(--primary-base);cursor:pointer}.vision-link-no-visited:hover{text-decoration:none}.vision-link-no-visited:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link-no-visited:visited{color:var(--secondary-base)}.vision-link-no-visited:visited{color:var(--primary-base)}.full-container.disabled{cursor:not-allowed}.full-container.disabled fw-icon{cursor:not-allowed!important}.full-container{display:flex;flex-direction:column;line-height:21px}.full-container .input-container{box-sizing:border-box;color:var(--typography-light);background:var(--page-light);display:flex;padding:8px;align-items:center;gap:5px;border-radius:6px;border:1px solid var(--separations-input);font-family:Inter,sans-serif}.full-container .input-container:focus-within{border:1px solid var(--primary-base)}.full-container .input-container input{min-width:0;font-size:14px;flex-grow:1;color:var(--typography-base);background:var(--page-light);border:none}.full-container .input-container input:focus{outline:none;border:none}.full-container .input-container input::placeholder{color:var(--typography-light)}.full-container .input-container .context{color:var(--typography-light)}.full-container .error-icon{display:none}.full-container .helper-text,.full-container .error-text{margin-top:4px;color:var(--typography-light);line-height:13px;margin-left:6px;margin-bottom:0}.full-container .error-text{text-align:left;color:var(--red-base);display:none}fw-icon.actionable{cursor:pointer}fw-icon.actionable:hover{color:var(--primary-base);background-color:var(--primary-hover);border-radius:50%}.small{height:30px}.small>fw-icon{font-size:18px;min-width:18px;width:18px}.medium{height:36px}.medium>fw-icon{font-size:20px;min-width:20px;width:20px}.large{height:40px}.large>fw-icon{font-size:24px;min-width:24px;width:24px}:host.errored .input-container,:host.ng-touched.ng-invalid .input-container{border:1px solid var(--red-base)}:host.errored .error-icon,:host.ng-touched.ng-invalid .error-icon{color:var(--red-base);display:inline!important}:host.errored .helper-text,:host.errored .full-container .error-text,:host.ng-touched.ng-invalid .helper-text,:host.ng-touched.ng-invalid .full-container .error-text{display:none}:host.errored .error-text,:host.ng-touched.ng-invalid .error-text{display:block!important}:disabled{opacity:.4;cursor:not-allowed}.disabled .actionable:hover{color:var(--typography-light);background-color:transparent}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }, { kind: "directive", type: FwTooltipDirective, selector: "[fwTooltip]", inputs: ["fwTooltip", "fwTooltipPosition", "fwTooltipMaxWidthPx", "fwTooltipClass", "fwTooltipDelay", "fwTooltipCaret", "fwTooltipEnabled"], outputs: ["fwTooltipChange", "fwTooltipPositionChange", "fwTooltipMaxWidthPxChange", "fwTooltipClassChange", "fwTooltipEnabledChange"] }] }); }
|
|
4845
4845
|
}
|
|
4846
4846
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: FwTextInputComponent, decorators: [{
|
|
4847
4847
|
type: Component,
|