@umbraco-ui/uui-input-password 0.0.3 → 0.2.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 +4 -0
- package/custom-elements.json +71 -6
- package/lib/index.js +7 -0
- package/lib/uui-input-password.element.d.ts +2 -0
- package/package.json +5 -5
package/README.md
CHANGED
package/custom-elements.json
CHANGED
|
@@ -5,12 +5,40 @@
|
|
|
5
5
|
"name": "uui-input-password",
|
|
6
6
|
"path": "./lib/uui-input-password.element.ts",
|
|
7
7
|
"attributes": [
|
|
8
|
+
{
|
|
9
|
+
"name": "minlength",
|
|
10
|
+
"description": "This is a minimum value of the input.",
|
|
11
|
+
"type": "number",
|
|
12
|
+
"default": "\"undefined\""
|
|
13
|
+
},
|
|
14
|
+
{
|
|
15
|
+
"name": "minlength-message",
|
|
16
|
+
"description": "Minlength validation message.",
|
|
17
|
+
"type": "boolean"
|
|
18
|
+
},
|
|
19
|
+
{
|
|
20
|
+
"name": "maxlength",
|
|
21
|
+
"description": "This is a maximum value of the input.",
|
|
22
|
+
"type": "number",
|
|
23
|
+
"default": "\"undefined\""
|
|
24
|
+
},
|
|
25
|
+
{
|
|
26
|
+
"name": "maxlength-message",
|
|
27
|
+
"description": "Maxlength validation message.",
|
|
28
|
+
"type": "boolean"
|
|
29
|
+
},
|
|
8
30
|
{
|
|
9
31
|
"name": "disabled",
|
|
10
32
|
"description": "Disables the input.",
|
|
11
33
|
"type": "boolean",
|
|
12
34
|
"default": "\"false\""
|
|
13
35
|
},
|
|
36
|
+
{
|
|
37
|
+
"name": "readonly",
|
|
38
|
+
"description": "Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.",
|
|
39
|
+
"type": "boolean",
|
|
40
|
+
"default": "\"false\""
|
|
41
|
+
},
|
|
14
42
|
{
|
|
15
43
|
"name": "label",
|
|
16
44
|
"description": "Label for input element.",
|
|
@@ -55,18 +83,20 @@
|
|
|
55
83
|
{
|
|
56
84
|
"name": "required-message",
|
|
57
85
|
"description": "Required validation message.",
|
|
58
|
-
"type": "
|
|
86
|
+
"type": "string",
|
|
87
|
+
"default": "\"This field is required\""
|
|
59
88
|
},
|
|
60
89
|
{
|
|
61
90
|
"name": "error",
|
|
62
91
|
"description": "Apply custom error on this input.",
|
|
63
92
|
"type": "boolean",
|
|
64
|
-
"default": "
|
|
93
|
+
"default": "false"
|
|
65
94
|
},
|
|
66
95
|
{
|
|
67
96
|
"name": "error-message",
|
|
68
97
|
"description": "Custom error message.",
|
|
69
|
-
"type": "
|
|
98
|
+
"type": "string",
|
|
99
|
+
"default": "\"This field is invalid\""
|
|
70
100
|
}
|
|
71
101
|
],
|
|
72
102
|
"properties": [
|
|
@@ -75,6 +105,32 @@
|
|
|
75
105
|
"type": "CSSResult[]",
|
|
76
106
|
"default": "[null,null]"
|
|
77
107
|
},
|
|
108
|
+
{
|
|
109
|
+
"name": "minlength",
|
|
110
|
+
"attribute": "minlength",
|
|
111
|
+
"description": "This is a minimum value of the input.",
|
|
112
|
+
"type": "number",
|
|
113
|
+
"default": "\"undefined\""
|
|
114
|
+
},
|
|
115
|
+
{
|
|
116
|
+
"name": "minlengthMessage",
|
|
117
|
+
"attribute": "minlength-message",
|
|
118
|
+
"description": "Minlength validation message.",
|
|
119
|
+
"type": "boolean"
|
|
120
|
+
},
|
|
121
|
+
{
|
|
122
|
+
"name": "maxlength",
|
|
123
|
+
"attribute": "maxlength",
|
|
124
|
+
"description": "This is a maximum value of the input.",
|
|
125
|
+
"type": "number",
|
|
126
|
+
"default": "\"undefined\""
|
|
127
|
+
},
|
|
128
|
+
{
|
|
129
|
+
"name": "maxlengthMessage",
|
|
130
|
+
"attribute": "maxlength-message",
|
|
131
|
+
"description": "Maxlength validation message.",
|
|
132
|
+
"type": "boolean"
|
|
133
|
+
},
|
|
78
134
|
{
|
|
79
135
|
"name": "disabled",
|
|
80
136
|
"attribute": "disabled",
|
|
@@ -82,6 +138,13 @@
|
|
|
82
138
|
"type": "boolean",
|
|
83
139
|
"default": "\"false\""
|
|
84
140
|
},
|
|
141
|
+
{
|
|
142
|
+
"name": "readonly",
|
|
143
|
+
"attribute": "readonly",
|
|
144
|
+
"description": "Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.",
|
|
145
|
+
"type": "boolean",
|
|
146
|
+
"default": "\"false\""
|
|
147
|
+
},
|
|
85
148
|
{
|
|
86
149
|
"name": "label",
|
|
87
150
|
"attribute": "label",
|
|
@@ -140,20 +203,22 @@
|
|
|
140
203
|
"name": "requiredMessage",
|
|
141
204
|
"attribute": "required-message",
|
|
142
205
|
"description": "Required validation message.",
|
|
143
|
-
"type": "
|
|
206
|
+
"type": "string",
|
|
207
|
+
"default": "\"This field is required\""
|
|
144
208
|
},
|
|
145
209
|
{
|
|
146
210
|
"name": "error",
|
|
147
211
|
"attribute": "error",
|
|
148
212
|
"description": "Apply custom error on this input.",
|
|
149
213
|
"type": "boolean",
|
|
150
|
-
"default": "
|
|
214
|
+
"default": "false"
|
|
151
215
|
},
|
|
152
216
|
{
|
|
153
217
|
"name": "errorMessage",
|
|
154
218
|
"attribute": "error-message",
|
|
155
219
|
"description": "Custom error message.",
|
|
156
|
-
"type": "
|
|
220
|
+
"type": "string",
|
|
221
|
+
"default": "\"This field is invalid\""
|
|
157
222
|
},
|
|
158
223
|
{
|
|
159
224
|
"name": "validationMessage"
|
package/lib/index.js
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
|
|
2
|
+
import { demandCustomElement } from '@umbraco-ui/uui-base/lib/utils';
|
|
2
3
|
import { iconSee, iconUnsee } from '@umbraco-ui/uui-icon-registry-essential/lib/svgs';
|
|
3
4
|
import { UUIInputElement } from '@umbraco-ui/uui-input/lib';
|
|
4
5
|
import { css, html } from 'lit';
|
|
@@ -32,6 +33,11 @@ let UUIInputPasswordElement = class extends UUIInputElement {
|
|
|
32
33
|
this.passwordType = "password";
|
|
33
34
|
}
|
|
34
35
|
}
|
|
36
|
+
connectedCallback() {
|
|
37
|
+
super.connectedCallback();
|
|
38
|
+
demandCustomElement(this, "uui-icon");
|
|
39
|
+
demandCustomElement(this, "uui-button");
|
|
40
|
+
}
|
|
35
41
|
renderIcon() {
|
|
36
42
|
return this.passwordType === "password" ? html`<uui-icon name="see" .fallback=${iconSee.strings[0]}></uui-icon>` : html`<uui-icon
|
|
37
43
|
name="unsee"
|
|
@@ -43,6 +49,7 @@ let UUIInputPasswordElement = class extends UUIInputElement {
|
|
|
43
49
|
@click=${this._onPasswordToggle}
|
|
44
50
|
style="--uui-button-padding-top-factor: 0; --uui-button-padding-bottom-factor: 0"
|
|
45
51
|
compact
|
|
52
|
+
label="${this.passwordType === "password" ? "Show password" : "Hide password"}"
|
|
46
53
|
id="eye">
|
|
47
54
|
${this.renderIcon()}
|
|
48
55
|
</uui-button>`;
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { InputType, UUIInputElement } from '@umbraco-ui/uui-input/lib';
|
|
2
2
|
/**
|
|
3
3
|
* @element uui-input-password
|
|
4
|
+
* @extends uui-input
|
|
4
5
|
*/
|
|
5
6
|
export declare class UUIInputPasswordElement extends UUIInputElement {
|
|
6
7
|
static styles: import("lit").CSSResult[];
|
|
@@ -8,6 +9,7 @@ export declare class UUIInputPasswordElement extends UUIInputElement {
|
|
|
8
9
|
get type(): InputType;
|
|
9
10
|
set type(_newValue: InputType);
|
|
10
11
|
_onPasswordToggle(): void;
|
|
12
|
+
connectedCallback(): void;
|
|
11
13
|
renderIcon(): import("lit-html").TemplateResult<1>;
|
|
12
14
|
renderAppend(): import("lit-html").TemplateResult<1>;
|
|
13
15
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@umbraco-ui/uui-input-password",
|
|
3
|
-
"version": "0.0
|
|
3
|
+
"version": "0.2.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"Umbraco",
|
|
@@ -30,9 +30,9 @@
|
|
|
30
30
|
"custom-elements.json"
|
|
31
31
|
],
|
|
32
32
|
"dependencies": {
|
|
33
|
-
"@umbraco-ui/uui-base": "0.
|
|
34
|
-
"@umbraco-ui/uui-icon-registry-essential": "0.
|
|
35
|
-
"@umbraco-ui/uui-input": "0.0
|
|
33
|
+
"@umbraco-ui/uui-base": "0.1.1",
|
|
34
|
+
"@umbraco-ui/uui-icon-registry-essential": "0.1.1",
|
|
35
|
+
"@umbraco-ui/uui-input": "0.2.0"
|
|
36
36
|
},
|
|
37
37
|
"scripts": {
|
|
38
38
|
"build": "npm run analyze && tsc --build --force && rollup -c rollup.config.js",
|
|
@@ -43,5 +43,5 @@
|
|
|
43
43
|
"access": "public"
|
|
44
44
|
},
|
|
45
45
|
"homepage": "https://uui.umbraco.com/?path=/story/uui-input-password",
|
|
46
|
-
"gitHead": "
|
|
46
|
+
"gitHead": "3832880dc1f6f0db202b68530a11603299efe075"
|
|
47
47
|
}
|