@flywheel-io/vision 2.7.4 → 2.7.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/chip-list/chip-list.component.d.ts +6 -3
- package/components/tooltip/tooltip-panel/tooltip-panel.component.d.ts +1 -1
- package/components/typeahead/typeahead.component.d.ts +11 -2
- package/esm2022/components/chip-list/chip-list.component.mjs +19 -4
- package/esm2022/components/dialog/dialog.component.mjs +2 -2
- package/esm2022/components/icon/icon.component.mjs +2 -2
- package/esm2022/components/textarea-input/textarea-input.component.mjs +5 -10
- package/esm2022/components/typeahead/typeahead.component.mjs +42 -16
- package/fesm2022/flywheel-io-vision.mjs +63 -28
- package/fesm2022/flywheel-io-vision.mjs.map +1 -1
- package/package.json +1 -1
- package/scss/config/overlay.scss +2 -1
- package/styles.css +2 -1
|
@@ -3,7 +3,7 @@ import { HostBinding, Input, ChangeDetectionStrategy, Component, EventEmitter, O
|
|
|
3
3
|
import * as i1$1 from '@angular/common';
|
|
4
4
|
import { CommonModule, NgClass } from '@angular/common';
|
|
5
5
|
import * as i1 from '@angular/platform-browser';
|
|
6
|
-
import { BehaviorSubject, debounce, timer, distinctUntilChanged, of, Subscription, min,
|
|
6
|
+
import { BehaviorSubject, debounce, timer, distinctUntilChanged, of, Subscription, min, combineLatest, tap, switchMap, map } from 'rxjs';
|
|
7
7
|
import * as i1$2 from '@angular/cdk/overlay';
|
|
8
8
|
import { OverlayModule, Overlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
|
|
9
9
|
import * as i1$5 from '@angular/cdk/table';
|
|
@@ -33,7 +33,7 @@ const namedSizeToPxMap = {
|
|
|
33
33
|
};
|
|
34
34
|
class FwIconComponent {
|
|
35
35
|
get style() {
|
|
36
|
-
const sizeStyle = `font-size: ${this.size}px; min-width: ${this.size}px; width: ${this.size}px
|
|
36
|
+
const sizeStyle = `font-size: ${this.size}px; min-width: ${this.size}px; width: ${this.size}px;`;
|
|
37
37
|
let colorStyle = '';
|
|
38
38
|
if (this.color) {
|
|
39
39
|
if (this.color === 'muted') {
|
|
@@ -3027,11 +3027,11 @@ class FwDialogComponent {
|
|
|
3027
3027
|
}, 300);
|
|
3028
3028
|
}
|
|
3029
3029
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwDialogComponent, deps: [{ token: i1$3.DialogRef, optional: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3030
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FwDialogComponent, selector: "fw-dialog", inputs: { width: "width", title: "title", icon: "icon", iconColor: "iconColor", showClose: "showClose", externalClasses: ["class", "externalClasses"] }, outputs: { close: "close" }, host: { properties: { "class": "this.classes" } }, ngImport: i0, template: "<div class=\"fw-dialog\">\n <fw-icon-button\n *ngIf=\"showClose\"\n tabindex=\"-1\" icon=\"close\" color=\"slate\"\n (click)=\"handleCloseButton()\">\n </fw-icon-button>\n <div class=\"dialog-header\">\n <ng-content select=\"fw-dialog-header\"></ng-content>\n <div class=\"dialog-title\" *ngIf=\"title\">\n <fw-icon *ngIf=\"icon\" [color]=\"iconColor\">{{ icon }}</fw-icon>\n <h3 class=\"vision-h3\">{{ title }}</h3>\n </div>\n </div>\n <div class=\"dialog-body\">\n <ng-content select=\"fw-dialog-content\"></ng-content>\n </div>\n <div class=\"dialog-actions\">\n <ng-content select=\"fw-dialog-actions\"></ng-content>\n </div>\n</div>\n", styles: ["@keyframes slide-in-from-bottom{0%{opacity:0;transform:translateY(100vh)}to{opacity:1;transform:translateY(0)}}@keyframes slide-out-to-bottom{0%{opacity:1;transform:translateY(0)}99%{opacity:0;transform:translateY(100vh)}to{opacity:0;transform:translateY(100vh)}}:host{box-sizing:border-box;background-color:var(--card-background);border:1px solid var(--separations-border);border-radius:8px;display:flex;flex-direction:column;overflow:hidden;animation:slide-in-from-bottom .
|
|
3030
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FwDialogComponent, selector: "fw-dialog", inputs: { width: "width", title: "title", icon: "icon", iconColor: "iconColor", showClose: "showClose", externalClasses: ["class", "externalClasses"] }, outputs: { close: "close" }, host: { properties: { "class": "this.classes" } }, ngImport: i0, template: "<div class=\"fw-dialog\">\n <fw-icon-button\n *ngIf=\"showClose\"\n tabindex=\"-1\" icon=\"close\" color=\"slate\"\n (click)=\"handleCloseButton()\">\n </fw-icon-button>\n <div class=\"dialog-header\">\n <ng-content select=\"fw-dialog-header\"></ng-content>\n <div class=\"dialog-title\" *ngIf=\"title\">\n <fw-icon *ngIf=\"icon\" [color]=\"iconColor\">{{ icon }}</fw-icon>\n <h3 class=\"vision-h3\">{{ title }}</h3>\n </div>\n </div>\n <div class=\"dialog-body\">\n <ng-content select=\"fw-dialog-content\"></ng-content>\n </div>\n <div class=\"dialog-actions\">\n <ng-content select=\"fw-dialog-actions\"></ng-content>\n </div>\n</div>\n", styles: ["@keyframes slide-in-from-bottom{0%{opacity:0;transform:translateY(100vh)}to{opacity:1;transform:translateY(0)}}@keyframes slide-out-to-bottom{0%{opacity:1;transform:translateY(0)}99%{opacity:0;transform:translateY(100vh)}to{opacity:0;transform:translateY(100vh)}}:host{box-sizing:border-box;background-color:var(--card-background);border:1px solid var(--separations-border);border-radius:8px;display:flex;flex-direction:column;overflow:hidden;animation:slide-in-from-bottom .15s ease-out}:host.dialog-closing{animation:slide-out-to-bottom .15s ease-in forwards}:host.dialog-width-extra-small{width:444px}:host.dialog-width-small{width:600px}:host.dialog-width-medium{width:900px}:host.dialog-width-large{width:1200px}:host.dialog-width-extra-large{width:1536px}:host.dialog-width-responsive{max-width:100vw;margin:0 12px}@media only screen and (width <= 575px){:host.dialog-width-responsive{max-height:92vh;margin-top:4vh;margin-bottom:4vh}:host.dialog-width-responsive .fw-dialog{border-radius:12px}:host.dialog-width-responsive .fw-dialog .dialog-body{max-height:65vh;overflow-y:auto;-webkit-overflow-scrolling:touch}:host.dialog-width-responsive .fw-dialog .dialog-body::-webkit-scrollbar{width:4px}:host.dialog-width-responsive .fw-dialog .dialog-body::-webkit-scrollbar-track{background:var(--separations-base)}:host.dialog-width-responsive .fw-dialog .dialog-body::-webkit-scrollbar-thumb{background:var(--slate-base);border-radius:2px}}@media only screen and (width >= 576px){:host.dialog-width-responsive{width:90vw;max-width:600px;margin:0}}@media only screen and (width >= 768px){:host.dialog-width-responsive{width:80vw;max-width:900px}:host.dialog-width-responsive .fw-dialog .dialog-body{max-height:70vh;overflow-y:auto}}@media only screen and (width >= 992px){:host.dialog-width-responsive{width:60vw;max-width:1200px}}@media only screen and (width >= 1200px){:host.dialog-width-responsive{width:50vw;max-width:1536px}}:host .fw-dialog{position:relative}:host .fw-dialog fw-icon-button{position:absolute;top:4px;right:4px}:host .fw-dialog .dialog-header{background-color:var(--card-header)}:host .fw-dialog .dialog-header .dialog-title{display:flex;gap:8px;box-sizing:border-box;border-bottom:1px solid var(--separations-base);padding:12px 16px;height:44px;overflow:hidden;align-items:center}:host .fw-dialog .dialog-header .dialog-title fw-icon{font-size:22px}:host .fw-dialog .dialog-header .dialog-title h3{overflow:clip visible;min-width:0;white-space:nowrap;text-overflow:ellipsis;margin-right:30px;flex:1}:host .fw-dialog .dialog-header h3{margin:0}:host .fw-dialog .dialog-header:empty{display:none}:host .fw-dialog .dialog-body{background-color:var(--card-background);border-bottom:1px solid var(--separations-base)}:host .fw-dialog .dialog-body:empty{display:none}:host .fw-dialog .dialog-actions{padding:16px}:host .fw-dialog .dialog-actions:empty{display:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FwIconButtonComponent, selector: "fw-icon-button", inputs: ["color", "icon", "size", "disabled", "selected"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }] }); }
|
|
3031
3031
|
}
|
|
3032
3032
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwDialogComponent, decorators: [{
|
|
3033
3033
|
type: Component,
|
|
3034
|
-
args: [{ selector: 'fw-dialog', template: "<div class=\"fw-dialog\">\n <fw-icon-button\n *ngIf=\"showClose\"\n tabindex=\"-1\" icon=\"close\" color=\"slate\"\n (click)=\"handleCloseButton()\">\n </fw-icon-button>\n <div class=\"dialog-header\">\n <ng-content select=\"fw-dialog-header\"></ng-content>\n <div class=\"dialog-title\" *ngIf=\"title\">\n <fw-icon *ngIf=\"icon\" [color]=\"iconColor\">{{ icon }}</fw-icon>\n <h3 class=\"vision-h3\">{{ title }}</h3>\n </div>\n </div>\n <div class=\"dialog-body\">\n <ng-content select=\"fw-dialog-content\"></ng-content>\n </div>\n <div class=\"dialog-actions\">\n <ng-content select=\"fw-dialog-actions\"></ng-content>\n </div>\n</div>\n", styles: ["@keyframes slide-in-from-bottom{0%{opacity:0;transform:translateY(100vh)}to{opacity:1;transform:translateY(0)}}@keyframes slide-out-to-bottom{0%{opacity:1;transform:translateY(0)}99%{opacity:0;transform:translateY(100vh)}to{opacity:0;transform:translateY(100vh)}}:host{box-sizing:border-box;background-color:var(--card-background);border:1px solid var(--separations-border);border-radius:8px;display:flex;flex-direction:column;overflow:hidden;animation:slide-in-from-bottom .
|
|
3034
|
+
args: [{ selector: 'fw-dialog', template: "<div class=\"fw-dialog\">\n <fw-icon-button\n *ngIf=\"showClose\"\n tabindex=\"-1\" icon=\"close\" color=\"slate\"\n (click)=\"handleCloseButton()\">\n </fw-icon-button>\n <div class=\"dialog-header\">\n <ng-content select=\"fw-dialog-header\"></ng-content>\n <div class=\"dialog-title\" *ngIf=\"title\">\n <fw-icon *ngIf=\"icon\" [color]=\"iconColor\">{{ icon }}</fw-icon>\n <h3 class=\"vision-h3\">{{ title }}</h3>\n </div>\n </div>\n <div class=\"dialog-body\">\n <ng-content select=\"fw-dialog-content\"></ng-content>\n </div>\n <div class=\"dialog-actions\">\n <ng-content select=\"fw-dialog-actions\"></ng-content>\n </div>\n</div>\n", styles: ["@keyframes slide-in-from-bottom{0%{opacity:0;transform:translateY(100vh)}to{opacity:1;transform:translateY(0)}}@keyframes slide-out-to-bottom{0%{opacity:1;transform:translateY(0)}99%{opacity:0;transform:translateY(100vh)}to{opacity:0;transform:translateY(100vh)}}:host{box-sizing:border-box;background-color:var(--card-background);border:1px solid var(--separations-border);border-radius:8px;display:flex;flex-direction:column;overflow:hidden;animation:slide-in-from-bottom .15s ease-out}:host.dialog-closing{animation:slide-out-to-bottom .15s ease-in forwards}:host.dialog-width-extra-small{width:444px}:host.dialog-width-small{width:600px}:host.dialog-width-medium{width:900px}:host.dialog-width-large{width:1200px}:host.dialog-width-extra-large{width:1536px}:host.dialog-width-responsive{max-width:100vw;margin:0 12px}@media only screen and (width <= 575px){:host.dialog-width-responsive{max-height:92vh;margin-top:4vh;margin-bottom:4vh}:host.dialog-width-responsive .fw-dialog{border-radius:12px}:host.dialog-width-responsive .fw-dialog .dialog-body{max-height:65vh;overflow-y:auto;-webkit-overflow-scrolling:touch}:host.dialog-width-responsive .fw-dialog .dialog-body::-webkit-scrollbar{width:4px}:host.dialog-width-responsive .fw-dialog .dialog-body::-webkit-scrollbar-track{background:var(--separations-base)}:host.dialog-width-responsive .fw-dialog .dialog-body::-webkit-scrollbar-thumb{background:var(--slate-base);border-radius:2px}}@media only screen and (width >= 576px){:host.dialog-width-responsive{width:90vw;max-width:600px;margin:0}}@media only screen and (width >= 768px){:host.dialog-width-responsive{width:80vw;max-width:900px}:host.dialog-width-responsive .fw-dialog .dialog-body{max-height:70vh;overflow-y:auto}}@media only screen and (width >= 992px){:host.dialog-width-responsive{width:60vw;max-width:1200px}}@media only screen and (width >= 1200px){:host.dialog-width-responsive{width:50vw;max-width:1536px}}:host .fw-dialog{position:relative}:host .fw-dialog fw-icon-button{position:absolute;top:4px;right:4px}:host .fw-dialog .dialog-header{background-color:var(--card-header)}:host .fw-dialog .dialog-header .dialog-title{display:flex;gap:8px;box-sizing:border-box;border-bottom:1px solid var(--separations-base);padding:12px 16px;height:44px;overflow:hidden;align-items:center}:host .fw-dialog .dialog-header .dialog-title fw-icon{font-size:22px}:host .fw-dialog .dialog-header .dialog-title h3{overflow:clip visible;min-width:0;white-space:nowrap;text-overflow:ellipsis;margin-right:30px;flex:1}:host .fw-dialog .dialog-header h3{margin:0}:host .fw-dialog .dialog-header:empty{display:none}:host .fw-dialog .dialog-body{background-color:var(--card-background);border-bottom:1px solid var(--separations-base)}:host .fw-dialog .dialog-body:empty{display:none}:host .fw-dialog .dialog-actions{padding:16px}:host .fw-dialog .dialog-actions:empty{display:none}\n"] }]
|
|
3035
3035
|
}], ctorParameters: () => [{ type: i1$3.DialogRef, decorators: [{
|
|
3036
3036
|
type: Optional
|
|
3037
3037
|
}] }, { type: i0.ElementRef }], propDecorators: { width: [{
|
|
@@ -8698,13 +8698,8 @@ class FwTextAreaInputComponent {
|
|
|
8698
8698
|
this.disabled = isDisabled;
|
|
8699
8699
|
}
|
|
8700
8700
|
changeHandler(event) {
|
|
8701
|
-
|
|
8702
|
-
|
|
8703
|
-
const isReactiveForms = this.onChange && this.onChange.toString() !== 'value => {\n }';
|
|
8704
|
-
if (!isReactiveForms) {
|
|
8705
|
-
this.value = event.target.value;
|
|
8706
|
-
}
|
|
8707
|
-
this.onChange(event.target.value);
|
|
8701
|
+
this.value = event.target.value;
|
|
8702
|
+
this.onChange(this.value);
|
|
8708
8703
|
this.onTouch();
|
|
8709
8704
|
setTimeout(() => {
|
|
8710
8705
|
if (this.autosize) {
|
|
@@ -8720,7 +8715,7 @@ class FwTextAreaInputComponent {
|
|
|
8720
8715
|
provide: NG_VALUE_ACCESSOR,
|
|
8721
8716
|
useExisting: FwTextAreaInputComponent,
|
|
8722
8717
|
multi: true,
|
|
8723
|
-
}], viewQueries: [{ propertyName: "autosize", first: true, predicate: CdkTextareaAutosize, descendants: true }], ngImport: i0, template: "<div class=\"textarea-wrapper\" [ngStyle]=\"{width: width}\">\n <textarea\n cdkTextareaAutosize\n #autosize=\"cdkTextareaAutosize\"\n [cdkAutosizeMinRows]=\"minRows\"\n [cdkAutosizeMaxRows]=\"maxRows\"\n (keyup)=\"changeHandler($event)\"\n (blur)=\"blurHandler()\"\n [placeholder]=\"placeholder || ''\"\n [value]=\"value\"\n [disabled]=\"disabled\"\n [readOnly]=\"readOnly\"\n [autofocus]=\"autofocus\">\n </textarea>\n <fw-icon class=\"error-icon\">warning-circle</fw-icon>\n</div>\n<p class=\"vision-p4 helper-text\" *ngIf=\"!!helperText\">{{ helperText }}</p>\n<p class=\"vision-p4 error-text\" *ngIf=\"!!errorText\">{{ errorText }}</p>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700\";.vision-h1{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:22px}.vision-h2{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:18px}.vision-h3{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:16px}.vision-h4{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:14px}.vision-h5{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:12px;line-height:130%}.vision-h6{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:10px;line-height:120%}.vision-p1{font-size:18px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p2{font-size:14px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p3{font-size:12px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p4{font-size:10px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p5{font-size:8px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-link{text-decoration:underline;color:var(--primary-base);cursor:pointer}.vision-link:hover{text-decoration:none}.vision-link:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link:visited{color:var(--secondary-base)}.vision-link-inherited{text-decoration:underline;color:var(--primary-base);cursor:pointer;color:inherit}.vision-link-inherited:hover{text-decoration:none}.vision-link-inherited:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link-inherited:visited{color:var(--secondary-base)}.vision-link-inherited:visited{color:inherit}.vision-link-no-visited{text-decoration:underline;color:var(--primary-base);cursor:pointer}.vision-link-no-visited:hover{text-decoration:none}.vision-link-no-visited:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link-no-visited:visited{color:var(--secondary-base)}.vision-link-no-visited:visited{color:var(--primary-base)}:host{display:flex;flex-direction:column}:host .textarea-wrapper{border-radius:6px;overflow:hidden;border:1px solid var(--separations-input);display:flex;position:relative}:host .textarea-wrapper:focus-within{border:1px solid var(--primary-base)}:host .textarea-wrapper .error-icon{display:none}:host textarea{min-width:0;font-size:14px;flex:1;padding:8px;color:var(--typography-base);background:var(--page-light);border:none;font-family:Inter,sans-serif;overflow:auto;box-sizing:border-box}:host textarea:focus{outline:none;border:none}:host textarea:disabled{opacity:.4;cursor:not-allowed}:host textarea::placeholder{color:var(--typography-light)}:host .helper-text,:host .error-text{margin-top:4px;color:var(--typography-light);line-height:13px;margin-left:6px;margin-bottom:0}:host .error-text{text-align:left;color:var(--red-base);display:none}:host.errored .textarea-wrapper{border:1px solid var(--red-base)}:host.errored .textarea-wrapper .error-icon{position:absolute;right:6px;top:6px;font-size:18px;color:var(--red-base);display:inline!important}:host.errored .error-text{display:block}:host.ng-touched.ng-invalid .textarea-wrapper{border:1px solid red;border-radius:6px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }] }); }
|
|
8718
|
+
}], viewQueries: [{ propertyName: "autosize", first: true, predicate: CdkTextareaAutosize, descendants: true }], ngImport: i0, template: "<div class=\"textarea-wrapper\" [ngStyle]=\"{width: width}\">\n <textarea\n test-id=\"textarea\"\n cdkTextareaAutosize\n #autosize=\"cdkTextareaAutosize\"\n [cdkAutosizeMinRows]=\"minRows\"\n [cdkAutosizeMaxRows]=\"maxRows\"\n (keyup)=\"changeHandler($event)\"\n (blur)=\"blurHandler()\"\n [placeholder]=\"placeholder || ''\"\n [value]=\"value\"\n [disabled]=\"disabled\"\n [readOnly]=\"readOnly\"\n [autofocus]=\"autofocus\">\n </textarea>\n <fw-icon class=\"error-icon\">warning-circle</fw-icon>\n</div>\n<p class=\"vision-p4 helper-text\" *ngIf=\"!!helperText\">{{ helperText }}</p>\n<p class=\"vision-p4 error-text\" *ngIf=\"!!errorText\">{{ errorText }}</p>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700\";.vision-h1{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:22px}.vision-h2{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:18px}.vision-h3{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:16px}.vision-h4{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:14px}.vision-h5{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:12px;line-height:130%}.vision-h6{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:10px;line-height:120%}.vision-p1{font-size:18px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p2{font-size:14px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p3{font-size:12px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p4{font-size:10px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p5{font-size:8px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-link{text-decoration:underline;color:var(--primary-base);cursor:pointer}.vision-link:hover{text-decoration:none}.vision-link:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link:visited{color:var(--secondary-base)}.vision-link-inherited{text-decoration:underline;color:var(--primary-base);cursor:pointer;color:inherit}.vision-link-inherited:hover{text-decoration:none}.vision-link-inherited:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link-inherited:visited{color:var(--secondary-base)}.vision-link-inherited:visited{color:inherit}.vision-link-no-visited{text-decoration:underline;color:var(--primary-base);cursor:pointer}.vision-link-no-visited:hover{text-decoration:none}.vision-link-no-visited:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link-no-visited:visited{color:var(--secondary-base)}.vision-link-no-visited:visited{color:var(--primary-base)}:host{display:flex;flex-direction:column}:host .textarea-wrapper{border-radius:6px;overflow:hidden;border:1px solid var(--separations-input);display:flex;position:relative}:host .textarea-wrapper:focus-within{border:1px solid var(--primary-base)}:host .textarea-wrapper .error-icon{display:none}:host textarea{min-width:0;font-size:14px;flex:1;padding:8px;color:var(--typography-base);background:var(--page-light);border:none;font-family:Inter,sans-serif;overflow:auto;box-sizing:border-box}:host textarea:focus{outline:none;border:none}:host textarea:disabled{opacity:.4;cursor:not-allowed}:host textarea::placeholder{color:var(--typography-light)}:host .helper-text,:host .error-text{margin-top:4px;color:var(--typography-light);line-height:13px;margin-left:6px;margin-bottom:0}:host .error-text{text-align:left;color:var(--red-base);display:none}:host.errored .textarea-wrapper{border:1px solid var(--red-base)}:host.errored .textarea-wrapper .error-icon{position:absolute;right:6px;top:6px;font-size:18px;color:var(--red-base);display:inline!important}:host.errored .error-text{display:block}:host.ng-touched.ng-invalid .textarea-wrapper{border:1px solid red;border-radius:6px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }] }); }
|
|
8724
8719
|
}
|
|
8725
8720
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwTextAreaInputComponent, decorators: [{
|
|
8726
8721
|
type: Component,
|
|
@@ -8728,7 +8723,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
8728
8723
|
provide: NG_VALUE_ACCESSOR,
|
|
8729
8724
|
useExisting: FwTextAreaInputComponent,
|
|
8730
8725
|
multi: true,
|
|
8731
|
-
}], template: "<div class=\"textarea-wrapper\" [ngStyle]=\"{width: width}\">\n <textarea\n cdkTextareaAutosize\n #autosize=\"cdkTextareaAutosize\"\n [cdkAutosizeMinRows]=\"minRows\"\n [cdkAutosizeMaxRows]=\"maxRows\"\n (keyup)=\"changeHandler($event)\"\n (blur)=\"blurHandler()\"\n [placeholder]=\"placeholder || ''\"\n [value]=\"value\"\n [disabled]=\"disabled\"\n [readOnly]=\"readOnly\"\n [autofocus]=\"autofocus\">\n </textarea>\n <fw-icon class=\"error-icon\">warning-circle</fw-icon>\n</div>\n<p class=\"vision-p4 helper-text\" *ngIf=\"!!helperText\">{{ helperText }}</p>\n<p class=\"vision-p4 error-text\" *ngIf=\"!!errorText\">{{ errorText }}</p>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700\";.vision-h1{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:22px}.vision-h2{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:18px}.vision-h3{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:16px}.vision-h4{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:14px}.vision-h5{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:12px;line-height:130%}.vision-h6{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:10px;line-height:120%}.vision-p1{font-size:18px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p2{font-size:14px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p3{font-size:12px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p4{font-size:10px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p5{font-size:8px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-link{text-decoration:underline;color:var(--primary-base);cursor:pointer}.vision-link:hover{text-decoration:none}.vision-link:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link:visited{color:var(--secondary-base)}.vision-link-inherited{text-decoration:underline;color:var(--primary-base);cursor:pointer;color:inherit}.vision-link-inherited:hover{text-decoration:none}.vision-link-inherited:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link-inherited:visited{color:var(--secondary-base)}.vision-link-inherited:visited{color:inherit}.vision-link-no-visited{text-decoration:underline;color:var(--primary-base);cursor:pointer}.vision-link-no-visited:hover{text-decoration:none}.vision-link-no-visited:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link-no-visited:visited{color:var(--secondary-base)}.vision-link-no-visited:visited{color:var(--primary-base)}:host{display:flex;flex-direction:column}:host .textarea-wrapper{border-radius:6px;overflow:hidden;border:1px solid var(--separations-input);display:flex;position:relative}:host .textarea-wrapper:focus-within{border:1px solid var(--primary-base)}:host .textarea-wrapper .error-icon{display:none}:host textarea{min-width:0;font-size:14px;flex:1;padding:8px;color:var(--typography-base);background:var(--page-light);border:none;font-family:Inter,sans-serif;overflow:auto;box-sizing:border-box}:host textarea:focus{outline:none;border:none}:host textarea:disabled{opacity:.4;cursor:not-allowed}:host textarea::placeholder{color:var(--typography-light)}:host .helper-text,:host .error-text{margin-top:4px;color:var(--typography-light);line-height:13px;margin-left:6px;margin-bottom:0}:host .error-text{text-align:left;color:var(--red-base);display:none}:host.errored .textarea-wrapper{border:1px solid var(--red-base)}:host.errored .textarea-wrapper .error-icon{position:absolute;right:6px;top:6px;font-size:18px;color:var(--red-base);display:inline!important}:host.errored .error-text{display:block}:host.ng-touched.ng-invalid .textarea-wrapper{border:1px solid red;border-radius:6px}\n"] }]
|
|
8726
|
+
}], template: "<div class=\"textarea-wrapper\" [ngStyle]=\"{width: width}\">\n <textarea\n test-id=\"textarea\"\n cdkTextareaAutosize\n #autosize=\"cdkTextareaAutosize\"\n [cdkAutosizeMinRows]=\"minRows\"\n [cdkAutosizeMaxRows]=\"maxRows\"\n (keyup)=\"changeHandler($event)\"\n (blur)=\"blurHandler()\"\n [placeholder]=\"placeholder || ''\"\n [value]=\"value\"\n [disabled]=\"disabled\"\n [readOnly]=\"readOnly\"\n [autofocus]=\"autofocus\">\n </textarea>\n <fw-icon class=\"error-icon\">warning-circle</fw-icon>\n</div>\n<p class=\"vision-p4 helper-text\" *ngIf=\"!!helperText\">{{ helperText }}</p>\n<p class=\"vision-p4 error-text\" *ngIf=\"!!errorText\">{{ errorText }}</p>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700\";.vision-h1{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:22px}.vision-h2{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:18px}.vision-h3{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:16px}.vision-h4{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:14px}.vision-h5{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:12px;line-height:130%}.vision-h6{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:10px;line-height:120%}.vision-p1{font-size:18px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p2{font-size:14px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p3{font-size:12px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p4{font-size:10px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p5{font-size:8px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-link{text-decoration:underline;color:var(--primary-base);cursor:pointer}.vision-link:hover{text-decoration:none}.vision-link:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link:visited{color:var(--secondary-base)}.vision-link-inherited{text-decoration:underline;color:var(--primary-base);cursor:pointer;color:inherit}.vision-link-inherited:hover{text-decoration:none}.vision-link-inherited:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link-inherited:visited{color:var(--secondary-base)}.vision-link-inherited:visited{color:inherit}.vision-link-no-visited{text-decoration:underline;color:var(--primary-base);cursor:pointer}.vision-link-no-visited:hover{text-decoration:none}.vision-link-no-visited:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link-no-visited:visited{color:var(--secondary-base)}.vision-link-no-visited:visited{color:var(--primary-base)}:host{display:flex;flex-direction:column}:host .textarea-wrapper{border-radius:6px;overflow:hidden;border:1px solid var(--separations-input);display:flex;position:relative}:host .textarea-wrapper:focus-within{border:1px solid var(--primary-base)}:host .textarea-wrapper .error-icon{display:none}:host textarea{min-width:0;font-size:14px;flex:1;padding:8px;color:var(--typography-base);background:var(--page-light);border:none;font-family:Inter,sans-serif;overflow:auto;box-sizing:border-box}:host textarea:focus{outline:none;border:none}:host textarea:disabled{opacity:.4;cursor:not-allowed}:host textarea::placeholder{color:var(--typography-light)}:host .helper-text,:host .error-text{margin-top:4px;color:var(--typography-light);line-height:13px;margin-left:6px;margin-bottom:0}:host .error-text{text-align:left;color:var(--red-base);display:none}:host.errored .textarea-wrapper{border:1px solid var(--red-base)}:host.errored .textarea-wrapper .error-icon{position:absolute;right:6px;top:6px;font-size:18px;color:var(--red-base);display:inline!important}:host.errored .error-text{display:block}:host.ng-touched.ng-invalid .textarea-wrapper{border:1px solid red;border-radius:6px}\n"] }]
|
|
8732
8727
|
}], propDecorators: { minRows: [{
|
|
8733
8728
|
type: Input
|
|
8734
8729
|
}], maxRows: [{
|
|
@@ -8796,6 +8791,7 @@ class FwChipListComponent {
|
|
|
8796
8791
|
this.hostElement = inject(ElementRef);
|
|
8797
8792
|
this.childChipElementRefs = contentChildren(FwChipComponent, { read: ElementRef });
|
|
8798
8793
|
this.moreText = viewChild.required('moreText');
|
|
8794
|
+
this.subscriptions = [];
|
|
8799
8795
|
this.hiddenElementCount = signal(0);
|
|
8800
8796
|
this.hiddenChips = signal([]);
|
|
8801
8797
|
this.hiddenLabels = computed(() => {
|
|
@@ -8805,6 +8801,7 @@ class FwChipListComponent {
|
|
|
8805
8801
|
return contentSpan.innerText;
|
|
8806
8802
|
}).join(', ');
|
|
8807
8803
|
});
|
|
8804
|
+
this.resizeDebounceMs = input(100);
|
|
8808
8805
|
this.childrenChanged = effect(() => {
|
|
8809
8806
|
this.childChipElementRefs();
|
|
8810
8807
|
this.calcChipOverflow();
|
|
@@ -8814,7 +8811,16 @@ class FwChipListComponent {
|
|
|
8814
8811
|
});
|
|
8815
8812
|
}
|
|
8816
8813
|
ngOnInit() {
|
|
8817
|
-
|
|
8814
|
+
// wire up resize observer to rxjs and debouce
|
|
8815
|
+
const resize$ = new BehaviorSubject([]);
|
|
8816
|
+
const recalcOnResize$ = resize$.pipe(debounce(() => timer(this.resizeDebounceMs())), // debounce otherwise it can run EVERY frame
|
|
8817
|
+
distinctUntilChanged());
|
|
8818
|
+
const resizeObserver = new ResizeObserver((resizeEntries) => {
|
|
8819
|
+
resize$.next(resizeEntries);
|
|
8820
|
+
});
|
|
8821
|
+
resizeObserver.observe(this.hostElement.nativeElement, {});
|
|
8822
|
+
const sub = recalcOnResize$.subscribe(() => this.calcChipOverflow());
|
|
8823
|
+
this.subscriptions.push(sub);
|
|
8818
8824
|
}
|
|
8819
8825
|
calcChipOverflow() {
|
|
8820
8826
|
const hostRect = this.hostElement.nativeElement.getBoundingClientRect();
|
|
@@ -8844,8 +8850,11 @@ class FwChipListComponent {
|
|
|
8844
8850
|
// eslint-disable-next-line @rx-angular/no-explicit-change-detection-apis
|
|
8845
8851
|
this.changeDetector.detectChanges();
|
|
8846
8852
|
}
|
|
8853
|
+
ngOnDestroy() {
|
|
8854
|
+
this.subscriptions.forEach(sub => sub.unsubscribe());
|
|
8855
|
+
}
|
|
8847
8856
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwChipListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8848
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "17.3.12", type: FwChipListComponent, isStandalone: true, selector: "fw-chip-list", queries: [{ propertyName: "childChipElementRefs", predicate: FwChipComponent, read: ElementRef, isSignal: true }], viewQueries: [{ propertyName: "moreText", first: true, predicate: ["moreText"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content></ng-content>\n<fw-tooltip [title]=\"hiddenLabels()\">\n <p #moreText> +{{hiddenChips().length}} more </p>\n</fw-tooltip>\n", styles: [":host{flex-basis:max-content;display:flex;flex-flow:row wrap;gap:8px;align-items:flex-start;justify-content:flex-start;max-height:28px;overflow:hidden}:host p{line-height:24px;cursor:default;margin:0 8px 0 0;text-wrap:nowrap;color:var(--typography-muted)}:host::ng-deep .hidden{display:none}\n"], dependencies: [{ kind: "ngmodule", type: FwChipModule }, { kind: "ngmodule", type: FwTooltipModule }, { kind: "component", type: FwTooltipComponent, selector: "fw-tooltip", inputs: ["title", "color", "position", "maxWidth", "fullWidth", "isOpen", "trigger", "delay"] }] }); }
|
|
8857
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "17.3.12", type: FwChipListComponent, isStandalone: true, selector: "fw-chip-list", inputs: { resizeDebounceMs: { classPropertyName: "resizeDebounceMs", publicName: "resizeDebounceMs", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "childChipElementRefs", predicate: FwChipComponent, read: ElementRef, isSignal: true }], viewQueries: [{ propertyName: "moreText", first: true, predicate: ["moreText"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content></ng-content>\n<fw-tooltip [title]=\"hiddenLabels()\">\n <p #moreText> +{{hiddenChips().length}} more </p>\n</fw-tooltip>\n", styles: [":host{flex-basis:max-content;display:flex;flex-flow:row wrap;gap:8px;align-items:flex-start;justify-content:flex-start;max-height:28px;overflow:hidden}:host p{line-height:24px;cursor:default;margin:0 8px 0 0;text-wrap:nowrap;color:var(--typography-muted)}:host::ng-deep .hidden{display:none}\n"], dependencies: [{ kind: "ngmodule", type: FwChipModule }, { kind: "ngmodule", type: FwTooltipModule }, { kind: "component", type: FwTooltipComponent, selector: "fw-tooltip", inputs: ["title", "color", "position", "maxWidth", "fullWidth", "isOpen", "trigger", "delay"] }] }); }
|
|
8849
8858
|
}
|
|
8850
8859
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwChipListComponent, decorators: [{
|
|
8851
8860
|
type: Component,
|
|
@@ -8870,7 +8879,9 @@ class FwTypeaheadComponent {
|
|
|
8870
8879
|
this.onTouched = () => {
|
|
8871
8880
|
};
|
|
8872
8881
|
this.value = model([]);
|
|
8882
|
+
this.value$ = toObservable(this.value);
|
|
8873
8883
|
this.optionsInput = input([], { alias: 'options' });
|
|
8884
|
+
this.optionsInput$ = toObservable(this.optionsInput);
|
|
8874
8885
|
this.maxOptionsHeight = input('400px');
|
|
8875
8886
|
this.minOptionsHeight = input('0px');
|
|
8876
8887
|
this.optionsWidth = input('');
|
|
@@ -8881,31 +8892,53 @@ class FwTypeaheadComponent {
|
|
|
8881
8892
|
this.searchValueChanges$ = toObservable(this.searchValue);
|
|
8882
8893
|
this.allowNew = input(true);
|
|
8883
8894
|
this.placeholder = input('Enter tags...');
|
|
8884
|
-
|
|
8885
|
-
|
|
8886
|
-
|
|
8895
|
+
/**
|
|
8896
|
+
* Options after they've been both filtered for matching the search and already selected
|
|
8897
|
+
*/
|
|
8898
|
+
this.filteredOptions$ = combineLatest([
|
|
8899
|
+
this.searchValueChanges$,
|
|
8900
|
+
this.optionsInput$,
|
|
8901
|
+
]).pipe(tap(() => this.loading.set(true)),
|
|
8902
|
+
// first determine if it's a function or static options
|
|
8903
|
+
switchMap(([searchString, optionInput]) => {
|
|
8904
|
+
if (typeof optionInput === 'function') {
|
|
8905
|
+
const fetchingFunction = optionInput;
|
|
8887
8906
|
return fetchingFunction(searchString);
|
|
8888
8907
|
}
|
|
8889
|
-
|
|
8890
|
-
|
|
8891
|
-
|
|
8892
|
-
|
|
8893
|
-
|
|
8908
|
+
else {
|
|
8909
|
+
// if they're static options we need to do the search filtering
|
|
8910
|
+
const filteredOptionInput = optionInput?.filter(opt => opt.toLowerCase().includes(searchString.toLowerCase()));
|
|
8911
|
+
return of(filteredOptionInput);
|
|
8912
|
+
}
|
|
8913
|
+
}),
|
|
8914
|
+
// next filter out already selected values
|
|
8915
|
+
switchMap(options => combineLatest([of(options), this.value$])), map(([options, currentValue]) => {
|
|
8916
|
+
return options?.filter(option => {
|
|
8917
|
+
const alreadySelected = currentValue.find(val => val.toLowerCase() === option.toLowerCase());
|
|
8894
8918
|
return !alreadySelected;
|
|
8895
8919
|
});
|
|
8896
8920
|
}), tap(() => this.loading.set(false)));
|
|
8897
|
-
|
|
8921
|
+
/**
|
|
8922
|
+
* Options after they've been both filtered for matching the search and already selected
|
|
8923
|
+
*/
|
|
8924
|
+
this.filteredOptions = toSignal(this.filteredOptions$);
|
|
8898
8925
|
this.displayNewOption = computed(() => {
|
|
8899
8926
|
const newValue = this.searchValue();
|
|
8900
8927
|
if (!newValue) {
|
|
8901
8928
|
return false;
|
|
8902
8929
|
}
|
|
8903
|
-
const directMatch = this.
|
|
8930
|
+
const directMatch = this.filteredOptions()?.includes?.(newValue);
|
|
8904
8931
|
const loading = this.loading();
|
|
8905
8932
|
const alreadySelected = Boolean(this.value().find(val => val.toLowerCase() === newValue.toLowerCase()));
|
|
8906
8933
|
return this.allowNew() && !alreadySelected && (!directMatch || loading);
|
|
8907
8934
|
});
|
|
8908
8935
|
this.addValue = (newValue) => {
|
|
8936
|
+
const isInOptions = this.filteredOptions().includes(newValue);
|
|
8937
|
+
const isNewWhileDisallowed = !this.allowNew() && !isInOptions;
|
|
8938
|
+
const isDuplicate = this.value().includes(newValue.toLowerCase());
|
|
8939
|
+
if (isNewWhileDisallowed || isDuplicate) {
|
|
8940
|
+
return;
|
|
8941
|
+
}
|
|
8909
8942
|
this.value.update(prevValue => [
|
|
8910
8943
|
...prevValue || [],
|
|
8911
8944
|
newValue,
|
|
@@ -8964,7 +8997,6 @@ class FwTypeaheadComponent {
|
|
|
8964
8997
|
};
|
|
8965
8998
|
}
|
|
8966
8999
|
outsideClick() {
|
|
8967
|
-
this.onTouched();
|
|
8968
9000
|
this.trigger().close();
|
|
8969
9001
|
}
|
|
8970
9002
|
setDisabledState(isDisabled) {
|
|
@@ -9005,6 +9037,9 @@ class FwTypeaheadComponent {
|
|
|
9005
9037
|
// eslint-disable-next-line @rx-angular/prefer-no-layout-sensitive-apis
|
|
9006
9038
|
this.inputRef().nativeElement.focus();
|
|
9007
9039
|
}
|
|
9040
|
+
onFocusLoss(_) {
|
|
9041
|
+
this.onTouched();
|
|
9042
|
+
}
|
|
9008
9043
|
/* eslint-enable */
|
|
9009
9044
|
handleKey(e) {
|
|
9010
9045
|
const handler = this.keyHandlerMap[e.key];
|
|
@@ -9042,7 +9077,7 @@ class FwTypeaheadComponent {
|
|
|
9042
9077
|
useExisting: forwardRef(() => FwTypeaheadComponent),
|
|
9043
9078
|
multi: true,
|
|
9044
9079
|
},
|
|
9045
|
-
], 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\n (click)=\"focusInput($event)\"\n class=\"input-container\"\n [ngClass]=\"{ 'disabled': disabled() }\"\n [cdkMenuTriggerFor]=\"menuContent\"\n fwMenuRegister\n #inputContainer>\n <fw-chip-list class=\"chips\">\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 <input\n test-id=\"typeahead-input\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"disabled()\"\n [value]=\"searchValue()\"\n (keyup)=\"handleSearchChange($event)\"\n (keydown)=\"handleKey($event)\"\n #input\n type=\"text\"\n />\n @if(loading()) {\n <fw-progress-spinner size=\"small\"/>\n }\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>\n @if(loading() && !displayNewOption()) {\n <fw-menu-item title=\"Searching...\" [disabled]=\"true\"/>\n } @else if(!loading()) {\n @for (option of
|
|
9080
|
+
], 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\n (click)=\"focusInput($event)\"\n class=\"input-container\"\n [ngClass]=\"{ 'disabled': disabled() }\"\n [cdkMenuTriggerFor]=\"menuContent\"\n fwMenuRegister\n #inputContainer>\n <fw-chip-list class=\"chips\">\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 <input\n test-id=\"typeahead-input\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"disabled()\"\n [value]=\"searchValue()\"\n (keyup)=\"handleSearchChange($event)\"\n (keydown)=\"handleKey($event)\"\n (focusout)=\"onFocusLoss($event)\"\n #input\n type=\"text\"\n />\n @if(loading()) {\n <fw-progress-spinner size=\"small\"/>\n }\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>\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($event)\"\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=\"No tag suggestions\" [disabled]=\"true\"/>\n }\n }\n }\n @if(displayNewOption()) {\n <fw-menu-item\n (click)=\"handleOptionClick($event)\"\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{display:flex;flex-direction:column;width:100%;line-height:21px}:host.disabled{cursor:not-allowed}:host.disabled fw-icon{cursor:not-allowed!important}:host .chips,:host fw-progress-spinner{margin:-4px 0}:host .input-container{width:100%;box-sizing:border-box;color:var(--typography-light);background:var(--page-light);display:flex;padding:8px;align-items:center;border-radius:6px;border:1px solid var(--separations-input);font-family:Inter,sans-serif}: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: ["value", "variant", "color", "icon", "title", "description", "showClose", "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"], outputs: ["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", "keyHandler"], outputs: ["filteredMenuItemChange", "filterChanged"] }, { kind: "component", type: FwMenuItemComponent, selector: "fw-menu-item", inputs: ["value", "size", "title", "description", "icon", "iconColor", "disabled", "showCheckbox", "checkboxColor", "multiSelect", "hidden", "collapsed", "href", "target", "subItemsOpen", "mouseEnterHandler", "focused", "selected"], outputs: ["mouseEnterHandlerChange", "click"] }, { kind: "ngmodule", type: CdkMenuModule }, { kind: "directive", type: i1$4.CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData"], 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"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
9046
9081
|
}
|
|
9047
9082
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwTypeaheadComponent, decorators: [{
|
|
9048
9083
|
type: Component,
|
|
@@ -9062,7 +9097,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
9062
9097
|
useExisting: forwardRef(() => FwTypeaheadComponent),
|
|
9063
9098
|
multi: true,
|
|
9064
9099
|
},
|
|
9065
|
-
], template: "<div\n (click)=\"focusInput($event)\"\n class=\"input-container\"\n [ngClass]=\"{ 'disabled': disabled() }\"\n [cdkMenuTriggerFor]=\"menuContent\"\n fwMenuRegister\n #inputContainer>\n <fw-chip-list class=\"chips\">\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 <input\n test-id=\"typeahead-input\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"disabled()\"\n [value]=\"searchValue()\"\n (keyup)=\"handleSearchChange($event)\"\n (keydown)=\"handleKey($event)\"\n #input\n type=\"text\"\n />\n @if(loading()) {\n <fw-progress-spinner size=\"small\"/>\n }\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>\n @if(loading() && !displayNewOption()) {\n <fw-menu-item title=\"Searching...\" [disabled]=\"true\"/>\n } @else if(!loading()) {\n @for (option of
|
|
9100
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n (click)=\"focusInput($event)\"\n class=\"input-container\"\n [ngClass]=\"{ 'disabled': disabled() }\"\n [cdkMenuTriggerFor]=\"menuContent\"\n fwMenuRegister\n #inputContainer>\n <fw-chip-list class=\"chips\">\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 <input\n test-id=\"typeahead-input\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"disabled()\"\n [value]=\"searchValue()\"\n (keyup)=\"handleSearchChange($event)\"\n (keydown)=\"handleKey($event)\"\n (focusout)=\"onFocusLoss($event)\"\n #input\n type=\"text\"\n />\n @if(loading()) {\n <fw-progress-spinner size=\"small\"/>\n }\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>\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($event)\"\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=\"No tag suggestions\" [disabled]=\"true\"/>\n }\n }\n }\n @if(displayNewOption()) {\n <fw-menu-item\n (click)=\"handleOptionClick($event)\"\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{display:flex;flex-direction:column;width:100%;line-height:21px}:host.disabled{cursor:not-allowed}:host.disabled fw-icon{cursor:not-allowed!important}:host .chips,:host fw-progress-spinner{margin:-4px 0}:host .input-container{width:100%;box-sizing:border-box;color:var(--typography-light);background:var(--page-light);display:flex;padding:8px;align-items:center;border-radius:6px;border:1px solid var(--separations-input);font-family:Inter,sans-serif}: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"] }]
|
|
9066
9101
|
}], propDecorators: { outsideClick: [{
|
|
9067
9102
|
type: HostListener,
|
|
9068
9103
|
args: ['document:click']
|