@flywheel-io/vision 21.2.1 → 21.3.1
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.
|
@@ -556,11 +556,11 @@ class FwLayoutPanelComponent {
|
|
|
556
556
|
this.padded = input(true, ...(ngDevMode ? [{ debugName: "padded" }] : /* istanbul ignore next */ []));
|
|
557
557
|
}
|
|
558
558
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: FwLayoutPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
559
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.18", type: FwLayoutPanelComponent, isStandalone: true, selector: "fw-layout-panel", inputs: { height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, fitted: { classPropertyName: "fitted", publicName: "fitted", isSignal: true, isRequired: false, transformFunction: null }, border: { classPropertyName: "border", publicName: "border", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, margin: { classPropertyName: "margin", publicName: "margin", isSignal: true, isRequired: false, transformFunction: null }, padded: { classPropertyName: "padded", publicName: "padded", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<main\n [ngClass]=\"[fitted() ? 'fitted' : '', margin() ? 'margin' : '', rounded() ? 'rounded' : '', 'border-' + border()]\"\n [ngStyle]=\"{ height: height() }\"\n>\n <ng-content select=\"header\"></ng-content>\n <article [ngClass]=\"[padded() ? 'padded' : '']\">\n <ng-content></ng-content>\n </article>\n <ng-content select=\"footer\"></ng-content>\n</main>\n", styles: ["main{flex:1;display:flex;flex-direction:column;overflow:auto;background-color:var(--card-background);position:relative}main.margin{margin:16px}main header{background-color:var(--card-header);display:flex;align-items:center;gap:16px;padding:16px;white-space:nowrap;box-sizing:border-box;border-bottom:1px var(--separations-divider) solid}main header
|
|
559
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.18", type: FwLayoutPanelComponent, isStandalone: true, selector: "fw-layout-panel", inputs: { height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, fitted: { classPropertyName: "fitted", publicName: "fitted", isSignal: true, isRequired: false, transformFunction: null }, border: { classPropertyName: "border", publicName: "border", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, margin: { classPropertyName: "margin", publicName: "margin", isSignal: true, isRequired: false, transformFunction: null }, padded: { classPropertyName: "padded", publicName: "padded", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<main\n [ngClass]=\"[fitted() ? 'fitted' : '', margin() ? 'margin' : '', rounded() ? 'rounded' : '', 'border-' + border()]\"\n [ngStyle]=\"{ height: height() }\"\n>\n <ng-content select=\"header\"></ng-content>\n <article [ngClass]=\"[padded() ? 'padded' : '']\">\n <ng-content></ng-content>\n </article>\n <ng-content select=\"footer\"></ng-content>\n</main>\n", styles: ["main{flex:1;display:flex;flex-direction:column;overflow:auto;background-color:var(--card-background);position:relative}main.margin{margin:16px}main header{background-color:var(--card-header);display:flex;align-items:center;gap:16px;padding:16px;white-space:nowrap;box-sizing:border-box;border-bottom:1px var(--separations-divider) solid}main header>:first-child{flex:1;margin:0;overflow:hidden}main article{flex-grow:1;overflow-x:auto;display:flex;flex-direction:column}main article.padded{padding:16px}main article hr{border:0;border-bottom:1px var(--separations-divider) solid;width:calc(100% + 32px);margin:16px -16px}main footer{background-color:var(--card-background);display:flex;align-items:center;justify-content:flex-end;gap:16px;padding:16px;height:66px;white-space:nowrap;box-sizing:border-box;border-top:1px var(--separations-divider) solid;overflow:hidden}main footer h1,main footer h2,main footer h3,main footer h4,main footer h5,main footer h6,main footer p{margin:0}main.border-all{border:1px var(--separations-divider) solid}main.border-left{border-left:1px var(--separations-divider) solid}main.border-right{border-right:1px var(--separations-divider) solid}main.rounded{border-radius:10px}main.fitted{overflow:hidden}main.fitted header{position:absolute;top:0;left:0;right:0}main.fitted header~article{margin-top:52px}main.fitted article:has(+footer){margin-bottom:66px}main.fitted footer{position:absolute;bottom:0;left:0;right:0}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
560
560
|
}
|
|
561
561
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: FwLayoutPanelComponent, decorators: [{
|
|
562
562
|
type: Component,
|
|
563
|
-
args: [{ selector: 'fw-layout-panel', encapsulation: ViewEncapsulation.None, imports: [NgClass, NgStyle], template: "<main\n [ngClass]=\"[fitted() ? 'fitted' : '', margin() ? 'margin' : '', rounded() ? 'rounded' : '', 'border-' + border()]\"\n [ngStyle]=\"{ height: height() }\"\n>\n <ng-content select=\"header\"></ng-content>\n <article [ngClass]=\"[padded() ? 'padded' : '']\">\n <ng-content></ng-content>\n </article>\n <ng-content select=\"footer\"></ng-content>\n</main>\n", styles: ["main{flex:1;display:flex;flex-direction:column;overflow:auto;background-color:var(--card-background);position:relative}main.margin{margin:16px}main header{background-color:var(--card-header);display:flex;align-items:center;gap:16px;padding:16px;white-space:nowrap;box-sizing:border-box;border-bottom:1px var(--separations-divider) solid}main header
|
|
563
|
+
args: [{ selector: 'fw-layout-panel', encapsulation: ViewEncapsulation.None, imports: [NgClass, NgStyle], template: "<main\n [ngClass]=\"[fitted() ? 'fitted' : '', margin() ? 'margin' : '', rounded() ? 'rounded' : '', 'border-' + border()]\"\n [ngStyle]=\"{ height: height() }\"\n>\n <ng-content select=\"header\"></ng-content>\n <article [ngClass]=\"[padded() ? 'padded' : '']\">\n <ng-content></ng-content>\n </article>\n <ng-content select=\"footer\"></ng-content>\n</main>\n", styles: ["main{flex:1;display:flex;flex-direction:column;overflow:auto;background-color:var(--card-background);position:relative}main.margin{margin:16px}main header{background-color:var(--card-header);display:flex;align-items:center;gap:16px;padding:16px;white-space:nowrap;box-sizing:border-box;border-bottom:1px var(--separations-divider) solid}main header>:first-child{flex:1;margin:0;overflow:hidden}main article{flex-grow:1;overflow-x:auto;display:flex;flex-direction:column}main article.padded{padding:16px}main article hr{border:0;border-bottom:1px var(--separations-divider) solid;width:calc(100% + 32px);margin:16px -16px}main footer{background-color:var(--card-background);display:flex;align-items:center;justify-content:flex-end;gap:16px;padding:16px;height:66px;white-space:nowrap;box-sizing:border-box;border-top:1px var(--separations-divider) solid;overflow:hidden}main footer h1,main footer h2,main footer h3,main footer h4,main footer h5,main footer h6,main footer p{margin:0}main.border-all{border:1px var(--separations-divider) solid}main.border-left{border-left:1px var(--separations-divider) solid}main.border-right{border-right:1px var(--separations-divider) solid}main.rounded{border-radius:10px}main.fitted{overflow:hidden}main.fitted header{position:absolute;top:0;left:0;right:0}main.fitted header~article{margin-top:52px}main.fitted article:has(+footer){margin-bottom:66px}main.fitted footer{position:absolute;bottom:0;left:0;right:0}\n"] }]
|
|
564
564
|
}], propDecorators: { height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], fitted: [{ type: i0.Input, args: [{ isSignal: true, alias: "fitted", required: false }] }], border: [{ type: i0.Input, args: [{ isSignal: true, alias: "border", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], margin: [{ type: i0.Input, args: [{ isSignal: true, alias: "margin", required: false }] }], padded: [{ type: i0.Input, args: [{ isSignal: true, alias: "padded", required: false }] }] } });
|
|
565
565
|
|
|
566
566
|
/**
|
|
@@ -2891,7 +2891,7 @@ class FwContainedInputComponent {
|
|
|
2891
2891
|
useExisting: FwContainedInputComponent,
|
|
2892
2892
|
multi: true,
|
|
2893
2893
|
},
|
|
2894
|
-
], ngImport: i0, template: "<div class=\"heading-area\">\n
|
|
2894
|
+
], ngImport: i0, template: "<div class=\"content\">\n <div class=\"heading-area\">\n <ng-content select=\"fw-avatar\"></ng-content>\n <div>\n <h4 class=\"vision-h4 section-heading\">\n {{ title() }}\n @if (status()) {\n <span class=\"status\">{{ status().toUpperCase() }}</span>\n }\n <ng-content select=\"fw-icon\"></ng-content>\n </h4>\n @if (description()) {\n <p class=\"vision-p3\">{{ description() }}</p>\n }\n </div>\n </div>\n <div class=\"input-content\">\n @if (inputVariant() === 'switch') {\n <fw-switch [checked]=\"checked()\" [disabled]=\"disabled()\" color=\"primary\"></fw-switch>\n }\n @if (inputVariant() === 'checkbox') {\n <fw-checkbox [checked]=\"checked()\" [disabled]=\"disabled()\" color=\"primary\"></fw-checkbox>\n }\n </div>\n</div>\n\n<div class=\"custom-content\" (click)=\"$event.stopPropagation()\">\n <ng-content></ng-content>\n</div>\n", styles: [":host{align-items:center;border-radius:8px;border:1px var(--separations-base) solid;cursor:pointer;display:flex;flex-direction:column;gap:16px;padding:16px}:host .content{align-items:center;display:flex;flex:1;gap:16px;justify-content:space-between;width:100%}:host:hover{border:1px solid var(--primary-border);background:var(--primary-hover)}:host.checked{border:1px solid var(--primary-border);background:var(--primary-focus)}:host.position-start .content{flex-direction:row-reverse}:host .custom-content{width:100%;cursor:auto}:host .custom-content:empty{display:none}:host .heading-area{display:flex;align-items:center;gap:16px;flex:1}:host .heading-area h4{color:var(--typography-base);margin:0;display:flex;align-items:center;gap:5px}:host .heading-area h4 .status{color:var(--primary-base)}:host .heading-area p{color:var(--typography-muted);margin:0;line-height:140%;display:flex;align-items:center;gap:3px}:host .heading-area p a{color:var(--typography-muted)}:host .heading-area fw-icon.heading-icon{box-sizing:border-box;color:var(--primary-base);width:44px;height:44px;font-size:32px;text-align:center;justify-content:center;padding:6px}:host .input-content fw-switch{margin:0 8px 0 -8px;width:36px;display:block}:host .input-content fw-checkbox{margin:0}:host.disabled{border:1px solid var(--separations-base);background:none;opacity:.4;cursor:not-allowed}\n"], dependencies: [{ kind: "component", type: FwSwitchComponent, selector: "fw-switch", inputs: ["name", "title", "titlePosition", "size", "color", "disabled", "checked", "ariaLabel"], outputs: ["disabledChange", "checkedChange", "change"] }, { kind: "component", type: FwCheckboxComponent, selector: "fw-checkbox", inputs: ["value", "checked", "name", "disabled", "size", "color", "title", "focused", "ariaLabel"], outputs: ["checkedChange", "disabledChange", "sizeChange", "colorChange", "focusedChange", "change"] }] }); }
|
|
2895
2895
|
}
|
|
2896
2896
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: FwContainedInputComponent, decorators: [{
|
|
2897
2897
|
type: Component,
|
|
@@ -2901,7 +2901,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
|
|
|
2901
2901
|
useExisting: FwContainedInputComponent,
|
|
2902
2902
|
multi: true,
|
|
2903
2903
|
},
|
|
2904
|
-
], imports: [FwSwitchComponent, FwCheckboxComponent], template: "<div class=\"heading-area\">\n
|
|
2904
|
+
], imports: [FwSwitchComponent, FwCheckboxComponent], template: "<div class=\"content\">\n <div class=\"heading-area\">\n <ng-content select=\"fw-avatar\"></ng-content>\n <div>\n <h4 class=\"vision-h4 section-heading\">\n {{ title() }}\n @if (status()) {\n <span class=\"status\">{{ status().toUpperCase() }}</span>\n }\n <ng-content select=\"fw-icon\"></ng-content>\n </h4>\n @if (description()) {\n <p class=\"vision-p3\">{{ description() }}</p>\n }\n </div>\n </div>\n <div class=\"input-content\">\n @if (inputVariant() === 'switch') {\n <fw-switch [checked]=\"checked()\" [disabled]=\"disabled()\" color=\"primary\"></fw-switch>\n }\n @if (inputVariant() === 'checkbox') {\n <fw-checkbox [checked]=\"checked()\" [disabled]=\"disabled()\" color=\"primary\"></fw-checkbox>\n }\n </div>\n</div>\n\n<div class=\"custom-content\" (click)=\"$event.stopPropagation()\">\n <ng-content></ng-content>\n</div>\n", styles: [":host{align-items:center;border-radius:8px;border:1px var(--separations-base) solid;cursor:pointer;display:flex;flex-direction:column;gap:16px;padding:16px}:host .content{align-items:center;display:flex;flex:1;gap:16px;justify-content:space-between;width:100%}:host:hover{border:1px solid var(--primary-border);background:var(--primary-hover)}:host.checked{border:1px solid var(--primary-border);background:var(--primary-focus)}:host.position-start .content{flex-direction:row-reverse}:host .custom-content{width:100%;cursor:auto}:host .custom-content:empty{display:none}:host .heading-area{display:flex;align-items:center;gap:16px;flex:1}:host .heading-area h4{color:var(--typography-base);margin:0;display:flex;align-items:center;gap:5px}:host .heading-area h4 .status{color:var(--primary-base)}:host .heading-area p{color:var(--typography-muted);margin:0;line-height:140%;display:flex;align-items:center;gap:3px}:host .heading-area p a{color:var(--typography-muted)}:host .heading-area fw-icon.heading-icon{box-sizing:border-box;color:var(--primary-base);width:44px;height:44px;font-size:32px;text-align:center;justify-content:center;padding:6px}:host .input-content fw-switch{margin:0 8px 0 -8px;width:36px;display:block}:host .input-content fw-checkbox{margin:0}:host.disabled{border:1px solid var(--separations-base);background:none;opacity:.4;cursor:not-allowed}\n"] }]
|
|
2905
2905
|
}], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], inputPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputPosition", required: false }] }], inputVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputVariant", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], change: [{
|
|
2906
2906
|
type: Output
|
|
2907
2907
|
}], clicked: [{
|
|
@@ -6393,7 +6393,7 @@ class FwSelectMenuComponent {
|
|
|
6393
6393
|
}
|
|
6394
6394
|
}
|
|
6395
6395
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: FwSelectMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6396
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.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: { 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: "wrapper", first: true, predicate: ["wrapper"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "panel", first: true, predicate: FwMenuContainerComponent, 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]=\"
|
|
6396
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.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: { 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: "wrapper", first: true, predicate: ["wrapper"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "panel", first: true, predicate: FwMenuContainerComponent, 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 @let isReset = selectTitle() && showReset();\n <fw-text-input\n fwMenuRegister\n [cdkMenuTriggerFor]=\"selectMenu\"\n [value]=\"inputDisplayValue()\"\n [leftIcon]=\"staticIcon() || selectIcon || null\"\n [rightIcon]=\"isReset ?'close-circled':'chevron-down'\"\n (rightIconAction)=\"isReset ? handleReset() : null\"\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 role=\"combobox\"\n [ariaExpanded]=\"isMenuOpen()\"\n [ariaControls]=\"listboxId\"\n ariaAutocomplete=\"list\"\n [ariaActiveDescendant]=\"getActiveDescendantId()\">\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\n role=\"listbox\"\n [id]=\"listboxId\"\n [disabled]=\"disabled()\"\n [value]=\"selectValue()\"\n (change)=\"handleClick($any($event))\"\n >\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", "leftIconLabel", "rightIconLabel", "prefix", "context", "ariaLabel", "required", "role", "ariaExpanded", "ariaControls", "ariaAutocomplete", "ariaActiveDescendant", "helperText", "errorText", "errorInIconTooltip", "placeholder", "readOnly", "size", "type", "maxLength", "autofocus", "autocomplete", "value", "error", "width"], outputs: ["disabledChange", "leftIconAction", "rightIconAction"] }, { kind: "directive", type: MenuRegisterDirective, selector: "[fwMenuRegister]" }, { kind: "directive", type: CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData", "cdkMenuTriggerTransformOriginOn"], 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", "role", "id"], outputs: ["disabledChange", "valueChange", "change"] }, { kind: "component", type: FwMenuItemComponent, selector: "fw-menu-item", inputs: ["itemRole", "value", "size", "title", "description", "icon", "iconColor", "disabled", "showCheckbox", "checkboxColor", "multiSelect", "hidden", "collapsed", "href", "target", "subItemsOpen", "mouseEnterHandler", "focused", "selected"], outputs: ["itemRoleChange", "sizeChange", "disabledChange", "showCheckboxChange", "multiSelectChange", "hiddenChange", "subItemsOpenChange", "mouseEnterHandlerChange", "click", "focusedChange", "selectedChange"] }] }); }
|
|
6397
6397
|
}
|
|
6398
6398
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: FwSelectMenuComponent, decorators: [{
|
|
6399
6399
|
type: Component,
|
|
@@ -6404,7 +6404,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
|
|
|
6404
6404
|
FwMenuContainerComponent,
|
|
6405
6405
|
FwMenuComponent,
|
|
6406
6406
|
FwMenuItemComponent,
|
|
6407
|
-
], 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]=\"
|
|
6407
|
+
], template: "<div #wrapper [style.width]=\"width()\">\n @let isReset = selectTitle() && showReset();\n <fw-text-input\n fwMenuRegister\n [cdkMenuTriggerFor]=\"selectMenu\"\n [value]=\"inputDisplayValue()\"\n [leftIcon]=\"staticIcon() || selectIcon || null\"\n [rightIcon]=\"isReset ?'close-circled':'chevron-down'\"\n (rightIconAction)=\"isReset ? handleReset() : null\"\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 role=\"combobox\"\n [ariaExpanded]=\"isMenuOpen()\"\n [ariaControls]=\"listboxId\"\n ariaAutocomplete=\"list\"\n [ariaActiveDescendant]=\"getActiveDescendantId()\">\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\n role=\"listbox\"\n [id]=\"listboxId\"\n [disabled]=\"disabled()\"\n [value]=\"selectValue()\"\n (change)=\"handleClick($any($event))\"\n >\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"] }]
|
|
6408
6408
|
}], ctorParameters: () => [], propDecorators: { disabledClass: [{
|
|
6409
6409
|
type: HostBinding,
|
|
6410
6410
|
args: ['class.disabled']
|
|
@@ -6584,6 +6584,9 @@ class FwFormRendererComponent {
|
|
|
6584
6584
|
isRequired(field) {
|
|
6585
6585
|
return this.requiredByKey().get(field.key) ?? false;
|
|
6586
6586
|
}
|
|
6587
|
+
isSectionHidden(section) {
|
|
6588
|
+
return this.hideSectionByKey().get(section.key) ?? false;
|
|
6589
|
+
}
|
|
6587
6590
|
isSection(item) {
|
|
6588
6591
|
return !('type' in item);
|
|
6589
6592
|
}
|
|
@@ -6635,6 +6638,7 @@ class FwFormRendererComponent {
|
|
|
6635
6638
|
// out of the field objects themselves and recomputed onBlur (see onFieldBlur).
|
|
6636
6639
|
this.hideByKey = signal(new Map(), ...(ngDevMode ? [{ debugName: "hideByKey" }] : /* istanbul ignore next */ []));
|
|
6637
6640
|
this.requiredByKey = signal(new Map(), ...(ngDevMode ? [{ debugName: "requiredByKey" }] : /* istanbul ignore next */ []));
|
|
6641
|
+
this.hideSectionByKey = signal(new Map(), ...(ngDevMode ? [{ debugName: "hideSectionByKey" }] : /* istanbul ignore next */ []));
|
|
6638
6642
|
// Sections start expanded; a key present in the set is expanded. Tracked explicitly rather
|
|
6639
6643
|
// than left to cdk-accordion-item's own state so focus entering a collapsed section (e.g.
|
|
6640
6644
|
// tabbing through fields) can force it back open — see onSectionContentFocusIn.
|
|
@@ -6649,6 +6653,7 @@ class FwFormRendererComponent {
|
|
|
6649
6653
|
this.destroyRef = inject(DestroyRef);
|
|
6650
6654
|
this.currentKeys = [];
|
|
6651
6655
|
this.currentFields = [];
|
|
6656
|
+
this.currentSections = [];
|
|
6652
6657
|
// Emits right before each buildForm() call so the previous FormGroup's valueChanges/
|
|
6653
6658
|
// statusChanges subscriptions are torn down when superseded, not just on component destroy.
|
|
6654
6659
|
this.formRebuilt$ = new Subject();
|
|
@@ -6661,9 +6666,10 @@ class FwFormRendererComponent {
|
|
|
6661
6666
|
const incomingKeys = flat.map((f) => f.key);
|
|
6662
6667
|
const keysChanged = incomingKeys.length !== this.currentKeys.length ||
|
|
6663
6668
|
incomingKeys.some((k, i) => k !== this.currentKeys[i]);
|
|
6669
|
+
this.currentSections = data.fields.filter(this.isSection);
|
|
6664
6670
|
if (keysChanged) {
|
|
6665
6671
|
this.currentKeys = incomingKeys;
|
|
6666
|
-
this.expandedSectionKeys.set(new Set(
|
|
6672
|
+
this.expandedSectionKeys.set(new Set(this.currentSections.map((s) => s.key)));
|
|
6667
6673
|
this.buildForm(flat);
|
|
6668
6674
|
}
|
|
6669
6675
|
else {
|
|
@@ -6688,14 +6694,10 @@ class FwFormRendererComponent {
|
|
|
6688
6694
|
}
|
|
6689
6695
|
buildForm(fields) {
|
|
6690
6696
|
this.formRebuilt$.next();
|
|
6691
|
-
const initialHide =
|
|
6692
|
-
const initialRequired = new Map();
|
|
6693
|
-
for (const field of fields) {
|
|
6694
|
-
initialHide.set(field.key, !this.evaluateRule(field.visible, {}, true));
|
|
6695
|
-
initialRequired.set(field.key, this.evaluateRule(field.requiredWhenVisible, {}, false));
|
|
6696
|
-
}
|
|
6697
|
+
const { hide: initialHide, required: initialRequired, hideSections: initialHideSections } = this.computeVisibility(fields, {});
|
|
6697
6698
|
this.hideByKey.set(initialHide);
|
|
6698
6699
|
this.requiredByKey.set(initialRequired);
|
|
6700
|
+
this.hideSectionByKey.set(initialHideSections);
|
|
6699
6701
|
const controls = fields.reduce((acc, field) => {
|
|
6700
6702
|
if (field.type === FieldType.Checkbox) {
|
|
6701
6703
|
acc[field.key] = new FormControl([]);
|
|
@@ -6741,14 +6743,10 @@ class FwFormRendererComponent {
|
|
|
6741
6743
|
return;
|
|
6742
6744
|
}
|
|
6743
6745
|
const normalized = this.normalizeValues(formGroup.value, this.currentFields);
|
|
6744
|
-
const hide =
|
|
6745
|
-
const required = new Map();
|
|
6746
|
-
for (const field of this.currentFields) {
|
|
6747
|
-
hide.set(field.key, !this.evaluateRule(field.visible, normalized, true));
|
|
6748
|
-
required.set(field.key, this.evaluateRule(field.requiredWhenVisible, normalized, false));
|
|
6749
|
-
}
|
|
6746
|
+
const { hide, required, hideSections } = this.computeVisibility(this.currentFields, normalized);
|
|
6750
6747
|
this.hideByKey.set(hide);
|
|
6751
6748
|
this.requiredByKey.set(required);
|
|
6749
|
+
this.hideSectionByKey.set(hideSections);
|
|
6752
6750
|
formGroup.updateValueAndValidity();
|
|
6753
6751
|
this.flatFields.set([...this.currentFields]);
|
|
6754
6752
|
}
|
|
@@ -6808,6 +6806,30 @@ class FwFormRendererComponent {
|
|
|
6808
6806
|
}
|
|
6809
6807
|
return Boolean(jsonLogic.apply({ and: rules }, values));
|
|
6810
6808
|
}
|
|
6809
|
+
/**
|
|
6810
|
+
* Evaluates hide/requiredWhenVisible for every field and hide for every section. A hidden
|
|
6811
|
+
* section forces every one of its descendant fields hidden too, overriding whatever those
|
|
6812
|
+
* fields' own `visible` logic would otherwise evaluate to.
|
|
6813
|
+
*/
|
|
6814
|
+
computeVisibility(fields, values) {
|
|
6815
|
+
const hide = new Map();
|
|
6816
|
+
const required = new Map();
|
|
6817
|
+
const hideSections = new Map();
|
|
6818
|
+
for (const field of fields) {
|
|
6819
|
+
hide.set(field.key, !this.evaluateRule(field.visible, values, true));
|
|
6820
|
+
required.set(field.key, this.evaluateRule(field.requiredWhenVisible, values, false));
|
|
6821
|
+
}
|
|
6822
|
+
for (const section of this.currentSections) {
|
|
6823
|
+
const sectionHidden = !this.evaluateRule(section.visible, values, true);
|
|
6824
|
+
hideSections.set(section.key, sectionHidden);
|
|
6825
|
+
if (sectionHidden) {
|
|
6826
|
+
for (const field of section.fields) {
|
|
6827
|
+
hide.set(field.key, true);
|
|
6828
|
+
}
|
|
6829
|
+
}
|
|
6830
|
+
}
|
|
6831
|
+
return { hide, required, hideSections };
|
|
6832
|
+
}
|
|
6811
6833
|
normalizeValues(values, fields) {
|
|
6812
6834
|
const result = {};
|
|
6813
6835
|
for (const field of fields) {
|
|
@@ -6816,7 +6838,7 @@ class FwFormRendererComponent {
|
|
|
6816
6838
|
return result;
|
|
6817
6839
|
}
|
|
6818
6840
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: FwFormRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6819
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: FwFormRendererComponent, isStandalone: true, selector: "fw-form-renderer", inputs: { formData: { classPropertyName: "formData", publicName: "formData", isSignal: true, isRequired: false, transformFunction: null }, sectionBorder: { classPropertyName: "sectionBorder", publicName: "sectionBorder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", statusChange: "statusChange" }, ngImport: i0, template: "@if (form() && formData()) {\n <form [formGroup]=\"form()\" (focusout)=\"onFieldBlur()\" class=\"fw-form-renderer-form\">\n\n <ng-template #wrappedInput let-field>\n <fw-wrapped-input\n [title]=\"field.label || ''\"\n [description]=\"field.description || ''\"\n [helperText]=\"field.helperText || ''\"\n [errorText]=\"field.errorText\"\n [required]=\"isRequired(field) || null\">\n @switch (field.type) {\n @case (FieldType.Text) {\n <fw-text-input [formControlName]=\"field.key\" [placeholder]=\"field.placeholder || ''\"></fw-text-input>\n }\n @case (FieldType.Int) {\n <fw-number-input [formControlName]=\"field.key\" numberType=\"integer\" [placeholder]=\"field.placeholder || ''\"></fw-number-input>\n }\n @case (FieldType.Float) {\n <fw-number-input [formControlName]=\"field.key\" numberType=\"float\" [placeholder]=\"field.placeholder || ''\"></fw-number-input>\n }\n @case (FieldType.TextArea) {\n <fw-textarea-input [formControlName]=\"field.key\" [placeholder]=\"field.placeholder || ''\"></fw-textarea-input>\n }\n @case (FieldType.Date) {\n <fw-date-input [formControlName]=\"field.key\" [placeholder]=\"field.placeholder || 'mm/dd/yyyy'\"></fw-date-input>\n }\n @case (FieldType.Phone) {\n <fw-phone-input [formControlName]=\"field.key\" [placeholder]=\"field.placeholder || ''\"></fw-phone-input>\n }\n @case (FieldType.Select) {\n <fw-select\n [formControlName]=\"field.key\"\n [options]=\"field.options || []\"\n valueProperty=\"value\"\n titleProperty=\"label\"\n placeholder=\"Select an option\"\n width=\"100%\"\n ></fw-select>\n }\n @case (FieldType.Checkbox) {\n <fw-checkbox-group [attr.test-id]=\"field.key + '-checkbox-group'\" [formControlName]=\"field.key\" direction=\"vertical\">\n @for (opt of field.options || []; track opt.value) {\n <fw-checkbox [attr.test-id]=\"field.key + '-checkbox-' + opt.value\" [value]=\"opt.value\" [title]=\"opt.label || opt.value\"></fw-checkbox>\n }\n </fw-checkbox-group>\n }\n @case (FieldType.Radio) {\n <fw-radio-group [formControlName]=\"field.key\" direction=\"vertical\">\n @for (opt of field.options || []; track opt.value) {\n <fw-radio-button [value]=\"opt.value\" [title]=\"opt.label || opt.value\" color=\"primary\"></fw-radio-button>\n }\n </fw-radio-group>\n }\n }\n </fw-wrapped-input>\n </ng-template>\n\n <ng-template #fieldRow let-field>\n @if (!isHidden(field)) {\n <div class=\"field-row\">\n @switch (field.type) {\n\n @case (FieldType.Instruction) {\n <div class=\"field-group\">\n @if (field.label) {\n <p class=\"field-group-label vision-label\">{{ field.label }}</p>\n }\n @if (field.description) {\n <p class=\"vision-p3 field-group-description\">{{ field.description }}</p>\n }\n </div>\n }\n\n @case (FieldType.Paragraph) {\n @if (field.label) {\n <p class=\"field-group-label vision-label\">{{ field.label }}</p>\n }\n <p class=\"vision-p3 field-paragraph\">{{ field.description }}</p>\n }\n\n @case (FieldType.Switch) {\n <fw-contained-input\n [title]=\"field.label || ''\"\n [description]=\"field.description || ''\"\n [formControlName]=\"field.key\">\n </fw-contained-input>\n }\n\n @default {\n <ng-container [ngTemplateOutlet]=\"wrappedInput\" [ngTemplateOutletContext]=\"{ $implicit: field }\"></ng-container>\n }\n\n }\n </div>\n }\n </ng-template>\n\n <cdk-accordion multi>\n @for (item of structuredItems(); track item.key) {\n @if (isSection(item)) {\n <cdk-accordion-item\n #sectionItem=\"cdkAccordionItem\"\n [expanded]=\"isSectionExpanded(item)\"\n (expandedChange)=\"onSectionToggle(item, $event)\">\n <div class=\"section-accordion\" [class.section-accordion-bordered]=\"sectionBorder()\">\n <button class=\"section-toggle\" type=\"button\" (click)=\"sectionItem.toggle()\">\n <span class=\"section-title-group\">\n <span class=\"vision-h4\">{{ item.title }}</span>\n @if (item.description) {\n <span class=\"vision-p3 section-description\">{{ item.description }}</span>\n }\n </span>\n <fw-icon [class.rotated]=\"!sectionItem.expanded\" size=\"small\" color=\"primary\">chevron-down</fw-icon>\n </button>\n <div class=\"section-content\" [class.expanded]=\"sectionItem.expanded\" (focusin)=\"onSectionContentFocusIn(item)\">\n @for (field of item.fields; track field.key) {\n <ng-container [ngTemplateOutlet]=\"fieldRow\" [ngTemplateOutletContext]=\"{ $implicit: field }\"></ng-container>\n }\n </div>\n </div>\n </cdk-accordion-item>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fieldRow\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n }\n }\n </cdk-accordion>\n\n </form>\n}\n", styles: [":host{display:flex;flex-direction:column;gap:10px;height:100%;overflow-y:auto;padding:16px 20px;box-sizing:border-box}.fw-form-renderer-form{display:flex;flex-direction:column;gap:10px;outline:none}.field-paragraph{margin:0;color:var(--typography-muted)}fw-select,fw-multi-select{display:block;width:100%}.field-group{display:flex;flex-direction:column;gap:6px}.field-group .field-group-label{margin:0;font-weight:500}.field-group .field-group-description{margin:0;color:var(--typography-muted)}cdk-accordion{display:flex;flex-direction:column;gap:10px}.section-accordion{border-radius:6px;overflow:hidden}.section-accordion.section-accordion-bordered{border:1px solid var(--separations-base)}.section-toggle{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:10px 14px;background:var(--surface-subtle);border:none;border-bottom:1px solid var(--separations-base);cursor:pointer;text-align:left}.section-toggle fw-icon{flex-shrink:0;transition:transform .15s ease-out}.section-toggle fw-icon.rotated{transform:rotate(-90deg)}.section-title-group{display:flex;flex-direction:column;gap:2px}.section-description{color:var(--typography-muted)}.section-content{height:0;overflow:hidden;transition:height .15s ease-out;display:flex;flex-direction:column;gap:10px;padding:0 14px}.section-content.expanded{height:calc-size(auto,size);padding:14px}\n"], dependencies: [{ kind: "directive", type: CdkAccordion, selector: "cdk-accordion, [cdkAccordion]", inputs: ["multi"], exportAs: ["cdkAccordion"] }, { kind: "directive", type: CdkAccordionItem, selector: "cdk-accordion-item, [cdkAccordionItem]", inputs: ["expanded", "disabled"], outputs: ["closed", "opened", "destroyed", "expandedChange"], exportAs: ["cdkAccordionItem"] }, { kind: "component", type: FwCheckboxComponent, selector: "fw-checkbox", inputs: ["value", "checked", "name", "disabled", "size", "color", "title", "focused", "ariaLabel"], outputs: ["checkedChange", "disabledChange", "sizeChange", "colorChange", "focusedChange", "change"] }, { kind: "component", type: FwCheckboxGroupComponent, selector: "fw-checkbox-group", inputs: ["value", "color", "size", "disabled", "direction"], outputs: ["valueChange", "disabledChange", "change"] }, { kind: "component", type: FwContainedInputComponent, selector: "fw-contained-input", inputs: ["title", "description", "status", "inputPosition", "inputVariant", "checked", "disabled"], outputs: ["checkedChange", "disabledChange", "change"] }, { kind: "component", type: FwDateInputComponent, selector: "fw-date-input", inputs: ["disabled", "useActionableIcons", "leftIcon", "prefix", "helperText", "errorText", "placeholder", "readOnly", "size", "type", "max", "min", "step", "autofocus", "autocomplete", "error", "value"], outputs: ["disabledChange", "leftIconAction"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["ariaLabel", "size", "color"] }, { kind: "component", type: FwNumberInputComponent, selector: "fw-number-input", inputs: ["disabled", "useActionableIcons", "leftIcon", "rightIcon", "prefix", "context", "placeholder", "readOnly", "size", "min", "max", "step", "arrows", "numberType", "autofocus", "autocomplete", "error", "value"], outputs: ["disabledChange", "leftIconAction", "rightIconAction"] }, { kind: "component", type: FwPhoneInputComponent, selector: "fw-phone-input", inputs: ["preferredCountries", "onlyCountries", "enableCountrySearch", "showCountrySelector", "size", "rightIcon", "helperText", "errorText", "placeholder", "readOnly", "error", "value", "disabled", "format"], outputs: ["valueChange", "countryChanged"] }, { kind: "component", type: FwRadioComponent, selector: "fw-radio-button", inputs: ["value", "checked", "group", "disabled", "size", "color", "title", "focused"], outputs: ["checkedChange", "groupChange", "disabledChange", "sizeChange", "colorChange", "focusedChange", "change"] }, { kind: "component", type: FwRadioGroupComponent, selector: "fw-radio-group", inputs: ["value", "group", "color", "size", "disabled", "direction"], outputs: ["valueChange", "disabledChange", "change"] }, { kind: "component", type: FwSelectMenuComponent, selector: "fw-select", inputs: ["options", "valueProperty", "useFullOptionAsValue", "titleProperty", "iconProperty", "staticIcon", "descriptionProperty", "showFilter", "showReset", "disabled", "errored", "width", "optionsWidth", "minOptionsHeight", "maxOptionsHeight", "size", "placeholder", "valueDisplayFn", "filterFn", "value"], outputs: ["disabledChange", "change", "filterChanged"] }, { kind: "component", type: FwTextAreaInputComponent, selector: "fw-textarea-input", inputs: ["minRows", "maxRows", "disabled", "helperText", "errorText", "placeholder", "readOnly", "autofocus", "width", "error", "value"], outputs: ["disabledChange"] }, { kind: "component", type: FwTextInputComponent, selector: "fw-text-input", inputs: ["disabled", "useActionableIcons", "leftIcon", "rightIcon", "leftIconLabel", "rightIconLabel", "prefix", "context", "ariaLabel", "required", "role", "ariaExpanded", "ariaControls", "ariaAutocomplete", "ariaActiveDescendant", "helperText", "errorText", "errorInIconTooltip", "placeholder", "readOnly", "size", "type", "maxLength", "autofocus", "autocomplete", "value", "error", "width"], outputs: ["disabledChange", "leftIconAction", "rightIconAction"] }, { kind: "component", type: FwWrappedInputComponent, selector: "fw-wrapped-input", inputs: ["title", "status", "statusColor", "description", "helperText", "errorText", "required"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
6841
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: FwFormRendererComponent, isStandalone: true, selector: "fw-form-renderer", inputs: { formData: { classPropertyName: "formData", publicName: "formData", isSignal: true, isRequired: false, transformFunction: null }, sectionBorder: { classPropertyName: "sectionBorder", publicName: "sectionBorder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", statusChange: "statusChange" }, ngImport: i0, template: "@if (form() && formData()) {\n <form [formGroup]=\"form()\" (focusout)=\"onFieldBlur()\" class=\"fw-form-renderer-form\">\n\n <ng-template #wrappedInput let-field>\n <fw-wrapped-input\n [title]=\"field.label || ''\"\n [description]=\"field.description || ''\"\n [helperText]=\"field.helperText || ''\"\n [errorText]=\"field.errorText\"\n [required]=\"isRequired(field) || null\">\n @switch (field.type) {\n @case (FieldType.Text) {\n <fw-text-input [formControlName]=\"field.key\" [placeholder]=\"field.placeholder || ''\"></fw-text-input>\n }\n @case (FieldType.Int) {\n <fw-number-input [formControlName]=\"field.key\" numberType=\"integer\" [placeholder]=\"field.placeholder || ''\"></fw-number-input>\n }\n @case (FieldType.Float) {\n <fw-number-input [formControlName]=\"field.key\" numberType=\"float\" [placeholder]=\"field.placeholder || ''\"></fw-number-input>\n }\n @case (FieldType.TextArea) {\n <fw-textarea-input [formControlName]=\"field.key\" [placeholder]=\"field.placeholder || ''\"></fw-textarea-input>\n }\n @case (FieldType.Date) {\n <fw-date-input [formControlName]=\"field.key\" [placeholder]=\"field.placeholder || 'mm/dd/yyyy'\"></fw-date-input>\n }\n @case (FieldType.Phone) {\n <fw-phone-input [formControlName]=\"field.key\" [placeholder]=\"field.placeholder || ''\"></fw-phone-input>\n }\n @case (FieldType.Select) {\n <fw-select\n [formControlName]=\"field.key\"\n [options]=\"field.options || []\"\n valueProperty=\"value\"\n titleProperty=\"label\"\n placeholder=\"Select an option\"\n width=\"100%\"\n ></fw-select>\n }\n @case (FieldType.Checkbox) {\n <fw-checkbox-group [attr.test-id]=\"field.key + '-checkbox-group'\" [formControlName]=\"field.key\" direction=\"vertical\">\n @for (opt of field.options || []; track opt.value) {\n <fw-checkbox [attr.test-id]=\"field.key + '-checkbox-' + opt.value\" [value]=\"opt.value\" [title]=\"opt.label || opt.value\"></fw-checkbox>\n }\n </fw-checkbox-group>\n }\n @case (FieldType.Radio) {\n <fw-radio-group [formControlName]=\"field.key\" direction=\"vertical\">\n @for (opt of field.options || []; track opt.value) {\n <fw-radio-button [value]=\"opt.value\" [title]=\"opt.label || opt.value\" color=\"primary\"></fw-radio-button>\n }\n </fw-radio-group>\n }\n }\n </fw-wrapped-input>\n </ng-template>\n\n <ng-template #fieldRow let-field>\n @if (!isHidden(field)) {\n <div class=\"field-row\">\n @switch (field.type) {\n\n @case (FieldType.Instruction) {\n <div class=\"field-group\">\n @if (field.label) {\n <p class=\"field-group-label vision-label\">{{ field.label }}</p>\n }\n @if (field.description) {\n <p class=\"vision-p3 field-group-description\">{{ field.description }}</p>\n }\n </div>\n }\n\n @case (FieldType.Paragraph) {\n @if (field.label) {\n <p class=\"field-group-label vision-label\">{{ field.label }}</p>\n }\n <p class=\"vision-p3 field-paragraph\">{{ field.description }}</p>\n }\n\n @case (FieldType.Switch) {\n <fw-contained-input\n [title]=\"field.label || ''\"\n [description]=\"field.description || ''\"\n [formControlName]=\"field.key\">\n </fw-contained-input>\n }\n\n @default {\n <ng-container [ngTemplateOutlet]=\"wrappedInput\" [ngTemplateOutletContext]=\"{ $implicit: field }\"></ng-container>\n }\n\n }\n </div>\n }\n </ng-template>\n\n <cdk-accordion multi>\n @for (item of structuredItems(); track item.key) {\n @if (isSection(item)) {\n @if (!isSectionHidden(item)) {\n <cdk-accordion-item\n #sectionItem=\"cdkAccordionItem\"\n [expanded]=\"isSectionExpanded(item)\"\n (expandedChange)=\"onSectionToggle(item, $event)\">\n <div class=\"section-accordion\" [class.section-accordion-bordered]=\"sectionBorder()\">\n <button class=\"section-toggle\" type=\"button\" (click)=\"sectionItem.toggle()\">\n <span class=\"section-title-group\">\n <span class=\"vision-h4\">{{ item.title }}</span>\n @if (item.description) {\n <span class=\"vision-p3 section-description\">{{ item.description }}</span>\n }\n </span>\n <fw-icon [class.rotated]=\"!sectionItem.expanded\" size=\"small\" color=\"primary\">chevron-down</fw-icon>\n </button>\n <div class=\"section-content\" [class.expanded]=\"sectionItem.expanded\" (focusin)=\"onSectionContentFocusIn(item)\">\n @for (field of item.fields; track field.key) {\n <ng-container [ngTemplateOutlet]=\"fieldRow\" [ngTemplateOutletContext]=\"{ $implicit: field }\"></ng-container>\n }\n </div>\n </div>\n </cdk-accordion-item>\n }\n } @else {\n <ng-container [ngTemplateOutlet]=\"fieldRow\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n }\n }\n </cdk-accordion>\n\n </form>\n}\n", styles: [":host{display:flex;flex-direction:column;gap:10px;height:100%;overflow-y:auto;padding:16px 20px;box-sizing:border-box}.fw-form-renderer-form{display:flex;flex-direction:column;gap:10px;outline:none}.field-paragraph{margin:0;color:var(--typography-muted)}fw-select,fw-multi-select{display:block;width:100%}.field-group{display:flex;flex-direction:column;gap:6px}.field-group .field-group-label{margin:0;font-weight:500}.field-group .field-group-description{margin:0;color:var(--typography-muted)}cdk-accordion{display:flex;flex-direction:column;gap:10px}.section-accordion{border-radius:6px;overflow:hidden}.section-accordion.section-accordion-bordered{border:1px solid var(--separations-base)}.section-toggle{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:10px 14px;background:var(--surface-subtle);border:none;border-bottom:1px solid var(--separations-base);cursor:pointer;text-align:left}.section-toggle fw-icon{flex-shrink:0;transition:transform .15s ease-out}.section-toggle fw-icon.rotated{transform:rotate(-90deg)}.section-title-group{display:flex;flex-direction:column;gap:2px}.section-description{color:var(--typography-muted)}.section-content{height:0;overflow:hidden;transition:height .15s ease-out;display:flex;flex-direction:column;gap:10px;padding:0 14px}.section-content.expanded{height:calc-size(auto,size);padding:14px}\n"], dependencies: [{ kind: "directive", type: CdkAccordion, selector: "cdk-accordion, [cdkAccordion]", inputs: ["multi"], exportAs: ["cdkAccordion"] }, { kind: "directive", type: CdkAccordionItem, selector: "cdk-accordion-item, [cdkAccordionItem]", inputs: ["expanded", "disabled"], outputs: ["closed", "opened", "destroyed", "expandedChange"], exportAs: ["cdkAccordionItem"] }, { kind: "component", type: FwCheckboxComponent, selector: "fw-checkbox", inputs: ["value", "checked", "name", "disabled", "size", "color", "title", "focused", "ariaLabel"], outputs: ["checkedChange", "disabledChange", "sizeChange", "colorChange", "focusedChange", "change"] }, { kind: "component", type: FwCheckboxGroupComponent, selector: "fw-checkbox-group", inputs: ["value", "color", "size", "disabled", "direction"], outputs: ["valueChange", "disabledChange", "change"] }, { kind: "component", type: FwContainedInputComponent, selector: "fw-contained-input", inputs: ["title", "description", "status", "inputPosition", "inputVariant", "checked", "disabled"], outputs: ["checkedChange", "disabledChange", "change"] }, { kind: "component", type: FwDateInputComponent, selector: "fw-date-input", inputs: ["disabled", "useActionableIcons", "leftIcon", "prefix", "helperText", "errorText", "placeholder", "readOnly", "size", "type", "max", "min", "step", "autofocus", "autocomplete", "error", "value"], outputs: ["disabledChange", "leftIconAction"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["ariaLabel", "size", "color"] }, { kind: "component", type: FwNumberInputComponent, selector: "fw-number-input", inputs: ["disabled", "useActionableIcons", "leftIcon", "rightIcon", "prefix", "context", "placeholder", "readOnly", "size", "min", "max", "step", "arrows", "numberType", "autofocus", "autocomplete", "error", "value"], outputs: ["disabledChange", "leftIconAction", "rightIconAction"] }, { kind: "component", type: FwPhoneInputComponent, selector: "fw-phone-input", inputs: ["preferredCountries", "onlyCountries", "enableCountrySearch", "showCountrySelector", "size", "rightIcon", "helperText", "errorText", "placeholder", "readOnly", "error", "value", "disabled", "format"], outputs: ["valueChange", "countryChanged"] }, { kind: "component", type: FwRadioComponent, selector: "fw-radio-button", inputs: ["value", "checked", "group", "disabled", "size", "color", "title", "focused"], outputs: ["checkedChange", "groupChange", "disabledChange", "sizeChange", "colorChange", "focusedChange", "change"] }, { kind: "component", type: FwRadioGroupComponent, selector: "fw-radio-group", inputs: ["value", "group", "color", "size", "disabled", "direction"], outputs: ["valueChange", "disabledChange", "change"] }, { kind: "component", type: FwSelectMenuComponent, selector: "fw-select", inputs: ["options", "valueProperty", "useFullOptionAsValue", "titleProperty", "iconProperty", "staticIcon", "descriptionProperty", "showFilter", "showReset", "disabled", "errored", "width", "optionsWidth", "minOptionsHeight", "maxOptionsHeight", "size", "placeholder", "valueDisplayFn", "filterFn", "value"], outputs: ["disabledChange", "change", "filterChanged"] }, { kind: "component", type: FwTextAreaInputComponent, selector: "fw-textarea-input", inputs: ["minRows", "maxRows", "disabled", "helperText", "errorText", "placeholder", "readOnly", "autofocus", "width", "error", "value"], outputs: ["disabledChange"] }, { kind: "component", type: FwTextInputComponent, selector: "fw-text-input", inputs: ["disabled", "useActionableIcons", "leftIcon", "rightIcon", "leftIconLabel", "rightIconLabel", "prefix", "context", "ariaLabel", "required", "role", "ariaExpanded", "ariaControls", "ariaAutocomplete", "ariaActiveDescendant", "helperText", "errorText", "errorInIconTooltip", "placeholder", "readOnly", "size", "type", "maxLength", "autofocus", "autocomplete", "value", "error", "width"], outputs: ["disabledChange", "leftIconAction", "rightIconAction"] }, { kind: "component", type: FwWrappedInputComponent, selector: "fw-wrapped-input", inputs: ["title", "status", "statusColor", "description", "helperText", "errorText", "required"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
6820
6842
|
}
|
|
6821
6843
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: FwFormRendererComponent, decorators: [{
|
|
6822
6844
|
type: Component,
|
|
@@ -6838,7 +6860,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
|
|
|
6838
6860
|
FwWrappedInputComponent,
|
|
6839
6861
|
NgTemplateOutlet,
|
|
6840
6862
|
ReactiveFormsModule,
|
|
6841
|
-
], template: "@if (form() && formData()) {\n <form [formGroup]=\"form()\" (focusout)=\"onFieldBlur()\" class=\"fw-form-renderer-form\">\n\n <ng-template #wrappedInput let-field>\n <fw-wrapped-input\n [title]=\"field.label || ''\"\n [description]=\"field.description || ''\"\n [helperText]=\"field.helperText || ''\"\n [errorText]=\"field.errorText\"\n [required]=\"isRequired(field) || null\">\n @switch (field.type) {\n @case (FieldType.Text) {\n <fw-text-input [formControlName]=\"field.key\" [placeholder]=\"field.placeholder || ''\"></fw-text-input>\n }\n @case (FieldType.Int) {\n <fw-number-input [formControlName]=\"field.key\" numberType=\"integer\" [placeholder]=\"field.placeholder || ''\"></fw-number-input>\n }\n @case (FieldType.Float) {\n <fw-number-input [formControlName]=\"field.key\" numberType=\"float\" [placeholder]=\"field.placeholder || ''\"></fw-number-input>\n }\n @case (FieldType.TextArea) {\n <fw-textarea-input [formControlName]=\"field.key\" [placeholder]=\"field.placeholder || ''\"></fw-textarea-input>\n }\n @case (FieldType.Date) {\n <fw-date-input [formControlName]=\"field.key\" [placeholder]=\"field.placeholder || 'mm/dd/yyyy'\"></fw-date-input>\n }\n @case (FieldType.Phone) {\n <fw-phone-input [formControlName]=\"field.key\" [placeholder]=\"field.placeholder || ''\"></fw-phone-input>\n }\n @case (FieldType.Select) {\n <fw-select\n [formControlName]=\"field.key\"\n [options]=\"field.options || []\"\n valueProperty=\"value\"\n titleProperty=\"label\"\n placeholder=\"Select an option\"\n width=\"100%\"\n ></fw-select>\n }\n @case (FieldType.Checkbox) {\n <fw-checkbox-group [attr.test-id]=\"field.key + '-checkbox-group'\" [formControlName]=\"field.key\" direction=\"vertical\">\n @for (opt of field.options || []; track opt.value) {\n <fw-checkbox [attr.test-id]=\"field.key + '-checkbox-' + opt.value\" [value]=\"opt.value\" [title]=\"opt.label || opt.value\"></fw-checkbox>\n }\n </fw-checkbox-group>\n }\n @case (FieldType.Radio) {\n <fw-radio-group [formControlName]=\"field.key\" direction=\"vertical\">\n @for (opt of field.options || []; track opt.value) {\n <fw-radio-button [value]=\"opt.value\" [title]=\"opt.label || opt.value\" color=\"primary\"></fw-radio-button>\n }\n </fw-radio-group>\n }\n }\n </fw-wrapped-input>\n </ng-template>\n\n <ng-template #fieldRow let-field>\n @if (!isHidden(field)) {\n <div class=\"field-row\">\n @switch (field.type) {\n\n @case (FieldType.Instruction) {\n <div class=\"field-group\">\n @if (field.label) {\n <p class=\"field-group-label vision-label\">{{ field.label }}</p>\n }\n @if (field.description) {\n <p class=\"vision-p3 field-group-description\">{{ field.description }}</p>\n }\n </div>\n }\n\n @case (FieldType.Paragraph) {\n @if (field.label) {\n <p class=\"field-group-label vision-label\">{{ field.label }}</p>\n }\n <p class=\"vision-p3 field-paragraph\">{{ field.description }}</p>\n }\n\n @case (FieldType.Switch) {\n <fw-contained-input\n [title]=\"field.label || ''\"\n [description]=\"field.description || ''\"\n [formControlName]=\"field.key\">\n </fw-contained-input>\n }\n\n @default {\n <ng-container [ngTemplateOutlet]=\"wrappedInput\" [ngTemplateOutletContext]=\"{ $implicit: field }\"></ng-container>\n }\n\n }\n </div>\n }\n </ng-template>\n\n <cdk-accordion multi>\n @for (item of structuredItems(); track item.key) {\n @if (isSection(item)) {\n <cdk-accordion-item\n
|
|
6863
|
+
], template: "@if (form() && formData()) {\n <form [formGroup]=\"form()\" (focusout)=\"onFieldBlur()\" class=\"fw-form-renderer-form\">\n\n <ng-template #wrappedInput let-field>\n <fw-wrapped-input\n [title]=\"field.label || ''\"\n [description]=\"field.description || ''\"\n [helperText]=\"field.helperText || ''\"\n [errorText]=\"field.errorText\"\n [required]=\"isRequired(field) || null\">\n @switch (field.type) {\n @case (FieldType.Text) {\n <fw-text-input [formControlName]=\"field.key\" [placeholder]=\"field.placeholder || ''\"></fw-text-input>\n }\n @case (FieldType.Int) {\n <fw-number-input [formControlName]=\"field.key\" numberType=\"integer\" [placeholder]=\"field.placeholder || ''\"></fw-number-input>\n }\n @case (FieldType.Float) {\n <fw-number-input [formControlName]=\"field.key\" numberType=\"float\" [placeholder]=\"field.placeholder || ''\"></fw-number-input>\n }\n @case (FieldType.TextArea) {\n <fw-textarea-input [formControlName]=\"field.key\" [placeholder]=\"field.placeholder || ''\"></fw-textarea-input>\n }\n @case (FieldType.Date) {\n <fw-date-input [formControlName]=\"field.key\" [placeholder]=\"field.placeholder || 'mm/dd/yyyy'\"></fw-date-input>\n }\n @case (FieldType.Phone) {\n <fw-phone-input [formControlName]=\"field.key\" [placeholder]=\"field.placeholder || ''\"></fw-phone-input>\n }\n @case (FieldType.Select) {\n <fw-select\n [formControlName]=\"field.key\"\n [options]=\"field.options || []\"\n valueProperty=\"value\"\n titleProperty=\"label\"\n placeholder=\"Select an option\"\n width=\"100%\"\n ></fw-select>\n }\n @case (FieldType.Checkbox) {\n <fw-checkbox-group [attr.test-id]=\"field.key + '-checkbox-group'\" [formControlName]=\"field.key\" direction=\"vertical\">\n @for (opt of field.options || []; track opt.value) {\n <fw-checkbox [attr.test-id]=\"field.key + '-checkbox-' + opt.value\" [value]=\"opt.value\" [title]=\"opt.label || opt.value\"></fw-checkbox>\n }\n </fw-checkbox-group>\n }\n @case (FieldType.Radio) {\n <fw-radio-group [formControlName]=\"field.key\" direction=\"vertical\">\n @for (opt of field.options || []; track opt.value) {\n <fw-radio-button [value]=\"opt.value\" [title]=\"opt.label || opt.value\" color=\"primary\"></fw-radio-button>\n }\n </fw-radio-group>\n }\n }\n </fw-wrapped-input>\n </ng-template>\n\n <ng-template #fieldRow let-field>\n @if (!isHidden(field)) {\n <div class=\"field-row\">\n @switch (field.type) {\n\n @case (FieldType.Instruction) {\n <div class=\"field-group\">\n @if (field.label) {\n <p class=\"field-group-label vision-label\">{{ field.label }}</p>\n }\n @if (field.description) {\n <p class=\"vision-p3 field-group-description\">{{ field.description }}</p>\n }\n </div>\n }\n\n @case (FieldType.Paragraph) {\n @if (field.label) {\n <p class=\"field-group-label vision-label\">{{ field.label }}</p>\n }\n <p class=\"vision-p3 field-paragraph\">{{ field.description }}</p>\n }\n\n @case (FieldType.Switch) {\n <fw-contained-input\n [title]=\"field.label || ''\"\n [description]=\"field.description || ''\"\n [formControlName]=\"field.key\">\n </fw-contained-input>\n }\n\n @default {\n <ng-container [ngTemplateOutlet]=\"wrappedInput\" [ngTemplateOutletContext]=\"{ $implicit: field }\"></ng-container>\n }\n\n }\n </div>\n }\n </ng-template>\n\n <cdk-accordion multi>\n @for (item of structuredItems(); track item.key) {\n @if (isSection(item)) {\n @if (!isSectionHidden(item)) {\n <cdk-accordion-item\n #sectionItem=\"cdkAccordionItem\"\n [expanded]=\"isSectionExpanded(item)\"\n (expandedChange)=\"onSectionToggle(item, $event)\">\n <div class=\"section-accordion\" [class.section-accordion-bordered]=\"sectionBorder()\">\n <button class=\"section-toggle\" type=\"button\" (click)=\"sectionItem.toggle()\">\n <span class=\"section-title-group\">\n <span class=\"vision-h4\">{{ item.title }}</span>\n @if (item.description) {\n <span class=\"vision-p3 section-description\">{{ item.description }}</span>\n }\n </span>\n <fw-icon [class.rotated]=\"!sectionItem.expanded\" size=\"small\" color=\"primary\">chevron-down</fw-icon>\n </button>\n <div class=\"section-content\" [class.expanded]=\"sectionItem.expanded\" (focusin)=\"onSectionContentFocusIn(item)\">\n @for (field of item.fields; track field.key) {\n <ng-container [ngTemplateOutlet]=\"fieldRow\" [ngTemplateOutletContext]=\"{ $implicit: field }\"></ng-container>\n }\n </div>\n </div>\n </cdk-accordion-item>\n }\n } @else {\n <ng-container [ngTemplateOutlet]=\"fieldRow\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n }\n }\n </cdk-accordion>\n\n </form>\n}\n", styles: [":host{display:flex;flex-direction:column;gap:10px;height:100%;overflow-y:auto;padding:16px 20px;box-sizing:border-box}.fw-form-renderer-form{display:flex;flex-direction:column;gap:10px;outline:none}.field-paragraph{margin:0;color:var(--typography-muted)}fw-select,fw-multi-select{display:block;width:100%}.field-group{display:flex;flex-direction:column;gap:6px}.field-group .field-group-label{margin:0;font-weight:500}.field-group .field-group-description{margin:0;color:var(--typography-muted)}cdk-accordion{display:flex;flex-direction:column;gap:10px}.section-accordion{border-radius:6px;overflow:hidden}.section-accordion.section-accordion-bordered{border:1px solid var(--separations-base)}.section-toggle{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:10px 14px;background:var(--surface-subtle);border:none;border-bottom:1px solid var(--separations-base);cursor:pointer;text-align:left}.section-toggle fw-icon{flex-shrink:0;transition:transform .15s ease-out}.section-toggle fw-icon.rotated{transform:rotate(-90deg)}.section-title-group{display:flex;flex-direction:column;gap:2px}.section-description{color:var(--typography-muted)}.section-content{height:0;overflow:hidden;transition:height .15s ease-out;display:flex;flex-direction:column;gap:10px;padding:0 14px}.section-content.expanded{height:calc-size(auto,size);padding:14px}\n"] }]
|
|
6842
6864
|
}], ctorParameters: () => [], propDecorators: { formData: [{ type: i0.Input, args: [{ isSignal: true, alias: "formData", required: false }] }], sectionBorder: [{ type: i0.Input, args: [{ isSignal: true, alias: "sectionBorder", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], statusChange: [{ type: i0.Output, args: ["statusChange"] }] } });
|
|
6843
6865
|
|
|
6844
6866
|
class FwValidators {
|
|
@@ -10129,6 +10151,11 @@ class FwTypeaheadComponent {
|
|
|
10129
10151
|
this.loading = model(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
|
|
10130
10152
|
this.disabled = model(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
10131
10153
|
this.touched = signal(false, ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
|
|
10154
|
+
/**
|
|
10155
|
+
* Text to display when there are no results to show in the dropdown. This is only shown when `allowNew` is false
|
|
10156
|
+
* @default "No results found"
|
|
10157
|
+
*/
|
|
10158
|
+
this.emptyText = input('No results found', ...(ngDevMode ? [{ debugName: "emptyText" }] : /* istanbul ignore next */ []));
|
|
10132
10159
|
this.onChange = (_) => { };
|
|
10133
10160
|
this.onTouched = () => {
|
|
10134
10161
|
this.touched.set(true);
|
|
@@ -10372,13 +10399,13 @@ class FwTypeaheadComponent {
|
|
|
10372
10399
|
newlyFocused.scrollIntoView();
|
|
10373
10400
|
}
|
|
10374
10401
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: FwTypeaheadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10375
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: FwTypeaheadComponent, isStandalone: true, selector: "fw-typeahead", inputs: { loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, optionsInput: { classPropertyName: "optionsInput", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, maxOptionsHeight: { classPropertyName: "maxOptionsHeight", publicName: "maxOptionsHeight", isSignal: true, isRequired: false, transformFunction: null }, minOptionsHeight: { classPropertyName: "minOptionsHeight", publicName: "minOptionsHeight", isSignal: true, isRequired: false, transformFunction: null }, optionsWidth: { classPropertyName: "optionsWidth", publicName: "optionsWidth", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, selectType: { classPropertyName: "selectType", publicName: "selectType", isSignal: true, isRequired: false, transformFunction: null }, searchValue: { classPropertyName: "searchValue", publicName: "searchValue", isSignal: true, isRequired: false, transformFunction: null }, allowNew: { classPropertyName: "allowNew", publicName: "allowNew", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { loading: "loadingChange", disabled: "disabledChange", value: "valueChange", searchValue: "searchValueChange" }, host: { listeners: { "document:click": "outsideClick()", "click": "onClick($event)" }, properties: { "class.fw-touched": "touched()" } }, providers: [
|
|
10402
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: FwTypeaheadComponent, isStandalone: true, selector: "fw-typeahead", inputs: { loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, optionsInput: { classPropertyName: "optionsInput", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, maxOptionsHeight: { classPropertyName: "maxOptionsHeight", publicName: "maxOptionsHeight", isSignal: true, isRequired: false, transformFunction: null }, minOptionsHeight: { classPropertyName: "minOptionsHeight", publicName: "minOptionsHeight", isSignal: true, isRequired: false, transformFunction: null }, optionsWidth: { classPropertyName: "optionsWidth", publicName: "optionsWidth", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, selectType: { classPropertyName: "selectType", publicName: "selectType", isSignal: true, isRequired: false, transformFunction: null }, searchValue: { classPropertyName: "searchValue", publicName: "searchValue", isSignal: true, isRequired: false, transformFunction: null }, allowNew: { classPropertyName: "allowNew", publicName: "allowNew", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { loading: "loadingChange", disabled: "disabledChange", value: "valueChange", searchValue: "searchValueChange" }, host: { listeners: { "document:click": "outsideClick()", "click": "onClick($event)" }, properties: { "class.fw-touched": "touched()" } }, providers: [
|
|
10376
10403
|
{
|
|
10377
10404
|
provide: NG_VALUE_ACCESSOR,
|
|
10378
10405
|
useExisting: forwardRef(() => FwTypeaheadComponent),
|
|
10379
10406
|
multi: true,
|
|
10380
10407
|
},
|
|
10381
|
-
], viewQueries: [{ propertyName: "trigger", first: true, predicate: CdkMenuTrigger, descendants: true, isSignal: true }, { propertyName: "displayedOptions", predicate: FwMenuItemComponent, descendants: true, isSignal: true }, { propertyName: "inputRef", first: true, predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"full-container\">\n <div\n class=\"input-container\"\n [class.disabled]=\"disabled()\"\n [style.max-height]=\"maxHeight()\"\n [cdkMenuTriggerFor]=\"menuContent\"\n fwMenuRegister\n #inputContainer>\n @if (selectType() === 'multiple') {\n <fw-chip-list class=\"chips\" [disableOverflow]=\"!!maxHeight()\">\n @for(val of value(); track val) {\n <fw-chip\n color=\"primary\"\n [showClose]=\"true\"\n [title]=\"val\"\n [selectable]=\"false\"\n (close)=\"closeChip(val)\"\n />\n }\n </fw-chip-list>\n }\n <input\n data-testid=\"typeahead-input\"\n [class.highlight-placeholder]=\"highlightPlaceholder()\"\n [placeholder]=\"displayedPlaceholder()\"\n [disabled]=\"disabled()\"\n (input)=\"handleInput($event)\"\n (keydown)=\"handleKey($event)\"\n (blur)=\"onFocusLoss($event)\"\n #input\n type=\"text\"\n role=\"combobox\"\n [attr.aria-expanded]=\"isMenuOpen()\"\n [attr.aria-controls]=\"listboxId\"\n aria-autocomplete=\"list\"\n [attr.aria-activedescendant]=\"getActiveDescendantId()\"\n />\n @if(loading()) {\n <fw-progress-spinner size=\"small\"/>\n }\n @if(selectType() === 'single' && value().length === 1) {\n <fw-icon class=\"clear-icon\" (click)=\"clearValue()\">close</fw-icon>\n }\n </div>\n</div>\n<ng-template #menuContent>\n <fw-menu-container\n [maxHeight]=\"maxOptionsHeight()\"\n [minHeight]=\"minOptionsHeight()\"\n [width]=\"optionsWidth() || inputContainer.offsetWidth - 2 + 'px'\"\n >\n <fw-menu role=\"listbox\" [id]=\"listboxId\" (mousedown)=\"$event.preventDefault()\">\n @if(loading() && !displayNewOption()) {\n <fw-menu-item title=\"Searching...\" [disabled]=\"true\"/>\n } @else if(!loading()) {\n @for (option of filteredOptions(); track option) {\n <fw-menu-item\n (click)=\"handleOptionClick(option)\"\n (mouseenter)=\"setFocusByValue(option)\"\n [title]=\"option\"\n [focused]=\"focusedOption() === option\"\n [value]=\"option\"\n />\n }\n @empty {\n @if (!displayNewOption()) {\n <fw-menu-item title=\"
|
|
10408
|
+
], viewQueries: [{ propertyName: "trigger", first: true, predicate: CdkMenuTrigger, descendants: true, isSignal: true }, { propertyName: "displayedOptions", predicate: FwMenuItemComponent, descendants: true, isSignal: true }, { propertyName: "inputRef", first: true, predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"full-container\">\n <div\n class=\"input-container\"\n [class.disabled]=\"disabled()\"\n [style.max-height]=\"maxHeight()\"\n [cdkMenuTriggerFor]=\"menuContent\"\n fwMenuRegister\n #inputContainer>\n @if (selectType() === 'multiple') {\n <fw-chip-list class=\"chips\" [disableOverflow]=\"!!maxHeight()\">\n @for(val of value(); track val) {\n <fw-chip\n color=\"primary\"\n [showClose]=\"true\"\n [title]=\"val\"\n [selectable]=\"false\"\n (close)=\"closeChip(val)\"\n />\n }\n </fw-chip-list>\n }\n <input\n data-testid=\"typeahead-input\"\n [class.highlight-placeholder]=\"highlightPlaceholder()\"\n [placeholder]=\"displayedPlaceholder()\"\n [disabled]=\"disabled()\"\n (input)=\"handleInput($event)\"\n (keydown)=\"handleKey($event)\"\n (blur)=\"onFocusLoss($event)\"\n #input\n type=\"text\"\n role=\"combobox\"\n [attr.aria-expanded]=\"isMenuOpen()\"\n [attr.aria-controls]=\"listboxId\"\n aria-autocomplete=\"list\"\n [attr.aria-activedescendant]=\"getActiveDescendantId()\"\n />\n @if(loading()) {\n <fw-progress-spinner size=\"small\"/>\n }\n @if(selectType() === 'single' && value().length === 1) {\n <fw-icon class=\"clear-icon\" (click)=\"clearValue()\">close</fw-icon>\n }\n </div>\n</div>\n<ng-template #menuContent>\n <fw-menu-container\n [maxHeight]=\"maxOptionsHeight()\"\n [minHeight]=\"minOptionsHeight()\"\n [width]=\"optionsWidth() || inputContainer.offsetWidth - 2 + 'px'\"\n >\n <fw-menu role=\"listbox\" [id]=\"listboxId\" (mousedown)=\"$event.preventDefault()\">\n @if(loading() && !displayNewOption()) {\n <fw-menu-item title=\"Searching...\" [disabled]=\"true\"/>\n } @else if(!loading()) {\n @for (option of filteredOptions(); track option) {\n <fw-menu-item\n (click)=\"handleOptionClick(option)\"\n (mouseenter)=\"setFocusByValue(option)\"\n [title]=\"option\"\n [focused]=\"focusedOption() === option\"\n [value]=\"option\"\n />\n }\n @empty {\n @if (!displayNewOption()) {\n <fw-menu-item [title]=\"emptyText()\" [disabled]=\"true\"/>\n }\n }\n }\n @if(displayNewOption()) {\n <fw-menu-item\n (click)=\"handleOptionClick(searchValue())\"\n (mouseenter)=\"setFocusByValue(searchValue())\"\n [title]=\"searchValue()\"\n [value]=\"searchValue()\"\n [focused]=\"focusedOption() === searchValue()\">\n <p class=\"new-tag\">New</p>\n </fw-menu-item>\n }\n </fw-menu>\n </fw-menu-container>\n</ng-template>\n", styles: [".new-tag{margin:0;color:var(--typography-light)}:host.disabled{cursor:not-allowed}:host.disabled fw-icon{cursor:not-allowed!important}:host{display:flex;flex-direction:column;width:100%;line-height:21px}:host .chips,:host fw-progress-spinner{margin:-4px 0}:host .full-container{display:flex;flex-direction:column;width:100%}:host .highlight-placeholder::placeholder{color:var(--typography-base)!important}:host .clear-icon{cursor:pointer}:host .input-container{width:100%;box-sizing:border-box;color:var(--typography-light);background:var(--page-light);display:flex;padding:8px;row-gap:8px;align-items:center;border-radius:6px;border:1px solid var(--separations-input);font-family:Inter,sans-serif;flex-wrap:wrap;overflow-y:auto}:host .input-container:focus-within{border:1px solid var(--primary-base)}:host .input-container input{min-width:80px;font-size:14px;flex:1 1 80px;color:var(--typography-base);background:var(--page-light);border:none}:host .input-container input:focus{outline:none;border:none}:host .input-container input::placeholder{color:var(--typography-light)}:host .input-container .context{color:var(--typography-light)}:host.errored .input-container,:host.ng-touched.ng-invalid .input-container{border:1px solid var(--red-base)}.disabled{opacity:.4;pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: FwTextInputModule }, { kind: "ngmodule", type: FwChipModule }, { kind: "component", type: FwChipComponent, selector: "fw-chip", inputs: ["maxWidth", "value", "variant", "color", "icon", "title", "description", "showClose", "closeLabel", "disabled", "selected", "textWrap", "selectable"], outputs: ["close", "select"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FwMenuModule }, { kind: "component", type: FwMenuComponent, selector: "fw-menu", inputs: ["disabled", "size", "multiSelect", "useCheckbox", "value", "role", "id"], outputs: ["disabledChange", "valueChange", "change"] }, { 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: FwMenuItemComponent, selector: "fw-menu-item", inputs: ["itemRole", "value", "size", "title", "description", "icon", "iconColor", "disabled", "showCheckbox", "checkboxColor", "multiSelect", "hidden", "collapsed", "href", "target", "subItemsOpen", "mouseEnterHandler", "focused", "selected"], outputs: ["itemRoleChange", "sizeChange", "disabledChange", "showCheckboxChange", "multiSelectChange", "hiddenChange", "subItemsOpenChange", "mouseEnterHandlerChange", "click", "focusedChange", "selectedChange"] }, { kind: "ngmodule", type: CdkMenuModule }, { kind: "directive", type: i5.CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData", "cdkMenuTriggerTransformOriginOn"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "directive", type: MenuRegisterDirective, selector: "[fwMenuRegister]" }, { kind: "ngmodule", type: FwProgressModule }, { kind: "component", type: FwProgressSpinnerComponent, selector: "fw-progress-spinner", inputs: ["mode", "size", "color", "showValue", "value"] }, { kind: "component", type: FwChipListComponent, selector: "fw-chip-list", inputs: ["resizeDebounceMs", "disableOverflow"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["ariaLabel", "size", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
10382
10409
|
}
|
|
10383
10410
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: FwTypeaheadComponent, decorators: [{
|
|
10384
10411
|
type: Component,
|
|
@@ -10400,11 +10427,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
|
|
|
10400
10427
|
},
|
|
10401
10428
|
], host: {
|
|
10402
10429
|
'[class.fw-touched]': 'touched()',
|
|
10403
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"full-container\">\n <div\n class=\"input-container\"\n [class.disabled]=\"disabled()\"\n [style.max-height]=\"maxHeight()\"\n [cdkMenuTriggerFor]=\"menuContent\"\n fwMenuRegister\n #inputContainer>\n @if (selectType() === 'multiple') {\n <fw-chip-list class=\"chips\" [disableOverflow]=\"!!maxHeight()\">\n @for(val of value(); track val) {\n <fw-chip\n color=\"primary\"\n [showClose]=\"true\"\n [title]=\"val\"\n [selectable]=\"false\"\n (close)=\"closeChip(val)\"\n />\n }\n </fw-chip-list>\n }\n <input\n data-testid=\"typeahead-input\"\n [class.highlight-placeholder]=\"highlightPlaceholder()\"\n [placeholder]=\"displayedPlaceholder()\"\n [disabled]=\"disabled()\"\n (input)=\"handleInput($event)\"\n (keydown)=\"handleKey($event)\"\n (blur)=\"onFocusLoss($event)\"\n #input\n type=\"text\"\n role=\"combobox\"\n [attr.aria-expanded]=\"isMenuOpen()\"\n [attr.aria-controls]=\"listboxId\"\n aria-autocomplete=\"list\"\n [attr.aria-activedescendant]=\"getActiveDescendantId()\"\n />\n @if(loading()) {\n <fw-progress-spinner size=\"small\"/>\n }\n @if(selectType() === 'single' && value().length === 1) {\n <fw-icon class=\"clear-icon\" (click)=\"clearValue()\">close</fw-icon>\n }\n </div>\n</div>\n<ng-template #menuContent>\n <fw-menu-container\n [maxHeight]=\"maxOptionsHeight()\"\n [minHeight]=\"minOptionsHeight()\"\n [width]=\"optionsWidth() || inputContainer.offsetWidth - 2 + 'px'\"\n >\n <fw-menu role=\"listbox\" [id]=\"listboxId\" (mousedown)=\"$event.preventDefault()\">\n @if(loading() && !displayNewOption()) {\n <fw-menu-item title=\"Searching...\" [disabled]=\"true\"/>\n } @else if(!loading()) {\n @for (option of filteredOptions(); track option) {\n <fw-menu-item\n (click)=\"handleOptionClick(option)\"\n (mouseenter)=\"setFocusByValue(option)\"\n [title]=\"option\"\n [focused]=\"focusedOption() === option\"\n [value]=\"option\"\n />\n }\n @empty {\n @if (!displayNewOption()) {\n <fw-menu-item title=\"
|
|
10430
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"full-container\">\n <div\n class=\"input-container\"\n [class.disabled]=\"disabled()\"\n [style.max-height]=\"maxHeight()\"\n [cdkMenuTriggerFor]=\"menuContent\"\n fwMenuRegister\n #inputContainer>\n @if (selectType() === 'multiple') {\n <fw-chip-list class=\"chips\" [disableOverflow]=\"!!maxHeight()\">\n @for(val of value(); track val) {\n <fw-chip\n color=\"primary\"\n [showClose]=\"true\"\n [title]=\"val\"\n [selectable]=\"false\"\n (close)=\"closeChip(val)\"\n />\n }\n </fw-chip-list>\n }\n <input\n data-testid=\"typeahead-input\"\n [class.highlight-placeholder]=\"highlightPlaceholder()\"\n [placeholder]=\"displayedPlaceholder()\"\n [disabled]=\"disabled()\"\n (input)=\"handleInput($event)\"\n (keydown)=\"handleKey($event)\"\n (blur)=\"onFocusLoss($event)\"\n #input\n type=\"text\"\n role=\"combobox\"\n [attr.aria-expanded]=\"isMenuOpen()\"\n [attr.aria-controls]=\"listboxId\"\n aria-autocomplete=\"list\"\n [attr.aria-activedescendant]=\"getActiveDescendantId()\"\n />\n @if(loading()) {\n <fw-progress-spinner size=\"small\"/>\n }\n @if(selectType() === 'single' && value().length === 1) {\n <fw-icon class=\"clear-icon\" (click)=\"clearValue()\">close</fw-icon>\n }\n </div>\n</div>\n<ng-template #menuContent>\n <fw-menu-container\n [maxHeight]=\"maxOptionsHeight()\"\n [minHeight]=\"minOptionsHeight()\"\n [width]=\"optionsWidth() || inputContainer.offsetWidth - 2 + 'px'\"\n >\n <fw-menu role=\"listbox\" [id]=\"listboxId\" (mousedown)=\"$event.preventDefault()\">\n @if(loading() && !displayNewOption()) {\n <fw-menu-item title=\"Searching...\" [disabled]=\"true\"/>\n } @else if(!loading()) {\n @for (option of filteredOptions(); track option) {\n <fw-menu-item\n (click)=\"handleOptionClick(option)\"\n (mouseenter)=\"setFocusByValue(option)\"\n [title]=\"option\"\n [focused]=\"focusedOption() === option\"\n [value]=\"option\"\n />\n }\n @empty {\n @if (!displayNewOption()) {\n <fw-menu-item [title]=\"emptyText()\" [disabled]=\"true\"/>\n }\n }\n }\n @if(displayNewOption()) {\n <fw-menu-item\n (click)=\"handleOptionClick(searchValue())\"\n (mouseenter)=\"setFocusByValue(searchValue())\"\n [title]=\"searchValue()\"\n [value]=\"searchValue()\"\n [focused]=\"focusedOption() === searchValue()\">\n <p class=\"new-tag\">New</p>\n </fw-menu-item>\n }\n </fw-menu>\n </fw-menu-container>\n</ng-template>\n", styles: [".new-tag{margin:0;color:var(--typography-light)}:host.disabled{cursor:not-allowed}:host.disabled fw-icon{cursor:not-allowed!important}:host{display:flex;flex-direction:column;width:100%;line-height:21px}:host .chips,:host fw-progress-spinner{margin:-4px 0}:host .full-container{display:flex;flex-direction:column;width:100%}:host .highlight-placeholder::placeholder{color:var(--typography-base)!important}:host .clear-icon{cursor:pointer}:host .input-container{width:100%;box-sizing:border-box;color:var(--typography-light);background:var(--page-light);display:flex;padding:8px;row-gap:8px;align-items:center;border-radius:6px;border:1px solid var(--separations-input);font-family:Inter,sans-serif;flex-wrap:wrap;overflow-y:auto}:host .input-container:focus-within{border:1px solid var(--primary-base)}:host .input-container input{min-width:80px;font-size:14px;flex:1 1 80px;color:var(--typography-base);background:var(--page-light);border:none}:host .input-container input:focus{outline:none;border:none}:host .input-container input::placeholder{color:var(--typography-light)}:host .input-container .context{color:var(--typography-light)}:host.errored .input-container,:host.ng-touched.ng-invalid .input-container{border:1px solid var(--red-base)}.disabled{opacity:.4;pointer-events:none}\n"] }]
|
|
10404
10431
|
}], propDecorators: { outsideClick: [{
|
|
10405
10432
|
type: HostListener,
|
|
10406
10433
|
args: ['document:click']
|
|
10407
|
-
}], trigger: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkMenuTrigger), { isSignal: true }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }, { type: i0.Output, args: ["loadingChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], onClick: [{
|
|
10434
|
+
}], trigger: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkMenuTrigger), { isSignal: true }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }, { type: i0.Output, args: ["loadingChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], onClick: [{
|
|
10408
10435
|
type: HostListener,
|
|
10409
10436
|
args: ['click', ['$event']]
|
|
10410
10437
|
}], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], optionsInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], maxOptionsHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxOptionsHeight", required: false }] }], minOptionsHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "minOptionsHeight", required: false }] }], optionsWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionsWidth", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], selectType: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectType", required: false }] }], searchValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchValue", required: false }] }, { type: i0.Output, args: ["searchValueChange"] }], allowNew: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowNew", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], displayedOptions: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => FwMenuItemComponent), { isSignal: true }] }], inputRef: [{ type: i0.ViewChild, args: ['input', { isSignal: true }] }] } });
|