@substrate-system/button 0.0.17 → 0.0.20

package/README.md

@@ -1,10 +1,10 @@
 # button
-![tests](https://github.com/substrate-system/button/actions/workflows/nodejs.yml/badge.svg)
+[![tests](https://img.shields.io/github/actions/workflow/status/substrate-system/button/nodejs.yml?style=flat-square)](https://github.com/substrate-system/button/actions/workflows/nodejs.yml)
 [![types](https://img.shields.io/npm/types/@substrate-system/button?style=flat-square)](README.md)
 [![module](https://img.shields.io/badge/module-ESM%2FCJS-blue?style=flat-square)](README.md)
 [![dependencies](https://img.shields.io/badge/dependencies-zero-brightgreen.svg?style=flat-square)](package.json)
 [![install size](https://flat.badgen.net/packagephobia/install/@substrate-system/button?cache-control=no-cache)](https://packagephobia.com/result?p=@substrate-system/button)
-[![GZip size](https://img.badgesize.io/https%3A%2F%2Fesm.sh%2F%40substrate-system%2Fbutton%2Fes2022%2Fbutton.mjs?compression=gzip&style=flat-square)](https://esm.sh/@substrate-system/button/es2022/button.mjs)
+[![gzip size](https://img.shields.io/bundlephobia/minzip/@substrate-system/button?style=flat-square)](https://bundlephobia.com/package/@substrate-system/button)
 [![semantic versioning](https://img.shields.io/badge/semver-2.0.0-blue?logo=semver&style=flat-square)](https://semver.org/)
 [![Common Changelog](https://nichoth.github.io/badge/common-changelog.svg)](./CHANGELOG.md)
 [![license](https://img.shields.io/badge/license-Polyform_Small_Business-249fbc?style=flat-square)](LICENSE)
@@ -29,10 +29,11 @@ A button web component, with a visual "loading" state.
   * [Bundler](#bundler)
   * [CSS import](#css-import)
 - [Use](#use)
+- [Module format](#module-format)
+  * [Bundler](#bundler-1)
+  * [pre-built](#pre-built)
   * [Example](#example)
   * [Attributes](#attributes)
-  * [HTML](#html)
-  * [pre-built](#pre-built)
 
 <!-- tocstop -->
 
@@ -109,11 +110,11 @@ call `.define()`.
 > [!CAUTION]  
 > If you change the name of the web component, it will break the CSS.
 
-
 To use the default, call `.define()`:
 
 ```js
 import { SubstrateButton } from '@substrate-system/button'
+import '@substrate-system/button/css'
 
 // create a web component named `substrate-button`
 SubstrateButton.define()
@@ -129,50 +130,51 @@ SubstrateButton.tag = 'cool-button'
 SubstrateButton.define()
 ```
 
-### Example
+## Module format
 
-See the example in [./example](./example/).
+This package includes ESM, Common JS, and pre-bundled versions.
 
-### Attributes
+### Bundler
+Just import like normal.
 
-#### spinning
+#### Full
 
-Add an attribute `spinning` to set the loading state.
+This is a web component that knows how to render itself.
 
 ```js
-const el = document.querySelector('substrate-button')
-el?.setAttribute('spinning', '')
-// now it shows a spinning animation
-```
+import { SubstrateButton } from '@substrate-system/button'
 
-Remove the attribute to stop the animation:
-```js
-const el = document.querySelector('substrate-button')
-el?.removeAttribute('spinning')
+SubstrateButton.define()
 ```
 
-#### JS API
+#### Client
 
-Or, if you have a reference to the element, you can set the `spinning` property
-for the same effect:
+The client version should be used in conjunction with server-side rendering.
+It does not know how to render itself.
 
 ```js
-const el = document.querySelector('substrate-button')
-
-el.spinning = true  // spin
+import { SubstrateButton } from '@substrate-system/button/client'
 
-el.spinning = false  // stop
+SubstrateButton.define()
 ```
 
-### HTML
-```html
-<div>
-    <substrate-button>hello</substrate-button>
-</div>
+#### Server-side
+
+Take some attributes, and return a string of HTML.
+
+```js
+import { html } from '@substrate-system/button/html'
+
+const htmlString = html({
+  classes: ['abc'],
+  disabled: false,
+  autofocus: false
+})
 ```
 
 ### pre-built
-This package exposes minified JS and CSS files too. Copy them to a location that is
+
+This package exposes minified JS and CSS files. Copy them to a location that is
 accessible to your web server, then link to them in HTML.
 
 #### copy
@@ -191,3 +193,39 @@ cp ./node_modules/@substrate-system/button/dist/index.min.css ./public/substrate
     <script type="module" src="./substrate-button.min.js"></script>
 </body>
 ```
+
+
+### Example
+
+See the example in [./example](./example/).
+
+### Attributes
+
+#### spinning
+
+Add an attribute `spinning` to set the loading state.
+
+```js
+const el = document.querySelector('substrate-button')
+el?.setAttribute('spinning', '')
+// now it shows a spinning animation
+```
+
+Remove the attribute to stop the animation:
+```js
+const el = document.querySelector('substrate-button')
+el?.removeAttribute('spinning')
+```
+
+#### JS API
+
+Or, if you have a reference to the element, you can set the `spinning` property
+for the same effect:
+
+```js
+const el = document.querySelector('substrate-button')
+
+el.spinning = true  // spin
+
+el.spinning = false  // stop
+```

package/dist/client.cjs

@@ -0,0 +1,163 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var client_exports = {};
+__export(client_exports, {
+  SubstrateButton: () => SubstrateButton
+});
+module.exports = __toCommonJS(client_exports);
+class SubstrateButton extends HTMLElement {
+  static {
+    __name(this, "SubstrateButton");
+  }
+  // for `attributeChangedCallback`
+  static observedAttributes = ["autofocus", "disabled", "spinning"];
+  static TAG = "substrate-button";
+  _isSpinning;
+  constructor() {
+    super();
+    const disabled = this.getAttribute("disabled");
+    if (disabled !== null) {
+      setTimeout(() => {
+        this.disabled = true;
+      }, 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(disabledValue) {
+    if (!disabledValue) {
+      this._removeAttribute("disabled");
+      this.button?.setAttribute("aria-disabled", "false");
+    } else {
+      this.button?.setAttribute("disabled", "");
+      this.button?.setAttribute("aria-disabled", "true");
+    }
+  }
+  get type() {
+    return this.button?.getAttribute("type");
+  }
+  get tabindex() {
+    const i = this.button?.getAttribute("tabindex");
+    if (!i) return 0;
+    return parseInt(i);
+  }
+  get spinning() {
+    return this._isSpinning;
+  }
+  set spinning(value) {
+    if (value) this.setAttribute("spinning", "");
+    else this.removeAttribute("spinning");
+  }
+  set type(value) {
+    this._setAttribute("type", value);
+  }
+  get autofocus() {
+    return !!this.button?.hasAttribute("autofocus");
+  }
+  set autofocus(value) {
+    if (value) {
+      this._setAttribute("autofocus", value);
+    } else {
+      this._removeAttribute("autofocus");
+    }
+  }
+  /**
+   * Set attributes on the internal button element.
+   */
+  _setAttribute(name, value) {
+    if (value === false) {
+      this._removeAttribute(name);
+      this.button?.removeAttribute(name);
+    } else {
+      if (value === true) {
+        return this.button?.setAttribute(name, "");
+      }
+      if (value === null) {
+        return this._removeAttribute(name);
+      }
+      this.button?.setAttribute(name, value);
+    }
+  }
+  /**
+   * Remove from `this` and also button child.
+   */
+  _removeAttribute(name) {
+    this.removeAttribute(name);
+    this.button?.removeAttribute(name);
+  }
+  get button() {
+    return this.querySelector("button");
+  }
+  /**
+   * Handle 'autofocus' attribute changes
+   * @see {@link https://gomakethings.com/how-to-detect-when-attributes-change-on-a-web-component/#organizing-your-code Go Make Things article}
+   *
+   * @param  {string} oldValue The old attribute value
+   * @param  {string} newValue The new attribute value
+   */
+  handleChange_autofocus(_oldValue, newValue) {
+    this._setAttribute("autofocus", newValue);
+  }
+  handleChange_disabled(_old, newValue) {
+    this.disabled = newValue !== null;
+    if (newValue === null) this.button?.removeAttribute("disabled");
+    else this.button?.setAttribute("disabled", "" + newValue);
+  }
+  handleChange_spinning(_, newValue) {
+    if (newValue !== null) {
+      this.classList.add("substrate-loading");
+    } else {
+      this.classList.remove("substrate-loading");
+    }
+  }
+  /**
+   * Runs when the value of an attribute is changed.
+   *
+   * Should add methods to this class like `handleChange_class`, to
+   * listen for changes to `class` attribute.
+   *
+   * @param  {string} name     The attribute name
+   * @param  {string} oldValue The old attribute value
+   * @param  {string} newValue The new attribute value
+   */
+  attributeChangedCallback(name, oldValue, newValue) {
+    const handler = this[`handleChange_${name}`];
+    handler && handler.call(this, oldValue, newValue);
+  }
+  connectedCallback() {
+    this.render();
+  }
+  static define() {
+    if (!("customElements" in window)) return;
+    return customElements.define(
+      SubstrateButton.TAG || "substrate-button",
+      SubstrateButton
+    );
+  }
+  render() {
+  }
+}
+//# sourceMappingURL=client.cjs.map

package/dist/client.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/client.ts"],
+  "sourcesContent": ["// for docuement.querySelector\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'substrate-button': SubstrateButton\n    }\n}\n\n/**\n * This is the lightweight version for browsers + server-side rendering.\n */\nexport class SubstrateButton extends HTMLElement {\n    // for `attributeChangedCallback`\n    static observedAttributes = ['autofocus', 'disabled', 'spinning']\n    static TAG = 'substrate-button'\n    _isSpinning:boolean\n\n    constructor () {\n        super()\n        const disabled = this.getAttribute('disabled')\n        if (disabled !== null) {\n            setTimeout(() => {\n                // need to wait for it to render\n                this.disabled = true\n            }, 0)\n        }\n        this.autofocus = (this.getAttribute('autofocus') !== null)\n        this._isSpinning = (this.getAttribute('spinning') !== null)\n    }\n\n    get form ():HTMLFormElement|undefined|null {\n        return this.button?.form\n    }\n\n    get disabled ():boolean {\n        return !!(this.button?.hasAttribute('disabled'))\n    }\n\n    set disabled (disabledValue:boolean) {\n        if (!disabledValue) {\n            this._removeAttribute('disabled')\n            this.button?.setAttribute('aria-disabled', 'false')\n        } else {\n            this.button?.setAttribute('disabled', '')\n            this.button?.setAttribute('aria-disabled', 'true')\n        }\n    }\n\n    get type ():string|null|undefined {\n        return this.button?.getAttribute('type')\n    }\n\n    get tabindex ():number {\n        const i = this.button?.getAttribute('tabindex')\n        if (!i) return 0\n        return parseInt(i)\n    }\n\n    get spinning ():boolean {\n        return this._isSpinning\n    }\n\n    set spinning (value:boolean) {\n        if (value) this.setAttribute('spinning', '')\n        else this.removeAttribute('spinning')\n    }\n\n    set type (value:string) {\n        this._setAttribute('type', value)\n    }\n\n    get autofocus ():boolean {\n        return !!(this.button?.hasAttribute('autofocus'))\n    }\n\n    set autofocus (value:boolean) {\n        if (value) {\n            this._setAttribute('autofocus', value)\n        } else {\n            this._removeAttribute('autofocus')\n        }\n    }\n\n    /**\n     * Set attributes on the internal button element.\n     */\n    _setAttribute (name:string, value:boolean|string|null):void {\n        if (value === false) {\n            // false means remove the attribute\n            this._removeAttribute(name)\n            this.button?.removeAttribute(name)\n        } else {\n            if (value === true) {\n                // true means set the attribute with no value\n                return this.button?.setAttribute(name, '')\n            }\n\n            if (value === null) {\n                // null means remove\n                return this._removeAttribute(name)\n            }\n\n            // else, set value to a string\n            this.button?.setAttribute(name, value)\n        }\n    }\n\n    /**\n     * Remove from `this` and also button child.\n     */\n    _removeAttribute (name:string) {\n        this.removeAttribute(name)\n        this.button?.removeAttribute(name)\n    }\n\n    get button ():HTMLButtonElement|null {\n        return this.querySelector('button')\n    }\n\n    /**\n     * Handle 'autofocus' attribute changes\n     * @see {@link https://gomakethings.com/how-to-detect-when-attributes-change-on-a-web-component/#organizing-your-code Go Make Things article}\n     *\n     * @param  {string} oldValue The old attribute value\n     * @param  {string} newValue The new attribute value\n     */\n    handleChange_autofocus (_oldValue:string, newValue:string) {\n        this._setAttribute('autofocus', newValue)\n    }\n\n    handleChange_disabled (_old, newValue:boolean|string) {\n        this.disabled = (newValue !== null)\n        if (newValue === null) this.button?.removeAttribute('disabled')\n        else this.button?.setAttribute('disabled', '' + newValue)\n    }\n\n    handleChange_spinning (_, newValue:boolean) {\n        if (newValue !== null) {\n            this.classList.add('substrate-loading')\n        } else {\n            this.classList.remove('substrate-loading')\n        }\n    }\n\n    /**\n     * Runs when the value of an attribute is changed.\n     *\n     * Should add methods to this class like `handleChange_class`, to\n     * listen for changes to `class` attribute.\n     *\n     * @param  {string} name     The attribute name\n     * @param  {string} oldValue The old attribute value\n     * @param  {string} newValue The new attribute value\n     */\n    attributeChangedCallback (name:string, oldValue:string, newValue:string) {\n        const handler = this[`handleChange_${name}`];\n        (handler && handler.call(this, oldValue, newValue))\n    }\n\n    connectedCallback () {\n        // connect event listeners\n        this.render()\n    }\n\n    static define () {\n        if (!('customElements' in window)) return\n\n        return customElements.define(\n            SubstrateButton.TAG || 'substrate-button',\n            SubstrateButton\n        )\n    }\n\n    render () {\n        // noop\n    }\n}\n\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/client.d.ts

@@ -0,0 +1,58 @@
+declare global {
+    interface HTMLElementTagNameMap {
+        'substrate-button': SubstrateButton;
+    }
+}
+/**
+ * This is the lightweight version for browsers + server-side rendering.
+ */
+export declare class SubstrateButton extends HTMLElement {
+    static observedAttributes: string[];
+    static TAG: string;
+    _isSpinning: boolean;
+    constructor();
+    get form(): HTMLFormElement | undefined | null;
+    get disabled(): boolean;
+    set disabled(disabledValue: boolean);
+    get type(): string | null | undefined;
+    get tabindex(): number;
+    get spinning(): boolean;
+    set spinning(value: boolean);
+    set type(value: string);
+    get autofocus(): boolean;
+    set autofocus(value: boolean);
+    /**
+     * Set attributes on the internal button element.
+     */
+    _setAttribute(name: string, value: boolean | string | null): void;
+    /**
+     * Remove from `this` and also button child.
+     */
+    _removeAttribute(name: string): void;
+    get button(): HTMLButtonElement | null;
+    /**
+     * Handle 'autofocus' attribute changes
+     * @see {@link https://gomakethings.com/how-to-detect-when-attributes-change-on-a-web-component/#organizing-your-code Go Make Things article}
+     *
+     * @param  {string} oldValue The old attribute value
+     * @param  {string} newValue The new attribute value
+     */
+    handleChange_autofocus(_oldValue: string, newValue: string): void;
+    handleChange_disabled(_old: any, newValue: boolean | string): void;
+    handleChange_spinning(_: any, newValue: boolean): void;
+    /**
+     * Runs when the value of an attribute is changed.
+     *
+     * Should add methods to this class like `handleChange_class`, to
+     * listen for changes to `class` attribute.
+     *
+     * @param  {string} name     The attribute name
+     * @param  {string} oldValue The old attribute value
+     * @param  {string} newValue The new attribute value
+     */
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    connectedCallback(): void;
+    static define(): void;
+    render(): void;
+}
+//# sourceMappingURL=client.d.ts.map

package/dist/client.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../src/client.ts"],"names":[],"mappings":"AACA,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,kBAAkB,EAAE,eAAe,CAAA;KACtC;CACJ;AAED;;GAEG;AACH,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;IAKjB,MAAM,CAAC,MAAM;IASb,MAAM;CAGT"}

package/dist/client.js

@@ -0,0 +1,144 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+class SubstrateButton extends HTMLElement {
+  static {
+    __name(this, "SubstrateButton");
+  }
+  // for `attributeChangedCallback`
+  static observedAttributes = ["autofocus", "disabled", "spinning"];
+  static TAG = "substrate-button";
+  _isSpinning;
+  constructor() {
+    super();
+    const disabled = this.getAttribute("disabled");
+    if (disabled !== null) {
+      setTimeout(() => {
+        this.disabled = true;
+      }, 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(disabledValue) {
+    if (!disabledValue) {
+      this._removeAttribute("disabled");
+      this.button?.setAttribute("aria-disabled", "false");
+    } else {
+      this.button?.setAttribute("disabled", "");
+      this.button?.setAttribute("aria-disabled", "true");
+    }
+  }
+  get type() {
+    return this.button?.getAttribute("type");
+  }
+  get tabindex() {
+    const i = this.button?.getAttribute("tabindex");
+    if (!i) return 0;
+    return parseInt(i);
+  }
+  get spinning() {
+    return this._isSpinning;
+  }
+  set spinning(value) {
+    if (value) this.setAttribute("spinning", "");
+    else this.removeAttribute("spinning");
+  }
+  set type(value) {
+    this._setAttribute("type", value);
+  }
+  get autofocus() {
+    return !!this.button?.hasAttribute("autofocus");
+  }
+  set autofocus(value) {
+    if (value) {
+      this._setAttribute("autofocus", value);
+    } else {
+      this._removeAttribute("autofocus");
+    }
+  }
+  /**
+   * Set attributes on the internal button element.
+   */
+  _setAttribute(name, value) {
+    if (value === false) {
+      this._removeAttribute(name);
+      this.button?.removeAttribute(name);
+    } else {
+      if (value === true) {
+        return this.button?.setAttribute(name, "");
+      }
+      if (value === null) {
+        return this._removeAttribute(name);
+      }
+      this.button?.setAttribute(name, value);
+    }
+  }
+  /**
+   * Remove from `this` and also button child.
+   */
+  _removeAttribute(name) {
+    this.removeAttribute(name);
+    this.button?.removeAttribute(name);
+  }
+  get button() {
+    return this.querySelector("button");
+  }
+  /**
+   * Handle 'autofocus' attribute changes
+   * @see {@link https://gomakethings.com/how-to-detect-when-attributes-change-on-a-web-component/#organizing-your-code Go Make Things article}
+   *
+   * @param  {string} oldValue The old attribute value
+   * @param  {string} newValue The new attribute value
+   */
+  handleChange_autofocus(_oldValue, newValue) {
+    this._setAttribute("autofocus", newValue);
+  }
+  handleChange_disabled(_old, newValue) {
+    this.disabled = newValue !== null;
+    if (newValue === null) this.button?.removeAttribute("disabled");
+    else this.button?.setAttribute("disabled", "" + newValue);
+  }
+  handleChange_spinning(_, newValue) {
+    if (newValue !== null) {
+      this.classList.add("substrate-loading");
+    } else {
+      this.classList.remove("substrate-loading");
+    }
+  }
+  /**
+   * Runs when the value of an attribute is changed.
+   *
+   * Should add methods to this class like `handleChange_class`, to
+   * listen for changes to `class` attribute.
+   *
+   * @param  {string} name     The attribute name
+   * @param  {string} oldValue The old attribute value
+   * @param  {string} newValue The new attribute value
+   */
+  attributeChangedCallback(name, oldValue, newValue) {
+    const handler = this[`handleChange_${name}`];
+    handler && handler.call(this, oldValue, newValue);
+  }
+  connectedCallback() {
+    this.render();
+  }
+  static define() {
+    if (!("customElements" in window)) return;
+    return customElements.define(
+      SubstrateButton.TAG || "substrate-button",
+      SubstrateButton
+    );
+  }
+  render() {
+  }
+}
+export {
+  SubstrateButton
+};
+//# sourceMappingURL=client.js.map

package/dist/client.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/client.ts"],
+  "sourcesContent": ["// for docuement.querySelector\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'substrate-button': SubstrateButton\n    }\n}\n\n/**\n * This is the lightweight version for browsers + server-side rendering.\n */\nexport class SubstrateButton extends HTMLElement {\n    // for `attributeChangedCallback`\n    static observedAttributes = ['autofocus', 'disabled', 'spinning']\n    static TAG = 'substrate-button'\n    _isSpinning:boolean\n\n    constructor () {\n        super()\n        const disabled = this.getAttribute('disabled')\n        if (disabled !== null) {\n            setTimeout(() => {\n                // need to wait for it to render\n                this.disabled = true\n            }, 0)\n        }\n        this.autofocus = (this.getAttribute('autofocus') !== null)\n        this._isSpinning = (this.getAttribute('spinning') !== null)\n    }\n\n    get form ():HTMLFormElement|undefined|null {\n        return this.button?.form\n    }\n\n    get disabled ():boolean {\n        return !!(this.button?.hasAttribute('disabled'))\n    }\n\n    set disabled (disabledValue:boolean) {\n        if (!disabledValue) {\n            this._removeAttribute('disabled')\n            this.button?.setAttribute('aria-disabled', 'false')\n        } else {\n            this.button?.setAttribute('disabled', '')\n            this.button?.setAttribute('aria-disabled', 'true')\n        }\n    }\n\n    get type ():string|null|undefined {\n        return this.button?.getAttribute('type')\n    }\n\n    get tabindex ():number {\n        const i = this.button?.getAttribute('tabindex')\n        if (!i) return 0\n        return parseInt(i)\n    }\n\n    get spinning ():boolean {\n        return this._isSpinning\n    }\n\n    set spinning (value:boolean) {\n        if (value) this.setAttribute('spinning', '')\n        else this.removeAttribute('spinning')\n    }\n\n    set type (value:string) {\n        this._setAttribute('type', value)\n    }\n\n    get autofocus ():boolean {\n        return !!(this.button?.hasAttribute('autofocus'))\n    }\n\n    set autofocus (value:boolean) {\n        if (value) {\n            this._setAttribute('autofocus', value)\n        } else {\n            this._removeAttribute('autofocus')\n        }\n    }\n\n    /**\n     * Set attributes on the internal button element.\n     */\n    _setAttribute (name:string, value:boolean|string|null):void {\n        if (value === false) {\n            // false means remove the attribute\n            this._removeAttribute(name)\n            this.button?.removeAttribute(name)\n        } else {\n            if (value === true) {\n                // true means set the attribute with no value\n                return this.button?.setAttribute(name, '')\n            }\n\n            if (value === null) {\n                // null means remove\n                return this._removeAttribute(name)\n            }\n\n            // else, set value to a string\n            this.button?.setAttribute(name, value)\n        }\n    }\n\n    /**\n     * Remove from `this` and also button child.\n     */\n    _removeAttribute (name:string) {\n        this.removeAttribute(name)\n        this.button?.removeAttribute(name)\n    }\n\n    get button ():HTMLButtonElement|null {\n        return this.querySelector('button')\n    }\n\n    /**\n     * Handle 'autofocus' attribute changes\n     * @see {@link https://gomakethings.com/how-to-detect-when-attributes-change-on-a-web-component/#organizing-your-code Go Make Things article}\n     *\n     * @param  {string} oldValue The old attribute value\n     * @param  {string} newValue The new attribute value\n     */\n    handleChange_autofocus (_oldValue:string, newValue:string) {\n        this._setAttribute('autofocus', newValue)\n    }\n\n    handleChange_disabled (_old, newValue:boolean|string) {\n        this.disabled = (newValue !== null)\n        if (newValue === null) this.button?.removeAttribute('disabled')\n        else this.button?.setAttribute('disabled', '' + newValue)\n    }\n\n    handleChange_spinning (_, newValue:boolean) {\n        if (newValue !== null) {\n            this.classList.add('substrate-loading')\n        } else {\n            this.classList.remove('substrate-loading')\n        }\n    }\n\n    /**\n     * Runs when the value of an attribute is changed.\n     *\n     * Should add methods to this class like `handleChange_class`, to\n     * listen for changes to `class` attribute.\n     *\n     * @param  {string} name     The attribute name\n     * @param  {string} oldValue The old attribute value\n     * @param  {string} newValue The new attribute value\n     */\n    attributeChangedCallback (name:string, oldValue:string, newValue:string) {\n        const handler = this[`handleChange_${name}`];\n        (handler && handler.call(this, oldValue, newValue))\n    }\n\n    connectedCallback () {\n        // connect event listeners\n        this.render()\n    }\n\n    static define () {\n        if (!('customElements' in window)) return\n\n        return customElements.define(\n            SubstrateButton.TAG || 'substrate-button',\n            SubstrateButton\n        )\n    }\n\n    render () {\n        // noop\n    }\n}\n\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/client.min.js

@@ -0,0 +1,2 @@
+var o=Object.defineProperty;var n=(i,t)=>o(i,"name",{value:t,configurable:!0});var r=class i extends HTMLElement{static{n(this,"SubstrateButton")}static observedAttributes=["autofocus","disabled","spinning"];static TAG="substrate-button";_isSpinning;constructor(){super(),this.getAttribute("disabled")!==null&&setTimeout(()=>{this.disabled=!0},0),this.autofocus=this.getAttribute("autofocus")!==null,this._isSpinning=this.getAttribute("spinning")!==null}get form(){return this.button?.form}get disabled(){return!!this.button?.hasAttribute("disabled")}set disabled(t){t?(this.button?.setAttribute("disabled",""),this.button?.setAttribute("aria-disabled","true")):(this._removeAttribute("disabled"),this.button?.setAttribute("aria-disabled","false"))}get type(){return this.button?.getAttribute("type")}get tabindex(){let t=this.button?.getAttribute("tabindex");return t?parseInt(t):0}get spinning(){return this._isSpinning}set spinning(t){t?this.setAttribute("spinning",""):this.removeAttribute("spinning")}set type(t){this._setAttribute("type",t)}get autofocus(){return!!this.button?.hasAttribute("autofocus")}set autofocus(t){t?this._setAttribute("autofocus",t):this._removeAttribute("autofocus")}_setAttribute(t,e){if(e===!1)this._removeAttribute(t),this.button?.removeAttribute(t);else{if(e===!0)return this.button?.setAttribute(t,"");if(e===null)return this._removeAttribute(t);this.button?.setAttribute(t,e)}}_removeAttribute(t){this.removeAttribute(t),this.button?.removeAttribute(t)}get button(){return this.querySelector("button")}handleChange_autofocus(t,e){this._setAttribute("autofocus",e)}handleChange_disabled(t,e){this.disabled=e!==null,e===null?this.button?.removeAttribute("disabled"):this.button?.setAttribute("disabled",""+e)}handleChange_spinning(t,e){e!==null?this.classList.add("substrate-loading"):this.classList.remove("substrate-loading")}attributeChangedCallback(t,e,u){let s=this[`handleChange_${t}`];s&&s.call(this,e,u)}connectedCallback(){this.render()}static define(){if("customElements"in window)return customElements.define(i.TAG||"substrate-button",i)}render(){}};export{r as SubstrateButton};
+//# sourceMappingURL=client.min.js.map

package/dist/client.min.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/client.ts"],
+  "sourcesContent": ["// for docuement.querySelector\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'substrate-button': SubstrateButton\n    }\n}\n\n/**\n * This is the lightweight version for browsers + server-side rendering.\n */\nexport class SubstrateButton extends HTMLElement {\n    // for `attributeChangedCallback`\n    static observedAttributes = ['autofocus', 'disabled', 'spinning']\n    static TAG = 'substrate-button'\n    _isSpinning:boolean\n\n    constructor () {\n        super()\n        const disabled = this.getAttribute('disabled')\n        if (disabled !== null) {\n            setTimeout(() => {\n                // need to wait for it to render\n                this.disabled = true\n            }, 0)\n        }\n        this.autofocus = (this.getAttribute('autofocus') !== null)\n        this._isSpinning = (this.getAttribute('spinning') !== null)\n    }\n\n    get form ():HTMLFormElement|undefined|null {\n        return this.button?.form\n    }\n\n    get disabled ():boolean {\n        return !!(this.button?.hasAttribute('disabled'))\n    }\n\n    set disabled (disabledValue:boolean) {\n        if (!disabledValue) {\n            this._removeAttribute('disabled')\n            this.button?.setAttribute('aria-disabled', 'false')\n        } else {\n            this.button?.setAttribute('disabled', '')\n            this.button?.setAttribute('aria-disabled', 'true')\n        }\n    }\n\n    get type ():string|null|undefined {\n        return this.button?.getAttribute('type')\n    }\n\n    get tabindex ():number {\n        const i = this.button?.getAttribute('tabindex')\n        if (!i) return 0\n        return parseInt(i)\n    }\n\n    get spinning ():boolean {\n        return this._isSpinning\n    }\n\n    set spinning (value:boolean) {\n        if (value) this.setAttribute('spinning', '')\n        else this.removeAttribute('spinning')\n    }\n\n    set type (value:string) {\n        this._setAttribute('type', value)\n    }\n\n    get autofocus ():boolean {\n        return !!(this.button?.hasAttribute('autofocus'))\n    }\n\n    set autofocus (value:boolean) {\n        if (value) {\n            this._setAttribute('autofocus', value)\n        } else {\n            this._removeAttribute('autofocus')\n        }\n    }\n\n    /**\n     * Set attributes on the internal button element.\n     */\n    _setAttribute (name:string, value:boolean|string|null):void {\n        if (value === false) {\n            // false means remove the attribute\n            this._removeAttribute(name)\n            this.button?.removeAttribute(name)\n        } else {\n            if (value === true) {\n                // true means set the attribute with no value\n                return this.button?.setAttribute(name, '')\n            }\n\n            if (value === null) {\n                // null means remove\n                return this._removeAttribute(name)\n            }\n\n            // else, set value to a string\n            this.button?.setAttribute(name, value)\n        }\n    }\n\n    /**\n     * Remove from `this` and also button child.\n     */\n    _removeAttribute (name:string) {\n        this.removeAttribute(name)\n        this.button?.removeAttribute(name)\n    }\n\n    get button ():HTMLButtonElement|null {\n        return this.querySelector('button')\n    }\n\n    /**\n     * Handle 'autofocus' attribute changes\n     * @see {@link https://gomakethings.com/how-to-detect-when-attributes-change-on-a-web-component/#organizing-your-code Go Make Things article}\n     *\n     * @param  {string} oldValue The old attribute value\n     * @param  {string} newValue The new attribute value\n     */\n    handleChange_autofocus (_oldValue:string, newValue:string) {\n        this._setAttribute('autofocus', newValue)\n    }\n\n    handleChange_disabled (_old, newValue:boolean|string) {\n        this.disabled = (newValue !== null)\n        if (newValue === null) this.button?.removeAttribute('disabled')\n        else this.button?.setAttribute('disabled', '' + newValue)\n    }\n\n    handleChange_spinning (_, newValue:boolean) {\n        if (newValue !== null) {\n            this.classList.add('substrate-loading')\n        } else {\n            this.classList.remove('substrate-loading')\n        }\n    }\n\n    /**\n     * Runs when the value of an attribute is changed.\n     *\n     * Should add methods to this class like `handleChange_class`, to\n     * listen for changes to `class` attribute.\n     *\n     * @param  {string} name     The attribute name\n     * @param  {string} oldValue The old attribute value\n     * @param  {string} newValue The new attribute value\n     */\n    attributeChangedCallback (name:string, oldValue:string, newValue:string) {\n        const handler = this[`handleChange_${name}`];\n        (handler && handler.call(this, oldValue, newValue))\n    }\n\n    connectedCallback () {\n        // connect event listeners\n        this.render()\n    }\n\n    static define () {\n        if (!('customElements' in window)) return\n\n        return customElements.define(\n            SubstrateButton.TAG || 'substrate-button',\n            SubstrateButton\n        )\n    }\n\n    render () {\n        // noop\n    }\n}\n\n"],
+  "mappings": "+EAUO,IAAMA,EAAN,MAAMC,UAAwB,WAAY,CAVjD,MAUiD,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,CAKA,cAAeC,EAAaD,EAAgC,CACxD,GAAIA,IAAU,GAEV,KAAK,iBAAiBC,CAAI,EAC1B,KAAK,QAAQ,gBAAgBA,CAAI,MAC9B,CACH,GAAID,IAAU,GAEV,OAAO,KAAK,QAAQ,aAAaC,EAAM,EAAE,EAG7C,GAAID,IAAU,KAEV,OAAO,KAAK,iBAAiBC,CAAI,EAIrC,KAAK,QAAQ,aAAaA,EAAMD,CAAK,CACzC,CACJ,CAKA,iBAAkBC,EAAa,CAC3B,KAAK,gBAAgBA,CAAI,EACzB,KAAK,QAAQ,gBAAgBA,CAAI,CACrC,CAEA,IAAI,QAAiC,CACjC,OAAO,KAAK,cAAc,QAAQ,CACtC,CASA,uBAAwBC,EAAkBC,EAAiB,CACvD,KAAK,cAAc,YAAaA,CAAQ,CAC5C,CAEA,sBAAuBC,EAAMD,EAAyB,CAClD,KAAK,SAAYA,IAAa,KAC1BA,IAAa,KAAM,KAAK,QAAQ,gBAAgB,UAAU,EACzD,KAAK,QAAQ,aAAa,WAAY,GAAKA,CAAQ,CAC5D,CAEA,sBAAuBE,EAAGF,EAAkB,CACpCA,IAAa,KACb,KAAK,UAAU,IAAI,mBAAmB,EAEtC,KAAK,UAAU,OAAO,mBAAmB,CAEjD,CAYA,yBAA0BF,EAAaK,EAAiBH,EAAiB,CACrE,IAAMI,EAAU,KAAK,gBAAgBN,CAAI,EAAE,EAC1CM,GAAWA,EAAQ,KAAK,KAAMD,EAAUH,CAAQ,CACrD,CAEA,mBAAqB,CAEjB,KAAK,OAAO,CAChB,CAEA,OAAO,QAAU,CACb,GAAM,mBAAoB,OAE1B,OAAO,eAAe,OAClBP,EAAgB,KAAO,mBACvBA,CACJ,CACJ,CAEA,QAAU,CAEV,CACJ",
+  "names": ["SubstrateButton", "_SubstrateButton", "__name", "disabledValue", "i", "value", "name", "_oldValue", "newValue", "_old", "_", "oldValue", "handler"]
+}

package/dist/html.cjs

@@ -0,0 +1,49 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var html_exports = {};
+__export(html_exports, {
+  html: () => html
+});
+module.exports = __toCommonJS(html_exports);
+function html(attrs, textContent) {
+  const {
+    type,
+    autofocus,
+    tabindex,
+    disabled,
+    classes
+  } = attrs;
+  const _classes = new Set(classes);
+  _classes.add("substrate-button");
+  const arr = Array.from(_classes);
+  const btnProps = [
+    arr.length ? `class="${arr.filter(Boolean).join(" ")}"` : "",
+    disabled ? "disabled" : "",
+    autofocus ? "autofocus" : "",
+    type ? `type="${type}"` : "",
+    tabindex ? `tabindex="${tabindex}"` : 'tabindex="0"',
+    'role="button"'
+  ].filter(Boolean).join(" ");
+  return `<button ${btnProps}>
+        ${textContent}
+    </button>`;
+}
+__name(html, "html");
+//# sourceMappingURL=html.cjs.map

package/dist/html.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/html.ts"],
+  "sourcesContent": ["export type Attrs = {\n    type:string|null;\n    autofocus:boolean;\n    tabindex:string|number;\n    disabled:boolean;\n    classes:string[]|Set<string>;\n}\nexport function html (attrs:Partial<Attrs>, textContent:string) {\n    const {\n        type,\n        autofocus,\n        tabindex,\n        disabled,\n        classes\n    } = attrs\n\n    const _classes = new Set(classes)\n    _classes.add('substrate-button')\n    const arr = Array.from(_classes)\n\n    const btnProps = ([\n        arr.length ? `class=\"${arr.filter(Boolean).join(' ')}\"` : '',\n        disabled ? 'disabled' : '',\n        autofocus ? 'autofocus' : '',\n        type ? `type=\"${type}\"` : '',\n        tabindex ? `tabindex=\"${tabindex}\"` : 'tabindex=\"0\"',\n        'role=\"button\"'\n    ]).filter(Boolean).join(' ')\n\n    return `<button ${btnProps}>\n        ${textContent}\n    </button>`\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAOO,SAAS,KAAM,OAAsB,aAAoB;AAC5D,QAAM;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACJ,IAAI;AAEJ,QAAM,WAAW,IAAI,IAAI,OAAO;AAChC,WAAS,IAAI,kBAAkB;AAC/B,QAAM,MAAM,MAAM,KAAK,QAAQ;AAE/B,QAAM,WAAY;AAAA,IACd,IAAI,SAAS,UAAU,IAAI,OAAO,OAAO,EAAE,KAAK,GAAG,CAAC,MAAM;AAAA,IAC1D,WAAW,aAAa;AAAA,IACxB,YAAY,cAAc;AAAA,IAC1B,OAAO,SAAS,IAAI,MAAM;AAAA,IAC1B,WAAW,aAAa,QAAQ,MAAM;AAAA,IACtC;AAAA,EACJ,EAAG,OAAO,OAAO,EAAE,KAAK,GAAG;AAE3B,SAAO,WAAW,QAAQ;AAAA,UACpB,WAAW;AAAA;AAErB;AAzBgB;",
+  "names": []
+}