@substrate-system/button 0.0.8 → 0.0.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +46 -10
- package/dist/index.cjs +3 -0
- package/dist/index.cjs.map +2 -2
- package/dist/index.d.ts +3 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +3 -0
- package/dist/index.js.map +2 -2
- package/dist/index.min.js.map +2 -2
- package/dist/meta.json +4 -4
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -24,9 +24,11 @@ A button web component, with a visual "loading" state.
|
|
|
24
24
|
* [ESM](#esm)
|
|
25
25
|
* [Common JS](#common-js)
|
|
26
26
|
- [CSS](#css)
|
|
27
|
-
* [
|
|
28
|
-
* [
|
|
27
|
+
* [Bundler](#bundler)
|
|
28
|
+
* [CSS import](#css-import)
|
|
29
29
|
- [Use](#use)
|
|
30
|
+
* [Example](#example)
|
|
31
|
+
* [Attributes](#attributes)
|
|
30
32
|
* [HTML](#html)
|
|
31
33
|
* [pre-built](#pre-built)
|
|
32
34
|
|
|
@@ -75,7 +77,9 @@ const { SubstrateButton } = require('@substrate-system/button')
|
|
|
75
77
|
|
|
76
78
|
## CSS
|
|
77
79
|
|
|
78
|
-
###
|
|
80
|
+
### Bundler
|
|
81
|
+
|
|
82
|
+
Import CSS with a bundler, like [esbuild](https://esbuild.github.io/content-types/#css).
|
|
79
83
|
|
|
80
84
|
```js
|
|
81
85
|
import '@substrate-system/button/css'
|
|
@@ -86,15 +90,12 @@ Or minified:
|
|
|
86
90
|
import '@substrate-system/button/css/min'
|
|
87
91
|
```
|
|
88
92
|
|
|
89
|
-
###
|
|
93
|
+
### CSS import
|
|
94
|
+
|
|
95
|
+
Or use CSS imports:
|
|
90
96
|
|
|
91
97
|
```css
|
|
92
|
-
substrate-button
|
|
93
|
-
--substrate-button-text: #36393d;
|
|
94
|
-
--substrate-button-background-focus: #f7f7f5;
|
|
95
|
-
--substrate-button-background-disabled: #f7f7f5;
|
|
96
|
-
--substrate-button-background-hover: #e6e6e6;
|
|
97
|
-
}
|
|
98
|
+
@import url("../node_modules/@substrate-system/button/dist/index.min.css");
|
|
98
99
|
```
|
|
99
100
|
|
|
100
101
|
## Use
|
|
@@ -127,6 +128,41 @@ SubstrateButton.tag = 'cool-button'
|
|
|
127
128
|
SubstrateButton.define()
|
|
128
129
|
```
|
|
129
130
|
|
|
131
|
+
### Example
|
|
132
|
+
|
|
133
|
+
See the example in [./example](./example/).
|
|
134
|
+
|
|
135
|
+
### Attributes
|
|
136
|
+
|
|
137
|
+
#### spinning
|
|
138
|
+
|
|
139
|
+
Add an attribute `spinning` to set the loading state.
|
|
140
|
+
|
|
141
|
+
```js
|
|
142
|
+
const el = document.querySelector('substrate-button')
|
|
143
|
+
el?.setAttribute('spinning', '')
|
|
144
|
+
// now it shows a spinning animation
|
|
145
|
+
```
|
|
146
|
+
|
|
147
|
+
Remove the attribute to stop the animation:
|
|
148
|
+
```js
|
|
149
|
+
const el = document.querySelector('substrate-button')
|
|
150
|
+
el?.removeAttribute('spinning')
|
|
151
|
+
```
|
|
152
|
+
|
|
153
|
+
#### JS API
|
|
154
|
+
|
|
155
|
+
Or, if you have a reference to the element, you can set the `spinning` property
|
|
156
|
+
for the same effect:
|
|
157
|
+
|
|
158
|
+
```js
|
|
159
|
+
const el = document.querySelector('substrate-button')
|
|
160
|
+
|
|
161
|
+
el.spinning = true // spin
|
|
162
|
+
|
|
163
|
+
el.spinning = false // stop
|
|
164
|
+
```
|
|
165
|
+
|
|
130
166
|
### HTML
|
|
131
167
|
```html
|
|
132
168
|
<div>
|
package/dist/index.cjs
CHANGED
package/dist/index.cjs.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/index.ts"],
|
|
4
|
-
"sourcesContent": ["// for docuement.querySelector\ndeclare global {\n interface HTMLElementTagNameMap {\n 'substrate-button': SubstrateButton\n }\n}\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 _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 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 const {\n type,\n autofocus,\n tabindex,\n disabled,\n } = this\n\n const classes:string[] = ['substrate-button']\n\n const btnProps = ([\n `class=\"${classes.join(' ')}\"`,\n disabled ? 'disabled' : '',\n autofocus ? 'autofocus' : '',\n type ? `type=\"${this.type}\"` : '',\n tabindex ? `tabindex=\"${tabindex}\"` : 'tabindex=\"0\"',\n 'role=\"button\"'\n ]).filter(Boolean).join(' ')\n\n this.innerHTML = `<button ${btnProps}>${this.innerHTML}</button>`\n }\n}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAOO,MAAM,wBAAwB,YAAY;AAAA,EAPjD,OAOiD;AAAA;AAAA;AAAA;AAAA,EAE7C,OAAO,qBAAqB,CAAC,aAAa,YAAY,UAAU;AAAA,EAChE,OAAO,MAAM;AAAA,EACb;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;AACA,SAAK,YAAa,KAAK,aAAa,WAAW,MAAM;AACrD,SAAK,cAAe,KAAK,aAAa,UAAU,MAAM;AAAA,EAC1D;AAAA,EAEA,IAAI,OAAuC;AACvC,WAAO,KAAK,QAAQ;AAAA,EACxB;AAAA,EAEA,IAAI,WAAoB;AACpB,WAAO,CAAC,CAAE,KAAK,QAAQ,aAAa,UAAU;AAAA,EAClD;AAAA,EAEA,IAAI,SAAU,eAAuB;AACjC,QAAI,CAAC,eAAe;AAChB,WAAK,iBAAiB,UAAU;AAChC,WAAK,QAAQ,aAAa,iBAAiB,OAAO;AAAA,IACtD,OAAO;AACH,WAAK,QAAQ,aAAa,YAAY,EAAE;AACxC,WAAK,QAAQ,aAAa,iBAAiB,MAAM;AAAA,IACrD;AAAA,EACJ;AAAA,EAEA,IAAI,OAA8B;AAC9B,WAAO,KAAK,QAAQ,aAAa,MAAM;AAAA,EAC3C;AAAA,EAEA,IAAI,WAAmB;AACnB,UAAM,IAAI,KAAK,QAAQ,aAAa,UAAU;AAC9C,QAAI,CAAC,EAAG,QAAO;AACf,WAAO,SAAS,CAAC;AAAA,EACrB;AAAA,EAEA,IAAI,WAAoB;AACpB,WAAO,KAAK;AAAA,EAChB;AAAA,EAEA,IAAI,SAAU,OAAe;AACzB,QAAI,MAAO,MAAK,aAAa,YAAY,EAAE;AAAA,QACtC,MAAK,gBAAgB,UAAU;AAAA,EACxC;AAAA,EAEA,IAAI,KAAM,OAAc;AACpB,SAAK,cAAc,QAAQ,KAAK;AAAA,EACpC;AAAA,EAEA,IAAI,YAAqB;AACrB,WAAO,CAAC,CAAE,KAAK,QAAQ,aAAa,WAAW;AAAA,EACnD;AAAA,EAEA,IAAI,UAAW,OAAe;AAC1B,QAAI,OAAO;AACP,WAAK,cAAc,aAAa,KAAK;AAAA,IACzC,OAAO;AACH,WAAK,iBAAiB,WAAW;AAAA,IACrC;AAAA,EACJ;AAAA,
|
|
4
|
+
"sourcesContent": ["// for docuement.querySelector\ndeclare global {\n interface HTMLElementTagNameMap {\n 'substrate-button': SubstrateButton\n }\n}\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 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 const {\n type,\n autofocus,\n tabindex,\n disabled,\n } = this\n\n const classes:string[] = ['substrate-button']\n\n const btnProps = ([\n `class=\"${classes.join(' ')}\"`,\n disabled ? 'disabled' : '',\n autofocus ? 'autofocus' : '',\n type ? `type=\"${this.type}\"` : '',\n tabindex ? `tabindex=\"${tabindex}\"` : 'tabindex=\"0\"',\n 'role=\"button\"'\n ]).filter(Boolean).join(' ')\n\n this.innerHTML = `<button ${btnProps}>${this.innerHTML}</button>`\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/index.d.ts
CHANGED
|
@@ -18,6 +18,9 @@ export declare class SubstrateButton extends HTMLElement {
|
|
|
18
18
|
set type(value: string);
|
|
19
19
|
get autofocus(): boolean;
|
|
20
20
|
set autofocus(value: boolean);
|
|
21
|
+
/**
|
|
22
|
+
* Set attributes on the internal button element.
|
|
23
|
+
*/
|
|
21
24
|
_setAttribute(name: string, value: boolean | string | null): void;
|
|
22
25
|
/**
|
|
23
26
|
* Remove from `this` and also button child.
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,kBAAkB,EAAE,eAAe,CAAA;KACtC;CACJ;AAED,qBAAa,eAAgB,SAAQ,WAAW;IAE5C,MAAM,CAAC,kBAAkB,WAAwC;IACjE,MAAM,CAAC,GAAG,SAAqB;IAC/B,WAAW,EAAC,OAAO,CAAA;;IAenB,IAAI,IAAI,IAAI,eAAe,GAAC,SAAS,GAAC,IAAI,CAEzC;IAED,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED,IAAI,QAAQ,CAAE,aAAa,EAAC,OAAO,EAQlC;IAED,IAAI,IAAI,IAAI,MAAM,GAAC,IAAI,GAAC,SAAS,CAEhC;IAED,IAAI,QAAQ,IAAI,MAAM,CAIrB;IAED,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED,IAAI,QAAQ,CAAE,KAAK,EAAC,OAAO,EAG1B;IAED,IAAI,IAAI,CAAE,KAAK,EAAC,MAAM,EAErB;IAED,IAAI,SAAS,IAAI,OAAO,CAEvB;IAED,IAAI,SAAS,CAAE,KAAK,EAAC,OAAO,EAM3B;IAED,aAAa,CAAE,IAAI,EAAC,MAAM,EAAE,KAAK,EAAC,OAAO,GAAC,MAAM,GAAC,IAAI,GAAE,IAAI;IAqB3D;;OAEG;IACH,gBAAgB,CAAE,IAAI,EAAC,MAAM;IAK7B,IAAI,MAAM,IAAI,iBAAiB,GAAC,IAAI,CAEnC;IAED;;;;;;OAMG;IACH,sBAAsB,CAAE,SAAS,EAAC,MAAM,EAAE,QAAQ,EAAC,MAAM;IAIzD,qBAAqB,CAAE,IAAI,KAAA,EAAE,QAAQ,EAAC,OAAO,GAAC,MAAM;IAMpD,qBAAqB,CAAE,CAAC,KAAA,EAAE,QAAQ,EAAC,OAAO;IAQ1C;;;;;;;;;OASG;IACH,wBAAwB,CAAE,IAAI,EAAC,MAAM,EAAE,QAAQ,EAAC,MAAM,EAAE,QAAQ,EAAC,MAAM;IAKvE,iBAAiB;IAIjB,MAAM,CAAC,MAAM;IASb,MAAM;CAqBT"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,kBAAkB,EAAE,eAAe,CAAA;KACtC;CACJ;AAED,qBAAa,eAAgB,SAAQ,WAAW;IAE5C,MAAM,CAAC,kBAAkB,WAAwC;IACjE,MAAM,CAAC,GAAG,SAAqB;IAC/B,WAAW,EAAC,OAAO,CAAA;;IAenB,IAAI,IAAI,IAAI,eAAe,GAAC,SAAS,GAAC,IAAI,CAEzC;IAED,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED,IAAI,QAAQ,CAAE,aAAa,EAAC,OAAO,EAQlC;IAED,IAAI,IAAI,IAAI,MAAM,GAAC,IAAI,GAAC,SAAS,CAEhC;IAED,IAAI,QAAQ,IAAI,MAAM,CAIrB;IAED,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED,IAAI,QAAQ,CAAE,KAAK,EAAC,OAAO,EAG1B;IAED,IAAI,IAAI,CAAE,KAAK,EAAC,MAAM,EAErB;IAED,IAAI,SAAS,IAAI,OAAO,CAEvB;IAED,IAAI,SAAS,CAAE,KAAK,EAAC,OAAO,EAM3B;IAED;;OAEG;IACH,aAAa,CAAE,IAAI,EAAC,MAAM,EAAE,KAAK,EAAC,OAAO,GAAC,MAAM,GAAC,IAAI,GAAE,IAAI;IAqB3D;;OAEG;IACH,gBAAgB,CAAE,IAAI,EAAC,MAAM;IAK7B,IAAI,MAAM,IAAI,iBAAiB,GAAC,IAAI,CAEnC;IAED;;;;;;OAMG;IACH,sBAAsB,CAAE,SAAS,EAAC,MAAM,EAAE,QAAQ,EAAC,MAAM;IAIzD,qBAAqB,CAAE,IAAI,KAAA,EAAE,QAAQ,EAAC,OAAO,GAAC,MAAM;IAMpD,qBAAqB,CAAE,CAAC,KAAA,EAAE,QAAQ,EAAC,OAAO;IAQ1C;;;;;;;;;OASG;IACH,wBAAwB,CAAE,IAAI,EAAC,MAAM,EAAE,QAAQ,EAAC,MAAM,EAAE,QAAQ,EAAC,MAAM;IAKvE,iBAAiB;IAIjB,MAAM,CAAC,MAAM;IASb,MAAM;CAqBT"}
|
package/dist/index.js
CHANGED
package/dist/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/index.ts"],
|
|
4
|
-
"sourcesContent": ["// for docuement.querySelector\ndeclare global {\n interface HTMLElementTagNameMap {\n 'substrate-button': SubstrateButton\n }\n}\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 _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 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 const {\n type,\n autofocus,\n tabindex,\n disabled,\n } = this\n\n const classes:string[] = ['substrate-button']\n\n const btnProps = ([\n `class=\"${classes.join(' ')}\"`,\n disabled ? 'disabled' : '',\n autofocus ? 'autofocus' : '',\n type ? `type=\"${this.type}\"` : '',\n tabindex ? `tabindex=\"${tabindex}\"` : 'tabindex=\"0\"',\n 'role=\"button\"'\n ]).filter(Boolean).join(' ')\n\n this.innerHTML = `<button ${btnProps}>${this.innerHTML}</button>`\n }\n}\n"],
|
|
5
|
-
"mappings": ";;AAOO,MAAM,wBAAwB,YAAY;AAAA,EAPjD,OAOiD;AAAA;AAAA;AAAA;AAAA,EAE7C,OAAO,qBAAqB,CAAC,aAAa,YAAY,UAAU;AAAA,EAChE,OAAO,MAAM;AAAA,EACb;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;AACA,SAAK,YAAa,KAAK,aAAa,WAAW,MAAM;AACrD,SAAK,cAAe,KAAK,aAAa,UAAU,MAAM;AAAA,EAC1D;AAAA,EAEA,IAAI,OAAuC;AACvC,WAAO,KAAK,QAAQ;AAAA,EACxB;AAAA,EAEA,IAAI,WAAoB;AACpB,WAAO,CAAC,CAAE,KAAK,QAAQ,aAAa,UAAU;AAAA,EAClD;AAAA,EAEA,IAAI,SAAU,eAAuB;AACjC,QAAI,CAAC,eAAe;AAChB,WAAK,iBAAiB,UAAU;AAChC,WAAK,QAAQ,aAAa,iBAAiB,OAAO;AAAA,IACtD,OAAO;AACH,WAAK,QAAQ,aAAa,YAAY,EAAE;AACxC,WAAK,QAAQ,aAAa,iBAAiB,MAAM;AAAA,IACrD;AAAA,EACJ;AAAA,EAEA,IAAI,OAA8B;AAC9B,WAAO,KAAK,QAAQ,aAAa,MAAM;AAAA,EAC3C;AAAA,EAEA,IAAI,WAAmB;AACnB,UAAM,IAAI,KAAK,QAAQ,aAAa,UAAU;AAC9C,QAAI,CAAC,EAAG,QAAO;AACf,WAAO,SAAS,CAAC;AAAA,EACrB;AAAA,EAEA,IAAI,WAAoB;AACpB,WAAO,KAAK;AAAA,EAChB;AAAA,EAEA,IAAI,SAAU,OAAe;AACzB,QAAI,MAAO,MAAK,aAAa,YAAY,EAAE;AAAA,QACtC,MAAK,gBAAgB,UAAU;AAAA,EACxC;AAAA,EAEA,IAAI,KAAM,OAAc;AACpB,SAAK,cAAc,QAAQ,KAAK;AAAA,EACpC;AAAA,EAEA,IAAI,YAAqB;AACrB,WAAO,CAAC,CAAE,KAAK,QAAQ,aAAa,WAAW;AAAA,EACnD;AAAA,EAEA,IAAI,UAAW,OAAe;AAC1B,QAAI,OAAO;AACP,WAAK,cAAc,aAAa,KAAK;AAAA,IACzC,OAAO;AACH,WAAK,iBAAiB,WAAW;AAAA,IACrC;AAAA,EACJ;AAAA,
|
|
4
|
+
"sourcesContent": ["// for docuement.querySelector\ndeclare global {\n interface HTMLElementTagNameMap {\n 'substrate-button': SubstrateButton\n }\n}\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 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 const {\n type,\n autofocus,\n tabindex,\n disabled,\n } = this\n\n const classes:string[] = ['substrate-button']\n\n const btnProps = ([\n `class=\"${classes.join(' ')}\"`,\n disabled ? 'disabled' : '',\n autofocus ? 'autofocus' : '',\n type ? `type=\"${this.type}\"` : '',\n tabindex ? `tabindex=\"${tabindex}\"` : 'tabindex=\"0\"',\n 'role=\"button\"'\n ]).filter(Boolean).join(' ')\n\n this.innerHTML = `<button ${btnProps}>${this.innerHTML}</button>`\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/index.min.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/index.ts"],
|
|
4
|
-
"sourcesContent": ["// for docuement.querySelector\ndeclare global {\n interface HTMLElementTagNameMap {\n 'substrate-button': SubstrateButton\n }\n}\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 _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 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 const {\n type,\n autofocus,\n tabindex,\n disabled,\n } = this\n\n const classes:string[] = ['substrate-button']\n\n const btnProps = ([\n `class=\"${classes.join(' ')}\"`,\n disabled ? 'disabled' : '',\n autofocus ? 'autofocus' : '',\n type ? `type=\"${this.type}\"` : '',\n tabindex ? `tabindex=\"${tabindex}\"` : 'tabindex=\"0\"',\n 'role=\"button\"'\n ]).filter(Boolean).join(' ')\n\n this.innerHTML = `<button ${btnProps}>${this.innerHTML}</button>`\n }\n}\n"],
|
|
5
|
-
"mappings": "+EAOO,IAAMA,EAAN,MAAMC,UAAwB,WAAY,CAPjD,MAOiD,CAAAC,EAAA,wBAE7C,OAAO,mBAAqB,CAAC,YAAa,WAAY,UAAU,EAChE,OAAO,IAAM,mBACb,YAEA,aAAe,CACX,MAAM,EACW,KAAK,aAAa,UAAU,IAC5B,MACb,WAAW,IAAM,CAEb,KAAK,SAAW,EACpB,EAAG,CAAC,EAER,KAAK,UAAa,KAAK,aAAa,WAAW,IAAM,KACrD,KAAK,YAAe,KAAK,aAAa,UAAU,IAAM,IAC1D,CAEA,IAAI,MAAuC,CACvC,OAAO,KAAK,QAAQ,IACxB,CAEA,IAAI,UAAoB,CACpB,MAAO,CAAC,CAAE,KAAK,QAAQ,aAAa,UAAU,CAClD,CAEA,IAAI,SAAUC,EAAuB,CAC5BA,GAID,KAAK,QAAQ,aAAa,WAAY,EAAE,EACxC,KAAK,QAAQ,aAAa,gBAAiB,MAAM,IAJjD,KAAK,iBAAiB,UAAU,EAChC,KAAK,QAAQ,aAAa,gBAAiB,OAAO,EAK1D,CAEA,IAAI,MAA8B,CAC9B,OAAO,KAAK,QAAQ,aAAa,MAAM,CAC3C,CAEA,IAAI,UAAmB,CACnB,IAAMC,EAAI,KAAK,QAAQ,aAAa,UAAU,EAC9C,OAAKA,EACE,SAASA,CAAC,EADF,CAEnB,CAEA,IAAI,UAAoB,CACpB,OAAO,KAAK,WAChB,CAEA,IAAI,SAAUC,EAAe,CACrBA,EAAO,KAAK,aAAa,WAAY,EAAE,EACtC,KAAK,gBAAgB,UAAU,CACxC,CAEA,IAAI,KAAMA,EAAc,CACpB,KAAK,cAAc,OAAQA,CAAK,CACpC,CAEA,IAAI,WAAqB,CACrB,MAAO,CAAC,CAAE,KAAK,QAAQ,aAAa,WAAW,CACnD,CAEA,IAAI,UAAWA,EAAe,CACtBA,EACA,KAAK,cAAc,YAAaA,CAAK,EAErC,KAAK,iBAAiB,WAAW,CAEzC,
|
|
4
|
+
"sourcesContent": ["// for docuement.querySelector\ndeclare global {\n interface HTMLElementTagNameMap {\n 'substrate-button': SubstrateButton\n }\n}\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 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 const {\n type,\n autofocus,\n tabindex,\n disabled,\n } = this\n\n const classes:string[] = ['substrate-button']\n\n const btnProps = ([\n `class=\"${classes.join(' ')}\"`,\n disabled ? 'disabled' : '',\n autofocus ? 'autofocus' : '',\n type ? `type=\"${this.type}\"` : '',\n tabindex ? `tabindex=\"${tabindex}\"` : 'tabindex=\"0\"',\n 'role=\"button\"'\n ]).filter(Boolean).join(' ')\n\n this.innerHTML = `<button ${btnProps}>${this.innerHTML}</button>`\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["SubstrateButton", "_SubstrateButton", "__name", "disabledValue", "i", "value", "name", "_oldValue", "newValue", "_old", "_", "oldValue", "handler", "type", "autofocus", "tabindex", "disabled", "btnProps"]
|
|
7
7
|
}
|
package/dist/meta.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"inputs": {
|
|
3
3
|
"src/index.ts": {
|
|
4
|
-
"bytes":
|
|
4
|
+
"bytes": 5484,
|
|
5
5
|
"imports": [],
|
|
6
6
|
"format": "esm"
|
|
7
7
|
}
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
"imports": [],
|
|
12
12
|
"exports": [],
|
|
13
13
|
"inputs": {},
|
|
14
|
-
"bytes":
|
|
14
|
+
"bytes": 8621
|
|
15
15
|
},
|
|
16
16
|
"dist/index.js": {
|
|
17
17
|
"imports": [],
|
|
@@ -21,10 +21,10 @@
|
|
|
21
21
|
"entryPoint": "src/index.ts",
|
|
22
22
|
"inputs": {
|
|
23
23
|
"src/index.ts": {
|
|
24
|
-
"bytesInOutput":
|
|
24
|
+
"bytesInOutput": 4356
|
|
25
25
|
}
|
|
26
26
|
},
|
|
27
|
-
"bytes":
|
|
27
|
+
"bytes": 4549
|
|
28
28
|
}
|
|
29
29
|
}
|
|
30
30
|
}
|