@flywheel-io/vision 2.6.2 → 2.7.0-beta.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/menu/menu-item/menu-item.component.d.ts +5 -0
- package/components/tooltip/tooltip-panel/tooltip-panel.component.d.ts +14 -3
- package/components/tooltip/tooltip.component.d.ts +4 -11
- package/components/tooltip/tooltip.directive.d.ts +30 -0
- package/components/tooltip/tooltip.module.d.ts +3 -1
- package/esm2022/components/avatar-list/avatar-list.component.mjs +5 -5
- package/esm2022/components/menu/menu-item/menu-item.component.mjs +13 -2
- package/esm2022/components/tooltip/tooltip-panel/tooltip-panel.component.mjs +70 -6
- package/esm2022/components/tooltip/tooltip.component.mjs +15 -68
- package/esm2022/components/tooltip/tooltip.directive.mjs +114 -0
- package/esm2022/components/tooltip/tooltip.module.mjs +11 -3
- package/esm2022/public-api.mjs +2 -1
- package/fesm2022/flywheel-io-vision.mjs +215 -77
- package/fesm2022/flywheel-io-vision.mjs.map +1 -1
- package/flywheel-io-vision-2.7.0-beta.0.tgz +0 -0
- package/package.json +1 -1
- package/public-api.d.ts +1 -0
|
@@ -1,12 +1,16 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { HostBinding, Input, ChangeDetectionStrategy, Component, EventEmitter, Output, NgModule, input, model, computed, ViewEncapsulation, HostListener, signal, effect, inject,
|
|
2
|
+
import { HostBinding, Input, ChangeDetectionStrategy, Component, EventEmitter, Output, NgModule, input, model, computed, ViewEncapsulation, HostListener, signal, effect, inject, ElementRef, ViewContainerRef, Directive, contentChildren, viewChild, ChangeDetectorRef, ContentChildren, ViewChild, forwardRef, Optional, Inject, SkipSelf, Injectable, Pipe, ContentChild, output, Host, ViewChildren, Self, viewChildren } from '@angular/core';
|
|
3
3
|
import * as i1$1 from '@angular/common';
|
|
4
4
|
import { CommonModule, NgClass } from '@angular/common';
|
|
5
5
|
import * as i1 from '@angular/platform-browser';
|
|
6
|
-
import { BehaviorSubject, debounce, timer, of, Subscription, min, startWith, tap, switchMap, map } from 'rxjs';
|
|
6
|
+
import { BehaviorSubject, distinctUntilChanged, debounce, timer, of, Subscription, min, startWith, tap, switchMap, map } from 'rxjs';
|
|
7
7
|
import * as i1$2 from '@angular/cdk/overlay';
|
|
8
|
-
import { OverlayModule, Overlay } from '@angular/cdk/overlay';
|
|
8
|
+
import { OverlayModule, Overlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
|
|
9
|
+
import * as i1$5 from '@angular/cdk/table';
|
|
10
|
+
import { CdkNoDataRow, CdkCellDef, CdkHeaderCellDef, CdkFooterCellDef, CdkColumnDef, CdkHeaderCell, CdkFooterCell, CdkCell, CdkHeaderRowDef, CdkFooterRowDef, CdkRowDef, CdkHeaderRow, CdkFooterRow, CdkRow, CdkTable, CDK_TABLE, _CoalescedStyleScheduler, _COALESCED_STYLE_SCHEDULER, STICKY_POSITIONING_LISTENER, CdkTableModule } from '@angular/cdk/table';
|
|
11
|
+
export { CdkTableModule } from '@angular/cdk/table';
|
|
9
12
|
import { trigger, transition, style, animate, state } from '@angular/animations';
|
|
13
|
+
import { ComponentPortal } from '@angular/cdk/portal';
|
|
10
14
|
import * as i8 from '@angular/forms';
|
|
11
15
|
import { NG_VALUE_ACCESSOR, ReactiveFormsModule, FormsModule } from '@angular/forms';
|
|
12
16
|
import * as i1$3 from '@angular/cdk/dialog';
|
|
@@ -16,9 +20,6 @@ import { isValidPhoneNumber, getExampleNumber, parsePhoneNumberFromString, AsYou
|
|
|
16
20
|
import * as i1$4 from '@angular/cdk/menu';
|
|
17
21
|
import { CdkMenuTrigger, CdkMenuModule } from '@angular/cdk/menu';
|
|
18
22
|
import { coerceBooleanProperty } from '@angular/cdk/coercion';
|
|
19
|
-
import * as i1$5 from '@angular/cdk/table';
|
|
20
|
-
import { CdkCellDef, CdkHeaderCellDef, CdkFooterCellDef, CdkColumnDef, CdkHeaderCell, CdkFooterCell, CdkCell, CdkHeaderRowDef, CdkFooterRowDef, CdkRowDef, CdkHeaderRow, CdkFooterRow, CdkRow, CdkNoDataRow, CdkTable, CDK_TABLE, _CoalescedStyleScheduler, _COALESCED_STYLE_SCHEDULER, STICKY_POSITIONING_LISTENER, CdkTableModule } from '@angular/cdk/table';
|
|
21
|
-
export { CdkTableModule } from '@angular/cdk/table';
|
|
22
23
|
import { _DisposeViewRepeaterStrategy, _VIEW_REPEATER_STRATEGY } from '@angular/cdk/collections';
|
|
23
24
|
import * as i2 from '@angular/cdk/text-field';
|
|
24
25
|
import { CdkTextareaAutosize, TextFieldModule } from '@angular/cdk/text-field';
|
|
@@ -705,7 +706,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
705
706
|
}] } });
|
|
706
707
|
|
|
707
708
|
/* eslint-disable @rx-angular/prefer-no-layout-sensitive-apis */
|
|
708
|
-
const delayMap$
|
|
709
|
+
const delayMap$2 = {
|
|
709
710
|
'none': 0,
|
|
710
711
|
'short': 400,
|
|
711
712
|
'long': 700,
|
|
@@ -722,7 +723,7 @@ class FwPopoverComponent {
|
|
|
722
723
|
this.action = 'mouseenter';
|
|
723
724
|
this.delay = input('short');
|
|
724
725
|
this.delayMs = computed(() => {
|
|
725
|
-
return delayMap$
|
|
726
|
+
return delayMap$2[this.delay()];
|
|
726
727
|
});
|
|
727
728
|
this.showCaret = input(true);
|
|
728
729
|
this.activePositionPair = signal(null);
|
|
@@ -898,11 +899,53 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
898
899
|
}]
|
|
899
900
|
}] });
|
|
900
901
|
|
|
902
|
+
const delayMap$1 = {
|
|
903
|
+
'none': 0,
|
|
904
|
+
'short': 400,
|
|
905
|
+
'long': 700,
|
|
906
|
+
};
|
|
907
|
+
const positionMap$1 = {
|
|
908
|
+
'none': { originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom', offsetY: 3 },
|
|
909
|
+
'above': { originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom', offsetY: 3 },
|
|
910
|
+
'below': { originX: 'center', originY: 'bottom', overlayX: 'center', overlayY: 'top', offsetY: -3 },
|
|
911
|
+
'left': { originX: 'start', originY: 'center', overlayX: 'end', overlayY: 'center' },
|
|
912
|
+
'right': { originX: 'end', originY: 'center', overlayX: 'start', overlayY: 'center' },
|
|
913
|
+
};
|
|
914
|
+
const isElementRef = (input) => ((Boolean(input.nativeElement)));
|
|
901
915
|
class FwTooltipPanelComponent {
|
|
902
916
|
constructor() {
|
|
903
|
-
this.
|
|
917
|
+
this.trigger = input(undefined, {
|
|
918
|
+
transform: (unparsed) => {
|
|
919
|
+
if (isElementRef(unparsed)) {
|
|
920
|
+
return new CdkOverlayOrigin(unparsed);
|
|
921
|
+
}
|
|
922
|
+
return unparsed;
|
|
923
|
+
},
|
|
924
|
+
});
|
|
925
|
+
this.title = '';
|
|
926
|
+
this.isOpen = input(false);
|
|
927
|
+
this.position = input('below');
|
|
928
|
+
this.connectedPosition = computed(() => [positionMap$1[this.position()]]);
|
|
929
|
+
this.color = 'dark';
|
|
904
930
|
this.maxWidth = 200;
|
|
905
931
|
this.mouseLeave = new EventEmitter();
|
|
932
|
+
this.delay = input('short');
|
|
933
|
+
this.delayMs = computed(() => delayMap$1[this.delay()]);
|
|
934
|
+
/*
|
|
935
|
+
<ng-template
|
|
936
|
+
cdkConnectedOverlay
|
|
937
|
+
[cdkConnectedOverlayOrigin]="trigger"
|
|
938
|
+
[cdkConnectedOverlayOpen]="isOpen"
|
|
939
|
+
[cdkConnectedOverlayPositions]="connectedPosition()"
|
|
940
|
+
[cdkConnectedOverlayScrollStrategy]="this.overlayService.scrollStrategies.close()">
|
|
941
|
+
*/
|
|
942
|
+
this.overlayService = inject(Overlay);
|
|
943
|
+
this.updateOverlayOnChange = effect(() => {
|
|
944
|
+
// this.overlayRef.origin = this.trigger();
|
|
945
|
+
// this.overlayRef.positions = this.connectedPosition();
|
|
946
|
+
// this.overlayRef.open = this.isOpen();
|
|
947
|
+
// this.overlayRef.scrollStrategy = this.overlayService.scrollStrategies.close();
|
|
948
|
+
});
|
|
906
949
|
}
|
|
907
950
|
get classes() {
|
|
908
951
|
return ['fw-tooltip-panel', 'fw-tooltip-' + this.position].join(' ');
|
|
@@ -911,12 +954,32 @@ class FwTooltipPanelComponent {
|
|
|
911
954
|
this.mouseLeave.emit(e);
|
|
912
955
|
}
|
|
913
956
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwTooltipPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
914
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
957
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: FwTooltipPanelComponent, selector: "fw-tooltip-panel", inputs: { trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: false, 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: false, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: false, isRequired: false, transformFunction: null }, delay: { classPropertyName: "delay", publicName: "delay", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { mouseLeave: "mouseLeave" }, host: { listeners: { "mouseleave": "hidePopover($event)" }, properties: { "attr.class": "this.classes" } }, ngImport: i0, template: "<div\n @fadeInFadeOut\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 class=\"vision-h5\">{{ title }}</h5>\n <div class=\"fw-tooltip-caret\"></div>\n</div>\n", styles: [":host{position:absolute;height:0;width:0}.fw-tooltip-content-wrapper{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: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], animations: [
|
|
958
|
+
trigger('fadeInFadeOut', [
|
|
959
|
+
transition(':enter', [
|
|
960
|
+
style({ opacity: 0 }),
|
|
961
|
+
animate('150ms', style({ opacity: 1 })),
|
|
962
|
+
]),
|
|
963
|
+
transition(':leave', [
|
|
964
|
+
animate('200ms', style({ opacity: 0 })),
|
|
965
|
+
]),
|
|
966
|
+
]),
|
|
967
|
+
], encapsulation: i0.ViewEncapsulation.None }); }
|
|
915
968
|
}
|
|
916
969
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwTooltipPanelComponent, decorators: [{
|
|
917
970
|
type: Component,
|
|
918
|
-
args: [{ selector: 'fw-tooltip-panel', encapsulation: ViewEncapsulation.None,
|
|
919
|
-
|
|
971
|
+
args: [{ selector: 'fw-tooltip-panel', encapsulation: ViewEncapsulation.None, animations: [
|
|
972
|
+
trigger('fadeInFadeOut', [
|
|
973
|
+
transition(':enter', [
|
|
974
|
+
style({ opacity: 0 }),
|
|
975
|
+
animate('150ms', style({ opacity: 1 })),
|
|
976
|
+
]),
|
|
977
|
+
transition(':leave', [
|
|
978
|
+
animate('200ms', style({ opacity: 0 })),
|
|
979
|
+
]),
|
|
980
|
+
]),
|
|
981
|
+
], template: "<div\n @fadeInFadeOut\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 class=\"vision-h5\">{{ title }}</h5>\n <div class=\"fw-tooltip-caret\"></div>\n</div>\n", styles: [":host{position:absolute;height:0;width:0}.fw-tooltip-content-wrapper{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"] }]
|
|
982
|
+
}], propDecorators: { title: [{
|
|
920
983
|
type: Input
|
|
921
984
|
}], color: [{
|
|
922
985
|
type: Input
|
|
@@ -932,89 +995,147 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
932
995
|
args: ['mouseleave', ['$event']]
|
|
933
996
|
}] } });
|
|
934
997
|
|
|
935
|
-
|
|
998
|
+
const positionMap = {
|
|
999
|
+
'none': { originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom', offsetY: 3 },
|
|
1000
|
+
'above': { originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom', offsetY: 3 },
|
|
1001
|
+
'below': { originX: 'center', originY: 'bottom', overlayX: 'center', overlayY: 'top', offsetY: -3 },
|
|
1002
|
+
'left': { originX: 'start', originY: 'center', overlayX: 'end', overlayY: 'center' },
|
|
1003
|
+
'right': { originX: 'end', originY: 'center', overlayX: 'start', overlayY: 'center' },
|
|
1004
|
+
};
|
|
936
1005
|
const delayMap = {
|
|
937
1006
|
'none': 0,
|
|
938
1007
|
'short': 400,
|
|
939
1008
|
'long': 700,
|
|
940
1009
|
};
|
|
1010
|
+
const delayNameToMs = (name) => {
|
|
1011
|
+
return delayMap[name];
|
|
1012
|
+
};
|
|
1013
|
+
class FwTooltipDirective {
|
|
1014
|
+
constructor() {
|
|
1015
|
+
// External Context
|
|
1016
|
+
this.elementRef = inject(ElementRef);
|
|
1017
|
+
this.viewContainerRef = inject(ViewContainerRef);
|
|
1018
|
+
this.overlayService = inject(Overlay);
|
|
1019
|
+
// Internal refs
|
|
1020
|
+
this.overlayRef = signal(undefined);
|
|
1021
|
+
this.tooltipRef = signal(undefined);
|
|
1022
|
+
// Inputs
|
|
1023
|
+
this.delayMs = input(400, {
|
|
1024
|
+
transform: delayNameToMs,
|
|
1025
|
+
alias: 'fwTooltipDelay',
|
|
1026
|
+
});
|
|
1027
|
+
// a lot of these ideally wouldn't be models,
|
|
1028
|
+
// but it makes it easier to interact with this from derivative directives
|
|
1029
|
+
this.title = model('undefined', {
|
|
1030
|
+
alias: 'fwTooltip',
|
|
1031
|
+
});
|
|
1032
|
+
this.position = model('above', {
|
|
1033
|
+
alias: 'fwTooltipPosition',
|
|
1034
|
+
});
|
|
1035
|
+
this.maxWidth = model(200, {
|
|
1036
|
+
alias: 'fwTooltipMaxWidthPx',
|
|
1037
|
+
});
|
|
1038
|
+
this.enabled = model(true, {
|
|
1039
|
+
alias: 'fwTooltipEnabled'
|
|
1040
|
+
});
|
|
1041
|
+
// derived state
|
|
1042
|
+
this.connectedPosition = computed(() => [positionMap[this.position()]]);
|
|
1043
|
+
this.positionStrategy = computed(() => {
|
|
1044
|
+
const positionBuilder = this.overlayService.position();
|
|
1045
|
+
const withOrigin = positionBuilder.flexibleConnectedTo(this.elementRef);
|
|
1046
|
+
const completedStrategy = withOrigin.withPositions(this.connectedPosition());
|
|
1047
|
+
return completedStrategy;
|
|
1048
|
+
});
|
|
1049
|
+
this.overlayConfig = computed(() => ({
|
|
1050
|
+
positionStrategy: this.positionStrategy(),
|
|
1051
|
+
maxWidth: this.maxWidth(),
|
|
1052
|
+
ScrollStrategyOptions: this.overlayService.scrollStrategies.close(),
|
|
1053
|
+
disposeOnNavigation: true,
|
|
1054
|
+
}));
|
|
1055
|
+
// effects and methods
|
|
1056
|
+
this.addMouseEventListeners = effect(() => {
|
|
1057
|
+
const nativeElement = this.elementRef.nativeElement;
|
|
1058
|
+
nativeElement.addEventListener('mouseenter', () => {
|
|
1059
|
+
this.showTooltip();
|
|
1060
|
+
});
|
|
1061
|
+
nativeElement.addEventListener('mouseleave', () => {
|
|
1062
|
+
this.hideTooltip();
|
|
1063
|
+
});
|
|
1064
|
+
});
|
|
1065
|
+
}
|
|
1066
|
+
ngOnInit() {
|
|
1067
|
+
this.tooltipPortal = new ComponentPortal(FwTooltipPanelComponent, this.viewContainerRef);
|
|
1068
|
+
this.overlayRef.set(this.overlayService.create());
|
|
1069
|
+
}
|
|
1070
|
+
showTooltip() {
|
|
1071
|
+
if (!this.enabled()) {
|
|
1072
|
+
return;
|
|
1073
|
+
}
|
|
1074
|
+
const overlayRef = this.overlayRef();
|
|
1075
|
+
overlayRef.updatePositionStrategy(this.positionStrategy());
|
|
1076
|
+
if (this.openDelayTimer) {
|
|
1077
|
+
return;
|
|
1078
|
+
}
|
|
1079
|
+
this.openDelayTimer = window.setTimeout(() => {
|
|
1080
|
+
const tooltipRef = overlayRef.attach(this.tooltipPortal);
|
|
1081
|
+
this.tooltipRef.set(tooltipRef);
|
|
1082
|
+
tooltipRef.setInput('title', this.title());
|
|
1083
|
+
tooltipRef.setInput('position', this.position());
|
|
1084
|
+
tooltipRef.changeDetectorRef.detectChanges();
|
|
1085
|
+
}, this.delayMs());
|
|
1086
|
+
}
|
|
1087
|
+
hideTooltip() {
|
|
1088
|
+
const animationDelayMs = 200;
|
|
1089
|
+
this.closeDelayTimer = window.setTimeout(() => {
|
|
1090
|
+
window.clearTimeout(this.openDelayTimer);
|
|
1091
|
+
this.openDelayTimer = undefined;
|
|
1092
|
+
this.overlayRef().detach();
|
|
1093
|
+
this.tooltipRef.set(undefined);
|
|
1094
|
+
}, animationDelayMs);
|
|
1095
|
+
}
|
|
1096
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwTooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1097
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "17.3.12", type: FwTooltipDirective, isStandalone: true, selector: "[fwTooltip]", inputs: { delayMs: { classPropertyName: "delayMs", publicName: "fwTooltipDelay", isSignal: true, isRequired: false, transformFunction: null }, 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 }, enabled: { classPropertyName: "enabled", publicName: "fwTooltipEnabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { title: "fwTooltipChange", position: "fwTooltipPositionChange", maxWidth: "fwTooltipMaxWidthPxChange", enabled: "fwTooltipEnabledChange" }, ngImport: i0 }); }
|
|
1098
|
+
}
|
|
1099
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwTooltipDirective, decorators: [{
|
|
1100
|
+
type: Directive,
|
|
1101
|
+
args: [{
|
|
1102
|
+
selector: '[fwTooltip]',
|
|
1103
|
+
standalone: true,
|
|
1104
|
+
}]
|
|
1105
|
+
}] });
|
|
1106
|
+
|
|
941
1107
|
/**
|
|
942
1108
|
* component for giving extra context when a user hovers something
|
|
943
1109
|
* @see [Vision Docs](https://cdn.flywheel.io/docs/vision/master/?path=/docs/components-tooltip--docs)
|
|
944
1110
|
*/
|
|
945
1111
|
class FwTooltipComponent {
|
|
946
1112
|
constructor() {
|
|
947
|
-
this.color = '
|
|
1113
|
+
this.color = 'dark';
|
|
948
1114
|
this.position = 'above';
|
|
949
1115
|
this.maxWidth = 200;
|
|
950
1116
|
this.fullWidth = false;
|
|
1117
|
+
// TODO v3: remove, we shouldn't need to give direct control over a tooltip's open state
|
|
951
1118
|
this.isOpen = false;
|
|
952
|
-
this.cdRef = inject(ChangeDetectorRef);
|
|
953
1119
|
this.delay = input('short');
|
|
954
|
-
this.delayMs = computed(() => delayMap[this.delay()]);
|
|
955
|
-
this.positionMap = {
|
|
956
|
-
'none': { originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom', offsetY: 3 },
|
|
957
|
-
'above': { originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom', offsetY: 3 },
|
|
958
|
-
'below': { originX: 'center', originY: 'bottom', overlayX: 'center', overlayY: 'top', offsetY: -3 },
|
|
959
|
-
'left': { originX: 'start', originY: 'center', overlayX: 'end', overlayY: 'center' },
|
|
960
|
-
'right': { originX: 'end', originY: 'center', overlayX: 'start', overlayY: 'center' },
|
|
961
|
-
};
|
|
962
1120
|
}
|
|
963
1121
|
get classes() {
|
|
964
1122
|
return ['fw-tooltip', this.fullWidth ? 'full-width' : null].filter(Boolean).join(' ');
|
|
965
1123
|
}
|
|
966
1124
|
;
|
|
967
|
-
|
|
968
|
-
|
|
969
|
-
|
|
970
|
-
|
|
971
|
-
|
|
972
|
-
|
|
973
|
-
const delayMs = this.delayMs();
|
|
974
|
-
if (!delayMs) {
|
|
975
|
-
this.isOpen = true;
|
|
976
|
-
this.openDelayTimer = null;
|
|
977
|
-
}
|
|
978
|
-
else {
|
|
979
|
-
this.openDelayTimer = window.setTimeout(() => {
|
|
980
|
-
this.isOpen = true;
|
|
981
|
-
this.openDelayTimer = null;
|
|
982
|
-
this.cdRef.detectChanges();
|
|
983
|
-
}, delayMs);
|
|
984
|
-
}
|
|
985
|
-
}
|
|
986
|
-
handleMouseLeave() {
|
|
987
|
-
if (this.openDelayTimer) {
|
|
988
|
-
window.clearTimeout(this.openDelayTimer);
|
|
989
|
-
}
|
|
990
|
-
this.isOpen = false;
|
|
1125
|
+
/**
|
|
1126
|
+
* stops the browser built-in tooltip from showing up
|
|
1127
|
+
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/title
|
|
1128
|
+
*/
|
|
1129
|
+
get attrTitle() {
|
|
1130
|
+
return '';
|
|
991
1131
|
}
|
|
1132
|
+
;
|
|
992
1133
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
993
|
-
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", "attr.title": "this
|
|
994
|
-
trigger('fadeInFadeOut', [
|
|
995
|
-
transition(':enter', [
|
|
996
|
-
style({ opacity: 0 }),
|
|
997
|
-
animate('150ms', style({ opacity: 1 })),
|
|
998
|
-
]),
|
|
999
|
-
transition(':leave', [
|
|
1000
|
-
animate('200ms', style({ opacity: 0 })),
|
|
1001
|
-
]),
|
|
1002
|
-
]),
|
|
1003
|
-
] }); }
|
|
1134
|
+
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", "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: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: FwTooltipDirective, selector: "[fwTooltip]", inputs: ["fwTooltipDelay", "fwTooltip", "fwTooltipPosition", "fwTooltipMaxWidthPx", "fwTooltipEnabled"], outputs: ["fwTooltipChange", "fwTooltipPositionChange", "fwTooltipMaxWidthPxChange", "fwTooltipEnabledChange"] }] }); }
|
|
1004
1135
|
}
|
|
1005
1136
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwTooltipComponent, decorators: [{
|
|
1006
1137
|
type: Component,
|
|
1007
|
-
args: [{ selector: 'fw-tooltip',
|
|
1008
|
-
trigger('fadeInFadeOut', [
|
|
1009
|
-
transition(':enter', [
|
|
1010
|
-
style({ opacity: 0 }),
|
|
1011
|
-
animate('150ms', style({ opacity: 1 })),
|
|
1012
|
-
]),
|
|
1013
|
-
transition(':leave', [
|
|
1014
|
-
animate('200ms', style({ opacity: 0 })),
|
|
1015
|
-
]),
|
|
1016
|
-
]),
|
|
1017
|
-
], template: "<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"isOpen\"\n [cdkConnectedOverlayPositions]=\"[positionMap[position]]\">\n <fw-tooltip-panel\n @fadeInFadeOut\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<div\n [ngClass]=\"['tooltip-trigger',fullWidth?'full-width':'']\"\n cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\"\n (mouseenter)=\"handleMouseEnter($event)\" (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"] }]
|
|
1138
|
+
args: [{ selector: 'fw-tooltip', 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"] }]
|
|
1018
1139
|
}], propDecorators: { title: [{
|
|
1019
1140
|
type: Input
|
|
1020
1141
|
}], color: [{
|
|
@@ -1032,7 +1153,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
1032
1153
|
}], classes: [{
|
|
1033
1154
|
type: HostBinding,
|
|
1034
1155
|
args: ['attr.class']
|
|
1035
|
-
}],
|
|
1156
|
+
}], attrTitle: [{
|
|
1036
1157
|
type: HostBinding,
|
|
1037
1158
|
args: ['attr.title']
|
|
1038
1159
|
}] } });
|
|
@@ -1042,8 +1163,11 @@ class FwTooltipModule {
|
|
|
1042
1163
|
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: FwTooltipModule, declarations: [FwTooltipComponent,
|
|
1043
1164
|
FwTooltipPanelComponent], imports: [CommonModule,
|
|
1044
1165
|
FwPopoverModule,
|
|
1045
|
-
OverlayModule
|
|
1046
|
-
|
|
1166
|
+
OverlayModule,
|
|
1167
|
+
CdkNoDataRow,
|
|
1168
|
+
FwTooltipDirective], exports: [FwTooltipComponent,
|
|
1169
|
+
FwTooltipPanelComponent,
|
|
1170
|
+
FwTooltipDirective] }); }
|
|
1047
1171
|
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwTooltipModule, providers: [
|
|
1048
1172
|
Overlay,
|
|
1049
1173
|
], imports: [CommonModule,
|
|
@@ -1057,10 +1181,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
1057
1181
|
CommonModule,
|
|
1058
1182
|
FwPopoverModule,
|
|
1059
1183
|
OverlayModule,
|
|
1184
|
+
CdkNoDataRow,
|
|
1185
|
+
FwTooltipDirective,
|
|
1060
1186
|
],
|
|
1061
1187
|
exports: [
|
|
1062
1188
|
FwTooltipComponent,
|
|
1063
1189
|
FwTooltipPanelComponent,
|
|
1190
|
+
FwTooltipDirective,
|
|
1064
1191
|
],
|
|
1065
1192
|
declarations: [
|
|
1066
1193
|
FwTooltipComponent,
|
|
@@ -1100,9 +1227,9 @@ class FwAvatarListComponent {
|
|
|
1100
1227
|
ngOnInit() {
|
|
1101
1228
|
// wire up resize observer to rxjs and debouce
|
|
1102
1229
|
const resize$ = new BehaviorSubject(null);
|
|
1103
|
-
const recalcOnResize$ = resize$.pipe(debounce(() => timer(this.resizeDebounceMs())));
|
|
1104
|
-
const resizeObserver = new ResizeObserver(() => {
|
|
1105
|
-
resize$.next();
|
|
1230
|
+
const recalcOnResize$ = resize$.pipe(distinctUntilChanged(), debounce(() => timer(this.resizeDebounceMs())));
|
|
1231
|
+
const resizeObserver = new ResizeObserver((resizeEntries) => {
|
|
1232
|
+
resize$.next(resizeEntries);
|
|
1106
1233
|
});
|
|
1107
1234
|
resizeObserver.observe(this.hostElement.nativeElement, {});
|
|
1108
1235
|
recalcOnResize$.subscribe(() => this.calcChipOverflow());
|
|
@@ -4108,8 +4235,16 @@ class FwMenuItemComponent {
|
|
|
4108
4235
|
evt.stopPropagation();
|
|
4109
4236
|
}
|
|
4110
4237
|
}
|
|
4238
|
+
/**
|
|
4239
|
+
* stops the browser built-in tooltip from showing up
|
|
4240
|
+
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/title
|
|
4241
|
+
*/
|
|
4242
|
+
get attrTitle() {
|
|
4243
|
+
return '';
|
|
4244
|
+
}
|
|
4245
|
+
;
|
|
4111
4246
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwMenuItemComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4112
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: FwMenuItemComponent, selector: "fw-menu-item", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: false, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: false, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: false, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: false, isRequired: false, transformFunction: null }, iconColor: { classPropertyName: "iconColor", publicName: "iconColor", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, showCheckbox: { classPropertyName: "showCheckbox", publicName: "showCheckbox", isSignal: false, isRequired: false, transformFunction: null }, checkboxColor: { classPropertyName: "checkboxColor", publicName: "checkboxColor", isSignal: false, isRequired: false, transformFunction: null }, multiSelect: { classPropertyName: "multiSelect", publicName: "multiSelect", isSignal: false, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: false, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: false, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: false, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: false, isRequired: false, transformFunction: null }, subItemsOpen: { classPropertyName: "subItemsOpen", publicName: "subItemsOpen", isSignal: false, isRequired: false, transformFunction: null }, mouseEnterHandler: { classPropertyName: "mouseEnterHandler", publicName: "mouseEnterHandler", isSignal: true, isRequired: false, transformFunction: null }, focused: { classPropertyName: "focused", publicName: "focused", isSignal: false, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { mouseEnterHandler: "mouseEnterHandlerChange", click: "click" }, host: { listeners: { "mouseenter": "onMouseEnter($event)" }, properties: { "class.collapsed": "this.collapsed", "class.focused": "this.focused", "class.selected": "this.selected" } }, queries: [{ propertyName: "subItems", predicate: FwMenuSubItemComponent }], usesOnChanges: true, ngImport: i0, template: "<div (click)=\"handleClick($event)\" *ngIf=\"!hidden\">\n <div\n [ngClass]=\"['menu-item', 'size-'+size, disabled?'disabled':'']\"\n [class.disabled]=\"disabled\">\n <div class=\"item-checkbox\" *ngIf=\"showCheckbox && multiSelect\">\n <fw-checkbox\n [disabled]=\"disabled\"\n [color]=\"checkboxColor\"\n [checked]=\"selected\">\n </fw-checkbox>\n </div>\n <div class=\"item-radiobutton\" *ngIf=\"showCheckbox && !multiSelect\">\n <fw-radio-button\n [value]=\"value\"\n [color]=\"checkboxColor\"\n [disabled]=\"disabled\"\n [checked]=\"selected\">\n </fw-radio-button>\n </div>\n <fw-icon [color]=\"iconColor\" *ngIf=\"icon\" class=\"menu-icon {{iconColor}}\">{{ icon }}</fw-icon>\n <ng-content select=\"fw-avatar\"></ng-content>\n <div class=\"menu-text\" *ngIf=\"title\">\n <h4 class=\"vision-h4\">{{ title }}</h4>\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-icon-button\n [size]=\"'small'\"\n [icon]=\"subItemsOpen?'chevron-up':'chevron-down'\"\n *ngIf=\"subItems.length>0\"\n (click)=\"toggleSubItemsView()\">\n </fw-icon-button>\n </div>\n </div>\n</div>\n<div class=\"item-subitems\">\n <ng-content select=\"fw-menu-sub-item\"></ng-content>\n</div>\n", styles: [":host{position:relative;display:flex;flex-direction:column}:host>div{display:flex;flex:1;text-decoration:none;max-width:100%}:host h4{text-overflow:ellipsis}:host:hover:not(.selected) .menu-item:not(.disabled),:host.focused .menu-item:not(.disabled){background-color:var(--slate-hover);cursor:pointer}:host:hover:not(.selected) .menu-item:not(.disabled) .menu-icon,:host.focused .menu-item:not(.disabled) .menu-icon{color:var(--primary-base)}:host:hover:not(.selected) .menu-item:not(.disabled) .menu-text h4,:host.focused .menu-item:not(.disabled) .menu-text h4{color:var(--typography-base)}:host.selected .menu-item{background-color:var(--primary-hover);cursor:pointer}:host.selected .menu-item .menu-icon{color:var(--primary-base)}:host.selected .menu-item .menu-text h4{color:var(--typography-base)}:host.collapsed .menu-item{container-name:menuitem;container-type:size}:host .menu-item{box-sizing:border-box;display:flex;flex-direction:row;align-items:center;flex:1;gap:8px;padding:8px;margin:1px 4px;border-radius:4px;color:var(--typography-muted);min-height:40px;width:stretch}:host .menu-item .item-checkbox:empty{display:none}:host .menu-item .item-radiobutton{padding:0}:host .menu-item .item-radiobutton:empty{display:none}:host .menu-item .menu-icon{font-size:18px;min-width:18px;width:18px;white-space:nowrap}:host .menu-item .menu-text{flex:1;overflow:hidden;padding:2px 0}:host .menu-item .menu-text h4{margin:0;color:var(--typography-muted);white-space:nowrap;overflow:hidden}:host .menu-item .menu-text p{margin:0}:host .menu-item .menu-text p.description{color:var(--typography-light)}:host .menu-item .key-text{display:flex;align-items:center;gap:8px;color:var(--typography-light)}:host .menu-item .key-text fw-icon-button{min-height:22px!important;min-width:22px!important;width:22px!important}:host .menu-item.size-compact{min-height:32px}:host .menu-item.size-compact .menu-text .description{display:none}:host .menu-item.disabled{opacity:.4;cursor:not-allowed}:host .item-subitems{display:flex;flex-direction:column}@container menuitem (max-width: 60px){.menu-item{gap:0}.menu-item .menu-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: FwCheckboxComponent, selector: "fw-checkbox", inputs: ["name", "disabled", "size", "color", "title", "focused", "checked"], outputs: ["change"] }, { kind: "component", type: FwRadioComponent, selector: "fw-radio-button", inputs: ["checked", "value", "group", "disabled", "size", "color", "title", "focused"], outputs: ["change"] }] }); }
|
|
4247
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: FwMenuItemComponent, selector: "fw-menu-item", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: false, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: false, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: false, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: false, isRequired: false, transformFunction: null }, iconColor: { classPropertyName: "iconColor", publicName: "iconColor", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, showCheckbox: { classPropertyName: "showCheckbox", publicName: "showCheckbox", isSignal: false, isRequired: false, transformFunction: null }, checkboxColor: { classPropertyName: "checkboxColor", publicName: "checkboxColor", isSignal: false, isRequired: false, transformFunction: null }, multiSelect: { classPropertyName: "multiSelect", publicName: "multiSelect", isSignal: false, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: false, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: false, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: false, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: false, isRequired: false, transformFunction: null }, subItemsOpen: { classPropertyName: "subItemsOpen", publicName: "subItemsOpen", isSignal: false, isRequired: false, transformFunction: null }, mouseEnterHandler: { classPropertyName: "mouseEnterHandler", publicName: "mouseEnterHandler", isSignal: true, isRequired: false, transformFunction: null }, focused: { classPropertyName: "focused", publicName: "focused", isSignal: false, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { mouseEnterHandler: "mouseEnterHandlerChange", click: "click" }, host: { listeners: { "mouseenter": "onMouseEnter($event)" }, properties: { "class.collapsed": "this.collapsed", "class.focused": "this.focused", "class.selected": "this.selected", "attr.title": "this.attrTitle" } }, queries: [{ propertyName: "subItems", predicate: FwMenuSubItemComponent }], usesOnChanges: true, ngImport: i0, template: "<div (click)=\"handleClick($event)\" *ngIf=\"!hidden\">\n <div\n [ngClass]=\"['menu-item', 'size-'+size, disabled?'disabled':'']\"\n [class.disabled]=\"disabled\">\n <div class=\"item-checkbox\" *ngIf=\"showCheckbox && multiSelect\">\n <fw-checkbox\n [disabled]=\"disabled\"\n [color]=\"checkboxColor\"\n [checked]=\"selected\">\n </fw-checkbox>\n </div>\n <div class=\"item-radiobutton\" *ngIf=\"showCheckbox && !multiSelect\">\n <fw-radio-button\n [value]=\"value\"\n [color]=\"checkboxColor\"\n [disabled]=\"disabled\"\n [checked]=\"selected\">\n </fw-radio-button>\n </div>\n <fw-icon [color]=\"iconColor\" *ngIf=\"icon\" class=\"menu-icon {{iconColor}}\">{{ icon }}</fw-icon>\n <ng-content select=\"fw-avatar\"></ng-content>\n <div class=\"menu-text\" *ngIf=\"title\">\n <h4 class=\"vision-h4\">{{ title }}</h4>\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-icon-button\n [size]=\"'small'\"\n [icon]=\"subItemsOpen?'chevron-up':'chevron-down'\"\n *ngIf=\"subItems.length>0\"\n (click)=\"toggleSubItemsView()\">\n </fw-icon-button>\n </div>\n </div>\n</div>\n<div class=\"item-subitems\">\n <ng-content select=\"fw-menu-sub-item\"></ng-content>\n</div>\n", styles: [":host{position:relative;display:flex;flex-direction:column}:host>div{display:flex;flex:1;text-decoration:none;max-width:100%}:host h4{text-overflow:ellipsis}:host:hover:not(.selected) .menu-item:not(.disabled),:host.focused .menu-item:not(.disabled){background-color:var(--slate-hover);cursor:pointer}:host:hover:not(.selected) .menu-item:not(.disabled) .menu-icon,:host.focused .menu-item:not(.disabled) .menu-icon{color:var(--primary-base)}:host:hover:not(.selected) .menu-item:not(.disabled) .menu-text h4,:host.focused .menu-item:not(.disabled) .menu-text h4{color:var(--typography-base)}:host.selected .menu-item{background-color:var(--primary-hover);cursor:pointer}:host.selected .menu-item .menu-icon{color:var(--primary-base)}:host.selected .menu-item .menu-text h4{color:var(--typography-base)}:host.collapsed .menu-item{container-name:menuitem;container-type:size}:host .menu-item{box-sizing:border-box;display:flex;flex-direction:row;align-items:center;flex:1;gap:8px;padding:8px;margin:1px 4px;border-radius:4px;color:var(--typography-muted);min-height:40px;width:stretch}:host .menu-item .item-checkbox:empty{display:none}:host .menu-item .item-radiobutton{padding:0}:host .menu-item .item-radiobutton:empty{display:none}:host .menu-item .menu-icon{font-size:18px;min-width:18px;width:18px;white-space:nowrap}:host .menu-item .menu-text{flex:1;overflow:hidden;padding:2px 0}:host .menu-item .menu-text h4{margin:0;color:var(--typography-muted);white-space:nowrap;overflow:hidden}:host .menu-item .menu-text p{margin:0}:host .menu-item .menu-text p.description{color:var(--typography-light)}:host .menu-item .key-text{display:flex;align-items:center;gap:8px;color:var(--typography-light)}:host .menu-item .key-text fw-icon-button{min-height:22px!important;min-width:22px!important;width:22px!important}:host .menu-item.size-compact{min-height:32px}:host .menu-item.size-compact .menu-text .description{display:none}:host .menu-item.disabled{opacity:.4;cursor:not-allowed}:host .item-subitems{display:flex;flex-direction:column}@container menuitem (max-width: 60px){.menu-item{gap:0}.menu-item .menu-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: FwCheckboxComponent, selector: "fw-checkbox", inputs: ["name", "disabled", "size", "color", "title", "focused", "checked"], outputs: ["change"] }, { kind: "component", type: FwRadioComponent, selector: "fw-radio-button", inputs: ["checked", "value", "group", "disabled", "size", "color", "title", "focused"], outputs: ["change"] }] }); }
|
|
4113
4248
|
}
|
|
4114
4249
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwMenuItemComponent, decorators: [{
|
|
4115
4250
|
type: Component,
|
|
@@ -4165,6 +4300,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
4165
4300
|
}], onMouseEnter: [{
|
|
4166
4301
|
type: HostListener,
|
|
4167
4302
|
args: ['mouseenter', ['$event']]
|
|
4303
|
+
}], attrTitle: [{
|
|
4304
|
+
type: HostBinding,
|
|
4305
|
+
args: ['attr.title']
|
|
4168
4306
|
}] } });
|
|
4169
4307
|
|
|
4170
4308
|
class FwMenuComponent {
|
|
@@ -8839,5 +8977,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
8839
8977
|
* Generated bundle index. Do not edit.
|
|
8840
8978
|
*/
|
|
8841
8979
|
|
|
8842
|
-
export { DialogWidth, FwAlertComponent, FwAlertModule, FwAppIconComponent, FwAppIconModule, FwAvatarComponent, FwAvatarListComponent, FwAvatarModule, FwBackButtonComponent, FwBadgeComponent, FwBadgeModule, FwBreadcrumbsComponent, FwBreadcrumbsModule, FwButtonComponent, FwButtonDangerDirective, FwButtonDirective, FwButtonGroupComponent, FwButtonGroupModule, FwButtonModule, FwButtonPrimaryDirective, FwButtonSecondaryDirective, FwButtonSuccessDirective, FwButtonToggleComponent, FwButtonToggleItemComponent, FwButtonToggleModule, FwCardAttributeComponent, FwCardAuthorComponent, FwCardComponent, FwCardContentComponent, FwCardFooterComponent, FwCardHeaderComponent, FwCardModule, FwCell, FwCellDef, FwCheckboxComponent, FwCheckboxModule, FwChipComponent, FwChipModule, FwColumnDef, FwContainedInputComponent, FwContainedInputModule, FwCrumbComponent, FwDateInputComponent, FwDateInputModule, FwDialogActionsComponent, FwDialogComponent, FwDialogConfirmComponent, FwDialogContentComponent, FwDialogHeaderComponent, FwDialogService, FwDialogSimpleComponent, FwDialogsModule, FwFooterCell, FwFooterCellDef, FwFooterRow, FwFooterRowDef, FwFormHeadingComponent, FwFormHeadingModule, FwGridComponent, FwGridItemComponent, FwHeaderCell, FwHeaderCellDef, FwHeaderRow, FwHeaderRowDef, FwIconButtonComponent, FwIconButtonModule, FwIconComponent, FwIconModule, FwLayoutContextComponent, FwLayoutGroupComponent, FwLayoutPanelComponent, FwLayoutSidebarComponent, FwLayoutToolbarComponent, FwLayoutsModule, FwMenuCloseTriggersDirective, FwMenuComponent, FwMenuContainerComponent, FwMenuHeaderComponent, FwMenuItemComponent, FwMenuItemGroupComponent, FwMenuModule, FwMenuSeparatorComponent, FwMenuSubItemComponent, FwMultiSelectMenuComponent, FwNavbarComponent, FwNavbarHeaderComponent, FwNavbarItemComponent, FwNavbarModule, FwNavbarSubItemComponent, FwNoDataRow, FwNumberInputComponent, FwNumberInputModule, FwPaginatorAdvancedComponent, FwPaginatorComponent, FwPaginatorModule, FwPhoneInputComponent, FwPhoneInputModule, FwPopoverComponent, FwPopoverModule, FwPopoverPanelComponent, FwProgressBarComponent, FwProgressModule, FwProgressSpinnerComponent, FwRadioComponent, FwRadioGroupComponent, FwRadioModule, FwRow, FwRowDef, FwSectionHeadingComponent, FwSectionHeadingModule, FwSelectMenuComponent, FwSelectMenuModule, FwSnackbarComponent, FwSnackbarContainerComponent, FwSnackbarModule, FwSnackbarService, FwStepComponent, FwStepDecoratorComponent, FwStepperComponent, FwStepperModule, FwSubsectionHeadingComponent, FwSwitchComponent, FwSwitchModule, FwTabComponent, FwTabPanelComponent, FwTableComponent, FwTableDenseComponent, FwTableModule, FwTabsComponent, FwTabsModule, FwTextAreaInputComponent, FwTextAreaInputModule, FwTextInputComponent, FwTextInputModule, FwTooltipComponent, FwTooltipModule, FwTooltipPanelComponent, FwTypeaheadComponent, FwValidators, FwWrappedInputComponent, FwWrappedInputModule, LayoutWidth, MenuManagerService, MenuRegisterDirective, MinimalTranslationService, TranslationService, allIcons, genMessageId, notBeforeDate, notFutureDate };
|
|
8980
|
+
export { DialogWidth, FwAlertComponent, FwAlertModule, FwAppIconComponent, FwAppIconModule, FwAvatarComponent, FwAvatarListComponent, FwAvatarModule, FwBackButtonComponent, FwBadgeComponent, FwBadgeModule, FwBreadcrumbsComponent, FwBreadcrumbsModule, FwButtonComponent, FwButtonDangerDirective, FwButtonDirective, FwButtonGroupComponent, FwButtonGroupModule, FwButtonModule, FwButtonPrimaryDirective, FwButtonSecondaryDirective, FwButtonSuccessDirective, FwButtonToggleComponent, FwButtonToggleItemComponent, FwButtonToggleModule, FwCardAttributeComponent, FwCardAuthorComponent, FwCardComponent, FwCardContentComponent, FwCardFooterComponent, FwCardHeaderComponent, FwCardModule, FwCell, FwCellDef, FwCheckboxComponent, FwCheckboxModule, FwChipComponent, FwChipModule, FwColumnDef, FwContainedInputComponent, FwContainedInputModule, FwCrumbComponent, FwDateInputComponent, FwDateInputModule, FwDialogActionsComponent, FwDialogComponent, FwDialogConfirmComponent, FwDialogContentComponent, FwDialogHeaderComponent, FwDialogService, FwDialogSimpleComponent, FwDialogsModule, FwFooterCell, FwFooterCellDef, FwFooterRow, FwFooterRowDef, FwFormHeadingComponent, FwFormHeadingModule, FwGridComponent, FwGridItemComponent, FwHeaderCell, FwHeaderCellDef, FwHeaderRow, FwHeaderRowDef, FwIconButtonComponent, FwIconButtonModule, FwIconComponent, FwIconModule, FwLayoutContextComponent, FwLayoutGroupComponent, FwLayoutPanelComponent, FwLayoutSidebarComponent, FwLayoutToolbarComponent, FwLayoutsModule, FwMenuCloseTriggersDirective, FwMenuComponent, FwMenuContainerComponent, FwMenuHeaderComponent, FwMenuItemComponent, FwMenuItemGroupComponent, FwMenuModule, FwMenuSeparatorComponent, FwMenuSubItemComponent, FwMultiSelectMenuComponent, FwNavbarComponent, FwNavbarHeaderComponent, FwNavbarItemComponent, FwNavbarModule, FwNavbarSubItemComponent, FwNoDataRow, FwNumberInputComponent, FwNumberInputModule, FwPaginatorAdvancedComponent, FwPaginatorComponent, FwPaginatorModule, FwPhoneInputComponent, FwPhoneInputModule, FwPopoverComponent, FwPopoverModule, FwPopoverPanelComponent, FwProgressBarComponent, FwProgressModule, FwProgressSpinnerComponent, FwRadioComponent, FwRadioGroupComponent, FwRadioModule, FwRow, FwRowDef, FwSectionHeadingComponent, FwSectionHeadingModule, FwSelectMenuComponent, FwSelectMenuModule, FwSnackbarComponent, FwSnackbarContainerComponent, FwSnackbarModule, FwSnackbarService, FwStepComponent, FwStepDecoratorComponent, FwStepperComponent, FwStepperModule, FwSubsectionHeadingComponent, FwSwitchComponent, FwSwitchModule, FwTabComponent, FwTabPanelComponent, FwTableComponent, FwTableDenseComponent, FwTableModule, FwTabsComponent, FwTabsModule, FwTextAreaInputComponent, FwTextAreaInputModule, FwTextInputComponent, FwTextInputModule, FwTooltipComponent, FwTooltipDirective, FwTooltipModule, FwTooltipPanelComponent, FwTypeaheadComponent, FwValidators, FwWrappedInputComponent, FwWrappedInputModule, LayoutWidth, MenuManagerService, MenuRegisterDirective, MinimalTranslationService, TranslationService, allIcons, genMessageId, notBeforeDate, notFutureDate };
|
|
8843
8981
|
//# sourceMappingURL=flywheel-io-vision.mjs.map
|