@substrate-system/button 0.0.5 → 0.0.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +19 -15
- package/dist/index.cjs.map +2 -2
- package/dist/index.css +10 -10
- package/dist/index.d.ts +1 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +19 -15
- package/dist/index.js.map +2 -2
- package/dist/index.min.css +2 -2
- package/dist/index.min.js +1 -3
- package/dist/index.min.js.map +3 -3
- package/dist/meta.json +4 -4
- package/package.json +22 -4
package/dist/index.cjs
CHANGED
|
@@ -33,7 +33,11 @@ class SubstrateButton extends HTMLElement {
|
|
|
33
33
|
constructor() {
|
|
34
34
|
super();
|
|
35
35
|
const disabled = this.getAttribute("disabled");
|
|
36
|
-
|
|
36
|
+
if (disabled !== null) {
|
|
37
|
+
setTimeout(() => {
|
|
38
|
+
this.disabled = true;
|
|
39
|
+
}, 0);
|
|
40
|
+
}
|
|
37
41
|
this.autofocus = this.getAttribute("autofocus") !== null;
|
|
38
42
|
this._isSpinning = this.getAttribute("spinning") !== null;
|
|
39
43
|
}
|
|
@@ -43,6 +47,15 @@ class SubstrateButton extends HTMLElement {
|
|
|
43
47
|
get disabled() {
|
|
44
48
|
return !!this.button?.hasAttribute("disabled");
|
|
45
49
|
}
|
|
50
|
+
set disabled(disabledValue) {
|
|
51
|
+
if (!disabledValue) {
|
|
52
|
+
this._removeAttribute("disabled");
|
|
53
|
+
this.button?.setAttribute("aria-disabled", "false");
|
|
54
|
+
} else {
|
|
55
|
+
this.button?.setAttribute("disabled", "");
|
|
56
|
+
this.button?.setAttribute("aria-disabled", "true");
|
|
57
|
+
}
|
|
58
|
+
}
|
|
46
59
|
get type() {
|
|
47
60
|
return this.button?.getAttribute("type");
|
|
48
61
|
}
|
|
@@ -61,15 +74,6 @@ class SubstrateButton extends HTMLElement {
|
|
|
61
74
|
set type(value) {
|
|
62
75
|
this._setAttribute("type", value);
|
|
63
76
|
}
|
|
64
|
-
set disabled(disabledValue) {
|
|
65
|
-
if (!disabledValue) {
|
|
66
|
-
this._removeAttribute("disabled");
|
|
67
|
-
this.button?.setAttribute("aria-disabled", "false");
|
|
68
|
-
} else {
|
|
69
|
-
this.button?.setAttribute("disabled", "");
|
|
70
|
-
this.button?.setAttribute("aria-disabled", "true");
|
|
71
|
-
}
|
|
72
|
-
}
|
|
73
77
|
get autofocus() {
|
|
74
78
|
return !!this.button?.hasAttribute("autofocus");
|
|
75
79
|
}
|
|
@@ -115,7 +119,9 @@ class SubstrateButton extends HTMLElement {
|
|
|
115
119
|
this._setAttribute("autofocus", newValue);
|
|
116
120
|
}
|
|
117
121
|
handleChange_disabled(_old, newValue) {
|
|
118
|
-
this.
|
|
122
|
+
this.disabled = newValue !== null;
|
|
123
|
+
if (newValue === null) this.button?.removeAttribute("disabled");
|
|
124
|
+
else this.button?.setAttribute("disabled", "" + newValue);
|
|
119
125
|
}
|
|
120
126
|
handleChange_spinning(_, newValue) {
|
|
121
127
|
if (newValue !== null) {
|
|
@@ -161,12 +167,10 @@ class SubstrateButton extends HTMLElement {
|
|
|
161
167
|
disabled ? "disabled" : "",
|
|
162
168
|
autofocus ? "autofocus" : "",
|
|
163
169
|
type ? `type="${this.type}"` : "",
|
|
164
|
-
tabindex ? `tabindex
|
|
170
|
+
tabindex ? `tabindex="${tabindex}"` : 'tabindex="0"',
|
|
165
171
|
'role="button"'
|
|
166
172
|
].filter(Boolean).join(" ");
|
|
167
|
-
this.innerHTML = `<button ${btnProps}
|
|
168
|
-
${this.innerHTML}
|
|
169
|
-
</button>`;
|
|
173
|
+
this.innerHTML = `<button ${btnProps}>${this.innerHTML}</button>`;
|
|
170
174
|
}
|
|
171
175
|
}
|
|
172
176
|
//# sourceMappingURL=index.cjs.map
|
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 this.disabled =
|
|
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,
|
|
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": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/index.css
CHANGED
|
@@ -84,12 +84,6 @@ substrate-button button {
|
|
|
84
84
|
background-color: var(--substrate-button-background-disabled, #f7f7f5);
|
|
85
85
|
}
|
|
86
86
|
|
|
87
|
-
:is(substrate-button button):active {
|
|
88
|
-
animation-duration: .2s;
|
|
89
|
-
animation-name: substrate-button-activate;
|
|
90
|
-
transition-timing-function: ease;
|
|
91
|
-
}
|
|
92
|
-
|
|
93
87
|
[type="icon"]:is(substrate-button button) button {
|
|
94
88
|
background: none;
|
|
95
89
|
box-shadow: none;
|
|
@@ -102,10 +96,16 @@ substrate-button button {
|
|
|
102
96
|
transform: translate(-50%, -50%);
|
|
103
97
|
}
|
|
104
98
|
|
|
99
|
+
:is(substrate-button button):not([disabled]):active {
|
|
100
|
+
animation-duration: .2s;
|
|
101
|
+
animation-name: substrate-button-activate;
|
|
102
|
+
transition-timing-function: ease;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
105
|
:is(substrate-button button):not([disabled]):hover {
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
106
|
+
background-color: var(--substrate-button-background-hover, #e6e6e6)!important;
|
|
107
|
+
cursor: pointer;
|
|
108
|
+
}
|
|
109
109
|
|
|
110
110
|
substrate-button[aria-disabled="true"] {
|
|
111
111
|
user-select: none;
|
|
@@ -117,4 +117,4 @@ substrate-button[aria-disabled="true"] button {
|
|
|
117
117
|
background-color: transparent
|
|
118
118
|
}
|
|
119
119
|
|
|
120
|
-
/*# sourceMappingURL=data:application/json;base64,
|
|
120
|
+
/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNyYy9pbmRleC5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7SUFDSTtRQUNJLHVCQUF1QjtJQUMzQjs7SUFFQTtRQUNJLHlCQUF5QjtJQUM3QjtBQUNKOztBQUVBO0lBQ0ksSUFBSSx5QkFBeUIsQ0FBQztBQUNsQzs7QUFFQTtJQUNJO1FBQ0ksbUJBQW1CO0lBQ3ZCOztJQUVBO1FBQ0ksc0JBQXNCO0lBQzFCOztJQUVBO1FBQ0ksbUJBQW1CO0lBQ3ZCO0FBQ0o7O0FBRUE7SUFDSSxxQkFBcUI7SUFDckIsaUJBQWlCO0lBQ2pCLGVBQWU7QUEwRm5COztBQXhGSTtRQUNJLG9CQUFvQjtJQTBCeEI7O0FBeEJJO1lBQ0ksa0JBQWtCO1lBQ2xCLHlCQUF5QjtZQUN6QixvQkFBb0I7UUFvQnhCOztBQWxCSTtnQkFDSSxrQkFBa0I7WUFDdEI7O0FBRUE7Z0JBQ0ksV0FBVztnQkFDWCx1QkFBdUI7Z0JBQ3ZCLHNCQUFzQjtnQkFDdEIsa0JBQWtCO2dCQUNsQixXQUFXO2dCQUNYLFlBQVk7Z0JBQ1osUUFBUTtnQkFDUixZQUFZO2dCQUNaLGtCQUFrQjtnQkFDbEIsMkJBQTJCO2dCQUMzQixtQ0FBbUM7Z0JBQ25DLHVDQUF1QztZQUMzQzs7QUFJUjtRQUNJLHVCQUF1QjtRQUN2QixzRUFBc0U7UUFDdEUsV0FBVztRQUNYLG9HQUFvRztRQUNwRyxrQkFBa0I7UUFDbEIsa0JBQWtCO1FBQ2xCLGlFQUFpRTtRQUNqRSx1REFBdUQ7UUFDdkQsb0RBQW9EO1FBQ3BELGdCQUFnQjtJQXNDcEI7O0FBcENJO1lBQ0ksbUVBQW1FO1lBQ25FLGFBQWE7UUFDakI7O0FBRUE7WUFDSSx1Q0FBdUM7WUFDdkMsc0VBQXNFO1FBQzFFOztBQUdJO2dCQUNJLGdCQUFnQjtnQkFDaEIsZ0JBQWdCO1lBQ3BCOztBQUVBO2dCQUNJLGtCQUFrQjtnQkFDbEIsUUFBUTtnQkFDUixTQUFTO2dCQUNULGdDQUFnQztZQUNwQzs7QUFJQTtnQkFDSSx1QkFBdUI7Z0JBQ3ZCLHlDQUF5QztnQkFDekMsZ0NBQWdDO1lBQ3BDOztBQUVBO2dCQUNJLDZFQUE2RTtnQkFDN0UsZUFBZTtZQUNuQjs7QUFJUjtRQUNJLGlCQUFpQjtRQUNqQiw2QkFBNkI7SUFNakM7O0FBSkk7WUFDSSxpQkFBaUI7WUFDakI7UUFDSiIsImZpbGUiOiJzcmMvaW5kZXguY3NzIiwic291cmNlc0NvbnRlbnQiOlsiQGtleWZyYW1lcyBzcGluIHtcbiAgICBmcm9tIHtcbiAgICAgICAgdHJhbnNmb3JtOiByb3RhdGUoMGRlZyk7XG4gICAgfVxuXG4gICAgdG8ge1xuICAgICAgICB0cmFuc2Zvcm06IHJvdGF0ZSgzNjBkZWcpO1xuICAgIH1cbn1cblxuQGtleWZyYW1lcyBzcGlubmVyIHtcbiAgICB0byB7dHJhbnNmb3JtOiByb3RhdGUoMzYwZGVnKTt9XG59XG5cbkBrZXlmcmFtZXMgc3Vic3RyYXRlLWJ1dHRvbi1hY3RpdmF0ZSB7XG4gICAgMCUge1xuICAgICAgICB0cmFuc2Zvcm06IHNjYWxlKDEpO1xuICAgIH1cblxuICAgIDUwJSB7XG4gICAgICAgIHRyYW5zZm9ybTogc2NhbGUoMC45NSk7XG4gICAgfVxuXG4gICAgMTAwJSB7XG4gICAgICAgIHRyYW5zZm9ybTogc2NhbGUoMSk7XG4gICAgfVxufVxuXG5zdWJzdHJhdGUtYnV0dG9uIHtcbiAgICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG4gICAgdXNlci1zZWxlY3Q6IG5vbmU7XG4gICAgbWluLXdpZHRoOiA4cmVtO1xuXG4gICAgJi5zdWJzdHJhdGUtbG9hZGluZyB7XG4gICAgICAgIHBvaW50ZXItZXZlbnRzOiBub25lO1xuXG4gICAgICAgICYgYnV0dG9uIHtcbiAgICAgICAgICAgIGNvbG9yOiB0cmFuc3BhcmVudDtcbiAgICAgICAgICAgIHRyYW5zaXRpb246IGFsbCAwLjNzIGVhc2U7XG4gICAgICAgICAgICBwb2ludGVyLWV2ZW50czogbm9uZTtcblxuICAgICAgICAgICAgJjpob3ZlciB7XG4gICAgICAgICAgICAgICAgY29sb3I6IHRyYW5zcGFyZW50O1xuICAgICAgICAgICAgfVxuXG4gICAgICAgICAgICAmOjphZnRlciB7XG4gICAgICAgICAgICAgICAgY29udGVudDogXCJcIjtcbiAgICAgICAgICAgICAgICBiYWNrZ3JvdW5kOiB0cmFuc3BhcmVudDtcbiAgICAgICAgICAgICAgICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuICAgICAgICAgICAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICAgICAgICAgICAgICB3aWR0aDogMTZweDtcbiAgICAgICAgICAgICAgICBoZWlnaHQ6IDE2cHg7XG4gICAgICAgICAgICAgICAgaW5zZXQ6IDA7XG4gICAgICAgICAgICAgICAgbWFyZ2luOiBhdXRvO1xuICAgICAgICAgICAgICAgIGJvcmRlci1yYWRpdXM6IDUwJTtcbiAgICAgICAgICAgICAgICBib3JkZXItdG9wOiAycHggc29saWQgYmxhY2s7XG4gICAgICAgICAgICAgICAgYm9yZGVyLXJpZ2h0OiAycHggc29saWQgdHJhbnNwYXJlbnQ7XG4gICAgICAgICAgICAgICAgYW5pbWF0aW9uOiBzcGlubmVyIDAuNnMgbGluZWFyIGluZmluaXRlO1xuICAgICAgICAgICAgfVxuICAgICAgICB9XG4gICAgfVxuXG4gICAgJiBidXR0b24ge1xuICAgICAgICBib3JkZXI6IDFweCBzb2xpZCBibGFjaztcbiAgICAgICAgY29sb3I6IHZhcigtLXN1YnN0cmF0ZS1idXR0b24tdGV4dCwgdmFyKC0tc3Vic3RyYXRlLXByaW1hcnksICMzNjM5M2QpKTtcbiAgICAgICAgd2lkdGg6IDEwMCU7XG4gICAgICAgIGZvbnQtZmFtaWx5OiB2YXIoLS1zdWJzdHJhdGUtZm9udCwgJ0dpbGwgU2FucycsICdHaWxsIFNhbnMgTVQnLCBDYWxpYnJpLCAnVHJlYnVjaGV0IE1TJywgc2Fucy1zZXJpZik7XG4gICAgICAgIHBhZGRpbmc6IDAuNWVtIDFlbTtcbiAgICAgICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1zdWJzdHJhdGUtYnV0dG9uLWJhY2tncm91bmQsIHRyYW5zcGFyZW50KTtcbiAgICAgICAgdHJhbnNpdGlvbjogYmFja2dyb3VuZC1jb2xvciAwLjNzIGVhc2UsIGNvbG9yIDAuM3MgZWFzZTtcbiAgICAgICAgYm94LXNoYWRvdzogMCAxcHggMnB4IHZhcigtLXN1YnN0cmF0ZS1idXR0b24tc2hhZG93KTtcbiAgICAgICAgYXBwZWFyYW5jZTogbm9uZTtcblxuICAgICAgICAmOmZvY3VzIHtcbiAgICAgICAgICAgIGJhY2tncm91bmQtY29sb3I6IHZhcigtLXN1YnN0cmF0ZS1idXR0b24tYmFja2dyb3VuZC1mb2N1cywgI2Y3ZjdmNSk7XG4gICAgICAgICAgICBvdXRsaW5lOiBub25lO1xuICAgICAgICB9XG5cbiAgICAgICAgJltkaXNhYmxlZF0sICY6YWN0aXZlIHtcbiAgICAgICAgICAgIGNvbG9yOiB2YXIoLS1zdWJzdHJhdGUtbWVkaXVtLCAjOTk5ZGEwKTtcbiAgICAgICAgICAgIGJhY2tncm91bmQtY29sb3I6IHZhcigtLXN1YnN0cmF0ZS1idXR0b24tYmFja2dyb3VuZC1kaXNhYmxlZCwgI2Y3ZjdmNSk7XG4gICAgICAgIH1cblxuICAgICAgICAmW3R5cGU9XCJpY29uXCJdIHtcbiAgICAgICAgICAgICYgYnV0dG9uIHtcbiAgICAgICAgICAgICAgICBiYWNrZ3JvdW5kOiBub25lO1xuICAgICAgICAgICAgICAgIGJveC1zaGFkb3c6IG5vbmU7XG4gICAgICAgICAgICB9XG5cbiAgICAgICAgICAgICYgc3Vic3RyYXRlLWljb24ge1xuICAgICAgICAgICAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICAgICAgICAgICAgICB0b3A6IDUwJTtcbiAgICAgICAgICAgICAgICBsZWZ0OiA1MCU7XG4gICAgICAgICAgICAgICAgdHJhbnNmb3JtOiB0cmFuc2xhdGUoLTUwJSwgLTUwJSk7XG4gICAgICAgICAgICB9XG4gICAgICAgIH1cblxuICAgICAgICAmOm5vdChbZGlzYWJsZWRdKSB7XG4gICAgICAgICAgICAmOmFjdGl2ZSB7XG4gICAgICAgICAgICAgICAgYW5pbWF0aW9uLWR1cmF0aW9uOiAuMnM7XG4gICAgICAgICAgICAgICAgYW5pbWF0aW9uLW5hbWU6IHN1YnN0cmF0ZS1idXR0b24tYWN0aXZhdGU7XG4gICAgICAgICAgICAgICAgdHJhbnNpdGlvbi10aW1pbmctZnVuY3Rpb246IGVhc2U7XG4gICAgICAgICAgICB9XG5cbiAgICAgICAgICAgICY6aG92ZXIge1xuICAgICAgICAgICAgICAgIGJhY2tncm91bmQtY29sb3I6IHZhcigtLXN1YnN0cmF0ZS1idXR0b24tYmFja2dyb3VuZC1ob3ZlciwgI2U2ZTZlNikhaW1wb3J0YW50O1xuICAgICAgICAgICAgICAgIGN1cnNvcjogcG9pbnRlcjtcbiAgICAgICAgICAgIH1cbiAgICAgICAgfVxuICAgIH1cblxuICAgICZbYXJpYS1kaXNhYmxlZD1cInRydWVcIl0ge1xuICAgICAgICB1c2VyLXNlbGVjdDogbm9uZTtcbiAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogdHJhbnNwYXJlbnQ7XG5cbiAgICAgICAgJiBidXR0b24ge1xuICAgICAgICAgICAgdXNlci1zZWxlY3Q6IG5vbmU7XG4gICAgICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiB0cmFuc3BhcmVudFxuICAgICAgICB9XG4gICAgfVxufVxuICAiXX0= */
|
package/dist/index.d.ts
CHANGED
|
@@ -10,12 +10,12 @@ export declare class SubstrateButton extends HTMLElement {
|
|
|
10
10
|
constructor();
|
|
11
11
|
get form(): HTMLFormElement | undefined | null;
|
|
12
12
|
get disabled(): boolean;
|
|
13
|
+
set disabled(disabledValue: boolean);
|
|
13
14
|
get type(): string | null | undefined;
|
|
14
15
|
get tabindex(): number;
|
|
15
16
|
get spinning(): boolean;
|
|
16
17
|
set spinning(value: boolean);
|
|
17
18
|
set type(value: string);
|
|
18
|
-
set disabled(disabledValue: boolean);
|
|
19
19
|
get autofocus(): boolean;
|
|
20
20
|
set autofocus(value: boolean);
|
|
21
21
|
_setAttribute(name: string, value: boolean | string | null): void;
|
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;;
|
|
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"}
|
package/dist/index.js
CHANGED
|
@@ -11,7 +11,11 @@ class SubstrateButton extends HTMLElement {
|
|
|
11
11
|
constructor() {
|
|
12
12
|
super();
|
|
13
13
|
const disabled = this.getAttribute("disabled");
|
|
14
|
-
|
|
14
|
+
if (disabled !== null) {
|
|
15
|
+
setTimeout(() => {
|
|
16
|
+
this.disabled = true;
|
|
17
|
+
}, 0);
|
|
18
|
+
}
|
|
15
19
|
this.autofocus = this.getAttribute("autofocus") !== null;
|
|
16
20
|
this._isSpinning = this.getAttribute("spinning") !== null;
|
|
17
21
|
}
|
|
@@ -21,6 +25,15 @@ class SubstrateButton extends HTMLElement {
|
|
|
21
25
|
get disabled() {
|
|
22
26
|
return !!this.button?.hasAttribute("disabled");
|
|
23
27
|
}
|
|
28
|
+
set disabled(disabledValue) {
|
|
29
|
+
if (!disabledValue) {
|
|
30
|
+
this._removeAttribute("disabled");
|
|
31
|
+
this.button?.setAttribute("aria-disabled", "false");
|
|
32
|
+
} else {
|
|
33
|
+
this.button?.setAttribute("disabled", "");
|
|
34
|
+
this.button?.setAttribute("aria-disabled", "true");
|
|
35
|
+
}
|
|
36
|
+
}
|
|
24
37
|
get type() {
|
|
25
38
|
return this.button?.getAttribute("type");
|
|
26
39
|
}
|
|
@@ -39,15 +52,6 @@ class SubstrateButton extends HTMLElement {
|
|
|
39
52
|
set type(value) {
|
|
40
53
|
this._setAttribute("type", value);
|
|
41
54
|
}
|
|
42
|
-
set disabled(disabledValue) {
|
|
43
|
-
if (!disabledValue) {
|
|
44
|
-
this._removeAttribute("disabled");
|
|
45
|
-
this.button?.setAttribute("aria-disabled", "false");
|
|
46
|
-
} else {
|
|
47
|
-
this.button?.setAttribute("disabled", "");
|
|
48
|
-
this.button?.setAttribute("aria-disabled", "true");
|
|
49
|
-
}
|
|
50
|
-
}
|
|
51
55
|
get autofocus() {
|
|
52
56
|
return !!this.button?.hasAttribute("autofocus");
|
|
53
57
|
}
|
|
@@ -93,7 +97,9 @@ class SubstrateButton extends HTMLElement {
|
|
|
93
97
|
this._setAttribute("autofocus", newValue);
|
|
94
98
|
}
|
|
95
99
|
handleChange_disabled(_old, newValue) {
|
|
96
|
-
this.
|
|
100
|
+
this.disabled = newValue !== null;
|
|
101
|
+
if (newValue === null) this.button?.removeAttribute("disabled");
|
|
102
|
+
else this.button?.setAttribute("disabled", "" + newValue);
|
|
97
103
|
}
|
|
98
104
|
handleChange_spinning(_, newValue) {
|
|
99
105
|
if (newValue !== null) {
|
|
@@ -139,12 +145,10 @@ class SubstrateButton extends HTMLElement {
|
|
|
139
145
|
disabled ? "disabled" : "",
|
|
140
146
|
autofocus ? "autofocus" : "",
|
|
141
147
|
type ? `type="${this.type}"` : "",
|
|
142
|
-
tabindex ? `tabindex
|
|
148
|
+
tabindex ? `tabindex="${tabindex}"` : 'tabindex="0"',
|
|
143
149
|
'role="button"'
|
|
144
150
|
].filter(Boolean).join(" ");
|
|
145
|
-
this.innerHTML = `<button ${btnProps}
|
|
146
|
-
${this.innerHTML}
|
|
147
|
-
</button>`;
|
|
151
|
+
this.innerHTML = `<button ${btnProps}>${this.innerHTML}</button>`;
|
|
148
152
|
}
|
|
149
153
|
}
|
|
150
154
|
export {
|
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 this.disabled =
|
|
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,
|
|
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": "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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;box-shadow:0 1px 2px var(--substrate-button-shadow);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%}:is(substrate-button button):focus{background-color:var(--substrate-button-background-focus,#f7f7f5);outline:none}:is(substrate-button button):active,[disabled]:is(substrate-button button){background-color:var(--substrate-button-background-disabled,#f7f7f5);color:var(--substrate-medium,#999da0)}
|
|
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;box-shadow:0 1px 2px var(--substrate-button-shadow);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%}:is(substrate-button button):focus{background-color:var(--substrate-button-background-focus,#f7f7f5);outline:none}:is(substrate-button button):active,[disabled]:is(substrate-button button){background-color:var(--substrate-button-background-disabled,#f7f7f5);color:var(--substrate-medium,#999da0)}[type=icon]:is(substrate-button button) button{background:none;box-shadow:none}[type=icon]:is(substrate-button button) substrate-icon{left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}: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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNyYy9pbmRleC5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsZ0JBQ0ksR0FDSSxzQkFDSixDQUVBLEdBQ0ksdUJBQ0osQ0FDSixDQUVBLG1CQUNJLEdBQUksdUJBQTBCLENBQ2xDLENBRUEscUNBQ0ksR0FDSSxrQkFDSixDQUVBLElBQ0ksb0JBQ0osQ0FFQSxHQUNJLGtCQUNKLENBQ0osQ0FFQSxpQkFDSSxvQkFBcUIsQ0FFckIsY0FBZSxDQURmLGdCQTJGSixDQXhGSSxtQ0FDSSxtQkEwQkosQ0F4QkksMENBQ0ksaUJBQWtCLENBRWxCLG1CQUFvQixDQURwQix1QkFxQkosQ0FsQkkscURBQ0ksaUJBQ0osQ0FFQSxxREFZSSxxQ0FBdUMsQ0FWdkMsc0JBQXVCLENBT3ZCLGlCQUFrQixDQUVsQixrQ0FBbUMsQ0FEbkMseUJBQTJCLENBUDNCLHFCQUFzQixDQUZ0QixVQUFXLENBS1gsV0FBWSxDQUNaLE9BQVEsQ0FDUixXQUFZLENBSlosaUJBQWtCLENBQ2xCLFVBUUosQ0FJUix3QkFVSSxlQUFnQixDQUhoQiwrREFBaUUsQ0FOakUscUJBQXVCLENBUXZCLG1EQUFvRCxDQVBwRCxtRUFBc0UsQ0FFdEUsOEZBQW9HLENBQ3BHLGdCQUFrQixDQUNsQixpQkFBa0IsQ0FFbEIsbURBQXVELENBTHZELFVBNkNKLENBcENJLG1DQUNJLGlFQUFtRSxDQUNuRSxZQUNKLENBRUEsMkVBRUksb0VBQXNFLENBRHRFLHFDQUVKLENBR0ksK0NBQ0ksZUFBZ0IsQ0FDaEIsZUFDSixDQUVBLHVEQUdJLFFBQVMsQ0FGVCxpQkFBa0IsQ0FDbEIsT0FBUSxDQUVSLDhCQUNKLENBSUEsb0RBQ0ksc0JBQXVCLENBQ3ZCLHdDQUF5QyxDQUN6QywrQkFDSixDQUVBLG1EQUNJLDJFQUE2RSxDQUM3RSxjQUNKLENBUUosaUZBRUksNEJBQTRCLENBRDVCLGdCQUVKIiwiZmlsZSI6InNyYy9pbmRleC5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyJAa2V5ZnJhbWVzIHNwaW4ge1xuICAgIGZyb20ge1xuICAgICAgICB0cmFuc2Zvcm06IHJvdGF0ZSgwZGVnKTtcbiAgICB9XG5cbiAgICB0byB7XG4gICAgICAgIHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7XG4gICAgfVxufVxuXG5Aa2V5ZnJhbWVzIHNwaW5uZXIge1xuICAgIHRvIHt0cmFuc2Zvcm06IHJvdGF0ZSgzNjBkZWcpO31cbn1cblxuQGtleWZyYW1lcyBzdWJzdHJhdGUtYnV0dG9uLWFjdGl2YXRlIHtcbiAgICAwJSB7XG4gICAgICAgIHRyYW5zZm9ybTogc2NhbGUoMSk7XG4gICAgfVxuXG4gICAgNTAlIHtcbiAgICAgICAgdHJhbnNmb3JtOiBzY2FsZSgwLjk1KTtcbiAgICB9XG5cbiAgICAxMDAlIHtcbiAgICAgICAgdHJhbnNmb3JtOiBzY2FsZSgxKTtcbiAgICB9XG59XG5cbnN1YnN0cmF0ZS1idXR0b24ge1xuICAgIGRpc3BsYXk6IGlubGluZS1ibG9jaztcbiAgICB1c2VyLXNlbGVjdDogbm9uZTtcbiAgICBtaW4td2lkdGg6IDhyZW07XG5cbiAgICAmLnN1YnN0cmF0ZS1sb2FkaW5nIHtcbiAgICAgICAgcG9pbnRlci1ldmVudHM6IG5vbmU7XG5cbiAgICAgICAgJiBidXR0b24ge1xuICAgICAgICAgICAgY29sb3I6IHRyYW5zcGFyZW50O1xuICAgICAgICAgICAgdHJhbnNpdGlvbjogYWxsIDAuM3MgZWFzZTtcbiAgICAgICAgICAgIHBvaW50ZXItZXZlbnRzOiBub25lO1xuXG4gICAgICAgICAgICAmOmhvdmVyIHtcbiAgICAgICAgICAgICAgICBjb2xvcjogdHJhbnNwYXJlbnQ7XG4gICAgICAgICAgICB9XG5cbiAgICAgICAgICAgICY6OmFmdGVyIHtcbiAgICAgICAgICAgICAgICBjb250ZW50OiBcIlwiO1xuICAgICAgICAgICAgICAgIGJhY2tncm91bmQ6IHRyYW5zcGFyZW50O1xuICAgICAgICAgICAgICAgIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG4gICAgICAgICAgICAgICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgICAgICAgICAgICAgIHdpZHRoOiAxNnB4O1xuICAgICAgICAgICAgICAgIGhlaWdodDogMTZweDtcbiAgICAgICAgICAgICAgICBpbnNldDogMDtcbiAgICAgICAgICAgICAgICBtYXJnaW46IGF1dG87XG4gICAgICAgICAgICAgICAgYm9yZGVyLXJhZGl1czogNTAlO1xuICAgICAgICAgICAgICAgIGJvcmRlci10b3A6IDJweCBzb2xpZCBibGFjaztcbiAgICAgICAgICAgICAgICBib3JkZXItcmlnaHQ6IDJweCBzb2xpZCB0cmFuc3BhcmVudDtcbiAgICAgICAgICAgICAgICBhbmltYXRpb246IHNwaW5uZXIgMC42cyBsaW5lYXIgaW5maW5pdGU7XG4gICAgICAgICAgICB9XG4gICAgICAgIH1cbiAgICB9XG5cbiAgICAmIGJ1dHRvbiB7XG4gICAgICAgIGJvcmRlcjogMXB4IHNvbGlkIGJsYWNrO1xuICAgICAgICBjb2xvcjogdmFyKC0tc3Vic3RyYXRlLWJ1dHRvbi10ZXh0LCB2YXIoLS1zdWJzdHJhdGUtcHJpbWFyeSwgIzM2MzkzZCkpO1xuICAgICAgICB3aWR0aDogMTAwJTtcbiAgICAgICAgZm9udC1mYW1pbHk6IHZhcigtLXN1YnN0cmF0ZS1mb250LCAnR2lsbCBTYW5zJywgJ0dpbGwgU2FucyBNVCcsIENhbGlicmksICdUcmVidWNoZXQgTVMnLCBzYW5zLXNlcmlmKTtcbiAgICAgICAgcGFkZGluZzogMC41ZW0gMWVtO1xuICAgICAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gICAgICAgIGJhY2tncm91bmQtY29sb3I6IHZhcigtLXN1YnN0cmF0ZS1idXR0b24tYmFja2dyb3VuZCwgdHJhbnNwYXJlbnQpO1xuICAgICAgICB0cmFuc2l0aW9uOiBiYWNrZ3JvdW5kLWNvbG9yIDAuM3MgZWFzZSwgY29sb3IgMC4zcyBlYXNlO1xuICAgICAgICBib3gtc2hhZG93OiAwIDFweCAycHggdmFyKC0tc3Vic3RyYXRlLWJ1dHRvbi1zaGFkb3cpO1xuICAgICAgICBhcHBlYXJhbmNlOiBub25lO1xuXG4gICAgICAgICY6Zm9jdXMge1xuICAgICAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tc3Vic3RyYXRlLWJ1dHRvbi1iYWNrZ3JvdW5kLWZvY3VzLCAjZjdmN2Y1KTtcbiAgICAgICAgICAgIG91dGxpbmU6IG5vbmU7XG4gICAgICAgIH1cblxuICAgICAgICAmW2Rpc2FibGVkXSwgJjphY3RpdmUge1xuICAgICAgICAgICAgY29sb3I6IHZhcigtLXN1YnN0cmF0ZS1tZWRpdW0sICM5OTlkYTApO1xuICAgICAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tc3Vic3RyYXRlLWJ1dHRvbi1iYWNrZ3JvdW5kLWRpc2FibGVkLCAjZjdmN2Y1KTtcbiAgICAgICAgfVxuXG4gICAgICAgICZbdHlwZT1cImljb25cIl0ge1xuICAgICAgICAgICAgJiBidXR0b24ge1xuICAgICAgICAgICAgICAgIGJhY2tncm91bmQ6IG5vbmU7XG4gICAgICAgICAgICAgICAgYm94LXNoYWRvdzogbm9uZTtcbiAgICAgICAgICAgIH1cblxuICAgICAgICAgICAgJiBzdWJzdHJhdGUtaWNvbiB7XG4gICAgICAgICAgICAgICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgICAgICAgICAgICAgIHRvcDogNTAlO1xuICAgICAgICAgICAgICAgIGxlZnQ6IDUwJTtcbiAgICAgICAgICAgICAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZSgtNTAlLCAtNTAlKTtcbiAgICAgICAgICAgIH1cbiAgICAgICAgfVxuXG4gICAgICAgICY6bm90KFtkaXNhYmxlZF0pIHtcbiAgICAgICAgICAgICY6YWN0aXZlIHtcbiAgICAgICAgICAgICAgICBhbmltYXRpb24tZHVyYXRpb246IC4ycztcbiAgICAgICAgICAgICAgICBhbmltYXRpb24tbmFtZTogc3Vic3RyYXRlLWJ1dHRvbi1hY3RpdmF0ZTtcbiAgICAgICAgICAgICAgICB0cmFuc2l0aW9uLXRpbWluZy1mdW5jdGlvbjogZWFzZTtcbiAgICAgICAgICAgIH1cblxuICAgICAgICAgICAgJjpob3ZlciB7XG4gICAgICAgICAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tc3Vic3RyYXRlLWJ1dHRvbi1iYWNrZ3JvdW5kLWhvdmVyLCAjZTZlNmU2KSFpbXBvcnRhbnQ7XG4gICAgICAgICAgICAgICAgY3Vyc29yOiBwb2ludGVyO1xuICAgICAgICAgICAgfVxuICAgICAgICB9XG4gICAgfVxuXG4gICAgJlthcmlhLWRpc2FibGVkPVwidHJ1ZVwiXSB7XG4gICAgICAgIHVzZXItc2VsZWN0OiBub25lO1xuICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiB0cmFuc3BhcmVudDtcblxuICAgICAgICAmIGJ1dHRvbiB7XG4gICAgICAgICAgICB1c2VyLXNlbGVjdDogbm9uZTtcbiAgICAgICAgICAgIGJhY2tncm91bmQtY29sb3I6IHRyYW5zcGFyZW50XG4gICAgICAgIH1cbiAgICB9XG59XG4gICJdfQ== */
|
package/dist/index.min.js
CHANGED
|
@@ -1,4 +1,2 @@
|
|
|
1
|
-
var b=Object.defineProperty;var
|
|
2
|
-
${this.innerHTML}
|
|
3
|
-
</button>`}};export{u as SubstrateButton};
|
|
1
|
+
var b=Object.defineProperty;var u=(s,t)=>b(s,"name",{value:t,configurable:!0});var r=class s extends HTMLElement{static{u(this,"SubstrateButton")}static observedAttributes=["autofocus","disabled","spinning"];static tag="substrate-button";_isSpinning;constructor(){super(),this.getAttribute("disabled")!==null&&setTimeout(()=>{this.disabled=!0},0),this.autofocus=this.getAttribute("autofocus")!==null,this._isSpinning=this.getAttribute("spinning")!==null}get form(){return this.button?.form}get disabled(){return!!this.button?.hasAttribute("disabled")}set disabled(t){t?(this.button?.setAttribute("disabled",""),this.button?.setAttribute("aria-disabled","true")):(this._removeAttribute("disabled"),this.button?.setAttribute("aria-disabled","false"))}get type(){return this.button?.getAttribute("type")}get tabindex(){let t=this.button?.getAttribute("tabindex");return t?parseInt(t):0}get spinning(){return this._isSpinning}set spinning(t){t?this.setAttribute("spinning",""):this.removeAttribute("spinning")}set type(t){this._setAttribute("type",t)}get autofocus(){return!!this.button?.hasAttribute("autofocus")}set autofocus(t){t?this._setAttribute("autofocus",t):this._removeAttribute("autofocus")}_setAttribute(t,e){if(e===!1)this._removeAttribute(t),this.button?.removeAttribute(t);else{if(e===!0)return this.button?.setAttribute(t,"");if(e===null)return this._removeAttribute(t);this.button?.setAttribute(t,e)}}_removeAttribute(t){this.removeAttribute(t),this.button?.removeAttribute(t)}get button(){return this.querySelector("button")}handleChange_autofocus(t,e){this._setAttribute("autofocus",e)}handleChange_disabled(t,e){this.disabled=e!==null,e===null?this.button?.removeAttribute("disabled"):this.button?.setAttribute("disabled",""+e)}handleChange_spinning(t,e){e!==null?this.classList.add("substrate-loading"):this.classList.remove("substrate-loading")}attributeChangedCallback(t,e,i){let n=this[`handleChange_${t}`];n&&n.call(this,e,i)}connectedCallback(){this.render()}static define(){if("customElements"in window)return customElements.define(s.tag||"substrate-button",s)}render(){let{type:t,autofocus:e,tabindex:i,disabled:n}=this,o=[`class="${["substrate-button"].join(" ")}"`,n?"disabled":"",e?"autofocus":"",t?`type="${this.type}"`:"",i?`tabindex="${i}"`:'tabindex="0"','role="button"'].filter(Boolean).join(" ");this.innerHTML=`<button ${o}>${this.innerHTML}</button>`}};export{r as SubstrateButton};
|
|
4
2
|
//# sourceMappingURL=index.min.js.map
|
package/dist/index.min.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/index.ts"],
|
|
4
|
-
"sourcesContent": ["// 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 this.disabled =
|
|
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,
|
|
6
|
-
"names": ["SubstrateButton", "_SubstrateButton", "__name", "
|
|
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": "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",
|
|
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": 5414,
|
|
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": 8533
|
|
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": 4292
|
|
25
25
|
}
|
|
26
26
|
},
|
|
27
|
-
"bytes":
|
|
27
|
+
"bytes": 4485
|
|
28
28
|
}
|
|
29
29
|
}
|
|
30
30
|
}
|
package/package.json
CHANGED
|
@@ -1,11 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@substrate-system/button",
|
|
3
|
+
"version": "0.0.7",
|
|
4
|
+
"description": "A button component with a visual \"loading\" state",
|
|
3
5
|
"type": "module",
|
|
4
|
-
"version": "0.0.5",
|
|
5
6
|
"main": "dist/index.js",
|
|
6
7
|
"files": [
|
|
7
8
|
"./dist/*"
|
|
8
9
|
],
|
|
10
|
+
"types": "./dist/index.d.ts",
|
|
9
11
|
"exports": {
|
|
10
12
|
".": {
|
|
11
13
|
"import": "./dist/index.js",
|
|
@@ -45,9 +47,8 @@
|
|
|
45
47
|
"postversion": "git push --follow-tags && export $(cat .env | xargs) && npm publish",
|
|
46
48
|
"prepublishOnly": "npm run build"
|
|
47
49
|
},
|
|
48
|
-
"dependencies": {},
|
|
49
50
|
"devDependencies": {
|
|
50
|
-
"@
|
|
51
|
+
"@substrate-system/dom": "^0.1.7",
|
|
51
52
|
"@substrate-system/debug": "^0.9.0",
|
|
52
53
|
"@substrate-system/tapzero": "^0.10.13",
|
|
53
54
|
"@typescript-eslint/eslint-plugin": "^8.7.0",
|
|
@@ -70,5 +71,22 @@
|
|
|
70
71
|
"vite": "^6.0.11"
|
|
71
72
|
},
|
|
72
73
|
"author": "nichoth <nichoth@nichoth.com> (https://nichoth.com)",
|
|
73
|
-
"license": "SEE LICENSE IN LICENSE"
|
|
74
|
+
"license": "SEE LICENSE IN LICENSE",
|
|
75
|
+
"directories": {
|
|
76
|
+
"example": "example",
|
|
77
|
+
"test": "test"
|
|
78
|
+
},
|
|
79
|
+
"repository": {
|
|
80
|
+
"type": "git",
|
|
81
|
+
"url": "git+https://github.com/substrate-system/button.git"
|
|
82
|
+
},
|
|
83
|
+
"keywords": [
|
|
84
|
+
"button",
|
|
85
|
+
"web-componet",
|
|
86
|
+
"HTML"
|
|
87
|
+
],
|
|
88
|
+
"bugs": {
|
|
89
|
+
"url": "https://github.com/substrate-system/button/issues"
|
|
90
|
+
},
|
|
91
|
+
"homepage": "https://github.com/substrate-system/button"
|
|
74
92
|
}
|