@substrate-system/input 0.0.8 → 0.0.11

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 CHANGED
@@ -47,8 +47,6 @@ class Input extends HTMLElement {
47
47
  if (attr) this.value = attr;
48
48
  const type = this.getAttribute("type");
49
49
  if (type) this.type = type;
50
- const name = this.getAttribute("name");
51
- if (name) this.name = name;
52
50
  }, 0);
53
51
  }
54
52
  get input() {
@@ -60,11 +58,10 @@ class Input extends HTMLElement {
60
58
  return parseInt(i);
61
59
  }
62
60
  get name() {
63
- return this.input?.name;
61
+ return this.getAttribute("name");
64
62
  }
65
63
  set name(newName) {
66
- if (!this.input) return;
67
- this.input.name = newName;
64
+ this.setAttribute("name", newName);
68
65
  }
69
66
  /**
70
67
  * Remove from `this` element and also child.
@@ -89,20 +86,20 @@ class Input extends HTMLElement {
89
86
  * Handle 'example' attribute changes
90
87
  * @see {@link https://gomakethings.com/how-to-detect-when-attributes-change-on-a-web-component/#organizing-your-code Go Make Things article}
91
88
  *
92
- * @param {string} oldValue The old attribute value
93
- * @param {string} newValue The new attribute value
89
+ * @param {string|null} _oldValue The old attribute value
90
+ * @param {string|null} newValue The new attribute value
94
91
  */
95
- handleChange_disabled(oldValue, newValue) {
92
+ handleChange_disabled(_oldValue, newValue) {
96
93
  if (!this.input) {
97
94
  setTimeout(() => {
98
- if (newValue === null) {
95
+ if (newValue === null || newValue === "null") {
99
96
  this.disabled = false;
100
97
  } else {
101
98
  this.disabled = true;
102
99
  }
103
100
  }, 0);
104
101
  } else {
105
- if (newValue === null) {
102
+ if (newValue === null || newValue === "null") {
106
103
  this.disabled = false;
107
104
  } else {
108
105
  this.disabled = true;
@@ -160,12 +157,13 @@ class Input extends HTMLElement {
160
157
  value,
161
158
  name
162
159
  } = this;
160
+ if (!name) throw new Error("not name");
163
161
  const classes = ["substrate-input"];
164
162
  const btn = !!(this.type === "submit" || this.type === "button");
165
163
  const props = [
166
164
  `class="${classes.filter(Boolean).join(" ")}"`,
167
165
  disabled ? "disabled" : "",
168
- disabled ? 'aria-disabled="true"' : 'aria-diabled="false"',
166
+ disabled ? 'aria-disabled="true"' : 'aria-disabled="false"',
169
167
  autofocus ? "autofocus" : "",
170
168
  type ? `type="${this.type}"` : "",
171
169
  tabindex ? `tabindex="${tabindex}"` : 'tabindex="0"',
@@ -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-diabled=\"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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",
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\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.getAttribute('name')\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 } = 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 ]).filter(Boolean).join(' ')\n\n return `<input ${props} />`\n }\n}\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGO,MAAe,cAAc,YAAY;AAAA,EAHhD,OAGgD;AAAA;AAAA;AAAA;AAAA,EAE5C,OAAO,qBAAqB,CAAC,aAAa,UAAU;AAAA,EACpD,OAAO;AAAA,EAEP,OAAO,SAA8D;AACjE,QAAI,EAAE,oBAAoB,QAAS;AACnC,QAAI,eAAe,IAAI,KAAK,GAAG,EAAG;AAElC,WAAO,eAAe,OAAO,KAAK,KAAK,IAAI;AAAA,EAC/C;AAAA,EAEA,cAAe;AACX,UAAM;AACN,UAAM,WAAW,KAAK,aAAa,UAAU;AAC7C,QAAI,aAAa,MAAM;AACnB,iBAAW,MAAM;AAEb,aAAK,WAAW;AAAA,MACpB,GAAG,CAAC;AAAA,IACR;AAGA,eAAW,MAAM;AACb,YAAM,OAAO,KAAK,aAAa,OAAO;AACtC,UAAI,KAAM,MAAK,QAAQ;AAEvB,YAAM,OAAO,KAAK,aAAa,MAAM;AACrC,UAAI,KAAM,MAAK,OAAO;AAAA,IAI1B,GAAG,CAAC;AAAA,EACR;AAAA,EAEA,IAAI,QAA+B;AAC/B,WAAO,KAAK,cAAc,OAAO;AAAA,EACrC;AAAA,EAEA,IAAI,WAAmB;AACnB,UAAM,IAAI,KAAK,OAAO,aAAa,UAAU;AAC7C,QAAI,CAAC,EAAG,QAAO;AACf,WAAO,SAAS,CAAC;AAAA,EACrB;AAAA,EAEA,IAAI,OAA8B;AAC9B,WAAO,KAAK,aAAa,MAAM;AAAA,EACnC;AAAA,EAEA,IAAI,KAAM,SAAgB;AACtB,SAAK,aAAa,QAAQ,OAAO;AAAA,EACrC;AAAA;AAAA;AAAA;AAAA,EAKA,iBAAkB,MAAa;AAC3B,SAAK,gBAAgB,IAAI;AACzB,SAAK,OAAO,gBAAgB,IAAI;AAAA,EACpC;AAAA,EAEA,IAAI,WAAoB;AACpB,WAAO,CAAC,CAAE,KAAK,OAAO,aAAa,UAAU;AAAA,EACjD;AAAA,EAEA,IAAI,SAAU,eAAuB;AACjC,QAAI,CAAC,eAAe;AAChB,WAAK,iBAAiB,UAAU;AAChC,WAAK,OAAO,aAAa,iBAAiB,OAAO;AAAA,IACrD,OAAO;AACH,WAAK,OAAO,aAAa,YAAY,EAAE;AACvC,WAAK,OAAO,aAAa,iBAAiB,MAAM;AAAA,IACpD;AAAA,EACJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASA,sBAAuB,WAAkB,UAAiB;AACtD,QAAI,CAAC,KAAK,OAAO;AACb,iBAAW,MAAM;AACb,YAAI,aAAa,QAAQ,aAAa,QAAQ;AAC1C,eAAK,WAAW;AAAA,QACpB,OAAO;AACH,eAAK,WAAW;AAAA,QACpB;AAAA,MACJ,GAAG,CAAC;AAAA,IACR,OAAO;AACH,UAAI,aAAa,QAAQ,aAAa,QAAQ;AAC1C,aAAK,WAAW;AAAA,MACpB,OAAO;AACH,aAAK,WAAW;AAAA,MACpB;AAAA,IACJ;AAAA,EACJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASA,yBAA0B,MAAa,UAAiB,UAAiB;AACrE,UAAM,UAAU,KAAK,gBAAgB,IAAI,EAAE;AAC3C,IAAC,WAAW,QAAQ,KAAK,MAAM,UAAU,QAAQ;AACjD,SAAK,OAAO;AAAA,EAChB;AAAA,EAEA,oBAAqB;AACjB,SAAK,OAAO;AAAA,EAChB;AAAA,EAEA,IAAI,OAA8B;AAC9B,WAAO,KAAK,OAAO,aAAa,MAAM;AAAA,EAC1C;AAAA,EAEA,IAAI,KAAM,OAAc;AACpB,SAAK,cAAc,QAAQ,KAAK;AAAA,EACpC;AAAA,EAEA,IAAI,QAAS;AACT,WAAO,KAAK,OAAO;AAAA,EACvB;AAAA,EAEA,IAAI,MAAO,MAA4B;AACnC,QAAI,CAAC,KAAM,MAAK,OAAO,gBAAgB,OAAO;AAAA,SACzC;AACD,WAAK,MAAO,QAAQ;AAAA,IACxB;AAAA,EACJ;AAAA;AAAA;AAAA;AAAA,EAKA,cAAe,MAAa,OAAgC;AACxD,QAAI,CAAC,OAAO;AACR,aAAO,KAAK,iBAAiB,IAAI;AAAA,IACrC;AAEA,QAAI,UAAU,MAAM;AAEhB,aAAO,KAAK,OAAO,aAAa,MAAM,EAAE;AAAA,IAC5C;AAGA,SAAK,OAAO,aAAa,MAAM,KAAK;AAAA,EACxC;AAAA,EAEA,SAAsB;AAClB,UAAM;AAAA,MACF;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACJ,IAAI;AAEJ,QAAI,CAAC,KAAM,OAAM,IAAI,MAAM,UAAU;AAErC,UAAM,UAAmB,CAAC,iBAAiB;AAE3C,UAAM,MAAM,CAAC,EAAE,KAAK,SAAS,YAAY,KAAK,SAAS;AAEvD,UAAM,QAAS;AAAA,MACX,UAAU,QAAQ,OAAO,OAAO,EAAE,KAAK,GAAG,CAAC;AAAA,MAC3C,WAAW,aAAa;AAAA,MACxB,WAAW,yBAAyB;AAAA,MACpC,YAAY,cAAc;AAAA,MAC1B,OAAO,SAAS,KAAK,IAAI,MAAM;AAAA,MAC/B,WAAW,aAAa,QAAQ,MAAM;AAAA,MACtC,MAAM,kBAAkB;AAAA,MACxB,QAAQ,SAAS,KAAK,KAAK;AAAA,MAC3B,OAAO,QAAQ,IAAI,KAAK;AAAA,IAC5B,EAAG,OAAO,OAAO,EAAE,KAAK,GAAG;AAE3B,WAAO,UAAU,KAAK;AAAA,EAC1B;AACJ;",
6
6
  "names": []
7
7
  }
package/dist/index.d.ts CHANGED
@@ -17,10 +17,10 @@ export declare abstract class Input extends HTMLElement {
17
17
  * Handle 'example' attribute changes
18
18
  * @see {@link https://gomakethings.com/how-to-detect-when-attributes-change-on-a-web-component/#organizing-your-code Go Make Things article}
19
19
  *
20
- * @param {string} oldValue The old attribute value
21
- * @param {string} newValue The new attribute value
20
+ * @param {string|null} _oldValue The old attribute value
21
+ * @param {string|null} newValue The new attribute value
22
22
  */
23
- handleChange_disabled(oldValue: string, newValue: string): void;
23
+ handleChange_disabled(_oldValue: string, newValue: string): void;
24
24
  /**
25
25
  * Runs when the value of an attribute is changed
26
26
  *
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,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;;IA8BnE,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,IAAI,CAAE,OAAO,EAAC,MAAM,EAGvB;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,QAAQ,EAAC,MAAM,EAAE,QAAQ,EAAC,MAAM;IAoBvD;;;;;;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;CA4BxB"}
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;;IA8BnE,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,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;CA8BxB"}
package/dist/index.js CHANGED
@@ -25,8 +25,6 @@ class Input extends HTMLElement {
25
25
  if (attr) this.value = attr;
26
26
  const type = this.getAttribute("type");
27
27
  if (type) this.type = type;
28
- const name = this.getAttribute("name");
29
- if (name) this.name = name;
30
28
  }, 0);
31
29
  }
32
30
  get input() {
@@ -38,11 +36,10 @@ class Input extends HTMLElement {
38
36
  return parseInt(i);
39
37
  }
40
38
  get name() {
41
- return this.input?.name;
39
+ return this.getAttribute("name");
42
40
  }
43
41
  set name(newName) {
44
- if (!this.input) return;
45
- this.input.name = newName;
42
+ this.setAttribute("name", newName);
46
43
  }
47
44
  /**
48
45
  * Remove from `this` element and also child.
@@ -67,20 +64,20 @@ class Input extends HTMLElement {
67
64
  * Handle 'example' attribute changes
68
65
  * @see {@link https://gomakethings.com/how-to-detect-when-attributes-change-on-a-web-component/#organizing-your-code Go Make Things article}
69
66
  *
70
- * @param {string} oldValue The old attribute value
71
- * @param {string} newValue The new attribute value
67
+ * @param {string|null} _oldValue The old attribute value
68
+ * @param {string|null} newValue The new attribute value
72
69
  */
73
- handleChange_disabled(oldValue, newValue) {
70
+ handleChange_disabled(_oldValue, newValue) {
74
71
  if (!this.input) {
75
72
  setTimeout(() => {
76
- if (newValue === null) {
73
+ if (newValue === null || newValue === "null") {
77
74
  this.disabled = false;
78
75
  } else {
79
76
  this.disabled = true;
80
77
  }
81
78
  }, 0);
82
79
  } else {
83
- if (newValue === null) {
80
+ if (newValue === null || newValue === "null") {
84
81
  this.disabled = false;
85
82
  } else {
86
83
  this.disabled = true;
@@ -138,12 +135,13 @@ class Input extends HTMLElement {
138
135
  value,
139
136
  name
140
137
  } = this;
138
+ if (!name) throw new Error("not name");
141
139
  const classes = ["substrate-input"];
142
140
  const btn = !!(this.type === "submit" || this.type === "button");
143
141
  const props = [
144
142
  `class="${classes.filter(Boolean).join(" ")}"`,
145
143
  disabled ? "disabled" : "",
146
- disabled ? 'aria-disabled="true"' : 'aria-diabled="false"',
144
+ disabled ? 'aria-disabled="true"' : 'aria-disabled="false"',
147
145
  autofocus ? "autofocus" : "",
148
146
  type ? `type="${this.type}"` : "",
149
147
  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-diabled=\"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": ";;AAAO,MAAe,cAAc,YAAY;AAAA,EAAhD,OAAgD;AAAA;AAAA;AAAA;AAAA,EAE5C,OAAO,qBAAqB,CAAC,aAAa,UAAU;AAAA,EACpD,OAAO;AAAA,EAEP,OAAO,SAA8D;AACjE,QAAI,EAAE,oBAAoB,QAAS;AACnC,QAAI,eAAe,IAAI,KAAK,GAAG,EAAG;AAElC,WAAO,eAAe,OAAO,KAAK,KAAK,IAAI;AAAA,EAC/C;AAAA,EAEA,cAAe;AACX,UAAM;AACN,UAAM,WAAW,KAAK,aAAa,UAAU;AAC7C,QAAI,aAAa,MAAM;AACnB,iBAAW,MAAM;AAEb,aAAK,WAAW;AAAA,MACpB,GAAG,CAAC;AAAA,IACR;AAGA,eAAW,MAAM;AACb,YAAM,OAAO,KAAK,aAAa,OAAO;AACtC,UAAI,KAAM,MAAK,QAAQ;AAEvB,YAAM,OAAO,KAAK,aAAa,MAAM;AACrC,UAAI,KAAM,MAAK,OAAO;AAEtB,YAAM,OAAO,KAAK,aAAa,MAAM;AACrC,UAAI,KAAM,MAAK,OAAO;AAAA,IAC1B,GAAG,CAAC;AAAA,EACR;AAAA,EAEA,IAAI,QAA+B;AAC/B,WAAO,KAAK,cAAc,OAAO;AAAA,EACrC;AAAA,EAEA,IAAI,WAAmB;AACnB,UAAM,IAAI,KAAK,OAAO,aAAa,UAAU;AAC7C,QAAI,CAAC,EAAG,QAAO;AACf,WAAO,SAAS,CAAC;AAAA,EACrB;AAAA,EAEA,IAAI,OAA8B;AAC9B,WAAO,KAAK,OAAO;AAAA,EACvB;AAAA,EAEA,IAAI,KAAM,SAAgB;AACtB,QAAI,CAAC,KAAK,MAAO;AACjB,SAAK,MAAM,OAAO;AAAA,EACtB;AAAA;AAAA;AAAA;AAAA,EAKA,iBAAkB,MAAa;AAC3B,SAAK,gBAAgB,IAAI;AACzB,SAAK,OAAO,gBAAgB,IAAI;AAAA,EACpC;AAAA,EAEA,IAAI,WAAoB;AACpB,WAAO,CAAC,CAAE,KAAK,OAAO,aAAa,UAAU;AAAA,EACjD;AAAA,EAEA,IAAI,SAAU,eAAuB;AACjC,QAAI,CAAC,eAAe;AAChB,WAAK,iBAAiB,UAAU;AAChC,WAAK,OAAO,aAAa,iBAAiB,OAAO;AAAA,IACrD,OAAO;AACH,WAAK,OAAO,aAAa,YAAY,EAAE;AACvC,WAAK,OAAO,aAAa,iBAAiB,MAAM;AAAA,IACpD;AAAA,EACJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASA,sBAAuB,UAAiB,UAAiB;AACrD,QAAI,CAAC,KAAK,OAAO;AACb,iBAAW,MAAM;AACb,YAAI,aAAa,MAAM;AAEnB,eAAK,WAAW;AAAA,QACpB,OAAO;AAEH,eAAK,WAAW;AAAA,QACpB;AAAA,MACJ,GAAG,CAAC;AAAA,IACR,OAAO;AACH,UAAI,aAAa,MAAM;AACnB,aAAK,WAAW;AAAA,MACpB,OAAO;AACH,aAAK,WAAW;AAAA,MACpB;AAAA,IACJ;AAAA,EACJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASA,yBAA0B,MAAa,UAAiB,UAAiB;AACrE,UAAM,UAAU,KAAK,gBAAgB,IAAI,EAAE;AAC3C,IAAC,WAAW,QAAQ,KAAK,MAAM,UAAU,QAAQ;AACjD,SAAK,OAAO;AAAA,EAChB;AAAA,EAEA,oBAAqB;AACjB,SAAK,OAAO;AAAA,EAChB;AAAA,EAEA,IAAI,OAA8B;AAC9B,WAAO,KAAK,OAAO,aAAa,MAAM;AAAA,EAC1C;AAAA,EAEA,IAAI,KAAM,OAAc;AACpB,SAAK,cAAc,QAAQ,KAAK;AAAA,EACpC;AAAA,EAEA,IAAI,QAAS;AACT,WAAO,KAAK,OAAO;AAAA,EACvB;AAAA,EAEA,IAAI,MAAO,MAA4B;AACnC,QAAI,CAAC,KAAM,MAAK,OAAO,gBAAgB,OAAO;AAAA,SACzC;AACD,WAAK,MAAO,QAAQ;AAAA,IACxB;AAAA,EACJ;AAAA;AAAA;AAAA;AAAA,EAKA,cAAe,MAAa,OAAgC;AACxD,QAAI,CAAC,OAAO;AACR,aAAO,KAAK,iBAAiB,IAAI;AAAA,IACrC;AAEA,QAAI,UAAU,MAAM;AAEhB,aAAO,KAAK,OAAO,aAAa,MAAM,EAAE;AAAA,IAC5C;AAGA,SAAK,OAAO,aAAa,MAAM,KAAK;AAAA,EACxC;AAAA,EAEA,SAAsB;AAClB,UAAM;AAAA,MACF;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACJ,IAAI;AAEJ,UAAM,UAAmB,CAAC,iBAAiB;AAE3C,UAAM,MAAM,CAAC,EAAE,KAAK,SAAS,YAAY,KAAK,SAAS;AAEvD,UAAM,QAAS;AAAA,MACX,UAAU,QAAQ,OAAO,OAAO,EAAE,KAAK,GAAG,CAAC;AAAA,MAC3C,WAAW,aAAa;AAAA,MACxB,WAAW,yBAAyB;AAAA,MACpC,YAAY,cAAc;AAAA,MAC1B,OAAO,SAAS,KAAK,IAAI,MAAM;AAAA,MAC/B,WAAW,aAAa,QAAQ,MAAM;AAAA,MACtC,MAAM,kBAAkB;AAAA,MACxB,QAAQ,SAAS,KAAK,KAAK;AAAA,MAC3B,OAAO,QAAQ,IAAI,KAAK;AAAA,IAC5B,EAAG,OAAO,OAAO,EAAE,KAAK,GAAG;AAE3B,WAAO,UAAU,KAAK;AAAA,EAC1B;AACJ;",
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\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.getAttribute('name')\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 } = 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 ]).filter(Boolean).join(' ')\n\n return `<input ${props} />`\n }\n}\n"],
5
+ "mappings": ";;AAGO,MAAe,cAAc,YAAY;AAAA,EAHhD,OAGgD;AAAA;AAAA;AAAA;AAAA,EAE5C,OAAO,qBAAqB,CAAC,aAAa,UAAU;AAAA,EACpD,OAAO;AAAA,EAEP,OAAO,SAA8D;AACjE,QAAI,EAAE,oBAAoB,QAAS;AACnC,QAAI,eAAe,IAAI,KAAK,GAAG,EAAG;AAElC,WAAO,eAAe,OAAO,KAAK,KAAK,IAAI;AAAA,EAC/C;AAAA,EAEA,cAAe;AACX,UAAM;AACN,UAAM,WAAW,KAAK,aAAa,UAAU;AAC7C,QAAI,aAAa,MAAM;AACnB,iBAAW,MAAM;AAEb,aAAK,WAAW;AAAA,MACpB,GAAG,CAAC;AAAA,IACR;AAGA,eAAW,MAAM;AACb,YAAM,OAAO,KAAK,aAAa,OAAO;AACtC,UAAI,KAAM,MAAK,QAAQ;AAEvB,YAAM,OAAO,KAAK,aAAa,MAAM;AACrC,UAAI,KAAM,MAAK,OAAO;AAAA,IAI1B,GAAG,CAAC;AAAA,EACR;AAAA,EAEA,IAAI,QAA+B;AAC/B,WAAO,KAAK,cAAc,OAAO;AAAA,EACrC;AAAA,EAEA,IAAI,WAAmB;AACnB,UAAM,IAAI,KAAK,OAAO,aAAa,UAAU;AAC7C,QAAI,CAAC,EAAG,QAAO;AACf,WAAO,SAAS,CAAC;AAAA,EACrB;AAAA,EAEA,IAAI,OAA8B;AAC9B,WAAO,KAAK,aAAa,MAAM;AAAA,EACnC;AAAA,EAEA,IAAI,KAAM,SAAgB;AACtB,SAAK,aAAa,QAAQ,OAAO;AAAA,EACrC;AAAA;AAAA;AAAA;AAAA,EAKA,iBAAkB,MAAa;AAC3B,SAAK,gBAAgB,IAAI;AACzB,SAAK,OAAO,gBAAgB,IAAI;AAAA,EACpC;AAAA,EAEA,IAAI,WAAoB;AACpB,WAAO,CAAC,CAAE,KAAK,OAAO,aAAa,UAAU;AAAA,EACjD;AAAA,EAEA,IAAI,SAAU,eAAuB;AACjC,QAAI,CAAC,eAAe;AAChB,WAAK,iBAAiB,UAAU;AAChC,WAAK,OAAO,aAAa,iBAAiB,OAAO;AAAA,IACrD,OAAO;AACH,WAAK,OAAO,aAAa,YAAY,EAAE;AACvC,WAAK,OAAO,aAAa,iBAAiB,MAAM;AAAA,IACpD;AAAA,EACJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASA,sBAAuB,WAAkB,UAAiB;AACtD,QAAI,CAAC,KAAK,OAAO;AACb,iBAAW,MAAM;AACb,YAAI,aAAa,QAAQ,aAAa,QAAQ;AAC1C,eAAK,WAAW;AAAA,QACpB,OAAO;AACH,eAAK,WAAW;AAAA,QACpB;AAAA,MACJ,GAAG,CAAC;AAAA,IACR,OAAO;AACH,UAAI,aAAa,QAAQ,aAAa,QAAQ;AAC1C,aAAK,WAAW;AAAA,MACpB,OAAO;AACH,aAAK,WAAW;AAAA,MACpB;AAAA,IACJ;AAAA,EACJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASA,yBAA0B,MAAa,UAAiB,UAAiB;AACrE,UAAM,UAAU,KAAK,gBAAgB,IAAI,EAAE;AAC3C,IAAC,WAAW,QAAQ,KAAK,MAAM,UAAU,QAAQ;AACjD,SAAK,OAAO;AAAA,EAChB;AAAA,EAEA,oBAAqB;AACjB,SAAK,OAAO;AAAA,EAChB;AAAA,EAEA,IAAI,OAA8B;AAC9B,WAAO,KAAK,OAAO,aAAa,MAAM;AAAA,EAC1C;AAAA,EAEA,IAAI,KAAM,OAAc;AACpB,SAAK,cAAc,QAAQ,KAAK;AAAA,EACpC;AAAA,EAEA,IAAI,QAAS;AACT,WAAO,KAAK,OAAO;AAAA,EACvB;AAAA,EAEA,IAAI,MAAO,MAA4B;AACnC,QAAI,CAAC,KAAM,MAAK,OAAO,gBAAgB,OAAO;AAAA,SACzC;AACD,WAAK,MAAO,QAAQ;AAAA,IACxB;AAAA,EACJ;AAAA;AAAA;AAAA;AAAA,EAKA,cAAe,MAAa,OAAgC;AACxD,QAAI,CAAC,OAAO;AACR,aAAO,KAAK,iBAAiB,IAAI;AAAA,IACrC;AAEA,QAAI,UAAU,MAAM;AAEhB,aAAO,KAAK,OAAO,aAAa,MAAM,EAAE;AAAA,IAC5C;AAGA,SAAK,OAAO,aAAa,MAAM,KAAK;AAAA,EACxC;AAAA,EAEA,SAAsB;AAClB,UAAM;AAAA,MACF;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACJ,IAAI;AAEJ,QAAI,CAAC,KAAM,OAAM,IAAI,MAAM,UAAU;AAErC,UAAM,UAAmB,CAAC,iBAAiB;AAE3C,UAAM,MAAM,CAAC,EAAE,KAAK,SAAS,YAAY,KAAK,SAAS;AAEvD,UAAM,QAAS;AAAA,MACX,UAAU,QAAQ,OAAO,OAAO,EAAE,KAAK,GAAG,CAAC;AAAA,MAC3C,WAAW,aAAa;AAAA,MACxB,WAAW,yBAAyB;AAAA,MACpC,YAAY,cAAc;AAAA,MAC1B,OAAO,SAAS,KAAK,IAAI,MAAM;AAAA,MAC/B,WAAW,aAAa,QAAQ,MAAM;AAAA,MACtC,MAAM,kBAAkB;AAAA,MACxB,QAAQ,SAAS,KAAK,KAAK;AAAA,MAC3B,OAAO,QAAQ,IAAI,KAAK;AAAA,IAC5B,EAAG,OAAO,OAAO,EAAE,KAAK,GAAG;AAE3B,WAAO,UAAU,KAAK;AAAA,EAC1B;AACJ;",
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-diabled="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};
1
+ var o=Object.defineProperty;var a=(r,t)=>o(r,"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 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")}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}=this;if(!n)throw new Error("not name");let d=["substrate-input"],b=this.type==="submit"||this.type==="button";return`<input ${[`class="${d.filter(Boolean).join(" ")}"`,s?"disabled":"",s?'aria-disabled="true"':'aria-disabled="false"',e?"autofocus":"",t?`type="${this.type}"`:"",i?`tabindex="${i}"`:'tabindex="0"',b?'role="button"':"",u?`value=${u}`:"",n?`name=${n}`:""].filter(Boolean).join(" ")} />`}};export{l as Input};
2
2
  //# sourceMappingURL=index.min.js.map
@@ -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-diabled=\"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
- "names": ["Input", "__name", "attr", "type", "name", "i", "newName", "disabledValue", "oldValue", "newValue", "handler", "value", "text", "autofocus", "tabindex", "disabled", "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\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.getAttribute('name')\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 } = 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 ]).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", "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": 5289,
4
+ "bytes": 5369,
5
5
  "imports": [],
6
6
  "format": "esm"
7
7
  }
@@ -11,7 +11,7 @@
11
11
  "imports": [],
12
12
  "exports": [],
13
13
  "inputs": {},
14
- "bytes": 8462
14
+ "bytes": 8532
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": 4104
24
+ "bytesInOutput": 4116
25
25
  }
26
26
  },
27
- "bytes": 4287
27
+ "bytes": 4299
28
28
  }
29
29
  }
30
30
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@substrate-system/input",
3
- "version": "0.0.8",
3
+ "version": "0.0.11",
4
4
  "type": "module",
5
5
  "description": "A minimal parent input component to inherit from",
6
6
  "main": "dist/index.js",