@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/dist/index.js
CHANGED
|
@@ -1,78 +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
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
"aria-autocomplete",
|
|
17
|
-
"aria-braillelabel",
|
|
18
|
-
"aria-brailleroledescription",
|
|
19
|
-
"aria-busy",
|
|
20
|
-
"aria-checked",
|
|
21
|
-
"aria-colcount",
|
|
22
|
-
"aria-colindex",
|
|
23
|
-
"aria-colindextext",
|
|
24
|
-
"aria-colspan",
|
|
25
|
-
"aria-controls",
|
|
26
|
-
"aria-current",
|
|
27
|
-
"aria-describedby",
|
|
28
|
-
"aria-description",
|
|
29
|
-
"aria-details",
|
|
30
|
-
"aria-disabled",
|
|
31
|
-
"aria-dropeffect",
|
|
32
|
-
"aria-errormessage",
|
|
33
|
-
"aria-expanded",
|
|
34
|
-
"aria-flowto",
|
|
35
|
-
"aria-grabbed",
|
|
36
|
-
"aria-haspopup",
|
|
37
|
-
"aria-hidden",
|
|
38
|
-
"aria-invalid",
|
|
39
|
-
"aria-keyshortcuts",
|
|
40
|
-
"aria-label",
|
|
41
|
-
"aria-labelledby",
|
|
42
|
-
"aria-level",
|
|
43
|
-
"aria-live",
|
|
44
|
-
"aria-modal",
|
|
45
|
-
"aria-multiline",
|
|
46
|
-
"aria-multiselectable",
|
|
47
|
-
"aria-orientation",
|
|
48
|
-
"aria-owns",
|
|
49
|
-
"aria-placeholder",
|
|
50
|
-
"aria-posinset",
|
|
51
|
-
"aria-pressed",
|
|
52
|
-
"aria-readonly",
|
|
53
|
-
"aria-relevant",
|
|
54
|
-
"aria-required",
|
|
55
|
-
"aria-roledescription",
|
|
56
|
-
"aria-rowcount",
|
|
57
|
-
"aria-rowindex",
|
|
58
|
-
"aria-rowindextext",
|
|
59
|
-
"aria-rowspan",
|
|
60
|
-
"aria-selected",
|
|
61
|
-
"aria-setsize",
|
|
62
|
-
"aria-sort",
|
|
63
|
-
"aria-valuemax",
|
|
64
|
-
"aria-valuemin",
|
|
65
|
-
"aria-valuenow",
|
|
66
|
-
"aria-valuetext"
|
|
67
|
-
];
|
|
68
|
-
static observedAttributes = ["visible", "label"].concat(PasswordInput.ARIA_ATTRIBUTES);
|
|
15
|
+
static INPUT_ATTRIBUTES = INPUT_ATTRIBUTES;
|
|
16
|
+
static ARIA_ATTRIBUTES = ARIA_ATTRIBUTES;
|
|
17
|
+
static observedAttributes = ["visible", "label", "id"].concat(PasswordInput.INPUT_ATTRIBUTES).concat(PasswordInput.ARIA_ATTRIBUTES);
|
|
69
18
|
inputId = null;
|
|
70
19
|
inputAriaAttributes = {};
|
|
71
20
|
ignoredAriaCallbackNames = /* @__PURE__ */ new Set();
|
|
21
|
+
ignoredIdCallback = false;
|
|
22
|
+
generatedInputId = `password-input-${Math.random().toString(36).slice(2, 10)}`;
|
|
72
23
|
// empty string = is visible
|
|
73
24
|
// null = not visible
|
|
74
|
-
handleChange_visible(
|
|
25
|
+
handleChange_visible(oldValue, newValue) {
|
|
75
26
|
this.reRender();
|
|
27
|
+
if (oldValue === newValue) return;
|
|
28
|
+
this.emit(newValue !== null ? "show" : "hide");
|
|
76
29
|
}
|
|
77
30
|
handleChange_label(_oldValue, _newValue) {
|
|
78
31
|
this.render();
|
|
@@ -95,6 +48,32 @@ class PasswordInput extends HTMLElement {
|
|
|
95
48
|
this.removeAttribute(name);
|
|
96
49
|
}
|
|
97
50
|
}
|
|
51
|
+
handleChange_id(_oldValue, newValue) {
|
|
52
|
+
if (this.ignoredIdCallback) {
|
|
53
|
+
this.ignoredIdCallback = false;
|
|
54
|
+
return;
|
|
55
|
+
}
|
|
56
|
+
if (newValue === null) {
|
|
57
|
+
this.inputId = null;
|
|
58
|
+
this.querySelector("input")?.removeAttribute("id");
|
|
59
|
+
return;
|
|
60
|
+
}
|
|
61
|
+
this.inputId = newValue;
|
|
62
|
+
this.querySelector("input")?.setAttribute("id", newValue);
|
|
63
|
+
if (this.hasAttribute("id")) {
|
|
64
|
+
this.ignoredIdCallback = true;
|
|
65
|
+
this.removeAttribute("id");
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
handleChange_inputAttribute(name, newValue) {
|
|
69
|
+
const input = this.querySelector("input");
|
|
70
|
+
if (!input) return;
|
|
71
|
+
if (newValue === null) {
|
|
72
|
+
input.removeAttribute(name);
|
|
73
|
+
return;
|
|
74
|
+
}
|
|
75
|
+
input.setAttribute(name, newValue);
|
|
76
|
+
}
|
|
98
77
|
/**
|
|
99
78
|
* Listen for change in visiblity.
|
|
100
79
|
*
|
|
@@ -103,10 +82,18 @@ class PasswordInput extends HTMLElement {
|
|
|
103
82
|
* @param {string} newValue The new attribute value
|
|
104
83
|
*/
|
|
105
84
|
async attributeChangedCallback(name, oldValue, newValue) {
|
|
85
|
+
if (name === "id") {
|
|
86
|
+
this.handleChange_id(oldValue, newValue);
|
|
87
|
+
return;
|
|
88
|
+
}
|
|
106
89
|
if (name.startsWith("aria-")) {
|
|
107
90
|
this.handleChange_aria(name, oldValue, newValue);
|
|
108
91
|
return;
|
|
109
92
|
}
|
|
93
|
+
if (PasswordInput.INPUT_ATTRIBUTES.includes(name)) {
|
|
94
|
+
this.handleChange_inputAttribute(name, newValue);
|
|
95
|
+
return;
|
|
96
|
+
}
|
|
110
97
|
if (this[`handleChange_${name}`]) {
|
|
111
98
|
this[`handleChange_${name}`](oldValue, newValue);
|
|
112
99
|
}
|
|
@@ -148,14 +135,23 @@ class PasswordInput extends HTMLElement {
|
|
|
148
135
|
getButtonContent() {
|
|
149
136
|
return this.isVisible ? '<eye-regular></eye-regular><span class="visually-hidden">Hide</span>' : '<eye-slash></eye-slash><span class="visually-hidden">Show</span>';
|
|
150
137
|
}
|
|
138
|
+
getInputIdForRender() {
|
|
139
|
+
return this.inputId || this.generatedInputId;
|
|
140
|
+
}
|
|
151
141
|
/**
|
|
152
142
|
* Change the visibility button state.
|
|
153
143
|
*/
|
|
154
144
|
reRender() {
|
|
155
145
|
const btn = this.querySelector(".pw-visibility");
|
|
146
|
+
const input = this.querySelector("input");
|
|
147
|
+
if (!btn || !input) return;
|
|
148
|
+
const inputId = this.getInputIdForRender();
|
|
156
149
|
btn.innerHTML = this.getButtonContent();
|
|
150
|
+
btn.setAttribute("aria-pressed", this.isVisible ? "true" : "false");
|
|
151
|
+
btn.setAttribute("aria-controls", inputId);
|
|
157
152
|
this.setAttribute("type", this.getType());
|
|
158
|
-
|
|
153
|
+
input.setAttribute("type", this.getType());
|
|
154
|
+
input.setAttribute("id", inputId);
|
|
159
155
|
}
|
|
160
156
|
render() {
|
|
161
157
|
const name = this.getAttribute("name");
|
|
@@ -174,39 +170,51 @@ class PasswordInput extends HTMLElement {
|
|
|
174
170
|
(attr) => attr.name + (attr.value === "" ? "" : `="${attr.value}"`)
|
|
175
171
|
).join(" ");
|
|
176
172
|
const classes = (this.getAttribute("class") ?? "").split(" ").concat(["password", "input", name || ""]).filter(Boolean).join(" ");
|
|
177
|
-
const
|
|
173
|
+
const inputId = this.getInputIdForRender();
|
|
174
|
+
const renderedIdAttribute = `id="${inputId}"`;
|
|
178
175
|
const ariaAttributes = Object.entries(this.inputAriaAttributes).map(([attrName, attrValue]) => {
|
|
179
176
|
return attrName + (attrValue === "" ? "" : `="${attrValue}"`);
|
|
180
177
|
}).join(" ");
|
|
181
178
|
this.innerHTML = label ? `
|
|
182
|
-
<
|
|
183
|
-
<
|
|
179
|
+
<div class="${classes}">
|
|
180
|
+
<label class="label-content" for="${inputId}">${label}</label>
|
|
184
181
|
<span class="input">
|
|
185
182
|
<input
|
|
186
|
-
${
|
|
183
|
+
${renderedIdAttribute}
|
|
187
184
|
${ariaAttributes}
|
|
188
185
|
${attrs}
|
|
189
186
|
type=${this.getType()} />
|
|
190
|
-
<button
|
|
187
|
+
<button
|
|
188
|
+
type="button"
|
|
189
|
+
class="pw-visibility"
|
|
190
|
+
aria-pressed="${this.isVisible ? "true" : "false"}"
|
|
191
|
+
aria-controls="${inputId}">
|
|
191
192
|
${this.getButtonContent()}
|
|
192
193
|
</button>
|
|
193
194
|
</span>
|
|
194
|
-
</
|
|
195
|
+
</div>
|
|
195
196
|
` : `
|
|
196
197
|
<div class="${classes}">
|
|
197
198
|
<span class="input">
|
|
198
199
|
<input
|
|
199
|
-
${
|
|
200
|
+
${renderedIdAttribute}
|
|
200
201
|
${ariaAttributes}
|
|
201
202
|
${attrs}
|
|
202
203
|
type=${this.getType()} />
|
|
203
|
-
<button
|
|
204
|
+
<button
|
|
205
|
+
type="button"
|
|
206
|
+
class="pw-visibility"
|
|
207
|
+
aria-pressed="${this.isVisible ? "true" : "false"}"
|
|
208
|
+
aria-controls="${inputId}">
|
|
204
209
|
${this.getButtonContent()}
|
|
205
210
|
</button>
|
|
206
211
|
</span>
|
|
207
212
|
</div>
|
|
208
213
|
`;
|
|
209
|
-
this.
|
|
214
|
+
if (this.hasAttribute("id")) {
|
|
215
|
+
this.ignoredIdCallback = true;
|
|
216
|
+
this.removeAttribute("id");
|
|
217
|
+
}
|
|
210
218
|
for (const attr of hostAriaAttributes) {
|
|
211
219
|
this.ignoredAriaCallbackNames.add(attr.name);
|
|
212
220
|
this.removeAttribute(attr.name);
|
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\
|
|
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
|
}
|
package/dist/index.min.js
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
1
|
-
var
|
|
1
|
+
var z=Object.defineProperty;var n=(t,e)=>z(t,"name",{value:e,configurable:!0});var D=Object.defineProperty,F=n((t,e)=>D(t,"name",{value:e,configurable:!0}),"__name");function L(t){return Object.keys(t).reduce((e,i)=>{let r=t[i];return r?typeof r=="boolean"?r?(e+` ${i}`).trim():e:Array.isArray(r)?e+` ${i}="${r.join(" ")}"`:(e+` ${i}="${r}"`).trim():e},"")}n(L,"toAttributes");F(L,"toAttributes");var V=Object.defineProperty,_=n((t,e)=>V(t,"name",{value:e,configurable:!0}),"__name");function x(t){return document.createElement(t).constructor!==window.HTMLElement}n(x,"isRegistered");_(x,"isRegistered");function v(t,e){window&&"customElements"in window&&(x(t)||window.customElements.define(t,e))}n(v,"define");_(v,"define");var pe=document.querySelector.bind(document),me=document.querySelectorAll.bind(document);function y(t,e){return t.matches||(t=t.parentElement),t.matches(e)?t:t.closest(e)}n(y,"match");_(y,"match");var Z=Object.defineProperty,c=n((t,e)=>Z(t,"name",{value:e,configurable:!0}),"__name"),p=class t extends window.HTMLElement{static{n(this,"WebComponent")}static{c(this,"WebComponent")}static TAG="";TAG="";static match(e){return y(e,this.TAG)}_globalWildcardListeners=new Set;_namespacedWildcardListeners=new Set;static create(e){let i=class extends t{static{n(this,"CreatedClass")}static{c(this,"CreatedClass")}static TAG=e;TAG=e;render(){throw new Error("`render` should be implemented by children")}};return i.define=function(){return t.define.call(this)},i.event=function(r){return t.event.call(this,r)},i}static define(){P(this.TAG,this)}async attributeChangedCallback(e,i,r){let s=this[`handleChange_${e}`];s&&await s.call(this,i,r)}addEventListener(e,i,r){e===t.event.call(this,"*")?this._namespacedWildcardListeners.add({listener:i,options:r}):e==="*"?i&&this._globalWildcardListeners.add({listener:i,options:r}):super.addEventListener(e,i,r)}_notifyNamespacedWildcardListeners(e){if(this._namespacedWildcardListeners.size===0)return;let i=this.TAG;!i||!e.type.startsWith(`${i}:`)||this._namespacedWildcardListeners.forEach(({listener:r})=>{try{typeof r=="function"?r.call(this,e):r&&typeof r.handleEvent=="function"&&r.handleEvent(e)}catch(s){console.error("Error in namespaced wildcard event listener:",s)}})}_notifyGlobalWildcardListeners(e){this._globalWildcardListeners.size!==0&&this._globalWildcardListeners.forEach(({listener:i})=>{try{typeof i=="function"?i.call(this,e):i&&typeof i.handleEvent=="function"&&i.handleEvent(e)}catch(r){console.error("Error in global wildcard event listener:",r)}})}connectedCallback(){this.render()}qs(e){return this.querySelector(e)}qsa(e){return this.querySelectorAll(e)}static event(e){return S(this.TAG,e)}emit(e,i={}){if(e==="*")throw new Error('Do not emit the literal "*"');let{bubbles:r=!0,cancelable:s=!0,detail:h}=i,b=`${this.TAG}:${e}`,o=new CustomEvent(b,{bubbles:r,cancelable:s,detail:h}),f=this.dispatchEvent(o);return this._notifyNamespacedWildcardListeners(o),f}dispatchEvent(e){let i=super.dispatchEvent(e);return this._notifyGlobalWildcardListeners(e),i}dispatch(e,i={}){let r=new CustomEvent(e,{bubbles:i.bubbles===void 0?!0:i.bubbles,cancelable:i.cancelable===void 0?!0:i.cancelable,detail:i.detail});return this.dispatchEvent(r)}removeEventListener(e,i,r){if(e===t.event.call(this,"*")){if(i&&this._namespacedWildcardListeners){for(let s of this._namespacedWildcardListeners)if(s.listener===i){this._namespacedWildcardListeners.delete(s);break}}}else if(e==="*"){if(i&&this._globalWildcardListeners){for(let s of this._globalWildcardListeners)if(s.listener===i){this._globalWildcardListeners.delete(s);break}}}else super.removeEventListener(e,i,r)}};function S(t,e){return`${t}:${e}`}n(S,"eventName");c(S,"eventName");function R(t){return document.createElement(t).constructor!==window.HTMLElement}n(R,"isRegistered");c(R,"isRegistered");function P(t,e){window&&"customElements"in window&&(R(t)||window.customElements.define(t,e))}n(P,"define");c(P,"define");var J=Object.defineProperty,K=n((t,e)=>J(t,"name",{value:e,configurable:!0}),"__name");function k(t){return Object.keys(t).reduce((e,i)=>{let r=t[i];return r?typeof r=="boolean"?r?(e+` ${i}`).trim():e:Array.isArray(r)?e+` ${i}="${r.join(" ")}"`:(e+` ${i}="${r}"`).trim():e},"")}n(k,"toAttributes");K(k,"toAttributes");var Q=Object.defineProperty,H=n((t,e)=>Q(t,"name",{value:e,configurable:!0}),"__name");function W(t){return document.createElement(t).constructor!==window.HTMLElement}n(W,"isRegistered");H(W,"isRegistered");function u(t,e){window&&"customElements"in window&&(W(t)||window.customElements.define(t,e))}n(u,"define");H(u,"define");var Ee=document.querySelector.bind(document),Ie=document.querySelectorAll.bind(document);var X=Object.defineProperty,Y=n((t,e)=>X(t,"name",{value:e,configurable:!0}),"__name"),ee=/[\s\u2000-\u206F\u2E00-\u2E7F\\'!"#$%&()*+,\-.\/:;<=>?@\[\]^_`{|}~]+/,te=/[A-ZÀ-Ý\u00C0-\u00D6\u00D9-\u00DD][a-zà-ÿ]/g,ie=/[A-ZÀ-Ý\u00C0-\u00D6\u00D9-\u00DD]+/g;function l(t){return t=t.replace(te,function(e){return" "+(e[0].toLowerCase()||e[0])+e[1]}),t=t.replace(ie,function(e){return" "+e.toLowerCase()}),t.trim().split(ee).join("-").replace(/^-/,"").replace(/-\s*$/,"")}n(l,"kebabCase");Y(l,"kebabCase");var re=Object.defineProperty,ne=n((t,e)=>re(t,"name",{value:e,configurable:!0}),"__name");function d(t,e){return function(i){let r=t(i);return typeof window>"u"?`<${e} class="icon">
|
|
2
2
|
${r}
|
|
3
|
-
</${e}>`:r}}
|
|
3
|
+
</${e}>`:r}}n(d,"createRenderer");ne(d,"createRenderer");var ae=Object.defineProperty,q=n((t,e)=>ae(t,"name",{value:e,configurable:!0}),"__name"),w=d(j,"eye-slash");function j({title:t}={}){return t||(t="Hide"),`<svg
|
|
4
4
|
class="icon eye-slash"
|
|
5
5
|
xmlns="http://www.w3.org/2000/svg"
|
|
6
6
|
viewBox="0 0 640 512"
|
|
7
7
|
role="image"
|
|
8
|
-
aria-labelledby="${
|
|
8
|
+
aria-labelledby="${l(t)}"
|
|
9
9
|
>
|
|
10
|
-
<title id=${
|
|
10
|
+
<title id=${l(t)}>${t}</title>
|
|
11
11
|
<!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
|
|
12
12
|
<path d="M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zM223.1 149.5C248.6 126.2 282.7 112 320 112c79.5 0 144 64.5 144 144c0 24.9-6.3 48.3-17.4 68.7L408 294.5c8.4-19.3 10.6-41.4 4.8-63.3c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3c0 10.2-2.4 19.8-6.6 28.3l-90.3-70.8zM373 389.9c-16.4 6.5-34.3 10.1-53 10.1c-79.5 0-144-64.5-144-144c0-6.9 .5-13.6 1.4-20.2L83.1 161.5C60.3 191.2 44 220.8 34.5 243.7c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c47.8 0 89.9-12.9 126.2-32.5L373 389.9z" />
|
|
13
|
-
</svg>`}
|
|
13
|
+
</svg>`}n(j,"createHtml");q(j,"createHtml");function se({title:t}){return`<eye-slash>${w({title:t})}</eye-slash>`}n(se,"outerHtml");q(se,"outerHtml");var oe=Object.defineProperty,M=n((t,e)=>oe(t,"name",{value:e,configurable:!0}),"__name"),m=class extends HTMLElement{static{n(this,"EyeSlash")}static{M(this,"EyeSlash")}static TAG="eye-slash";_title;constructor(){super(),this._title=this.getAttribute("title")||"Hide"}attributeChangedCallback(e,i,r){this._title=r,this.render()}connectedCallback(){let e=this.getAttribute("title");e==null?this._title="Hide":this._title=e,this.render()}render(){let e=this._title;this.innerHTML=w({title:e})}};function C(){u(m.TAG,m)}n(C,"define");M(C,"define");var le=Object.defineProperty,G=n((t,e)=>le(t,"name",{value:e,configurable:!0}),"__name"),T=d(B,"eye-regular");function B({title:t}={}){t||(t="Show");let e=l(t);return`<svg
|
|
14
14
|
class="icon eye-regular"
|
|
15
15
|
xmlns="http://www.w3.org/2000/svg"
|
|
16
16
|
viewBox="0 0 576 512"
|
|
@@ -20,32 +20,40 @@ var R=Object.defineProperty;var i=(t,e)=>R(t,"name",{value:e,configurable:!0});v
|
|
|
20
20
|
<title id="${e}">${t}</title>
|
|
21
21
|
<!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
|
|
22
22
|
<path d="M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z" />
|
|
23
|
-
</svg>`}
|
|
24
|
-
<
|
|
25
|
-
<
|
|
23
|
+
</svg>`}n(B,"createHtml");G(B,"createHtml");function ce({title:t}){return`<eye-regular>${T({title:t})}</eye-regular>`}n(ce,"outerHtml");G(ce,"outerHtml");var ue=Object.defineProperty,N=n((t,e)=>ue(t,"name",{value:e,configurable:!0}),"__name"),g=class extends HTMLElement{static{n(this,"EyeRegular")}static{N(this,"EyeRegular")}static TAG="eye-regular";_title;constructor(){super(),this._title=this.getAttribute("title")||"See"}attributeChangedCallback(e,i,r){this._title=r,this.render()}connectedCallback(){let e=this.getAttribute("title");e==null?this._title="See":this._title=e,this.render()}render(){let e=this._title;e&&(this.innerHTML=T({title:e}))}};function $(){u(g.TAG,g)}n($,"define");N($,"define");var O=["aria-activedescendant","aria-atomic","aria-autocomplete","aria-braillelabel","aria-brailleroledescription","aria-busy","aria-checked","aria-colcount","aria-colindex","aria-colindextext","aria-colspan","aria-controls","aria-current","aria-describedby","aria-description","aria-details","aria-disabled","aria-dropeffect","aria-errormessage","aria-expanded","aria-flowto","aria-grabbed","aria-haspopup","aria-hidden","aria-invalid","aria-keyshortcuts","aria-label","aria-labelledby","aria-level","aria-live","aria-modal","aria-multiline","aria-multiselectable","aria-orientation","aria-owns","aria-placeholder","aria-posinset","aria-pressed","aria-readonly","aria-relevant","aria-required","aria-roledescription","aria-rowcount","aria-rowindex","aria-rowindextext","aria-rowspan","aria-selected","aria-setsize","aria-sort","aria-valuemax","aria-valuemin","aria-valuenow","aria-valuetext"],U=["accept","alt","autocomplete","autocapitalize","autocorrect","autofocus","capture","dirname","disabled","enterkeyhint","form","inputmode","list","max","maxlength","min","minlength","multiple","name","pattern","placeholder","readonly","required","size","spellcheck","step","tabindex","title","value"];C();$();var A=class t extends p.create("password-input"){static{n(this,"PasswordInput")}static TAG="password-input";static INPUT_ATTRIBUTES=U;static ARIA_ATTRIBUTES=O;static observedAttributes=["visible","label","id"].concat(t.INPUT_ATTRIBUTES).concat(t.ARIA_ATTRIBUTES);inputId=null;inputAriaAttributes={};ignoredAriaCallbackNames=new Set;ignoredIdCallback=!1;generatedInputId=`password-input-${Math.random().toString(36).slice(2,10)}`;handleChange_visible(e,i){this.reRender(),e!==i&&this.emit(i!==null?"show":"hide")}handleChange_label(e,i){this.render(),this._listen()}handleChange_aria(e,i,r){if(this.ignoredAriaCallbackNames.has(e)){this.ignoredAriaCallbackNames.delete(e);return}if(r===null){delete this.inputAriaAttributes[e],this.querySelector("input")?.removeAttribute(e);return}this.inputAriaAttributes[e]=r,this.querySelector("input")?.setAttribute(e,r),this.hasAttribute(e)&&(this.ignoredAriaCallbackNames.add(e),this.removeAttribute(e))}handleChange_id(e,i){if(this.ignoredIdCallback){this.ignoredIdCallback=!1;return}if(i===null){this.inputId=null,this.querySelector("input")?.removeAttribute("id");return}this.inputId=i,this.querySelector("input")?.setAttribute("id",i),this.hasAttribute("id")&&(this.ignoredIdCallback=!0,this.removeAttribute("id"))}handleChange_inputAttribute(e,i){let r=this.querySelector("input");if(r){if(i===null){r.removeAttribute(e);return}r.setAttribute(e,i)}}async attributeChangedCallback(e,i,r){if(e==="id"){this.handleChange_id(i,r);return}if(e.startsWith("aria-")){this.handleChange_aria(e,i,r);return}if(t.INPUT_ATTRIBUTES.includes(e)){this.handleChange_inputAttribute(e,r);return}this[`handleChange_${e}`]&&this[`handleChange_${e}`](i,r)}connectedCallback(){this.render(),this._listen()}_listen(){this.querySelector("button").addEventListener("click",i=>{i.preventDefault(),this.isVisible=!this.isVisible})}getType(){return this.isVisible?"text":"password"}set isVisible(e){e?this.setAttribute("visible",""):this.removeAttribute("visible")}get isVisible(){return this.hasAttribute("visible")}set label(e){if(e===null){this.removeAttribute("label");return}this.setAttribute("label",e)}get label(){return this.getAttribute("label")}getButtonContent(){return this.isVisible?'<eye-regular></eye-regular><span class="visually-hidden">Hide</span>':'<eye-slash></eye-slash><span class="visually-hidden">Show</span>'}getInputIdForRender(){return this.inputId||this.generatedInputId}reRender(){let e=this.querySelector(".pw-visibility"),i=this.querySelector("input");if(!e||!i)return;let r=this.getInputIdForRender();e.innerHTML=this.getButtonContent(),e.setAttribute("aria-pressed",this.isVisible?"true":"false"),e.setAttribute("aria-controls",r),this.setAttribute("type",this.getType()),i.setAttribute("type",this.getType()),i.setAttribute("id",r)}render(){let e=this.getAttribute("name"),i=this.getAttribute("label"),r=this.getAttribute("id"),s=Array.from(this.attributes).filter(a=>a.name.startsWith("aria-"));r!==null&&(this.inputId=r);for(let a of s)this.inputAriaAttributes[a.name]=a.value;let h=Array.from(this.attributes).filter(a=>a.name!=="label"&&a.name!=="id"&&!a.name.startsWith("aria-")).map(a=>a.name+(a.value===""?"":`="${a.value}"`)).join(" "),b=(this.getAttribute("class")??"").split(" ").concat(["password","input",e||""]).filter(Boolean).join(" "),o=this.getInputIdForRender(),f=`id="${o}"`,E=Object.entries(this.inputAriaAttributes).map(([a,I])=>a+(I===""?"":`="${I}"`)).join(" ");this.innerHTML=i?`
|
|
24
|
+
<div class="${b}">
|
|
25
|
+
<label class="label-content" for="${o}">${i}</label>
|
|
26
26
|
<span class="input">
|
|
27
27
|
<input
|
|
28
|
-
${
|
|
29
|
-
${
|
|
30
|
-
${
|
|
28
|
+
${f}
|
|
29
|
+
${E}
|
|
30
|
+
${h}
|
|
31
31
|
type=${this.getType()} />
|
|
32
|
-
<button
|
|
32
|
+
<button
|
|
33
|
+
type="button"
|
|
34
|
+
class="pw-visibility"
|
|
35
|
+
aria-pressed="${this.isVisible?"true":"false"}"
|
|
36
|
+
aria-controls="${o}">
|
|
33
37
|
${this.getButtonContent()}
|
|
34
38
|
</button>
|
|
35
39
|
</span>
|
|
36
|
-
</
|
|
40
|
+
</div>
|
|
37
41
|
`:`
|
|
38
|
-
<div class="${
|
|
42
|
+
<div class="${b}">
|
|
39
43
|
<span class="input">
|
|
40
44
|
<input
|
|
41
|
-
${
|
|
42
|
-
${
|
|
43
|
-
${
|
|
45
|
+
${f}
|
|
46
|
+
${E}
|
|
47
|
+
${h}
|
|
44
48
|
type=${this.getType()} />
|
|
45
|
-
<button
|
|
49
|
+
<button
|
|
50
|
+
type="button"
|
|
51
|
+
class="pw-visibility"
|
|
52
|
+
aria-pressed="${this.isVisible?"true":"false"}"
|
|
53
|
+
aria-controls="${o}">
|
|
46
54
|
${this.getButtonContent()}
|
|
47
55
|
</button>
|
|
48
56
|
</span>
|
|
49
57
|
</div>
|
|
50
|
-
`,this.removeAttribute("id");for(let
|
|
58
|
+
`,this.hasAttribute("id")&&(this.ignoredIdCallback=!0,this.removeAttribute("id"));for(let a of s)this.ignoredAriaCallbackNames.add(a.name),this.removeAttribute(a.name)}};v(A.TAG,A);export{A as PasswordInput};
|
|
51
59
|
//# sourceMappingURL=index.min.js.map
|