ngwr 4.0.0 → 4.1.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.
- package/README.md +2 -0
- package/esm2022/input/input.component.mjs +32 -34
- package/fesm2022/ngwr-input.mjs +31 -33
- package/fesm2022/ngwr-input.mjs.map +1 -1
- package/input/input.component.d.ts +14 -19
- package/input/styles/_index.scss +19 -0
- package/input/styles/vars.scss +1 -0
- package/package.json +1 -1
- package/styles/variables.scss +0 -6
package/README.md
CHANGED
|
@@ -4,6 +4,8 @@
|
|
|
4
4
|
[](https://www.npmjs.com/package/ngwr)
|
|
5
5
|
[](https://www.npmjs.com/package/ngwr)
|
|
6
6
|
[](https://github.com/thekhegay/ngwr/blob/main/LICENSE)
|
|
7
|
+
[](https://app.fossa.com/projects/git%2Bgithub.com%2Fthekhegay%2Fngwr?ref=badge_shield&issueType=security)
|
|
8
|
+
[](https://app.fossa.com/projects/git%2Bgithub.com%2Fthekhegay%2Fngwr?ref=badge_shield&issueType=license)
|
|
7
9
|
|
|
8
10
|
## Important information
|
|
9
11
|
NGWR is currently in development stage. All components are updating every week. Use it on your own risk. All bugreports and ideas are [welcomed](https://github.com/thekhegay/ngwr/issues/new).
|
|
@@ -4,13 +4,15 @@
|
|
|
4
4
|
* Use of this source code is governed by an MIT-style license that can be
|
|
5
5
|
* found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
|
|
6
6
|
*/
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
9
|
-
import {
|
|
7
|
+
import { coerceBooleanProperty } from '@angular/cdk/coercion';
|
|
8
|
+
import { booleanAttribute, ChangeDetectionStrategy, ChangeDetectorRef, Component, forwardRef, HostBinding, inject, Input, signal, ViewEncapsulation, } from '@angular/core';
|
|
9
|
+
import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
10
|
+
import { noop } from 'rxjs';
|
|
10
11
|
import { WrAbstractBase } from 'ngwr/cdk';
|
|
11
|
-
import { provideWrIcons,
|
|
12
|
+
import { provideWrIcons, eye, eyeOff, WrIconModule } from 'ngwr/icon';
|
|
12
13
|
import * as i0 from "@angular/core";
|
|
13
14
|
import * as i1 from "@angular/forms";
|
|
15
|
+
import * as i2 from "ngwr/icon";
|
|
14
16
|
/**
|
|
15
17
|
* NGWR input component.
|
|
16
18
|
*
|
|
@@ -19,11 +21,6 @@ import * as i1 from "@angular/forms";
|
|
|
19
21
|
export class WrInputComponent extends WrAbstractBase {
|
|
20
22
|
constructor() {
|
|
21
23
|
super(...arguments);
|
|
22
|
-
this.formControl = new FormControl();
|
|
23
|
-
this.eyeOn = signal(true);
|
|
24
|
-
this.isFocused = signal(false);
|
|
25
|
-
this.onChange = noop;
|
|
26
|
-
this.onTouch = noop;
|
|
27
24
|
this.placeholder = '';
|
|
28
25
|
this.prefix = null;
|
|
29
26
|
this.suffix = null;
|
|
@@ -31,26 +28,13 @@ export class WrInputComponent extends WrAbstractBase {
|
|
|
31
28
|
this.passwordIcons = false;
|
|
32
29
|
this.readonly = false;
|
|
33
30
|
this.type = 'text';
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
this.
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
this.
|
|
40
|
-
|
|
41
|
-
setDisabledState(isDisabled) {
|
|
42
|
-
if (isDisabled) {
|
|
43
|
-
return this.formControl.disable();
|
|
44
|
-
}
|
|
45
|
-
return this.formControl.enable();
|
|
46
|
-
}
|
|
47
|
-
writeValue(value) {
|
|
48
|
-
this.formControl.setValue(value, { emitEvent: false });
|
|
49
|
-
}
|
|
50
|
-
ngOnInit() {
|
|
51
|
-
this.formControl.valueChanges
|
|
52
|
-
.pipe(debounceTime(200), tap(value => this.onChange(value)), takeUntil(this.destroyed$))
|
|
53
|
-
.subscribe();
|
|
31
|
+
this.inputValue = signal(null);
|
|
32
|
+
this.cdr = inject(ChangeDetectorRef);
|
|
33
|
+
this.eyeOn = signal(true);
|
|
34
|
+
this.isFocused = signal(false);
|
|
35
|
+
this.isDisabled = signal(false);
|
|
36
|
+
this.onChange = noop;
|
|
37
|
+
this.onTouch = noop;
|
|
54
38
|
}
|
|
55
39
|
get elClasses() {
|
|
56
40
|
return {
|
|
@@ -59,10 +43,24 @@ export class WrInputComponent extends WrAbstractBase {
|
|
|
59
43
|
'wr-input--has-prefix': this.prefix,
|
|
60
44
|
'wr-input--has-suffix': this.suffix,
|
|
61
45
|
'wr-input--password': this.passwordIcons,
|
|
62
|
-
'wr-input--disabled': this.
|
|
46
|
+
'wr-input--disabled': this.isDisabled(),
|
|
63
47
|
'wr-input--focused': this.isFocused(),
|
|
64
48
|
};
|
|
65
49
|
}
|
|
50
|
+
registerOnChange(fn) {
|
|
51
|
+
this.onChange = fn;
|
|
52
|
+
}
|
|
53
|
+
registerOnTouched(fn) {
|
|
54
|
+
this.onTouch = fn;
|
|
55
|
+
}
|
|
56
|
+
setDisabledState(isDisabled) {
|
|
57
|
+
this.isDisabled.set(coerceBooleanProperty(isDisabled));
|
|
58
|
+
}
|
|
59
|
+
writeValue(value) {
|
|
60
|
+
this.value = value;
|
|
61
|
+
this.onChange(value);
|
|
62
|
+
this.cdr.markForCheck();
|
|
63
|
+
}
|
|
66
64
|
onPasswordVisibilityChange() {
|
|
67
65
|
if (this.type === 'password') {
|
|
68
66
|
this.type = 'text';
|
|
@@ -82,11 +80,11 @@ export class WrInputComponent extends WrAbstractBase {
|
|
|
82
80
|
useExisting: forwardRef(() => WrInputComponent),
|
|
83
81
|
multi: true,
|
|
84
82
|
},
|
|
85
|
-
], usesInheritance: true, ngImport: i0, template: "@if (prefix) {\n <div class=\"wr-input-prefix\">\n <span class=\"wr-input-prefix__text\">{{ prefix }}</span>\n </div>\n}\n\n<input\n class=\"wr-input__native\"\n [type]=\"type\"\n [placeholder]=\"placeholder\"\n [readonly]=\"readonly\"\n [
|
|
83
|
+
], usesInheritance: true, ngImport: i0, template: "@if (prefix) {\n <div class=\"wr-input-prefix\">\n <span class=\"wr-input-prefix__text\">{{ prefix }}</span>\n </div>\n}\n\n<input\n class=\"wr-input__native\"\n [type]=\"type\"\n [placeholder]=\"placeholder\"\n [readonly]=\"readonly\"\n [disabled]=\"isDisabled()\"\n [ngModel]=\"inputValue()\"\n (ngModelChange)=\"writeValue($event)\"\n (focus)=\"isFocused.set(true)\"\n (blur)=\"isFocused.set(false)\"\n/>\n\n@if (passwordIcons) {\n <div class=\"wr-input-icon\" [class.wr-input-icon--disabled]=\"isDisabled()\" (click)=\"onPasswordVisibilityChange()\">\n <wr-icon class=\"wr-input-icon__icon\" [name]=\"eyeOn() ? 'eye' : 'eye-off'\" />\n </div>\n}\n\n@if (suffix) {\n <div class=\"wr-input-suffix\">\n <span class=\"wr-input-suffix__text\">{{ suffix }}</span>\n </div>\n}\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: WrIconModule }, { kind: "component", type: i2.WrIconComponent, selector: "wr-icon", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
86
84
|
}
|
|
87
85
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.4", ngImport: i0, type: WrInputComponent, decorators: [{
|
|
88
86
|
type: Component,
|
|
89
|
-
args: [{ standalone: true, selector: 'wr-input', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [FormsModule,
|
|
87
|
+
args: [{ standalone: true, selector: 'wr-input', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [FormsModule, WrIconModule], providers: [
|
|
90
88
|
provideWrIcons([eye, eyeOff]),
|
|
91
89
|
{
|
|
92
90
|
provide: NG_VALUE_ACCESSOR,
|
|
@@ -94,7 +92,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.4", ngImpor
|
|
|
94
92
|
useExisting: forwardRef(() => WrInputComponent),
|
|
95
93
|
multi: true,
|
|
96
94
|
},
|
|
97
|
-
], template: "@if (prefix) {\n <div class=\"wr-input-prefix\">\n <span class=\"wr-input-prefix__text\">{{ prefix }}</span>\n </div>\n}\n\n<input\n class=\"wr-input__native\"\n [type]=\"type\"\n [placeholder]=\"placeholder\"\n [readonly]=\"readonly\"\n [
|
|
95
|
+
], template: "@if (prefix) {\n <div class=\"wr-input-prefix\">\n <span class=\"wr-input-prefix__text\">{{ prefix }}</span>\n </div>\n}\n\n<input\n class=\"wr-input__native\"\n [type]=\"type\"\n [placeholder]=\"placeholder\"\n [readonly]=\"readonly\"\n [disabled]=\"isDisabled()\"\n [ngModel]=\"inputValue()\"\n (ngModelChange)=\"writeValue($event)\"\n (focus)=\"isFocused.set(true)\"\n (blur)=\"isFocused.set(false)\"\n/>\n\n@if (passwordIcons) {\n <div class=\"wr-input-icon\" [class.wr-input-icon--disabled]=\"isDisabled()\" (click)=\"onPasswordVisibilityChange()\">\n <wr-icon class=\"wr-input-icon__icon\" [name]=\"eyeOn() ? 'eye' : 'eye-off'\" />\n </div>\n}\n\n@if (suffix) {\n <div class=\"wr-input-suffix\">\n <span class=\"wr-input-suffix__text\">{{ suffix }}</span>\n </div>\n}\n" }]
|
|
98
96
|
}], propDecorators: { placeholder: [{
|
|
99
97
|
type: Input
|
|
100
98
|
}], prefix: [{
|
|
@@ -116,4 +114,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.4", ngImpor
|
|
|
116
114
|
type: HostBinding,
|
|
117
115
|
args: ['class']
|
|
118
116
|
}] } });
|
|
119
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
117
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5wdXQuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvbGliL2lucHV0L2lucHV0LmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uL3Byb2plY3RzL2xpYi9pbnB1dC9pbnB1dC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7Ozs7R0FLRztBQUVILE9BQU8sRUFBRSxxQkFBcUIsRUFBRSxNQUFNLHVCQUF1QixDQUFDO0FBQzlELE9BQU8sRUFDTCxnQkFBZ0IsRUFDaEIsdUJBQXVCLEVBQ3ZCLGlCQUFpQixFQUNqQixTQUFTLEVBQ1QsVUFBVSxFQUNWLFdBQVcsRUFDWCxNQUFNLEVBQ04sS0FBSyxFQUNMLE1BQU0sRUFDTixpQkFBaUIsR0FDbEIsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUF3QixXQUFXLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUV0RixPQUFPLEVBQUUsSUFBSSxFQUFFLE1BQU0sTUFBTSxDQUFDO0FBRTVCLE9BQU8sRUFBRSxjQUFjLEVBQUUsTUFBTSxVQUFVLENBQUM7QUFFMUMsT0FBTyxFQUFFLGNBQWMsRUFBRSxHQUFHLEVBQUUsTUFBTSxFQUFFLFlBQVksRUFBRSxNQUFNLFdBQVcsQ0FBQzs7OztBQUl0RTs7OztHQUlHO0FBa0JILE1BQU0sT0FBTyxnQkFBaUIsU0FBUSxjQUFjO0lBakJwRDs7UUFrQlcsZ0JBQVcsR0FBRyxFQUFFLENBQUM7UUFDakIsV0FBTSxHQUFrQixJQUFJLENBQUM7UUFDN0IsV0FBTSxHQUFrQixJQUFJLENBQUM7UUFDRSxZQUFPLEdBQUcsS0FBSyxDQUFDO1FBQ2hCLGtCQUFhLEdBQUcsS0FBSyxDQUFDO1FBQ3RCLGFBQVEsR0FBRyxLQUFLLENBQUM7UUFDaEQsU0FBSSxHQUFnQixNQUFNLENBQUM7UUFlakIsZUFBVSxHQUFHLE1BQU0sQ0FBZ0IsSUFBSSxDQUFDLENBQUM7UUFJM0Ms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QUNHLE1BQU07c0JBQWQsS0FBSztnQkFDa0MsT0FBTztzQkFBOUMsS0FBSzt1QkFBQyxFQUFFLFNBQVMsRUFBRSxnQkFBZ0IsRUFBRTtnQkFDRSxhQUFhO3NCQUFwRCxLQUFLO3VCQUFDLEVBQUUsU0FBUyxFQUFFLGdCQUFnQixFQUFFO2dCQUNFLFFBQVE7c0JBQS9DLEtBQUs7dUJBQUMsRUFBRSxTQUFTLEVBQUUsZ0JBQWdCLEVBQUU7Z0JBQzdCLElBQUk7c0JBQVosS0FBSztnQkFHRixTQUFTO3NCQURaLFdBQVc7dUJBQUMsT0FBTyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQGxpY2Vuc2VcbiAqXG4gKiBVc2Ugb2YgdGhpcyBzb3VyY2UgY29kZSBpcyBnb3Zlcm5lZCBieSBhbiBNSVQtc3R5bGUgbGljZW5zZSB0aGF0IGNhbiBiZVxuICogZm91bmQgaW4gdGhlIExJQ0VOU0UgZmlsZSBhdCBodHRwczovL2dpdGh1Yi5jb20vdGhla2hlZ2F5L25nd3IvYmxvYi9tYWluL0xJQ0VOU0VcbiAqL1xuXG5pbXBvcnQgeyBjb2VyY2VCb29sZWFuUHJvcGVydHkgfSBmcm9tICdAYW5ndWxhci9jZGsvY29lcmNpb24nO1xuaW1wb3J0IHtcbiAgYm9vbGVhbkF0dHJpYnV0ZSxcbiAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gIENoYW5nZURldGVjdG9yUmVmLFxuICBDb21wb25lbnQsXG4gIGZvcndhcmRSZWYsXG4gIEhvc3RCaW5kaW5nLFxuICBpbmplY3QsXG4gIElucHV0LFxuICBzaWduYWwsXG4gIFZpZXdFbmNhcHN1bGF0aW9uLFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IENvbnRyb2xWYWx1ZUFjY2Vzc29yLCBGb3Jtc01vZHVsZSwgTkdfVkFMVUVfQUNDRVNTT1IgfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5cbmltcG9ydCB7IG5vb3AgfSBmcm9tICdyeGpzJztcblxuaW1wb3J0IHsgV3JBYnN0cmFjdEJhc2UgfSBmcm9tICduZ3dyL2Nkayc7XG5pbXBvcnQgeyBTYWZlQW55IH0gZnJvbSAnbmd3ci9jZGsvdHlwZXMnO1xuaW1wb3J0IHsgcHJvdmlkZVdySWNvbnMsIGV5ZSwgZXllT2ZmLCBXckljb25Nb2R1bGUgfSBmcm9tICduZ3dyL2ljb24nO1xuXG5pbXBvcnQgeyBXcklucHV0VHlwZSB9IGZyb20gJy4vaW5wdXQtdHlwZXMnO1xuXG4vKipcbiAqIE5HV1IgaW5wdXQgY29tcG9uZW50LlxuICpcbiAqIHtAdHV0b3JpYWx9IFtIb3cgdG8gdXNlIHdyLWFsZXJ0XXtAbGluayBodHRwOi8vbmd3ci5kZXYvZG9jcy9jb21wb25lbnRzL2lucHV0fVxuICovXG5AQ29tcG9uZW50KHtcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgc2VsZWN0b3I6ICd3ci1pbnB1dCcsXG4gIHRlbXBsYXRlVXJsOiAnLi9pbnB1dC5jb21wb25lbnQuaHRtbCcsXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuICBlbmNhcHN1bGF0aW9uOiBWaWV3RW5jYXBzdWxhdGlvbi5Ob25lLFxuICBpbXBvcnRzOiBbRm9ybXNNb2R1bGUsIFdySWNvbk1vZHVsZV0sXG4gIHByb3ZpZGVyczogW1xuICAgIHByb3ZpZGVXckljb25zKFtleWUsIGV5ZU9mZl0pLFxuICAgIHtcbiAgICAgIHByb3ZpZGU6IE5HX1ZBTFVFX0FDQ0VTU09SLFxuICAgICAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIEBhbmd1bGFyLWVzbGludC9uby1mb3J3YXJkLXJlZlxuICAgICAgdXNlRXhpc3Rpbmc6IGZvcndhcmRSZWYoKCkgPT4gV3JJbnB1dENvbXBvbmVudCksXG4gICAgICBtdWx0aTogdHJ1ZSxcbiAgICB9LFxuICBdLFxufSlcbmV4cG9ydCBjbGFzcyBXcklucHV0Q29tcG9uZW50IGV4dGVuZHMgV3JBYnN0cmFjdEJhc2UgaW1wbGVtZW50cyBDb250cm9sVmFsdWVBY2Nlc3NvciB7XG4gIEBJbnB1dCgpIHBsYWNlaG9sZGVyID0gJyc7XG4gIEBJbnB1dCgpIHByZWZpeDogc3RyaW5nIHwgbnVsbCA9IG51bGw7XG4gIEBJbnB1dCgpIHN1ZmZpeDogc3RyaW5nIHwgbnVsbCA9IG51bGw7XG4gIEBJbnB1dCh7IHRyYW5zZm9ybTogYm9vbGVhbkF0dHJpYnV0ZSB9KSByb3VuZGVkID0gZmFsc2U7XG4gIEBJbnB1dCh7IHRyYW5zZm9ybTogYm9vbGVhbkF0dHJpYnV0ZSB9KSBwYXNzd29yZEljb25zID0gZmFsc2U7XG4gIEBJbnB1dCh7IHRyYW5zZm9ybTogYm9vbGVhbkF0dHJpYnV0ZSB9KSByZWFkb25seSA9IGZhbHNlO1xuICBASW5wdXQoKSB0eXBlOiBXcklucHV0VHlwZSA9ICd0ZXh0JztcblxuICBASG9zdEJpbmRpbmcoJ2NsYXNzJylcbiAgZ2V0IGVsQ2xhc3NlcygpOiBTYWZlQW55IHtcbiAgICByZXR1cm4ge1xuICAgICAgJ3dyLWlucHV0JzogdHJ1ZSxcbiAgICAgICd3ci1pbnB1dC0tcm91bmRlZCc6IHRoaXMucm91bmRlZCxcbiAgICAgICd3ci1pbnB1dC0taGFzLXByZWZpeCc6IHRoaXMucHJlZml4LFxuICAgICAgJ3dyLWlucHV0LS1oYXMtc3VmZml4JzogdGhpcy5zdWZmaXgsXG4gICAgICAnd3ItaW5wdXQtLXBhc3N3b3JkJzogdGhpcy5wYXNzd29yZEljb25zLFxuICAgICAgJ3dyLWlucHV0LS1kaXNhYmxlZCc6IHRoaXMuaXNEaXNhYmxlZCgpLFxuICAgICAgJ3dyLWlucHV0LS1mb2N1c2VkJzogdGhpcy5pc0ZvY3VzZWQoKSxcbiAgICB9O1xuICB9XG5cbiAgcHJvdGVjdGVkIHJlYWRvbmx5IGlucHV0VmFsdWUgPSBzaWduYWw8c3RyaW5nIHwgbnVsbD4obnVsbCk7XG5cbiAgcHJvdGVjdGVkIHZhbHVlPzogc3RyaW5nO1xuXG4gIHByaXZhdGUgcmVhZG9ubHkgY2RyID0gaW5qZWN0KENoYW5nZURldGVjdG9yUmVmKTtcbiAgcHJvdGVjdGVkIHJlYWRvbmx5IGV5ZU9uID0gc2lnbmFsKHRydWUpO1xuICBwcm90ZWN0ZWQgcmVhZG9ubHkgaXNGb2N1c2VkID0gc2lnbmFsKGZhbHNlKTtcbiAgcHJvdGVjdGVkIHJlYWRvbmx5IGlzRGlzYWJsZWQgPSBzaWduYWwoZmFsc2UpO1xuXG4gIG9uQ2hhbmdlOiAodmFsdWU6IHN0cmluZykgPT4gdm9pZCA9IG5vb3A7XG4gIG9uVG91Y2g6ICgpID0+IHZvaWQgPSBub29wO1xuXG4gIHJlZ2lzdGVyT25DaGFuZ2UoZm46ICh2YWx1ZTogc3RyaW5nKSA9PiB2b2lkKTogdm9pZCB7XG4gICAgdGhpcy5vbkNoYW5nZSA9IGZuO1xuICB9XG5cbiAgcmVnaXN0ZXJPblRvdWNoZWQoZm46ICgpID0+IHZvaWQpOiB2b2lkIHtcbiAgICB0aGlzLm9uVG91Y2ggPSBmbjtcbiAgfVxuXG4gIHNldERpc2FibGVkU3RhdGUoaXNEaXNhYmxlZDogYm9vbGVhbik6IHZvaWQge1xuICAgIHRoaXMuaXNEaXNhYmxlZC5zZXQoY29lcmNlQm9vbGVhblByb3BlcnR5KGlzRGlzYWJsZWQpKTtcbiAgfVxuXG4gIHdyaXRlVmFsdWUodmFsdWU6IHN0cmluZyk6IHZvaWQge1xuICAgIHRoaXMudmFsdWUgPSB2YWx1ZTtcbiAgICB0aGlzLm9uQ2hhbmdlKHZhbHVlKTtcbiAgICB0aGlzLmNkci5tYXJrRm9yQ2hlY2soKTtcbiAgfVxuXG4gIG9uUGFzc3dvcmRWaXNpYmlsaXR5Q2hhbmdlKCk6IHZvaWQge1xuICAgIGlmICh0aGlzLnR5cGUgPT09ICdwYXNzd29yZCcpIHtcbiAgICAgIHRoaXMudHlwZSA9ICd0ZXh0JztcbiAgICAgIHRoaXMuZXllT24uc2V0KGZhbHNlKTtcbiAgICB9IGVsc2Uge1xuICAgICAgdGhpcy50eXBlID0gJ3Bhc3N3b3JkJztcbiAgICAgIHRoaXMuZXllT24uc2V0KHRydWUpO1xuICAgIH1cbiAgfVxufVxuIiwiQGlmIChwcmVmaXgpIHtcbiAgPGRpdiBjbGFzcz1cIndyLWlucHV0LXByZWZpeFwiPlxuICAgIDxzcGFuIGNsYXNzPVwid3ItaW5wdXQtcHJlZml4X190ZXh0XCI+e3sgcHJlZml4IH19PC9zcGFuPlxuICA8L2Rpdj5cbn1cblxuPGlucHV0XG4gIGNsYXNzPVwid3ItaW5wdXRfX25hdGl2ZVwiXG4gIFt0eXBlXT1cInR5cGVcIlxuICBbcGxhY2Vob2xkZXJdPVwicGxhY2Vob2xkZXJcIlxuICBbcmVhZG9ubHldPVwicmVhZG9ubHlcIlxuICBbZGlzYWJsZWRdPVwiaXNEaXNhYmxlZCgpXCJcbiAgW25nTW9kZWxdPVwiaW5wdXRWYWx1ZSgpXCJcbiAgKG5nTW9kZWxDaGFuZ2UpPVwid3JpdGVWYWx1ZSgkZXZlbnQpXCJcbiAgKGZvY3VzKT1cImlzRm9jdXNlZC5zZXQodHJ1ZSlcIlxuICAoYmx1cik9XCJpc0ZvY3VzZWQuc2V0KGZhbHNlKVwiXG4vPlxuXG5AaWYgKHBhc3N3b3JkSWNvbnMpIHtcbiAgPGRpdiBjbGFzcz1cIndyLWlucHV0LWljb25cIiBbY2xhc3Mud3ItaW5wdXQtaWNvbi0tZGlzYWJsZWRdPVwiaXNEaXNhYmxlZCgpXCIgKGNsaWNrKT1cIm9uUGFzc3dvcmRWaXNpYmlsaXR5Q2hhbmdlKClcIj5cbiAgICA8d3ItaWNvbiBjbGFzcz1cIndyLWlucHV0LWljb25fX2ljb25cIiBbbmFtZV09XCJleWVPbigpID8gJ2V5ZScgOiAnZXllLW9mZidcIiAvPlxuICA8L2Rpdj5cbn1cblxuQGlmIChzdWZmaXgpIHtcbiAgPGRpdiBjbGFzcz1cIndyLWlucHV0LXN1ZmZpeFwiPlxuICAgIDxzcGFuIGNsYXNzPVwid3ItaW5wdXQtc3VmZml4X190ZXh0XCI+e3sgc3VmZml4IH19PC9zcGFuPlxuICA8L2Rpdj5cbn1cbiJdfQ==
|
package/fesm2022/ngwr-input.mjs
CHANGED
|
@@ -1,10 +1,12 @@
|
|
|
1
|
+
import { coerceBooleanProperty } from '@angular/cdk/coercion';
|
|
1
2
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { signal, booleanAttribute, forwardRef, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, HostBinding, NgModule } from '@angular/core';
|
|
3
|
+
import { signal, inject, ChangeDetectorRef, booleanAttribute, forwardRef, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, HostBinding, NgModule } from '@angular/core';
|
|
3
4
|
import * as i1 from '@angular/forms';
|
|
4
|
-
import {
|
|
5
|
-
import { noop
|
|
5
|
+
import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
|
|
6
|
+
import { noop } from 'rxjs';
|
|
6
7
|
import { WrAbstractBase } from 'ngwr/cdk';
|
|
7
|
-
import
|
|
8
|
+
import * as i2 from 'ngwr/icon';
|
|
9
|
+
import { provideWrIcons, eye, eyeOff, WrIconModule } from 'ngwr/icon';
|
|
8
10
|
|
|
9
11
|
/**
|
|
10
12
|
* @license
|
|
@@ -20,11 +22,6 @@ import { provideWrIcons, eye, eyeOff, WrIconComponent } from 'ngwr/icon';
|
|
|
20
22
|
class WrInputComponent extends WrAbstractBase {
|
|
21
23
|
constructor() {
|
|
22
24
|
super(...arguments);
|
|
23
|
-
this.formControl = new FormControl();
|
|
24
|
-
this.eyeOn = signal(true);
|
|
25
|
-
this.isFocused = signal(false);
|
|
26
|
-
this.onChange = noop;
|
|
27
|
-
this.onTouch = noop;
|
|
28
25
|
this.placeholder = '';
|
|
29
26
|
this.prefix = null;
|
|
30
27
|
this.suffix = null;
|
|
@@ -32,26 +29,13 @@ class WrInputComponent extends WrAbstractBase {
|
|
|
32
29
|
this.passwordIcons = false;
|
|
33
30
|
this.readonly = false;
|
|
34
31
|
this.type = 'text';
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
this.
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
this.
|
|
41
|
-
|
|
42
|
-
setDisabledState(isDisabled) {
|
|
43
|
-
if (isDisabled) {
|
|
44
|
-
return this.formControl.disable();
|
|
45
|
-
}
|
|
46
|
-
return this.formControl.enable();
|
|
47
|
-
}
|
|
48
|
-
writeValue(value) {
|
|
49
|
-
this.formControl.setValue(value, { emitEvent: false });
|
|
50
|
-
}
|
|
51
|
-
ngOnInit() {
|
|
52
|
-
this.formControl.valueChanges
|
|
53
|
-
.pipe(debounceTime(200), tap(value => this.onChange(value)), takeUntil(this.destroyed$))
|
|
54
|
-
.subscribe();
|
|
32
|
+
this.inputValue = signal(null);
|
|
33
|
+
this.cdr = inject(ChangeDetectorRef);
|
|
34
|
+
this.eyeOn = signal(true);
|
|
35
|
+
this.isFocused = signal(false);
|
|
36
|
+
this.isDisabled = signal(false);
|
|
37
|
+
this.onChange = noop;
|
|
38
|
+
this.onTouch = noop;
|
|
55
39
|
}
|
|
56
40
|
get elClasses() {
|
|
57
41
|
return {
|
|
@@ -60,10 +44,24 @@ class WrInputComponent extends WrAbstractBase {
|
|
|
60
44
|
'wr-input--has-prefix': this.prefix,
|
|
61
45
|
'wr-input--has-suffix': this.suffix,
|
|
62
46
|
'wr-input--password': this.passwordIcons,
|
|
63
|
-
'wr-input--disabled': this.
|
|
47
|
+
'wr-input--disabled': this.isDisabled(),
|
|
64
48
|
'wr-input--focused': this.isFocused(),
|
|
65
49
|
};
|
|
66
50
|
}
|
|
51
|
+
registerOnChange(fn) {
|
|
52
|
+
this.onChange = fn;
|
|
53
|
+
}
|
|
54
|
+
registerOnTouched(fn) {
|
|
55
|
+
this.onTouch = fn;
|
|
56
|
+
}
|
|
57
|
+
setDisabledState(isDisabled) {
|
|
58
|
+
this.isDisabled.set(coerceBooleanProperty(isDisabled));
|
|
59
|
+
}
|
|
60
|
+
writeValue(value) {
|
|
61
|
+
this.value = value;
|
|
62
|
+
this.onChange(value);
|
|
63
|
+
this.cdr.markForCheck();
|
|
64
|
+
}
|
|
67
65
|
onPasswordVisibilityChange() {
|
|
68
66
|
if (this.type === 'password') {
|
|
69
67
|
this.type = 'text';
|
|
@@ -83,11 +81,11 @@ class WrInputComponent extends WrAbstractBase {
|
|
|
83
81
|
useExisting: forwardRef(() => WrInputComponent),
|
|
84
82
|
multi: true,
|
|
85
83
|
},
|
|
86
|
-
], usesInheritance: true, ngImport: i0, template: "@if (prefix) {\n <div class=\"wr-input-prefix\">\n <span class=\"wr-input-prefix__text\">{{ prefix }}</span>\n </div>\n}\n\n<input\n class=\"wr-input__native\"\n [type]=\"type\"\n [placeholder]=\"placeholder\"\n [readonly]=\"readonly\"\n [
|
|
84
|
+
], usesInheritance: true, ngImport: i0, template: "@if (prefix) {\n <div class=\"wr-input-prefix\">\n <span class=\"wr-input-prefix__text\">{{ prefix }}</span>\n </div>\n}\n\n<input\n class=\"wr-input__native\"\n [type]=\"type\"\n [placeholder]=\"placeholder\"\n [readonly]=\"readonly\"\n [disabled]=\"isDisabled()\"\n [ngModel]=\"inputValue()\"\n (ngModelChange)=\"writeValue($event)\"\n (focus)=\"isFocused.set(true)\"\n (blur)=\"isFocused.set(false)\"\n/>\n\n@if (passwordIcons) {\n <div class=\"wr-input-icon\" [class.wr-input-icon--disabled]=\"isDisabled()\" (click)=\"onPasswordVisibilityChange()\">\n <wr-icon class=\"wr-input-icon__icon\" [name]=\"eyeOn() ? 'eye' : 'eye-off'\" />\n </div>\n}\n\n@if (suffix) {\n <div class=\"wr-input-suffix\">\n <span class=\"wr-input-suffix__text\">{{ suffix }}</span>\n </div>\n}\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: WrIconModule }, { kind: "component", type: i2.WrIconComponent, selector: "wr-icon", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
87
85
|
}
|
|
88
86
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.4", ngImport: i0, type: WrInputComponent, decorators: [{
|
|
89
87
|
type: Component,
|
|
90
|
-
args: [{ standalone: true, selector: 'wr-input', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [FormsModule,
|
|
88
|
+
args: [{ standalone: true, selector: 'wr-input', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [FormsModule, WrIconModule], providers: [
|
|
91
89
|
provideWrIcons([eye, eyeOff]),
|
|
92
90
|
{
|
|
93
91
|
provide: NG_VALUE_ACCESSOR,
|
|
@@ -95,7 +93,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.4", ngImpor
|
|
|
95
93
|
useExisting: forwardRef(() => WrInputComponent),
|
|
96
94
|
multi: true,
|
|
97
95
|
},
|
|
98
|
-
], template: "@if (prefix) {\n <div class=\"wr-input-prefix\">\n <span class=\"wr-input-prefix__text\">{{ prefix }}</span>\n </div>\n}\n\n<input\n class=\"wr-input__native\"\n [type]=\"type\"\n [placeholder]=\"placeholder\"\n [readonly]=\"readonly\"\n [
|
|
96
|
+
], template: "@if (prefix) {\n <div class=\"wr-input-prefix\">\n <span class=\"wr-input-prefix__text\">{{ prefix }}</span>\n </div>\n}\n\n<input\n class=\"wr-input__native\"\n [type]=\"type\"\n [placeholder]=\"placeholder\"\n [readonly]=\"readonly\"\n [disabled]=\"isDisabled()\"\n [ngModel]=\"inputValue()\"\n (ngModelChange)=\"writeValue($event)\"\n (focus)=\"isFocused.set(true)\"\n (blur)=\"isFocused.set(false)\"\n/>\n\n@if (passwordIcons) {\n <div class=\"wr-input-icon\" [class.wr-input-icon--disabled]=\"isDisabled()\" (click)=\"onPasswordVisibilityChange()\">\n <wr-icon class=\"wr-input-icon__icon\" [name]=\"eyeOn() ? 'eye' : 'eye-off'\" />\n </div>\n}\n\n@if (suffix) {\n <div class=\"wr-input-suffix\">\n <span class=\"wr-input-suffix__text\">{{ suffix }}</span>\n </div>\n}\n" }]
|
|
99
97
|
}], propDecorators: { placeholder: [{
|
|
100
98
|
type: Input
|
|
101
99
|
}], prefix: [{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ngwr-input.mjs","sources":["../../../projects/lib/input/input.component.ts","../../../projects/lib/input/input.component.html","../../../projects/lib/input/input.module.ts","../../../projects/lib/input/public-api.ts","../../../projects/lib/input/ngwr-input.ts"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport {\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n forwardRef,\n HostBinding,\n
|
|
1
|
+
{"version":3,"file":"ngwr-input.mjs","sources":["../../../projects/lib/input/input.component.ts","../../../projects/lib/input/input.component.html","../../../projects/lib/input/input.module.ts","../../../projects/lib/input/public-api.ts","../../../projects/lib/input/ngwr-input.ts"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport {\n booleanAttribute,\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n forwardRef,\n HostBinding,\n inject,\n Input,\n signal,\n ViewEncapsulation,\n} from '@angular/core';\nimport { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';\n\nimport { noop } from 'rxjs';\n\nimport { WrAbstractBase } from 'ngwr/cdk';\nimport { SafeAny } from 'ngwr/cdk/types';\nimport { provideWrIcons, eye, eyeOff, WrIconModule } from 'ngwr/icon';\n\nimport { WrInputType } from './input-types';\n\n/**\n * NGWR input component.\n *\n * {@tutorial} [How to use wr-alert]{@link http://ngwr.dev/docs/components/input}\n */\n@Component({\n standalone: true,\n selector: 'wr-input',\n templateUrl: './input.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n imports: [FormsModule, WrIconModule],\n providers: [\n provideWrIcons([eye, eyeOff]),\n {\n provide: NG_VALUE_ACCESSOR,\n // eslint-disable-next-line @angular-eslint/no-forward-ref\n useExisting: forwardRef(() => WrInputComponent),\n multi: true,\n },\n ],\n})\nexport class WrInputComponent extends WrAbstractBase implements ControlValueAccessor {\n @Input() placeholder = '';\n @Input() prefix: string | null = null;\n @Input() suffix: string | null = null;\n @Input({ transform: booleanAttribute }) rounded = false;\n @Input({ transform: booleanAttribute }) passwordIcons = false;\n @Input({ transform: booleanAttribute }) readonly = false;\n @Input() type: WrInputType = 'text';\n\n @HostBinding('class')\n get elClasses(): SafeAny {\n return {\n 'wr-input': true,\n 'wr-input--rounded': this.rounded,\n 'wr-input--has-prefix': this.prefix,\n 'wr-input--has-suffix': this.suffix,\n 'wr-input--password': this.passwordIcons,\n 'wr-input--disabled': this.isDisabled(),\n 'wr-input--focused': this.isFocused(),\n };\n }\n\n protected readonly inputValue = signal<string | null>(null);\n\n protected value?: string;\n\n private readonly cdr = inject(ChangeDetectorRef);\n protected readonly eyeOn = signal(true);\n protected readonly isFocused = signal(false);\n protected readonly isDisabled = signal(false);\n\n onChange: (value: string) => void = noop;\n onTouch: () => void = noop;\n\n registerOnChange(fn: (value: string) => void): void {\n this.onChange = fn;\n }\n\n registerOnTouched(fn: () => void): void {\n this.onTouch = fn;\n }\n\n setDisabledState(isDisabled: boolean): void {\n this.isDisabled.set(coerceBooleanProperty(isDisabled));\n }\n\n writeValue(value: string): void {\n this.value = value;\n this.onChange(value);\n this.cdr.markForCheck();\n }\n\n onPasswordVisibilityChange(): void {\n if (this.type === 'password') {\n this.type = 'text';\n this.eyeOn.set(false);\n } else {\n this.type = 'password';\n this.eyeOn.set(true);\n }\n }\n}\n","@if (prefix) {\n <div class=\"wr-input-prefix\">\n <span class=\"wr-input-prefix__text\">{{ prefix }}</span>\n </div>\n}\n\n<input\n class=\"wr-input__native\"\n [type]=\"type\"\n [placeholder]=\"placeholder\"\n [readonly]=\"readonly\"\n [disabled]=\"isDisabled()\"\n [ngModel]=\"inputValue()\"\n (ngModelChange)=\"writeValue($event)\"\n (focus)=\"isFocused.set(true)\"\n (blur)=\"isFocused.set(false)\"\n/>\n\n@if (passwordIcons) {\n <div class=\"wr-input-icon\" [class.wr-input-icon--disabled]=\"isDisabled()\" (click)=\"onPasswordVisibilityChange()\">\n <wr-icon class=\"wr-input-icon__icon\" [name]=\"eyeOn() ? 'eye' : 'eye-off'\" />\n </div>\n}\n\n@if (suffix) {\n <div class=\"wr-input-suffix\">\n <span class=\"wr-input-suffix__text\">{{ suffix }}</span>\n </div>\n}\n","/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\nimport { NgModule } from '@angular/core';\n\nimport { WrInputComponent } from './input.component';\n\n@NgModule({\n imports: [WrInputComponent],\n exports: [WrInputComponent],\n})\nexport class WrInputModule {}\n","/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nexport * from './input-types';\nexport * from './input.component';\nexport * from './input.module';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
@@ -1,11 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
* @license
|
|
3
|
-
*
|
|
4
|
-
* Use of this source code is governed by an MIT-style license that can be
|
|
5
|
-
* found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
|
|
6
|
-
*/
|
|
7
|
-
import { OnInit } from '@angular/core';
|
|
8
|
-
import { ControlValueAccessor, FormControl } from '@angular/forms';
|
|
1
|
+
import { ControlValueAccessor } from '@angular/forms';
|
|
9
2
|
import { WrAbstractBase } from 'ngwr/cdk';
|
|
10
3
|
import { SafeAny } from 'ngwr/cdk/types';
|
|
11
4
|
import { WrInputType } from './input-types';
|
|
@@ -15,17 +8,7 @@ import * as i0 from "@angular/core";
|
|
|
15
8
|
*
|
|
16
9
|
* {@tutorial} [How to use wr-alert]{@link http://ngwr.dev/docs/components/input}
|
|
17
10
|
*/
|
|
18
|
-
export declare class WrInputComponent extends WrAbstractBase implements ControlValueAccessor
|
|
19
|
-
formControl: FormControl;
|
|
20
|
-
protected readonly eyeOn: import("@angular/core").WritableSignal<boolean>;
|
|
21
|
-
protected readonly isFocused: import("@angular/core").WritableSignal<boolean>;
|
|
22
|
-
onChange: (value: string) => void;
|
|
23
|
-
onTouch: () => void;
|
|
24
|
-
registerOnChange(fn: (value: string) => void): void;
|
|
25
|
-
registerOnTouched(fn: () => void): void;
|
|
26
|
-
setDisabledState(isDisabled: boolean): void;
|
|
27
|
-
writeValue(value: string): void;
|
|
28
|
-
ngOnInit(): void;
|
|
11
|
+
export declare class WrInputComponent extends WrAbstractBase implements ControlValueAccessor {
|
|
29
12
|
placeholder: string;
|
|
30
13
|
prefix: string | null;
|
|
31
14
|
suffix: string | null;
|
|
@@ -34,6 +17,18 @@ export declare class WrInputComponent extends WrAbstractBase implements ControlV
|
|
|
34
17
|
readonly: boolean;
|
|
35
18
|
type: WrInputType;
|
|
36
19
|
get elClasses(): SafeAny;
|
|
20
|
+
protected readonly inputValue: import("@angular/core").WritableSignal<string | null>;
|
|
21
|
+
protected value?: string;
|
|
22
|
+
private readonly cdr;
|
|
23
|
+
protected readonly eyeOn: import("@angular/core").WritableSignal<boolean>;
|
|
24
|
+
protected readonly isFocused: import("@angular/core").WritableSignal<boolean>;
|
|
25
|
+
protected readonly isDisabled: import("@angular/core").WritableSignal<boolean>;
|
|
26
|
+
onChange: (value: string) => void;
|
|
27
|
+
onTouch: () => void;
|
|
28
|
+
registerOnChange(fn: (value: string) => void): void;
|
|
29
|
+
registerOnTouched(fn: () => void): void;
|
|
30
|
+
setDisabledState(isDisabled: boolean): void;
|
|
31
|
+
writeValue(value: string): void;
|
|
37
32
|
onPasswordVisibilityChange(): void;
|
|
38
33
|
static ɵfac: i0.ɵɵFactoryDeclaration<WrInputComponent, never>;
|
|
39
34
|
static ɵcmp: i0.ɵɵComponentDeclaration<WrInputComponent, "wr-input", never, { "placeholder": { "alias": "placeholder"; "required": false; }; "prefix": { "alias": "prefix"; "required": false; }; "suffix": { "alias": "suffix"; "required": false; }; "rounded": { "alias": "rounded"; "required": false; }; "passwordIcons": { "alias": "passwordIcons"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "type": { "alias": "type"; "required": false; }; }, {}, never, never, true, never>;
|
package/input/styles/_index.scss
CHANGED
|
@@ -104,4 +104,23 @@
|
|
|
104
104
|
--wr-input-icon-color: var(--wr-color-primary);
|
|
105
105
|
}
|
|
106
106
|
}
|
|
107
|
+
|
|
108
|
+
&-prefix,
|
|
109
|
+
&-suffix {
|
|
110
|
+
color: var(--wr-input-suffix-prefix-color);
|
|
111
|
+
font-size: inherit;
|
|
112
|
+
font-weight: inherit;
|
|
113
|
+
line-height: inherit;
|
|
114
|
+
|
|
115
|
+
padding-top: var(--wr-input-padding-y);
|
|
116
|
+
padding-bottom: var(--wr-input-padding-y);
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
&-prefix {
|
|
120
|
+
padding-left: var(--wr-input-padding-x);
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
&-suffix {
|
|
124
|
+
padding-right: var(--wr-input-padding-x);
|
|
125
|
+
}
|
|
107
126
|
}
|
package/input/styles/vars.scss
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
:root {
|
|
2
2
|
--wr-input-color: var(--wr-color-dark);
|
|
3
3
|
--wr-input-placeholder-color: var(--wr-color-light);
|
|
4
|
+
--wr-input-suffix-prefix-color: var(--wr-color-medium);
|
|
4
5
|
--wr-input-bg-color: var(--wr-color-white);
|
|
5
6
|
--wr-input-border-color: var(--wr-color-light-lighter);
|
|
6
7
|
--wr-input-border-radius: 0.375rem;
|
package/package.json
CHANGED
package/styles/variables.scss
CHANGED
|
@@ -68,11 +68,5 @@ html {
|
|
|
68
68
|
|
|
69
69
|
/* Checkbox */
|
|
70
70
|
--wr-checkbox-color-base: var(--wr-color-white);
|
|
71
|
-
|
|
72
|
-
--wr-input-bg: #18152a;
|
|
73
|
-
--wr-input-suffix-prefix-color: rgba(var(--wr-color-white-rgb), 0.5);
|
|
74
|
-
--wr-input-suffix-prefix-bg: rgba(var(--wr-color-primary-rgb), 0.125);
|
|
75
|
-
--wr-input-border-color: #493d7e;
|
|
76
|
-
--wr-input-color: #fff;
|
|
77
71
|
}
|
|
78
72
|
}
|