@substrate-system/input 0.0.14 → 0.0.16
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/html.cjs.map +2 -2
- package/dist/html.d.ts +1 -0
- package/dist/html.d.ts.map +1 -1
- package/dist/html.js.map +2 -2
- package/dist/html.min.js +1 -1
- package/dist/html.min.js.map +2 -2
- package/dist/index.cjs +6 -1
- package/dist/index.cjs.map +2 -2
- package/dist/index.d.ts +1 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +6 -1
- package/dist/index.js.map +2 -2
- package/dist/index.min.js +1 -1
- package/dist/index.min.js.map +3 -3
- package/dist/meta.json +6 -6
- package/package.json +1 -1
package/dist/html.cjs.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/html.ts"],
|
|
4
|
-
"sourcesContent": ["import { attributes } from '@substrate-system/util/to-string'\n\n/**\n * HTML attributes as object\n */\nexport type Attrs = Partial<{\n id:string;\n class:string;\n disabled:string|true;\n autofocus:string|true;\n type:string;\n tabindex:number|string;\n value:string;\n required:boolean;\n placeholder:string|string[];\n name:string;\n}>\n\nexport function html (attrs:Attrs):string {\n return `<input ${attributes(attrs)} />`\n}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAA2B;
|
|
4
|
+
"sourcesContent": ["import { attributes } from '@substrate-system/util/to-string'\n\n/**\n * HTML attributes as object\n */\nexport type Attrs = Partial<{\n id:string;\n class:string;\n disabled:string|true;\n autofocus:string|true;\n type:string;\n tabindex:number|string;\n value:string;\n required:boolean;\n placeholder:string|string[];\n name:string;\n autocomplete:string;\n}>\n\nexport function html (attrs:Attrs):string {\n return `<input ${attributes(attrs)} />`\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAA2B;AAmBpB,SAAS,KAAM,OAAoB;AACtC,SAAO,cAAU,6BAAW,KAAK,CAAC;AACtC;AAFgB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/html.d.ts
CHANGED
package/dist/html.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"html.d.ts","sourceRoot":"","sources":["../src/html.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,MAAM,MAAM,KAAK,GAAG,OAAO,CAAC;IACxB,EAAE,EAAC,MAAM,CAAC;IACV,KAAK,EAAC,MAAM,CAAC;IACb,QAAQ,EAAC,MAAM,GAAC,IAAI,CAAC;IACrB,SAAS,EAAC,MAAM,GAAC,IAAI,CAAC;IACtB,IAAI,EAAC,MAAM,CAAC;IACZ,QAAQ,EAAC,MAAM,GAAC,MAAM,CAAC;IACvB,KAAK,EAAC,MAAM,CAAC;IACb,QAAQ,EAAC,OAAO,CAAC;IACjB,WAAW,EAAC,MAAM,GAAC,MAAM,EAAE,CAAC;IAC5B,IAAI,EAAC,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"html.d.ts","sourceRoot":"","sources":["../src/html.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,MAAM,MAAM,KAAK,GAAG,OAAO,CAAC;IACxB,EAAE,EAAC,MAAM,CAAC;IACV,KAAK,EAAC,MAAM,CAAC;IACb,QAAQ,EAAC,MAAM,GAAC,IAAI,CAAC;IACrB,SAAS,EAAC,MAAM,GAAC,IAAI,CAAC;IACtB,IAAI,EAAC,MAAM,CAAC;IACZ,QAAQ,EAAC,MAAM,GAAC,MAAM,CAAC;IACvB,KAAK,EAAC,MAAM,CAAC;IACb,QAAQ,EAAC,OAAO,CAAC;IACjB,WAAW,EAAC,MAAM,GAAC,MAAM,EAAE,CAAC;IAC5B,IAAI,EAAC,MAAM,CAAC;IACZ,YAAY,EAAC,MAAM,CAAC;CACvB,CAAC,CAAA;AAEF,wBAAgB,IAAI,CAAE,KAAK,EAAC,KAAK,GAAE,MAAM,CAExC"}
|
package/dist/html.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/html.ts"],
|
|
4
|
-
"sourcesContent": ["import { attributes } from '@substrate-system/util/to-string'\n\n/**\n * HTML attributes as object\n */\nexport type Attrs = Partial<{\n id:string;\n class:string;\n disabled:string|true;\n autofocus:string|true;\n type:string;\n tabindex:number|string;\n value:string;\n required:boolean;\n placeholder:string|string[];\n name:string;\n}>\n\nexport function html (attrs:Attrs):string {\n return `<input ${attributes(attrs)} />`\n}\n"],
|
|
5
|
-
"mappings": ";;AAAA,SAAS,kBAAkB;
|
|
4
|
+
"sourcesContent": ["import { attributes } from '@substrate-system/util/to-string'\n\n/**\n * HTML attributes as object\n */\nexport type Attrs = Partial<{\n id:string;\n class:string;\n disabled:string|true;\n autofocus:string|true;\n type:string;\n tabindex:number|string;\n value:string;\n required:boolean;\n placeholder:string|string[];\n name:string;\n autocomplete:string;\n}>\n\nexport function html (attrs:Attrs):string {\n return `<input ${attributes(attrs)} />`\n}\n"],
|
|
5
|
+
"mappings": ";;AAAA,SAAS,kBAAkB;AAmBpB,SAAS,KAAM,OAAoB;AACtC,SAAO,UAAU,WAAW,KAAK,CAAC;AACtC;AAFgB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/html.min.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var s=Object.defineProperty;var n=(t,r)=>s(t,"name",{value:r,configurable:!0});var o=Object.defineProperty,a=n((t,r)=>o(t,"name",{value:r,configurable:!0}),"__name");function u(t){return Object.keys(t).reduce((r,i)=>{let e=t[i];return e?typeof e=="boolean"?e?(r+` ${i}`).trim():r:Array.isArray(e)?r+` ${i}="${e.join(" ")}"`:(r+` ${i}="${e}"`).trim():r},"")}n(u,"attributes");a(u,"attributes");function
|
|
1
|
+
var s=Object.defineProperty;var n=(t,r)=>s(t,"name",{value:r,configurable:!0});var o=Object.defineProperty,a=n((t,r)=>o(t,"name",{value:r,configurable:!0}),"__name");function u(t){return Object.keys(t).reduce((r,i)=>{let e=t[i];return e?typeof e=="boolean"?e?(r+` ${i}`).trim():r:Array.isArray(e)?r+` ${i}="${e.join(" ")}"`:(r+` ${i}="${e}"`).trim():r},"")}n(u,"attributes");a(u,"attributes");function b(t){return`<input ${u(t)} />`}n(b,"html");export{b as html};
|
|
2
2
|
//# sourceMappingURL=html.min.js.map
|
package/dist/html.min.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../node_modules/@substrate-system/util/src/to-string.ts", "../src/html.ts"],
|
|
4
|
-
"sourcesContent": ["/**\n * Transform an object into an HTML attributes string. The object should be\n * like `{ attributeName: value }`.\n *\n * @param attrs An object for the attributes.\n * @returns {string} A string suitable for use as HTML attributes.\n */\nexport function attributes (\n attrs:Record<string, undefined|null|string|number|boolean|(string|number)[]>\n):string {\n return Object.keys(attrs).reduce((acc, k) => {\n const value = attrs[k]\n if (!value) return acc\n\n if (typeof value === 'boolean') {\n if (value) return (acc + ` ${k}`).trim()\n return acc\n }\n\n if (Array.isArray(value)) {\n return (acc + ` ${k}=\"${value.join(' ')}\"`)\n }\n\n return (acc + ` ${k}=\"${value}\"`).trim()\n }, '')\n}\n", "import { attributes } from '@substrate-system/util/to-string'\n\n/**\n * HTML attributes as object\n */\nexport type Attrs = Partial<{\n id:string;\n class:string;\n disabled:string|true;\n autofocus:string|true;\n type:string;\n tabindex:number|string;\n value:string;\n required:boolean;\n placeholder:string|string[];\n name:string;\n}>\n\nexport function html (attrs:Attrs):string {\n return `<input ${attributes(attrs)} />`\n}\n"],
|
|
5
|
-
"mappings": "sKAOO,SAASA,EACZC,EACK,CACL,OAAO,OAAO,KAAKA,CAAK,EAAE,OAAO,CAACC,EAAKC,IAAM,CACzC,IAAMC,EAAQH,EAAME,CAAC,EACrB,OAAKC,EAED,OAAOA,GAAU,UACbA,GAAeF,EAAM,IAAIC,CAAC,IAAI,KAAK,EAChCD,EAGP,MAAM,QAAQE,CAAK,EACXF,EAAM,IAAIC,CAAC,KAAKC,EAAM,KAAK,GAAG,CAAC,KAGnCF,EAAM,IAAIC,CAAC,KAAKC,CAAK,KAAK,KAAK,EAXpBF,CAYvB,EAAG,EAAE,CACT,CAlBgBG,EAAAL,EAAA,cAAAK,EAAAL,EAAA,YAAA,
|
|
4
|
+
"sourcesContent": ["/**\n * Transform an object into an HTML attributes string. The object should be\n * like `{ attributeName: value }`.\n *\n * @param attrs An object for the attributes.\n * @returns {string} A string suitable for use as HTML attributes.\n */\nexport function attributes (\n attrs:Record<string, undefined|null|string|number|boolean|(string|number)[]>\n):string {\n return Object.keys(attrs).reduce((acc, k) => {\n const value = attrs[k]\n if (!value) return acc\n\n if (typeof value === 'boolean') {\n if (value) return (acc + ` ${k}`).trim()\n return acc\n }\n\n if (Array.isArray(value)) {\n return (acc + ` ${k}=\"${value.join(' ')}\"`)\n }\n\n return (acc + ` ${k}=\"${value}\"`).trim()\n }, '')\n}\n", "import { attributes } from '@substrate-system/util/to-string'\n\n/**\n * HTML attributes as object\n */\nexport type Attrs = Partial<{\n id:string;\n class:string;\n disabled:string|true;\n autofocus:string|true;\n type:string;\n tabindex:number|string;\n value:string;\n required:boolean;\n placeholder:string|string[];\n name:string;\n autocomplete:string;\n}>\n\nexport function html (attrs:Attrs):string {\n return `<input ${attributes(attrs)} />`\n}\n"],
|
|
5
|
+
"mappings": "sKAOO,SAASA,EACZC,EACK,CACL,OAAO,OAAO,KAAKA,CAAK,EAAE,OAAO,CAACC,EAAKC,IAAM,CACzC,IAAMC,EAAQH,EAAME,CAAC,EACrB,OAAKC,EAED,OAAOA,GAAU,UACbA,GAAeF,EAAM,IAAIC,CAAC,IAAI,KAAK,EAChCD,EAGP,MAAM,QAAQE,CAAK,EACXF,EAAM,IAAIC,CAAC,KAAKC,EAAM,KAAK,GAAG,CAAC,KAGnCF,EAAM,IAAIC,CAAC,KAAKC,CAAK,KAAK,KAAK,EAXpBF,CAYvB,EAAG,EAAE,CACT,CAlBgBG,EAAAL,EAAA,cAAAK,EAAAL,EAAA,YAAA,ECYT,SAASM,EAAMC,EAAoB,CACtC,MAAO,UAAUC,EAAWD,CAAK,CAAC,KACtC,CAFgBE,EAAAH,EAAA",
|
|
6
6
|
"names": ["attributes", "attrs", "acc", "k", "value", "__name", "html", "attrs", "attributes", "__name"]
|
|
7
7
|
}
|
package/dist/index.cjs
CHANGED
|
@@ -63,6 +63,9 @@ class Input extends HTMLElement {
|
|
|
63
63
|
get placeholder() {
|
|
64
64
|
return this.getAttribute("placeholder");
|
|
65
65
|
}
|
|
66
|
+
get autocomplete() {
|
|
67
|
+
return this.getAttribute("autocomplete");
|
|
68
|
+
}
|
|
66
69
|
set name(newName) {
|
|
67
70
|
this.setAttribute("name", newName);
|
|
68
71
|
}
|
|
@@ -159,7 +162,8 @@ class Input extends HTMLElement {
|
|
|
159
162
|
disabled,
|
|
160
163
|
value,
|
|
161
164
|
name,
|
|
162
|
-
placeholder
|
|
165
|
+
placeholder,
|
|
166
|
+
autocomplete
|
|
163
167
|
} = this;
|
|
164
168
|
if (!name) throw new Error("not name");
|
|
165
169
|
const classes = ["substrate-input"];
|
|
@@ -174,6 +178,7 @@ class Input extends HTMLElement {
|
|
|
174
178
|
btn ? 'role="button"' : "",
|
|
175
179
|
value ? `value="${value}"` : "",
|
|
176
180
|
name ? `name="${name}"` : "",
|
|
181
|
+
autocomplete ? `autocomplete="${autocomplete}"` : "",
|
|
177
182
|
placeholder ? `placeholder="${placeholder}"` : ""
|
|
178
183
|
].filter(Boolean).join(" ");
|
|
179
184
|
return `<input ${props} />`;
|
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 Debug from '@substrate-system/debug'\n// const debug = Debug()\n\nexport abstract class Input extends HTMLElement {\n // for `attributeChangedCallback`\n static observedAttributes = ['autofocus', 'disabled']\n static tag:string\n\n static define (this:((new (...args:any[]) => Input) & typeof Input)) {\n if (!('customElements' in window)) return\n if (customElements.get(this.tag)) return // only define it once\n\n return customElements.define(this.tag, this)\n }\n\n constructor () {\n super()\n const disabled = this.getAttribute('disabled')\n if (disabled !== null) {\n setTimeout(() => {\n // need to wait for it to render\n this.disabled = true\n }, 0)\n }\n\n // timeout b/c we need to render first\n setTimeout(() => {\n const attr = this.getAttribute('value')\n if (attr) this.value = attr\n\n const type = this.getAttribute('type')\n if (type) this.type = type\n }, 0)\n }\n\n get input ():HTMLInputElement|null {\n return this.querySelector('input')\n }\n\n get tabindex ():number {\n const i = this.input?.getAttribute('tabindex')\n if (!i) return 0\n return parseInt(i)\n }\n\n get name ():string|undefined|null {\n return this.getAttribute('name')\n }\n\n get placeholder ():string|null {\n return this.getAttribute('placeholder')\n }\n\n set name (newName:string) {\n this.setAttribute('name', newName)\n }\n\n /**\n * Remove from `this` element and also child.\n */\n _removeAttribute (name:string) {\n this.removeAttribute(name)\n this.input?.removeAttribute(name)\n }\n\n get disabled ():boolean {\n return !!(this.input?.hasAttribute('disabled'))\n }\n\n set disabled (disabledValue:boolean) {\n if (!disabledValue) {\n this._removeAttribute('disabled')\n this.input?.setAttribute('aria-disabled', 'false')\n } else {\n this.input?.setAttribute('disabled', '')\n this.input?.setAttribute('aria-disabled', 'true')\n }\n }\n\n /**\n * Handle 'example' attribute changes\n * @see {@link https://gomakethings.com/how-to-detect-when-attributes-change-on-a-web-component/#organizing-your-code Go Make Things article}\n *\n * @param {string|null} _oldValue The old attribute value\n * @param {string|null} newValue The new attribute value\n */\n handleChange_disabled (_oldValue:string, newValue:string) {\n if (!this.input) {\n setTimeout(() => {\n if (newValue === null || newValue === 'null') {\n this.disabled = false\n } else {\n this.disabled = true\n }\n }, 0) // wait to render\n } else {\n if (newValue === null || newValue === 'null') {\n this.disabled = false\n } else {\n this.disabled = true\n }\n }\n }\n\n /**\n * Runs when the value of an attribute is changed\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 attributeChangedCallback (name:string, oldValue:string, newValue:string) {\n const handler = this[`handleChange_${name}`];\n (handler && handler.call(this, oldValue, newValue))\n this.render()\n }\n\n connectedCallback () {\n this.render()\n }\n\n get type ():string|null|undefined {\n return this.input?.getAttribute('type')\n }\n\n set type (value:string) {\n this._setAttribute('type', value)\n }\n\n get value () {\n return this.input?.value\n }\n\n set value (text:string|undefined|null) {\n if (!text) this.input?.removeAttribute('value')\n else {\n this.input!.value = text\n }\n }\n\n /**\n * Set attributes on the internal input element.\n */\n _setAttribute (name:string, value:boolean|string|null):void {\n if (!value) {\n return this._removeAttribute(name)\n }\n\n if (value === true) {\n // true means set the attribute with no value\n return this.input?.setAttribute(name, '')\n }\n\n // else, set the value\n this.input?.setAttribute(name, value)\n }\n\n render ():string|void { // void for child class\n const {\n type,\n autofocus,\n tabindex,\n disabled,\n value,\n name,\n placeholder\n } = this\n\n if (!name) throw new Error('not name')\n\n const classes:string[] = ['substrate-input']\n\n const btn = !!(this.type === 'submit' || this.type === 'button')\n\n const props = ([\n `class=\"${classes.filter(Boolean).join(' ')}\"`,\n disabled ? 'disabled' : '',\n disabled ? 'aria-disabled=\"true\"' : 'aria-disabled=\"false\"',\n autofocus ? 'autofocus' : '',\n type ? `type=\"${this.type}\"` : '',\n tabindex ? `tabindex=\"${tabindex}\"` : 'tabindex=\"0\"',\n btn ? 'role=\"button\"' : '',\n value ? `value=\"${value}\"` : '',\n name ? `name=\"${name}\"` : '',\n placeholder ? `placeholder=\"${placeholder}\"` : ''\n ]).filter(Boolean).join(' ')\n\n return `<input ${props} />`\n }\n}\n"],
|
|
5
|
-
"mappings": "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",
|
|
4
|
+
"sourcesContent": ["// import Debug from '@substrate-system/debug'\n// const debug = Debug()\n\nexport abstract class Input extends HTMLElement {\n // for `attributeChangedCallback`\n static observedAttributes = ['autofocus', 'disabled']\n static tag:string\n\n static define (this:((new (...args:any[]) => Input) & typeof Input)) {\n if (!('customElements' in window)) return\n if (customElements.get(this.tag)) return // only define it once\n\n return customElements.define(this.tag, this)\n }\n\n constructor () {\n super()\n const disabled = this.getAttribute('disabled')\n if (disabled !== null) {\n setTimeout(() => {\n // need to wait for it to render\n this.disabled = true\n }, 0)\n }\n\n // timeout b/c we need to render first\n setTimeout(() => {\n const attr = this.getAttribute('value')\n if (attr) this.value = attr\n\n const type = this.getAttribute('type')\n if (type) this.type = type\n }, 0)\n }\n\n get input ():HTMLInputElement|null {\n return this.querySelector('input')\n }\n\n get tabindex ():number {\n const i = this.input?.getAttribute('tabindex')\n if (!i) return 0\n return parseInt(i)\n }\n\n get name ():string|undefined|null {\n return this.getAttribute('name')\n }\n\n get placeholder ():string|null {\n return this.getAttribute('placeholder')\n }\n\n get autocomplete ():string|null {\n return this.getAttribute('autocomplete')\n }\n\n set name (newName:string) {\n this.setAttribute('name', newName)\n }\n\n /**\n * Remove from `this` element and also child.\n */\n _removeAttribute (name:string) {\n this.removeAttribute(name)\n this.input?.removeAttribute(name)\n }\n\n get disabled ():boolean {\n return !!(this.input?.hasAttribute('disabled'))\n }\n\n set disabled (disabledValue:boolean) {\n if (!disabledValue) {\n this._removeAttribute('disabled')\n this.input?.setAttribute('aria-disabled', 'false')\n } else {\n this.input?.setAttribute('disabled', '')\n this.input?.setAttribute('aria-disabled', 'true')\n }\n }\n\n /**\n * Handle 'example' attribute changes\n * @see {@link https://gomakethings.com/how-to-detect-when-attributes-change-on-a-web-component/#organizing-your-code Go Make Things article}\n *\n * @param {string|null} _oldValue The old attribute value\n * @param {string|null} newValue The new attribute value\n */\n handleChange_disabled (_oldValue:string, newValue:string) {\n if (!this.input) {\n setTimeout(() => {\n if (newValue === null || newValue === 'null') {\n this.disabled = false\n } else {\n this.disabled = true\n }\n }, 0) // wait to render\n } else {\n if (newValue === null || newValue === 'null') {\n this.disabled = false\n } else {\n this.disabled = true\n }\n }\n }\n\n /**\n * Runs when the value of an attribute is changed\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 attributeChangedCallback (name:string, oldValue:string, newValue:string) {\n const handler = this[`handleChange_${name}`];\n (handler && handler.call(this, oldValue, newValue))\n this.render()\n }\n\n connectedCallback () {\n this.render()\n }\n\n get type ():string|null|undefined {\n return this.input?.getAttribute('type')\n }\n\n set type (value:string) {\n this._setAttribute('type', value)\n }\n\n get value () {\n return this.input?.value\n }\n\n set value (text:string|undefined|null) {\n if (!text) this.input?.removeAttribute('value')\n else {\n this.input!.value = text\n }\n }\n\n /**\n * Set attributes on the internal input element.\n */\n _setAttribute (name:string, value:boolean|string|null):void {\n if (!value) {\n return this._removeAttribute(name)\n }\n\n if (value === true) {\n // true means set the attribute with no value\n return this.input?.setAttribute(name, '')\n }\n\n // else, set the value\n this.input?.setAttribute(name, value)\n }\n\n render ():string|void { // void for child class\n const {\n type,\n autofocus,\n tabindex,\n disabled,\n value,\n name,\n placeholder,\n autocomplete\n } = this\n\n if (!name) throw new Error('not name')\n\n const classes:string[] = ['substrate-input']\n\n const btn = !!(this.type === 'submit' || this.type === 'button')\n\n const props = ([\n `class=\"${classes.filter(Boolean).join(' ')}\"`,\n disabled ? 'disabled' : '',\n disabled ? 'aria-disabled=\"true\"' : 'aria-disabled=\"false\"',\n autofocus ? 'autofocus' : '',\n type ? `type=\"${this.type}\"` : '',\n tabindex ? `tabindex=\"${tabindex}\"` : 'tabindex=\"0\"',\n btn ? 'role=\"button\"' : '',\n value ? `value=\"${value}\"` : '',\n name ? `name=\"${name}\"` : '',\n autocomplete ? `autocomplete=\"${autocomplete}\"` : '',\n placeholder ? `placeholder=\"${placeholder}\"` : ''\n ]).filter(Boolean).join(' ')\n\n return `<input ${props} />`\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/index.d.ts
CHANGED
|
@@ -7,6 +7,7 @@ export declare abstract class Input extends HTMLElement {
|
|
|
7
7
|
get tabindex(): number;
|
|
8
8
|
get name(): string | undefined | null;
|
|
9
9
|
get placeholder(): string | null;
|
|
10
|
+
get autocomplete(): string | null;
|
|
10
11
|
set name(newName: string);
|
|
11
12
|
/**
|
|
12
13
|
* Remove from `this` element and also child.
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAGA,8BAAsB,KAAM,SAAQ,WAAW;IAE3C,MAAM,CAAC,kBAAkB,WAA4B;IACrD,MAAM,CAAC,GAAG,EAAC,MAAM,CAAA;IAEjB,MAAM,CAAC,MAAM,CAAE,IAAI,EAAC,CAAC,CAAC,KAAK,GAAG,IAAI,EAAC,GAAG,EAAE,KAAK,KAAK,CAAC,GAAG,OAAO,KAAK,CAAC;;IA2BnE,IAAI,KAAK,IAAI,gBAAgB,GAAC,IAAI,CAEjC;IAED,IAAI,QAAQ,IAAI,MAAM,CAIrB;IAED,IAAI,IAAI,IAAI,MAAM,GAAC,SAAS,GAAC,IAAI,CAEhC;IAED,IAAI,WAAW,IAAI,MAAM,GAAC,IAAI,CAE7B;IAED,IAAI,IAAI,CAAE,OAAO,EAAC,MAAM,EAEvB;IAED;;OAEG;IACH,gBAAgB,CAAE,IAAI,EAAC,MAAM;IAK7B,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED,IAAI,QAAQ,CAAE,aAAa,EAAC,OAAO,EAQlC;IAED;;;;;;OAMG;IACH,qBAAqB,CAAE,SAAS,EAAC,MAAM,EAAE,QAAQ,EAAC,MAAM;IAkBxD;;;;;;OAMG;IACH,wBAAwB,CAAE,IAAI,EAAC,MAAM,EAAE,QAAQ,EAAC,MAAM,EAAE,QAAQ,EAAC,MAAM;IAMvE,iBAAiB;IAIjB,IAAI,IAAI,IAAI,MAAM,GAAC,IAAI,GAAC,SAAS,CAEhC;IAED,IAAI,IAAI,CAAE,KAAK,EAAC,MAAM,EAErB;IAED,IAAI,KAAK,IAIO,MAAM,GAAC,SAAS,GAAC,IAAI,CAFpC;IAED,IAAI,KAAK,CAAE,IAAI,EAAC,MAAM,GAAC,SAAS,GAAC,IAAI,EAKpC;IAED;;OAEG;IACH,aAAa,CAAE,IAAI,EAAC,MAAM,EAAE,KAAK,EAAC,OAAO,GAAC,MAAM,GAAC,IAAI,GAAE,IAAI;IAc3D,MAAM,IAAI,MAAM,GAAC,IAAI;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAGA,8BAAsB,KAAM,SAAQ,WAAW;IAE3C,MAAM,CAAC,kBAAkB,WAA4B;IACrD,MAAM,CAAC,GAAG,EAAC,MAAM,CAAA;IAEjB,MAAM,CAAC,MAAM,CAAE,IAAI,EAAC,CAAC,CAAC,KAAK,GAAG,IAAI,EAAC,GAAG,EAAE,KAAK,KAAK,CAAC,GAAG,OAAO,KAAK,CAAC;;IA2BnE,IAAI,KAAK,IAAI,gBAAgB,GAAC,IAAI,CAEjC;IAED,IAAI,QAAQ,IAAI,MAAM,CAIrB;IAED,IAAI,IAAI,IAAI,MAAM,GAAC,SAAS,GAAC,IAAI,CAEhC;IAED,IAAI,WAAW,IAAI,MAAM,GAAC,IAAI,CAE7B;IAED,IAAI,YAAY,IAAI,MAAM,GAAC,IAAI,CAE9B;IAED,IAAI,IAAI,CAAE,OAAO,EAAC,MAAM,EAEvB;IAED;;OAEG;IACH,gBAAgB,CAAE,IAAI,EAAC,MAAM;IAK7B,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED,IAAI,QAAQ,CAAE,aAAa,EAAC,OAAO,EAQlC;IAED;;;;;;OAMG;IACH,qBAAqB,CAAE,SAAS,EAAC,MAAM,EAAE,QAAQ,EAAC,MAAM;IAkBxD;;;;;;OAMG;IACH,wBAAwB,CAAE,IAAI,EAAC,MAAM,EAAE,QAAQ,EAAC,MAAM,EAAE,QAAQ,EAAC,MAAM;IAMvE,iBAAiB;IAIjB,IAAI,IAAI,IAAI,MAAM,GAAC,IAAI,GAAC,SAAS,CAEhC;IAED,IAAI,IAAI,CAAE,KAAK,EAAC,MAAM,EAErB;IAED,IAAI,KAAK,IAIO,MAAM,GAAC,SAAS,GAAC,IAAI,CAFpC;IAED,IAAI,KAAK,CAAE,IAAI,EAAC,MAAM,GAAC,SAAS,GAAC,IAAI,EAKpC;IAED;;OAEG;IACH,aAAa,CAAE,IAAI,EAAC,MAAM,EAAE,KAAK,EAAC,OAAO,GAAC,MAAM,GAAC,IAAI,GAAE,IAAI;IAc3D,MAAM,IAAI,MAAM,GAAC,IAAI;CAkCxB"}
|
package/dist/index.js
CHANGED
|
@@ -41,6 +41,9 @@ class Input extends HTMLElement {
|
|
|
41
41
|
get placeholder() {
|
|
42
42
|
return this.getAttribute("placeholder");
|
|
43
43
|
}
|
|
44
|
+
get autocomplete() {
|
|
45
|
+
return this.getAttribute("autocomplete");
|
|
46
|
+
}
|
|
44
47
|
set name(newName) {
|
|
45
48
|
this.setAttribute("name", newName);
|
|
46
49
|
}
|
|
@@ -137,7 +140,8 @@ class Input extends HTMLElement {
|
|
|
137
140
|
disabled,
|
|
138
141
|
value,
|
|
139
142
|
name,
|
|
140
|
-
placeholder
|
|
143
|
+
placeholder,
|
|
144
|
+
autocomplete
|
|
141
145
|
} = this;
|
|
142
146
|
if (!name) throw new Error("not name");
|
|
143
147
|
const classes = ["substrate-input"];
|
|
@@ -152,6 +156,7 @@ class Input extends HTMLElement {
|
|
|
152
156
|
btn ? 'role="button"' : "",
|
|
153
157
|
value ? `value="${value}"` : "",
|
|
154
158
|
name ? `name="${name}"` : "",
|
|
159
|
+
autocomplete ? `autocomplete="${autocomplete}"` : "",
|
|
155
160
|
placeholder ? `placeholder="${placeholder}"` : ""
|
|
156
161
|
].filter(Boolean).join(" ");
|
|
157
162
|
return `<input ${props} />`;
|
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 Debug from '@substrate-system/debug'\n// const debug = Debug()\n\nexport abstract class Input extends HTMLElement {\n // for `attributeChangedCallback`\n static observedAttributes = ['autofocus', 'disabled']\n static tag:string\n\n static define (this:((new (...args:any[]) => Input) & typeof Input)) {\n if (!('customElements' in window)) return\n if (customElements.get(this.tag)) return // only define it once\n\n return customElements.define(this.tag, this)\n }\n\n constructor () {\n super()\n const disabled = this.getAttribute('disabled')\n if (disabled !== null) {\n setTimeout(() => {\n // need to wait for it to render\n this.disabled = true\n }, 0)\n }\n\n // timeout b/c we need to render first\n setTimeout(() => {\n const attr = this.getAttribute('value')\n if (attr) this.value = attr\n\n const type = this.getAttribute('type')\n if (type) this.type = type\n }, 0)\n }\n\n get input ():HTMLInputElement|null {\n return this.querySelector('input')\n }\n\n get tabindex ():number {\n const i = this.input?.getAttribute('tabindex')\n if (!i) return 0\n return parseInt(i)\n }\n\n get name ():string|undefined|null {\n return this.getAttribute('name')\n }\n\n get placeholder ():string|null {\n return this.getAttribute('placeholder')\n }\n\n set name (newName:string) {\n this.setAttribute('name', newName)\n }\n\n /**\n * Remove from `this` element and also child.\n */\n _removeAttribute (name:string) {\n this.removeAttribute(name)\n this.input?.removeAttribute(name)\n }\n\n get disabled ():boolean {\n return !!(this.input?.hasAttribute('disabled'))\n }\n\n set disabled (disabledValue:boolean) {\n if (!disabledValue) {\n this._removeAttribute('disabled')\n this.input?.setAttribute('aria-disabled', 'false')\n } else {\n this.input?.setAttribute('disabled', '')\n this.input?.setAttribute('aria-disabled', 'true')\n }\n }\n\n /**\n * Handle 'example' attribute changes\n * @see {@link https://gomakethings.com/how-to-detect-when-attributes-change-on-a-web-component/#organizing-your-code Go Make Things article}\n *\n * @param {string|null} _oldValue The old attribute value\n * @param {string|null} newValue The new attribute value\n */\n handleChange_disabled (_oldValue:string, newValue:string) {\n if (!this.input) {\n setTimeout(() => {\n if (newValue === null || newValue === 'null') {\n this.disabled = false\n } else {\n this.disabled = true\n }\n }, 0) // wait to render\n } else {\n if (newValue === null || newValue === 'null') {\n this.disabled = false\n } else {\n this.disabled = true\n }\n }\n }\n\n /**\n * Runs when the value of an attribute is changed\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 attributeChangedCallback (name:string, oldValue:string, newValue:string) {\n const handler = this[`handleChange_${name}`];\n (handler && handler.call(this, oldValue, newValue))\n this.render()\n }\n\n connectedCallback () {\n this.render()\n }\n\n get type ():string|null|undefined {\n return this.input?.getAttribute('type')\n }\n\n set type (value:string) {\n this._setAttribute('type', value)\n }\n\n get value () {\n return this.input?.value\n }\n\n set value (text:string|undefined|null) {\n if (!text) this.input?.removeAttribute('value')\n else {\n this.input!.value = text\n }\n }\n\n /**\n * Set attributes on the internal input element.\n */\n _setAttribute (name:string, value:boolean|string|null):void {\n if (!value) {\n return this._removeAttribute(name)\n }\n\n if (value === true) {\n // true means set the attribute with no value\n return this.input?.setAttribute(name, '')\n }\n\n // else, set the value\n this.input?.setAttribute(name, value)\n }\n\n render ():string|void { // void for child class\n const {\n type,\n autofocus,\n tabindex,\n disabled,\n value,\n name,\n placeholder\n } = this\n\n if (!name) throw new Error('not name')\n\n const classes:string[] = ['substrate-input']\n\n const btn = !!(this.type === 'submit' || this.type === 'button')\n\n const props = ([\n `class=\"${classes.filter(Boolean).join(' ')}\"`,\n disabled ? 'disabled' : '',\n disabled ? 'aria-disabled=\"true\"' : 'aria-disabled=\"false\"',\n autofocus ? 'autofocus' : '',\n type ? `type=\"${this.type}\"` : '',\n tabindex ? `tabindex=\"${tabindex}\"` : 'tabindex=\"0\"',\n btn ? 'role=\"button\"' : '',\n value ? `value=\"${value}\"` : '',\n name ? `name=\"${name}\"` : '',\n placeholder ? `placeholder=\"${placeholder}\"` : ''\n ]).filter(Boolean).join(' ')\n\n return `<input ${props} />`\n }\n}\n"],
|
|
5
|
-
"mappings": "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",
|
|
4
|
+
"sourcesContent": ["// import Debug from '@substrate-system/debug'\n// const debug = Debug()\n\nexport abstract class Input extends HTMLElement {\n // for `attributeChangedCallback`\n static observedAttributes = ['autofocus', 'disabled']\n static tag:string\n\n static define (this:((new (...args:any[]) => Input) & typeof Input)) {\n if (!('customElements' in window)) return\n if (customElements.get(this.tag)) return // only define it once\n\n return customElements.define(this.tag, this)\n }\n\n constructor () {\n super()\n const disabled = this.getAttribute('disabled')\n if (disabled !== null) {\n setTimeout(() => {\n // need to wait for it to render\n this.disabled = true\n }, 0)\n }\n\n // timeout b/c we need to render first\n setTimeout(() => {\n const attr = this.getAttribute('value')\n if (attr) this.value = attr\n\n const type = this.getAttribute('type')\n if (type) this.type = type\n }, 0)\n }\n\n get input ():HTMLInputElement|null {\n return this.querySelector('input')\n }\n\n get tabindex ():number {\n const i = this.input?.getAttribute('tabindex')\n if (!i) return 0\n return parseInt(i)\n }\n\n get name ():string|undefined|null {\n return this.getAttribute('name')\n }\n\n get placeholder ():string|null {\n return this.getAttribute('placeholder')\n }\n\n get autocomplete ():string|null {\n return this.getAttribute('autocomplete')\n }\n\n set name (newName:string) {\n this.setAttribute('name', newName)\n }\n\n /**\n * Remove from `this` element and also child.\n */\n _removeAttribute (name:string) {\n this.removeAttribute(name)\n this.input?.removeAttribute(name)\n }\n\n get disabled ():boolean {\n return !!(this.input?.hasAttribute('disabled'))\n }\n\n set disabled (disabledValue:boolean) {\n if (!disabledValue) {\n this._removeAttribute('disabled')\n this.input?.setAttribute('aria-disabled', 'false')\n } else {\n this.input?.setAttribute('disabled', '')\n this.input?.setAttribute('aria-disabled', 'true')\n }\n }\n\n /**\n * Handle 'example' attribute changes\n * @see {@link https://gomakethings.com/how-to-detect-when-attributes-change-on-a-web-component/#organizing-your-code Go Make Things article}\n *\n * @param {string|null} _oldValue The old attribute value\n * @param {string|null} newValue The new attribute value\n */\n handleChange_disabled (_oldValue:string, newValue:string) {\n if (!this.input) {\n setTimeout(() => {\n if (newValue === null || newValue === 'null') {\n this.disabled = false\n } else {\n this.disabled = true\n }\n }, 0) // wait to render\n } else {\n if (newValue === null || newValue === 'null') {\n this.disabled = false\n } else {\n this.disabled = true\n }\n }\n }\n\n /**\n * Runs when the value of an attribute is changed\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 attributeChangedCallback (name:string, oldValue:string, newValue:string) {\n const handler = this[`handleChange_${name}`];\n (handler && handler.call(this, oldValue, newValue))\n this.render()\n }\n\n connectedCallback () {\n this.render()\n }\n\n get type ():string|null|undefined {\n return this.input?.getAttribute('type')\n }\n\n set type (value:string) {\n this._setAttribute('type', value)\n }\n\n get value () {\n return this.input?.value\n }\n\n set value (text:string|undefined|null) {\n if (!text) this.input?.removeAttribute('value')\n else {\n this.input!.value = text\n }\n }\n\n /**\n * Set attributes on the internal input element.\n */\n _setAttribute (name:string, value:boolean|string|null):void {\n if (!value) {\n return this._removeAttribute(name)\n }\n\n if (value === true) {\n // true means set the attribute with no value\n return this.input?.setAttribute(name, '')\n }\n\n // else, set the value\n this.input?.setAttribute(name, value)\n }\n\n render ():string|void { // void for child class\n const {\n type,\n autofocus,\n tabindex,\n disabled,\n value,\n name,\n placeholder,\n autocomplete\n } = this\n\n if (!name) throw new Error('not name')\n\n const classes:string[] = ['substrate-input']\n\n const btn = !!(this.type === 'submit' || this.type === 'button')\n\n const props = ([\n `class=\"${classes.filter(Boolean).join(' ')}\"`,\n disabled ? 'disabled' : '',\n disabled ? 'aria-disabled=\"true\"' : 'aria-disabled=\"false\"',\n autofocus ? 'autofocus' : '',\n type ? `type=\"${this.type}\"` : '',\n tabindex ? `tabindex=\"${tabindex}\"` : 'tabindex=\"0\"',\n btn ? 'role=\"button\"' : '',\n value ? `value=\"${value}\"` : '',\n name ? `name=\"${name}\"` : '',\n autocomplete ? `autocomplete=\"${autocomplete}\"` : '',\n placeholder ? `placeholder=\"${placeholder}\"` : ''\n ]).filter(Boolean).join(' ')\n\n return `<input ${props} />`\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/index.min.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var
|
|
1
|
+
var p=Object.defineProperty;var d=(r,t)=>p(r,"name",{value:t,configurable:!0});var o=class extends HTMLElement{static{d(this,"Input")}static observedAttributes=["autofocus","disabled"];static tag;static define(){if("customElements"in window&&!customElements.get(this.tag))return customElements.define(this.tag,this)}constructor(){super(),this.getAttribute("disabled")!==null&&setTimeout(()=>{this.disabled=!0},0),setTimeout(()=>{let e=this.getAttribute("value");e&&(this.value=e);let i=this.getAttribute("type");i&&(this.type=i)},0)}get input(){return this.querySelector("input")}get tabindex(){let t=this.input?.getAttribute("tabindex");return t?parseInt(t):0}get name(){return this.getAttribute("name")}get placeholder(){return this.getAttribute("placeholder")}get autocomplete(){return this.getAttribute("autocomplete")}set name(t){this.setAttribute("name",t)}_removeAttribute(t){this.removeAttribute(t),this.input?.removeAttribute(t)}get disabled(){return!!this.input?.hasAttribute("disabled")}set disabled(t){t?(this.input?.setAttribute("disabled",""),this.input?.setAttribute("aria-disabled","true")):(this._removeAttribute("disabled"),this.input?.setAttribute("aria-disabled","false"))}handleChange_disabled(t,e){this.input?e===null||e==="null"?this.disabled=!1:this.disabled=!0:setTimeout(()=>{e===null||e==="null"?this.disabled=!1:this.disabled=!0},0)}attributeChangedCallback(t,e,i){let s=this[`handleChange_${t}`];s&&s.call(this,e,i),this.render()}connectedCallback(){this.render()}get type(){return this.input?.getAttribute("type")}set type(t){this._setAttribute("type",t)}get value(){return this.input?.value}set value(t){t?this.input.value=t:this.input?.removeAttribute("value")}_setAttribute(t,e){if(!e)return this._removeAttribute(t);if(e===!0)return this.input?.setAttribute(t,"");this.input?.setAttribute(t,e)}render(){let{type:t,autofocus:e,tabindex:i,disabled:s,value:u,name:n,placeholder:l,autocomplete:a}=this;if(!n)throw new Error("not name");let b=["substrate-input"],h=this.type==="submit"||this.type==="button";return`<input ${[`class="${b.filter(Boolean).join(" ")}"`,s?"disabled":"",s?'aria-disabled="true"':'aria-disabled="false"',e?"autofocus":"",t?`type="${this.type}"`:"",i?`tabindex="${i}"`:'tabindex="0"',h?'role="button"':"",u?`value="${u}"`:"",n?`name="${n}"`:"",a?`autocomplete="${a}"`:"",l?`placeholder="${l}"`:""].filter(Boolean).join(" ")} />`}};export{o as Input};
|
|
2
2
|
//# sourceMappingURL=index.min.js.map
|
package/dist/index.min.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/index.ts"],
|
|
4
|
-
"sourcesContent": ["// import Debug from '@substrate-system/debug'\n// const debug = Debug()\n\nexport abstract class Input extends HTMLElement {\n // for `attributeChangedCallback`\n static observedAttributes = ['autofocus', 'disabled']\n static tag:string\n\n static define (this:((new (...args:any[]) => Input) & typeof Input)) {\n if (!('customElements' in window)) return\n if (customElements.get(this.tag)) return // only define it once\n\n return customElements.define(this.tag, this)\n }\n\n constructor () {\n super()\n const disabled = this.getAttribute('disabled')\n if (disabled !== null) {\n setTimeout(() => {\n // need to wait for it to render\n this.disabled = true\n }, 0)\n }\n\n // timeout b/c we need to render first\n setTimeout(() => {\n const attr = this.getAttribute('value')\n if (attr) this.value = attr\n\n const type = this.getAttribute('type')\n if (type) this.type = type\n }, 0)\n }\n\n get input ():HTMLInputElement|null {\n return this.querySelector('input')\n }\n\n get tabindex ():number {\n const i = this.input?.getAttribute('tabindex')\n if (!i) return 0\n return parseInt(i)\n }\n\n get name ():string|undefined|null {\n return this.getAttribute('name')\n }\n\n get placeholder ():string|null {\n return this.getAttribute('placeholder')\n }\n\n set name (newName:string) {\n this.setAttribute('name', newName)\n }\n\n /**\n * Remove from `this` element and also child.\n */\n _removeAttribute (name:string) {\n this.removeAttribute(name)\n this.input?.removeAttribute(name)\n }\n\n get disabled ():boolean {\n return !!(this.input?.hasAttribute('disabled'))\n }\n\n set disabled (disabledValue:boolean) {\n if (!disabledValue) {\n this._removeAttribute('disabled')\n this.input?.setAttribute('aria-disabled', 'false')\n } else {\n this.input?.setAttribute('disabled', '')\n this.input?.setAttribute('aria-disabled', 'true')\n }\n }\n\n /**\n * Handle 'example' attribute changes\n * @see {@link https://gomakethings.com/how-to-detect-when-attributes-change-on-a-web-component/#organizing-your-code Go Make Things article}\n *\n * @param {string|null} _oldValue The old attribute value\n * @param {string|null} newValue The new attribute value\n */\n handleChange_disabled (_oldValue:string, newValue:string) {\n if (!this.input) {\n setTimeout(() => {\n if (newValue === null || newValue === 'null') {\n this.disabled = false\n } else {\n this.disabled = true\n }\n }, 0) // wait to render\n } else {\n if (newValue === null || newValue === 'null') {\n this.disabled = false\n } else {\n this.disabled = true\n }\n }\n }\n\n /**\n * Runs when the value of an attribute is changed\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 attributeChangedCallback (name:string, oldValue:string, newValue:string) {\n const handler = this[`handleChange_${name}`];\n (handler && handler.call(this, oldValue, newValue))\n this.render()\n }\n\n connectedCallback () {\n this.render()\n }\n\n get type ():string|null|undefined {\n return this.input?.getAttribute('type')\n }\n\n set type (value:string) {\n this._setAttribute('type', value)\n }\n\n get value () {\n return this.input?.value\n }\n\n set value (text:string|undefined|null) {\n if (!text) this.input?.removeAttribute('value')\n else {\n this.input!.value = text\n }\n }\n\n /**\n * Set attributes on the internal input element.\n */\n _setAttribute (name:string, value:boolean|string|null):void {\n if (!value) {\n return this._removeAttribute(name)\n }\n\n if (value === true) {\n // true means set the attribute with no value\n return this.input?.setAttribute(name, '')\n }\n\n // else, set the value\n this.input?.setAttribute(name, value)\n }\n\n render ():string|void { // void for child class\n const {\n type,\n autofocus,\n tabindex,\n disabled,\n value,\n name,\n placeholder\n } = this\n\n if (!name) throw new Error('not name')\n\n const classes:string[] = ['substrate-input']\n\n const btn = !!(this.type === 'submit' || this.type === 'button')\n\n const props = ([\n `class=\"${classes.filter(Boolean).join(' ')}\"`,\n disabled ? 'disabled' : '',\n disabled ? 'aria-disabled=\"true\"' : 'aria-disabled=\"false\"',\n autofocus ? 'autofocus' : '',\n type ? `type=\"${this.type}\"` : '',\n tabindex ? `tabindex=\"${tabindex}\"` : 'tabindex=\"0\"',\n btn ? 'role=\"button\"' : '',\n value ? `value=\"${value}\"` : '',\n name ? `name=\"${name}\"` : '',\n placeholder ? `placeholder=\"${placeholder}\"` : ''\n ]).filter(Boolean).join(' ')\n\n return `<input ${props} />`\n }\n}\n"],
|
|
5
|
-
"mappings": "+EAGO,IAAeA,EAAf,cAA6B,WAAY,CAHhD,MAGgD,CAAAC,EAAA,cAE5C,OAAO,mBAAqB,CAAC,YAAa,UAAU,EACpD,OAAO,IAEP,OAAO,QAA8D,CACjE,GAAM,mBAAoB,QACtB,gBAAe,IAAI,KAAK,GAAG,EAE/B,OAAO,eAAe,OAAO,KAAK,IAAK,IAAI,CAC/C,CAEA,aAAe,CACX,MAAM,EACW,KAAK,aAAa,UAAU,IAC5B,MACb,WAAW,IAAM,CAEb,KAAK,SAAW,EACpB,EAAG,CAAC,EAIR,WAAW,IAAM,CACb,IAAMC,EAAO,KAAK,aAAa,OAAO,EAClCA,IAAM,KAAK,MAAQA,GAEvB,IAAMC,EAAO,KAAK,aAAa,MAAM,EACjCA,IAAM,KAAK,KAAOA,EAC1B,EAAG,CAAC,CACR,CAEA,IAAI,OAA+B,CAC/B,OAAO,KAAK,cAAc,OAAO,CACrC,CAEA,IAAI,UAAmB,CACnB,IAAMC,EAAI,KAAK,OAAO,aAAa,UAAU,EAC7C,OAAKA,EACE,SAASA,CAAC,EADF,CAEnB,CAEA,IAAI,MAA8B,CAC9B,OAAO,KAAK,aAAa,MAAM,CACnC,CAEA,IAAI,aAA2B,CAC3B,OAAO,KAAK,aAAa,aAAa,CAC1C,CAEA,IAAI,KAAMC,EAAgB,CACtB,KAAK,aAAa,OAAQA,CAAO,CACrC,CAKA,iBAAkBC,EAAa,CAC3B,KAAK,gBAAgBA,CAAI,EACzB,KAAK,OAAO,gBAAgBA,CAAI,CACpC,CAEA,IAAI,UAAoB,CACpB,MAAO,CAAC,CAAE,KAAK,OAAO,aAAa,UAAU,CACjD,CAEA,IAAI,SAAUC,EAAuB,CAC5BA,GAID,KAAK,OAAO,aAAa,WAAY,EAAE,EACvC,KAAK,OAAO,aAAa,gBAAiB,MAAM,IAJhD,KAAK,iBAAiB,UAAU,EAChC,KAAK,OAAO,aAAa,gBAAiB,OAAO,EAKzD,CASA,sBAAuBC,EAAkBC,EAAiB,CACjD,KAAK,MASFA,IAAa,MAAQA,IAAa,OAClC,KAAK,SAAW,GAEhB,KAAK,SAAW,GAXpB,WAAW,IAAM,CACTA,IAAa,MAAQA,IAAa,OAClC,KAAK,SAAW,GAEhB,KAAK,SAAW,EAExB,EAAG,CAAC,CAQZ,CASA,yBAA0BH,EAAaI,EAAiBD,EAAiB,CACrE,IAAME,EAAU,KAAK,gBAAgBL,CAAI,EAAE,EAC1CK,GAAWA,EAAQ,KAAK,KAAMD,EAAUD,CAAQ,EACjD,KAAK,OAAO,CAChB,CAEA,mBAAqB,CACjB,KAAK,OAAO,CAChB,CAEA,IAAI,MAA8B,CAC9B,OAAO,KAAK,OAAO,aAAa,MAAM,CAC1C,CAEA,IAAI,KAAMG,EAAc,CACpB,KAAK,cAAc,OAAQA,CAAK,CACpC,CAEA,IAAI,OAAS,CACT,OAAO,KAAK,OAAO,KACvB,CAEA,IAAI,MAAOC,EAA4B,CAC9BA,EAED,KAAK,MAAO,MAAQA,EAFb,KAAK,OAAO,gBAAgB,OAAO,CAIlD,CAKA,cAAeP,EAAaM,EAAgC,CACxD,GAAI,CAACA,EACD,OAAO,KAAK,iBAAiBN,CAAI,EAGrC,GAAIM,IAAU,GAEV,OAAO,KAAK,OAAO,aAAaN,EAAM,EAAE,EAI5C,KAAK,OAAO,aAAaA,EAAMM,CAAK,CACxC,CAEA,QAAsB,CAClB,GAAM,CACF,KAAAT,EACA,UAAAW,EACA,SAAAC,EACA,SAAAC,EACA,MAAAJ,EACA,KAAAN,EACA,YAAAW,CACJ,EAAI,KAEJ,GAAI,
|
|
6
|
-
"names": ["Input", "__name", "attr", "type", "i", "newName", "name", "disabledValue", "_oldValue", "newValue", "oldValue", "handler", "value", "text", "autofocus", "tabindex", "disabled", "placeholder", "classes", "btn"]
|
|
4
|
+
"sourcesContent": ["// import Debug from '@substrate-system/debug'\n// const debug = Debug()\n\nexport abstract class Input extends HTMLElement {\n // for `attributeChangedCallback`\n static observedAttributes = ['autofocus', 'disabled']\n static tag:string\n\n static define (this:((new (...args:any[]) => Input) & typeof Input)) {\n if (!('customElements' in window)) return\n if (customElements.get(this.tag)) return // only define it once\n\n return customElements.define(this.tag, this)\n }\n\n constructor () {\n super()\n const disabled = this.getAttribute('disabled')\n if (disabled !== null) {\n setTimeout(() => {\n // need to wait for it to render\n this.disabled = true\n }, 0)\n }\n\n // timeout b/c we need to render first\n setTimeout(() => {\n const attr = this.getAttribute('value')\n if (attr) this.value = attr\n\n const type = this.getAttribute('type')\n if (type) this.type = type\n }, 0)\n }\n\n get input ():HTMLInputElement|null {\n return this.querySelector('input')\n }\n\n get tabindex ():number {\n const i = this.input?.getAttribute('tabindex')\n if (!i) return 0\n return parseInt(i)\n }\n\n get name ():string|undefined|null {\n return this.getAttribute('name')\n }\n\n get placeholder ():string|null {\n return this.getAttribute('placeholder')\n }\n\n get autocomplete ():string|null {\n return this.getAttribute('autocomplete')\n }\n\n set name (newName:string) {\n this.setAttribute('name', newName)\n }\n\n /**\n * Remove from `this` element and also child.\n */\n _removeAttribute (name:string) {\n this.removeAttribute(name)\n this.input?.removeAttribute(name)\n }\n\n get disabled ():boolean {\n return !!(this.input?.hasAttribute('disabled'))\n }\n\n set disabled (disabledValue:boolean) {\n if (!disabledValue) {\n this._removeAttribute('disabled')\n this.input?.setAttribute('aria-disabled', 'false')\n } else {\n this.input?.setAttribute('disabled', '')\n this.input?.setAttribute('aria-disabled', 'true')\n }\n }\n\n /**\n * Handle 'example' attribute changes\n * @see {@link https://gomakethings.com/how-to-detect-when-attributes-change-on-a-web-component/#organizing-your-code Go Make Things article}\n *\n * @param {string|null} _oldValue The old attribute value\n * @param {string|null} newValue The new attribute value\n */\n handleChange_disabled (_oldValue:string, newValue:string) {\n if (!this.input) {\n setTimeout(() => {\n if (newValue === null || newValue === 'null') {\n this.disabled = false\n } else {\n this.disabled = true\n }\n }, 0) // wait to render\n } else {\n if (newValue === null || newValue === 'null') {\n this.disabled = false\n } else {\n this.disabled = true\n }\n }\n }\n\n /**\n * Runs when the value of an attribute is changed\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 attributeChangedCallback (name:string, oldValue:string, newValue:string) {\n const handler = this[`handleChange_${name}`];\n (handler && handler.call(this, oldValue, newValue))\n this.render()\n }\n\n connectedCallback () {\n this.render()\n }\n\n get type ():string|null|undefined {\n return this.input?.getAttribute('type')\n }\n\n set type (value:string) {\n this._setAttribute('type', value)\n }\n\n get value () {\n return this.input?.value\n }\n\n set value (text:string|undefined|null) {\n if (!text) this.input?.removeAttribute('value')\n else {\n this.input!.value = text\n }\n }\n\n /**\n * Set attributes on the internal input element.\n */\n _setAttribute (name:string, value:boolean|string|null):void {\n if (!value) {\n return this._removeAttribute(name)\n }\n\n if (value === true) {\n // true means set the attribute with no value\n return this.input?.setAttribute(name, '')\n }\n\n // else, set the value\n this.input?.setAttribute(name, value)\n }\n\n render ():string|void { // void for child class\n const {\n type,\n autofocus,\n tabindex,\n disabled,\n value,\n name,\n placeholder,\n autocomplete\n } = this\n\n if (!name) throw new Error('not name')\n\n const classes:string[] = ['substrate-input']\n\n const btn = !!(this.type === 'submit' || this.type === 'button')\n\n const props = ([\n `class=\"${classes.filter(Boolean).join(' ')}\"`,\n disabled ? 'disabled' : '',\n disabled ? 'aria-disabled=\"true\"' : 'aria-disabled=\"false\"',\n autofocus ? 'autofocus' : '',\n type ? `type=\"${this.type}\"` : '',\n tabindex ? `tabindex=\"${tabindex}\"` : 'tabindex=\"0\"',\n btn ? 'role=\"button\"' : '',\n value ? `value=\"${value}\"` : '',\n name ? `name=\"${name}\"` : '',\n autocomplete ? `autocomplete=\"${autocomplete}\"` : '',\n placeholder ? `placeholder=\"${placeholder}\"` : ''\n ]).filter(Boolean).join(' ')\n\n return `<input ${props} />`\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["Input", "__name", "attr", "type", "i", "newName", "name", "disabledValue", "_oldValue", "newValue", "oldValue", "handler", "value", "text", "autofocus", "tabindex", "disabled", "placeholder", "autocomplete", "classes", "btn"]
|
|
7
7
|
}
|
package/dist/meta.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"inputs": {
|
|
3
3
|
"src/html.ts": {
|
|
4
|
-
"bytes":
|
|
4
|
+
"bytes": 470,
|
|
5
5
|
"imports": [],
|
|
6
6
|
"format": "esm"
|
|
7
7
|
},
|
|
8
8
|
"src/index.ts": {
|
|
9
|
-
"bytes":
|
|
9
|
+
"bytes": 5641,
|
|
10
10
|
"imports": [],
|
|
11
11
|
"format": "esm"
|
|
12
12
|
}
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
"imports": [],
|
|
17
17
|
"exports": [],
|
|
18
18
|
"inputs": {},
|
|
19
|
-
"bytes":
|
|
19
|
+
"bytes": 688
|
|
20
20
|
},
|
|
21
21
|
"dist/html.js": {
|
|
22
22
|
"imports": [
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
"imports": [],
|
|
42
42
|
"exports": [],
|
|
43
43
|
"inputs": {},
|
|
44
|
-
"bytes":
|
|
44
|
+
"bytes": 9023
|
|
45
45
|
},
|
|
46
46
|
"dist/index.js": {
|
|
47
47
|
"imports": [],
|
|
@@ -51,10 +51,10 @@
|
|
|
51
51
|
"entryPoint": "src/index.ts",
|
|
52
52
|
"inputs": {
|
|
53
53
|
"src/index.ts": {
|
|
54
|
-
"bytesInOutput":
|
|
54
|
+
"bytesInOutput": 4420
|
|
55
55
|
}
|
|
56
56
|
},
|
|
57
|
-
"bytes":
|
|
57
|
+
"bytes": 4603
|
|
58
58
|
}
|
|
59
59
|
}
|
|
60
60
|
}
|