@flywheel-io/vision 21.0.0-beta.0 → 21.0.0-beta.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { NgClass, CommonModule, NgStyle, NgTemplateOutlet, SlicePipe, Location } from '@angular/common';
|
|
2
2
|
import * as i0 from '@angular/core';
|
|
3
|
-
import { inject, input, HostBinding, ChangeDetectionStrategy, Component, output, NgModule, model, computed, signal, HostListener, ViewEncapsulation, EventEmitter, Output, effect, ElementRef, ViewContainerRef, Directive, contentChildren, viewChild, ChangeDetectorRef, ContentChildren, Input, ViewChild, forwardRef, DestroyRef, Injectable, ContentChild, NgZone, untracked, ViewChildren, viewChildren, linkedSignal, TemplateRef } from '@angular/core';
|
|
3
|
+
import { inject, input, HostBinding, ChangeDetectionStrategy, Component, output, NgModule, model, computed, signal, HostListener, ViewEncapsulation, EventEmitter, Output, effect, ElementRef, ViewContainerRef, Directive, contentChildren, viewChild, ChangeDetectorRef, ContentChildren, Input, ViewChild, forwardRef, DestroyRef, Injectable, ContentChild, contentChild, NgZone, untracked, ViewChildren, viewChildren, linkedSignal, TemplateRef } from '@angular/core';
|
|
4
4
|
import { DomSanitizer } from '@angular/platform-browser';
|
|
5
5
|
import { BehaviorSubject, debounce, timer, distinctUntilChanged, of, Subscription, min, combineLatest, tap, switchMap, map } from 'rxjs';
|
|
6
6
|
import { CdkConnectedOverlay, OverlayModule, Overlay, CdkOverlayOrigin, OverlayContainer } from '@angular/cdk/overlay';
|
|
@@ -3265,16 +3265,16 @@ class FwDialogConfirmComponent {
|
|
|
3265
3265
|
this.dialogRef = inject(DialogRef, { optional: true });
|
|
3266
3266
|
this.elementRef = inject(ElementRef);
|
|
3267
3267
|
this.title = input('Confirm', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
|
|
3268
|
-
this.icon = input(
|
|
3268
|
+
this.icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
|
|
3269
3269
|
this.iconColor = input('primary', ...(ngDevMode ? [{ debugName: "iconColor" }] : /* istanbul ignore next */ []));
|
|
3270
3270
|
this.confirmColor = input('primary', ...(ngDevMode ? [{ debugName: "confirmColor" }] : /* istanbul ignore next */ []));
|
|
3271
3271
|
this.cancelColor = input('slate', ...(ngDevMode ? [{ debugName: "cancelColor" }] : /* istanbul ignore next */ []));
|
|
3272
3272
|
this.confirmButtonText = input('Confirm', ...(ngDevMode ? [{ debugName: "confirmButtonText" }] : /* istanbul ignore next */ []));
|
|
3273
3273
|
this.confirmButtonIcon = input('done-check', ...(ngDevMode ? [{ debugName: "confirmButtonIcon" }] : /* istanbul ignore next */ []));
|
|
3274
3274
|
this.cancelButtonText = input('Cancel', ...(ngDevMode ? [{ debugName: "cancelButtonText" }] : /* istanbul ignore next */ []));
|
|
3275
|
-
this.contentIcon = input(
|
|
3275
|
+
this.contentIcon = input('', ...(ngDevMode ? [{ debugName: "contentIcon" }] : /* istanbul ignore next */ []));
|
|
3276
3276
|
this.contentTitle = input('Are you sure?', ...(ngDevMode ? [{ debugName: "contentTitle" }] : /* istanbul ignore next */ []));
|
|
3277
|
-
this.contentText = input(
|
|
3277
|
+
this.contentText = input('', ...(ngDevMode ? [{ debugName: "contentText" }] : /* istanbul ignore next */ []));
|
|
3278
3278
|
this.showConfirmButtonIcon = input(true, ...(ngDevMode ? [{ debugName: "showConfirmButtonIcon" }] : /* istanbul ignore next */ []));
|
|
3279
3279
|
this.showClose = input(false, ...(ngDevMode ? [{ debugName: "showClose" }] : /* istanbul ignore next */ []));
|
|
3280
3280
|
this.width = input('extra-small', ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
|
|
@@ -4601,34 +4601,32 @@ class FwTextInputComponent {
|
|
|
4601
4601
|
constructor() {
|
|
4602
4602
|
this.disabled = model(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
4603
4603
|
this.useActionableIcons = input(false, ...(ngDevMode ? [{ debugName: "useActionableIcons" }] : /* istanbul ignore next */ []));
|
|
4604
|
-
this.leftIcon = input(
|
|
4605
|
-
this.rightIcon = input(
|
|
4606
|
-
this.prefix = input(
|
|
4607
|
-
this.context = input(
|
|
4604
|
+
this.leftIcon = input(...(ngDevMode ? [undefined, { debugName: "leftIcon" }] : /* istanbul ignore next */ []));
|
|
4605
|
+
this.rightIcon = input(...(ngDevMode ? [undefined, { debugName: "rightIcon" }] : /* istanbul ignore next */ []));
|
|
4606
|
+
this.prefix = input(...(ngDevMode ? [undefined, { debugName: "prefix" }] : /* istanbul ignore next */ []));
|
|
4607
|
+
this.context = input(...(ngDevMode ? [undefined, { debugName: "context" }] : /* istanbul ignore next */ []));
|
|
4608
4608
|
/**
|
|
4609
4609
|
* @deprecated please use fw-wrapped-input instead
|
|
4610
4610
|
*/
|
|
4611
|
-
this.helperText = input(
|
|
4611
|
+
this.helperText = input(...(ngDevMode ? [undefined, { debugName: "helperText" }] : /* istanbul ignore next */ []));
|
|
4612
4612
|
/**
|
|
4613
4613
|
* @deprecated please use fw-wrapped-input instead
|
|
4614
4614
|
*/
|
|
4615
|
-
this.errorText = input(
|
|
4615
|
+
this.errorText = input(...(ngDevMode ? [undefined, { debugName: "errorText" }] : /* istanbul ignore next */ []));
|
|
4616
4616
|
this.errorInIconTooltip = input(false, ...(ngDevMode ? [{ debugName: "errorInIconTooltip" }] : /* istanbul ignore next */ []));
|
|
4617
|
-
this.placeholder = input(
|
|
4618
|
-
this.readOnly = input(
|
|
4617
|
+
this.placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
4618
|
+
this.readOnly = input(...(ngDevMode ? [undefined, { debugName: "readOnly" }] : /* istanbul ignore next */ []));
|
|
4619
4619
|
this.size = input('medium', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
4620
4620
|
this.type = input('text', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
|
|
4621
4621
|
this.maxLength = input(255, ...(ngDevMode ? [{ debugName: "maxLength" }] : /* istanbul ignore next */ []));
|
|
4622
4622
|
this.autofocus = input(false, ...(ngDevMode ? [{ debugName: "autofocus" }] : /* istanbul ignore next */ []));
|
|
4623
|
-
this.autocomplete = input(
|
|
4623
|
+
this.autocomplete = input(...(ngDevMode ? [undefined, { debugName: "autocomplete" }] : /* istanbul ignore next */ []));
|
|
4624
4624
|
this._value = '';
|
|
4625
|
-
// we bind this to host because that's where angular form apis put the error classes
|
|
4626
|
-
// we bind this to host because that's where angular form apis put the error classes
|
|
4627
4625
|
this.error = input(false, ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
|
|
4628
4626
|
this.leftIconAction = new EventEmitter();
|
|
4629
4627
|
this.rightIconAction = new EventEmitter();
|
|
4628
|
+
this.contentChildInputElement = contentChild('textInput', ...(ngDevMode ? [{ debugName: "contentChildInputElement" }] : /* istanbul ignore next */ []));
|
|
4630
4629
|
this.width = input('100%', ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
|
|
4631
|
-
this.externalControl = null;
|
|
4632
4630
|
this.onTouch = () => { };
|
|
4633
4631
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
4634
4632
|
this.onChange = (value) => { };
|
|
@@ -4684,13 +4682,13 @@ class FwTextInputComponent {
|
|
|
4684
4682
|
});
|
|
4685
4683
|
}
|
|
4686
4684
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: FwTextInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4687
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: FwTextInputComponent, isStandalone: true, selector: "fw-text-input", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, useActionableIcons: { classPropertyName: "useActionableIcons", publicName: "useActionableIcons", isSignal: true, isRequired: false, transformFunction: null }, leftIcon: { classPropertyName: "leftIcon", publicName: "leftIcon", isSignal: true, isRequired: false, transformFunction: null }, rightIcon: { classPropertyName: "rightIcon", publicName: "rightIcon", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, context: { classPropertyName: "context", publicName: "context", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, errorText: { classPropertyName: "errorText", publicName: "errorText", isSignal: true, isRequired: false, transformFunction: null }, errorInIconTooltip: { classPropertyName: "errorInIconTooltip", publicName: "errorInIconTooltip", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", leftIconAction: "leftIconAction", rightIconAction: "rightIconAction" }, host: { properties: { "class.errored": "
|
|
4685
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: FwTextInputComponent, isStandalone: true, selector: "fw-text-input", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, useActionableIcons: { classPropertyName: "useActionableIcons", publicName: "useActionableIcons", isSignal: true, isRequired: false, transformFunction: null }, leftIcon: { classPropertyName: "leftIcon", publicName: "leftIcon", isSignal: true, isRequired: false, transformFunction: null }, rightIcon: { classPropertyName: "rightIcon", publicName: "rightIcon", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, context: { classPropertyName: "context", publicName: "context", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, errorText: { classPropertyName: "errorText", publicName: "errorText", isSignal: true, isRequired: false, transformFunction: null }, errorInIconTooltip: { classPropertyName: "errorInIconTooltip", publicName: "errorInIconTooltip", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", leftIconAction: "leftIconAction", rightIconAction: "rightIconAction" }, host: { properties: { "class.errored": "error()", "style.width": "this.width" } }, providers: [
|
|
4688
4686
|
{
|
|
4689
4687
|
provide: NG_VALUE_ACCESSOR,
|
|
4690
4688
|
useExisting: FwTextInputComponent,
|
|
4691
4689
|
multi: true,
|
|
4692
4690
|
},
|
|
4693
|
-
], queries: [{ propertyName: "
|
|
4691
|
+
], queries: [{ propertyName: "contentChildInputElement", first: true, predicate: ["textInput"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "<div class=\"full-container\" [ngClass]=\"{ disabled: disabled() }\">\n <div class=\"input-container\" [class]=\"size()\">\n @if (!!leftIcon()) {\n <fw-icon\n (click)=\"useActionableIcons() ? onLeftIconClick() : null\"\n [ngClass]=\"useActionableIcons() ? 'actionable' : ''\"\n >{{ leftIcon() }}\n </fw-icon>\n }\n @if (!!prefix()) {\n <p class=\"vision-p2 context\">{{ prefix() }}</p>\n }\n\n @if (!contentChildInputElement()) {\n <input\n #input\n [type]=\"type()\"\n (input)=\"changeHandler($event)\"\n (blur)=\"blurHandler()\"\n [attr.maxlength]=\"maxLength()\"\n [placeholder]=\"placeholder() || ''\"\n [readOnly]=\"readOnly()\"\n [disabled]=\"disabled()\"\n [autofocus]=\"autofocus()\"\n [autocomplete]=\"autocomplete()\"\n />\n }\n <ng-content select=\"input\"></ng-content>\n @if (!!context()) {\n <p class=\"vision-p2 context\">{{ context() }}</p>\n }\n\n <fw-icon class=\"error-icon\" [fwTooltip]=\"errorInIconTooltip() ? errorText() || '' : ''\">warning-circle</fw-icon>\n @if (!!rightIcon()) {\n <fw-icon\n (click)=\"useActionableIcons() ? onRightIconClick() : null\"\n [ngClass]=\"useActionableIcons() ? 'actionable' : ''\"\n >{{ rightIcon() }}\n </fw-icon>\n }\n <ng-content></ng-content>\n </div>\n @if (!!helperText()) {\n <p class=\"vision-p4 helper-text\">{{ helperText() }}</p>\n }\n @if (!!errorText() && !errorInIconTooltip()) {\n <p class=\"vision-p4 error-text\">{{ errorText() }}</p>\n }\n</div>\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}.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,.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)}.full-container.disabled{cursor:not-allowed}.full-container.disabled fw-icon{cursor:not-allowed!important}.full-container{display:flex;flex-direction:column;line-height:21px}.full-container .input-container{box-sizing:border-box;color:var(--typography-light);background:var(--page-light);display:flex;padding:8px;align-items:center;gap:5px;border-radius:6px;border:1px solid var(--separations-input);font-family:Inter,sans-serif}.full-container .input-container:focus-within{border:1px solid var(--primary-base)}.full-container .input-container input{min-width:0;font-size:14px;flex-grow:1;color:var(--typography-base);background:var(--page-light);border:none}.full-container .input-container input:focus{outline:none;border:none}.full-container .input-container input::placeholder{color:var(--typography-light)}.full-container .input-container .context{color:var(--typography-light)}.full-container .error-icon{display:none}.full-container .helper-text,.full-container .error-text{margin-top:4px;color:var(--typography-light);line-height:13px;margin-left:6px;margin-bottom:0}.full-container .error-text{text-align:left;color:var(--red-base);display:none}fw-icon.actionable{cursor:pointer}fw-icon.actionable:hover{color:var(--primary-base);background-color:var(--primary-hover);border-radius:50%}.small{height:30px}.small>fw-icon{font-size:18px;min-width:18px;width:18px}.medium{height:36px}.medium>fw-icon{font-size:20px;min-width:20px;width:20px}.large{height:40px}.large>fw-icon{font-size:24px;min-width:24px;width:24px}:host.errored .input-container,:host.ng-touched.ng-invalid .input-container{border:1px solid var(--red-base)}:host.errored .error-icon,:host.ng-touched.ng-invalid .error-icon{color:var(--red-base);display:inline!important}:host.errored .helper-text,:host.errored .full-container .error-text,:host.ng-touched.ng-invalid .helper-text,:host.ng-touched.ng-invalid .full-container .error-text{display:none}:host.errored .error-text,:host.ng-touched.ng-invalid .error-text{display:block!important}:disabled{opacity:.4;cursor:not-allowed}.disabled .actionable:hover{color:var(--typography-light);background-color:transparent}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }, { kind: "directive", type: FwTooltipDirective, selector: "[fwTooltip]", inputs: ["fwTooltip", "fwTooltipPosition", "fwTooltipMaxWidthPx", "fwTooltipClass", "fwTooltipDelay", "fwTooltipCaret", "fwTooltipEnabled"], outputs: ["fwTooltipChange", "fwTooltipPositionChange", "fwTooltipMaxWidthPxChange", "fwTooltipClassChange", "fwTooltipEnabledChange"] }] }); }
|
|
4694
4692
|
}
|
|
4695
4693
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: FwTextInputComponent, decorators: [{
|
|
4696
4694
|
type: Component,
|
|
@@ -4700,23 +4698,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
|
|
|
4700
4698
|
useExisting: FwTextInputComponent,
|
|
4701
4699
|
multi: true,
|
|
4702
4700
|
},
|
|
4703
|
-
],
|
|
4701
|
+
], host: {
|
|
4702
|
+
'[class.errored]': 'error()',
|
|
4703
|
+
}, imports: [NgClass, FwIconComponent, FwTooltipDirective], template: "<div class=\"full-container\" [ngClass]=\"{ disabled: disabled() }\">\n <div class=\"input-container\" [class]=\"size()\">\n @if (!!leftIcon()) {\n <fw-icon\n (click)=\"useActionableIcons() ? onLeftIconClick() : null\"\n [ngClass]=\"useActionableIcons() ? 'actionable' : ''\"\n >{{ leftIcon() }}\n </fw-icon>\n }\n @if (!!prefix()) {\n <p class=\"vision-p2 context\">{{ prefix() }}</p>\n }\n\n @if (!contentChildInputElement()) {\n <input\n #input\n [type]=\"type()\"\n (input)=\"changeHandler($event)\"\n (blur)=\"blurHandler()\"\n [attr.maxlength]=\"maxLength()\"\n [placeholder]=\"placeholder() || ''\"\n [readOnly]=\"readOnly()\"\n [disabled]=\"disabled()\"\n [autofocus]=\"autofocus()\"\n [autocomplete]=\"autocomplete()\"\n />\n }\n <ng-content select=\"input\"></ng-content>\n @if (!!context()) {\n <p class=\"vision-p2 context\">{{ context() }}</p>\n }\n\n <fw-icon class=\"error-icon\" [fwTooltip]=\"errorInIconTooltip() ? errorText() || '' : ''\">warning-circle</fw-icon>\n @if (!!rightIcon()) {\n <fw-icon\n (click)=\"useActionableIcons() ? onRightIconClick() : null\"\n [ngClass]=\"useActionableIcons() ? 'actionable' : ''\"\n >{{ rightIcon() }}\n </fw-icon>\n }\n <ng-content></ng-content>\n </div>\n @if (!!helperText()) {\n <p class=\"vision-p4 helper-text\">{{ helperText() }}</p>\n }\n @if (!!errorText() && !errorInIconTooltip()) {\n <p class=\"vision-p4 error-text\">{{ errorText() }}</p>\n }\n</div>\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}.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,.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)}.full-container.disabled{cursor:not-allowed}.full-container.disabled fw-icon{cursor:not-allowed!important}.full-container{display:flex;flex-direction:column;line-height:21px}.full-container .input-container{box-sizing:border-box;color:var(--typography-light);background:var(--page-light);display:flex;padding:8px;align-items:center;gap:5px;border-radius:6px;border:1px solid var(--separations-input);font-family:Inter,sans-serif}.full-container .input-container:focus-within{border:1px solid var(--primary-base)}.full-container .input-container input{min-width:0;font-size:14px;flex-grow:1;color:var(--typography-base);background:var(--page-light);border:none}.full-container .input-container input:focus{outline:none;border:none}.full-container .input-container input::placeholder{color:var(--typography-light)}.full-container .input-container .context{color:var(--typography-light)}.full-container .error-icon{display:none}.full-container .helper-text,.full-container .error-text{margin-top:4px;color:var(--typography-light);line-height:13px;margin-left:6px;margin-bottom:0}.full-container .error-text{text-align:left;color:var(--red-base);display:none}fw-icon.actionable{cursor:pointer}fw-icon.actionable:hover{color:var(--primary-base);background-color:var(--primary-hover);border-radius:50%}.small{height:30px}.small>fw-icon{font-size:18px;min-width:18px;width:18px}.medium{height:36px}.medium>fw-icon{font-size:20px;min-width:20px;width:20px}.large{height:40px}.large>fw-icon{font-size:24px;min-width:24px;width:24px}:host.errored .input-container,:host.ng-touched.ng-invalid .input-container{border:1px solid var(--red-base)}:host.errored .error-icon,:host.ng-touched.ng-invalid .error-icon{color:var(--red-base);display:inline!important}:host.errored .helper-text,:host.errored .full-container .error-text,:host.ng-touched.ng-invalid .helper-text,:host.ng-touched.ng-invalid .full-container .error-text{display:none}:host.errored .error-text,:host.ng-touched.ng-invalid .error-text{display:block!important}:disabled{opacity:.4;cursor:not-allowed}.disabled .actionable:hover{color:var(--typography-light);background-color:transparent}\n"] }]
|
|
4704
4704
|
}], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], useActionableIcons: [{ type: i0.Input, args: [{ isSignal: true, alias: "useActionableIcons", required: false }] }], leftIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "leftIcon", required: false }] }], rightIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "rightIcon", required: false }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], context: [{ type: i0.Input, args: [{ isSignal: true, alias: "context", required: false }] }], helperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperText", required: false }] }], errorText: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorText", required: false }] }], errorInIconTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorInIconTooltip", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], autofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocus", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], value: [{
|
|
4705
4705
|
type: Input
|
|
4706
4706
|
}], inputRef: [{
|
|
4707
4707
|
type: ViewChild,
|
|
4708
4708
|
args: ['input']
|
|
4709
|
-
}], error: [{
|
|
4710
|
-
type: HostBinding,
|
|
4711
|
-
args: ['class.errored']
|
|
4712
|
-
}], leftIconAction: [{
|
|
4709
|
+
}], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], leftIconAction: [{
|
|
4713
4710
|
type: Output
|
|
4714
4711
|
}], rightIconAction: [{
|
|
4715
4712
|
type: Output
|
|
4716
|
-
}], textInput: [{
|
|
4717
|
-
type: ContentChild,
|
|
4718
|
-
args: ['textInput', { static: false }]
|
|
4719
|
-
}], width: [{
|
|
4713
|
+
}], contentChildInputElement: [{ type: i0.ContentChild, args: ['textInput', { isSignal: true }] }], width: [{
|
|
4720
4714
|
type: HostBinding,
|
|
4721
4715
|
args: ['style.width']
|
|
4722
4716
|
}] } });
|