@flywheel-io/vision 21.5.1 → 21.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -3728,6 +3728,8 @@ const DEFAULT_PRESET_COLORS = [
|
|
|
3728
3728
|
'#F5F5F5FF',
|
|
3729
3729
|
];
|
|
3730
3730
|
|
|
3731
|
+
// dragSaturation/dragHue/dragAlpha need the track element's current rect on every pointermove
|
|
3732
|
+
/* eslint-disable @rx-angular/prefer-no-layout-sensitive-apis */
|
|
3731
3733
|
/**
|
|
3732
3734
|
* Just under 360, not 359.99: hsvaToRgba rounds its output to 8-bit RGB channels, so a hue that's
|
|
3733
3735
|
* only a fraction of a degree short of 360 still round-trips back as hue 0 once rounding destroys
|
|
@@ -4220,6 +4222,54 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
|
|
|
4220
4222
|
}]
|
|
4221
4223
|
}] });
|
|
4222
4224
|
|
|
4225
|
+
/**
|
|
4226
|
+
* A boxed, single-select card combining `FwContainedInput`'s contained-card layout with a radio control.
|
|
4227
|
+
* Renders as a child of `fw-radio-group`, the same way `fw-radio-button` does.
|
|
4228
|
+
* @see [Vision storybook](https://cdn.flywheel.io/docs/vision/master/?path=/docs/form-controls-contained-radio--docs)
|
|
4229
|
+
*/
|
|
4230
|
+
class FwContainedRadioComponent {
|
|
4231
|
+
constructor() {
|
|
4232
|
+
this.value = input('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
4233
|
+
this.title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : /* istanbul ignore next */ []));
|
|
4234
|
+
this.description = input(...(ngDevMode ? [undefined, { debugName: "description" }] : /* istanbul ignore next */ []));
|
|
4235
|
+
this.inputPosition = input('start', ...(ngDevMode ? [{ debugName: "inputPosition" }] : /* istanbul ignore next */ []));
|
|
4236
|
+
this.clamped = input(false, ...(ngDevMode ? [{ debugName: "clamped" }] : /* istanbul ignore next */ []));
|
|
4237
|
+
this.margin = input(false, ...(ngDevMode ? [{ debugName: "margin" }] : /* istanbul ignore next */ []));
|
|
4238
|
+
/**
|
|
4239
|
+
* Set by the owning `fw-radio-group`, matching the underlying native `name` attribute so browser radio
|
|
4240
|
+
* semantics (exclusivity, arrow-key navigation) work across sibling `fw-radio-button`/`fw-contained-radio` items
|
|
4241
|
+
*/
|
|
4242
|
+
this.group = model('', ...(ngDevMode ? [{ debugName: "group" }] : /* istanbul ignore next */ []));
|
|
4243
|
+
this.checked = model(false, ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
|
|
4244
|
+
this.disabled = model(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
4245
|
+
this.color = model('primary', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
|
|
4246
|
+
this.size = model('medium', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
4247
|
+
// eslint-disable-next-line @angular-eslint/no-output-native
|
|
4248
|
+
this.change = output();
|
|
4249
|
+
this.inputId = computed(() => `${this.group()}${this.value()}`, ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
|
|
4250
|
+
this.hostClass = computed(() => [
|
|
4251
|
+
'fw-contained-radio',
|
|
4252
|
+
`position-${this.inputPosition()}`,
|
|
4253
|
+
`color-${this.color()}`,
|
|
4254
|
+
`size-${this.size()}`,
|
|
4255
|
+
this.checked() ? 'checked' : '',
|
|
4256
|
+
this.disabled() ? 'disabled' : '',
|
|
4257
|
+
this.margin() ? 'margin' : '',
|
|
4258
|
+
].join(' '), ...(ngDevMode ? [{ debugName: "hostClass" }] : /* istanbul ignore next */ []));
|
|
4259
|
+
}
|
|
4260
|
+
handleChange(event) {
|
|
4261
|
+
this.change.emit(event?.target?.value);
|
|
4262
|
+
}
|
|
4263
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: FwContainedRadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4264
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: FwContainedRadioComponent, isStandalone: true, selector: "fw-contained-radio", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, inputPosition: { classPropertyName: "inputPosition", publicName: "inputPosition", isSignal: true, isRequired: false, transformFunction: null }, clamped: { classPropertyName: "clamped", publicName: "clamped", isSignal: true, isRequired: false, transformFunction: null }, margin: { classPropertyName: "margin", publicName: "margin", isSignal: true, isRequired: false, transformFunction: null }, group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { group: "groupChange", checked: "checkedChange", disabled: "disabledChange", color: "colorChange", size: "sizeChange", change: "change" }, host: { properties: { "class": "hostClass()" } }, ngImport: i0, template: "<label class=\"content\" [attr.for]=\"inputId()\">\n <div class=\"input-heading\">\n <h4 class=\"vision-h4 section-heading\">\n <span [class.clamped]=\"clamped()\">{{ title() }}</span>\n <ng-content select=\"fw-tag\"></ng-content>\n </h4>\n @if (description()) {\n <p class=\"vision-p3\" [class.clamped]=\"clamped()\">{{ description() }}</p>\n }\n </div>\n <div class=\"input-wrapper\">\n <input\n type=\"radio\"\n class=\"radio-input\"\n [id]=\"inputId()\"\n [value]=\"value()\"\n [checked]=\"checked()\"\n [name]=\"group()\"\n [disabled]=\"disabled()\"\n (change)=\"handleChange($event)\"\n />\n <span class=\"item\">\n @if (checked()) {\n <span class=\"indicator\"></span>\n }\n </span>\n </div>\n</label>\n", styles: [":host{position:relative;flex:1;display:flex;border:1px solid var(--separations-base);border-radius:8px;-webkit-user-select:none;user-select:none}:host:hover{background-color:var(--slate-hover);border-color:var(--slate-border)}:host.checked{border-color:var(--slate-base);z-index:1}:host.checked:hover{background-color:transparent}:host:not(:first-child){border-top-left-radius:0;border-top-right-radius:0;margin-top:-1px}:host:not(:last-child){border-bottom-left-radius:0;border-bottom-right-radius:0}:host.margin{margin-bottom:16px;border-radius:8px}:host.margin+::ng-deep fw-contained-radio{margin-top:0;border-top-left-radius:8px;border-top-right-radius:8px}:host.color-primary:hover{background-color:var(--primary-hover);border-color:var(--primary-border)}:host.color-primary.checked{border-color:var(--primary-base)}:host.color-primary.checked:hover{background-color:transparent}:host.color-secondary:hover{background-color:var(--secondary-hover);border-color:var(--secondary-border)}:host.color-secondary.checked{border-color:var(--secondary-base)}:host.color-secondary.checked:hover{background-color:transparent}:host.color-slate:hover{background-color:var(--slate-hover);border-color:var(--slate-border)}:host.color-slate.checked{border-color:var(--slate-base)}:host.color-slate.checked:hover{background-color:transparent}:host.position-start .content{flex-direction:row-reverse}:host.disabled{opacity:.4;cursor:not-allowed}:host.disabled .content{cursor:not-allowed}:host .content{position:relative;flex:1;min-width:0;display:flex;flex-direction:row;align-items:center;padding:16px;gap:16px;cursor:pointer}:host.size-compact .content{padding:12px;gap:12px}:host .input-heading{display:flex;flex-direction:column;flex:1;min-width:0}:host .input-wrapper{position:relative;display:flex}:host h4{color:var(--typography-base);margin:0;display:flex;align-items:center;gap:5px}:host h4 .clamped{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host p{color:var(--typography-muted);margin:0;line-height:140%}:host p.clamped{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .radio-input{position:absolute;inset:0;width:36px;height:36px;margin:0;opacity:0;cursor:pointer}:host .radio-input:disabled{cursor:not-allowed}:host .item{height:36px;width:36px;min-height:36px;min-width:36px;display:flex;align-items:center;justify-content:center;border-radius:50%;position:relative}:host .item:after{content:\"\";position:absolute;display:block;width:20px;height:20px;background-clip:content-box;border:2px solid var(--typography-light);background-color:transparent;border-radius:50%}:host .radio-input:focus-visible+.item{outline:2px solid var(--primary-base);outline-offset:2px}:host.color-primary .radio-input:checked+.item:after{border-color:var(--primary-base)}:host.color-secondary .radio-input:checked+.item:after{border-color:var(--secondary-base)}:host.size-compact .item{width:30px;height:30px;min-width:30px;min-height:30px}:host.size-compact .item:after{width:18px;height:18px}:host.size-compact .radio-input{width:30px;height:30px}:host .indicator{width:12px;height:12px;background-color:var(--typography-light);border-radius:50%}:host.color-primary .indicator{background-color:var(--primary-base)}:host.color-secondary .indicator{background-color:var(--secondary-base)}:host.size-compact .indicator{width:10px;height:10px}:host.disabled .item:after{border:2px solid var(--typography-light)!important}:host.disabled .indicator{background-color:var(--typography-light)!important}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4265
|
+
}
|
|
4266
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: FwContainedRadioComponent, decorators: [{
|
|
4267
|
+
type: Component,
|
|
4268
|
+
args: [{ selector: 'fw-contained-radio', changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
4269
|
+
'[class]': 'hostClass()',
|
|
4270
|
+
}, template: "<label class=\"content\" [attr.for]=\"inputId()\">\n <div class=\"input-heading\">\n <h4 class=\"vision-h4 section-heading\">\n <span [class.clamped]=\"clamped()\">{{ title() }}</span>\n <ng-content select=\"fw-tag\"></ng-content>\n </h4>\n @if (description()) {\n <p class=\"vision-p3\" [class.clamped]=\"clamped()\">{{ description() }}</p>\n }\n </div>\n <div class=\"input-wrapper\">\n <input\n type=\"radio\"\n class=\"radio-input\"\n [id]=\"inputId()\"\n [value]=\"value()\"\n [checked]=\"checked()\"\n [name]=\"group()\"\n [disabled]=\"disabled()\"\n (change)=\"handleChange($event)\"\n />\n <span class=\"item\">\n @if (checked()) {\n <span class=\"indicator\"></span>\n }\n </span>\n </div>\n</label>\n", styles: [":host{position:relative;flex:1;display:flex;border:1px solid var(--separations-base);border-radius:8px;-webkit-user-select:none;user-select:none}:host:hover{background-color:var(--slate-hover);border-color:var(--slate-border)}:host.checked{border-color:var(--slate-base);z-index:1}:host.checked:hover{background-color:transparent}:host:not(:first-child){border-top-left-radius:0;border-top-right-radius:0;margin-top:-1px}:host:not(:last-child){border-bottom-left-radius:0;border-bottom-right-radius:0}:host.margin{margin-bottom:16px;border-radius:8px}:host.margin+::ng-deep fw-contained-radio{margin-top:0;border-top-left-radius:8px;border-top-right-radius:8px}:host.color-primary:hover{background-color:var(--primary-hover);border-color:var(--primary-border)}:host.color-primary.checked{border-color:var(--primary-base)}:host.color-primary.checked:hover{background-color:transparent}:host.color-secondary:hover{background-color:var(--secondary-hover);border-color:var(--secondary-border)}:host.color-secondary.checked{border-color:var(--secondary-base)}:host.color-secondary.checked:hover{background-color:transparent}:host.color-slate:hover{background-color:var(--slate-hover);border-color:var(--slate-border)}:host.color-slate.checked{border-color:var(--slate-base)}:host.color-slate.checked:hover{background-color:transparent}:host.position-start .content{flex-direction:row-reverse}:host.disabled{opacity:.4;cursor:not-allowed}:host.disabled .content{cursor:not-allowed}:host .content{position:relative;flex:1;min-width:0;display:flex;flex-direction:row;align-items:center;padding:16px;gap:16px;cursor:pointer}:host.size-compact .content{padding:12px;gap:12px}:host .input-heading{display:flex;flex-direction:column;flex:1;min-width:0}:host .input-wrapper{position:relative;display:flex}:host h4{color:var(--typography-base);margin:0;display:flex;align-items:center;gap:5px}:host h4 .clamped{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host p{color:var(--typography-muted);margin:0;line-height:140%}:host p.clamped{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .radio-input{position:absolute;inset:0;width:36px;height:36px;margin:0;opacity:0;cursor:pointer}:host .radio-input:disabled{cursor:not-allowed}:host .item{height:36px;width:36px;min-height:36px;min-width:36px;display:flex;align-items:center;justify-content:center;border-radius:50%;position:relative}:host .item:after{content:\"\";position:absolute;display:block;width:20px;height:20px;background-clip:content-box;border:2px solid var(--typography-light);background-color:transparent;border-radius:50%}:host .radio-input:focus-visible+.item{outline:2px solid var(--primary-base);outline-offset:2px}:host.color-primary .radio-input:checked+.item:after{border-color:var(--primary-base)}:host.color-secondary .radio-input:checked+.item:after{border-color:var(--secondary-base)}:host.size-compact .item{width:30px;height:30px;min-width:30px;min-height:30px}:host.size-compact .item:after{width:18px;height:18px}:host.size-compact .radio-input{width:30px;height:30px}:host .indicator{width:12px;height:12px;background-color:var(--typography-light);border-radius:50%}:host.color-primary .indicator{background-color:var(--primary-base)}:host.color-secondary .indicator{background-color:var(--secondary-base)}:host.size-compact .indicator{width:10px;height:10px}:host.disabled .item:after{border:2px solid var(--typography-light)!important}:host.disabled .indicator{background-color:var(--typography-light)!important}\n"] }]
|
|
4271
|
+
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], inputPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputPosition", required: false }] }], clamped: [{ type: i0.Input, args: [{ isSignal: true, alias: "clamped", required: false }] }], margin: [{ type: i0.Input, args: [{ isSignal: true, alias: "margin", required: false }] }], group: [{ type: i0.Input, args: [{ isSignal: true, alias: "group", required: false }] }, { type: i0.Output, args: ["groupChange"] }], 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"] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }, { type: i0.Output, args: ["colorChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }, { type: i0.Output, args: ["sizeChange"] }], change: [{ type: i0.Output, args: ["change"] }] } });
|
|
4272
|
+
|
|
4223
4273
|
/**
|
|
4224
4274
|
* Form control component for date, time, or datetime-local input with optional icon and Angular forms integration
|
|
4225
4275
|
* @see [Vision storybook](https://cdn.flywheel.io/docs/vision/master/?path=/docs/form-controls-date-input--docs)
|
|
@@ -5961,13 +6011,16 @@ class FwRadioGroupComponent {
|
|
|
5961
6011
|
this.sanitizer = inject(DomSanitizer);
|
|
5962
6012
|
this.dr = inject(DestroyRef);
|
|
5963
6013
|
this.radioButtons = contentChildren(FwRadioComponent, ...(ngDevMode ? [{ debugName: "radioButtons" }] : /* istanbul ignore next */ []));
|
|
6014
|
+
this.containedRadioButtons = contentChildren(FwContainedRadioComponent, ...(ngDevMode ? [{ debugName: "containedRadioButtons" }] : /* istanbul ignore next */ []));
|
|
6015
|
+
this.allRadios = computed(() => [...this.radioButtons(), ...this.containedRadioButtons()], ...(ngDevMode ? [{ debugName: "allRadios" }] : /* istanbul ignore next */ []));
|
|
5964
6016
|
this._value = signal(null, ...(ngDevMode ? [{ debugName: "_value" }] : /* istanbul ignore next */ []));
|
|
5965
6017
|
this.radioSubs = new Map();
|
|
6018
|
+
this.containedRadioSubs = new Map();
|
|
5966
6019
|
this.onTouch = () => { };
|
|
5967
6020
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
5968
6021
|
this.onChange = (value) => { };
|
|
5969
6022
|
effect(() => {
|
|
5970
|
-
const radios = this.
|
|
6023
|
+
const radios = this.allRadios();
|
|
5971
6024
|
const value = this._value();
|
|
5972
6025
|
const disabled = this.disabled();
|
|
5973
6026
|
const group = this.group();
|
|
@@ -6000,6 +6053,21 @@ class FwRadioGroupComponent {
|
|
|
6000
6053
|
}
|
|
6001
6054
|
});
|
|
6002
6055
|
});
|
|
6056
|
+
effect(() => {
|
|
6057
|
+
const containedRadios = this.containedRadioButtons();
|
|
6058
|
+
this.containedRadioSubs.forEach((sub, rb) => {
|
|
6059
|
+
if (!containedRadios.includes(rb)) {
|
|
6060
|
+
sub.unsubscribe();
|
|
6061
|
+
this.containedRadioSubs.delete(rb);
|
|
6062
|
+
}
|
|
6063
|
+
});
|
|
6064
|
+
containedRadios.forEach((rb) => {
|
|
6065
|
+
if (!this.containedRadioSubs.has(rb)) {
|
|
6066
|
+
const sub = rb.change.subscribe((value) => this.handleChange(value));
|
|
6067
|
+
this.containedRadioSubs.set(rb, sub);
|
|
6068
|
+
}
|
|
6069
|
+
});
|
|
6070
|
+
});
|
|
6003
6071
|
}
|
|
6004
6072
|
writeValue(newValue) {
|
|
6005
6073
|
this.value.set(newValue);
|
|
@@ -6029,11 +6097,11 @@ class FwRadioGroupComponent {
|
|
|
6029
6097
|
useExisting: FwRadioGroupComponent,
|
|
6030
6098
|
multi: true,
|
|
6031
6099
|
},
|
|
6032
|
-
], queries: [{ propertyName: "radioButtons", predicate: FwRadioComponent, isSignal: true }], ngImport: i0, template: '<ng-content select="fw-radio-button"></ng-content>', isInline: true }); }
|
|
6100
|
+
], queries: [{ propertyName: "radioButtons", predicate: FwRadioComponent, isSignal: true }, { propertyName: "containedRadioButtons", predicate: FwContainedRadioComponent, isSignal: true }], ngImport: i0, template: '<ng-content select="fw-radio-button, fw-contained-radio"></ng-content>', isInline: true }); }
|
|
6033
6101
|
}
|
|
6034
6102
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: FwRadioGroupComponent, decorators: [{
|
|
6035
6103
|
type: Component,
|
|
6036
|
-
args: [{ selector: 'fw-radio-group', template: '<ng-content select="fw-radio-button"></ng-content>', providers: [
|
|
6104
|
+
args: [{ selector: 'fw-radio-group', template: '<ng-content select="fw-radio-button, fw-contained-radio"></ng-content>', providers: [
|
|
6037
6105
|
{
|
|
6038
6106
|
provide: NG_VALUE_ACCESSOR,
|
|
6039
6107
|
useExisting: FwRadioGroupComponent,
|
|
@@ -6042,7 +6110,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
|
|
|
6042
6110
|
] }]
|
|
6043
6111
|
}], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], group: [{ type: i0.Input, args: [{ isSignal: true, alias: "group", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], change: [{
|
|
6044
6112
|
type: Output
|
|
6045
|
-
}], radioButtons: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => FwRadioComponent), { isSignal: true }] }], style: [{
|
|
6113
|
+
}], radioButtons: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => FwRadioComponent), { isSignal: true }] }], containedRadioButtons: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => FwContainedRadioComponent), { isSignal: true }] }], style: [{
|
|
6046
6114
|
type: HostBinding,
|
|
6047
6115
|
args: ['style']
|
|
6048
6116
|
}] } });
|
|
@@ -10657,6 +10725,33 @@ class FwTypeaheadComponent {
|
|
|
10657
10725
|
* @default "No results found"
|
|
10658
10726
|
*/
|
|
10659
10727
|
this.emptyText = input('No results found', ...(ngDevMode ? [{ debugName: "emptyText" }] : /* istanbul ignore next */ []));
|
|
10728
|
+
/**
|
|
10729
|
+
* Text to display in place of the options list once no more options can be selected or added, i.e. when
|
|
10730
|
+
* `allowNew` is false and either every option is in `optionsNotAllowed` or every option is already selected.
|
|
10731
|
+
* @default "No options available"
|
|
10732
|
+
*/
|
|
10733
|
+
this.exhaustedText = input('No options available', ...(ngDevMode ? [{ debugName: "exhaustedText" }] : /* istanbul ignore next */ []));
|
|
10734
|
+
/**
|
|
10735
|
+
* Values that cannot be selected or added, whether they come from `options` or are typed as a new value.
|
|
10736
|
+
* Matching is case-insensitive.
|
|
10737
|
+
* @default []
|
|
10738
|
+
*/
|
|
10739
|
+
this.optionsNotAllowed = input([], ...(ngDevMode ? [{ debugName: "optionsNotAllowed" }] : /* istanbul ignore next */ []));
|
|
10740
|
+
/**
|
|
10741
|
+
* Called with a new (not-yet-existing) value before it's added, to allow rejecting it. Has no effect on
|
|
10742
|
+
* values that already exist in `options`.
|
|
10743
|
+
*/
|
|
10744
|
+
this.onValidateNewOption = input(...(ngDevMode ? [undefined, { debugName: "onValidateNewOption" }] : /* istanbul ignore next */ []));
|
|
10745
|
+
/**
|
|
10746
|
+
* Label shown next to a new value that can be added
|
|
10747
|
+
* @default "New"
|
|
10748
|
+
*/
|
|
10749
|
+
this.optionNewLabel = input('New', ...(ngDevMode ? [{ debugName: "optionNewLabel" }] : /* istanbul ignore next */ []));
|
|
10750
|
+
/**
|
|
10751
|
+
* Label shown next to an option or new value that's disallowed via `optionsNotAllowed` or `onValidateNewOption`
|
|
10752
|
+
* @default "Not Allowed"
|
|
10753
|
+
*/
|
|
10754
|
+
this.optionNotAllowedLabel = input('Not Allowed', ...(ngDevMode ? [{ debugName: "optionNotAllowedLabel" }] : /* istanbul ignore next */ []));
|
|
10660
10755
|
this.onChange = (_) => { };
|
|
10661
10756
|
this.onTouched = () => {
|
|
10662
10757
|
this.touched.set(true);
|
|
@@ -10731,13 +10826,55 @@ class FwTypeaheadComponent {
|
|
|
10731
10826
|
const alreadySelected = Boolean(this.value()?.find((val) => val.toLowerCase() === newValue.toLowerCase()));
|
|
10732
10827
|
return this.allowNew() && !alreadySelected && (!directMatch || loading);
|
|
10733
10828
|
}, ...(ngDevMode ? [{ debugName: "displayNewOption" }] : /* istanbul ignore next */ []));
|
|
10829
|
+
this.isOptionNotAllowed = (optionValue) => {
|
|
10830
|
+
return this.optionsNotAllowed().some((notAllowed) => notAllowed.toLowerCase() === optionValue.toLowerCase());
|
|
10831
|
+
};
|
|
10832
|
+
/**
|
|
10833
|
+
* Whether the currently typed searchValue is allowed to be added as a new value, per `onValidateNewOption`
|
|
10834
|
+
* and `optionsNotAllowed`. Only meaningful while `displayNewOption()` is true.
|
|
10835
|
+
*/
|
|
10836
|
+
this.newOptionAllowed = computed(() => {
|
|
10837
|
+
const newValue = this.searchValue();
|
|
10838
|
+
const validateNewOption = this.onValidateNewOption();
|
|
10839
|
+
return (!validateNewOption || validateNewOption(newValue)) && !this.isOptionNotAllowed(newValue);
|
|
10840
|
+
}, ...(ngDevMode ? [{ debugName: "newOptionAllowed" }] : /* istanbul ignore next */ []));
|
|
10841
|
+
/**
|
|
10842
|
+
* Whether the new-option row should be shown. It's hidden while other matching options are still displayed,
|
|
10843
|
+
* to avoid distracting from those, and only surfaced once nothing else matches.
|
|
10844
|
+
*/
|
|
10845
|
+
this.showNewOption = computed(() => {
|
|
10846
|
+
return this.displayNewOption() && (this.newOptionAllowed() || (this.filteredOptions()?.length ?? 0) === 0);
|
|
10847
|
+
}, ...(ngDevMode ? [{ debugName: "showNewOption" }] : /* istanbul ignore next */ []));
|
|
10848
|
+
this.allOptionsNotAllowed = computed(() => {
|
|
10849
|
+
const options = this.filteredOptions() ?? [];
|
|
10850
|
+
return options.length > 0 && options.every((option) => this.isOptionNotAllowed(option));
|
|
10851
|
+
}, ...(ngDevMode ? [{ debugName: "allOptionsNotAllowed" }] : /* istanbul ignore next */ []));
|
|
10852
|
+
this.allOptionsSelected = computed(() => {
|
|
10853
|
+
const options = this.optionsInput();
|
|
10854
|
+
if (!Array.isArray(options) || options.length === 0) {
|
|
10855
|
+
return false;
|
|
10856
|
+
}
|
|
10857
|
+
return options.every((option) => this.value().some((val) => val.toLowerCase() === option.toLowerCase()));
|
|
10858
|
+
}, ...(ngDevMode ? [{ debugName: "allOptionsSelected" }] : /* istanbul ignore next */ []));
|
|
10859
|
+
/**
|
|
10860
|
+
* True once no more options can be selected or typed in: `allowNew` is false and either every remaining
|
|
10861
|
+
* option is in `optionsNotAllowed`, or every provided option has already been selected.
|
|
10862
|
+
*/
|
|
10863
|
+
this.isExhausted = computed(() => !this.allowNew() && (this.allOptionsNotAllowed() || this.allOptionsSelected()), ...(ngDevMode ? [{ debugName: "isExhausted" }] : /* istanbul ignore next */ []));
|
|
10734
10864
|
this.addValue = (newValue) => {
|
|
10865
|
+
if (this.isOptionNotAllowed(newValue)) {
|
|
10866
|
+
return;
|
|
10867
|
+
}
|
|
10735
10868
|
const isInOptions = this.filteredOptions()?.includes(newValue);
|
|
10736
10869
|
const isNewWhileDisallowed = !this.allowNew() && !isInOptions;
|
|
10737
10870
|
const isDuplicate = this.value().includes(newValue.toLowerCase());
|
|
10738
10871
|
if (isNewWhileDisallowed || isDuplicate) {
|
|
10739
10872
|
return;
|
|
10740
10873
|
}
|
|
10874
|
+
const validateNewOption = this.onValidateNewOption();
|
|
10875
|
+
if (!isInOptions && validateNewOption && !validateNewOption(newValue)) {
|
|
10876
|
+
return;
|
|
10877
|
+
}
|
|
10741
10878
|
if (this.selectType() === 'single') {
|
|
10742
10879
|
this.value.set([newValue]);
|
|
10743
10880
|
this.trigger().close();
|
|
@@ -10900,13 +11037,13 @@ class FwTypeaheadComponent {
|
|
|
10900
11037
|
newlyFocused.scrollIntoView();
|
|
10901
11038
|
}
|
|
10902
11039
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: FwTypeaheadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10903
|
-
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: [
|
|
11040
|
+
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 }, exhaustedText: { classPropertyName: "exhaustedText", publicName: "exhaustedText", isSignal: true, isRequired: false, transformFunction: null }, optionsNotAllowed: { classPropertyName: "optionsNotAllowed", publicName: "optionsNotAllowed", isSignal: true, isRequired: false, transformFunction: null }, onValidateNewOption: { classPropertyName: "onValidateNewOption", publicName: "onValidateNewOption", isSignal: true, isRequired: false, transformFunction: null }, optionNewLabel: { classPropertyName: "optionNewLabel", publicName: "optionNewLabel", isSignal: true, isRequired: false, transformFunction: null }, optionNotAllowedLabel: { classPropertyName: "optionNotAllowedLabel", publicName: "optionNotAllowedLabel", 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: [
|
|
10904
11041
|
{
|
|
10905
11042
|
provide: NG_VALUE_ACCESSOR,
|
|
10906
11043
|
useExisting: forwardRef(() => FwTypeaheadComponent),
|
|
10907
11044
|
multi: true,
|
|
10908
11045
|
},
|
|
10909
|
-
], 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
|
|
11046
|
+
], 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() && isExhausted()) {\n <fw-menu-item [title]=\"exhaustedText()\" [disabled]=\"true\"/>\n } @else if(!loading()) {\n @for (option of filteredOptions(); track option) {\n @let notAllowed = isOptionNotAllowed(option);\n <fw-menu-item\n (click)=\"handleOptionClick(option)\"\n (mouseenter)=\"notAllowed ? null : setFocusByValue(option)\"\n [title]=\"option\"\n [focused]=\"focusedOption() === option\"\n [disabled]=\"notAllowed\"\n [value]=\"option\"\n >\n @if (notAllowed) {\n <p class=\"new-tag\">{{ optionNotAllowedLabel() }}</p>\n }\n </fw-menu-item>\n }\n @empty {\n @if (!showNewOption()) {\n <fw-menu-item [title]=\"emptyText()\" [disabled]=\"true\"/>\n }\n }\n }\n @if(showNewOption()) {\n <fw-menu-item\n (click)=\"handleOptionClick(searchValue())\"\n (mouseenter)=\"newOptionAllowed() ? setFocusByValue(searchValue()) : null\"\n [title]=\"searchValue()\"\n [value]=\"searchValue()\"\n [disabled]=\"!newOptionAllowed()\"\n [focused]=\"focusedOption() === searchValue()\">\n <p class=\"new-tag\">{{ newOptionAllowed() ? optionNewLabel() : optionNotAllowedLabel() }}</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", "disableWrapperScroll", "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 }); }
|
|
10910
11047
|
}
|
|
10911
11048
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: FwTypeaheadComponent, decorators: [{
|
|
10912
11049
|
type: Component,
|
|
@@ -10928,11 +11065,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
|
|
|
10928
11065
|
},
|
|
10929
11066
|
], host: {
|
|
10930
11067
|
'[class.fw-touched]': 'touched()',
|
|
10931
|
-
}, 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
|
|
11068
|
+
}, 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() && isExhausted()) {\n <fw-menu-item [title]=\"exhaustedText()\" [disabled]=\"true\"/>\n } @else if(!loading()) {\n @for (option of filteredOptions(); track option) {\n @let notAllowed = isOptionNotAllowed(option);\n <fw-menu-item\n (click)=\"handleOptionClick(option)\"\n (mouseenter)=\"notAllowed ? null : setFocusByValue(option)\"\n [title]=\"option\"\n [focused]=\"focusedOption() === option\"\n [disabled]=\"notAllowed\"\n [value]=\"option\"\n >\n @if (notAllowed) {\n <p class=\"new-tag\">{{ optionNotAllowedLabel() }}</p>\n }\n </fw-menu-item>\n }\n @empty {\n @if (!showNewOption()) {\n <fw-menu-item [title]=\"emptyText()\" [disabled]=\"true\"/>\n }\n }\n }\n @if(showNewOption()) {\n <fw-menu-item\n (click)=\"handleOptionClick(searchValue())\"\n (mouseenter)=\"newOptionAllowed() ? setFocusByValue(searchValue()) : null\"\n [title]=\"searchValue()\"\n [value]=\"searchValue()\"\n [disabled]=\"!newOptionAllowed()\"\n [focused]=\"focusedOption() === searchValue()\">\n <p class=\"new-tag\">{{ newOptionAllowed() ? optionNewLabel() : optionNotAllowedLabel() }}</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"] }]
|
|
10932
11069
|
}], propDecorators: { outsideClick: [{
|
|
10933
11070
|
type: HostListener,
|
|
10934
11071
|
args: ['document:click']
|
|
10935
|
-
}], 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: [{
|
|
11072
|
+
}], 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 }] }], exhaustedText: [{ type: i0.Input, args: [{ isSignal: true, alias: "exhaustedText", required: false }] }], optionsNotAllowed: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionsNotAllowed", required: false }] }], onValidateNewOption: [{ type: i0.Input, args: [{ isSignal: true, alias: "onValidateNewOption", required: false }] }], optionNewLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionNewLabel", required: false }] }], optionNotAllowedLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionNotAllowedLabel", required: false }] }], onClick: [{
|
|
10936
11073
|
type: HostListener,
|
|
10937
11074
|
args: ['click', ['$event']]
|
|
10938
11075
|
}], 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 }] }] } });
|
|
@@ -10966,5 +11103,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
|
|
|
10966
11103
|
* Generated bundle index. Do not edit.
|
|
10967
11104
|
*/
|
|
10968
11105
|
|
|
10969
|
-
export { DEFAULT_PRESET_COLORS, DEFAULT_RGBA, DialogWidth, FieldType, FwAlertComponent, FwAlertModule, FwAppIconComponent, FwAppIconModule, FwAvatarComponent, FwAvatarListComponent, FwAvatarModule, FwBackButtonComponent, FwBadgeComponent, FwBadgeModule, FwBreadcrumbsComponent, FwBreadcrumbsModule, FwButtonComponent, FwButtonDangerDirective, FwButtonDirective, FwButtonGroupComponent, FwButtonGroupModule, FwButtonModule, FwButtonPrimaryDirective, FwButtonSecondaryDirective, FwButtonSuccessDirective, FwButtonToggleComponent, FwButtonToggleItemComponent, FwButtonToggleModule, FwCardAttributeComponent, FwCardAuthorComponent, FwCardComponent, FwCardContentComponent, FwCardFooterComponent, FwCardHeaderComponent, FwCardModule, FwCell, FwCellDef, FwCheckboxComponent, FwCheckboxGroupComponent, FwCheckboxModule, FwChipComponent, FwChipModule, FwColorPickerComponent, FwColumnDef, FwContainedInputComponent, FwContainedInputModule, FwCrumbComponent, FwDateInputComponent, FwDateInputModule, FwDialogActionsComponent, FwDialogComponent, FwDialogConfirmComponent, FwDialogContentComponent, FwDialogHeaderComponent, FwDialogService, FwDialogSimpleComponent, FwDialogsModule, FwFooterCell, FwFooterCellDef, FwFooterRow, FwFooterRowDef, FwFormHeadingComponent, FwFormHeadingModule, FwFormRendererComponent, FwGridComponent, FwGridItemComponent, FwHeaderCell, FwHeaderCellDef, FwHeaderRow, FwHeaderRowDef, FwIconButtonComponent, FwIconButtonModule, FwIconComponent, FwIconModule, FwLayoutContextComponent, FwLayoutGroupComponent, FwLayoutPanelComponent, FwLayoutSidebarComponent, FwLayoutToolbarComponent, FwLayoutsModule, FwMenuCloseTriggersDirective, FwMenuComponent, FwMenuContainerComponent, FwMenuHeaderComponent, FwMenuItemComponent, FwMenuItemGroupComponent, FwMenuModule, FwMenuSeparatorComponent, FwMenuSubItemComponent, FwMultiSelectMenuComponent, FwNavbarComponent, FwNavbarHeaderComponent, FwNavbarItemComponent, FwNavbarModule, FwNavbarSubItemComponent, FwNoDataRow, FwNumberInputComponent, FwNumberInputModule, FwPaginatorAdvancedComponent, FwPaginatorComponent, FwPaginatorModule, FwPhoneInputComponent, FwPhoneInputModule, FwPopoverComponent, FwPopoverModule, FwPopoverPanelComponent, FwProgressBarComponent, FwProgressModule, FwProgressSpinnerComponent, FwRadioComponent, FwRadioGroupComponent, FwRadioModule, FwRow, FwRowDef, FwSectionHeadingComponent, FwSectionHeadingModule, FwSelectMenuComponent, FwSelectMenuModule, FwSnackbarComponent, FwSnackbarContainerComponent, FwSnackbarModule, FwSnackbarService, FwStepComponent, FwStepDecoratorComponent, FwStepperComponent, FwStepperModule, FwSubsectionHeadingComponent, FwSwitchComponent, FwSwitchModule, FwTabComponent, FwTabPanelComponent, FwTableComponent, FwTableDenseComponent, FwTableModule, FwTabsComponent, FwTabsModule, FwTagComponent, FwTagModule, FwTextAreaInputComponent, FwTextAreaInputModule, FwTextComponent, FwTextInputComponent, FwTextInputModule, FwTimeZoneSelectComponent, FwTooltipComponent, FwTooltipDirective, FwTooltipModule, FwTooltipPanelComponent, FwTypeaheadComponent, FwValidators, FwWrappedInputComponent, FwWrappedInputModule, LayoutWidth, MAX_PRESET_COLORS, MenuManagerService, MenuRegisterDirective, MinimalTranslationService, NoopValueAccessorDirective, TranslationService, allIcons, clamp, genMessageId, hexToRgba, hslaToHsva, hsvaToHsla, hsvaToRgba, notBeforeDate, notFutureDate, rgbaToHex, rgbaToHex8, rgbaToHsva };
|
|
11106
|
+
export { DEFAULT_PRESET_COLORS, DEFAULT_RGBA, DialogWidth, FieldType, FwAlertComponent, FwAlertModule, FwAppIconComponent, FwAppIconModule, FwAvatarComponent, FwAvatarListComponent, FwAvatarModule, FwBackButtonComponent, FwBadgeComponent, FwBadgeModule, FwBreadcrumbsComponent, FwBreadcrumbsModule, FwButtonComponent, FwButtonDangerDirective, FwButtonDirective, FwButtonGroupComponent, FwButtonGroupModule, FwButtonModule, FwButtonPrimaryDirective, FwButtonSecondaryDirective, FwButtonSuccessDirective, FwButtonToggleComponent, FwButtonToggleItemComponent, FwButtonToggleModule, FwCardAttributeComponent, FwCardAuthorComponent, FwCardComponent, FwCardContentComponent, FwCardFooterComponent, FwCardHeaderComponent, FwCardModule, FwCell, FwCellDef, FwCheckboxComponent, FwCheckboxGroupComponent, FwCheckboxModule, FwChipComponent, FwChipModule, FwColorPickerComponent, FwColumnDef, FwContainedInputComponent, FwContainedInputModule, FwContainedRadioComponent, FwCrumbComponent, FwDateInputComponent, FwDateInputModule, FwDialogActionsComponent, FwDialogComponent, FwDialogConfirmComponent, FwDialogContentComponent, FwDialogHeaderComponent, FwDialogService, FwDialogSimpleComponent, FwDialogsModule, FwFooterCell, FwFooterCellDef, FwFooterRow, FwFooterRowDef, FwFormHeadingComponent, FwFormHeadingModule, FwFormRendererComponent, FwGridComponent, FwGridItemComponent, FwHeaderCell, FwHeaderCellDef, FwHeaderRow, FwHeaderRowDef, FwIconButtonComponent, FwIconButtonModule, FwIconComponent, FwIconModule, FwLayoutContextComponent, FwLayoutGroupComponent, FwLayoutPanelComponent, FwLayoutSidebarComponent, FwLayoutToolbarComponent, FwLayoutsModule, FwMenuCloseTriggersDirective, FwMenuComponent, FwMenuContainerComponent, FwMenuHeaderComponent, FwMenuItemComponent, FwMenuItemGroupComponent, FwMenuModule, FwMenuSeparatorComponent, FwMenuSubItemComponent, FwMultiSelectMenuComponent, FwNavbarComponent, FwNavbarHeaderComponent, FwNavbarItemComponent, FwNavbarModule, FwNavbarSubItemComponent, FwNoDataRow, FwNumberInputComponent, FwNumberInputModule, FwPaginatorAdvancedComponent, FwPaginatorComponent, FwPaginatorModule, FwPhoneInputComponent, FwPhoneInputModule, FwPopoverComponent, FwPopoverModule, FwPopoverPanelComponent, FwProgressBarComponent, FwProgressModule, FwProgressSpinnerComponent, FwRadioComponent, FwRadioGroupComponent, FwRadioModule, FwRow, FwRowDef, FwSectionHeadingComponent, FwSectionHeadingModule, FwSelectMenuComponent, FwSelectMenuModule, FwSnackbarComponent, FwSnackbarContainerComponent, FwSnackbarModule, FwSnackbarService, FwStepComponent, FwStepDecoratorComponent, FwStepperComponent, FwStepperModule, FwSubsectionHeadingComponent, FwSwitchComponent, FwSwitchModule, FwTabComponent, FwTabPanelComponent, FwTableComponent, FwTableDenseComponent, FwTableModule, FwTabsComponent, FwTabsModule, FwTagComponent, FwTagModule, FwTextAreaInputComponent, FwTextAreaInputModule, FwTextComponent, FwTextInputComponent, FwTextInputModule, FwTimeZoneSelectComponent, FwTooltipComponent, FwTooltipDirective, FwTooltipModule, FwTooltipPanelComponent, FwTypeaheadComponent, FwValidators, FwWrappedInputComponent, FwWrappedInputModule, LayoutWidth, MAX_PRESET_COLORS, MenuManagerService, MenuRegisterDirective, MinimalTranslationService, NoopValueAccessorDirective, TranslationService, allIcons, clamp, genMessageId, hexToRgba, hslaToHsva, hsvaToHsla, hsvaToRgba, notBeforeDate, notFutureDate, rgbaToHex, rgbaToHex8, rgbaToHsva };
|
|
10970
11107
|
//# sourceMappingURL=flywheel-io-vision.mjs.map
|