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