@flywheel-io/vision 21.0.0-beta.6 → 21.0.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.
|
@@ -1495,7 +1495,7 @@ class FwProgressSpinnerComponent {
|
|
|
1495
1495
|
return (this._strokeWidth / this.diameter) * 100;
|
|
1496
1496
|
}
|
|
1497
1497
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: FwProgressSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1498
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: FwProgressSpinnerComponent, isStandalone: true, selector: "fw-progress-spinner", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "progressbar", "tabindex": "-1" }, properties: { "class.progress-indeterminate": "mode() === \"indeterminate\"", "class.progress-small": "size() === \"small\"", "class.progress-show-value": "this.showValue
|
|
1498
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: FwProgressSpinnerComponent, isStandalone: true, selector: "fw-progress-spinner", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "progressbar", "tabindex": "-1" }, properties: { "class.progress-indeterminate": "mode() === \"indeterminate\"", "class.progress-small": "size() === \"small\"", "class.progress-show-value": "this.showValue", "style.width.px": "diameter", "style.height.px": "diameter", "attr.aria-valuemin": "0", "attr.aria-valuemax": "100", "attr.aria-valuenow": "mode() === \"determinate\" ? value : null", "attr.mode": "mode()" }, classAttribute: "fw-progress-spinner" }, viewQueries: [{ propertyName: "_determinateCircle", first: true, predicate: ["determinateSpinner"], descendants: true }], ngImport: i0, template: "<ng-template #circle>\n <svg\n [attr.viewBox]=\"_viewBox()\"\n [ngClass]=\"['progress-indeterminate-circle-graphic', color()]\"\n xmlns=\"http://www.w3.org/2000/svg\"\n focusable=\"false\"\n >\n <circle\n [attr.r]=\"_circleRadius()\"\n [style.stroke-dasharray.px]=\"_strokeCircumference()\"\n [style.stroke-dashoffset.px]=\"_strokeDashOffset()\"\n [style.stroke-width.%]=\"_circleStrokeWidth()\"\n class=\"progress-indeterminate-track\"\n cx=\"50%\"\n cy=\"50%\"\n />\n <circle\n [attr.r]=\"_circleRadius()\"\n [style.stroke-dasharray.px]=\"_strokeCircumference()\"\n [style.stroke-dashoffset.px]=\"_strokeCircumference() / 2\"\n [style.stroke-width.%]=\"_circleStrokeWidth()\"\n cx=\"50%\"\n cy=\"50%\"\n />\n </svg>\n</ng-template>\n\n<div class=\"progress-determinate-container\" aria-hidden=\"true\" #determinateSpinner>\n <svg\n [attr.viewBox]=\"_viewBox()\"\n [ngClass]=\"['progress-determinate-circle-graphic', color()]\"\n xmlns=\"http://www.w3.org/2000/svg\"\n focusable=\"false\"\n >\n <circle\n [attr.r]=\"_circleRadius()\"\n [style.stroke-dasharray.px]=\"_strokeCircumference()\"\n [style.stroke-dashoffset.px]=\"_strokeDashOffset()\"\n [style.stroke-width.%]=\"_circleStrokeWidth()\"\n class=\"progress-determinate-track\"\n cx=\"50%\"\n cy=\"50%\"\n />\n <circle\n [attr.r]=\"_circleRadius()\"\n [style.stroke-dasharray.px]=\"_strokeCircumference()\"\n [style.stroke-dashoffset.px]=\"_strokeDashOffset()\"\n [style.stroke-width.%]=\"_circleStrokeWidth()\"\n class=\"progress-determinate-circle\"\n cx=\"50%\"\n cy=\"50%\"\n />\n </svg>\n</div>\n<div class=\"progress-indeterminate-container\" aria-hidden=\"true\">\n <div class=\"progress-spinner-layer\">\n <div class=\"progress-circle-clipper progress-circle-left\">\n <ng-container [ngTemplateOutlet]=\"circle\"></ng-container>\n </div>\n <div class=\"progress-circle-clipper progress-circle-right\">\n <ng-container [ngTemplateOutlet]=\"circle\"></ng-container>\n </div>\n </div>\n</div>\n@if (showValue()) {\n <p [ngClass]=\"['progress-label', 'size-' + size(), 'mode-' + mode()]\">{{ value }}%</p>\n}\n", styles: [".fw-progress-spinner{display:block;overflow:hidden;line-height:0;position:relative;direction:ltr;transition:opacity .25s cubic-bezier(.4,0,.6,1)}.fw-progress-spinner.progress-small.progress-show-value{overflow:visible}.progress-determinate-container,.progress-indeterminate-circle-graphic,.progress-indeterminate-container,.progress-spinner-layer{position:absolute;width:100%;height:100%}.progress-determinate-container{transform:rotate(-90deg)}.progress-indeterminate .progress-determinate-container{opacity:0}.progress-indeterminate-container{font-size:0;letter-spacing:0;white-space:nowrap;opacity:0}.progress-indeterminate .progress-indeterminate-container{opacity:1;animation:progress-container-rotate 1.5682353s linear infinite}.progress-determinate-circle-graphic,.progress-indeterminate-circle-graphic{fill:transparent;stroke:var(--primary-base);stroke-linecap:round}.progress-determinate-circle-graphic.secondary,.progress-indeterminate-circle-graphic.secondary{stroke:var(--secondary-base)}.progress-determinate-circle-graphic.red,.progress-indeterminate-circle-graphic.red{stroke:var(--red-base)}.progress-determinate-circle-graphic.slate,.progress-indeterminate-circle-graphic.slate{stroke:var(--slate-base)}.progress-determinate-circle-graphic.orange,.progress-indeterminate-circle-graphic.orange{stroke:var(--orange-base)}.progress-determinate-circle-graphic.green,.progress-indeterminate-circle-graphic.green{stroke:var(--green-base)}.progress-determinate-circle{transition:stroke-dashoffset .5s cubic-bezier(0,0,.2,1)}.progress-determinate-track,.progress-indeterminate-track{fill:transparent;stroke:var(--separations-divider);stroke-dasharray:100px!important;stroke-dashoffset:0!important;transition:none}.progress-gap-patch .progress-indeterminate-circle-graphic{left:-900%;width:2000%;transform:rotate(180deg)}.progress-circle-clipper .progress-indeterminate-circle-graphic{width:200%}.progress-circle-right .progress-indeterminate-circle-graphic{left:-100%}.progress-indeterminate .progress-circle-left .progress-indeterminate-circle-graphic{animation:progress-left-spin 1333ms cubic-bezier(.4,0,.2,1) infinite both}.progress-indeterminate .progress-circle-right .progress-indeterminate-circle-graphic{animation:progress-right-spin 1333ms cubic-bezier(.4,0,.2,1) infinite both}.progress-circle-clipper{display:inline-flex;position:relative;width:50%;height:100%;overflow:hidden}.progress-indeterminate .progress-spinner-layer{animation:progress-spinner-layer-rotate 5332ms cubic-bezier(.4,0,.2,1) infinite both}.progress-label{margin:0;font-size:8px;line-height:120%;font-weight:500;width:24px;color:var(--typography-muted);position:absolute;top:calc(50% - 4px);right:calc(50% - 12px);text-align:center}.progress-label.size-small{right:-24px}.progress-label.size-large{font-size:12px;top:calc(50% - 6px)}.progress-label.size-extra-large{font-size:16px;width:40px;top:calc(50% - 8px);right:calc(50% - 20px)}@keyframes progress-container-rotate{to{transform:rotate(360deg)}}@keyframes progress-spinner-layer-rotate{12.5%{transform:rotate(135deg)}25%{transform:rotate(270deg)}37.5%{transform:rotate(405deg)}50%{transform:rotate(540deg)}62.5%{transform:rotate(675deg)}75%{transform:rotate(810deg)}87.5%{transform:rotate(945deg)}to{transform:rotate(1080deg)}}@keyframes progress-left-spin{0%{transform:rotate(260deg)}50%{transform:rotate(130deg)}to{transform:rotate(260deg)}}@keyframes progress-right-spin{0%{transform:rotate(-260deg)}50%{transform:rotate(-130deg)}to{transform:rotate(-260deg)}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1499
1499
|
}
|
|
1500
1500
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: FwProgressSpinnerComponent, decorators: [{
|
|
1501
1501
|
type: Component,
|
|
@@ -1505,16 +1505,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
|
|
|
1505
1505
|
tabindex: '-1',
|
|
1506
1506
|
'[class.progress-indeterminate]': 'mode() === "indeterminate"',
|
|
1507
1507
|
'[class.progress-small]': 'size() === "small"',
|
|
1508
|
-
'[class.progress-show-value]': 'this.showValue
|
|
1508
|
+
'[class.progress-show-value]': 'this.showValue',
|
|
1509
1509
|
'[style.width.px]': 'diameter',
|
|
1510
1510
|
'[style.height.px]': 'diameter',
|
|
1511
|
-
'[style.--progress-size]': 'diameter + "px"',
|
|
1512
|
-
'[style.--progress-active-indicator-width]': 'diameter + "px"',
|
|
1511
|
+
// '[style.--progress-size]': 'diameter + "px"',
|
|
1512
|
+
// '[style.--progress-active-indicator-width]': 'diameter + "px"',
|
|
1513
1513
|
'[attr.aria-valuemin]': '0',
|
|
1514
1514
|
'[attr.aria-valuemax]': '100',
|
|
1515
1515
|
'[attr.aria-valuenow]': 'mode() === "determinate" ? value : null',
|
|
1516
1516
|
'[attr.mode]': 'mode()',
|
|
1517
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [NgClass, NgTemplateOutlet], template: "<ng-template #circle>\n <svg\n [attr.viewBox]=\"_viewBox()\"\n [ngClass]=\"['progress-indeterminate-circle-graphic', color()]\"\n xmlns=\"http://www.w3.org/2000/svg\"\n focusable=\"false\"\n >\n <circle\n [attr.r]=\"_circleRadius()\"\n [style.stroke-dasharray.px]=\"_strokeCircumference()\"\n [style.stroke-dashoffset.px]=\"_strokeDashOffset()\"\n [style.stroke-width.%]=\"_circleStrokeWidth()\"\n class=\"progress-indeterminate-track\"\n cx=\"50%\"\n cy=\"50%\"\n />\n <circle\n [attr.r]=\"_circleRadius()\"\n [style.stroke-dasharray.px]=\"_strokeCircumference()\"\n [style.stroke-dashoffset.px]=\"_strokeCircumference() / 2\"\n [style.stroke-width.%]=\"_circleStrokeWidth()\"\n cx=\"50%\"\n cy=\"50%\"\n />\n </svg>\n</ng-template>\n\n<div class=\"progress-determinate-container\" aria-hidden=\"true\" #determinateSpinner>\n <svg\n [attr.viewBox]=\"_viewBox()\"\n [ngClass]=\"['progress-determinate-circle-graphic', color()]\"\n xmlns=\"http://www.w3.org/2000/svg\"\n focusable=\"false\"\n >\n <circle\n [attr.r]=\"_circleRadius()\"\n [style.stroke-dasharray.px]=\"_strokeCircumference()\"\n [style.stroke-dashoffset.px]=\"_strokeDashOffset()\"\n [style.stroke-width.%]=\"_circleStrokeWidth()\"\n class=\"progress-determinate-track\"\n cx=\"50%\"\n cy=\"50%\"\n />\n <circle\n [attr.r]=\"_circleRadius()\"\n [style.stroke-dasharray.px]=\"_strokeCircumference()\"\n [style.stroke-dashoffset.px]=\"_strokeDashOffset()\"\n [style.stroke-width.%]=\"_circleStrokeWidth()\"\n class=\"progress-determinate-circle\"\n cx=\"50%\"\n cy=\"50%\"\n />\n </svg>\n</div>\n<div class=\"progress-indeterminate-container\" aria-hidden=\"true\">\n <div class=\"progress-spinner-layer\">\n <div class=\"progress-circle-clipper progress-circle-left\">\n <ng-container [ngTemplateOutlet]=\"circle\"></ng-container>\n </div>\n <div class=\"progress-circle-clipper progress-circle-right\">\n <ng-container [ngTemplateOutlet]=\"circle\"></ng-container>\n </div>\n </div>\n</div>\n@if (showValue()) {\n <p [ngClass]=\"['progress-label', 'size-' + size(), 'mode-' + mode()]\">{{ value }}%</p>\n}\n", styles: [".fw-progress-spinner{display:block;overflow:
|
|
1517
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [NgClass, NgTemplateOutlet], template: "<ng-template #circle>\n <svg\n [attr.viewBox]=\"_viewBox()\"\n [ngClass]=\"['progress-indeterminate-circle-graphic', color()]\"\n xmlns=\"http://www.w3.org/2000/svg\"\n focusable=\"false\"\n >\n <circle\n [attr.r]=\"_circleRadius()\"\n [style.stroke-dasharray.px]=\"_strokeCircumference()\"\n [style.stroke-dashoffset.px]=\"_strokeDashOffset()\"\n [style.stroke-width.%]=\"_circleStrokeWidth()\"\n class=\"progress-indeterminate-track\"\n cx=\"50%\"\n cy=\"50%\"\n />\n <circle\n [attr.r]=\"_circleRadius()\"\n [style.stroke-dasharray.px]=\"_strokeCircumference()\"\n [style.stroke-dashoffset.px]=\"_strokeCircumference() / 2\"\n [style.stroke-width.%]=\"_circleStrokeWidth()\"\n cx=\"50%\"\n cy=\"50%\"\n />\n </svg>\n</ng-template>\n\n<div class=\"progress-determinate-container\" aria-hidden=\"true\" #determinateSpinner>\n <svg\n [attr.viewBox]=\"_viewBox()\"\n [ngClass]=\"['progress-determinate-circle-graphic', color()]\"\n xmlns=\"http://www.w3.org/2000/svg\"\n focusable=\"false\"\n >\n <circle\n [attr.r]=\"_circleRadius()\"\n [style.stroke-dasharray.px]=\"_strokeCircumference()\"\n [style.stroke-dashoffset.px]=\"_strokeDashOffset()\"\n [style.stroke-width.%]=\"_circleStrokeWidth()\"\n class=\"progress-determinate-track\"\n cx=\"50%\"\n cy=\"50%\"\n />\n <circle\n [attr.r]=\"_circleRadius()\"\n [style.stroke-dasharray.px]=\"_strokeCircumference()\"\n [style.stroke-dashoffset.px]=\"_strokeDashOffset()\"\n [style.stroke-width.%]=\"_circleStrokeWidth()\"\n class=\"progress-determinate-circle\"\n cx=\"50%\"\n cy=\"50%\"\n />\n </svg>\n</div>\n<div class=\"progress-indeterminate-container\" aria-hidden=\"true\">\n <div class=\"progress-spinner-layer\">\n <div class=\"progress-circle-clipper progress-circle-left\">\n <ng-container [ngTemplateOutlet]=\"circle\"></ng-container>\n </div>\n <div class=\"progress-circle-clipper progress-circle-right\">\n <ng-container [ngTemplateOutlet]=\"circle\"></ng-container>\n </div>\n </div>\n</div>\n@if (showValue()) {\n <p [ngClass]=\"['progress-label', 'size-' + size(), 'mode-' + mode()]\">{{ value }}%</p>\n}\n", styles: [".fw-progress-spinner{display:block;overflow:hidden;line-height:0;position:relative;direction:ltr;transition:opacity .25s cubic-bezier(.4,0,.6,1)}.fw-progress-spinner.progress-small.progress-show-value{overflow:visible}.progress-determinate-container,.progress-indeterminate-circle-graphic,.progress-indeterminate-container,.progress-spinner-layer{position:absolute;width:100%;height:100%}.progress-determinate-container{transform:rotate(-90deg)}.progress-indeterminate .progress-determinate-container{opacity:0}.progress-indeterminate-container{font-size:0;letter-spacing:0;white-space:nowrap;opacity:0}.progress-indeterminate .progress-indeterminate-container{opacity:1;animation:progress-container-rotate 1.5682353s linear infinite}.progress-determinate-circle-graphic,.progress-indeterminate-circle-graphic{fill:transparent;stroke:var(--primary-base);stroke-linecap:round}.progress-determinate-circle-graphic.secondary,.progress-indeterminate-circle-graphic.secondary{stroke:var(--secondary-base)}.progress-determinate-circle-graphic.red,.progress-indeterminate-circle-graphic.red{stroke:var(--red-base)}.progress-determinate-circle-graphic.slate,.progress-indeterminate-circle-graphic.slate{stroke:var(--slate-base)}.progress-determinate-circle-graphic.orange,.progress-indeterminate-circle-graphic.orange{stroke:var(--orange-base)}.progress-determinate-circle-graphic.green,.progress-indeterminate-circle-graphic.green{stroke:var(--green-base)}.progress-determinate-circle{transition:stroke-dashoffset .5s cubic-bezier(0,0,.2,1)}.progress-determinate-track,.progress-indeterminate-track{fill:transparent;stroke:var(--separations-divider);stroke-dasharray:100px!important;stroke-dashoffset:0!important;transition:none}.progress-gap-patch .progress-indeterminate-circle-graphic{left:-900%;width:2000%;transform:rotate(180deg)}.progress-circle-clipper .progress-indeterminate-circle-graphic{width:200%}.progress-circle-right .progress-indeterminate-circle-graphic{left:-100%}.progress-indeterminate .progress-circle-left .progress-indeterminate-circle-graphic{animation:progress-left-spin 1333ms cubic-bezier(.4,0,.2,1) infinite both}.progress-indeterminate .progress-circle-right .progress-indeterminate-circle-graphic{animation:progress-right-spin 1333ms cubic-bezier(.4,0,.2,1) infinite both}.progress-circle-clipper{display:inline-flex;position:relative;width:50%;height:100%;overflow:hidden}.progress-indeterminate .progress-spinner-layer{animation:progress-spinner-layer-rotate 5332ms cubic-bezier(.4,0,.2,1) infinite both}.progress-label{margin:0;font-size:8px;line-height:120%;font-weight:500;width:24px;color:var(--typography-muted);position:absolute;top:calc(50% - 4px);right:calc(50% - 12px);text-align:center}.progress-label.size-small{right:-24px}.progress-label.size-large{font-size:12px;top:calc(50% - 6px)}.progress-label.size-extra-large{font-size:16px;width:40px;top:calc(50% - 8px);right:calc(50% - 20px)}@keyframes progress-container-rotate{to{transform:rotate(360deg)}}@keyframes progress-spinner-layer-rotate{12.5%{transform:rotate(135deg)}25%{transform:rotate(270deg)}37.5%{transform:rotate(405deg)}50%{transform:rotate(540deg)}62.5%{transform:rotate(675deg)}75%{transform:rotate(810deg)}87.5%{transform:rotate(945deg)}to{transform:rotate(1080deg)}}@keyframes progress-left-spin{0%{transform:rotate(260deg)}50%{transform:rotate(130deg)}to{transform:rotate(260deg)}}@keyframes progress-right-spin{0%{transform:rotate(-260deg)}50%{transform:rotate(-130deg)}to{transform:rotate(-260deg)}}\n"] }]
|
|
1518
1518
|
}], propDecorators: { _determinateCircle: [{
|
|
1519
1519
|
type: ViewChild,
|
|
1520
1520
|
args: ['determinateSpinner']
|
|
@@ -9068,7 +9068,7 @@ class FwTextAreaInputComponent {
|
|
|
9068
9068
|
useExisting: FwTextAreaInputComponent,
|
|
9069
9069
|
multi: true,
|
|
9070
9070
|
},
|
|
9071
|
-
], viewQueries: [{ propertyName: "autosize", first: true, predicate: CdkTextareaAutosize, descendants: true }, { propertyName: "textareaRef", first: true, predicate: ["textareaEl"], descendants: true }], ngImport: i0, template: "<div class=\"textarea-wrapper\" [ngStyle]=\"{ width: width() }\">\n <textarea\n test-id=\"textarea\"\n #textareaEl\n cdkTextareaAutosize\n #autosize=\"cdkTextareaAutosize\"\n [cdkAutosizeMinRows]=\"minRows()\"\n [cdkAutosizeMaxRows]=\"maxRows()\"\n (input)=\"changeHandler($event)\"\n (blur)=\"blurHandler()\"\n [placeholder]=\"placeholder() || ''\"\n [disabled]=\"disabled\"\n [readOnly]=\"readOnly()\"\n [autofocus]=\"autofocus()\"\n >\n </textarea>\n <fw-icon class=\"error-icon\">warning-circle</fw-icon>\n</div>\n@if (!!helperText()) {\n <p class=\"vision-p4 helper-text\">{{ helperText() }}</p>\n}\n@if (!!errorText()) {\n <p class=\"vision-p4 error-text\">{{ errorText() }}</p>\n}\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)}: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: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }] }); }
|
|
9071
|
+
], viewQueries: [{ propertyName: "autosize", first: true, predicate: CdkTextareaAutosize, descendants: true }, { propertyName: "textareaRef", first: true, predicate: ["textareaEl"], descendants: true }], ngImport: i0, template: "<div class=\"textarea-wrapper\" [ngStyle]=\"{ width: width() }\">\n <textarea\n test-id=\"textarea\"\n #textareaEl\n cdkTextareaAutosize\n #autosize=\"cdkTextareaAutosize\"\n [cdkAutosizeMinRows]=\"minRows()\"\n [cdkAutosizeMaxRows]=\"maxRows()\"\n (input)=\"changeHandler($event)\"\n (blur)=\"blurHandler()\"\n [placeholder]=\"placeholder() || ''\"\n [disabled]=\"disabled()\"\n [readOnly]=\"readOnly()\"\n [autofocus]=\"autofocus()\"\n >\n </textarea>\n <fw-icon class=\"error-icon\">warning-circle</fw-icon>\n</div>\n@if (!!helperText()) {\n <p class=\"vision-p4 helper-text\">{{ helperText() }}</p>\n}\n@if (!!errorText()) {\n <p class=\"vision-p4 error-text\">{{ errorText() }}</p>\n}\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)}: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: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }] }); }
|
|
9072
9072
|
}
|
|
9073
9073
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: FwTextAreaInputComponent, decorators: [{
|
|
9074
9074
|
type: Component,
|
|
@@ -9080,7 +9080,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
|
|
|
9080
9080
|
},
|
|
9081
9081
|
], host: {
|
|
9082
9082
|
'[class.errored]': 'error()',
|
|
9083
|
-
}, imports: [NgStyle, CdkTextareaAutosize, FwIconComponent], template: "<div class=\"textarea-wrapper\" [ngStyle]=\"{ width: width() }\">\n <textarea\n test-id=\"textarea\"\n #textareaEl\n cdkTextareaAutosize\n #autosize=\"cdkTextareaAutosize\"\n [cdkAutosizeMinRows]=\"minRows()\"\n [cdkAutosizeMaxRows]=\"maxRows()\"\n (input)=\"changeHandler($event)\"\n (blur)=\"blurHandler()\"\n [placeholder]=\"placeholder() || ''\"\n [disabled]=\"disabled\"\n [readOnly]=\"readOnly()\"\n [autofocus]=\"autofocus()\"\n >\n </textarea>\n <fw-icon class=\"error-icon\">warning-circle</fw-icon>\n</div>\n@if (!!helperText()) {\n <p class=\"vision-p4 helper-text\">{{ helperText() }}</p>\n}\n@if (!!errorText()) {\n <p class=\"vision-p4 error-text\">{{ errorText() }}</p>\n}\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)}: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"] }]
|
|
9083
|
+
}, imports: [NgStyle, CdkTextareaAutosize, FwIconComponent], template: "<div class=\"textarea-wrapper\" [ngStyle]=\"{ width: width() }\">\n <textarea\n test-id=\"textarea\"\n #textareaEl\n cdkTextareaAutosize\n #autosize=\"cdkTextareaAutosize\"\n [cdkAutosizeMinRows]=\"minRows()\"\n [cdkAutosizeMaxRows]=\"maxRows()\"\n (input)=\"changeHandler($event)\"\n (blur)=\"blurHandler()\"\n [placeholder]=\"placeholder() || ''\"\n [disabled]=\"disabled()\"\n [readOnly]=\"readOnly()\"\n [autofocus]=\"autofocus()\"\n >\n </textarea>\n <fw-icon class=\"error-icon\">warning-circle</fw-icon>\n</div>\n@if (!!helperText()) {\n <p class=\"vision-p4 helper-text\">{{ helperText() }}</p>\n}\n@if (!!errorText()) {\n <p class=\"vision-p4 error-text\">{{ errorText() }}</p>\n}\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)}: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"] }]
|
|
9084
9084
|
}], propDecorators: { minRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "minRows", required: false }] }], maxRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxRows", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], helperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperText", required: false }] }], errorText: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorText", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], autofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocus", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], autosize: [{
|
|
9085
9085
|
type: ViewChild,
|
|
9086
9086
|
args: [CdkTextareaAutosize]
|