@substrate-system/input 0.0.8 → 0.0.9
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 +1 -1
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/index.min.js +1 -1
- package/dist/index.min.js.map +2 -2
- package/dist/meta.json +4 -4
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -165,7 +165,7 @@ class Input extends HTMLElement {
|
|
|
165
165
|
const props = [
|
|
166
166
|
`class="${classes.filter(Boolean).join(" ")}"`,
|
|
167
167
|
disabled ? "disabled" : "",
|
|
168
|
-
disabled ? 'aria-disabled="true"' : 'aria-
|
|
168
|
+
disabled ? 'aria-disabled="true"' : 'aria-disabled="false"',
|
|
169
169
|
autofocus ? "autofocus" : "",
|
|
170
170
|
type ? `type="${this.type}"` : "",
|
|
171
171
|
tabindex ? `tabindex="${tabindex}"` : 'tabindex="0"',
|
package/dist/index.cjs.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/index.ts"],
|
|
4
|
-
"sourcesContent": ["export 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\n const name = this.getAttribute('name')\n if (name) this.name = name\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.input?.name\n }\n\n set name (newName:string) {\n if (!this.input) return\n this.input.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} oldValue The old attribute value\n * @param {string} newValue The new attribute value\n */\n handleChange_disabled (oldValue:string, newValue:string) {\n if (!this.input) {\n setTimeout(() => {\n if (newValue === null) {\n // [example] was removed\n this.disabled = false\n } else {\n // set [example] attribute\n this.disabled = true\n }\n }, 0) // wait to render\n } else {\n if (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 } = this\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-
|
|
4
|
+
"sourcesContent": ["export 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\n const name = this.getAttribute('name')\n if (name) this.name = name\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.input?.name\n }\n\n set name (newName:string) {\n if (!this.input) return\n this.input.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} oldValue The old attribute value\n * @param {string} newValue The new attribute value\n */\n handleChange_disabled (oldValue:string, newValue:string) {\n if (!this.input) {\n setTimeout(() => {\n if (newValue === null) {\n // [example] was removed\n this.disabled = false\n } else {\n // set [example] attribute\n this.disabled = true\n }\n }, 0) // wait to render\n } else {\n if (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 } = this\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 ]).filter(Boolean).join(' ')\n\n return `<input ${props} />`\n }\n}\n"],
|
|
5
5
|
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/index.js
CHANGED
|
@@ -143,7 +143,7 @@ class Input extends HTMLElement {
|
|
|
143
143
|
const props = [
|
|
144
144
|
`class="${classes.filter(Boolean).join(" ")}"`,
|
|
145
145
|
disabled ? "disabled" : "",
|
|
146
|
-
disabled ? 'aria-disabled="true"' : 'aria-
|
|
146
|
+
disabled ? 'aria-disabled="true"' : 'aria-disabled="false"',
|
|
147
147
|
autofocus ? "autofocus" : "",
|
|
148
148
|
type ? `type="${this.type}"` : "",
|
|
149
149
|
tabindex ? `tabindex="${tabindex}"` : 'tabindex="0"',
|
package/dist/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/index.ts"],
|
|
4
|
-
"sourcesContent": ["export 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\n const name = this.getAttribute('name')\n if (name) this.name = name\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.input?.name\n }\n\n set name (newName:string) {\n if (!this.input) return\n this.input.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} oldValue The old attribute value\n * @param {string} newValue The new attribute value\n */\n handleChange_disabled (oldValue:string, newValue:string) {\n if (!this.input) {\n setTimeout(() => {\n if (newValue === null) {\n // [example] was removed\n this.disabled = false\n } else {\n // set [example] attribute\n this.disabled = true\n }\n }, 0) // wait to render\n } else {\n if (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 } = this\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-
|
|
4
|
+
"sourcesContent": ["export 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\n const name = this.getAttribute('name')\n if (name) this.name = name\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.input?.name\n }\n\n set name (newName:string) {\n if (!this.input) return\n this.input.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} oldValue The old attribute value\n * @param {string} newValue The new attribute value\n */\n handleChange_disabled (oldValue:string, newValue:string) {\n if (!this.input) {\n setTimeout(() => {\n if (newValue === null) {\n // [example] was removed\n this.disabled = false\n } else {\n // set [example] attribute\n this.disabled = true\n }\n }, 0) // wait to render\n } else {\n if (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 } = this\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 ]).filter(Boolean).join(' ')\n\n return `<input ${props} />`\n }\n}\n"],
|
|
5
5
|
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/index.min.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var o=Object.defineProperty;var a=(n,t)=>o(n,"name",{value:t,configurable:!0});var l=class extends HTMLElement{static{a(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 s=this.getAttribute("type");s&&(this.type=s);let i=this.getAttribute("name");i&&(this.name=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.input?.name}set name(t){this.input&&(this.input.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?this.disabled=!1:this.disabled=!0:setTimeout(()=>{e===null?this.disabled=!1:this.disabled=!0},0)}attributeChangedCallback(t,e,s){let i=this[`handleChange_${t}`];i&&i.call(this,e,s),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:s,disabled:i,value:r,name:u}=this,d=["substrate-input"],b=this.type==="submit"||this.type==="button";return`<input ${[`class="${d.filter(Boolean).join(" ")}"`,i?"disabled":"",i?'aria-disabled="true"':'aria-
|
|
1
|
+
var o=Object.defineProperty;var a=(n,t)=>o(n,"name",{value:t,configurable:!0});var l=class extends HTMLElement{static{a(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 s=this.getAttribute("type");s&&(this.type=s);let i=this.getAttribute("name");i&&(this.name=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.input?.name}set name(t){this.input&&(this.input.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?this.disabled=!1:this.disabled=!0:setTimeout(()=>{e===null?this.disabled=!1:this.disabled=!0},0)}attributeChangedCallback(t,e,s){let i=this[`handleChange_${t}`];i&&i.call(this,e,s),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:s,disabled:i,value:r,name:u}=this,d=["substrate-input"],b=this.type==="submit"||this.type==="button";return`<input ${[`class="${d.filter(Boolean).join(" ")}"`,i?"disabled":"",i?'aria-disabled="true"':'aria-disabled="false"',e?"autofocus":"",t?`type="${this.type}"`:"",s?`tabindex="${s}"`:'tabindex="0"',b?'role="button"':"",r?`value=${r}`:"",u?`name=${u}`:""].filter(Boolean).join(" ")} />`}};export{l 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": ["export 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\n const name = this.getAttribute('name')\n if (name) this.name = name\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.input?.name\n }\n\n set name (newName:string) {\n if (!this.input) return\n this.input.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} oldValue The old attribute value\n * @param {string} newValue The new attribute value\n */\n handleChange_disabled (oldValue:string, newValue:string) {\n if (!this.input) {\n setTimeout(() => {\n if (newValue === null) {\n // [example] was removed\n this.disabled = false\n } else {\n // set [example] attribute\n this.disabled = true\n }\n }, 0) // wait to render\n } else {\n if (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 } = this\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-
|
|
5
|
-
"mappings": "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
|
|
4
|
+
"sourcesContent": ["export 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\n const name = this.getAttribute('name')\n if (name) this.name = name\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.input?.name\n }\n\n set name (newName:string) {\n if (!this.input) return\n this.input.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} oldValue The old attribute value\n * @param {string} newValue The new attribute value\n */\n handleChange_disabled (oldValue:string, newValue:string) {\n if (!this.input) {\n setTimeout(() => {\n if (newValue === null) {\n // [example] was removed\n this.disabled = false\n } else {\n // set [example] attribute\n this.disabled = true\n }\n }, 0) // wait to render\n } else {\n if (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 } = this\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 ]).filter(Boolean).join(' ')\n\n return `<input ${props} />`\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["Input", "__name", "attr", "type", "name", "i", "newName", "disabledValue", "oldValue", "newValue", "handler", "value", "text", "autofocus", "tabindex", "disabled", "classes", "btn"]
|
|
7
7
|
}
|
package/dist/meta.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"inputs": {
|
|
3
3
|
"src/index.ts": {
|
|
4
|
-
"bytes":
|
|
4
|
+
"bytes": 5290,
|
|
5
5
|
"imports": [],
|
|
6
6
|
"format": "esm"
|
|
7
7
|
}
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
"imports": [],
|
|
12
12
|
"exports": [],
|
|
13
13
|
"inputs": {},
|
|
14
|
-
"bytes":
|
|
14
|
+
"bytes": 8463
|
|
15
15
|
},
|
|
16
16
|
"dist/index.js": {
|
|
17
17
|
"imports": [],
|
|
@@ -21,10 +21,10 @@
|
|
|
21
21
|
"entryPoint": "src/index.ts",
|
|
22
22
|
"inputs": {
|
|
23
23
|
"src/index.ts": {
|
|
24
|
-
"bytesInOutput":
|
|
24
|
+
"bytesInOutput": 4105
|
|
25
25
|
}
|
|
26
26
|
},
|
|
27
|
-
"bytes":
|
|
27
|
+
"bytes": 4288
|
|
28
28
|
}
|
|
29
29
|
}
|
|
30
30
|
}
|