@substrate-system/password-input 0.0.2 → 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/dist/index.cjs +36 -97
- package/dist/index.cjs.map +3 -3
- package/dist/index.d.ts +12 -2
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +36 -97
- 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 +1 -1
package/dist/index.cjs
CHANGED
|
@@ -22,111 +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 INPUT_ATTRIBUTES =
|
|
36
|
-
|
|
37
|
-
"alt",
|
|
38
|
-
"autocomplete",
|
|
39
|
-
"autocapitalize",
|
|
40
|
-
"autocorrect",
|
|
41
|
-
"autofocus",
|
|
42
|
-
"capture",
|
|
43
|
-
"dirname",
|
|
44
|
-
"disabled",
|
|
45
|
-
"enterkeyhint",
|
|
46
|
-
"form",
|
|
47
|
-
"inputmode",
|
|
48
|
-
"list",
|
|
49
|
-
"max",
|
|
50
|
-
"maxlength",
|
|
51
|
-
"min",
|
|
52
|
-
"minlength",
|
|
53
|
-
"multiple",
|
|
54
|
-
"name",
|
|
55
|
-
"pattern",
|
|
56
|
-
"placeholder",
|
|
57
|
-
"readonly",
|
|
58
|
-
"required",
|
|
59
|
-
"size",
|
|
60
|
-
"spellcheck",
|
|
61
|
-
"step",
|
|
62
|
-
"tabindex",
|
|
63
|
-
"title",
|
|
64
|
-
"value"
|
|
65
|
-
];
|
|
66
|
-
static ARIA_ATTRIBUTES = [
|
|
67
|
-
"aria-activedescendant",
|
|
68
|
-
"aria-atomic",
|
|
69
|
-
"aria-autocomplete",
|
|
70
|
-
"aria-braillelabel",
|
|
71
|
-
"aria-brailleroledescription",
|
|
72
|
-
"aria-busy",
|
|
73
|
-
"aria-checked",
|
|
74
|
-
"aria-colcount",
|
|
75
|
-
"aria-colindex",
|
|
76
|
-
"aria-colindextext",
|
|
77
|
-
"aria-colspan",
|
|
78
|
-
"aria-controls",
|
|
79
|
-
"aria-current",
|
|
80
|
-
"aria-describedby",
|
|
81
|
-
"aria-description",
|
|
82
|
-
"aria-details",
|
|
83
|
-
"aria-disabled",
|
|
84
|
-
"aria-dropeffect",
|
|
85
|
-
"aria-errormessage",
|
|
86
|
-
"aria-expanded",
|
|
87
|
-
"aria-flowto",
|
|
88
|
-
"aria-grabbed",
|
|
89
|
-
"aria-haspopup",
|
|
90
|
-
"aria-hidden",
|
|
91
|
-
"aria-invalid",
|
|
92
|
-
"aria-keyshortcuts",
|
|
93
|
-
"aria-label",
|
|
94
|
-
"aria-labelledby",
|
|
95
|
-
"aria-level",
|
|
96
|
-
"aria-live",
|
|
97
|
-
"aria-modal",
|
|
98
|
-
"aria-multiline",
|
|
99
|
-
"aria-multiselectable",
|
|
100
|
-
"aria-orientation",
|
|
101
|
-
"aria-owns",
|
|
102
|
-
"aria-placeholder",
|
|
103
|
-
"aria-posinset",
|
|
104
|
-
"aria-pressed",
|
|
105
|
-
"aria-readonly",
|
|
106
|
-
"aria-relevant",
|
|
107
|
-
"aria-required",
|
|
108
|
-
"aria-roledescription",
|
|
109
|
-
"aria-rowcount",
|
|
110
|
-
"aria-rowindex",
|
|
111
|
-
"aria-rowindextext",
|
|
112
|
-
"aria-rowspan",
|
|
113
|
-
"aria-selected",
|
|
114
|
-
"aria-setsize",
|
|
115
|
-
"aria-sort",
|
|
116
|
-
"aria-valuemax",
|
|
117
|
-
"aria-valuemin",
|
|
118
|
-
"aria-valuenow",
|
|
119
|
-
"aria-valuetext"
|
|
120
|
-
];
|
|
37
|
+
static INPUT_ATTRIBUTES = import_util2.INPUT_ATTRIBUTES;
|
|
38
|
+
static ARIA_ATTRIBUTES = import_util2.ARIA_ATTRIBUTES;
|
|
121
39
|
static observedAttributes = ["visible", "label", "id"].concat(PasswordInput.INPUT_ATTRIBUTES).concat(PasswordInput.ARIA_ATTRIBUTES);
|
|
122
40
|
inputId = null;
|
|
123
41
|
inputAriaAttributes = {};
|
|
124
42
|
ignoredAriaCallbackNames = /* @__PURE__ */ new Set();
|
|
125
43
|
ignoredIdCallback = false;
|
|
44
|
+
generatedInputId = `password-input-${Math.random().toString(36).slice(2, 10)}`;
|
|
126
45
|
// empty string = is visible
|
|
127
46
|
// null = not visible
|
|
128
|
-
handleChange_visible(
|
|
47
|
+
handleChange_visible(oldValue, newValue) {
|
|
129
48
|
this.reRender();
|
|
49
|
+
if (oldValue === newValue) return;
|
|
50
|
+
this.emit(newValue !== null ? "show" : "hide");
|
|
130
51
|
}
|
|
131
52
|
handleChange_label(_oldValue, _newValue) {
|
|
132
53
|
this.render();
|
|
@@ -236,14 +157,23 @@ class PasswordInput extends HTMLElement {
|
|
|
236
157
|
getButtonContent() {
|
|
237
158
|
return this.isVisible ? '<eye-regular></eye-regular><span class="visually-hidden">Hide</span>' : '<eye-slash></eye-slash><span class="visually-hidden">Show</span>';
|
|
238
159
|
}
|
|
160
|
+
getInputIdForRender() {
|
|
161
|
+
return this.inputId || this.generatedInputId;
|
|
162
|
+
}
|
|
239
163
|
/**
|
|
240
164
|
* Change the visibility button state.
|
|
241
165
|
*/
|
|
242
166
|
reRender() {
|
|
243
167
|
const btn = this.querySelector(".pw-visibility");
|
|
168
|
+
const input = this.querySelector("input");
|
|
169
|
+
if (!btn || !input) return;
|
|
170
|
+
const inputId = this.getInputIdForRender();
|
|
244
171
|
btn.innerHTML = this.getButtonContent();
|
|
172
|
+
btn.setAttribute("aria-pressed", this.isVisible ? "true" : "false");
|
|
173
|
+
btn.setAttribute("aria-controls", inputId);
|
|
245
174
|
this.setAttribute("type", this.getType());
|
|
246
|
-
|
|
175
|
+
input.setAttribute("type", this.getType());
|
|
176
|
+
input.setAttribute("id", inputId);
|
|
247
177
|
}
|
|
248
178
|
render() {
|
|
249
179
|
const name = this.getAttribute("name");
|
|
@@ -262,33 +192,42 @@ class PasswordInput extends HTMLElement {
|
|
|
262
192
|
(attr) => attr.name + (attr.value === "" ? "" : `="${attr.value}"`)
|
|
263
193
|
).join(" ");
|
|
264
194
|
const classes = (this.getAttribute("class") ?? "").split(" ").concat(["password", "input", name || ""]).filter(Boolean).join(" ");
|
|
265
|
-
const
|
|
195
|
+
const inputId = this.getInputIdForRender();
|
|
196
|
+
const renderedIdAttribute = `id="${inputId}"`;
|
|
266
197
|
const ariaAttributes = Object.entries(this.inputAriaAttributes).map(([attrName, attrValue]) => {
|
|
267
198
|
return attrName + (attrValue === "" ? "" : `="${attrValue}"`);
|
|
268
199
|
}).join(" ");
|
|
269
200
|
this.innerHTML = label ? `
|
|
270
|
-
<
|
|
271
|
-
<
|
|
201
|
+
<div class="${classes}">
|
|
202
|
+
<label class="label-content" for="${inputId}">${label}</label>
|
|
272
203
|
<span class="input">
|
|
273
204
|
<input
|
|
274
|
-
${
|
|
205
|
+
${renderedIdAttribute}
|
|
275
206
|
${ariaAttributes}
|
|
276
207
|
${attrs}
|
|
277
208
|
type=${this.getType()} />
|
|
278
|
-
<button
|
|
209
|
+
<button
|
|
210
|
+
type="button"
|
|
211
|
+
class="pw-visibility"
|
|
212
|
+
aria-pressed="${this.isVisible ? "true" : "false"}"
|
|
213
|
+
aria-controls="${inputId}">
|
|
279
214
|
${this.getButtonContent()}
|
|
280
215
|
</button>
|
|
281
216
|
</span>
|
|
282
|
-
</
|
|
217
|
+
</div>
|
|
283
218
|
` : `
|
|
284
219
|
<div class="${classes}">
|
|
285
220
|
<span class="input">
|
|
286
221
|
<input
|
|
287
|
-
${
|
|
222
|
+
${renderedIdAttribute}
|
|
288
223
|
${ariaAttributes}
|
|
289
224
|
${attrs}
|
|
290
225
|
type=${this.getType()} />
|
|
291
|
-
<button
|
|
226
|
+
<button
|
|
227
|
+
type="button"
|
|
228
|
+
class="pw-visibility"
|
|
229
|
+
aria-pressed="${this.isVisible ? "true" : "false"}"
|
|
230
|
+
aria-controls="${inputId}">
|
|
292
231
|
${this.getButtonContent()}
|
|
293
232
|
</button>
|
|
294
233
|
</span>
|
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\nexport class PasswordInput extends HTMLElement {\n static TAG = 'password-input'\n static INPUT_ATTRIBUTES = [\n 'accept',\n 'alt',\n 'autocomplete',\n 'autocapitalize',\n 'autocorrect',\n 'autofocus',\n 'capture',\n 'dirname',\n 'disabled',\n 'enterkeyhint',\n 'form',\n 'inputmode',\n 'list',\n 'max',\n 'maxlength',\n 'min',\n 'minlength',\n 'multiple',\n 'name',\n 'pattern',\n 'placeholder',\n 'readonly',\n 'required',\n 'size',\n 'spellcheck',\n 'step',\n 'tabindex',\n 'title',\n 'value'\n ]\n\n static ARIA_ATTRIBUTES = [\n 'aria-activedescendant',\n 'aria-atomic',\n 'aria-autocomplete',\n 'aria-braillelabel',\n 'aria-brailleroledescription',\n 'aria-busy',\n 'aria-checked',\n 'aria-colcount',\n 'aria-colindex',\n 'aria-colindextext',\n 'aria-colspan',\n 'aria-controls',\n 'aria-current',\n 'aria-describedby',\n 'aria-description',\n 'aria-details',\n 'aria-disabled',\n 'aria-dropeffect',\n 'aria-errormessage',\n 'aria-expanded',\n 'aria-flowto',\n 'aria-grabbed',\n 'aria-haspopup',\n 'aria-hidden',\n 'aria-invalid',\n 'aria-keyshortcuts',\n 'aria-label',\n 'aria-labelledby',\n 'aria-level',\n 'aria-live',\n 'aria-modal',\n 'aria-multiline',\n 'aria-multiselectable',\n 'aria-orientation',\n 'aria-owns',\n 'aria-placeholder',\n 'aria-posinset',\n 'aria-pressed',\n 'aria-readonly',\n 'aria-relevant',\n 'aria-required',\n 'aria-roledescription',\n 'aria-rowcount',\n 'aria-rowindex',\n 'aria-rowindextext',\n 'aria-rowspan',\n 'aria-selected',\n 'aria-setsize',\n 'aria-sort',\n 'aria-valuemax',\n 'aria-valuemin',\n 'aria-valuenow',\n 'aria-valuetext'\n ]\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\n // empty string = is visible\n // null = not visible\n handleChange_visible (_, _newValue) {\n this.reRender()\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 /**\n * Change the visibility button state.\n */\n reRender () {\n const btn = this.querySelector('.pw-visibility')\n btn!.innerHTML = this.getButtonContent()\n this.setAttribute('type', this.getType())\n this.querySelector('input')?.setAttribute('type', this.getType())\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 idAttribute = this.inputId ? `id=\"${this.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 <label class=\"${classes}\">\n <span class=\"label-content\">${label}</span>\n <span class=\"input\">\n <input\n ${idAttribute}\n ${ariaAttributes}\n ${attrs}\n type=${this.getType()} />\n <button class=\"pw-visibility\">\n ${this.getButtonContent()}\n </button>\n </span>\n </label>\n ` : `\n <div class=\"${classes}\">\n <span class=\"input\">\n <input\n ${idAttribute}\n ${ariaAttributes}\n ${attrs}\n type=${this.getType()} />\n <button class=\"pw-visibility\">\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": ";;;;;;;;;;;;;;;;;;;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,9 +1,16 @@
|
|
|
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;
|
|
8
15
|
static INPUT_ATTRIBUTES: string[];
|
|
9
16
|
static ARIA_ATTRIBUTES: string[];
|
|
@@ -12,7 +19,8 @@ export declare class PasswordInput extends HTMLElement {
|
|
|
12
19
|
inputAriaAttributes: Record<string, string>;
|
|
13
20
|
ignoredAriaCallbackNames: Set<string>;
|
|
14
21
|
ignoredIdCallback: boolean;
|
|
15
|
-
|
|
22
|
+
generatedInputId: string;
|
|
23
|
+
handleChange_visible(oldValue: string | null, newValue: string | null): void;
|
|
16
24
|
handleChange_label(_oldValue: any, _newValue: any): void;
|
|
17
25
|
handleChange_aria(name: string, _oldValue: string | null, newValue: string | null): void;
|
|
18
26
|
handleChange_id(_oldValue: string | null, newValue: string | null): void;
|
|
@@ -33,10 +41,12 @@ export declare class PasswordInput extends HTMLElement {
|
|
|
33
41
|
set label(value: string | null);
|
|
34
42
|
get label(): string | null;
|
|
35
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;
|
|
36
45
|
/**
|
|
37
46
|
* Change the visibility button state.
|
|
38
47
|
*/
|
|
39
48
|
reRender(): void;
|
|
40
49
|
render(): void;
|
|
41
50
|
}
|
|
51
|
+
export {};
|
|
42
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"}
|
package/dist/index.js
CHANGED
|
@@ -1,110 +1,31 @@
|
|
|
1
1
|
var __defProp = Object.defineProperty;
|
|
2
2
|
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
3
|
+
import { WebComponent } from "@substrate-system/web-component";
|
|
3
4
|
import { define } from "@substrate-system/web-component/util";
|
|
4
5
|
import { define as slashDefine } from "@substrate-system/icons/eye-slash";
|
|
5
6
|
import { define as regularDefine } from "@substrate-system/icons/eye-regular";
|
|
7
|
+
import { ARIA_ATTRIBUTES, INPUT_ATTRIBUTES } from "./util";
|
|
6
8
|
slashDefine();
|
|
7
9
|
regularDefine();
|
|
8
|
-
class PasswordInput extends
|
|
10
|
+
class PasswordInput extends WebComponent.create("password-input") {
|
|
9
11
|
static {
|
|
10
12
|
__name(this, "PasswordInput");
|
|
11
13
|
}
|
|
12
14
|
static TAG = "password-input";
|
|
13
|
-
static INPUT_ATTRIBUTES =
|
|
14
|
-
|
|
15
|
-
"alt",
|
|
16
|
-
"autocomplete",
|
|
17
|
-
"autocapitalize",
|
|
18
|
-
"autocorrect",
|
|
19
|
-
"autofocus",
|
|
20
|
-
"capture",
|
|
21
|
-
"dirname",
|
|
22
|
-
"disabled",
|
|
23
|
-
"enterkeyhint",
|
|
24
|
-
"form",
|
|
25
|
-
"inputmode",
|
|
26
|
-
"list",
|
|
27
|
-
"max",
|
|
28
|
-
"maxlength",
|
|
29
|
-
"min",
|
|
30
|
-
"minlength",
|
|
31
|
-
"multiple",
|
|
32
|
-
"name",
|
|
33
|
-
"pattern",
|
|
34
|
-
"placeholder",
|
|
35
|
-
"readonly",
|
|
36
|
-
"required",
|
|
37
|
-
"size",
|
|
38
|
-
"spellcheck",
|
|
39
|
-
"step",
|
|
40
|
-
"tabindex",
|
|
41
|
-
"title",
|
|
42
|
-
"value"
|
|
43
|
-
];
|
|
44
|
-
static ARIA_ATTRIBUTES = [
|
|
45
|
-
"aria-activedescendant",
|
|
46
|
-
"aria-atomic",
|
|
47
|
-
"aria-autocomplete",
|
|
48
|
-
"aria-braillelabel",
|
|
49
|
-
"aria-brailleroledescription",
|
|
50
|
-
"aria-busy",
|
|
51
|
-
"aria-checked",
|
|
52
|
-
"aria-colcount",
|
|
53
|
-
"aria-colindex",
|
|
54
|
-
"aria-colindextext",
|
|
55
|
-
"aria-colspan",
|
|
56
|
-
"aria-controls",
|
|
57
|
-
"aria-current",
|
|
58
|
-
"aria-describedby",
|
|
59
|
-
"aria-description",
|
|
60
|
-
"aria-details",
|
|
61
|
-
"aria-disabled",
|
|
62
|
-
"aria-dropeffect",
|
|
63
|
-
"aria-errormessage",
|
|
64
|
-
"aria-expanded",
|
|
65
|
-
"aria-flowto",
|
|
66
|
-
"aria-grabbed",
|
|
67
|
-
"aria-haspopup",
|
|
68
|
-
"aria-hidden",
|
|
69
|
-
"aria-invalid",
|
|
70
|
-
"aria-keyshortcuts",
|
|
71
|
-
"aria-label",
|
|
72
|
-
"aria-labelledby",
|
|
73
|
-
"aria-level",
|
|
74
|
-
"aria-live",
|
|
75
|
-
"aria-modal",
|
|
76
|
-
"aria-multiline",
|
|
77
|
-
"aria-multiselectable",
|
|
78
|
-
"aria-orientation",
|
|
79
|
-
"aria-owns",
|
|
80
|
-
"aria-placeholder",
|
|
81
|
-
"aria-posinset",
|
|
82
|
-
"aria-pressed",
|
|
83
|
-
"aria-readonly",
|
|
84
|
-
"aria-relevant",
|
|
85
|
-
"aria-required",
|
|
86
|
-
"aria-roledescription",
|
|
87
|
-
"aria-rowcount",
|
|
88
|
-
"aria-rowindex",
|
|
89
|
-
"aria-rowindextext",
|
|
90
|
-
"aria-rowspan",
|
|
91
|
-
"aria-selected",
|
|
92
|
-
"aria-setsize",
|
|
93
|
-
"aria-sort",
|
|
94
|
-
"aria-valuemax",
|
|
95
|
-
"aria-valuemin",
|
|
96
|
-
"aria-valuenow",
|
|
97
|
-
"aria-valuetext"
|
|
98
|
-
];
|
|
15
|
+
static INPUT_ATTRIBUTES = INPUT_ATTRIBUTES;
|
|
16
|
+
static ARIA_ATTRIBUTES = ARIA_ATTRIBUTES;
|
|
99
17
|
static observedAttributes = ["visible", "label", "id"].concat(PasswordInput.INPUT_ATTRIBUTES).concat(PasswordInput.ARIA_ATTRIBUTES);
|
|
100
18
|
inputId = null;
|
|
101
19
|
inputAriaAttributes = {};
|
|
102
20
|
ignoredAriaCallbackNames = /* @__PURE__ */ new Set();
|
|
103
21
|
ignoredIdCallback = false;
|
|
22
|
+
generatedInputId = `password-input-${Math.random().toString(36).slice(2, 10)}`;
|
|
104
23
|
// empty string = is visible
|
|
105
24
|
// null = not visible
|
|
106
|
-
handleChange_visible(
|
|
25
|
+
handleChange_visible(oldValue, newValue) {
|
|
107
26
|
this.reRender();
|
|
27
|
+
if (oldValue === newValue) return;
|
|
28
|
+
this.emit(newValue !== null ? "show" : "hide");
|
|
108
29
|
}
|
|
109
30
|
handleChange_label(_oldValue, _newValue) {
|
|
110
31
|
this.render();
|
|
@@ -214,14 +135,23 @@ class PasswordInput extends HTMLElement {
|
|
|
214
135
|
getButtonContent() {
|
|
215
136
|
return this.isVisible ? '<eye-regular></eye-regular><span class="visually-hidden">Hide</span>' : '<eye-slash></eye-slash><span class="visually-hidden">Show</span>';
|
|
216
137
|
}
|
|
138
|
+
getInputIdForRender() {
|
|
139
|
+
return this.inputId || this.generatedInputId;
|
|
140
|
+
}
|
|
217
141
|
/**
|
|
218
142
|
* Change the visibility button state.
|
|
219
143
|
*/
|
|
220
144
|
reRender() {
|
|
221
145
|
const btn = this.querySelector(".pw-visibility");
|
|
146
|
+
const input = this.querySelector("input");
|
|
147
|
+
if (!btn || !input) return;
|
|
148
|
+
const inputId = this.getInputIdForRender();
|
|
222
149
|
btn.innerHTML = this.getButtonContent();
|
|
150
|
+
btn.setAttribute("aria-pressed", this.isVisible ? "true" : "false");
|
|
151
|
+
btn.setAttribute("aria-controls", inputId);
|
|
223
152
|
this.setAttribute("type", this.getType());
|
|
224
|
-
|
|
153
|
+
input.setAttribute("type", this.getType());
|
|
154
|
+
input.setAttribute("id", inputId);
|
|
225
155
|
}
|
|
226
156
|
render() {
|
|
227
157
|
const name = this.getAttribute("name");
|
|
@@ -240,33 +170,42 @@ class PasswordInput extends HTMLElement {
|
|
|
240
170
|
(attr) => attr.name + (attr.value === "" ? "" : `="${attr.value}"`)
|
|
241
171
|
).join(" ");
|
|
242
172
|
const classes = (this.getAttribute("class") ?? "").split(" ").concat(["password", "input", name || ""]).filter(Boolean).join(" ");
|
|
243
|
-
const
|
|
173
|
+
const inputId = this.getInputIdForRender();
|
|
174
|
+
const renderedIdAttribute = `id="${inputId}"`;
|
|
244
175
|
const ariaAttributes = Object.entries(this.inputAriaAttributes).map(([attrName, attrValue]) => {
|
|
245
176
|
return attrName + (attrValue === "" ? "" : `="${attrValue}"`);
|
|
246
177
|
}).join(" ");
|
|
247
178
|
this.innerHTML = label ? `
|
|
248
|
-
<
|
|
249
|
-
<
|
|
179
|
+
<div class="${classes}">
|
|
180
|
+
<label class="label-content" for="${inputId}">${label}</label>
|
|
250
181
|
<span class="input">
|
|
251
182
|
<input
|
|
252
|
-
${
|
|
183
|
+
${renderedIdAttribute}
|
|
253
184
|
${ariaAttributes}
|
|
254
185
|
${attrs}
|
|
255
186
|
type=${this.getType()} />
|
|
256
|
-
<button
|
|
187
|
+
<button
|
|
188
|
+
type="button"
|
|
189
|
+
class="pw-visibility"
|
|
190
|
+
aria-pressed="${this.isVisible ? "true" : "false"}"
|
|
191
|
+
aria-controls="${inputId}">
|
|
257
192
|
${this.getButtonContent()}
|
|
258
193
|
</button>
|
|
259
194
|
</span>
|
|
260
|
-
</
|
|
195
|
+
</div>
|
|
261
196
|
` : `
|
|
262
197
|
<div class="${classes}">
|
|
263
198
|
<span class="input">
|
|
264
199
|
<input
|
|
265
|
-
${
|
|
200
|
+
${renderedIdAttribute}
|
|
266
201
|
${ariaAttributes}
|
|
267
202
|
${attrs}
|
|
268
203
|
type=${this.getType()} />
|
|
269
|
-
<button
|
|
204
|
+
<button
|
|
205
|
+
type="button"
|
|
206
|
+
class="pw-visibility"
|
|
207
|
+
aria-pressed="${this.isVisible ? "true" : "false"}"
|
|
208
|
+
aria-controls="${inputId}">
|
|
270
209
|
${this.getButtonContent()}
|
|
271
210
|
</button>
|
|
272
211
|
</span>
|
package/dist/index.js.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\nexport class PasswordInput extends HTMLElement {\n static TAG = 'password-input'\n static INPUT_ATTRIBUTES = [\n 'accept',\n 'alt',\n 'autocomplete',\n 'autocapitalize',\n 'autocorrect',\n 'autofocus',\n 'capture',\n 'dirname',\n 'disabled',\n 'enterkeyhint',\n 'form',\n 'inputmode',\n 'list',\n 'max',\n 'maxlength',\n 'min',\n 'minlength',\n 'multiple',\n 'name',\n 'pattern',\n 'placeholder',\n 'readonly',\n 'required',\n 'size',\n 'spellcheck',\n 'step',\n 'tabindex',\n 'title',\n 'value'\n ]\n\n static ARIA_ATTRIBUTES = [\n 'aria-activedescendant',\n 'aria-atomic',\n 'aria-autocomplete',\n 'aria-braillelabel',\n 'aria-brailleroledescription',\n 'aria-busy',\n 'aria-checked',\n 'aria-colcount',\n 'aria-colindex',\n 'aria-colindextext',\n 'aria-colspan',\n 'aria-controls',\n 'aria-current',\n 'aria-describedby',\n 'aria-description',\n 'aria-details',\n 'aria-disabled',\n 'aria-dropeffect',\n 'aria-errormessage',\n 'aria-expanded',\n 'aria-flowto',\n 'aria-grabbed',\n 'aria-haspopup',\n 'aria-hidden',\n 'aria-invalid',\n 'aria-keyshortcuts',\n 'aria-label',\n 'aria-labelledby',\n 'aria-level',\n 'aria-live',\n 'aria-modal',\n 'aria-multiline',\n 'aria-multiselectable',\n 'aria-orientation',\n 'aria-owns',\n 'aria-placeholder',\n 'aria-posinset',\n 'aria-pressed',\n 'aria-readonly',\n 'aria-relevant',\n 'aria-required',\n 'aria-roledescription',\n 'aria-rowcount',\n 'aria-rowindex',\n 'aria-rowindextext',\n 'aria-rowspan',\n 'aria-selected',\n 'aria-setsize',\n 'aria-sort',\n 'aria-valuemax',\n 'aria-valuemin',\n 'aria-valuenow',\n 'aria-valuetext'\n ]\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\n // empty string = is visible\n // null = not visible\n handleChange_visible (_, _newValue) {\n this.reRender()\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 /**\n * Change the visibility button state.\n */\n reRender () {\n const btn = this.querySelector('.pw-visibility')\n btn!.innerHTML = this.getButtonContent()\n this.setAttribute('type', this.getType())\n this.querySelector('input')?.setAttribute('type', this.getType())\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 idAttribute = this.inputId ? `id=\"${this.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 <label class=\"${classes}\">\n <span class=\"label-content\">${label}</span>\n <span class=\"input\">\n <input\n ${idAttribute}\n ${ariaAttributes}\n ${attrs}\n type=${this.getType()} />\n <button class=\"pw-visibility\">\n ${this.getButtonContent()}\n </button>\n </span>\n </label>\n ` : `\n <div class=\"${classes}\">\n <span class=\"input\">\n <input\n ${idAttribute}\n ${ariaAttributes}\n ${attrs}\n type=${this.getType()} />\n <button class=\"pw-visibility\">\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": ";;AAAA,SAAS,cAAc;AACvB,SAAS,UAAU,mBAAmB;AACtC,SAAS,UAAU,qBAAqB;
|
|
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
6
|
"names": []
|
|
7
7
|
}
|