@flywheel-io/vision 19.5.7 → 19.6.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/dialog/dialog.component.d.ts +1 -0
- package/components/layouts/context/context.component.d.ts +1 -0
- package/components/menu/menu-container/menu-container.component.d.ts +10 -2
- package/components/select-menu/select-menu.component.d.ts +2 -0
- package/components/wrapped-input/wrapped-input.component.d.ts +1 -0
- package/fesm2022/flywheel-io-vision.mjs +84 -27
- package/fesm2022/flywheel-io-vision.mjs.map +1 -1
- package/package.json +1 -1
- package/public-api.d.ts +2 -0
|
@@ -12,6 +12,7 @@ export declare class FwLayoutContextComponent {
|
|
|
12
12
|
iconColor?: 'primary' | 'secondary' | 'danger' | 'slate' | 'warning' | 'success';
|
|
13
13
|
title?: string;
|
|
14
14
|
description?: string;
|
|
15
|
+
get hostTitle(): null;
|
|
15
16
|
get classes(): string;
|
|
16
17
|
static ɵfac: i0.ɵɵFactoryDeclaration<FwLayoutContextComponent, never>;
|
|
17
18
|
static ɵcmp: i0.ɵɵComponentDeclaration<FwLayoutContextComponent, "fw-layout-context", never, { "width": { "alias": "width"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "iconColor": { "alias": "iconColor"; "required": false; }; "title": { "alias": "title"; "required": false; }; "description": { "alias": "description"; "required": false; }; }, {}, never, ["[slot='description']", "fw-button"], true, never>;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { AfterViewInit } from '@angular/core';
|
|
1
|
+
import { AfterViewInit, ElementRef, NgZone } from '@angular/core';
|
|
2
2
|
import { DomSanitizer, SafeStyle } from '@angular/platform-browser';
|
|
3
3
|
import { FwTextInputComponent } from '../../text-input/text-input.component';
|
|
4
4
|
import { FwMenuComponent } from '../menu.component';
|
|
@@ -10,6 +10,11 @@ import * as i1 from "@angular/cdk/coercion";
|
|
|
10
10
|
export type MenuFilterFn = (filter: string, menuItems: readonly FwMenuItemComponent[]) => FwMenuItemComponent[];
|
|
11
11
|
export declare class FwMenuContainerComponent implements AfterViewInit {
|
|
12
12
|
private sanitizer;
|
|
13
|
+
private ngZone;
|
|
14
|
+
menuWrapperRef: ElementRef<HTMLElement>;
|
|
15
|
+
canScrollUp: import("@angular/core").WritableSignal<boolean>;
|
|
16
|
+
canScrollDown: import("@angular/core").WritableSignal<boolean>;
|
|
17
|
+
private scrollInterval;
|
|
13
18
|
width?: string;
|
|
14
19
|
maxHeight?: string;
|
|
15
20
|
minHeight?: string;
|
|
@@ -37,8 +42,11 @@ export declare class FwMenuContainerComponent implements AfterViewInit {
|
|
|
37
42
|
keyHandler: (event: KeyboardEvent) => void;
|
|
38
43
|
get classes(): string;
|
|
39
44
|
get style(): SafeStyle;
|
|
40
|
-
constructor(sanitizer: DomSanitizer);
|
|
45
|
+
constructor(sanitizer: DomSanitizer, ngZone: NgZone);
|
|
41
46
|
ngAfterViewInit(): void;
|
|
47
|
+
updateScrollState(): void;
|
|
48
|
+
startScroll(direction: 'up' | 'down'): void;
|
|
49
|
+
stopScroll(): void;
|
|
42
50
|
noResults: import("@angular/core").WritableSignal<boolean>;
|
|
43
51
|
handleFilterClick(event: Event): void;
|
|
44
52
|
handleFilterInput(event: Event): void;
|
|
@@ -35,6 +35,7 @@ export declare class FwSelectMenuComponent implements OnInit, OnDestroy, Control
|
|
|
35
35
|
textInput: FwTextInputComponent;
|
|
36
36
|
menu: import("@angular/core").Signal<FwMenuComponent>;
|
|
37
37
|
menuItems: import("@angular/core").Signal<readonly FwMenuItemComponent[]>;
|
|
38
|
+
viewMenuItems: import("@angular/core").Signal<readonly FwMenuItemComponent[]>;
|
|
38
39
|
menuItemGroups: import("@angular/core").Signal<readonly FwMenuItemGroupComponent[]>;
|
|
39
40
|
menuSeparators: import("@angular/core").Signal<readonly FwMenuSeparatorComponent[]>;
|
|
40
41
|
change: EventEmitter<any>;
|
|
@@ -63,6 +64,7 @@ export declare class FwSelectMenuComponent implements OnInit, OnDestroy, Control
|
|
|
63
64
|
private _value;
|
|
64
65
|
constructor(ngControl: NgControl);
|
|
65
66
|
ngOnInit(): void;
|
|
67
|
+
private findRenderedMenuItem;
|
|
66
68
|
selectTitle: import("@angular/core").WritableSignal<string>;
|
|
67
69
|
private subscribeToMenuItems;
|
|
68
70
|
private menuItemsWatcher;
|
|
@@ -7,6 +7,7 @@ export declare class FwWrappedInputComponent {
|
|
|
7
7
|
helperText?: string;
|
|
8
8
|
errorText?: string;
|
|
9
9
|
required?: boolean;
|
|
10
|
+
get hostTitle(): null;
|
|
10
11
|
class: boolean;
|
|
11
12
|
static ɵfac: i0.ɵɵFactoryDeclaration<FwWrappedInputComponent, never>;
|
|
12
13
|
static ɵcmp: i0.ɵɵComponentDeclaration<FwWrappedInputComponent, "fw-wrapped-input", never, { "title": { "alias": "title"; "required": false; }; "status": { "alias": "status"; "required": false; }; "statusColor": { "alias": "statusColor"; "required": false; }; "description": { "alias": "description"; "required": false; }; "helperText": { "alias": "helperText"; "required": false; }; "errorText": { "alias": "errorText"; "required": false; }; "required": { "alias": "required"; "required": false; }; }, {}, never, ["fw-form-heading", "fw-button-toggle, fw-date-input, fw-text-input, fw-number-input, fw-phone-input, fw-textarea-input, fw-select, fw-multi-select, fw-checkbox, fw-typeahead, fw-time-zone-select"], true, never>;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as i1$5 from '@angular/common';
|
|
2
2
|
import { NgClass, CommonModule, NgIf, NgStyle, NgTemplateOutlet, NgFor, SlicePipe } from '@angular/common';
|
|
3
3
|
import * as i0 from '@angular/core';
|
|
4
|
-
import { HostBinding, Input, ChangeDetectionStrategy, Component, input, output, NgModule, model, computed, signal, HostListener, ViewEncapsulation, EventEmitter, Output, effect, inject, ElementRef, ViewContainerRef, Directive, contentChildren, viewChild, ChangeDetectorRef, ContentChildren, ViewChild, forwardRef, Optional, Inject, SkipSelf, Injectable, Pipe, ContentChild, DestroyRef, untracked, Host, ViewChildren, linkedSignal, Self, TemplateRef
|
|
4
|
+
import { HostBinding, Input, ChangeDetectionStrategy, Component, input, output, NgModule, model, computed, signal, HostListener, ViewEncapsulation, EventEmitter, Output, effect, inject, ElementRef, ViewContainerRef, Directive, contentChildren, viewChild, ChangeDetectorRef, ContentChildren, ViewChild, forwardRef, Optional, Inject, SkipSelf, Injectable, Pipe, ContentChild, DestroyRef, untracked, Host, ViewChildren, viewChildren, linkedSignal, Self, TemplateRef } from '@angular/core';
|
|
5
5
|
import * as i1 from '@angular/platform-browser';
|
|
6
6
|
import { DomSanitizer } from '@angular/platform-browser';
|
|
7
7
|
import { BehaviorSubject, debounce, timer, distinctUntilChanged, of, Subscription, min, combineLatest, tap, switchMap, map } from 'rxjs';
|
|
@@ -422,6 +422,7 @@ class FwLayoutContextComponent {
|
|
|
422
422
|
this.width = LayoutWidth.Small;
|
|
423
423
|
this.iconColor = 'secondary';
|
|
424
424
|
}
|
|
425
|
+
get hostTitle() { return null; }
|
|
425
426
|
get classes() {
|
|
426
427
|
const classes = ['fw-layout-context'];
|
|
427
428
|
classes.push(`context-width-${this.width}`);
|
|
@@ -432,7 +433,7 @@ class FwLayoutContextComponent {
|
|
|
432
433
|
}
|
|
433
434
|
;
|
|
434
435
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: FwLayoutContextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
435
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: FwLayoutContextComponent, isStandalone: true, selector: "fw-layout-context", inputs: { width: "width", icon: "icon", iconColor: "iconColor", title: "title", description: "description" }, host: { properties: { "attr.class": "this.classes" } }, ngImport: i0, template: "@if (icon) {\n <fw-icon [ngClass]=\"iconColor\">{{ icon }}</fw-icon>\n}\n\n@if (title) {\n <h3>{{ title }}</h3>\n}\n\n@if (description) {\n <p class=\"vision-p3\">{{ description }}</p>\n} @else {\n <ng-content select=\"[slot='description']\"></ng-content>\n}\n\n<div class=\"context-actions\">\n <ng-content select=\"fw-button\"></ng-content>\n</div>\n", styles: [":host{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:50px;max-width:100%}:host fw-icon{font-size:50px;width:50px;max-width:50px}:host fw-icon.primary{color:var(--primary-base)}:host fw-icon.secondary{color:var(--secondary-base)}:host fw-icon.slate{color:var(--slate-base)}:host fw-icon.danger{color:var(--red-base)}:host fw-icon.warning{color:var(--orange-base)}:host fw-icon.success{color:var(--green-base)}:host h3{margin:0}:host p{margin:0;text-align:center;color:var(--typography-muted)}:host .context-actions{display:flex;gap:8px}:host.context-width-small{width:444px}:host.context-width-medium{width:600px}:host.context-width-large{width:900px}:host.context-width-extra-large{width:1200px}\n"], dependencies: [{ kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
|
|
436
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: FwLayoutContextComponent, isStandalone: true, selector: "fw-layout-context", inputs: { width: "width", icon: "icon", iconColor: "iconColor", title: "title", description: "description" }, host: { properties: { "attr.title": "this.hostTitle", "attr.class": "this.classes" } }, ngImport: i0, template: "@if (icon) {\n <fw-icon [ngClass]=\"iconColor\">{{ icon }}</fw-icon>\n}\n\n@if (title) {\n <h3>{{ title }}</h3>\n}\n\n@if (description) {\n <p class=\"vision-p3\">{{ description }}</p>\n} @else {\n <ng-content select=\"[slot='description']\"></ng-content>\n}\n\n<div class=\"context-actions\">\n <ng-content select=\"fw-button\"></ng-content>\n</div>\n", styles: [":host{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:50px;max-width:100%}:host fw-icon{font-size:50px;width:50px;max-width:50px}:host fw-icon.primary{color:var(--primary-base)}:host fw-icon.secondary{color:var(--secondary-base)}:host fw-icon.slate{color:var(--slate-base)}:host fw-icon.danger{color:var(--red-base)}:host fw-icon.warning{color:var(--orange-base)}:host fw-icon.success{color:var(--green-base)}:host h3{margin:0}:host p{margin:0;text-align:center;color:var(--typography-muted)}:host .context-actions{display:flex;gap:8px}:host.context-width-small{width:444px}:host.context-width-medium{width:600px}:host.context-width-large{width:900px}:host.context-width-extra-large{width:1200px}\n"], dependencies: [{ kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
|
|
436
437
|
}
|
|
437
438
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: FwLayoutContextComponent, decorators: [{
|
|
438
439
|
type: Component,
|
|
@@ -451,6 +452,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
451
452
|
type: Input
|
|
452
453
|
}], description: [{
|
|
453
454
|
type: Input
|
|
455
|
+
}], hostTitle: [{
|
|
456
|
+
type: HostBinding,
|
|
457
|
+
args: ['attr.title']
|
|
454
458
|
}], classes: [{
|
|
455
459
|
type: HostBinding,
|
|
456
460
|
args: ['attr.class']
|
|
@@ -3045,6 +3049,7 @@ class FwDialogComponent {
|
|
|
3045
3049
|
this.close = new EventEmitter();
|
|
3046
3050
|
this.isClosing = false;
|
|
3047
3051
|
}
|
|
3052
|
+
get hostTitle() { return null; }
|
|
3048
3053
|
get classes() {
|
|
3049
3054
|
const classes = {
|
|
3050
3055
|
[`dialog-width-${this.width}`]: true,
|
|
@@ -3085,7 +3090,7 @@ class FwDialogComponent {
|
|
|
3085
3090
|
}, 300);
|
|
3086
3091
|
}
|
|
3087
3092
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: FwDialogComponent, deps: [{ token: i1$1.DialogRef, optional: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3088
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: FwDialogComponent, isStandalone: true, selector: "fw-dialog", inputs: { width: "width", title: "title", icon: "icon", iconColor: "iconColor", showClose: "showClose", externalClasses: ["class", "externalClasses"] }, outputs: { close: "close" }, host: { properties: { "class": "this.classes" } }, ngImport: i0, template: "<div class=\"fw-dialog\">\n <fw-icon-button\n *ngIf=\"showClose\"\n tabindex=\"-1\" icon=\"close\" color=\"slate\"\n (click)=\"handleCloseButton()\">\n </fw-icon-button>\n <div class=\"dialog-header\">\n <ng-content select=\"fw-dialog-header\"></ng-content>\n <div class=\"dialog-title\" *ngIf=\"title\">\n <fw-icon *ngIf=\"icon\" [color]=\"iconColor\">{{ icon }}</fw-icon>\n <h3 class=\"vision-h3\">{{ title }}</h3>\n </div>\n </div>\n <div class=\"dialog-body\">\n <ng-content select=\"fw-dialog-content\"></ng-content>\n </div>\n <div class=\"dialog-actions\">\n <ng-content select=\"fw-dialog-actions\"></ng-content>\n </div>\n</div>\n", styles: ["@keyframes slide-in-from-bottom{0%{opacity:0;transform:translateY(100vh)}to{opacity:1;transform:translateY(0)}}@keyframes slide-out-to-bottom{0%{opacity:1;transform:translateY(0)}99%{opacity:0;transform:translateY(100vh)}to{opacity:0;transform:translateY(100vh)}}:host{box-sizing:border-box;background-color:var(--card-background);border:1px solid var(--separations-border);border-radius:8px;display:flex;flex-direction:column;overflow:hidden;animation:slide-in-from-bottom .15s ease-out}:host.dialog-closing{animation:slide-out-to-bottom .15s ease-in forwards}:host.dialog-width-extra-small{width:444px}:host.dialog-width-small{width:600px}:host.dialog-width-medium{width:900px}:host.dialog-width-large{width:1200px}:host.dialog-width-extra-large{width:1536px}:host.dialog-width-responsive{max-width:100vw;margin:0 12px}@media only screen and (width <= 575px){:host.dialog-width-responsive{max-height:92vh;margin-top:4vh;margin-bottom:4vh}:host.dialog-width-responsive .fw-dialog{border-radius:12px}:host.dialog-width-responsive .fw-dialog .dialog-body{max-height:65vh;overflow-y:auto;-webkit-overflow-scrolling:touch}:host.dialog-width-responsive .fw-dialog .dialog-body::-webkit-scrollbar{width:4px}:host.dialog-width-responsive .fw-dialog .dialog-body::-webkit-scrollbar-track{background:var(--separations-base)}:host.dialog-width-responsive .fw-dialog .dialog-body::-webkit-scrollbar-thumb{background:var(--slate-base);border-radius:2px}}@media only screen and (width >= 576px){:host.dialog-width-responsive{width:90vw;max-width:600px;margin:0}}@media only screen and (width >= 768px){:host.dialog-width-responsive{width:80vw;max-width:900px}:host.dialog-width-responsive .fw-dialog .dialog-body{max-height:70vh;overflow-y:auto}}@media only screen and (width >= 992px){:host.dialog-width-responsive{width:60vw;max-width:1200px}}@media only screen and (width >= 1200px){:host.dialog-width-responsive{width:50vw;max-width:1536px}}:host .fw-dialog{position:relative}:host .fw-dialog fw-icon-button{position:absolute;top:4px;right:4px}:host .fw-dialog .dialog-header{background-color:var(--card-header)}:host .fw-dialog .dialog-header .dialog-title{display:flex;gap:8px;box-sizing:border-box;border-bottom:1px solid var(--separations-base);padding:12px 16px;height:44px;overflow:hidden;align-items:center}:host .fw-dialog .dialog-header .dialog-title fw-icon{font-size:22px}:host .fw-dialog .dialog-header .dialog-title h3{overflow:clip visible;min-width:0;white-space:nowrap;text-overflow:ellipsis;margin-right:30px;flex:1}:host .fw-dialog .dialog-header h3{margin:0}:host .fw-dialog .dialog-header:empty{display:none}:host .fw-dialog .dialog-body{background-color:var(--card-background);border-bottom:1px solid var(--separations-base)}:host .fw-dialog .dialog-body:empty{display:none}:host .fw-dialog .dialog-actions{padding:16px}:host .fw-dialog .dialog-actions:empty{display:none}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FwIconButtonComponent, selector: "fw-icon-button", inputs: ["color", "icon", "size", "disabled", "selected", "border"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }] }); }
|
|
3093
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: FwDialogComponent, isStandalone: true, selector: "fw-dialog", inputs: { width: "width", title: "title", icon: "icon", iconColor: "iconColor", showClose: "showClose", externalClasses: ["class", "externalClasses"] }, outputs: { close: "close" }, host: { properties: { "attr.title": "this.hostTitle", "class": "this.classes" } }, ngImport: i0, template: "<div class=\"fw-dialog\">\n <fw-icon-button\n *ngIf=\"showClose\"\n tabindex=\"-1\" icon=\"close\" color=\"slate\"\n (click)=\"handleCloseButton()\">\n </fw-icon-button>\n <div class=\"dialog-header\">\n <ng-content select=\"fw-dialog-header\"></ng-content>\n <div class=\"dialog-title\" *ngIf=\"title\">\n <fw-icon *ngIf=\"icon\" [color]=\"iconColor\">{{ icon }}</fw-icon>\n <h3 class=\"vision-h3\">{{ title }}</h3>\n </div>\n </div>\n <div class=\"dialog-body\">\n <ng-content select=\"fw-dialog-content\"></ng-content>\n </div>\n <div class=\"dialog-actions\">\n <ng-content select=\"fw-dialog-actions\"></ng-content>\n </div>\n</div>\n", styles: ["@keyframes slide-in-from-bottom{0%{opacity:0;transform:translateY(100vh)}to{opacity:1;transform:translateY(0)}}@keyframes slide-out-to-bottom{0%{opacity:1;transform:translateY(0)}99%{opacity:0;transform:translateY(100vh)}to{opacity:0;transform:translateY(100vh)}}:host{box-sizing:border-box;background-color:var(--card-background);border:1px solid var(--separations-border);border-radius:8px;display:flex;flex-direction:column;overflow:hidden;animation:slide-in-from-bottom .15s ease-out}:host.dialog-closing{animation:slide-out-to-bottom .15s ease-in forwards}:host.dialog-width-extra-small{width:444px}:host.dialog-width-small{width:600px}:host.dialog-width-medium{width:900px}:host.dialog-width-large{width:1200px}:host.dialog-width-extra-large{width:1536px}:host.dialog-width-responsive{max-width:100vw;margin:0 12px}@media only screen and (width <= 575px){:host.dialog-width-responsive{max-height:92vh;margin-top:4vh;margin-bottom:4vh}:host.dialog-width-responsive .fw-dialog{border-radius:12px}:host.dialog-width-responsive .fw-dialog .dialog-body{max-height:65vh;overflow-y:auto;-webkit-overflow-scrolling:touch}:host.dialog-width-responsive .fw-dialog .dialog-body::-webkit-scrollbar{width:4px}:host.dialog-width-responsive .fw-dialog .dialog-body::-webkit-scrollbar-track{background:var(--separations-base)}:host.dialog-width-responsive .fw-dialog .dialog-body::-webkit-scrollbar-thumb{background:var(--slate-base);border-radius:2px}}@media only screen and (width >= 576px){:host.dialog-width-responsive{width:90vw;max-width:600px;margin:0}}@media only screen and (width >= 768px){:host.dialog-width-responsive{width:80vw;max-width:900px}:host.dialog-width-responsive .fw-dialog .dialog-body{max-height:70vh;overflow-y:auto}}@media only screen and (width >= 992px){:host.dialog-width-responsive{width:60vw;max-width:1200px}}@media only screen and (width >= 1200px){:host.dialog-width-responsive{width:50vw;max-width:1536px}}:host .fw-dialog{position:relative}:host .fw-dialog fw-icon-button{position:absolute;top:4px;right:4px}:host .fw-dialog .dialog-header{background-color:var(--card-header)}:host .fw-dialog .dialog-header .dialog-title{display:flex;gap:8px;box-sizing:border-box;border-bottom:1px solid var(--separations-base);padding:12px 16px;height:44px;overflow:hidden;align-items:center}:host .fw-dialog .dialog-header .dialog-title fw-icon{font-size:22px}:host .fw-dialog .dialog-header .dialog-title h3{overflow:clip visible;min-width:0;white-space:nowrap;text-overflow:ellipsis;margin-right:30px;flex:1}:host .fw-dialog .dialog-header h3{margin:0}:host .fw-dialog .dialog-header:empty{display:none}:host .fw-dialog .dialog-body{background-color:var(--card-background);border-bottom:1px solid var(--separations-base)}:host .fw-dialog .dialog-body:empty{display:none}:host .fw-dialog .dialog-actions{padding:16px}:host .fw-dialog .dialog-actions:empty{display:none}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FwIconButtonComponent, selector: "fw-icon-button", inputs: ["color", "icon", "size", "disabled", "selected", "border"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }] }); }
|
|
3089
3094
|
}
|
|
3090
3095
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: FwDialogComponent, decorators: [{
|
|
3091
3096
|
type: Component,
|
|
@@ -3111,6 +3116,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
3111
3116
|
args: ['class']
|
|
3112
3117
|
}], close: [{
|
|
3113
3118
|
type: Output
|
|
3119
|
+
}], hostTitle: [{
|
|
3120
|
+
type: HostBinding,
|
|
3121
|
+
args: ['attr.title']
|
|
3114
3122
|
}], classes: [{
|
|
3115
3123
|
type: HostBinding,
|
|
3116
3124
|
args: ['class']
|
|
@@ -5084,8 +5092,12 @@ class FwMenuContainerComponent {
|
|
|
5084
5092
|
margin-top: ${this.offset};
|
|
5085
5093
|
`);
|
|
5086
5094
|
}
|
|
5087
|
-
constructor(sanitizer) {
|
|
5095
|
+
constructor(sanitizer, ngZone) {
|
|
5088
5096
|
this.sanitizer = sanitizer;
|
|
5097
|
+
this.ngZone = ngZone;
|
|
5098
|
+
this.canScrollUp = signal(false);
|
|
5099
|
+
this.canScrollDown = signal(false);
|
|
5100
|
+
this.scrollInterval = null;
|
|
5089
5101
|
this.width = 'inherit';
|
|
5090
5102
|
this.maxHeight = 'auto';
|
|
5091
5103
|
this.minHeight = 'auto';
|
|
@@ -5129,6 +5141,35 @@ class FwMenuContainerComponent {
|
|
|
5129
5141
|
// Ensure filteredMenuItemChange fires on init so consumers
|
|
5130
5142
|
// that depend on it (e.g. displayedOptions) are populated
|
|
5131
5143
|
untracked(() => this.onFilterChange(this.filterText()));
|
|
5144
|
+
setTimeout(() => this.updateScrollState());
|
|
5145
|
+
}
|
|
5146
|
+
updateScrollState() {
|
|
5147
|
+
const el = this.menuWrapperRef?.nativeElement;
|
|
5148
|
+
if (!el) {
|
|
5149
|
+
return;
|
|
5150
|
+
}
|
|
5151
|
+
// eslint-disable-next-line @rx-angular/prefer-no-layout-sensitive-apis
|
|
5152
|
+
this.canScrollUp.set(el.scrollTop > 0);
|
|
5153
|
+
// eslint-disable-next-line @rx-angular/prefer-no-layout-sensitive-apis
|
|
5154
|
+
this.canScrollDown.set(el.scrollTop + el.clientHeight < el.scrollHeight - 1);
|
|
5155
|
+
}
|
|
5156
|
+
startScroll(direction) {
|
|
5157
|
+
// eslint-disable-next-line @rx-angular/no-zone-run-apis
|
|
5158
|
+
this.ngZone.runOutsideAngular(() => {
|
|
5159
|
+
this.scrollInterval = setInterval(() => {
|
|
5160
|
+
const el = this.menuWrapperRef?.nativeElement;
|
|
5161
|
+
if (el) {
|
|
5162
|
+
// eslint-disable-next-line @rx-angular/prefer-no-layout-sensitive-apis
|
|
5163
|
+
el.scrollBy({ top: direction === 'down' ? 80 : -80 });
|
|
5164
|
+
}
|
|
5165
|
+
}, 40);
|
|
5166
|
+
});
|
|
5167
|
+
}
|
|
5168
|
+
stopScroll() {
|
|
5169
|
+
if (this.scrollInterval !== null) {
|
|
5170
|
+
clearInterval(this.scrollInterval);
|
|
5171
|
+
this.scrollInterval = null;
|
|
5172
|
+
}
|
|
5132
5173
|
}
|
|
5133
5174
|
handleFilterClick(event) {
|
|
5134
5175
|
// stops filters in menus from closing the parent menu
|
|
@@ -5145,15 +5186,14 @@ class FwMenuContainerComponent {
|
|
|
5145
5186
|
const filterFn = this.filterFn();
|
|
5146
5187
|
this.filteredMenuItems = filterFn(filter, allMenuItems);
|
|
5147
5188
|
allMenuItems.forEach(menuItem => {
|
|
5148
|
-
|
|
5149
|
-
menuItem.hidden = shouldBeHidden;
|
|
5189
|
+
menuItem.hidden = !this.filteredMenuItems.includes(menuItem);
|
|
5150
5190
|
});
|
|
5151
5191
|
// Hide separators whenever a filter is active
|
|
5152
5192
|
const isFiltering = Boolean(filter && filter.trim() !== '');
|
|
5153
5193
|
[...this.childSeparators(), ...this.additionalSeparators()].forEach(separator => {
|
|
5154
5194
|
separator.hidden = isFiltering;
|
|
5155
5195
|
});
|
|
5156
|
-
// Hide groups
|
|
5196
|
+
// Hide groups where every child menu item is hidden
|
|
5157
5197
|
[...this.childGroups(), ...this.additionalGroups()].forEach(group => {
|
|
5158
5198
|
group.hidden = group.allItemsHidden;
|
|
5159
5199
|
});
|
|
@@ -5161,9 +5201,10 @@ class FwMenuContainerComponent {
|
|
|
5161
5201
|
const allHidden = allMenuItems.length > 0 && allMenuItems.every(item => item.hidden);
|
|
5162
5202
|
this.noResults.set(hasFilter && (allHidden || allMenuItems.length === 0));
|
|
5163
5203
|
this.filteredMenuItemChange.emit(this.filteredMenuItems);
|
|
5204
|
+
setTimeout(() => this.updateScrollState());
|
|
5164
5205
|
}
|
|
5165
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: FwMenuContainerComponent, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5166
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: FwMenuContainerComponent, isStandalone: true, selector: "fw-menu-container, fw-menu-filter", inputs: { width: { classPropertyName: "width", publicName: "width", isSignal: false, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: false, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: false, isRequired: false, transformFunction: null }, border: { classPropertyName: "border", publicName: "border", isSignal: false, isRequired: false, transformFunction: null }, shadow: { classPropertyName: "shadow", publicName: "shadow", isSignal: false, isRequired: false, transformFunction: null }, showFilter: { classPropertyName: "showFilter", publicName: "showFilter", isSignal: false, isRequired: false, transformFunction: (val) => coerceBooleanProperty(val) }, filterText: { classPropertyName: "filterText", publicName: "filterText", isSignal: true, isRequired: false, transformFunction: null }, focusFilterOnMount: { classPropertyName: "focusFilterOnMount", publicName: "focusFilterOnMount", isSignal: false, isRequired: false, transformFunction: (val) => coerceBooleanProperty(val) }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: false, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, filterFn: { classPropertyName: "filterFn", publicName: "filterFn", isSignal: true, isRequired: false, transformFunction: null }, additionalMenuItems: { classPropertyName: "additionalMenuItems", publicName: "additionalMenuItems", isSignal: true, isRequired: false, transformFunction: null }, additionalGroups: { classPropertyName: "additionalGroups", publicName: "additionalGroups", isSignal: true, isRequired: false, transformFunction: null }, additionalSeparators: { classPropertyName: "additionalSeparators", publicName: "additionalSeparators", isSignal: true, isRequired: false, transformFunction: null }, keyHandler: { classPropertyName: "keyHandler", publicName: "keyHandler", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { filteredMenuItemChange: "filteredMenuItemChange", filterChanged: "filterChanged" }, host: { properties: { "attr.class": "this.classes", "style": "this.style" } }, queries: [{ propertyName: "childMenuItems", predicate: FwMenuItemComponent, descendants: true, isSignal: true }, { propertyName: "childSeparators", predicate: FwMenuSeparatorComponent, descendants: true, isSignal: true }, { propertyName: "childGroups", predicate: FwMenuItemGroupComponent, descendants: true, isSignal: true }, { propertyName: "menu", first: true, predicate: FwMenuComponent, descendants: true }], viewQueries: [{ propertyName: "filterRef", first: true, predicate: ["menuFilter"], descendants: true }], ngImport: i0, template: "<div #filterBox *ngIf=\"showFilter\" class=\"filter-box\" cdkMenuBar>\n <fw-text-input\n (click)=\"handleFilterClick($event)\"\n #menuFilter\n (keydown)=\"keyHandler?.($event)\"\n placeholder=\"Search\" leftIcon=\"search\" [autofocus]=\"true\"\n [value]=\"filterText()\" (input)=\"handleFilterInput($event)\">\n </fw-text-input>\n <ng-content select=\".filter-content\"></ng-content>\n</div>\n<div class=\"menu-wrapper\">\n @if (noResults()) {\n <fw-menu-item [title]=\"emptyText()\" [disabled]=\"true\"></fw-menu-item>\n }\n <ng-content></ng-content>\n <ng-content select=\"custom-menu-items\"></ng-content>\n</div>\n", styles: [".fw-menu-container{display:flex;flex-direction:column;border-radius:8px;background:var(--card-background);position:relative}.fw-menu-container.border-default{border:1px solid var(--separations-border)}.fw-menu-container .filter-box{border-top-left-radius:8px;border-top-right-radius:8px;padding:8px;border-bottom:1px solid var(--separations-base);background-color:var(--card-background);max-width:calc(100% - 16px);height:fit-content}.fw-menu-container .menu-wrapper{flex:1;padding:6px 4px;overflow:hidden auto;margin-bottom:4px}.fw-menu-container fw-menu-separator{margin:6px -8px}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: CdkMenuBar, selector: "[cdkMenuBar]", exportAs: ["cdkMenuBar"] }, { kind: "component", type: FwTextInputComponent, selector: "fw-text-input", inputs: ["disabled", "useActionableIcons", "leftIcon", "rightIcon", "prefix", "context", "helperText", "errorText", "errorInIconTooltip", "placeholder", "readOnly", "size", "type", "maxLength", "autofocus", "autocomplete", "value", "error", "width"], outputs: ["leftIconAction", "rightIconAction"] }, { kind: "component", type: FwMenuItemComponent, selector: "fw-menu-item", inputs: ["value", "size", "title", "description", "icon", "iconColor", "disabled", "showCheckbox", "checkboxColor", "multiSelect", "hidden", "collapsed", "href", "target", "subItemsOpen", "mouseEnterHandler", "focused", "selected"], outputs: ["mouseEnterHandlerChange", "click", "focusedChange"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
5206
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: FwMenuContainerComponent, deps: [{ token: i1.DomSanitizer }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5207
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: FwMenuContainerComponent, isStandalone: true, selector: "fw-menu-container, fw-menu-filter", inputs: { width: { classPropertyName: "width", publicName: "width", isSignal: false, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: false, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: false, isRequired: false, transformFunction: null }, border: { classPropertyName: "border", publicName: "border", isSignal: false, isRequired: false, transformFunction: null }, shadow: { classPropertyName: "shadow", publicName: "shadow", isSignal: false, isRequired: false, transformFunction: null }, showFilter: { classPropertyName: "showFilter", publicName: "showFilter", isSignal: false, isRequired: false, transformFunction: (val) => coerceBooleanProperty(val) }, filterText: { classPropertyName: "filterText", publicName: "filterText", isSignal: true, isRequired: false, transformFunction: null }, focusFilterOnMount: { classPropertyName: "focusFilterOnMount", publicName: "focusFilterOnMount", isSignal: false, isRequired: false, transformFunction: (val) => coerceBooleanProperty(val) }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: false, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, filterFn: { classPropertyName: "filterFn", publicName: "filterFn", isSignal: true, isRequired: false, transformFunction: null }, additionalMenuItems: { classPropertyName: "additionalMenuItems", publicName: "additionalMenuItems", isSignal: true, isRequired: false, transformFunction: null }, additionalGroups: { classPropertyName: "additionalGroups", publicName: "additionalGroups", isSignal: true, isRequired: false, transformFunction: null }, additionalSeparators: { classPropertyName: "additionalSeparators", publicName: "additionalSeparators", isSignal: true, isRequired: false, transformFunction: null }, keyHandler: { classPropertyName: "keyHandler", publicName: "keyHandler", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { filteredMenuItemChange: "filteredMenuItemChange", filterChanged: "filterChanged" }, host: { properties: { "attr.class": "this.classes", "style": "this.style" } }, queries: [{ propertyName: "childMenuItems", predicate: FwMenuItemComponent, descendants: true, isSignal: true }, { propertyName: "childSeparators", predicate: FwMenuSeparatorComponent, descendants: true, isSignal: true }, { propertyName: "childGroups", predicate: FwMenuItemGroupComponent, descendants: true, isSignal: true }, { propertyName: "menu", first: true, predicate: FwMenuComponent, descendants: true }], viewQueries: [{ propertyName: "menuWrapperRef", first: true, predicate: ["menuWrapper"], descendants: true }, { propertyName: "filterRef", first: true, predicate: ["menuFilter"], descendants: true }], ngImport: i0, template: "<div #filterBox *ngIf=\"showFilter\" class=\"filter-box\" cdkMenuBar>\n <fw-text-input\n (click)=\"handleFilterClick($event)\"\n #menuFilter\n (keydown)=\"keyHandler?.($event)\"\n placeholder=\"Search\" leftIcon=\"search\" [autofocus]=\"true\"\n [value]=\"filterText()\" (input)=\"handleFilterInput($event)\">\n </fw-text-input>\n <ng-content select=\".filter-content\"></ng-content>\n</div>\n<div\n class=\"scroll-indicator scroll-indicator-top\"\n [class.scroll-indicator-visible]=\"canScrollUp()\"\n (mouseenter)=\"canScrollUp() && startScroll('up')\"\n (mouseleave)=\"stopScroll()\">\n <fw-icon>chevron-up</fw-icon>\n</div>\n<div #menuWrapper class=\"menu-wrapper\" (scroll)=\"updateScrollState()\">\n @if (noResults()) {\n <fw-menu-item [title]=\"emptyText()\" [disabled]=\"true\"></fw-menu-item>\n }\n <ng-content></ng-content>\n <ng-content select=\"custom-menu-items\"></ng-content>\n</div>\n<div\n class=\"scroll-indicator scroll-indicator-bottom\"\n [class.scroll-indicator-visible]=\"canScrollDown()\"\n (mouseenter)=\"canScrollDown() && startScroll('down')\"\n (mouseleave)=\"stopScroll()\">\n <fw-icon>chevron-down</fw-icon>\n</div>\n", styles: [".fw-menu-container{display:flex;flex-direction:column;border-radius:8px;background:var(--card-background);position:relative}.fw-menu-container.border-default{border:1px solid var(--separations-border)}.fw-menu-container .filter-box{border-top-left-radius:8px;border-top-right-radius:8px;padding:8px;border-bottom:1px solid var(--separations-base);background-color:var(--card-background);max-width:calc(100% - 16px);height:fit-content}.fw-menu-container .menu-wrapper{flex:1;padding:6px 4px;overflow:hidden auto;margin-bottom:4px}.fw-menu-container .scroll-indicator{display:flex;align-items:center;justify-content:center;height:0;flex-shrink:0;overflow:hidden;pointer-events:none;cursor:pointer;border:none;background:none;color:var(--typography-muted);width:100%;-webkit-user-select:none;user-select:none;transition:height .1s ease}.fw-menu-container .scroll-indicator fw-icon{pointer-events:none;font-size:16px}.fw-menu-container .scroll-indicator-visible{height:28px;pointer-events:auto}.fw-menu-container .scroll-indicator-visible:hover{background-color:var(--slate-hover);color:var(--typography-base)}.fw-menu-container .scroll-indicator-top{border-bottom:1px solid transparent}.fw-menu-container .scroll-indicator-top.scroll-indicator-visible{border-bottom-color:var(--separations-base)}.fw-menu-container .scroll-indicator-bottom{border-top:1px solid transparent}.fw-menu-container .scroll-indicator-bottom.scroll-indicator-visible{border-top-color:var(--separations-base)}.fw-menu-container fw-menu-separator{margin:6px -8px}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: CdkMenuBar, selector: "[cdkMenuBar]", exportAs: ["cdkMenuBar"] }, { kind: "component", type: FwTextInputComponent, selector: "fw-text-input", inputs: ["disabled", "useActionableIcons", "leftIcon", "rightIcon", "prefix", "context", "helperText", "errorText", "errorInIconTooltip", "placeholder", "readOnly", "size", "type", "maxLength", "autofocus", "autocomplete", "value", "error", "width"], outputs: ["leftIconAction", "rightIconAction"] }, { kind: "component", type: FwMenuItemComponent, selector: "fw-menu-item", inputs: ["value", "size", "title", "description", "icon", "iconColor", "disabled", "showCheckbox", "checkboxColor", "multiSelect", "hidden", "collapsed", "href", "target", "subItemsOpen", "mouseEnterHandler", "focused", "selected"], outputs: ["mouseEnterHandlerChange", "click", "focusedChange"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
5167
5208
|
}
|
|
5168
5209
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: FwMenuContainerComponent, decorators: [{
|
|
5169
5210
|
type: Component,
|
|
@@ -5172,8 +5213,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
5172
5213
|
CdkMenuBar,
|
|
5173
5214
|
FwTextInputComponent,
|
|
5174
5215
|
FwMenuItemComponent,
|
|
5175
|
-
|
|
5176
|
-
|
|
5216
|
+
FwIconComponent,
|
|
5217
|
+
], template: "<div #filterBox *ngIf=\"showFilter\" class=\"filter-box\" cdkMenuBar>\n <fw-text-input\n (click)=\"handleFilterClick($event)\"\n #menuFilter\n (keydown)=\"keyHandler?.($event)\"\n placeholder=\"Search\" leftIcon=\"search\" [autofocus]=\"true\"\n [value]=\"filterText()\" (input)=\"handleFilterInput($event)\">\n </fw-text-input>\n <ng-content select=\".filter-content\"></ng-content>\n</div>\n<div\n class=\"scroll-indicator scroll-indicator-top\"\n [class.scroll-indicator-visible]=\"canScrollUp()\"\n (mouseenter)=\"canScrollUp() && startScroll('up')\"\n (mouseleave)=\"stopScroll()\">\n <fw-icon>chevron-up</fw-icon>\n</div>\n<div #menuWrapper class=\"menu-wrapper\" (scroll)=\"updateScrollState()\">\n @if (noResults()) {\n <fw-menu-item [title]=\"emptyText()\" [disabled]=\"true\"></fw-menu-item>\n }\n <ng-content></ng-content>\n <ng-content select=\"custom-menu-items\"></ng-content>\n</div>\n<div\n class=\"scroll-indicator scroll-indicator-bottom\"\n [class.scroll-indicator-visible]=\"canScrollDown()\"\n (mouseenter)=\"canScrollDown() && startScroll('down')\"\n (mouseleave)=\"stopScroll()\">\n <fw-icon>chevron-down</fw-icon>\n</div>\n", styles: [".fw-menu-container{display:flex;flex-direction:column;border-radius:8px;background:var(--card-background);position:relative}.fw-menu-container.border-default{border:1px solid var(--separations-border)}.fw-menu-container .filter-box{border-top-left-radius:8px;border-top-right-radius:8px;padding:8px;border-bottom:1px solid var(--separations-base);background-color:var(--card-background);max-width:calc(100% - 16px);height:fit-content}.fw-menu-container .menu-wrapper{flex:1;padding:6px 4px;overflow:hidden auto;margin-bottom:4px}.fw-menu-container .scroll-indicator{display:flex;align-items:center;justify-content:center;height:0;flex-shrink:0;overflow:hidden;pointer-events:none;cursor:pointer;border:none;background:none;color:var(--typography-muted);width:100%;-webkit-user-select:none;user-select:none;transition:height .1s ease}.fw-menu-container .scroll-indicator fw-icon{pointer-events:none;font-size:16px}.fw-menu-container .scroll-indicator-visible{height:28px;pointer-events:auto}.fw-menu-container .scroll-indicator-visible:hover{background-color:var(--slate-hover);color:var(--typography-base)}.fw-menu-container .scroll-indicator-top{border-bottom:1px solid transparent}.fw-menu-container .scroll-indicator-top.scroll-indicator-visible{border-bottom-color:var(--separations-base)}.fw-menu-container .scroll-indicator-bottom{border-top:1px solid transparent}.fw-menu-container .scroll-indicator-bottom.scroll-indicator-visible{border-top-color:var(--separations-base)}.fw-menu-container fw-menu-separator{margin:6px -8px}\n"] }]
|
|
5218
|
+
}], ctorParameters: () => [{ type: i1.DomSanitizer }, { type: i0.NgZone }], propDecorators: { menuWrapperRef: [{
|
|
5219
|
+
type: ViewChild,
|
|
5220
|
+
args: ['menuWrapper']
|
|
5221
|
+
}], width: [{
|
|
5177
5222
|
type: Input
|
|
5178
5223
|
}], maxHeight: [{
|
|
5179
5224
|
type: Input
|
|
@@ -6361,11 +6406,12 @@ class FwSelectMenuComponent {
|
|
|
6361
6406
|
this.width = input('200px');
|
|
6362
6407
|
this.optionsWidth = input(undefined);
|
|
6363
6408
|
this.minOptionsHeight = input(undefined);
|
|
6364
|
-
this.maxOptionsHeight = input(
|
|
6409
|
+
this.maxOptionsHeight = input('400px');
|
|
6365
6410
|
this.size = input('medium');
|
|
6366
6411
|
this.placeholder = input('Select something...');
|
|
6367
6412
|
this.menu = viewChild(FwMenuComponent);
|
|
6368
6413
|
this.menuItems = contentChildren(FwMenuItemComponent, { descendants: true });
|
|
6414
|
+
this.viewMenuItems = viewChildren(FwMenuItemComponent);
|
|
6369
6415
|
this.menuItemGroups = contentChildren(FwMenuItemGroupComponent, { descendants: true });
|
|
6370
6416
|
this.menuSeparators = contentChildren(FwMenuSeparatorComponent, { descendants: true });
|
|
6371
6417
|
// eslint-disable-next-line @angular-eslint/no-output-native
|
|
@@ -6462,13 +6508,22 @@ class FwSelectMenuComponent {
|
|
|
6462
6508
|
}
|
|
6463
6509
|
ngOnInit() {
|
|
6464
6510
|
const onOpenSub = this.trigger.opened.subscribe(() => {
|
|
6465
|
-
|
|
6511
|
+
// Initialize navigation state synchronously so the first arrow key press
|
|
6512
|
+
// navigates relative to the selected item rather than being swallowed by setup
|
|
6513
|
+
this.inFocusOpen = true;
|
|
6514
|
+
this.preFocusValue = this.value;
|
|
6515
|
+
this.initializeFocusedIndex();
|
|
6516
|
+
const currentValue = this.selectValue();
|
|
6466
6517
|
setTimeout(() => {
|
|
6467
|
-
|
|
6518
|
+
// eslint-disable-next-line @rx-angular/prefer-no-layout-sensitive-apis
|
|
6519
|
+
this.findRenderedMenuItem(currentValue)?.scrollIntoView({ behavior: 'instant', block: 'center' });
|
|
6468
6520
|
});
|
|
6469
6521
|
});
|
|
6470
6522
|
this.subscriptions.push(onOpenSub);
|
|
6471
6523
|
}
|
|
6524
|
+
findRenderedMenuItem(value) {
|
|
6525
|
+
return [...this.viewMenuItems(), ...this.menuItems()].find(item => item.value === value);
|
|
6526
|
+
}
|
|
6472
6527
|
subscribeToMenuItems() {
|
|
6473
6528
|
// Clear old subscriptions
|
|
6474
6529
|
this.menuItemClickSubscriptions.forEach(sub => sub.unsubscribe());
|
|
@@ -6580,7 +6635,7 @@ class FwSelectMenuComponent {
|
|
|
6580
6635
|
const vProp = this.valueProperty();
|
|
6581
6636
|
const itemValue = this.useFullOptionAsValue()
|
|
6582
6637
|
? JSON.stringify(item)
|
|
6583
|
-
: item[vProp];
|
|
6638
|
+
: item[vProp]?.toString();
|
|
6584
6639
|
return itemValue === currentValue();
|
|
6585
6640
|
}
|
|
6586
6641
|
});
|
|
@@ -6630,15 +6685,7 @@ class FwSelectMenuComponent {
|
|
|
6630
6685
|
input.select();
|
|
6631
6686
|
}, 0);
|
|
6632
6687
|
}
|
|
6633
|
-
//
|
|
6634
|
-
// Use setTimeout to ensure menu is rendered before we try to update it
|
|
6635
|
-
setTimeout(() => {
|
|
6636
|
-
if (this.trigger?.isOpen()) {
|
|
6637
|
-
this.inFocusOpen = true;
|
|
6638
|
-
this.preFocusValue = this.value;
|
|
6639
|
-
this.initializeFocusedIndex();
|
|
6640
|
-
}
|
|
6641
|
-
}, 0);
|
|
6688
|
+
// Navigation state is initialized in the trigger.opened subscription
|
|
6642
6689
|
}
|
|
6643
6690
|
handleKeyDown(event) {
|
|
6644
6691
|
// Handle Enter key when typing
|
|
@@ -6744,6 +6791,7 @@ class FwSelectMenuComponent {
|
|
|
6744
6791
|
const selectedItem = availableItems[this.focused];
|
|
6745
6792
|
// Handle both options (objects) and menuItems (FwMenuItemComponent)
|
|
6746
6793
|
if (selectedItem instanceof FwMenuItemComponent) {
|
|
6794
|
+
// eslint-disable-next-line @rx-angular/prefer-no-layout-sensitive-apis
|
|
6747
6795
|
selectedItem.scrollIntoView();
|
|
6748
6796
|
this.selectValue.set(selectedItem.value || '');
|
|
6749
6797
|
// Manually update selected state for all menu items
|
|
@@ -6762,6 +6810,8 @@ class FwSelectMenuComponent {
|
|
|
6762
6810
|
this.selectValue.set(newValue);
|
|
6763
6811
|
// Update highlighting to show the focused item
|
|
6764
6812
|
this.updateHighlighting();
|
|
6813
|
+
// eslint-disable-next-line @rx-angular/prefer-no-layout-sensitive-apis
|
|
6814
|
+
this.findRenderedMenuItem(newValue)?.scrollIntoView();
|
|
6765
6815
|
// Don't call updateValue during arrow navigation while typing
|
|
6766
6816
|
// Just update selectValue for highlighting, actual value update happens on Enter
|
|
6767
6817
|
if (!this.isTyping()) {
|
|
@@ -6781,6 +6831,7 @@ class FwSelectMenuComponent {
|
|
|
6781
6831
|
const selectedItem = availableItems[this.focused];
|
|
6782
6832
|
// Handle both options (objects) and menuItems (FwMenuItemComponent)
|
|
6783
6833
|
if (selectedItem instanceof FwMenuItemComponent) {
|
|
6834
|
+
// eslint-disable-next-line @rx-angular/prefer-no-layout-sensitive-apis
|
|
6784
6835
|
selectedItem.scrollIntoView();
|
|
6785
6836
|
this.selectValue.set(selectedItem.value || '');
|
|
6786
6837
|
// Manually update selected state for all menu items
|
|
@@ -6799,6 +6850,8 @@ class FwSelectMenuComponent {
|
|
|
6799
6850
|
this.selectValue.set(newValue);
|
|
6800
6851
|
// Update highlighting to show the focused item
|
|
6801
6852
|
this.updateHighlighting();
|
|
6853
|
+
// eslint-disable-next-line @rx-angular/prefer-no-layout-sensitive-apis
|
|
6854
|
+
this.findRenderedMenuItem(newValue)?.scrollIntoView();
|
|
6802
6855
|
// Don't call updateValue during arrow navigation while typing
|
|
6803
6856
|
// Just update selectValue for highlighting, actual value update happens on Enter
|
|
6804
6857
|
if (!this.isTyping()) {
|
|
@@ -6963,7 +7016,7 @@ class FwSelectMenuComponent {
|
|
|
6963
7016
|
}
|
|
6964
7017
|
}
|
|
6965
7018
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: FwSelectMenuComponent, deps: [{ token: i1$4.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6966
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: FwSelectMenuComponent, isStandalone: true, selector: "fw-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, valueProperty: { classPropertyName: "valueProperty", publicName: "valueProperty", isSignal: true, isRequired: false, transformFunction: null }, useFullOptionAsValue: { classPropertyName: "useFullOptionAsValue", publicName: "useFullOptionAsValue", isSignal: true, isRequired: false, transformFunction: null }, titleProperty: { classPropertyName: "titleProperty", publicName: "titleProperty", isSignal: true, isRequired: false, transformFunction: null }, iconProperty: { classPropertyName: "iconProperty", publicName: "iconProperty", isSignal: true, isRequired: false, transformFunction: null }, staticIcon: { classPropertyName: "staticIcon", publicName: "staticIcon", isSignal: true, isRequired: false, transformFunction: null }, descriptionProperty: { classPropertyName: "descriptionProperty", publicName: "descriptionProperty", isSignal: true, isRequired: false, transformFunction: null }, showFilter: { classPropertyName: "showFilter", publicName: "showFilter", isSignal: true, isRequired: false, transformFunction: null }, showReset: { classPropertyName: "showReset", publicName: "showReset", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, errored: { classPropertyName: "errored", publicName: "errored", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, optionsWidth: { classPropertyName: "optionsWidth", publicName: "optionsWidth", isSignal: true, isRequired: false, transformFunction: null }, minOptionsHeight: { classPropertyName: "minOptionsHeight", publicName: "minOptionsHeight", isSignal: true, isRequired: false, transformFunction: null }, maxOptionsHeight: { classPropertyName: "maxOptionsHeight", publicName: "maxOptionsHeight", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, valueDisplayFn: { classPropertyName: "valueDisplayFn", publicName: "valueDisplayFn", isSignal: true, isRequired: false, transformFunction: null }, filterFn: { classPropertyName: "filterFn", publicName: "filterFn", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", change: "change", filterChanged: "filterChanged" }, host: { listeners: { "document:click": "outsideClick($event)" }, properties: { "class.disabled": "this.disabledClass" } }, queries: [{ propertyName: "menuItems", predicate: FwMenuItemComponent, descendants: true, isSignal: true }, { propertyName: "menuItemGroups", predicate: FwMenuItemGroupComponent, descendants: true, isSignal: true }, { propertyName: "menuSeparators", predicate: FwMenuSeparatorComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "menu", first: true, predicate: FwMenuComponent, descendants: true, isSignal: true }, { propertyName: "trigger", first: true, predicate: CdkMenuTrigger, descendants: true, static: true }, { propertyName: "textInput", first: true, predicate: FwTextInputComponent, descendants: true }], ngImport: i0, template: "<div #wrapper [style.width]=\"width()\">\n <fw-text-input\n fwMenuRegister\n [cdkMenuTriggerFor]=\"selectMenu\"\n [value]=\"inputDisplayValue()\"\n [leftIcon]=\"staticIcon() || selectIcon || null\"\n [rightIcon]=\"(selectTitle()&&showReset())?'close-circled':'chevron-down'\"\n (rightIconAction)=\"handleReset()\"\n [useActionableIcons]=\"true\"\n [placeholder]=\"placeholder()\"\n [size]=\"size()\"\n [error]=\"errored() || (invalid && touched)\"\n (input)=\"onInputChange($event)\"\n (keyup)=\"handleKeyUp($event)\"\n (keydown)=\"handleKeyDown($event)\"\n (focus)=\"handleFocus()\"\n (click)=\"handleInputClick()\"\n [readOnly]=\"false\">\n </fw-text-input>\n <ng-template #selectMenu>\n @if (!disabled()) {\n <fw-menu-container\n [filterFn]=\"filterFn()\"\n [filterText]=\"filterValue()\"\n [additionalMenuItems]=\"menuItems()\"\n [additionalGroups]=\"menuItemGroups()\"\n [additionalSeparators]=\"menuSeparators()\"\n [showFilter]=\"showFilter()\" [width]=\"optionsWidth() || wrapper.offsetWidth + 'px'\"\n [maxHeight]=\"maxOptionsHeight()\" [minHeight]=\"minOptionsHeight()\" (filterChanged)=\"onFilterChanged($event)\">\n <fw-menu [disabled]=\"disabled()\" [value]=\"selectValue()\" (change)=\"handleClick($any($event))\">\n @if (menuItems().length === 0) {\n @for (item of optionsWithValues(); track item.trackingId) {\n <fw-menu-item\n [title]=\"item.raw[titleProperty()]?.toString()\"\n [description]=\"$any(item.raw[descriptionProperty()])\"\n [value]=\"item.value\"\n [icon]=\"$any(item.raw[iconProperty()])\"\n [disabled]=\"$any(item.raw).disabled\"\n />\n }\n }\n <div #menuContentWrapper>\n <ng-content select=\"[fw-menu-item, fw-menu-separator, fw-menu-item-group]\"></ng-content>\n </div>\n </fw-menu>\n </fw-menu-container>\n }\n </ng-template>\n</div>\n", styles: [":host{box-sizing:border-box;max-width:100%}:host>div{cursor:pointer}:host.disabled{opacity:.4;cursor:not-allowed}:host.disabled>div{pointer-events:none}\n"], dependencies: [{ kind: "component", type: FwTextInputComponent, selector: "fw-text-input", inputs: ["disabled", "useActionableIcons", "leftIcon", "rightIcon", "prefix", "context", "helperText", "errorText", "errorInIconTooltip", "placeholder", "readOnly", "size", "type", "maxLength", "autofocus", "autocomplete", "value", "error", "width"], outputs: ["leftIconAction", "rightIconAction"] }, { kind: "directive", type: MenuRegisterDirective, selector: "[fwMenuRegister]" }, { kind: "directive", type: CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "component", type: FwMenuContainerComponent, selector: "fw-menu-container, fw-menu-filter", inputs: ["width", "maxHeight", "minHeight", "border", "shadow", "showFilter", "filterText", "focusFilterOnMount", "offset", "emptyText", "filterFn", "additionalMenuItems", "additionalGroups", "additionalSeparators", "keyHandler"], outputs: ["filteredMenuItemChange", "filterChanged"] }, { kind: "component", type: FwMenuComponent, selector: "fw-menu", inputs: ["disabled", "size", "multiSelect", "useCheckbox", "value"], outputs: ["change"] }, { kind: "component", type: FwMenuItemComponent, selector: "fw-menu-item", inputs: ["value", "size", "title", "description", "icon", "iconColor", "disabled", "showCheckbox", "checkboxColor", "multiSelect", "hidden", "collapsed", "href", "target", "subItemsOpen", "mouseEnterHandler", "focused", "selected"], outputs: ["mouseEnterHandlerChange", "click", "focusedChange"] }] }); }
|
|
7019
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: FwSelectMenuComponent, isStandalone: true, selector: "fw-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, valueProperty: { classPropertyName: "valueProperty", publicName: "valueProperty", isSignal: true, isRequired: false, transformFunction: null }, useFullOptionAsValue: { classPropertyName: "useFullOptionAsValue", publicName: "useFullOptionAsValue", isSignal: true, isRequired: false, transformFunction: null }, titleProperty: { classPropertyName: "titleProperty", publicName: "titleProperty", isSignal: true, isRequired: false, transformFunction: null }, iconProperty: { classPropertyName: "iconProperty", publicName: "iconProperty", isSignal: true, isRequired: false, transformFunction: null }, staticIcon: { classPropertyName: "staticIcon", publicName: "staticIcon", isSignal: true, isRequired: false, transformFunction: null }, descriptionProperty: { classPropertyName: "descriptionProperty", publicName: "descriptionProperty", isSignal: true, isRequired: false, transformFunction: null }, showFilter: { classPropertyName: "showFilter", publicName: "showFilter", isSignal: true, isRequired: false, transformFunction: null }, showReset: { classPropertyName: "showReset", publicName: "showReset", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, errored: { classPropertyName: "errored", publicName: "errored", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, optionsWidth: { classPropertyName: "optionsWidth", publicName: "optionsWidth", isSignal: true, isRequired: false, transformFunction: null }, minOptionsHeight: { classPropertyName: "minOptionsHeight", publicName: "minOptionsHeight", isSignal: true, isRequired: false, transformFunction: null }, maxOptionsHeight: { classPropertyName: "maxOptionsHeight", publicName: "maxOptionsHeight", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, valueDisplayFn: { classPropertyName: "valueDisplayFn", publicName: "valueDisplayFn", isSignal: true, isRequired: false, transformFunction: null }, filterFn: { classPropertyName: "filterFn", publicName: "filterFn", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", change: "change", filterChanged: "filterChanged" }, host: { listeners: { "document:click": "outsideClick($event)" }, properties: { "class.disabled": "this.disabledClass" } }, queries: [{ propertyName: "menuItems", predicate: FwMenuItemComponent, descendants: true, isSignal: true }, { propertyName: "menuItemGroups", predicate: FwMenuItemGroupComponent, descendants: true, isSignal: true }, { propertyName: "menuSeparators", predicate: FwMenuSeparatorComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "menu", first: true, predicate: FwMenuComponent, descendants: true, isSignal: true }, { propertyName: "viewMenuItems", predicate: FwMenuItemComponent, descendants: true, isSignal: true }, { propertyName: "trigger", first: true, predicate: CdkMenuTrigger, descendants: true, static: true }, { propertyName: "textInput", first: true, predicate: FwTextInputComponent, descendants: true }], ngImport: i0, template: "<div #wrapper [style.width]=\"width()\">\n <fw-text-input\n fwMenuRegister\n [cdkMenuTriggerFor]=\"selectMenu\"\n [value]=\"inputDisplayValue()\"\n [leftIcon]=\"staticIcon() || selectIcon || null\"\n [rightIcon]=\"(selectTitle()&&showReset())?'close-circled':'chevron-down'\"\n (rightIconAction)=\"handleReset()\"\n [useActionableIcons]=\"true\"\n [placeholder]=\"placeholder()\"\n [size]=\"size()\"\n [error]=\"errored() || (invalid && touched)\"\n (input)=\"onInputChange($event)\"\n (keyup)=\"handleKeyUp($event)\"\n (keydown)=\"handleKeyDown($event)\"\n (focus)=\"handleFocus()\"\n (click)=\"handleInputClick()\"\n [readOnly]=\"false\">\n </fw-text-input>\n <ng-template #selectMenu>\n @if (!disabled()) {\n <fw-menu-container\n [filterFn]=\"filterFn()\"\n [filterText]=\"filterValue()\"\n [additionalMenuItems]=\"menuItems()\"\n [additionalGroups]=\"menuItemGroups()\"\n [additionalSeparators]=\"menuSeparators()\"\n [showFilter]=\"showFilter()\" [width]=\"optionsWidth() || wrapper.offsetWidth + 'px'\"\n [maxHeight]=\"maxOptionsHeight()\" [minHeight]=\"minOptionsHeight()\" (filterChanged)=\"onFilterChanged($event)\">\n <fw-menu [disabled]=\"disabled()\" [value]=\"selectValue()\" (change)=\"handleClick($any($event))\">\n @if (menuItems().length === 0) {\n @for (item of optionsWithValues(); track item.trackingId) {\n <fw-menu-item\n [title]=\"item.raw[titleProperty()]?.toString()\"\n [description]=\"$any(item.raw[descriptionProperty()])\"\n [value]=\"item.value\"\n [icon]=\"$any(item.raw[iconProperty()])\"\n [disabled]=\"$any(item.raw).disabled\"\n />\n }\n }\n <div #menuContentWrapper>\n <ng-content select=\"[fw-menu-item, fw-menu-separator, fw-menu-item-group]\"></ng-content>\n </div>\n </fw-menu>\n </fw-menu-container>\n }\n </ng-template>\n</div>\n", styles: [":host{box-sizing:border-box;max-width:100%}:host>div{cursor:pointer}:host.disabled{opacity:.4;cursor:not-allowed}:host.disabled>div{pointer-events:none}\n"], dependencies: [{ kind: "component", type: FwTextInputComponent, selector: "fw-text-input", inputs: ["disabled", "useActionableIcons", "leftIcon", "rightIcon", "prefix", "context", "helperText", "errorText", "errorInIconTooltip", "placeholder", "readOnly", "size", "type", "maxLength", "autofocus", "autocomplete", "value", "error", "width"], outputs: ["leftIconAction", "rightIconAction"] }, { kind: "directive", type: MenuRegisterDirective, selector: "[fwMenuRegister]" }, { kind: "directive", type: CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "component", type: FwMenuContainerComponent, selector: "fw-menu-container, fw-menu-filter", inputs: ["width", "maxHeight", "minHeight", "border", "shadow", "showFilter", "filterText", "focusFilterOnMount", "offset", "emptyText", "filterFn", "additionalMenuItems", "additionalGroups", "additionalSeparators", "keyHandler"], outputs: ["filteredMenuItemChange", "filterChanged"] }, { kind: "component", type: FwMenuComponent, selector: "fw-menu", inputs: ["disabled", "size", "multiSelect", "useCheckbox", "value"], outputs: ["change"] }, { kind: "component", type: FwMenuItemComponent, selector: "fw-menu-item", inputs: ["value", "size", "title", "description", "icon", "iconColor", "disabled", "showCheckbox", "checkboxColor", "multiSelect", "hidden", "collapsed", "href", "target", "subItemsOpen", "mouseEnterHandler", "focused", "selected"], outputs: ["mouseEnterHandlerChange", "click", "focusedChange"] }] }); }
|
|
6967
7020
|
}
|
|
6968
7021
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: FwSelectMenuComponent, decorators: [{
|
|
6969
7022
|
type: Component,
|
|
@@ -9981,8 +10034,9 @@ class FwWrappedInputComponent {
|
|
|
9981
10034
|
this.statusColor = 'slate';
|
|
9982
10035
|
this.class = true;
|
|
9983
10036
|
}
|
|
10037
|
+
get hostTitle() { return null; }
|
|
9984
10038
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: FwWrappedInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9985
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: FwWrappedInputComponent, isStandalone: true, selector: "fw-wrapped-input", inputs: { title: "title", status: "status", statusColor: "statusColor", description: "description", helperText: "helperText", errorText: "errorText", required: "required" }, host: { properties: { "class.fw-wrapped-input": "this.class" } }, ngImport: i0, template: "<label>\n <fw-form-heading\n *ngIf=\"title\" [title]=\"title\" [description]=\"description\"\n [required]=\"required\" [status]=\"status\" [statusColor]=\"statusColor\">\n </fw-form-heading>\n <ng-content select=\"fw-form-heading\"></ng-content>\n</label>\n<div class=\"input-wrapper\">\n <ng-content\n select=\"fw-button-toggle, fw-date-input, fw-text-input, fw-number-input, fw-phone-input, fw-textarea-input, fw-select, fw-multi-select, fw-checkbox, fw-typeahead, fw-time-zone-select\"></ng-content>\n</div>\n<p class=\"vision-p4 helper-text\" *ngIf=\"!!helperText && !errorText\">{{ helperText }}</p>\n<p class=\"vision-p4 error-text\" *ngIf=\"!!errorText\">{{ errorText }}</p>\n", styles: [".fw-wrapped-input{display:flex;flex-direction:column;flex:1}.fw-wrapped-input .input-wrapper{max-width:100%;display:flex;flex-direction:row;flex:1;gap:16px}.fw-wrapped-input .input-wrapper>*{flex:1}.fw-wrapped-input .helper-text,.fw-wrapped-input .error-text{margin-top:4px;color:var(--typography-light);line-height:13px;margin-left:6px;margin-bottom:0;text-align:left}.fw-wrapped-input .error-text{color:var(--red-base)}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FwFormHeadingComponent, selector: "fw-form-heading", inputs: ["title", "description", "required", "status", "statusColor"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
10039
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: FwWrappedInputComponent, isStandalone: true, selector: "fw-wrapped-input", inputs: { title: "title", status: "status", statusColor: "statusColor", description: "description", helperText: "helperText", errorText: "errorText", required: "required" }, host: { properties: { "attr.title": "this.hostTitle", "class.fw-wrapped-input": "this.class" } }, ngImport: i0, template: "<label>\n <fw-form-heading\n *ngIf=\"title\" [title]=\"title\" [description]=\"description\"\n [required]=\"required\" [status]=\"status\" [statusColor]=\"statusColor\">\n </fw-form-heading>\n <ng-content select=\"fw-form-heading\"></ng-content>\n</label>\n<div class=\"input-wrapper\">\n <ng-content\n select=\"fw-button-toggle, fw-date-input, fw-text-input, fw-number-input, fw-phone-input, fw-textarea-input, fw-select, fw-multi-select, fw-checkbox, fw-typeahead, fw-time-zone-select\"></ng-content>\n</div>\n<p class=\"vision-p4 helper-text\" *ngIf=\"!!helperText && !errorText\">{{ helperText }}</p>\n<p class=\"vision-p4 error-text\" *ngIf=\"!!errorText\">{{ errorText }}</p>\n", styles: [".fw-wrapped-input{display:flex;flex-direction:column;flex:1}.fw-wrapped-input .input-wrapper{max-width:100%;display:flex;flex-direction:row;flex:1;gap:16px}.fw-wrapped-input .input-wrapper>*{flex:1}.fw-wrapped-input .helper-text,.fw-wrapped-input .error-text{margin-top:4px;color:var(--typography-light);line-height:13px;margin-left:6px;margin-bottom:0;text-align:left}.fw-wrapped-input .error-text{color:var(--red-base)}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FwFormHeadingComponent, selector: "fw-form-heading", inputs: ["title", "description", "required", "status", "statusColor"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
9986
10040
|
}
|
|
9987
10041
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: FwWrappedInputComponent, decorators: [{
|
|
9988
10042
|
type: Component,
|
|
@@ -10001,6 +10055,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
10001
10055
|
type: Input
|
|
10002
10056
|
}], required: [{
|
|
10003
10057
|
type: Input
|
|
10058
|
+
}], hostTitle: [{
|
|
10059
|
+
type: HostBinding,
|
|
10060
|
+
args: ['attr.title']
|
|
10004
10061
|
}], class: [{
|
|
10005
10062
|
type: HostBinding,
|
|
10006
10063
|
args: ['class.fw-wrapped-input']
|
|
@@ -10035,5 +10092,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
10035
10092
|
* Generated bundle index. Do not edit.
|
|
10036
10093
|
*/
|
|
10037
10094
|
|
|
10038
|
-
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, FwTextComponent, FwTextInputComponent, FwTextInputModule, FwTimeZoneSelectComponent, FwTooltipComponent, FwTooltipDirective, FwTooltipModule, FwTooltipPanelComponent, FwTypeaheadComponent, FwValidators, FwWrappedInputComponent, FwWrappedInputModule, LayoutWidth, MenuManagerService, MenuRegisterDirective, MinimalTranslationService, NoopValueAccessorDirective, TranslationService, allIcons, genMessageId, notBeforeDate, notFutureDate };
|
|
10095
|
+
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, FwTagComponent, FwTagModule, FwTextAreaInputComponent, FwTextAreaInputModule, FwTextComponent, FwTextInputComponent, FwTextInputModule, FwTimeZoneSelectComponent, FwTooltipComponent, FwTooltipDirective, FwTooltipModule, FwTooltipPanelComponent, FwTypeaheadComponent, FwValidators, FwWrappedInputComponent, FwWrappedInputModule, LayoutWidth, MenuManagerService, MenuRegisterDirective, MinimalTranslationService, NoopValueAccessorDirective, TranslationService, allIcons, genMessageId, notBeforeDate, notFutureDate };
|
|
10039
10096
|
//# sourceMappingURL=flywheel-io-vision.mjs.map
|