@substrate-system/button 0.0.8 → 0.0.10
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 +50 -13
- package/dist/index.cjs +3 -0
- package/dist/index.cjs.map +2 -2
- package/dist/index.css +4 -4
- 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.css +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
|
@@ -14,6 +14,8 @@ A button web component, with a visual "loading" state.
|
|
|
14
14
|
|
|
15
15
|
[See a live demo](https://substrate-system.github.io/button/)
|
|
16
16
|
|
|
17
|
+
|
|
18
|
+
|
|
17
19
|
<details><summary><h2>Contents</h2></summary>
|
|
18
20
|
|
|
19
21
|
<!-- toc -->
|
|
@@ -24,9 +26,11 @@ A button web component, with a visual "loading" state.
|
|
|
24
26
|
* [ESM](#esm)
|
|
25
27
|
* [Common JS](#common-js)
|
|
26
28
|
- [CSS](#css)
|
|
27
|
-
* [
|
|
28
|
-
* [
|
|
29
|
+
* [Bundler](#bundler)
|
|
30
|
+
* [CSS import](#css-import)
|
|
29
31
|
- [Use](#use)
|
|
32
|
+
* [Example](#example)
|
|
33
|
+
* [Attributes](#attributes)
|
|
30
34
|
* [HTML](#html)
|
|
31
35
|
* [pre-built](#pre-built)
|
|
32
36
|
|
|
@@ -75,7 +79,9 @@ const { SubstrateButton } = require('@substrate-system/button')
|
|
|
75
79
|
|
|
76
80
|
## CSS
|
|
77
81
|
|
|
78
|
-
###
|
|
82
|
+
### Bundler
|
|
83
|
+
|
|
84
|
+
Import CSS with a bundler, like [esbuild](https://esbuild.github.io/content-types/#css).
|
|
79
85
|
|
|
80
86
|
```js
|
|
81
87
|
import '@substrate-system/button/css'
|
|
@@ -86,15 +92,12 @@ Or minified:
|
|
|
86
92
|
import '@substrate-system/button/css/min'
|
|
87
93
|
```
|
|
88
94
|
|
|
89
|
-
###
|
|
95
|
+
### CSS import
|
|
96
|
+
|
|
97
|
+
Or use CSS imports:
|
|
90
98
|
|
|
91
99
|
```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
|
-
}
|
|
100
|
+
@import url("../node_modules/@substrate-system/button/dist/index.min.css");
|
|
98
101
|
```
|
|
99
102
|
|
|
100
103
|
## Use
|
|
@@ -107,8 +110,7 @@ call `.define()`.
|
|
|
107
110
|
> If you change the name of the web component, it will break the CSS.
|
|
108
111
|
|
|
109
112
|
|
|
110
|
-
To use the default, call
|
|
111
|
-
`.define()`:
|
|
113
|
+
To use the default, call `.define()`:
|
|
112
114
|
|
|
113
115
|
```js
|
|
114
116
|
import { SubstrateButton } from '@substrate-system/button'
|
|
@@ -127,10 +129,45 @@ SubstrateButton.tag = 'cool-button'
|
|
|
127
129
|
SubstrateButton.define()
|
|
128
130
|
```
|
|
129
131
|
|
|
132
|
+
### Example
|
|
133
|
+
|
|
134
|
+
See the example in [./example](./example/).
|
|
135
|
+
|
|
136
|
+
### Attributes
|
|
137
|
+
|
|
138
|
+
#### spinning
|
|
139
|
+
|
|
140
|
+
Add an attribute `spinning` to set the loading state.
|
|
141
|
+
|
|
142
|
+
```js
|
|
143
|
+
const el = document.querySelector('substrate-button')
|
|
144
|
+
el?.setAttribute('spinning', '')
|
|
145
|
+
// now it shows a spinning animation
|
|
146
|
+
```
|
|
147
|
+
|
|
148
|
+
Remove the attribute to stop the animation:
|
|
149
|
+
```js
|
|
150
|
+
const el = document.querySelector('substrate-button')
|
|
151
|
+
el?.removeAttribute('spinning')
|
|
152
|
+
```
|
|
153
|
+
|
|
154
|
+
#### JS API
|
|
155
|
+
|
|
156
|
+
Or, if you have a reference to the element, you can set the `spinning` property
|
|
157
|
+
for the same effect:
|
|
158
|
+
|
|
159
|
+
```js
|
|
160
|
+
const el = document.querySelector('substrate-button')
|
|
161
|
+
|
|
162
|
+
el.spinning = true // spin
|
|
163
|
+
|
|
164
|
+
el.spinning = false // stop
|
|
165
|
+
```
|
|
166
|
+
|
|
130
167
|
### HTML
|
|
131
168
|
```html
|
|
132
169
|
<div>
|
|
133
|
-
<substrate-button
|
|
170
|
+
<substrate-button>hello</substrate-button>
|
|
134
171
|
</div>
|
|
135
172
|
```
|
|
136
173
|
|
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.css
CHANGED
|
@@ -71,12 +71,12 @@ substrate-button button {
|
|
|
71
71
|
background-color: var(--substrate-button-background, transparent);
|
|
72
72
|
transition: background-color 0.3s ease, color 0.3s ease;
|
|
73
73
|
appearance: none;
|
|
74
|
-
}
|
|
75
74
|
|
|
76
|
-
|
|
75
|
+
/* &:focus {
|
|
77
76
|
background-color: var(--substrate-button-background-focus, #f7f7f5);
|
|
78
77
|
outline: none;
|
|
79
|
-
}
|
|
78
|
+
} */
|
|
79
|
+
}
|
|
80
80
|
|
|
81
81
|
[disabled]:is(substrate-button button) {
|
|
82
82
|
box-shadow: none;
|
|
@@ -108,4 +108,4 @@ substrate-button[aria-disabled="true"] button {
|
|
|
108
108
|
background-color: transparent
|
|
109
109
|
}
|
|
110
110
|
|
|
111
|
-
/*# sourceMappingURL=data:application/json;base64,
|
|
111
|
+
/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNyYy9pbmRleC5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7SUFDSTtRQUNJLHVCQUF1QjtJQUMzQjs7SUFFQTtRQUNJLHlCQUF5QjtJQUM3QjtBQUNKOztBQUVBO0lBQ0ksSUFBSSx5QkFBeUIsQ0FBQztBQUNsQzs7QUFFQTtJQUNJO1FBQ0ksbUJBQW1CO0lBQ3ZCOztJQUVBO1FBQ0ksc0JBQXNCO0lBQzFCOztJQUVBO1FBQ0ksbUJBQW1CO0lBQ3ZCO0FBQ0o7O0FBRUE7SUFDSSxxQkFBcUI7SUFDckIsaUJBQWlCO0lBQ2pCLGVBQWU7QUErRW5COztBQTdFSTtRQUNJLG9CQUFvQjtJQTBCeEI7O0FBeEJJO1lBQ0ksa0JBQWtCO1lBQ2xCLHlCQUF5QjtZQUN6QixvQkFBb0I7UUFvQnhCOztBQWxCSTtnQkFDSSxrQkFBa0I7WUFDdEI7O0FBRUE7Z0JBQ0ksV0FBVztnQkFDWCx1QkFBdUI7Z0JBQ3ZCLHNCQUFzQjtnQkFDdEIsa0JBQWtCO2dCQUNsQixXQUFXO2dCQUNYLFlBQVk7Z0JBQ1osUUFBUTtnQkFDUixZQUFZO2dCQUNaLGtCQUFrQjtnQkFDbEIsMkJBQTJCO2dCQUMzQixtQ0FBbUM7Z0JBQ25DLHVDQUF1QztZQUMzQzs7QUFJUjtRQUNJLHVCQUF1QjtRQUN2QixzRUFBc0U7UUFDdEUsV0FBVztRQUNYLG9HQUFvRztRQUNwRyxrQkFBa0I7UUFDbEIsa0JBQWtCO1FBQ2xCLGlFQUFpRTtRQUNqRSx1REFBdUQ7UUFDdkQsZ0JBQWdCOztRQUVoQjs7O1dBR0c7SUF1QlA7O0FBckJJO1lBQ0ksZ0JBQWdCO1FBQ3BCOztBQUVBO1lBQ0ksdUNBQXVDO1lBQ3ZDLHNFQUFzRTtRQUMxRTs7QUFHSTtnQkFDSSx1QkFBdUI7Z0JBQ3ZCLHlDQUF5QztnQkFDekMsZ0NBQWdDO1lBQ3BDOztBQUVBO2dCQUNJLDZFQUE2RTtnQkFDN0UsZUFBZTtZQUNuQjs7QUFJUjtRQUNJLGlCQUFpQjtRQUNqQiw2QkFBNkI7SUFNakM7O0FBSkk7WUFDSSxpQkFBaUI7WUFDakI7UUFDSiIsImZpbGUiOiJzcmMvaW5kZXguY3NzIiwic291cmNlc0NvbnRlbnQiOlsiQGtleWZyYW1lcyBzcGluIHtcbiAgICBmcm9tIHtcbiAgICAgICAgdHJhbnNmb3JtOiByb3RhdGUoMGRlZyk7XG4gICAgfVxuXG4gICAgdG8ge1xuICAgICAgICB0cmFuc2Zvcm06IHJvdGF0ZSgzNjBkZWcpO1xuICAgIH1cbn1cblxuQGtleWZyYW1lcyBzcGlubmVyIHtcbiAgICB0byB7dHJhbnNmb3JtOiByb3RhdGUoMzYwZGVnKTt9XG59XG5cbkBrZXlmcmFtZXMgc3Vic3RyYXRlLWJ1dHRvbi1hY3RpdmF0ZSB7XG4gICAgMCUge1xuICAgICAgICB0cmFuc2Zvcm06IHNjYWxlKDEpO1xuICAgIH1cblxuICAgIDUwJSB7XG4gICAgICAgIHRyYW5zZm9ybTogc2NhbGUoMC45NSk7XG4gICAgfVxuXG4gICAgMTAwJSB7XG4gICAgICAgIHRyYW5zZm9ybTogc2NhbGUoMSk7XG4gICAgfVxufVxuXG5zdWJzdHJhdGUtYnV0dG9uIHtcbiAgICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG4gICAgdXNlci1zZWxlY3Q6IG5vbmU7XG4gICAgbWluLXdpZHRoOiA4cmVtO1xuXG4gICAgJi5zdWJzdHJhdGUtbG9hZGluZyB7XG4gICAgICAgIHBvaW50ZXItZXZlbnRzOiBub25lO1xuXG4gICAgICAgICYgYnV0dG9uIHtcbiAgICAgICAgICAgIGNvbG9yOiB0cmFuc3BhcmVudDtcbiAgICAgICAgICAgIHRyYW5zaXRpb246IGFsbCAwLjNzIGVhc2U7XG4gICAgICAgICAgICBwb2ludGVyLWV2ZW50czogbm9uZTtcblxuICAgICAgICAgICAgJjpob3ZlciB7XG4gICAgICAgICAgICAgICAgY29sb3I6IHRyYW5zcGFyZW50O1xuICAgICAgICAgICAgfVxuXG4gICAgICAgICAgICAmOjphZnRlciB7XG4gICAgICAgICAgICAgICAgY29udGVudDogXCJcIjtcbiAgICAgICAgICAgICAgICBiYWNrZ3JvdW5kOiB0cmFuc3BhcmVudDtcbiAgICAgICAgICAgICAgICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuICAgICAgICAgICAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICAgICAgICAgICAgICB3aWR0aDogMTZweDtcbiAgICAgICAgICAgICAgICBoZWlnaHQ6IDE2cHg7XG4gICAgICAgICAgICAgICAgaW5zZXQ6IDA7XG4gICAgICAgICAgICAgICAgbWFyZ2luOiBhdXRvO1xuICAgICAgICAgICAgICAgIGJvcmRlci1yYWRpdXM6IDUwJTtcbiAgICAgICAgICAgICAgICBib3JkZXItdG9wOiAycHggc29saWQgYmxhY2s7XG4gICAgICAgICAgICAgICAgYm9yZGVyLXJpZ2h0OiAycHggc29saWQgdHJhbnNwYXJlbnQ7XG4gICAgICAgICAgICAgICAgYW5pbWF0aW9uOiBzcGlubmVyIDAuNnMgbGluZWFyIGluZmluaXRlO1xuICAgICAgICAgICAgfVxuICAgICAgICB9XG4gICAgfVxuXG4gICAgJiBidXR0b24ge1xuICAgICAgICBib3JkZXI6IDFweCBzb2xpZCBibGFjaztcbiAgICAgICAgY29sb3I6IHZhcigtLXN1YnN0cmF0ZS1idXR0b24tdGV4dCwgdmFyKC0tc3Vic3RyYXRlLXByaW1hcnksICMzNjM5M2QpKTtcbiAgICAgICAgd2lkdGg6IDEwMCU7XG4gICAgICAgIGZvbnQtZmFtaWx5OiB2YXIoLS1zdWJzdHJhdGUtZm9udCwgJ0dpbGwgU2FucycsICdHaWxsIFNhbnMgTVQnLCBDYWxpYnJpLCAnVHJlYnVjaGV0IE1TJywgc2Fucy1zZXJpZik7XG4gICAgICAgIHBhZGRpbmc6IDAuNWVtIDFlbTtcbiAgICAgICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1zdWJzdHJhdGUtYnV0dG9uLWJhY2tncm91bmQsIHRyYW5zcGFyZW50KTtcbiAgICAgICAgdHJhbnNpdGlvbjogYmFja2dyb3VuZC1jb2xvciAwLjNzIGVhc2UsIGNvbG9yIDAuM3MgZWFzZTtcbiAgICAgICAgYXBwZWFyYW5jZTogbm9uZTtcblxuICAgICAgICAvKiAmOmZvY3VzIHtcbiAgICAgICAgICAgIGJhY2tncm91bmQtY29sb3I6IHZhcigtLXN1YnN0cmF0ZS1idXR0b24tYmFja2dyb3VuZC1mb2N1cywgI2Y3ZjdmNSk7XG4gICAgICAgICAgICBvdXRsaW5lOiBub25lO1xuICAgICAgICB9ICovXG5cbiAgICAgICAgJltkaXNhYmxlZF0ge1xuICAgICAgICAgICAgYm94LXNoYWRvdzogbm9uZTtcbiAgICAgICAgfVxuXG4gICAgICAgICZbZGlzYWJsZWRdLCAmOmFjdGl2ZSB7XG4gICAgICAgICAgICBjb2xvcjogdmFyKC0tc3Vic3RyYXRlLW1lZGl1bSwgIzk5OWRhMCk7XG4gICAgICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1zdWJzdHJhdGUtYnV0dG9uLWJhY2tncm91bmQtZGlzYWJsZWQsICNmN2Y3ZjUpO1xuICAgICAgICB9XG5cbiAgICAgICAgJjpub3QoW2Rpc2FibGVkXSkge1xuICAgICAgICAgICAgJjphY3RpdmUge1xuICAgICAgICAgICAgICAgIGFuaW1hdGlvbi1kdXJhdGlvbjogLjJzO1xuICAgICAgICAgICAgICAgIGFuaW1hdGlvbi1uYW1lOiBzdWJzdHJhdGUtYnV0dG9uLWFjdGl2YXRlO1xuICAgICAgICAgICAgICAgIHRyYW5zaXRpb24tdGltaW5nLWZ1bmN0aW9uOiBlYXNlO1xuICAgICAgICAgICAgfVxuXG4gICAgICAgICAgICAmOmhvdmVyIHtcbiAgICAgICAgICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1zdWJzdHJhdGUtYnV0dG9uLWJhY2tncm91bmQtaG92ZXIsICNlNmU2ZTYpIWltcG9ydGFudDtcbiAgICAgICAgICAgICAgICBjdXJzb3I6IHBvaW50ZXI7XG4gICAgICAgICAgICB9XG4gICAgICAgIH1cbiAgICB9XG5cbiAgICAmW2FyaWEtZGlzYWJsZWQ9XCJ0cnVlXCJdIHtcbiAgICAgICAgdXNlci1zZWxlY3Q6IG5vbmU7XG4gICAgICAgIGJhY2tncm91bmQtY29sb3I6IHRyYW5zcGFyZW50O1xuXG4gICAgICAgICYgYnV0dG9uIHtcbiAgICAgICAgICAgIHVzZXItc2VsZWN0OiBub25lO1xuICAgICAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogdHJhbnNwYXJlbnRcbiAgICAgICAgfVxuICAgIH1cbn1cbiAgIl19 */
|
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.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes spinner{to{transform:rotate(1turn)}}@keyframes substrate-button-activate{0%{transform:scale(1)}50%{transform:scale(.95)}to{transform:scale(1)}}substrate-button{display:inline-block;min-width:8rem;user-select:none}substrate-button.substrate-loading{pointer-events:none}substrate-button.substrate-loading button{color:transparent;pointer-events:none;transition:all .3s ease}:is(substrate-button.substrate-loading button):hover{color:transparent}:is(substrate-button.substrate-loading button):after{animation:spinner .6s linear infinite;background:transparent;border-radius:50%;border-right:2px solid transparent;border-top:2px solid #000;box-sizing:border-box;content:"";height:16px;inset:0;margin:auto;position:absolute;width:16px}substrate-button button{appearance:none;background-color:var(--substrate-button-background,transparent);border:1px solid #000;color:var(--substrate-button-text,var(--substrate-primary,#36393d));font-family:var(--substrate-font,"Gill Sans","Gill Sans MT",Calibri,"Trebuchet MS",sans-serif);padding:.5em 1em;position:relative;transition:background-color .3s ease,color .3s ease;width:100%}
|
|
2
|
-
/*# sourceMappingURL=data:application/json;base64,
|
|
1
|
+
@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes spinner{to{transform:rotate(1turn)}}@keyframes substrate-button-activate{0%{transform:scale(1)}50%{transform:scale(.95)}to{transform:scale(1)}}substrate-button{display:inline-block;min-width:8rem;user-select:none}substrate-button.substrate-loading{pointer-events:none}substrate-button.substrate-loading button{color:transparent;pointer-events:none;transition:all .3s ease}:is(substrate-button.substrate-loading button):hover{color:transparent}:is(substrate-button.substrate-loading button):after{animation:spinner .6s linear infinite;background:transparent;border-radius:50%;border-right:2px solid transparent;border-top:2px solid #000;box-sizing:border-box;content:"";height:16px;inset:0;margin:auto;position:absolute;width:16px}substrate-button button{appearance:none;background-color:var(--substrate-button-background,transparent);border:1px solid #000;color:var(--substrate-button-text,var(--substrate-primary,#36393d));font-family:var(--substrate-font,"Gill Sans","Gill Sans MT",Calibri,"Trebuchet MS",sans-serif);padding:.5em 1em;position:relative;transition:background-color .3s ease,color .3s ease;width:100%}[disabled]:is(substrate-button button){box-shadow:none}:is(substrate-button button):active,[disabled]:is(substrate-button button){background-color:var(--substrate-button-background-disabled,#f7f7f5);color:var(--substrate-medium,#999da0)}:is(substrate-button button):not([disabled]):active{animation-duration:.2s;animation-name:substrate-button-activate;transition-timing-function:ease}:is(substrate-button button):not([disabled]):hover{background-color:var(--substrate-button-background-hover,#e6e6e6)!important;cursor:pointer}substrate-button[aria-disabled=true],substrate-button[aria-disabled=true] button{background-color:transparent;user-select:none}
|
|
2
|
+
/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNyYy9pbmRleC5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsZ0JBQ0ksR0FDSSxzQkFDSixDQUVBLEdBQ0ksdUJBQ0osQ0FDSixDQUVBLG1CQUNJLEdBQUksdUJBQTBCLENBQ2xDLENBRUEscUNBQ0ksR0FDSSxrQkFDSixDQUVBLElBQ0ksb0JBQ0osQ0FFQSxHQUNJLGtCQUNKLENBQ0osQ0FFQSxpQkFDSSxvQkFBcUIsQ0FFckIsY0FBZSxDQURmLGdCQWdGSixDQTdFSSxtQ0FDSSxtQkEwQkosQ0F4QkksMENBQ0ksaUJBQWtCLENBRWxCLG1CQUFvQixDQURwQix1QkFxQkosQ0FsQkkscURBQ0ksaUJBQ0osQ0FFQSxxREFZSSxxQ0FBdUMsQ0FWdkMsc0JBQXVCLENBT3ZCLGlCQUFrQixDQUVsQixrQ0FBbUMsQ0FEbkMseUJBQTJCLENBUDNCLHFCQUFzQixDQUZ0QixVQUFXLENBS1gsV0FBWSxDQUNaLE9BQVEsQ0FDUixXQUFZLENBSlosaUJBQWtCLENBQ2xCLFVBUUosQ0FJUix3QkFTSSxlQUFnQixDQUZoQiwrREFBaUUsQ0FOakUscUJBQXVCLENBQ3ZCLG1FQUFzRSxDQUV0RSw4RkFBb0csQ0FDcEcsZ0JBQWtCLENBQ2xCLGlCQUFrQixDQUVsQixtREFBdUQsQ0FMdkQsVUFrQ0osQ0FyQkksdUNBQ0ksZUFDSixDQUVBLDJFQUVJLG9FQUFzRSxDQUR0RSxxQ0FFSixDQUdJLG9EQUNJLHNCQUF1QixDQUN2Qix3Q0FBeUMsQ0FDekMsK0JBQ0osQ0FFQSxtREFDSSwyRUFBNkUsQ0FDN0UsY0FDSixDQVFKLGlGQUVJLDRCQUE0QixDQUQ1QixnQkFFSiIsImZpbGUiOiJzcmMvaW5kZXguY3NzIiwic291cmNlc0NvbnRlbnQiOlsiQGtleWZyYW1lcyBzcGluIHtcbiAgICBmcm9tIHtcbiAgICAgICAgdHJhbnNmb3JtOiByb3RhdGUoMGRlZyk7XG4gICAgfVxuXG4gICAgdG8ge1xuICAgICAgICB0cmFuc2Zvcm06IHJvdGF0ZSgzNjBkZWcpO1xuICAgIH1cbn1cblxuQGtleWZyYW1lcyBzcGlubmVyIHtcbiAgICB0byB7dHJhbnNmb3JtOiByb3RhdGUoMzYwZGVnKTt9XG59XG5cbkBrZXlmcmFtZXMgc3Vic3RyYXRlLWJ1dHRvbi1hY3RpdmF0ZSB7XG4gICAgMCUge1xuICAgICAgICB0cmFuc2Zvcm06IHNjYWxlKDEpO1xuICAgIH1cblxuICAgIDUwJSB7XG4gICAgICAgIHRyYW5zZm9ybTogc2NhbGUoMC45NSk7XG4gICAgfVxuXG4gICAgMTAwJSB7XG4gICAgICAgIHRyYW5zZm9ybTogc2NhbGUoMSk7XG4gICAgfVxufVxuXG5zdWJzdHJhdGUtYnV0dG9uIHtcbiAgICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG4gICAgdXNlci1zZWxlY3Q6IG5vbmU7XG4gICAgbWluLXdpZHRoOiA4cmVtO1xuXG4gICAgJi5zdWJzdHJhdGUtbG9hZGluZyB7XG4gICAgICAgIHBvaW50ZXItZXZlbnRzOiBub25lO1xuXG4gICAgICAgICYgYnV0dG9uIHtcbiAgICAgICAgICAgIGNvbG9yOiB0cmFuc3BhcmVudDtcbiAgICAgICAgICAgIHRyYW5zaXRpb246IGFsbCAwLjNzIGVhc2U7XG4gICAgICAgICAgICBwb2ludGVyLWV2ZW50czogbm9uZTtcblxuICAgICAgICAgICAgJjpob3ZlciB7XG4gICAgICAgICAgICAgICAgY29sb3I6IHRyYW5zcGFyZW50O1xuICAgICAgICAgICAgfVxuXG4gICAgICAgICAgICAmOjphZnRlciB7XG4gICAgICAgICAgICAgICAgY29udGVudDogXCJcIjtcbiAgICAgICAgICAgICAgICBiYWNrZ3JvdW5kOiB0cmFuc3BhcmVudDtcbiAgICAgICAgICAgICAgICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuICAgICAgICAgICAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICAgICAgICAgICAgICB3aWR0aDogMTZweDtcbiAgICAgICAgICAgICAgICBoZWlnaHQ6IDE2cHg7XG4gICAgICAgICAgICAgICAgaW5zZXQ6IDA7XG4gICAgICAgICAgICAgICAgbWFyZ2luOiBhdXRvO1xuICAgICAgICAgICAgICAgIGJvcmRlci1yYWRpdXM6IDUwJTtcbiAgICAgICAgICAgICAgICBib3JkZXItdG9wOiAycHggc29saWQgYmxhY2s7XG4gICAgICAgICAgICAgICAgYm9yZGVyLXJpZ2h0OiAycHggc29saWQgdHJhbnNwYXJlbnQ7XG4gICAgICAgICAgICAgICAgYW5pbWF0aW9uOiBzcGlubmVyIDAuNnMgbGluZWFyIGluZmluaXRlO1xuICAgICAgICAgICAgfVxuICAgICAgICB9XG4gICAgfVxuXG4gICAgJiBidXR0b24ge1xuICAgICAgICBib3JkZXI6IDFweCBzb2xpZCBibGFjaztcbiAgICAgICAgY29sb3I6IHZhcigtLXN1YnN0cmF0ZS1idXR0b24tdGV4dCwgdmFyKC0tc3Vic3RyYXRlLXByaW1hcnksICMzNjM5M2QpKTtcbiAgICAgICAgd2lkdGg6IDEwMCU7XG4gICAgICAgIGZvbnQtZmFtaWx5OiB2YXIoLS1zdWJzdHJhdGUtZm9udCwgJ0dpbGwgU2FucycsICdHaWxsIFNhbnMgTVQnLCBDYWxpYnJpLCAnVHJlYnVjaGV0IE1TJywgc2Fucy1zZXJpZik7XG4gICAgICAgIHBhZGRpbmc6IDAuNWVtIDFlbTtcbiAgICAgICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1zdWJzdHJhdGUtYnV0dG9uLWJhY2tncm91bmQsIHRyYW5zcGFyZW50KTtcbiAgICAgICAgdHJhbnNpdGlvbjogYmFja2dyb3VuZC1jb2xvciAwLjNzIGVhc2UsIGNvbG9yIDAuM3MgZWFzZTtcbiAgICAgICAgYXBwZWFyYW5jZTogbm9uZTtcblxuICAgICAgICAvKiAmOmZvY3VzIHtcbiAgICAgICAgICAgIGJhY2tncm91bmQtY29sb3I6IHZhcigtLXN1YnN0cmF0ZS1idXR0b24tYmFja2dyb3VuZC1mb2N1cywgI2Y3ZjdmNSk7XG4gICAgICAgICAgICBvdXRsaW5lOiBub25lO1xuICAgICAgICB9ICovXG5cbiAgICAgICAgJltkaXNhYmxlZF0ge1xuICAgICAgICAgICAgYm94LXNoYWRvdzogbm9uZTtcbiAgICAgICAgfVxuXG4gICAgICAgICZbZGlzYWJsZWRdLCAmOmFjdGl2ZSB7XG4gICAgICAgICAgICBjb2xvcjogdmFyKC0tc3Vic3RyYXRlLW1lZGl1bSwgIzk5OWRhMCk7XG4gICAgICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1zdWJzdHJhdGUtYnV0dG9uLWJhY2tncm91bmQtZGlzYWJsZWQsICNmN2Y3ZjUpO1xuICAgICAgICB9XG5cbiAgICAgICAgJjpub3QoW2Rpc2FibGVkXSkge1xuICAgICAgICAgICAgJjphY3RpdmUge1xuICAgICAgICAgICAgICAgIGFuaW1hdGlvbi1kdXJhdGlvbjogLjJzO1xuICAgICAgICAgICAgICAgIGFuaW1hdGlvbi1uYW1lOiBzdWJzdHJhdGUtYnV0dG9uLWFjdGl2YXRlO1xuICAgICAgICAgICAgICAgIHRyYW5zaXRpb24tdGltaW5nLWZ1bmN0aW9uOiBlYXNlO1xuICAgICAgICAgICAgfVxuXG4gICAgICAgICAgICAmOmhvdmVyIHtcbiAgICAgICAgICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1zdWJzdHJhdGUtYnV0dG9uLWJhY2tncm91bmQtaG92ZXIsICNlNmU2ZTYpIWltcG9ydGFudDtcbiAgICAgICAgICAgICAgICBjdXJzb3I6IHBvaW50ZXI7XG4gICAgICAgICAgICB9XG4gICAgICAgIH1cbiAgICB9XG5cbiAgICAmW2FyaWEtZGlzYWJsZWQ9XCJ0cnVlXCJdIHtcbiAgICAgICAgdXNlci1zZWxlY3Q6IG5vbmU7XG4gICAgICAgIGJhY2tncm91bmQtY29sb3I6IHRyYW5zcGFyZW50O1xuXG4gICAgICAgICYgYnV0dG9uIHtcbiAgICAgICAgICAgIHVzZXItc2VsZWN0OiBub25lO1xuICAgICAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogdHJhbnNwYXJlbnRcbiAgICAgICAgfVxuICAgIH1cbn1cbiAgIl19 */
|
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
|
}
|