@substrate-system/button 0.0.22 → 0.0.24

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 CHANGED
@@ -28,7 +28,8 @@ function html(attrs, textContent) {
28
28
  autofocus,
29
29
  tabindex,
30
30
  disabled,
31
- classes
31
+ classes,
32
+ name
32
33
  } = attrs;
33
34
  const _classes = new Set(classes);
34
35
  _classes.add("substrate-button");
@@ -38,6 +39,7 @@ function html(attrs, textContent) {
38
39
  disabled ? "disabled" : "",
39
40
  autofocus ? "autofocus" : "",
40
41
  type ? `type="${type}"` : "",
42
+ name ? `name=${name}` : "",
41
43
  tabindex ? `tabindex="${tabindex}"` : 'tabindex="0"',
42
44
  'role="button"'
43
45
  ].filter(Boolean).join(" ");
package/dist/html.cjs.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../src/html.ts"],
4
- "sourcesContent": ["export type Attrs = {\n type:string|null;\n autofocus:boolean;\n tabindex:string|number;\n disabled:boolean;\n classes:string[]|Set<string>;\n}\nexport function html (attrs:Partial<Attrs>, textContent:string) {\n const {\n type,\n autofocus,\n tabindex,\n disabled,\n classes\n } = attrs\n\n const _classes = new Set(classes)\n _classes.add('substrate-button')\n const arr = Array.from(_classes)\n\n const btnProps = ([\n arr.length ? `class=\"${arr.filter(Boolean).join(' ')}\"` : '',\n disabled ? 'disabled' : '',\n autofocus ? 'autofocus' : '',\n type ? `type=\"${type}\"` : '',\n tabindex ? `tabindex=\"${tabindex}\"` : 'tabindex=\"0\"',\n 'role=\"button\"'\n ]).filter(Boolean).join(' ')\n\n // rendering in node?\n return typeof window === 'undefined' ?\n `<substrate-button${disabled ? ' disabled' : ''}>\n <button ${btnProps}>${textContent}</button>\n </substrate-button$>` :\n `<button ${btnProps}>\n ${textContent}\n </button>`\n}\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAOO,SAAS,KAAM,OAAsB,aAAoB;AAC5D,QAAM;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACJ,IAAI;AAEJ,QAAM,WAAW,IAAI,IAAI,OAAO;AAChC,WAAS,IAAI,kBAAkB;AAC/B,QAAM,MAAM,MAAM,KAAK,QAAQ;AAE/B,QAAM,WAAY;AAAA,IACd,IAAI,SAAS,UAAU,IAAI,OAAO,OAAO,EAAE,KAAK,GAAG,CAAC,MAAM;AAAA,IAC1D,WAAW,aAAa;AAAA,IACxB,YAAY,cAAc;AAAA,IAC1B,OAAO,SAAS,IAAI,MAAM;AAAA,IAC1B,WAAW,aAAa,QAAQ,MAAM;AAAA,IACtC;AAAA,EACJ,EAAG,OAAO,OAAO,EAAE,KAAK,GAAG;AAG3B,SAAO,OAAO,WAAW,cACrB,oBAAoB,WAAW,cAAc,EAAE;AAAA,sBACjC,QAAQ,IAAI,WAAW;AAAA,gCAErC,WAAW,QAAQ;AAAA,cACb,WAAW;AAAA;AAEzB;AA9BgB;",
4
+ "sourcesContent": ["export type Attrs = {\n type:string|null;\n autofocus:boolean;\n tabindex:string|number;\n disabled:boolean;\n name:string|null;\n classes:string[]|Set<string>;\n}\nexport function html (attrs:Partial<Attrs>, textContent:string) {\n const {\n type,\n autofocus,\n tabindex,\n disabled,\n classes,\n name\n } = attrs\n\n const _classes = new Set(classes)\n _classes.add('substrate-button')\n const arr = Array.from(_classes)\n\n const btnProps = ([\n arr.length ? `class=\"${arr.filter(Boolean).join(' ')}\"` : '',\n disabled ? 'disabled' : '',\n autofocus ? 'autofocus' : '',\n type ? `type=\"${type}\"` : '',\n name ? `name=${name}` : '',\n tabindex ? `tabindex=\"${tabindex}\"` : 'tabindex=\"0\"',\n 'role=\"button\"'\n ]).filter(Boolean).join(' ')\n\n // rendering in node?\n return typeof window === 'undefined' ?\n `<substrate-button${disabled ? ' disabled' : ''}>\n <button ${btnProps}>${textContent}</button>\n </substrate-button$>` :\n `<button ${btnProps}>\n ${textContent}\n </button>`\n}\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAQO,SAAS,KAAM,OAAsB,aAAoB;AAC5D,QAAM;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACJ,IAAI;AAEJ,QAAM,WAAW,IAAI,IAAI,OAAO;AAChC,WAAS,IAAI,kBAAkB;AAC/B,QAAM,MAAM,MAAM,KAAK,QAAQ;AAE/B,QAAM,WAAY;AAAA,IACd,IAAI,SAAS,UAAU,IAAI,OAAO,OAAO,EAAE,KAAK,GAAG,CAAC,MAAM;AAAA,IAC1D,WAAW,aAAa;AAAA,IACxB,YAAY,cAAc;AAAA,IAC1B,OAAO,SAAS,IAAI,MAAM;AAAA,IAC1B,OAAO,QAAQ,IAAI,KAAK;AAAA,IACxB,WAAW,aAAa,QAAQ,MAAM;AAAA,IACtC;AAAA,EACJ,EAAG,OAAO,OAAO,EAAE,KAAK,GAAG;AAG3B,SAAO,OAAO,WAAW,cACrB,oBAAoB,WAAW,cAAc,EAAE;AAAA,sBACjC,QAAQ,IAAI,WAAW;AAAA,gCAErC,WAAW,QAAQ;AAAA,cACb,WAAW;AAAA;AAEzB;AAhCgB;",
6
6
  "names": []
7
7
  }
package/dist/html.d.ts CHANGED
@@ -3,6 +3,7 @@ export type Attrs = {
3
3
  autofocus: boolean;
4
4
  tabindex: string | number;
5
5
  disabled: boolean;
6
+ name: string | null;
6
7
  classes: string[] | Set<string>;
7
8
  };
8
9
  export declare function html(attrs: Partial<Attrs>, textContent: string): string;
@@ -1 +1 @@
1
- {"version":3,"file":"html.d.ts","sourceRoot":"","sources":["../src/html.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,KAAK,GAAG;IAChB,IAAI,EAAC,MAAM,GAAC,IAAI,CAAC;IACjB,SAAS,EAAC,OAAO,CAAC;IAClB,QAAQ,EAAC,MAAM,GAAC,MAAM,CAAC;IACvB,QAAQ,EAAC,OAAO,CAAC;IACjB,OAAO,EAAC,MAAM,EAAE,GAAC,GAAG,CAAC,MAAM,CAAC,CAAC;CAChC,CAAA;AACD,wBAAgB,IAAI,CAAE,KAAK,EAAC,OAAO,CAAC,KAAK,CAAC,EAAE,WAAW,EAAC,MAAM,UA8B7D"}
1
+ {"version":3,"file":"html.d.ts","sourceRoot":"","sources":["../src/html.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,KAAK,GAAG;IAChB,IAAI,EAAC,MAAM,GAAC,IAAI,CAAC;IACjB,SAAS,EAAC,OAAO,CAAC;IAClB,QAAQ,EAAC,MAAM,GAAC,MAAM,CAAC;IACvB,QAAQ,EAAC,OAAO,CAAC;IACjB,IAAI,EAAC,MAAM,GAAC,IAAI,CAAC;IACjB,OAAO,EAAC,MAAM,EAAE,GAAC,GAAG,CAAC,MAAM,CAAC,CAAC;CAChC,CAAA;AACD,wBAAgB,IAAI,CAAE,KAAK,EAAC,OAAO,CAAC,KAAK,CAAC,EAAE,WAAW,EAAC,MAAM,UAgC7D"}
package/dist/html.js CHANGED
@@ -6,7 +6,8 @@ function html(attrs, textContent) {
6
6
  autofocus,
7
7
  tabindex,
8
8
  disabled,
9
- classes
9
+ classes,
10
+ name
10
11
  } = attrs;
11
12
  const _classes = new Set(classes);
12
13
  _classes.add("substrate-button");
@@ -16,6 +17,7 @@ function html(attrs, textContent) {
16
17
  disabled ? "disabled" : "",
17
18
  autofocus ? "autofocus" : "",
18
19
  type ? `type="${type}"` : "",
20
+ name ? `name=${name}` : "",
19
21
  tabindex ? `tabindex="${tabindex}"` : 'tabindex="0"',
20
22
  'role="button"'
21
23
  ].filter(Boolean).join(" ");
package/dist/html.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../src/html.ts"],
4
- "sourcesContent": ["export type Attrs = {\n type:string|null;\n autofocus:boolean;\n tabindex:string|number;\n disabled:boolean;\n classes:string[]|Set<string>;\n}\nexport function html (attrs:Partial<Attrs>, textContent:string) {\n const {\n type,\n autofocus,\n tabindex,\n disabled,\n classes\n } = attrs\n\n const _classes = new Set(classes)\n _classes.add('substrate-button')\n const arr = Array.from(_classes)\n\n const btnProps = ([\n arr.length ? `class=\"${arr.filter(Boolean).join(' ')}\"` : '',\n disabled ? 'disabled' : '',\n autofocus ? 'autofocus' : '',\n type ? `type=\"${type}\"` : '',\n tabindex ? `tabindex=\"${tabindex}\"` : 'tabindex=\"0\"',\n 'role=\"button\"'\n ]).filter(Boolean).join(' ')\n\n // rendering in node?\n return typeof window === 'undefined' ?\n `<substrate-button${disabled ? ' disabled' : ''}>\n <button ${btnProps}>${textContent}</button>\n </substrate-button$>` :\n `<button ${btnProps}>\n ${textContent}\n </button>`\n}\n"],
5
- "mappings": ";;AAOO,SAAS,KAAM,OAAsB,aAAoB;AAC5D,QAAM;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACJ,IAAI;AAEJ,QAAM,WAAW,IAAI,IAAI,OAAO;AAChC,WAAS,IAAI,kBAAkB;AAC/B,QAAM,MAAM,MAAM,KAAK,QAAQ;AAE/B,QAAM,WAAY;AAAA,IACd,IAAI,SAAS,UAAU,IAAI,OAAO,OAAO,EAAE,KAAK,GAAG,CAAC,MAAM;AAAA,IAC1D,WAAW,aAAa;AAAA,IACxB,YAAY,cAAc;AAAA,IAC1B,OAAO,SAAS,IAAI,MAAM;AAAA,IAC1B,WAAW,aAAa,QAAQ,MAAM;AAAA,IACtC;AAAA,EACJ,EAAG,OAAO,OAAO,EAAE,KAAK,GAAG;AAG3B,SAAO,OAAO,WAAW,cACrB,oBAAoB,WAAW,cAAc,EAAE;AAAA,sBACjC,QAAQ,IAAI,WAAW;AAAA,gCAErC,WAAW,QAAQ;AAAA,cACb,WAAW;AAAA;AAEzB;AA9BgB;",
4
+ "sourcesContent": ["export type Attrs = {\n type:string|null;\n autofocus:boolean;\n tabindex:string|number;\n disabled:boolean;\n name:string|null;\n classes:string[]|Set<string>;\n}\nexport function html (attrs:Partial<Attrs>, textContent:string) {\n const {\n type,\n autofocus,\n tabindex,\n disabled,\n classes,\n name\n } = attrs\n\n const _classes = new Set(classes)\n _classes.add('substrate-button')\n const arr = Array.from(_classes)\n\n const btnProps = ([\n arr.length ? `class=\"${arr.filter(Boolean).join(' ')}\"` : '',\n disabled ? 'disabled' : '',\n autofocus ? 'autofocus' : '',\n type ? `type=\"${type}\"` : '',\n name ? `name=${name}` : '',\n tabindex ? `tabindex=\"${tabindex}\"` : 'tabindex=\"0\"',\n 'role=\"button\"'\n ]).filter(Boolean).join(' ')\n\n // rendering in node?\n return typeof window === 'undefined' ?\n `<substrate-button${disabled ? ' disabled' : ''}>\n <button ${btnProps}>${textContent}</button>\n </substrate-button$>` :\n `<button ${btnProps}>\n ${textContent}\n </button>`\n}\n"],
5
+ "mappings": ";;AAQO,SAAS,KAAM,OAAsB,aAAoB;AAC5D,QAAM;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACJ,IAAI;AAEJ,QAAM,WAAW,IAAI,IAAI,OAAO;AAChC,WAAS,IAAI,kBAAkB;AAC/B,QAAM,MAAM,MAAM,KAAK,QAAQ;AAE/B,QAAM,WAAY;AAAA,IACd,IAAI,SAAS,UAAU,IAAI,OAAO,OAAO,EAAE,KAAK,GAAG,CAAC,MAAM;AAAA,IAC1D,WAAW,aAAa;AAAA,IACxB,YAAY,cAAc;AAAA,IAC1B,OAAO,SAAS,IAAI,MAAM;AAAA,IAC1B,OAAO,QAAQ,IAAI,KAAK;AAAA,IACxB,WAAW,aAAa,QAAQ,MAAM;AAAA,IACtC;AAAA,EACJ,EAAG,OAAO,OAAO,EAAE,KAAK,GAAG;AAG3B,SAAO,OAAO,WAAW,cACrB,oBAAoB,WAAW,cAAc,EAAE;AAAA,sBACjC,QAAQ,IAAI,WAAW;AAAA,gCAErC,WAAW,QAAQ;AAAA,cACb,WAAW;AAAA;AAEzB;AAhCgB;",
6
6
  "names": []
7
7
  }
package/dist/html.min.js CHANGED
@@ -1,6 +1,6 @@
1
- var d=Object.defineProperty;var u=(n,t)=>d(n,"name",{value:t,configurable:!0});function f(n,t){let{type:s,autofocus:i,tabindex:o,disabled:e,classes:l}=n,a=new Set(l);a.add("substrate-button");let r=Array.from(a),b=[r.length?`class="${r.filter(Boolean).join(" ")}"`:"",e?"disabled":"",i?"autofocus":"",s?`type="${s}"`:"",o?`tabindex="${o}"`:'tabindex="0"','role="button"'].filter(Boolean).join(" ");return typeof window>"u"?`<substrate-button${e?" disabled":""}>
2
- <button ${b}>${t}</button>
3
- </substrate-button$>`:`<button ${b}>
1
+ var c=Object.defineProperty;var i=(n,t)=>c(n,"name",{value:t,configurable:!0});function f(n,t){let{type:e,autofocus:l,tabindex:s,disabled:o,classes:d,name:a}=n,r=new Set(d);r.add("substrate-button");let b=Array.from(r),u=[b.length?`class="${b.filter(Boolean).join(" ")}"`:"",o?"disabled":"",l?"autofocus":"",e?`type="${e}"`:"",a?`name=${a}`:"",s?`tabindex="${s}"`:'tabindex="0"','role="button"'].filter(Boolean).join(" ");return typeof window>"u"?`<substrate-button${o?" disabled":""}>
2
+ <button ${u}>${t}</button>
3
+ </substrate-button$>`:`<button ${u}>
4
4
  ${t}
5
- </button>`}u(f,"html");export{f as html};
5
+ </button>`}i(f,"html");export{f as html};
6
6
  //# sourceMappingURL=html.min.js.map
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../src/html.ts"],
4
- "sourcesContent": ["export type Attrs = {\n type:string|null;\n autofocus:boolean;\n tabindex:string|number;\n disabled:boolean;\n classes:string[]|Set<string>;\n}\nexport function html (attrs:Partial<Attrs>, textContent:string) {\n const {\n type,\n autofocus,\n tabindex,\n disabled,\n classes\n } = attrs\n\n const _classes = new Set(classes)\n _classes.add('substrate-button')\n const arr = Array.from(_classes)\n\n const btnProps = ([\n arr.length ? `class=\"${arr.filter(Boolean).join(' ')}\"` : '',\n disabled ? 'disabled' : '',\n autofocus ? 'autofocus' : '',\n type ? `type=\"${type}\"` : '',\n tabindex ? `tabindex=\"${tabindex}\"` : 'tabindex=\"0\"',\n 'role=\"button\"'\n ]).filter(Boolean).join(' ')\n\n // rendering in node?\n return typeof window === 'undefined' ?\n `<substrate-button${disabled ? ' disabled' : ''}>\n <button ${btnProps}>${textContent}</button>\n </substrate-button$>` :\n `<button ${btnProps}>\n ${textContent}\n </button>`\n}\n"],
5
- "mappings": "+EAOO,SAASA,EAAMC,EAAsBC,EAAoB,CAC5D,GAAM,CACF,KAAAC,EACA,UAAAC,EACA,SAAAC,EACA,SAAAC,EACA,QAAAC,CACJ,EAAIN,EAEEO,EAAW,IAAI,IAAID,CAAO,EAChCC,EAAS,IAAI,kBAAkB,EAC/B,IAAMC,EAAM,MAAM,KAAKD,CAAQ,EAEzBE,EAAY,CACdD,EAAI,OAAS,UAAUA,EAAI,OAAO,OAAO,EAAE,KAAK,GAAG,CAAC,IAAM,GAC1DH,EAAW,WAAa,GACxBF,EAAY,YAAc,GAC1BD,EAAO,SAASA,CAAI,IAAM,GAC1BE,EAAW,aAAaA,CAAQ,IAAM,eACtC,eACJ,EAAG,OAAO,OAAO,EAAE,KAAK,GAAG,EAG3B,OAAO,OAAO,OAAW,IACrB,oBAAoBC,EAAW,YAAc,EAAE;AAAA,sBACjCI,CAAQ,IAAIR,CAAW;AAAA,8BAErC,WAAWQ,CAAQ;AAAA,cACbR,CAAW;AAAA,kBAEzB,CA9BgBS,EAAAX,EAAA",
6
- "names": ["html", "attrs", "textContent", "type", "autofocus", "tabindex", "disabled", "classes", "_classes", "arr", "btnProps", "__name"]
4
+ "sourcesContent": ["export type Attrs = {\n type:string|null;\n autofocus:boolean;\n tabindex:string|number;\n disabled:boolean;\n name:string|null;\n classes:string[]|Set<string>;\n}\nexport function html (attrs:Partial<Attrs>, textContent:string) {\n const {\n type,\n autofocus,\n tabindex,\n disabled,\n classes,\n name\n } = attrs\n\n const _classes = new Set(classes)\n _classes.add('substrate-button')\n const arr = Array.from(_classes)\n\n const btnProps = ([\n arr.length ? `class=\"${arr.filter(Boolean).join(' ')}\"` : '',\n disabled ? 'disabled' : '',\n autofocus ? 'autofocus' : '',\n type ? `type=\"${type}\"` : '',\n name ? `name=${name}` : '',\n tabindex ? `tabindex=\"${tabindex}\"` : 'tabindex=\"0\"',\n 'role=\"button\"'\n ]).filter(Boolean).join(' ')\n\n // rendering in node?\n return typeof window === 'undefined' ?\n `<substrate-button${disabled ? ' disabled' : ''}>\n <button ${btnProps}>${textContent}</button>\n </substrate-button$>` :\n `<button ${btnProps}>\n ${textContent}\n </button>`\n}\n"],
5
+ "mappings": "+EAQO,SAASA,EAAMC,EAAsBC,EAAoB,CAC5D,GAAM,CACF,KAAAC,EACA,UAAAC,EACA,SAAAC,EACA,SAAAC,EACA,QAAAC,EACA,KAAAC,CACJ,EAAIP,EAEEQ,EAAW,IAAI,IAAIF,CAAO,EAChCE,EAAS,IAAI,kBAAkB,EAC/B,IAAMC,EAAM,MAAM,KAAKD,CAAQ,EAEzBE,EAAY,CACdD,EAAI,OAAS,UAAUA,EAAI,OAAO,OAAO,EAAE,KAAK,GAAG,CAAC,IAAM,GAC1DJ,EAAW,WAAa,GACxBF,EAAY,YAAc,GAC1BD,EAAO,SAASA,CAAI,IAAM,GAC1BK,EAAO,QAAQA,CAAI,GAAK,GACxBH,EAAW,aAAaA,CAAQ,IAAM,eACtC,eACJ,EAAG,OAAO,OAAO,EAAE,KAAK,GAAG,EAG3B,OAAO,OAAO,OAAW,IACrB,oBAAoBC,EAAW,YAAc,EAAE;AAAA,sBACjCK,CAAQ,IAAIT,CAAW;AAAA,8BAErC,WAAWS,CAAQ;AAAA,cACbT,CAAW;AAAA,kBAEzB,CAhCgBU,EAAAZ,EAAA",
6
+ "names": ["html", "attrs", "textContent", "type", "autofocus", "tabindex", "disabled", "classes", "name", "_classes", "arr", "btnProps", "__name"]
7
7
  }
package/dist/index.cjs CHANGED
@@ -45,6 +45,7 @@ class SubstrateButton extends import_client.SubstrateButton {
45
45
  tabindex,
46
46
  disabled
47
47
  } = this;
48
+ const name = this.getAttribute("name");
48
49
  const classes = [
49
50
  "substrate-button",
50
51
  this.getAttribute("class")
@@ -55,7 +56,8 @@ class SubstrateButton extends import_client.SubstrateButton {
55
56
  disabled,
56
57
  autofocus,
57
58
  tabindex,
58
- type
59
+ type,
60
+ name
59
61
  };
60
62
  this.innerHTML = (0, import_html.html)(btnProps, text);
61
63
  }
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../src/index.ts"],
4
- "sourcesContent": ["import { html } from './html.js'\nimport { SubstrateButton as SubstrateButtonLight } from './client.js'\n\nexport class SubstrateButton extends SubstrateButtonLight {\n static define () {\n if (!('customElements' in window)) return\n\n return customElements.define(\n SubstrateButton.TAG || 'substrate-button',\n SubstrateButton\n )\n }\n\n connectedCallback ():void {\n this.render()\n }\n\n render () {\n const {\n type,\n autofocus,\n tabindex,\n disabled,\n } = this\n\n const classes:(string|null)[] = [\n 'substrate-button',\n this.getAttribute('class')\n ]\n const text = this.innerHTML\n\n const btnProps = {\n classes: classes.filter(Boolean),\n disabled,\n autofocus,\n tabindex,\n type,\n }\n\n this.innerHTML = html(btnProps, text)\n }\n}\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAqB;AACrB,oBAAwD;AAEjD,MAAM,wBAAwB,cAAAA,gBAAqB;AAAA,EAH1D,OAG0D;AAAA;AAAA;AAAA,EACtD,OAAO,SAAU;AACb,QAAI,EAAE,oBAAoB,QAAS;AAEnC,WAAO,eAAe;AAAA,MAClB,gBAAgB,OAAO;AAAA,MACvB;AAAA,IACJ;AAAA,EACJ;AAAA,EAEA,oBAA0B;AACtB,SAAK,OAAO;AAAA,EAChB;AAAA,EAEA,SAAU;AACN,UAAM;AAAA,MACF;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACJ,IAAI;AAEJ,UAAM,UAA0B;AAAA,MAC5B;AAAA,MACA,KAAK,aAAa,OAAO;AAAA,IAC7B;AACA,UAAM,OAAO,KAAK;AAElB,UAAM,WAAW;AAAA,MACb,SAAS,QAAQ,OAAO,OAAO;AAAA,MAC/B;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACJ;AAEA,SAAK,gBAAY,kBAAK,UAAU,IAAI;AAAA,EACxC;AACJ;",
4
+ "sourcesContent": ["import { html } from './html.js'\nimport { SubstrateButton as SubstrateButtonLight } from './client.js'\n\nexport class SubstrateButton extends SubstrateButtonLight {\n static define () {\n if (!('customElements' in window)) return\n\n return customElements.define(\n SubstrateButton.TAG || 'substrate-button',\n SubstrateButton\n )\n }\n\n connectedCallback ():void {\n this.render()\n }\n\n render () {\n const {\n type,\n autofocus,\n tabindex,\n disabled,\n } = this\n const name = this.getAttribute('name')\n\n const classes:(string|null)[] = [\n 'substrate-button',\n this.getAttribute('class')\n ]\n const text = this.innerHTML\n\n const btnProps = {\n classes: classes.filter(Boolean),\n disabled,\n autofocus,\n tabindex,\n type,\n name,\n }\n\n this.innerHTML = html(btnProps, text)\n }\n}\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAqB;AACrB,oBAAwD;AAEjD,MAAM,wBAAwB,cAAAA,gBAAqB;AAAA,EAH1D,OAG0D;AAAA;AAAA;AAAA,EACtD,OAAO,SAAU;AACb,QAAI,EAAE,oBAAoB,QAAS;AAEnC,WAAO,eAAe;AAAA,MAClB,gBAAgB,OAAO;AAAA,MACvB;AAAA,IACJ;AAAA,EACJ;AAAA,EAEA,oBAA0B;AACtB,SAAK,OAAO;AAAA,EAChB;AAAA,EAEA,SAAU;AACN,UAAM;AAAA,MACF;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACJ,IAAI;AACJ,UAAM,OAAO,KAAK,aAAa,MAAM;AAErC,UAAM,UAA0B;AAAA,MAC5B;AAAA,MACA,KAAK,aAAa,OAAO;AAAA,IAC7B;AACA,UAAM,OAAO,KAAK;AAElB,UAAM,WAAW;AAAA,MACb,SAAS,QAAQ,OAAO,OAAO;AAAA,MAC/B;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACJ;AAEA,SAAK,gBAAY,kBAAK,UAAU,IAAI;AAAA,EACxC;AACJ;",
6
6
  "names": ["SubstrateButtonLight"]
7
7
  }
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,IAAI,oBAAoB,EAAE,MAAM,aAAa,CAAA;AAErE,qBAAa,eAAgB,SAAQ,oBAAoB;IACrD,MAAM,CAAC,MAAM;IASb,iBAAiB,IAAI,IAAI;IAIzB,MAAM;CAwBT"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,IAAI,oBAAoB,EAAE,MAAM,aAAa,CAAA;AAErE,qBAAa,eAAgB,SAAQ,oBAAoB;IACrD,MAAM,CAAC,MAAM;IASb,iBAAiB,IAAI,IAAI;IAIzB,MAAM;CA0BT"}
package/dist/index.js CHANGED
@@ -23,6 +23,7 @@ class SubstrateButton extends SubstrateButtonLight {
23
23
  tabindex,
24
24
  disabled
25
25
  } = this;
26
+ const name = this.getAttribute("name");
26
27
  const classes = [
27
28
  "substrate-button",
28
29
  this.getAttribute("class")
@@ -33,7 +34,8 @@ class SubstrateButton extends SubstrateButtonLight {
33
34
  disabled,
34
35
  autofocus,
35
36
  tabindex,
36
- type
37
+ type,
38
+ name
37
39
  };
38
40
  this.innerHTML = html(btnProps, text);
39
41
  }
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 { html } from './html.js'\nimport { SubstrateButton as SubstrateButtonLight } from './client.js'\n\nexport class SubstrateButton extends SubstrateButtonLight {\n static define () {\n if (!('customElements' in window)) return\n\n return customElements.define(\n SubstrateButton.TAG || 'substrate-button',\n SubstrateButton\n )\n }\n\n connectedCallback ():void {\n this.render()\n }\n\n render () {\n const {\n type,\n autofocus,\n tabindex,\n disabled,\n } = this\n\n const classes:(string|null)[] = [\n 'substrate-button',\n this.getAttribute('class')\n ]\n const text = this.innerHTML\n\n const btnProps = {\n classes: classes.filter(Boolean),\n disabled,\n autofocus,\n tabindex,\n type,\n }\n\n this.innerHTML = html(btnProps, text)\n }\n}\n"],
5
- "mappings": ";;AAAA,SAAS,YAAY;AACrB,SAAS,mBAAmB,4BAA4B;AAEjD,MAAM,wBAAwB,qBAAqB;AAAA,EAH1D,OAG0D;AAAA;AAAA;AAAA,EACtD,OAAO,SAAU;AACb,QAAI,EAAE,oBAAoB,QAAS;AAEnC,WAAO,eAAe;AAAA,MAClB,gBAAgB,OAAO;AAAA,MACvB;AAAA,IACJ;AAAA,EACJ;AAAA,EAEA,oBAA0B;AACtB,SAAK,OAAO;AAAA,EAChB;AAAA,EAEA,SAAU;AACN,UAAM;AAAA,MACF;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACJ,IAAI;AAEJ,UAAM,UAA0B;AAAA,MAC5B;AAAA,MACA,KAAK,aAAa,OAAO;AAAA,IAC7B;AACA,UAAM,OAAO,KAAK;AAElB,UAAM,WAAW;AAAA,MACb,SAAS,QAAQ,OAAO,OAAO;AAAA,MAC/B;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACJ;AAEA,SAAK,YAAY,KAAK,UAAU,IAAI;AAAA,EACxC;AACJ;",
4
+ "sourcesContent": ["import { html } from './html.js'\nimport { SubstrateButton as SubstrateButtonLight } from './client.js'\n\nexport class SubstrateButton extends SubstrateButtonLight {\n static define () {\n if (!('customElements' in window)) return\n\n return customElements.define(\n SubstrateButton.TAG || 'substrate-button',\n SubstrateButton\n )\n }\n\n connectedCallback ():void {\n this.render()\n }\n\n render () {\n const {\n type,\n autofocus,\n tabindex,\n disabled,\n } = this\n const name = this.getAttribute('name')\n\n const classes:(string|null)[] = [\n 'substrate-button',\n this.getAttribute('class')\n ]\n const text = this.innerHTML\n\n const btnProps = {\n classes: classes.filter(Boolean),\n disabled,\n autofocus,\n tabindex,\n type,\n name,\n }\n\n this.innerHTML = html(btnProps, text)\n }\n}\n"],
5
+ "mappings": ";;AAAA,SAAS,YAAY;AACrB,SAAS,mBAAmB,4BAA4B;AAEjD,MAAM,wBAAwB,qBAAqB;AAAA,EAH1D,OAG0D;AAAA;AAAA;AAAA,EACtD,OAAO,SAAU;AACb,QAAI,EAAE,oBAAoB,QAAS;AAEnC,WAAO,eAAe;AAAA,MAClB,gBAAgB,OAAO;AAAA,MACvB;AAAA,IACJ;AAAA,EACJ;AAAA,EAEA,oBAA0B;AACtB,SAAK,OAAO;AAAA,EAChB;AAAA,EAEA,SAAU;AACN,UAAM;AAAA,MACF;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACJ,IAAI;AACJ,UAAM,OAAO,KAAK,aAAa,MAAM;AAErC,UAAM,UAA0B;AAAA,MAC5B;AAAA,MACA,KAAK,aAAa,OAAO;AAAA,IAC7B;AACA,UAAM,OAAO,KAAK;AAElB,UAAM,WAAW;AAAA,MACb,SAAS,QAAQ,OAAO,OAAO;AAAA,MAC/B;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACJ;AAEA,SAAK,YAAY,KAAK,UAAU,IAAI;AAAA,EACxC;AACJ;",
6
6
  "names": []
7
7
  }
package/dist/index.min.js CHANGED
@@ -1,6 +1,6 @@
1
- var g=Object.defineProperty;var n=(s,t)=>g(s,"name",{value:t,configurable:!0});function h(s,t){let{type:e,autofocus:r,tabindex:i,disabled:o,classes:a}=s,u=new Set(a);u.add("substrate-button");let l=Array.from(u),d=[l.length?`class="${l.filter(Boolean).join(" ")}"`:"",o?"disabled":"",r?"autofocus":"",e?`type="${e}"`:"",i?`tabindex="${i}"`:'tabindex="0"','role="button"'].filter(Boolean).join(" ");return typeof window>"u"?`<substrate-button${o?" disabled":""}>
2
- <button ${d}>${t}</button>
3
- </substrate-button$>`:`<button ${d}>
1
+ var f=Object.defineProperty;var i=(s,t)=>f(s,"name",{value:t,configurable:!0});function c(s,t){let{type:e,autofocus:r,tabindex:n,disabled:o,classes:l,name:u}=s,b=new Set(l);b.add("substrate-button");let d=Array.from(b),h=[d.length?`class="${d.filter(Boolean).join(" ")}"`:"",o?"disabled":"",r?"autofocus":"",e?`type="${e}"`:"",u?`name=${u}`:"",n?`tabindex="${n}"`:'tabindex="0"','role="button"'].filter(Boolean).join(" ");return typeof window>"u"?`<substrate-button${o?" disabled":""}>
2
+ <button ${h}>${t}</button>
3
+ </substrate-button$>`:`<button ${h}>
4
4
  ${t}
5
- </button>`}n(h,"html");var b=class s extends HTMLElement{static{n(this,"SubstrateButton")}static observedAttributes=["autofocus","disabled","spinning"];static TAG="substrate-button";_isSpinning;constructor(){super(),this.getAttribute("disabled")!==null&&setTimeout(()=>{this.disabled=!0},0),this.autofocus=this.getAttribute("autofocus")!==null,this._isSpinning=this.getAttribute("spinning")!==null}get form(){return this.button?.form}get disabled(){return!!this.button?.hasAttribute("disabled")}set disabled(t){t?(this.button?.setAttribute("disabled",""),this.button?.setAttribute("aria-disabled","true")):(this._removeAttribute("disabled"),this.button?.setAttribute("aria-disabled","false"))}get type(){return this.button?.getAttribute("type")}get tabindex(){let t=this.button?.getAttribute("tabindex");return t?parseInt(t):0}get spinning(){return this._isSpinning}set spinning(t){t?this.setAttribute("spinning",""):this.removeAttribute("spinning")}set type(t){this._setAttribute("type",t)}get autofocus(){return!!this.button?.hasAttribute("autofocus")}set autofocus(t){t?this._setAttribute("autofocus",t):this._removeAttribute("autofocus")}_setAttribute(t,e){if(e===!1)this._removeAttribute(t),this.button?.removeAttribute(t);else{if(e===!0)return this.button?.setAttribute(t,"");if(e===null)return this._removeAttribute(t);this.button?.setAttribute(t,e)}}_removeAttribute(t){this.removeAttribute(t),this.button?.removeAttribute(t)}get button(){return this.querySelector("button")}handleChange_autofocus(t,e){this._setAttribute("autofocus",e)}handleChange_disabled(t,e){this.disabled=e!==null,e===null?this.button?.removeAttribute("disabled"):this.button?.setAttribute("disabled",""+e)}handleChange_spinning(t,e){e!==null?this.classList.add("substrate-loading"):this.classList.remove("substrate-loading")}attributeChangedCallback(t,e,r){let i=this[`handleChange_${t}`];i&&i.call(this,e,r)}connectedCallback(){this.render()}static define(){if("customElements"in window)return customElements.define(s.TAG||"substrate-button",s)}render(){}};var c=class s extends b{static{n(this,"SubstrateButton")}static define(){if("customElements"in window)return customElements.define(s.TAG||"substrate-button",s)}connectedCallback(){this.render()}render(){let{type:t,autofocus:e,tabindex:r,disabled:i}=this,o=["substrate-button",this.getAttribute("class")],a=this.innerHTML,u={classes:o.filter(Boolean),disabled:i,autofocus:e,tabindex:r,type:t};this.innerHTML=h(u,a)}};export{c as SubstrateButton};
5
+ </button>`}i(c,"html");var a=class s extends HTMLElement{static{i(this,"SubstrateButton")}static observedAttributes=["autofocus","disabled","spinning"];static TAG="substrate-button";_isSpinning;constructor(){super(),this.getAttribute("disabled")!==null&&setTimeout(()=>{this.disabled=!0},0),this.autofocus=this.getAttribute("autofocus")!==null,this._isSpinning=this.getAttribute("spinning")!==null}get form(){return this.button?.form}get disabled(){return!!this.button?.hasAttribute("disabled")}set disabled(t){t?(this.button?.setAttribute("disabled",""),this.button?.setAttribute("aria-disabled","true")):(this._removeAttribute("disabled"),this.button?.setAttribute("aria-disabled","false"))}get type(){return this.button?.getAttribute("type")}get tabindex(){let t=this.button?.getAttribute("tabindex");return t?parseInt(t):0}get spinning(){return this._isSpinning}set spinning(t){t?this.setAttribute("spinning",""):this.removeAttribute("spinning")}set type(t){this._setAttribute("type",t)}get autofocus(){return!!this.button?.hasAttribute("autofocus")}set autofocus(t){t?this._setAttribute("autofocus",t):this._removeAttribute("autofocus")}_setAttribute(t,e){if(e===!1)this._removeAttribute(t),this.button?.removeAttribute(t);else{if(e===!0)return this.button?.setAttribute(t,"");if(e===null)return this._removeAttribute(t);this.button?.setAttribute(t,e)}}_removeAttribute(t){this.removeAttribute(t),this.button?.removeAttribute(t)}get button(){return this.querySelector("button")}handleChange_autofocus(t,e){this._setAttribute("autofocus",e)}handleChange_disabled(t,e){this.disabled=e!==null,e===null?this.button?.removeAttribute("disabled"):this.button?.setAttribute("disabled",""+e)}handleChange_spinning(t,e){e!==null?this.classList.add("substrate-loading"):this.classList.remove("substrate-loading")}attributeChangedCallback(t,e,r){let n=this[`handleChange_${t}`];n&&n.call(this,e,r)}connectedCallback(){this.render()}static define(){if("customElements"in window)return customElements.define(s.TAG||"substrate-button",s)}render(){}};var g=class s extends a{static{i(this,"SubstrateButton")}static define(){if("customElements"in window)return customElements.define(s.TAG||"substrate-button",s)}connectedCallback(){this.render()}render(){let{type:t,autofocus:e,tabindex:r,disabled:n}=this,o=this.getAttribute("name"),l=["substrate-button",this.getAttribute("class")],u=this.innerHTML,b={classes:l.filter(Boolean),disabled:n,autofocus:e,tabindex:r,type:t,name:o};this.innerHTML=c(b,u)}};export{g as SubstrateButton};
6
6
  //# sourceMappingURL=index.min.js.map
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../src/html.ts", "../src/client.ts", "../src/index.ts"],
4
- "sourcesContent": ["export type Attrs = {\n type:string|null;\n autofocus:boolean;\n tabindex:string|number;\n disabled:boolean;\n classes:string[]|Set<string>;\n}\nexport function html (attrs:Partial<Attrs>, textContent:string) {\n const {\n type,\n autofocus,\n tabindex,\n disabled,\n classes\n } = attrs\n\n const _classes = new Set(classes)\n _classes.add('substrate-button')\n const arr = Array.from(_classes)\n\n const btnProps = ([\n arr.length ? `class=\"${arr.filter(Boolean).join(' ')}\"` : '',\n disabled ? 'disabled' : '',\n autofocus ? 'autofocus' : '',\n type ? `type=\"${type}\"` : '',\n tabindex ? `tabindex=\"${tabindex}\"` : 'tabindex=\"0\"',\n 'role=\"button\"'\n ]).filter(Boolean).join(' ')\n\n // rendering in node?\n return typeof window === 'undefined' ?\n `<substrate-button${disabled ? ' disabled' : ''}>\n <button ${btnProps}>${textContent}</button>\n </substrate-button$>` :\n `<button ${btnProps}>\n ${textContent}\n </button>`\n}\n", "// for docuement.querySelector\ndeclare global {\n interface HTMLElementTagNameMap {\n 'substrate-button': SubstrateButton\n }\n}\n\n/**\n * This is the lightweight version for browsers + server-side rendering.\n */\nexport class SubstrateButton extends HTMLElement {\n // for `attributeChangedCallback`\n static observedAttributes = ['autofocus', 'disabled', 'spinning']\n static TAG = 'substrate-button'\n _isSpinning:boolean\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 this.autofocus = (this.getAttribute('autofocus') !== null)\n this._isSpinning = (this.getAttribute('spinning') !== null)\n }\n\n get form ():HTMLFormElement|undefined|null {\n return this.button?.form\n }\n\n get disabled ():boolean {\n return !!(this.button?.hasAttribute('disabled'))\n }\n\n set disabled (disabledValue:boolean) {\n if (!disabledValue) {\n this._removeAttribute('disabled')\n this.button?.setAttribute('aria-disabled', 'false')\n } else {\n this.button?.setAttribute('disabled', '')\n this.button?.setAttribute('aria-disabled', 'true')\n }\n }\n\n get type ():string|null|undefined {\n return this.button?.getAttribute('type')\n }\n\n get tabindex ():number {\n const i = this.button?.getAttribute('tabindex')\n if (!i) return 0\n return parseInt(i)\n }\n\n get spinning ():boolean {\n return this._isSpinning\n }\n\n set spinning (value:boolean) {\n if (value) this.setAttribute('spinning', '')\n else this.removeAttribute('spinning')\n }\n\n set type (value:string) {\n this._setAttribute('type', value)\n }\n\n get autofocus ():boolean {\n return !!(this.button?.hasAttribute('autofocus'))\n }\n\n set autofocus (value:boolean) {\n if (value) {\n this._setAttribute('autofocus', value)\n } else {\n this._removeAttribute('autofocus')\n }\n }\n\n /**\n * Set attributes on the internal button element.\n */\n _setAttribute (name:string, value:boolean|string|null):void {\n if (value === false) {\n // false means remove the attribute\n this._removeAttribute(name)\n this.button?.removeAttribute(name)\n } else {\n if (value === true) {\n // true means set the attribute with no value\n return this.button?.setAttribute(name, '')\n }\n\n if (value === null) {\n // null means remove\n return this._removeAttribute(name)\n }\n\n // else, set value to a string\n this.button?.setAttribute(name, value)\n }\n }\n\n /**\n * Remove from `this` and also button child.\n */\n _removeAttribute (name:string) {\n this.removeAttribute(name)\n this.button?.removeAttribute(name)\n }\n\n get button ():HTMLButtonElement|null {\n return this.querySelector('button')\n }\n\n /**\n * Handle 'autofocus' 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_autofocus (_oldValue:string, newValue:string) {\n this._setAttribute('autofocus', newValue)\n }\n\n handleChange_disabled (_old, newValue:boolean|string) {\n this.disabled = (newValue !== null)\n if (newValue === null) this.button?.removeAttribute('disabled')\n else this.button?.setAttribute('disabled', '' + newValue)\n }\n\n handleChange_spinning (_, newValue:boolean) {\n if (newValue !== null) {\n this.classList.add('substrate-loading')\n } else {\n this.classList.remove('substrate-loading')\n }\n }\n\n /**\n * Runs when the value of an attribute is changed.\n *\n * Should add methods to this class like `handleChange_class`, to\n * listen for changes to `class` attribute.\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 }\n\n connectedCallback () {\n // connect event listeners\n this.render()\n }\n\n static define () {\n if (!('customElements' in window)) return\n\n return customElements.define(\n SubstrateButton.TAG || 'substrate-button',\n SubstrateButton\n )\n }\n\n render () {\n // noop\n }\n}\n\n", "import { html } from './html.js'\nimport { SubstrateButton as SubstrateButtonLight } from './client.js'\n\nexport class SubstrateButton extends SubstrateButtonLight {\n static define () {\n if (!('customElements' in window)) return\n\n return customElements.define(\n SubstrateButton.TAG || 'substrate-button',\n SubstrateButton\n )\n }\n\n connectedCallback ():void {\n this.render()\n }\n\n render () {\n const {\n type,\n autofocus,\n tabindex,\n disabled,\n } = this\n\n const classes:(string|null)[] = [\n 'substrate-button',\n this.getAttribute('class')\n ]\n const text = this.innerHTML\n\n const btnProps = {\n classes: classes.filter(Boolean),\n disabled,\n autofocus,\n tabindex,\n type,\n }\n\n this.innerHTML = html(btnProps, text)\n }\n}\n"],
5
- "mappings": "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",
6
- "names": ["html", "attrs", "textContent", "type", "autofocus", "tabindex", "disabled", "classes", "_classes", "arr", "btnProps", "__name", "SubstrateButton", "_SubstrateButton", "__name", "disabledValue", "i", "value", "name", "_oldValue", "newValue", "_old", "_", "oldValue", "handler", "SubstrateButton", "_SubstrateButton", "__name", "type", "autofocus", "tabindex", "disabled", "classes", "text", "btnProps", "html"]
4
+ "sourcesContent": ["export type Attrs = {\n type:string|null;\n autofocus:boolean;\n tabindex:string|number;\n disabled:boolean;\n name:string|null;\n classes:string[]|Set<string>;\n}\nexport function html (attrs:Partial<Attrs>, textContent:string) {\n const {\n type,\n autofocus,\n tabindex,\n disabled,\n classes,\n name\n } = attrs\n\n const _classes = new Set(classes)\n _classes.add('substrate-button')\n const arr = Array.from(_classes)\n\n const btnProps = ([\n arr.length ? `class=\"${arr.filter(Boolean).join(' ')}\"` : '',\n disabled ? 'disabled' : '',\n autofocus ? 'autofocus' : '',\n type ? `type=\"${type}\"` : '',\n name ? `name=${name}` : '',\n tabindex ? `tabindex=\"${tabindex}\"` : 'tabindex=\"0\"',\n 'role=\"button\"'\n ]).filter(Boolean).join(' ')\n\n // rendering in node?\n return typeof window === 'undefined' ?\n `<substrate-button${disabled ? ' disabled' : ''}>\n <button ${btnProps}>${textContent}</button>\n </substrate-button$>` :\n `<button ${btnProps}>\n ${textContent}\n </button>`\n}\n", "// for docuement.querySelector\ndeclare global {\n interface HTMLElementTagNameMap {\n 'substrate-button': SubstrateButton\n }\n}\n\n/**\n * This is the lightweight version for browsers + server-side rendering.\n */\nexport class SubstrateButton extends HTMLElement {\n // for `attributeChangedCallback`\n static observedAttributes = ['autofocus', 'disabled', 'spinning']\n static TAG = 'substrate-button'\n _isSpinning:boolean\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 this.autofocus = (this.getAttribute('autofocus') !== null)\n this._isSpinning = (this.getAttribute('spinning') !== null)\n }\n\n get form ():HTMLFormElement|undefined|null {\n return this.button?.form\n }\n\n get disabled ():boolean {\n return !!(this.button?.hasAttribute('disabled'))\n }\n\n set disabled (disabledValue:boolean) {\n if (!disabledValue) {\n this._removeAttribute('disabled')\n this.button?.setAttribute('aria-disabled', 'false')\n } else {\n this.button?.setAttribute('disabled', '')\n this.button?.setAttribute('aria-disabled', 'true')\n }\n }\n\n get type ():string|null|undefined {\n return this.button?.getAttribute('type')\n }\n\n get tabindex ():number {\n const i = this.button?.getAttribute('tabindex')\n if (!i) return 0\n return parseInt(i)\n }\n\n get spinning ():boolean {\n return this._isSpinning\n }\n\n set spinning (value:boolean) {\n if (value) this.setAttribute('spinning', '')\n else this.removeAttribute('spinning')\n }\n\n set type (value:string) {\n this._setAttribute('type', value)\n }\n\n get autofocus ():boolean {\n return !!(this.button?.hasAttribute('autofocus'))\n }\n\n set autofocus (value:boolean) {\n if (value) {\n this._setAttribute('autofocus', value)\n } else {\n this._removeAttribute('autofocus')\n }\n }\n\n /**\n * Set attributes on the internal button element.\n */\n _setAttribute (name:string, value:boolean|string|null):void {\n if (value === false) {\n // false means remove the attribute\n this._removeAttribute(name)\n this.button?.removeAttribute(name)\n } else {\n if (value === true) {\n // true means set the attribute with no value\n return this.button?.setAttribute(name, '')\n }\n\n if (value === null) {\n // null means remove\n return this._removeAttribute(name)\n }\n\n // else, set value to a string\n this.button?.setAttribute(name, value)\n }\n }\n\n /**\n * Remove from `this` and also button child.\n */\n _removeAttribute (name:string) {\n this.removeAttribute(name)\n this.button?.removeAttribute(name)\n }\n\n get button ():HTMLButtonElement|null {\n return this.querySelector('button')\n }\n\n /**\n * Handle 'autofocus' 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_autofocus (_oldValue:string, newValue:string) {\n this._setAttribute('autofocus', newValue)\n }\n\n handleChange_disabled (_old, newValue:boolean|string) {\n this.disabled = (newValue !== null)\n if (newValue === null) this.button?.removeAttribute('disabled')\n else this.button?.setAttribute('disabled', '' + newValue)\n }\n\n handleChange_spinning (_, newValue:boolean) {\n if (newValue !== null) {\n this.classList.add('substrate-loading')\n } else {\n this.classList.remove('substrate-loading')\n }\n }\n\n /**\n * Runs when the value of an attribute is changed.\n *\n * Should add methods to this class like `handleChange_class`, to\n * listen for changes to `class` attribute.\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 }\n\n connectedCallback () {\n // connect event listeners\n this.render()\n }\n\n static define () {\n if (!('customElements' in window)) return\n\n return customElements.define(\n SubstrateButton.TAG || 'substrate-button',\n SubstrateButton\n )\n }\n\n render () {\n // noop\n }\n}\n\n", "import { html } from './html.js'\nimport { SubstrateButton as SubstrateButtonLight } from './client.js'\n\nexport class SubstrateButton extends SubstrateButtonLight {\n static define () {\n if (!('customElements' in window)) return\n\n return customElements.define(\n SubstrateButton.TAG || 'substrate-button',\n SubstrateButton\n )\n }\n\n connectedCallback ():void {\n this.render()\n }\n\n render () {\n const {\n type,\n autofocus,\n tabindex,\n disabled,\n } = this\n const name = this.getAttribute('name')\n\n const classes:(string|null)[] = [\n 'substrate-button',\n this.getAttribute('class')\n ]\n const text = this.innerHTML\n\n const btnProps = {\n classes: classes.filter(Boolean),\n disabled,\n autofocus,\n tabindex,\n type,\n name,\n }\n\n this.innerHTML = html(btnProps, text)\n }\n}\n"],
5
+ "mappings": "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",
6
+ "names": ["html", "attrs", "textContent", "type", "autofocus", "tabindex", "disabled", "classes", "name", "_classes", "arr", "btnProps", "__name", "SubstrateButton", "_SubstrateButton", "__name", "disabledValue", "i", "value", "name", "_oldValue", "newValue", "_old", "_", "oldValue", "handler", "SubstrateButton", "_SubstrateButton", "__name", "type", "autofocus", "tabindex", "disabled", "name", "classes", "text", "btnProps", "html"]
7
7
  }
package/dist/meta.json CHANGED
@@ -6,12 +6,12 @@
6
6
  "format": "esm"
7
7
  },
8
8
  "src/html.ts": {
9
- "bytes": 1063,
9
+ "bytes": 1135,
10
10
  "imports": [],
11
11
  "format": "esm"
12
12
  },
13
13
  "src/index.ts": {
14
- "bytes": 955,
14
+ "bytes": 1020,
15
15
  "imports": [],
16
16
  "format": "esm"
17
17
  }
@@ -40,7 +40,7 @@
40
40
  "imports": [],
41
41
  "exports": [],
42
42
  "inputs": {},
43
- "bytes": 1778
43
+ "bytes": 1894
44
44
  },
45
45
  "dist/html.js": {
46
46
  "imports": [],
@@ -50,16 +50,16 @@
50
50
  "entryPoint": "src/html.ts",
51
51
  "inputs": {
52
52
  "src/html.ts": {
53
- "bytesInOutput": 801
53
+ "bytesInOutput": 843
54
54
  }
55
55
  },
56
- "bytes": 982
56
+ "bytes": 1024
57
57
  },
58
58
  "dist/index.js.map": {
59
59
  "imports": [],
60
60
  "exports": [],
61
61
  "inputs": {},
62
- "bytes": 1671
62
+ "bytes": 1779
63
63
  },
64
64
  "dist/index.js": {
65
65
  "imports": [
@@ -80,10 +80,10 @@
80
80
  "entryPoint": "src/index.ts",
81
81
  "inputs": {
82
82
  "src/index.ts": {
83
- "bytesInOutput": 839
83
+ "bytesInOutput": 895
84
84
  }
85
85
  },
86
- "bytes": 1032
86
+ "bytes": 1088
87
87
  }
88
88
  }
89
89
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@substrate-system/button",
3
- "version": "0.0.22",
3
+ "version": "0.0.24",
4
4
  "description": "A button component with a visual \"loading\" state",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",
@@ -74,7 +74,7 @@
74
74
  "tape-run": "^11.0.0",
75
75
  "typedoc": "^0.28.1",
76
76
  "typescript": "^5.7.3",
77
- "vite": "^6.0.11"
77
+ "vite": "^7.0.2"
78
78
  },
79
79
  "author": "nichoth <nichoth@nichoth.com> (https://nichoth.com)",
80
80
  "license": "SEE LICENSE IN LICENSE",