@substrate-system/password-input 0.0.1 → 0.0.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/README.md +64 -2
- package/dist/index.cjs +76 -68
- package/dist/index.cjs.map +3 -3
- package/dist/index.d.ts +16 -2
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +76 -68
- package/dist/index.js.map +2 -2
- package/dist/index.min.js +27 -19
- package/dist/index.min.js.map +4 -4
- package/dist/meta.json +39 -4
- package/dist/util.cjs +111 -0
- package/dist/util.cjs.map +7 -0
- package/dist/util.d.ts +3 -0
- package/dist/util.d.ts.map +1 -0
- package/dist/util.js +91 -0
- package/dist/util.js.map +7 -0
- package/dist/util.min.js +2 -0
- package/dist/util.min.js.map +7 -0
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
# Password Input
|
|
2
|
-
](https://github.com/substrate-system/password-input/actions/workflows/nodejs.yml)
|
|
3
3
|
[](README.md)
|
|
4
4
|
[](README.md)
|
|
5
5
|
[](https://packagephobia.com/result?p=@bicycle-codes/keys)
|
|
@@ -26,10 +26,16 @@ Accessible by default — `aria-*` attributes, the `id` attribute, and a
|
|
|
26
26
|
- [API](#api)
|
|
27
27
|
* [ESM](#esm)
|
|
28
28
|
* [Common JS](#common-js)
|
|
29
|
+
* [Attributes](#attributes)
|
|
30
|
+
+ [Supported `aria-*` attributes](#supported-aria--attributes)
|
|
31
|
+
+ [Usage Notes](#usage-notes)
|
|
32
|
+
+ [Example](#example)
|
|
29
33
|
- [Use](#use)
|
|
30
34
|
* [JS](#js)
|
|
31
35
|
* [HTML](#html)
|
|
32
36
|
* [pre-built](#pre-built)
|
|
37
|
+
+ [copy](#copy)
|
|
38
|
+
+ [HTML](#html-1)
|
|
33
39
|
- [CSS](#css)
|
|
34
40
|
* [Import CSS](#import-css)
|
|
35
41
|
- [Notes](#notes)
|
|
@@ -58,6 +64,63 @@ import { PasswordInput } from '@substrate-system/password-input'
|
|
|
58
64
|
```js
|
|
59
65
|
require('@substrate-system/password-input')
|
|
60
66
|
```
|
|
67
|
+
|
|
68
|
+
### Attributes
|
|
69
|
+
|
|
70
|
+
You can pass attributes on `<password-input>`, and the component maps them to
|
|
71
|
+
the inner `<input>` as described below. Do not pass the `type` attribute.
|
|
72
|
+
That is controlled by the component.
|
|
73
|
+
|
|
74
|
+
| Attribute | Should pass? | Behavior |
|
|
75
|
+
| --- | --- | --- |
|
|
76
|
+
| `label` | Optional, recommended | Renders visible label text above the input. |
|
|
77
|
+
| `visible` | Optional | If present, initial state is visible text (`type="text"`). If absent, initial state is hidden (`type="password"`). |
|
|
78
|
+
| `id` | Recommended when used with external labels/help text | Moved to the inner `<input id="...">` and removed from `<password-input>`. |
|
|
79
|
+
| `aria-*` | Recommended for accessibility | Any supported ARIA attribute passed on `<password-input>` is moved to the inner `<input>` and removed from `<password-input>`. |
|
|
80
|
+
| Standard input attributes (`name`, `placeholder`, `value`, `autocomplete`, `required`, `disabled`, `readonly`, `minlength`, `maxlength`, `pattern`, etc.) | Optional as needed | Forwarded to the inner `<input>`. |
|
|
81
|
+
|
|
82
|
+
#### Supported `aria-*` attributes
|
|
83
|
+
|
|
84
|
+
`aria-activedescendant`, `aria-atomic`, `aria-autocomplete`,
|
|
85
|
+
`aria-braillelabel`, `aria-brailleroledescription`, `aria-busy`,
|
|
86
|
+
`aria-checked`, `aria-colcount`, `aria-colindex`, `aria-colindextext`,
|
|
87
|
+
`aria-colspan`, `aria-controls`, `aria-current`, `aria-describedby`,
|
|
88
|
+
`aria-description`, `aria-details`, `aria-disabled`, `aria-dropeffect`,
|
|
89
|
+
`aria-errormessage`, `aria-expanded`, `aria-flowto`, `aria-grabbed`,
|
|
90
|
+
`aria-haspopup`, `aria-hidden`, `aria-invalid`, `aria-keyshortcuts`,
|
|
91
|
+
`aria-label`, `aria-labelledby`, `aria-level`, `aria-live`, `aria-modal`,
|
|
92
|
+
`aria-multiline`, `aria-multiselectable`, `aria-orientation`, `aria-owns`,
|
|
93
|
+
`aria-placeholder`, `aria-posinset`, `aria-pressed`, `aria-readonly`,
|
|
94
|
+
`aria-relevant`, `aria-required`, `aria-roledescription`, `aria-rowcount`,
|
|
95
|
+
`aria-rowindex`, `aria-rowindextext`, `aria-rowspan`, `aria-selected`,
|
|
96
|
+
`aria-setsize`, `aria-sort`, `aria-valuemax`, `aria-valuemin`,
|
|
97
|
+
`aria-valuenow`, `aria-valuetext`
|
|
98
|
+
|
|
99
|
+
#### Usage Notes
|
|
100
|
+
|
|
101
|
+
- Do **not** pass `type`. The component controls `type` internally
|
|
102
|
+
(`password` or `text`) based on the visibility toggle.
|
|
103
|
+
- If an ARIA attribute changes later (`setAttribute('aria-label', '...')` on
|
|
104
|
+
`<password-input>`), the inner `<input>` is updated through
|
|
105
|
+
`attributeChangedCallback`.
|
|
106
|
+
|
|
107
|
+
#### Example
|
|
108
|
+
|
|
109
|
+
```html
|
|
110
|
+
<password-input
|
|
111
|
+
id="account-password"
|
|
112
|
+
label="New Password"
|
|
113
|
+
name="password"
|
|
114
|
+
placeholder="At least 12 characters"
|
|
115
|
+
autocomplete="new-password"
|
|
116
|
+
required
|
|
117
|
+
minlength="12"
|
|
118
|
+
aria-describedby="password-help">
|
|
119
|
+
</password-input>
|
|
120
|
+
<p id="password-help">Use a strong, unique password.</p>
|
|
121
|
+
```
|
|
122
|
+
|
|
123
|
+
|
|
61
124
|
## Use
|
|
62
125
|
|
|
63
126
|
This calls the global function `customElements.define`. Just import, then use
|
|
@@ -134,4 +197,3 @@ Implementation notes.
|
|
|
134
197
|
|
|
135
198
|
Without this guard, the second callback would treat the host removal as a
|
|
136
199
|
real “delete” request and clear the input attribute you just transferred.
|
|
137
|
-
|
package/dist/index.cjs
CHANGED
|
@@ -22,79 +22,32 @@ __export(index_exports, {
|
|
|
22
22
|
PasswordInput: () => PasswordInput
|
|
23
23
|
});
|
|
24
24
|
module.exports = __toCommonJS(index_exports);
|
|
25
|
+
var import_web_component = require("@substrate-system/web-component");
|
|
25
26
|
var import_util = require("@substrate-system/web-component/util");
|
|
26
27
|
var import_eye_slash = require("@substrate-system/icons/eye-slash");
|
|
27
28
|
var import_eye_regular = require("@substrate-system/icons/eye-regular");
|
|
29
|
+
var import_util2 = require("./util");
|
|
28
30
|
(0, import_eye_slash.define)();
|
|
29
31
|
(0, import_eye_regular.define)();
|
|
30
|
-
class PasswordInput extends
|
|
32
|
+
class PasswordInput extends import_web_component.WebComponent.create("password-input") {
|
|
31
33
|
static {
|
|
32
34
|
__name(this, "PasswordInput");
|
|
33
35
|
}
|
|
34
36
|
static TAG = "password-input";
|
|
35
|
-
static
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
"aria-autocomplete",
|
|
39
|
-
"aria-braillelabel",
|
|
40
|
-
"aria-brailleroledescription",
|
|
41
|
-
"aria-busy",
|
|
42
|
-
"aria-checked",
|
|
43
|
-
"aria-colcount",
|
|
44
|
-
"aria-colindex",
|
|
45
|
-
"aria-colindextext",
|
|
46
|
-
"aria-colspan",
|
|
47
|
-
"aria-controls",
|
|
48
|
-
"aria-current",
|
|
49
|
-
"aria-describedby",
|
|
50
|
-
"aria-description",
|
|
51
|
-
"aria-details",
|
|
52
|
-
"aria-disabled",
|
|
53
|
-
"aria-dropeffect",
|
|
54
|
-
"aria-errormessage",
|
|
55
|
-
"aria-expanded",
|
|
56
|
-
"aria-flowto",
|
|
57
|
-
"aria-grabbed",
|
|
58
|
-
"aria-haspopup",
|
|
59
|
-
"aria-hidden",
|
|
60
|
-
"aria-invalid",
|
|
61
|
-
"aria-keyshortcuts",
|
|
62
|
-
"aria-label",
|
|
63
|
-
"aria-labelledby",
|
|
64
|
-
"aria-level",
|
|
65
|
-
"aria-live",
|
|
66
|
-
"aria-modal",
|
|
67
|
-
"aria-multiline",
|
|
68
|
-
"aria-multiselectable",
|
|
69
|
-
"aria-orientation",
|
|
70
|
-
"aria-owns",
|
|
71
|
-
"aria-placeholder",
|
|
72
|
-
"aria-posinset",
|
|
73
|
-
"aria-pressed",
|
|
74
|
-
"aria-readonly",
|
|
75
|
-
"aria-relevant",
|
|
76
|
-
"aria-required",
|
|
77
|
-
"aria-roledescription",
|
|
78
|
-
"aria-rowcount",
|
|
79
|
-
"aria-rowindex",
|
|
80
|
-
"aria-rowindextext",
|
|
81
|
-
"aria-rowspan",
|
|
82
|
-
"aria-selected",
|
|
83
|
-
"aria-setsize",
|
|
84
|
-
"aria-sort",
|
|
85
|
-
"aria-valuemax",
|
|
86
|
-
"aria-valuemin",
|
|
87
|
-
"aria-valuenow",
|
|
88
|
-
"aria-valuetext"
|
|
89
|
-
];
|
|
90
|
-
static observedAttributes = ["visible", "label"].concat(PasswordInput.ARIA_ATTRIBUTES);
|
|
37
|
+
static INPUT_ATTRIBUTES = import_util2.INPUT_ATTRIBUTES;
|
|
38
|
+
static ARIA_ATTRIBUTES = import_util2.ARIA_ATTRIBUTES;
|
|
39
|
+
static observedAttributes = ["visible", "label", "id"].concat(PasswordInput.INPUT_ATTRIBUTES).concat(PasswordInput.ARIA_ATTRIBUTES);
|
|
91
40
|
inputId = null;
|
|
92
41
|
inputAriaAttributes = {};
|
|
93
42
|
ignoredAriaCallbackNames = /* @__PURE__ */ new Set();
|
|
43
|
+
ignoredIdCallback = false;
|
|
44
|
+
generatedInputId = `password-input-${Math.random().toString(36).slice(2, 10)}`;
|
|
94
45
|
// empty string = is visible
|
|
95
46
|
// null = not visible
|
|
96
|
-
handleChange_visible(
|
|
47
|
+
handleChange_visible(oldValue, newValue) {
|
|
97
48
|
this.reRender();
|
|
49
|
+
if (oldValue === newValue) return;
|
|
50
|
+
this.emit(newValue !== null ? "show" : "hide");
|
|
98
51
|
}
|
|
99
52
|
handleChange_label(_oldValue, _newValue) {
|
|
100
53
|
this.render();
|
|
@@ -117,6 +70,32 @@ class PasswordInput extends HTMLElement {
|
|
|
117
70
|
this.removeAttribute(name);
|
|
118
71
|
}
|
|
119
72
|
}
|
|
73
|
+
handleChange_id(_oldValue, newValue) {
|
|
74
|
+
if (this.ignoredIdCallback) {
|
|
75
|
+
this.ignoredIdCallback = false;
|
|
76
|
+
return;
|
|
77
|
+
}
|
|
78
|
+
if (newValue === null) {
|
|
79
|
+
this.inputId = null;
|
|
80
|
+
this.querySelector("input")?.removeAttribute("id");
|
|
81
|
+
return;
|
|
82
|
+
}
|
|
83
|
+
this.inputId = newValue;
|
|
84
|
+
this.querySelector("input")?.setAttribute("id", newValue);
|
|
85
|
+
if (this.hasAttribute("id")) {
|
|
86
|
+
this.ignoredIdCallback = true;
|
|
87
|
+
this.removeAttribute("id");
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
handleChange_inputAttribute(name, newValue) {
|
|
91
|
+
const input = this.querySelector("input");
|
|
92
|
+
if (!input) return;
|
|
93
|
+
if (newValue === null) {
|
|
94
|
+
input.removeAttribute(name);
|
|
95
|
+
return;
|
|
96
|
+
}
|
|
97
|
+
input.setAttribute(name, newValue);
|
|
98
|
+
}
|
|
120
99
|
/**
|
|
121
100
|
* Listen for change in visiblity.
|
|
122
101
|
*
|
|
@@ -125,10 +104,18 @@ class PasswordInput extends HTMLElement {
|
|
|
125
104
|
* @param {string} newValue The new attribute value
|
|
126
105
|
*/
|
|
127
106
|
async attributeChangedCallback(name, oldValue, newValue) {
|
|
107
|
+
if (name === "id") {
|
|
108
|
+
this.handleChange_id(oldValue, newValue);
|
|
109
|
+
return;
|
|
110
|
+
}
|
|
128
111
|
if (name.startsWith("aria-")) {
|
|
129
112
|
this.handleChange_aria(name, oldValue, newValue);
|
|
130
113
|
return;
|
|
131
114
|
}
|
|
115
|
+
if (PasswordInput.INPUT_ATTRIBUTES.includes(name)) {
|
|
116
|
+
this.handleChange_inputAttribute(name, newValue);
|
|
117
|
+
return;
|
|
118
|
+
}
|
|
132
119
|
if (this[`handleChange_${name}`]) {
|
|
133
120
|
this[`handleChange_${name}`](oldValue, newValue);
|
|
134
121
|
}
|
|
@@ -170,14 +157,23 @@ class PasswordInput extends HTMLElement {
|
|
|
170
157
|
getButtonContent() {
|
|
171
158
|
return this.isVisible ? '<eye-regular></eye-regular><span class="visually-hidden">Hide</span>' : '<eye-slash></eye-slash><span class="visually-hidden">Show</span>';
|
|
172
159
|
}
|
|
160
|
+
getInputIdForRender() {
|
|
161
|
+
return this.inputId || this.generatedInputId;
|
|
162
|
+
}
|
|
173
163
|
/**
|
|
174
164
|
* Change the visibility button state.
|
|
175
165
|
*/
|
|
176
166
|
reRender() {
|
|
177
167
|
const btn = this.querySelector(".pw-visibility");
|
|
168
|
+
const input = this.querySelector("input");
|
|
169
|
+
if (!btn || !input) return;
|
|
170
|
+
const inputId = this.getInputIdForRender();
|
|
178
171
|
btn.innerHTML = this.getButtonContent();
|
|
172
|
+
btn.setAttribute("aria-pressed", this.isVisible ? "true" : "false");
|
|
173
|
+
btn.setAttribute("aria-controls", inputId);
|
|
179
174
|
this.setAttribute("type", this.getType());
|
|
180
|
-
|
|
175
|
+
input.setAttribute("type", this.getType());
|
|
176
|
+
input.setAttribute("id", inputId);
|
|
181
177
|
}
|
|
182
178
|
render() {
|
|
183
179
|
const name = this.getAttribute("name");
|
|
@@ -196,39 +192,51 @@ class PasswordInput extends HTMLElement {
|
|
|
196
192
|
(attr) => attr.name + (attr.value === "" ? "" : `="${attr.value}"`)
|
|
197
193
|
).join(" ");
|
|
198
194
|
const classes = (this.getAttribute("class") ?? "").split(" ").concat(["password", "input", name || ""]).filter(Boolean).join(" ");
|
|
199
|
-
const
|
|
195
|
+
const inputId = this.getInputIdForRender();
|
|
196
|
+
const renderedIdAttribute = `id="${inputId}"`;
|
|
200
197
|
const ariaAttributes = Object.entries(this.inputAriaAttributes).map(([attrName, attrValue]) => {
|
|
201
198
|
return attrName + (attrValue === "" ? "" : `="${attrValue}"`);
|
|
202
199
|
}).join(" ");
|
|
203
200
|
this.innerHTML = label ? `
|
|
204
|
-
<
|
|
205
|
-
<
|
|
201
|
+
<div class="${classes}">
|
|
202
|
+
<label class="label-content" for="${inputId}">${label}</label>
|
|
206
203
|
<span class="input">
|
|
207
204
|
<input
|
|
208
|
-
${
|
|
205
|
+
${renderedIdAttribute}
|
|
209
206
|
${ariaAttributes}
|
|
210
207
|
${attrs}
|
|
211
208
|
type=${this.getType()} />
|
|
212
|
-
<button
|
|
209
|
+
<button
|
|
210
|
+
type="button"
|
|
211
|
+
class="pw-visibility"
|
|
212
|
+
aria-pressed="${this.isVisible ? "true" : "false"}"
|
|
213
|
+
aria-controls="${inputId}">
|
|
213
214
|
${this.getButtonContent()}
|
|
214
215
|
</button>
|
|
215
216
|
</span>
|
|
216
|
-
</
|
|
217
|
+
</div>
|
|
217
218
|
` : `
|
|
218
219
|
<div class="${classes}">
|
|
219
220
|
<span class="input">
|
|
220
221
|
<input
|
|
221
|
-
${
|
|
222
|
+
${renderedIdAttribute}
|
|
222
223
|
${ariaAttributes}
|
|
223
224
|
${attrs}
|
|
224
225
|
type=${this.getType()} />
|
|
225
|
-
<button
|
|
226
|
+
<button
|
|
227
|
+
type="button"
|
|
228
|
+
class="pw-visibility"
|
|
229
|
+
aria-pressed="${this.isVisible ? "true" : "false"}"
|
|
230
|
+
aria-controls="${inputId}">
|
|
226
231
|
${this.getButtonContent()}
|
|
227
232
|
</button>
|
|
228
233
|
</span>
|
|
229
234
|
</div>
|
|
230
235
|
`;
|
|
231
|
-
this.
|
|
236
|
+
if (this.hasAttribute("id")) {
|
|
237
|
+
this.ignoredIdCallback = true;
|
|
238
|
+
this.removeAttribute("id");
|
|
239
|
+
}
|
|
232
240
|
for (const attr of hostAriaAttributes) {
|
|
233
241
|
this.ignoredAriaCallbackNames.add(attr.name);
|
|
234
242
|
this.removeAttribute(attr.name);
|
package/dist/index.cjs.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/index.ts"],
|
|
4
|
-
"sourcesContent": ["import { define } from '@substrate-system/web-component/util'\nimport { define as slashDefine } from '@substrate-system/icons/eye-slash'\nimport { define as regularDefine } from '@substrate-system/icons/eye-regular'\n// import Debug from '@substrate-system/debug'\n// const debug = Debug('password-input')\n\nslashDefine()\nregularDefine()\n\n// for docuement.querySelector\ndeclare global {\n interface HTMLElementTagNameMap {\n 'password-input':PasswordInput\n }\n}\n\
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAuB;AACvB,uBAAsC;AACtC,yBAAwC;AAAA,
|
|
6
|
-
"names": ["slashDefine", "regularDefine"]
|
|
4
|
+
"sourcesContent": ["import { WebComponent } from '@substrate-system/web-component'\nimport { define } from '@substrate-system/web-component/util'\nimport { define as slashDefine } from '@substrate-system/icons/eye-slash'\nimport { define as regularDefine } from '@substrate-system/icons/eye-regular'\nimport { ARIA_ATTRIBUTES, INPUT_ATTRIBUTES } from './util'\n// import Debug from '@substrate-system/debug'\n// const debug = Debug('password-input')\n\nslashDefine()\nregularDefine()\n\n// for docuement.querySelector\ndeclare global {\n interface HTMLElementTagNameMap {\n 'password-input':PasswordInput\n }\n}\n\n// export class PasswordInput extends HTMLElement {\nexport class PasswordInput extends WebComponent.create('password-input') {\n static TAG = 'password-input'\n static INPUT_ATTRIBUTES = INPUT_ATTRIBUTES\n static ARIA_ATTRIBUTES = ARIA_ATTRIBUTES\n\n static observedAttributes = (['visible', 'label', 'id'])\n .concat(PasswordInput.INPUT_ATTRIBUTES)\n .concat(PasswordInput.ARIA_ATTRIBUTES)\n\n inputId:string|null = null\n inputAriaAttributes:Record<string, string> = {}\n ignoredAriaCallbackNames:Set<string> = new Set()\n ignoredIdCallback = false\n generatedInputId = `password-input-${Math.random().toString(36).slice(2, 10)}`\n\n // empty string = is visible\n // null = not visible\n handleChange_visible (oldValue:string|null, newValue:string|null) {\n this.reRender()\n if (oldValue === newValue) return\n this.emit(newValue !== null ? 'show' : 'hide')\n }\n\n handleChange_label (_oldValue, _newValue) {\n this.render()\n this._listen()\n }\n\n handleChange_aria (\n name:string,\n _oldValue:string|null,\n newValue:string|null\n ) {\n if (this.ignoredAriaCallbackNames.has(name)) {\n this.ignoredAriaCallbackNames.delete(name)\n return\n }\n\n if (newValue === null) {\n delete this.inputAriaAttributes[name]\n this.querySelector('input')?.removeAttribute(name)\n return\n }\n\n this.inputAriaAttributes[name] = newValue\n this.querySelector('input')?.setAttribute(name, newValue)\n\n if (this.hasAttribute(name)) {\n this.ignoredAriaCallbackNames.add(name)\n this.removeAttribute(name)\n }\n }\n\n handleChange_id (_oldValue:string|null, newValue:string|null) {\n if (this.ignoredIdCallback) {\n this.ignoredIdCallback = false\n return\n }\n\n if (newValue === null) {\n this.inputId = null\n this.querySelector('input')?.removeAttribute('id')\n return\n }\n\n this.inputId = newValue\n this.querySelector('input')?.setAttribute('id', newValue)\n\n if (this.hasAttribute('id')) {\n this.ignoredIdCallback = true\n this.removeAttribute('id')\n }\n }\n\n handleChange_inputAttribute (name:string, newValue:string|null) {\n const input = this.querySelector('input')\n if (!input) return\n\n if (newValue === null) {\n input.removeAttribute(name)\n return\n }\n\n input.setAttribute(name, newValue)\n }\n\n /**\n * Listen for change in visiblity.\n *\n * @param {string} name The attribute name\n * @param {string} oldValue The old attribute value\n * @param {string} newValue The new attribute value\n */\n async attributeChangedCallback (\n name:string,\n oldValue:string,\n newValue:string\n ) {\n if (name === 'id') {\n this.handleChange_id(oldValue, newValue)\n return\n }\n\n if (name.startsWith('aria-')) {\n this.handleChange_aria(name, oldValue, newValue)\n return\n }\n\n if (PasswordInput.INPUT_ATTRIBUTES.includes(name)) {\n this.handleChange_inputAttribute(name, newValue)\n return\n }\n\n if (this[`handleChange_${name}`]) {\n this[`handleChange_${name}`](oldValue, newValue)\n }\n }\n\n connectedCallback () {\n this.render()\n this._listen()\n }\n\n _listen () {\n const btn = this.querySelector('button')!\n btn.addEventListener('click', (ev) => {\n ev.preventDefault()\n this.isVisible = !this.isVisible\n })\n }\n\n getType ():'text'|'password' {\n return this.isVisible ? 'text' : 'password'\n }\n\n set isVisible (value:boolean) {\n if (value) {\n this.setAttribute('visible', '')\n } else {\n this.removeAttribute('visible')\n }\n }\n\n get isVisible ():boolean {\n return this.hasAttribute('visible')\n }\n\n set label (value:string|null) {\n if (value === null) {\n this.removeAttribute('label')\n return\n }\n\n this.setAttribute('label', value)\n }\n\n get label ():string|null {\n return this.getAttribute('label')\n }\n\n getButtonContent () {\n return (this.isVisible ?\n '<eye-regular></eye-regular><span class=\"visually-hidden\">Hide</span>' :\n '<eye-slash></eye-slash><span class=\"visually-hidden\">Show</span>')\n }\n\n getInputIdForRender () {\n return this.inputId || this.generatedInputId\n }\n\n /**\n * Change the visibility button state.\n */\n reRender () {\n const btn = this.querySelector('.pw-visibility')\n const input = this.querySelector('input')\n if (!btn || !input) return\n const inputId = this.getInputIdForRender()\n btn.innerHTML = this.getButtonContent()\n btn.setAttribute('aria-pressed', this.isVisible ? 'true' : 'false')\n btn.setAttribute('aria-controls', inputId)\n this.setAttribute('type', this.getType())\n input.setAttribute('type', this.getType())\n input.setAttribute('id', inputId)\n }\n\n render () {\n const name = this.getAttribute('name')\n const label = this.getAttribute('label')\n const hostId = this.getAttribute('id')\n const hostAriaAttributes = Array.from(this.attributes)\n .filter(attr => attr.name.startsWith('aria-'))\n\n if (hostId !== null) {\n this.inputId = hostId\n }\n\n for (const attr of hostAriaAttributes) {\n this.inputAriaAttributes[attr.name] = attr.value\n }\n\n // create string from attributes\n const attrs = Array.from(this.attributes)\n .filter(attr =>\n attr.name !== 'label' &&\n attr.name !== 'id' &&\n !attr.name.startsWith('aria-')\n )\n .map(attr => attr.name + (attr.value === '' ?\n '' :\n ('=' + `\"${attr.value}\"`))\n )\n .join(' ')\n\n const classes = (this.getAttribute('class') ?? '').split(' ')\n .concat(['password', 'input', name || ''])\n .filter(Boolean)\n .join(' ')\n\n const inputId = this.getInputIdForRender()\n const renderedIdAttribute = `id=\"${inputId}\"`\n const ariaAttributes = Object.entries(this.inputAriaAttributes)\n .map(([attrName, attrValue]) => {\n return (attrName + (attrValue === '' ?\n '' :\n ('=' + `\"${attrValue}\"`)))\n })\n .join(' ')\n\n this.innerHTML = label ? `\n <div class=\"${classes}\">\n <label class=\"label-content\" for=\"${inputId}\">${label}</label>\n <span class=\"input\">\n <input\n ${renderedIdAttribute}\n ${ariaAttributes}\n ${attrs}\n type=${this.getType()} />\n <button\n type=\"button\"\n class=\"pw-visibility\"\n aria-pressed=\"${this.isVisible ? 'true' : 'false'}\"\n aria-controls=\"${inputId}\">\n ${this.getButtonContent()}\n </button>\n </span>\n </div>\n ` : `\n <div class=\"${classes}\">\n <span class=\"input\">\n <input\n ${renderedIdAttribute}\n ${ariaAttributes}\n ${attrs}\n type=${this.getType()} />\n <button\n type=\"button\"\n class=\"pw-visibility\"\n aria-pressed=\"${this.isVisible ? 'true' : 'false'}\"\n aria-controls=\"${inputId}\">\n ${this.getButtonContent()}\n </button>\n </span>\n </div>\n `\n\n if (this.hasAttribute('id')) {\n this.ignoredIdCallback = true\n this.removeAttribute('id')\n }\n for (const attr of hostAriaAttributes) {\n this.ignoredAriaCallbackNames.add(attr.name)\n this.removeAttribute(attr.name)\n }\n }\n}\n\ndefine(PasswordInput.TAG, PasswordInput)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["import_util", "slashDefine", "regularDefine"]
|
|
7
7
|
}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,18 +1,30 @@
|
|
|
1
|
+
import { WebComponent } from '@substrate-system/web-component';
|
|
1
2
|
declare global {
|
|
2
3
|
interface HTMLElementTagNameMap {
|
|
3
4
|
'password-input': PasswordInput;
|
|
4
5
|
}
|
|
5
6
|
}
|
|
6
|
-
|
|
7
|
+
declare const PasswordInput_base: typeof WebComponent & {
|
|
8
|
+
new (...args: any[]): WebComponent;
|
|
9
|
+
TAG: string;
|
|
10
|
+
define: typeof WebComponent.define;
|
|
11
|
+
event: typeof WebComponent.event;
|
|
12
|
+
};
|
|
13
|
+
export declare class PasswordInput extends PasswordInput_base {
|
|
7
14
|
static TAG: string;
|
|
15
|
+
static INPUT_ATTRIBUTES: string[];
|
|
8
16
|
static ARIA_ATTRIBUTES: string[];
|
|
9
17
|
static observedAttributes: string[];
|
|
10
18
|
inputId: string | null;
|
|
11
19
|
inputAriaAttributes: Record<string, string>;
|
|
12
20
|
ignoredAriaCallbackNames: Set<string>;
|
|
13
|
-
|
|
21
|
+
ignoredIdCallback: boolean;
|
|
22
|
+
generatedInputId: string;
|
|
23
|
+
handleChange_visible(oldValue: string | null, newValue: string | null): void;
|
|
14
24
|
handleChange_label(_oldValue: any, _newValue: any): void;
|
|
15
25
|
handleChange_aria(name: string, _oldValue: string | null, newValue: string | null): void;
|
|
26
|
+
handleChange_id(_oldValue: string | null, newValue: string | null): void;
|
|
27
|
+
handleChange_inputAttribute(name: string, newValue: string | null): void;
|
|
16
28
|
/**
|
|
17
29
|
* Listen for change in visiblity.
|
|
18
30
|
*
|
|
@@ -29,10 +41,12 @@ export declare class PasswordInput extends HTMLElement {
|
|
|
29
41
|
set label(value: string | null);
|
|
30
42
|
get label(): string | null;
|
|
31
43
|
getButtonContent(): "<eye-regular></eye-regular><span class=\"visually-hidden\">Hide</span>" | "<eye-slash></eye-slash><span class=\"visually-hidden\">Show</span>";
|
|
44
|
+
getInputIdForRender(): string;
|
|
32
45
|
/**
|
|
33
46
|
* Change the visibility button state.
|
|
34
47
|
*/
|
|
35
48
|
reRender(): void;
|
|
36
49
|
render(): void;
|
|
37
50
|
}
|
|
51
|
+
export {};
|
|
38
52
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAA;AAY9D,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,gBAAgB,EAAC,aAAa,CAAA;KACjC;CACJ;;;;;;;AAGD,qBAAa,aAAc,SAAQ,kBAAqC;IACpE,MAAM,CAAC,GAAG,SAAmB;IAC7B,MAAM,CAAC,gBAAgB,WAAmB;IAC1C,MAAM,CAAC,eAAe,WAAkB;IAExC,MAAM,CAAC,kBAAkB,WAEiB;IAE1C,OAAO,EAAC,MAAM,GAAC,IAAI,CAAO;IAC1B,mBAAmB,EAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAK;IAC/C,wBAAwB,EAAC,GAAG,CAAC,MAAM,CAAC,CAAY;IAChD,iBAAiB,UAAQ;IACzB,gBAAgB,SAA8D;IAI9E,oBAAoB,CAAE,QAAQ,EAAC,MAAM,GAAC,IAAI,EAAE,QAAQ,EAAC,MAAM,GAAC,IAAI;IAMhE,kBAAkB,CAAE,SAAS,KAAA,EAAE,SAAS,KAAA;IAKxC,iBAAiB,CACb,IAAI,EAAC,MAAM,EACX,SAAS,EAAC,MAAM,GAAC,IAAI,EACrB,QAAQ,EAAC,MAAM,GAAC,IAAI;IAsBxB,eAAe,CAAE,SAAS,EAAC,MAAM,GAAC,IAAI,EAAE,QAAQ,EAAC,MAAM,GAAC,IAAI;IAqB5D,2BAA2B,CAAE,IAAI,EAAC,MAAM,EAAE,QAAQ,EAAC,MAAM,GAAC,IAAI;IAY9D;;;;;;OAMG;IACG,wBAAwB,CAC1B,IAAI,EAAC,MAAM,EACX,QAAQ,EAAC,MAAM,EACf,QAAQ,EAAC,MAAM;IAsBnB,iBAAiB;IAKjB,OAAO;IAQP,OAAO,IAAI,MAAM,GAAC,UAAU;IAI5B,IAAI,SAAS,CAAE,KAAK,EAAC,OAAO,EAM3B;IAED,IAAI,SAAS,IAAI,OAAO,CAEvB;IAED,IAAI,KAAK,CAAE,KAAK,EAAC,MAAM,GAAC,IAAI,EAO3B;IAED,IAAI,KAAK,IAAI,MAAM,GAAC,IAAI,CAEvB;IAED,gBAAgB;IAMhB,mBAAmB;IAInB;;OAEG;IACH,QAAQ;IAaR,MAAM;CAyFT"}
|