@digital-realty/ix-textbox 2.2.2-alpha-224894-t51.0 → 2.2.3
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/dist/IxTextbox.d.ts +152 -152
- package/dist/IxTextbox.js +257 -257
- package/dist/index.d.ts +1 -1
- package/dist/index.js +1 -1
- package/dist/ix-textbox.d.ts +4 -4
- package/dist/ix-textbox.js +6 -6
- package/dist/react/IxTextbox.d.ts +2 -2
- package/dist/react/IxTextbox.js +9 -9
- package/package.json +4 -4
package/dist/IxTextbox.d.ts
CHANGED
|
@@ -1,152 +1,152 @@
|
|
|
1
|
-
import { LitElement } from 'lit';
|
|
2
|
-
import '@material/web/textfield/filled-text-field.js';
|
|
3
|
-
import '@material/web/textfield/outlined-text-field.js';
|
|
4
|
-
import { TextFieldType, UnsupportedTextFieldType } from '@material/web/textfield/internal/text-field.js';
|
|
5
|
-
import '@digital-realty/ix-icon/ix-icon.js';
|
|
6
|
-
import '@digital-realty/ix-phone-input/ix-phone-input.js';
|
|
7
|
-
export declare class IxTextbox extends LitElement {
|
|
8
|
-
readonly component: HTMLInputElement;
|
|
9
|
-
filled: boolean;
|
|
10
|
-
disabled: boolean;
|
|
11
|
-
/**
|
|
12
|
-
* Gets or sets whether or not the text field is in a visually invalid state.
|
|
13
|
-
*
|
|
14
|
-
* Calling `reportValidity()` will automatically update `error`.
|
|
15
|
-
*/
|
|
16
|
-
error: boolean;
|
|
17
|
-
/**
|
|
18
|
-
* The error message that replaces supporting text when `error` is true. If
|
|
19
|
-
* `errorText` is an empty string, then the supporting text will continue to
|
|
20
|
-
* show.
|
|
21
|
-
*
|
|
22
|
-
* Calling `reportValidity()` will automatically update `errorText` to the
|
|
23
|
-
* native `validationMessage`.
|
|
24
|
-
*/
|
|
25
|
-
errorText: string;
|
|
26
|
-
label: string;
|
|
27
|
-
required: boolean;
|
|
28
|
-
/**
|
|
29
|
-
* The current value of the text field. It is always a string.
|
|
30
|
-
*/
|
|
31
|
-
value: string;
|
|
32
|
-
/**
|
|
33
|
-
* The name of the text field. It is always a string.
|
|
34
|
-
*/
|
|
35
|
-
name: string;
|
|
36
|
-
/**
|
|
37
|
-
* An optional prefix to display before the input value.
|
|
38
|
-
*/
|
|
39
|
-
prefixText: string;
|
|
40
|
-
/**
|
|
41
|
-
* An optional suffix to display after the input value.
|
|
42
|
-
*/
|
|
43
|
-
suffixText: string;
|
|
44
|
-
/**
|
|
45
|
-
* Name of icon. It is always a string.
|
|
46
|
-
*/
|
|
47
|
-
leadingIcon: string;
|
|
48
|
-
/**
|
|
49
|
-
* Name of icon. It is always a string.
|
|
50
|
-
*/
|
|
51
|
-
trailingIcon: string;
|
|
52
|
-
/**
|
|
53
|
-
* Conveys additional information below the text field, such as how it should
|
|
54
|
-
* be used.
|
|
55
|
-
*/
|
|
56
|
-
supportingText: string;
|
|
57
|
-
/**
|
|
58
|
-
* Override the input text CSS `direction`. Useful for RTL languages that use
|
|
59
|
-
* LTR notation for fractions.
|
|
60
|
-
*/
|
|
61
|
-
textDirection: string;
|
|
62
|
-
/**
|
|
63
|
-
* The number of rows to display for a `type="textarea"` text field.
|
|
64
|
-
* Defaults to 2.
|
|
65
|
-
*/
|
|
66
|
-
rows: number;
|
|
67
|
-
inputMode: string;
|
|
68
|
-
/**
|
|
69
|
-
* Defines the greatest value in the range of permitted values.
|
|
70
|
-
*
|
|
71
|
-
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#max
|
|
72
|
-
*/
|
|
73
|
-
max: string;
|
|
74
|
-
/**
|
|
75
|
-
* The maximum number of characters a user can enter into the text field. Set
|
|
76
|
-
* to -1 for none.
|
|
77
|
-
*
|
|
78
|
-
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength
|
|
79
|
-
*/
|
|
80
|
-
maxLength: number;
|
|
81
|
-
/**
|
|
82
|
-
* Defines the most negative value in the range of permitted values.
|
|
83
|
-
*
|
|
84
|
-
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#min
|
|
85
|
-
*/
|
|
86
|
-
min: string;
|
|
87
|
-
/**
|
|
88
|
-
* The minimum number of characters a user can enter into the text field. Set
|
|
89
|
-
* to -1 for none.
|
|
90
|
-
*
|
|
91
|
-
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#minlength
|
|
92
|
-
*/
|
|
93
|
-
minLength: number;
|
|
94
|
-
/**
|
|
95
|
-
* A regular expression that the text field's value must match to pass
|
|
96
|
-
* constraint validation.
|
|
97
|
-
*
|
|
98
|
-
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#pattern
|
|
99
|
-
*/
|
|
100
|
-
pattern: string;
|
|
101
|
-
placeholder: string;
|
|
102
|
-
/**
|
|
103
|
-
* Indicates whether or not a user should be able to edit the text field's
|
|
104
|
-
* value.
|
|
105
|
-
*
|
|
106
|
-
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#readonly
|
|
107
|
-
*/
|
|
108
|
-
readOnly: boolean;
|
|
109
|
-
/**
|
|
110
|
-
* Indicates that input accepts multiple email addresses.
|
|
111
|
-
*
|
|
112
|
-
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/email#multiple
|
|
113
|
-
*/
|
|
114
|
-
multiple: boolean;
|
|
115
|
-
/**
|
|
116
|
-
* Returns or sets the element's step attribute, which works with min and max
|
|
117
|
-
* to limit the increments at which a numeric or date-time value can be set.
|
|
118
|
-
*
|
|
119
|
-
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#step
|
|
120
|
-
*/
|
|
121
|
-
step: string;
|
|
122
|
-
/**
|
|
123
|
-
* The `<input>` type to use, defaults to "text". The type greatly changes how
|
|
124
|
-
* the text field behaves.
|
|
125
|
-
*
|
|
126
|
-
* Text fields support a limited number of `<input>` types:
|
|
127
|
-
*
|
|
128
|
-
* - text
|
|
129
|
-
* - textarea
|
|
130
|
-
* - email
|
|
131
|
-
* - number
|
|
132
|
-
* - password
|
|
133
|
-
* - search
|
|
134
|
-
* - tel
|
|
135
|
-
* - url
|
|
136
|
-
*
|
|
137
|
-
* See
|
|
138
|
-
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types
|
|
139
|
-
* for more details on each input type.
|
|
140
|
-
*/
|
|
141
|
-
type: TextFieldType | UnsupportedTextFieldType;
|
|
142
|
-
/**
|
|
143
|
-
* Describes what, if any, type of autocomplete functionality the input
|
|
144
|
-
* should provide.
|
|
145
|
-
*
|
|
146
|
-
* https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
|
|
147
|
-
*/
|
|
148
|
-
autocomplete: string;
|
|
149
|
-
focus(): void;
|
|
150
|
-
protected createRenderRoot(): this;
|
|
151
|
-
protected render(): import("lit").TemplateResult<1 | 2>;
|
|
152
|
-
}
|
|
1
|
+
import { LitElement } from 'lit';
|
|
2
|
+
import '@material/web/textfield/filled-text-field.js';
|
|
3
|
+
import '@material/web/textfield/outlined-text-field.js';
|
|
4
|
+
import { TextFieldType, UnsupportedTextFieldType } from '@material/web/textfield/internal/text-field.js';
|
|
5
|
+
import '@digital-realty/ix-icon/ix-icon.js';
|
|
6
|
+
import '@digital-realty/ix-phone-input/ix-phone-input.js';
|
|
7
|
+
export declare class IxTextbox extends LitElement {
|
|
8
|
+
readonly component: HTMLInputElement;
|
|
9
|
+
filled: boolean;
|
|
10
|
+
disabled: boolean;
|
|
11
|
+
/**
|
|
12
|
+
* Gets or sets whether or not the text field is in a visually invalid state.
|
|
13
|
+
*
|
|
14
|
+
* Calling `reportValidity()` will automatically update `error`.
|
|
15
|
+
*/
|
|
16
|
+
error: boolean;
|
|
17
|
+
/**
|
|
18
|
+
* The error message that replaces supporting text when `error` is true. If
|
|
19
|
+
* `errorText` is an empty string, then the supporting text will continue to
|
|
20
|
+
* show.
|
|
21
|
+
*
|
|
22
|
+
* Calling `reportValidity()` will automatically update `errorText` to the
|
|
23
|
+
* native `validationMessage`.
|
|
24
|
+
*/
|
|
25
|
+
errorText: string;
|
|
26
|
+
label: string;
|
|
27
|
+
required: boolean;
|
|
28
|
+
/**
|
|
29
|
+
* The current value of the text field. It is always a string.
|
|
30
|
+
*/
|
|
31
|
+
value: string;
|
|
32
|
+
/**
|
|
33
|
+
* The name of the text field. It is always a string.
|
|
34
|
+
*/
|
|
35
|
+
name: string;
|
|
36
|
+
/**
|
|
37
|
+
* An optional prefix to display before the input value.
|
|
38
|
+
*/
|
|
39
|
+
prefixText: string;
|
|
40
|
+
/**
|
|
41
|
+
* An optional suffix to display after the input value.
|
|
42
|
+
*/
|
|
43
|
+
suffixText: string;
|
|
44
|
+
/**
|
|
45
|
+
* Name of icon. It is always a string.
|
|
46
|
+
*/
|
|
47
|
+
leadingIcon: string;
|
|
48
|
+
/**
|
|
49
|
+
* Name of icon. It is always a string.
|
|
50
|
+
*/
|
|
51
|
+
trailingIcon: string;
|
|
52
|
+
/**
|
|
53
|
+
* Conveys additional information below the text field, such as how it should
|
|
54
|
+
* be used.
|
|
55
|
+
*/
|
|
56
|
+
supportingText: string;
|
|
57
|
+
/**
|
|
58
|
+
* Override the input text CSS `direction`. Useful for RTL languages that use
|
|
59
|
+
* LTR notation for fractions.
|
|
60
|
+
*/
|
|
61
|
+
textDirection: string;
|
|
62
|
+
/**
|
|
63
|
+
* The number of rows to display for a `type="textarea"` text field.
|
|
64
|
+
* Defaults to 2.
|
|
65
|
+
*/
|
|
66
|
+
rows: number;
|
|
67
|
+
inputMode: string;
|
|
68
|
+
/**
|
|
69
|
+
* Defines the greatest value in the range of permitted values.
|
|
70
|
+
*
|
|
71
|
+
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#max
|
|
72
|
+
*/
|
|
73
|
+
max: string;
|
|
74
|
+
/**
|
|
75
|
+
* The maximum number of characters a user can enter into the text field. Set
|
|
76
|
+
* to -1 for none.
|
|
77
|
+
*
|
|
78
|
+
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength
|
|
79
|
+
*/
|
|
80
|
+
maxLength: number;
|
|
81
|
+
/**
|
|
82
|
+
* Defines the most negative value in the range of permitted values.
|
|
83
|
+
*
|
|
84
|
+
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#min
|
|
85
|
+
*/
|
|
86
|
+
min: string;
|
|
87
|
+
/**
|
|
88
|
+
* The minimum number of characters a user can enter into the text field. Set
|
|
89
|
+
* to -1 for none.
|
|
90
|
+
*
|
|
91
|
+
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#minlength
|
|
92
|
+
*/
|
|
93
|
+
minLength: number;
|
|
94
|
+
/**
|
|
95
|
+
* A regular expression that the text field's value must match to pass
|
|
96
|
+
* constraint validation.
|
|
97
|
+
*
|
|
98
|
+
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#pattern
|
|
99
|
+
*/
|
|
100
|
+
pattern: string;
|
|
101
|
+
placeholder: string;
|
|
102
|
+
/**
|
|
103
|
+
* Indicates whether or not a user should be able to edit the text field's
|
|
104
|
+
* value.
|
|
105
|
+
*
|
|
106
|
+
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#readonly
|
|
107
|
+
*/
|
|
108
|
+
readOnly: boolean;
|
|
109
|
+
/**
|
|
110
|
+
* Indicates that input accepts multiple email addresses.
|
|
111
|
+
*
|
|
112
|
+
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/email#multiple
|
|
113
|
+
*/
|
|
114
|
+
multiple: boolean;
|
|
115
|
+
/**
|
|
116
|
+
* Returns or sets the element's step attribute, which works with min and max
|
|
117
|
+
* to limit the increments at which a numeric or date-time value can be set.
|
|
118
|
+
*
|
|
119
|
+
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#step
|
|
120
|
+
*/
|
|
121
|
+
step: string;
|
|
122
|
+
/**
|
|
123
|
+
* The `<input>` type to use, defaults to "text". The type greatly changes how
|
|
124
|
+
* the text field behaves.
|
|
125
|
+
*
|
|
126
|
+
* Text fields support a limited number of `<input>` types:
|
|
127
|
+
*
|
|
128
|
+
* - text
|
|
129
|
+
* - textarea
|
|
130
|
+
* - email
|
|
131
|
+
* - number
|
|
132
|
+
* - password
|
|
133
|
+
* - search
|
|
134
|
+
* - tel
|
|
135
|
+
* - url
|
|
136
|
+
*
|
|
137
|
+
* See
|
|
138
|
+
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types
|
|
139
|
+
* for more details on each input type.
|
|
140
|
+
*/
|
|
141
|
+
type: TextFieldType | UnsupportedTextFieldType;
|
|
142
|
+
/**
|
|
143
|
+
* Describes what, if any, type of autocomplete functionality the input
|
|
144
|
+
* should provide.
|
|
145
|
+
*
|
|
146
|
+
* https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
|
|
147
|
+
*/
|
|
148
|
+
autocomplete: string;
|
|
149
|
+
focus(): void;
|
|
150
|
+
protected createRenderRoot(): this;
|
|
151
|
+
protected render(): import("lit").TemplateResult<1 | 2>;
|
|
152
|
+
}
|
package/dist/IxTextbox.js
CHANGED
|
@@ -1,164 +1,164 @@
|
|
|
1
|
-
import { __decorate } from "tslib";
|
|
2
|
-
import { html, LitElement, nothing } from 'lit';
|
|
3
|
-
import { html as staticHtml, literal } from 'lit/static-html.js';
|
|
4
|
-
import { property, query } from 'lit/decorators.js';
|
|
5
|
-
import '@material/web/textfield/filled-text-field.js';
|
|
6
|
-
import '@material/web/textfield/outlined-text-field.js';
|
|
7
|
-
import '@digital-realty/ix-icon/ix-icon.js';
|
|
8
|
-
import '@digital-realty/ix-phone-input/ix-phone-input.js';
|
|
9
|
-
export class IxTextbox extends LitElement {
|
|
10
|
-
constructor() {
|
|
11
|
-
super(...arguments);
|
|
12
|
-
this.filled = false;
|
|
13
|
-
this.disabled = false;
|
|
14
|
-
/**
|
|
15
|
-
* Gets or sets whether or not the text field is in a visually invalid state.
|
|
16
|
-
*
|
|
17
|
-
* Calling `reportValidity()` will automatically update `error`.
|
|
18
|
-
*/
|
|
19
|
-
this.error = false;
|
|
20
|
-
/**
|
|
21
|
-
* The error message that replaces supporting text when `error` is true. If
|
|
22
|
-
* `errorText` is an empty string, then the supporting text will continue to
|
|
23
|
-
* show.
|
|
24
|
-
*
|
|
25
|
-
* Calling `reportValidity()` will automatically update `errorText` to the
|
|
26
|
-
* native `validationMessage`.
|
|
27
|
-
*/
|
|
28
|
-
this.errorText = '';
|
|
29
|
-
this.label = '';
|
|
30
|
-
this.required = false;
|
|
31
|
-
/**
|
|
32
|
-
* The current value of the text field. It is always a string.
|
|
33
|
-
*/
|
|
34
|
-
this.value = '';
|
|
35
|
-
/**
|
|
36
|
-
* The name of the text field. It is always a string.
|
|
37
|
-
*/
|
|
38
|
-
this.name = '';
|
|
39
|
-
/**
|
|
40
|
-
* An optional prefix to display before the input value.
|
|
41
|
-
*/
|
|
42
|
-
this.prefixText = '';
|
|
43
|
-
/**
|
|
44
|
-
* An optional suffix to display after the input value.
|
|
45
|
-
*/
|
|
46
|
-
this.suffixText = '';
|
|
47
|
-
/**
|
|
48
|
-
* Name of icon. It is always a string.
|
|
49
|
-
*/
|
|
50
|
-
this.leadingIcon = '';
|
|
51
|
-
/**
|
|
52
|
-
* Name of icon. It is always a string.
|
|
53
|
-
*/
|
|
54
|
-
this.trailingIcon = '';
|
|
55
|
-
/**
|
|
56
|
-
* Conveys additional information below the text field, such as how it should
|
|
57
|
-
* be used.
|
|
58
|
-
*/
|
|
59
|
-
this.supportingText = '';
|
|
60
|
-
/**
|
|
61
|
-
* Override the input text CSS `direction`. Useful for RTL languages that use
|
|
62
|
-
* LTR notation for fractions.
|
|
63
|
-
*/
|
|
64
|
-
this.textDirection = '';
|
|
65
|
-
/**
|
|
66
|
-
* The number of rows to display for a `type="textarea"` text field.
|
|
67
|
-
* Defaults to 2.
|
|
68
|
-
*/
|
|
69
|
-
this.rows = 2;
|
|
70
|
-
// <input> properties
|
|
71
|
-
this.inputMode = '';
|
|
72
|
-
/**
|
|
73
|
-
* Defines the greatest value in the range of permitted values.
|
|
74
|
-
*
|
|
75
|
-
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#max
|
|
76
|
-
*/
|
|
77
|
-
this.max = '';
|
|
78
|
-
/**
|
|
79
|
-
* The maximum number of characters a user can enter into the text field. Set
|
|
80
|
-
* to -1 for none.
|
|
81
|
-
*
|
|
82
|
-
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength
|
|
83
|
-
*/
|
|
84
|
-
this.maxLength = -1;
|
|
85
|
-
/**
|
|
86
|
-
* Defines the most negative value in the range of permitted values.
|
|
87
|
-
*
|
|
88
|
-
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#min
|
|
89
|
-
*/
|
|
90
|
-
this.min = '';
|
|
91
|
-
/**
|
|
92
|
-
* The minimum number of characters a user can enter into the text field. Set
|
|
93
|
-
* to -1 for none.
|
|
94
|
-
*
|
|
95
|
-
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#minlength
|
|
96
|
-
*/
|
|
97
|
-
this.minLength = -1;
|
|
98
|
-
/**
|
|
99
|
-
* A regular expression that the text field's value must match to pass
|
|
100
|
-
* constraint validation.
|
|
101
|
-
*
|
|
102
|
-
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#pattern
|
|
103
|
-
*/
|
|
104
|
-
this.pattern = '';
|
|
105
|
-
this.placeholder = '';
|
|
106
|
-
/**
|
|
107
|
-
* Indicates whether or not a user should be able to edit the text field's
|
|
108
|
-
* value.
|
|
109
|
-
*
|
|
110
|
-
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#readonly
|
|
111
|
-
*/
|
|
112
|
-
this.readOnly = false;
|
|
113
|
-
/**
|
|
114
|
-
* Indicates that input accepts multiple email addresses.
|
|
115
|
-
*
|
|
116
|
-
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/email#multiple
|
|
117
|
-
*/
|
|
118
|
-
this.multiple = false;
|
|
119
|
-
/**
|
|
120
|
-
* Returns or sets the element's step attribute, which works with min and max
|
|
121
|
-
* to limit the increments at which a numeric or date-time value can be set.
|
|
122
|
-
*
|
|
123
|
-
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#step
|
|
124
|
-
*/
|
|
125
|
-
this.step = '';
|
|
126
|
-
/**
|
|
127
|
-
* The `<input>` type to use, defaults to "text". The type greatly changes how
|
|
128
|
-
* the text field behaves.
|
|
129
|
-
*
|
|
130
|
-
* Text fields support a limited number of `<input>` types:
|
|
131
|
-
*
|
|
132
|
-
* - text
|
|
133
|
-
* - textarea
|
|
134
|
-
* - email
|
|
135
|
-
* - number
|
|
136
|
-
* - password
|
|
137
|
-
* - search
|
|
138
|
-
* - tel
|
|
139
|
-
* - url
|
|
140
|
-
*
|
|
141
|
-
* See
|
|
142
|
-
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types
|
|
143
|
-
* for more details on each input type.
|
|
144
|
-
*/
|
|
145
|
-
this.type = 'text';
|
|
146
|
-
/**
|
|
147
|
-
* Describes what, if any, type of autocomplete functionality the input
|
|
148
|
-
* should provide.
|
|
149
|
-
*
|
|
150
|
-
* https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
|
|
151
|
-
*/
|
|
152
|
-
this.autocomplete = '';
|
|
153
|
-
}
|
|
154
|
-
focus() {
|
|
155
|
-
this.component.focus();
|
|
156
|
-
}
|
|
157
|
-
createRenderRoot() {
|
|
158
|
-
return this;
|
|
159
|
-
}
|
|
160
|
-
render() {
|
|
161
|
-
if (this.type === 'tel') {
|
|
1
|
+
import { __decorate } from "tslib";
|
|
2
|
+
import { html, LitElement, nothing } from 'lit';
|
|
3
|
+
import { html as staticHtml, literal } from 'lit/static-html.js';
|
|
4
|
+
import { property, query } from 'lit/decorators.js';
|
|
5
|
+
import '@material/web/textfield/filled-text-field.js';
|
|
6
|
+
import '@material/web/textfield/outlined-text-field.js';
|
|
7
|
+
import '@digital-realty/ix-icon/ix-icon.js';
|
|
8
|
+
import '@digital-realty/ix-phone-input/ix-phone-input.js';
|
|
9
|
+
export class IxTextbox extends LitElement {
|
|
10
|
+
constructor() {
|
|
11
|
+
super(...arguments);
|
|
12
|
+
this.filled = false;
|
|
13
|
+
this.disabled = false;
|
|
14
|
+
/**
|
|
15
|
+
* Gets or sets whether or not the text field is in a visually invalid state.
|
|
16
|
+
*
|
|
17
|
+
* Calling `reportValidity()` will automatically update `error`.
|
|
18
|
+
*/
|
|
19
|
+
this.error = false;
|
|
20
|
+
/**
|
|
21
|
+
* The error message that replaces supporting text when `error` is true. If
|
|
22
|
+
* `errorText` is an empty string, then the supporting text will continue to
|
|
23
|
+
* show.
|
|
24
|
+
*
|
|
25
|
+
* Calling `reportValidity()` will automatically update `errorText` to the
|
|
26
|
+
* native `validationMessage`.
|
|
27
|
+
*/
|
|
28
|
+
this.errorText = '';
|
|
29
|
+
this.label = '';
|
|
30
|
+
this.required = false;
|
|
31
|
+
/**
|
|
32
|
+
* The current value of the text field. It is always a string.
|
|
33
|
+
*/
|
|
34
|
+
this.value = '';
|
|
35
|
+
/**
|
|
36
|
+
* The name of the text field. It is always a string.
|
|
37
|
+
*/
|
|
38
|
+
this.name = '';
|
|
39
|
+
/**
|
|
40
|
+
* An optional prefix to display before the input value.
|
|
41
|
+
*/
|
|
42
|
+
this.prefixText = '';
|
|
43
|
+
/**
|
|
44
|
+
* An optional suffix to display after the input value.
|
|
45
|
+
*/
|
|
46
|
+
this.suffixText = '';
|
|
47
|
+
/**
|
|
48
|
+
* Name of icon. It is always a string.
|
|
49
|
+
*/
|
|
50
|
+
this.leadingIcon = '';
|
|
51
|
+
/**
|
|
52
|
+
* Name of icon. It is always a string.
|
|
53
|
+
*/
|
|
54
|
+
this.trailingIcon = '';
|
|
55
|
+
/**
|
|
56
|
+
* Conveys additional information below the text field, such as how it should
|
|
57
|
+
* be used.
|
|
58
|
+
*/
|
|
59
|
+
this.supportingText = '';
|
|
60
|
+
/**
|
|
61
|
+
* Override the input text CSS `direction`. Useful for RTL languages that use
|
|
62
|
+
* LTR notation for fractions.
|
|
63
|
+
*/
|
|
64
|
+
this.textDirection = '';
|
|
65
|
+
/**
|
|
66
|
+
* The number of rows to display for a `type="textarea"` text field.
|
|
67
|
+
* Defaults to 2.
|
|
68
|
+
*/
|
|
69
|
+
this.rows = 2;
|
|
70
|
+
// <input> properties
|
|
71
|
+
this.inputMode = '';
|
|
72
|
+
/**
|
|
73
|
+
* Defines the greatest value in the range of permitted values.
|
|
74
|
+
*
|
|
75
|
+
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#max
|
|
76
|
+
*/
|
|
77
|
+
this.max = '';
|
|
78
|
+
/**
|
|
79
|
+
* The maximum number of characters a user can enter into the text field. Set
|
|
80
|
+
* to -1 for none.
|
|
81
|
+
*
|
|
82
|
+
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength
|
|
83
|
+
*/
|
|
84
|
+
this.maxLength = -1;
|
|
85
|
+
/**
|
|
86
|
+
* Defines the most negative value in the range of permitted values.
|
|
87
|
+
*
|
|
88
|
+
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#min
|
|
89
|
+
*/
|
|
90
|
+
this.min = '';
|
|
91
|
+
/**
|
|
92
|
+
* The minimum number of characters a user can enter into the text field. Set
|
|
93
|
+
* to -1 for none.
|
|
94
|
+
*
|
|
95
|
+
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#minlength
|
|
96
|
+
*/
|
|
97
|
+
this.minLength = -1;
|
|
98
|
+
/**
|
|
99
|
+
* A regular expression that the text field's value must match to pass
|
|
100
|
+
* constraint validation.
|
|
101
|
+
*
|
|
102
|
+
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#pattern
|
|
103
|
+
*/
|
|
104
|
+
this.pattern = '';
|
|
105
|
+
this.placeholder = '';
|
|
106
|
+
/**
|
|
107
|
+
* Indicates whether or not a user should be able to edit the text field's
|
|
108
|
+
* value.
|
|
109
|
+
*
|
|
110
|
+
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#readonly
|
|
111
|
+
*/
|
|
112
|
+
this.readOnly = false;
|
|
113
|
+
/**
|
|
114
|
+
* Indicates that input accepts multiple email addresses.
|
|
115
|
+
*
|
|
116
|
+
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/email#multiple
|
|
117
|
+
*/
|
|
118
|
+
this.multiple = false;
|
|
119
|
+
/**
|
|
120
|
+
* Returns or sets the element's step attribute, which works with min and max
|
|
121
|
+
* to limit the increments at which a numeric or date-time value can be set.
|
|
122
|
+
*
|
|
123
|
+
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#step
|
|
124
|
+
*/
|
|
125
|
+
this.step = '';
|
|
126
|
+
/**
|
|
127
|
+
* The `<input>` type to use, defaults to "text". The type greatly changes how
|
|
128
|
+
* the text field behaves.
|
|
129
|
+
*
|
|
130
|
+
* Text fields support a limited number of `<input>` types:
|
|
131
|
+
*
|
|
132
|
+
* - text
|
|
133
|
+
* - textarea
|
|
134
|
+
* - email
|
|
135
|
+
* - number
|
|
136
|
+
* - password
|
|
137
|
+
* - search
|
|
138
|
+
* - tel
|
|
139
|
+
* - url
|
|
140
|
+
*
|
|
141
|
+
* See
|
|
142
|
+
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types
|
|
143
|
+
* for more details on each input type.
|
|
144
|
+
*/
|
|
145
|
+
this.type = 'text';
|
|
146
|
+
/**
|
|
147
|
+
* Describes what, if any, type of autocomplete functionality the input
|
|
148
|
+
* should provide.
|
|
149
|
+
*
|
|
150
|
+
* https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
|
|
151
|
+
*/
|
|
152
|
+
this.autocomplete = '';
|
|
153
|
+
}
|
|
154
|
+
focus() {
|
|
155
|
+
this.component.focus();
|
|
156
|
+
}
|
|
157
|
+
createRenderRoot() {
|
|
158
|
+
return this;
|
|
159
|
+
}
|
|
160
|
+
render() {
|
|
161
|
+
if (this.type === 'tel') {
|
|
162
162
|
return html `<ix-phone-input
|
|
163
163
|
class="textfield"
|
|
164
164
|
?disabled=${this.disabled}
|
|
@@ -170,11 +170,11 @@ export class IxTextbox extends LitElement {
|
|
|
170
170
|
label=${this.label}
|
|
171
171
|
name=${this.name}
|
|
172
172
|
value=${this.value}
|
|
173
|
-
></ix-phone-input>`;
|
|
174
|
-
}
|
|
175
|
-
const tag = this.filled
|
|
176
|
-
? literal `md-filled-text-field`
|
|
177
|
-
: literal `md-outlined-text-field`;
|
|
173
|
+
></ix-phone-input>`;
|
|
174
|
+
}
|
|
175
|
+
const tag = this.filled
|
|
176
|
+
? literal `md-filled-text-field`
|
|
177
|
+
: literal `md-outlined-text-field`;
|
|
178
178
|
return staticHtml `
|
|
179
179
|
<${tag}
|
|
180
180
|
class="textfield"
|
|
@@ -205,100 +205,100 @@ export class IxTextbox extends LitElement {
|
|
|
205
205
|
name=${this.name}
|
|
206
206
|
value=${this.value}
|
|
207
207
|
>
|
|
208
|
-
${this.leadingIcon
|
|
209
|
-
? html `<ix-icon slot="leading-icon">${this.leadingIcon}</ix-icon>`
|
|
208
|
+
${this.leadingIcon
|
|
209
|
+
? html `<ix-icon slot="leading-icon">${this.leadingIcon}</ix-icon>`
|
|
210
210
|
: nothing}
|
|
211
|
-
${this.trailingIcon
|
|
211
|
+
${this.trailingIcon
|
|
212
212
|
? html `<ix-icon slot="trailing-icon"
|
|
213
213
|
>${this.trailingIcon}</ix-icon
|
|
214
|
-
>`
|
|
214
|
+
>`
|
|
215
215
|
: nothing}
|
|
216
216
|
</${tag}>
|
|
217
|
-
`;
|
|
218
|
-
}
|
|
219
|
-
}
|
|
220
|
-
__decorate([
|
|
221
|
-
query('.textfield')
|
|
222
|
-
], IxTextbox.prototype, "component", void 0);
|
|
223
|
-
__decorate([
|
|
224
|
-
property({ type: Boolean, reflect: true })
|
|
225
|
-
], IxTextbox.prototype, "filled", void 0);
|
|
226
|
-
__decorate([
|
|
227
|
-
property({ type: Boolean, reflect: true })
|
|
228
|
-
], IxTextbox.prototype, "disabled", void 0);
|
|
229
|
-
__decorate([
|
|
230
|
-
property({ type: Boolean, reflect: true })
|
|
231
|
-
], IxTextbox.prototype, "error", void 0);
|
|
232
|
-
__decorate([
|
|
233
|
-
property({ attribute: 'error-text' })
|
|
234
|
-
], IxTextbox.prototype, "errorText", void 0);
|
|
235
|
-
__decorate([
|
|
236
|
-
property()
|
|
237
|
-
], IxTextbox.prototype, "label", void 0);
|
|
238
|
-
__decorate([
|
|
239
|
-
property({ type: Boolean, reflect: true })
|
|
240
|
-
], IxTextbox.prototype, "required", void 0);
|
|
241
|
-
__decorate([
|
|
242
|
-
property()
|
|
243
|
-
], IxTextbox.prototype, "value", void 0);
|
|
244
|
-
__decorate([
|
|
245
|
-
property()
|
|
246
|
-
], IxTextbox.prototype, "name", void 0);
|
|
247
|
-
__decorate([
|
|
248
|
-
property({ attribute: 'prefix-text' })
|
|
249
|
-
], IxTextbox.prototype, "prefixText", void 0);
|
|
250
|
-
__decorate([
|
|
251
|
-
property({ attribute: 'suffix-text' })
|
|
252
|
-
], IxTextbox.prototype, "suffixText", void 0);
|
|
253
|
-
__decorate([
|
|
254
|
-
property({ attribute: 'leading-icon' })
|
|
255
|
-
], IxTextbox.prototype, "leadingIcon", void 0);
|
|
256
|
-
__decorate([
|
|
257
|
-
property({ attribute: 'trailing-icon' })
|
|
258
|
-
], IxTextbox.prototype, "trailingIcon", void 0);
|
|
259
|
-
__decorate([
|
|
260
|
-
property({ attribute: 'supporting-text' })
|
|
261
|
-
], IxTextbox.prototype, "supportingText", void 0);
|
|
262
|
-
__decorate([
|
|
263
|
-
property({ attribute: 'text-direction' })
|
|
264
|
-
], IxTextbox.prototype, "textDirection", void 0);
|
|
265
|
-
__decorate([
|
|
266
|
-
property({ type: Number })
|
|
267
|
-
], IxTextbox.prototype, "rows", void 0);
|
|
268
|
-
__decorate([
|
|
269
|
-
property({ reflect: true })
|
|
270
|
-
], IxTextbox.prototype, "inputMode", void 0);
|
|
271
|
-
__decorate([
|
|
272
|
-
property()
|
|
273
|
-
], IxTextbox.prototype, "max", void 0);
|
|
274
|
-
__decorate([
|
|
275
|
-
property({ type: Number })
|
|
276
|
-
], IxTextbox.prototype, "maxLength", void 0);
|
|
277
|
-
__decorate([
|
|
278
|
-
property()
|
|
279
|
-
], IxTextbox.prototype, "min", void 0);
|
|
280
|
-
__decorate([
|
|
281
|
-
property({ type: Number })
|
|
282
|
-
], IxTextbox.prototype, "minLength", void 0);
|
|
283
|
-
__decorate([
|
|
284
|
-
property()
|
|
285
|
-
], IxTextbox.prototype, "pattern", void 0);
|
|
286
|
-
__decorate([
|
|
287
|
-
property({ reflect: true })
|
|
288
|
-
], IxTextbox.prototype, "placeholder", void 0);
|
|
289
|
-
__decorate([
|
|
290
|
-
property({ type: Boolean, reflect: true })
|
|
291
|
-
], IxTextbox.prototype, "readOnly", void 0);
|
|
292
|
-
__decorate([
|
|
293
|
-
property({ type: Boolean, reflect: true })
|
|
294
|
-
], IxTextbox.prototype, "multiple", void 0);
|
|
295
|
-
__decorate([
|
|
296
|
-
property()
|
|
297
|
-
], IxTextbox.prototype, "step", void 0);
|
|
298
|
-
__decorate([
|
|
299
|
-
property({ reflect: true })
|
|
300
|
-
], IxTextbox.prototype, "type", void 0);
|
|
301
|
-
__decorate([
|
|
302
|
-
property({ reflect: true })
|
|
303
|
-
], IxTextbox.prototype, "autocomplete", void 0);
|
|
217
|
+
`;
|
|
218
|
+
}
|
|
219
|
+
}
|
|
220
|
+
__decorate([
|
|
221
|
+
query('.textfield')
|
|
222
|
+
], IxTextbox.prototype, "component", void 0);
|
|
223
|
+
__decorate([
|
|
224
|
+
property({ type: Boolean, reflect: true })
|
|
225
|
+
], IxTextbox.prototype, "filled", void 0);
|
|
226
|
+
__decorate([
|
|
227
|
+
property({ type: Boolean, reflect: true })
|
|
228
|
+
], IxTextbox.prototype, "disabled", void 0);
|
|
229
|
+
__decorate([
|
|
230
|
+
property({ type: Boolean, reflect: true })
|
|
231
|
+
], IxTextbox.prototype, "error", void 0);
|
|
232
|
+
__decorate([
|
|
233
|
+
property({ attribute: 'error-text' })
|
|
234
|
+
], IxTextbox.prototype, "errorText", void 0);
|
|
235
|
+
__decorate([
|
|
236
|
+
property()
|
|
237
|
+
], IxTextbox.prototype, "label", void 0);
|
|
238
|
+
__decorate([
|
|
239
|
+
property({ type: Boolean, reflect: true })
|
|
240
|
+
], IxTextbox.prototype, "required", void 0);
|
|
241
|
+
__decorate([
|
|
242
|
+
property()
|
|
243
|
+
], IxTextbox.prototype, "value", void 0);
|
|
244
|
+
__decorate([
|
|
245
|
+
property()
|
|
246
|
+
], IxTextbox.prototype, "name", void 0);
|
|
247
|
+
__decorate([
|
|
248
|
+
property({ attribute: 'prefix-text' })
|
|
249
|
+
], IxTextbox.prototype, "prefixText", void 0);
|
|
250
|
+
__decorate([
|
|
251
|
+
property({ attribute: 'suffix-text' })
|
|
252
|
+
], IxTextbox.prototype, "suffixText", void 0);
|
|
253
|
+
__decorate([
|
|
254
|
+
property({ attribute: 'leading-icon' })
|
|
255
|
+
], IxTextbox.prototype, "leadingIcon", void 0);
|
|
256
|
+
__decorate([
|
|
257
|
+
property({ attribute: 'trailing-icon' })
|
|
258
|
+
], IxTextbox.prototype, "trailingIcon", void 0);
|
|
259
|
+
__decorate([
|
|
260
|
+
property({ attribute: 'supporting-text' })
|
|
261
|
+
], IxTextbox.prototype, "supportingText", void 0);
|
|
262
|
+
__decorate([
|
|
263
|
+
property({ attribute: 'text-direction' })
|
|
264
|
+
], IxTextbox.prototype, "textDirection", void 0);
|
|
265
|
+
__decorate([
|
|
266
|
+
property({ type: Number })
|
|
267
|
+
], IxTextbox.prototype, "rows", void 0);
|
|
268
|
+
__decorate([
|
|
269
|
+
property({ reflect: true })
|
|
270
|
+
], IxTextbox.prototype, "inputMode", void 0);
|
|
271
|
+
__decorate([
|
|
272
|
+
property()
|
|
273
|
+
], IxTextbox.prototype, "max", void 0);
|
|
274
|
+
__decorate([
|
|
275
|
+
property({ type: Number })
|
|
276
|
+
], IxTextbox.prototype, "maxLength", void 0);
|
|
277
|
+
__decorate([
|
|
278
|
+
property()
|
|
279
|
+
], IxTextbox.prototype, "min", void 0);
|
|
280
|
+
__decorate([
|
|
281
|
+
property({ type: Number })
|
|
282
|
+
], IxTextbox.prototype, "minLength", void 0);
|
|
283
|
+
__decorate([
|
|
284
|
+
property()
|
|
285
|
+
], IxTextbox.prototype, "pattern", void 0);
|
|
286
|
+
__decorate([
|
|
287
|
+
property({ reflect: true })
|
|
288
|
+
], IxTextbox.prototype, "placeholder", void 0);
|
|
289
|
+
__decorate([
|
|
290
|
+
property({ type: Boolean, reflect: true })
|
|
291
|
+
], IxTextbox.prototype, "readOnly", void 0);
|
|
292
|
+
__decorate([
|
|
293
|
+
property({ type: Boolean, reflect: true })
|
|
294
|
+
], IxTextbox.prototype, "multiple", void 0);
|
|
295
|
+
__decorate([
|
|
296
|
+
property()
|
|
297
|
+
], IxTextbox.prototype, "step", void 0);
|
|
298
|
+
__decorate([
|
|
299
|
+
property({ reflect: true })
|
|
300
|
+
], IxTextbox.prototype, "type", void 0);
|
|
301
|
+
__decorate([
|
|
302
|
+
property({ reflect: true })
|
|
303
|
+
], IxTextbox.prototype, "autocomplete", void 0);
|
|
304
304
|
//# sourceMappingURL=IxTextbox.js.map
|
package/dist/index.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export { IxTextbox } from './IxTextbox.js';
|
|
1
|
+
export { IxTextbox } from './IxTextbox.js';
|
package/dist/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { IxTextbox } from './IxTextbox.js';
|
|
1
|
+
export { IxTextbox } from './IxTextbox.js';
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/dist/ix-textbox.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { IxTextbox } from './IxTextbox.js';
|
|
2
|
-
export declare class IxTextboxStyled extends IxTextbox {
|
|
3
|
-
static styles: import("lit").CSSResult;
|
|
4
|
-
}
|
|
1
|
+
import { IxTextbox } from './IxTextbox.js';
|
|
2
|
+
export declare class IxTextboxStyled extends IxTextbox {
|
|
3
|
+
static styles: import("lit").CSSResult;
|
|
4
|
+
}
|
package/dist/ix-textbox.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { css } from 'lit';
|
|
2
|
-
import { IxTextbox } from './IxTextbox.js';
|
|
3
|
-
export class IxTextboxStyled extends IxTextbox {
|
|
4
|
-
}
|
|
1
|
+
import { css } from 'lit';
|
|
2
|
+
import { IxTextbox } from './IxTextbox.js';
|
|
3
|
+
export class IxTextboxStyled extends IxTextbox {
|
|
4
|
+
}
|
|
5
5
|
IxTextboxStyled.styles = css `
|
|
6
6
|
:host {
|
|
7
7
|
display: block;
|
|
@@ -9,6 +9,6 @@ IxTextboxStyled.styles = css `
|
|
|
9
9
|
.textfield {
|
|
10
10
|
display: block;
|
|
11
11
|
}
|
|
12
|
-
`;
|
|
13
|
-
window.customElements.define('ix-textbox', IxTextboxStyled);
|
|
12
|
+
`;
|
|
13
|
+
window.customElements.define('ix-textbox', IxTextboxStyled);
|
|
14
14
|
//# sourceMappingURL=ix-textbox.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { IxTextbox as LitComp } from '../IxTextbox.js';
|
|
2
|
-
export declare const IxTextbox: import("@lit/react").ReactWebComponent<LitComp, {}>;
|
|
1
|
+
import { IxTextbox as LitComp } from '../IxTextbox.js';
|
|
2
|
+
export declare const IxTextbox: import("@lit/react").ReactWebComponent<LitComp, {}>;
|
package/dist/react/IxTextbox.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { createComponent } from '@lit/react';
|
|
3
|
-
import { IxTextbox as LitComp } from '../IxTextbox.js';
|
|
4
|
-
customElements.define('ix-textbox', LitComp);
|
|
5
|
-
export const IxTextbox = createComponent({
|
|
6
|
-
tagName: 'ix-textbox-react',
|
|
7
|
-
elementClass: LitComp,
|
|
8
|
-
react: React,
|
|
9
|
-
});
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { createComponent } from '@lit/react';
|
|
3
|
+
import { IxTextbox as LitComp } from '../IxTextbox.js';
|
|
4
|
+
customElements.define('ix-textbox', LitComp);
|
|
5
|
+
export const IxTextbox = createComponent({
|
|
6
|
+
tagName: 'ix-textbox-react',
|
|
7
|
+
elementClass: LitComp,
|
|
8
|
+
react: React,
|
|
9
|
+
});
|
|
10
10
|
//# sourceMappingURL=IxTextbox.js.map
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@digital-realty/ix-textbox",
|
|
3
|
-
"version": "2.2.
|
|
3
|
+
"version": "2.2.3",
|
|
4
4
|
"description": "Webcomponent ix-textbox following open-wc recommendations",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "Digital Realty",
|
|
@@ -27,8 +27,8 @@
|
|
|
27
27
|
"test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\""
|
|
28
28
|
},
|
|
29
29
|
"dependencies": {
|
|
30
|
-
"@digital-realty/ix-icon": "^1.1.
|
|
31
|
-
"@digital-realty/ix-phone-input": "^2.2.
|
|
30
|
+
"@digital-realty/ix-icon": "^1.1.3",
|
|
31
|
+
"@digital-realty/ix-phone-input": "^2.2.3",
|
|
32
32
|
"@lit/react": "^1.0.2",
|
|
33
33
|
"@material/web": "1.2.0",
|
|
34
34
|
"lit": "^2.8.0 || ^3.0.0",
|
|
@@ -111,5 +111,5 @@
|
|
|
111
111
|
"README.md",
|
|
112
112
|
"LICENSE"
|
|
113
113
|
],
|
|
114
|
-
"gitHead": "
|
|
114
|
+
"gitHead": "d05f7852e15c67ec82d2b44f3d730398f25c55c4"
|
|
115
115
|
}
|