@substrate-system/input 0.0.18 → 0.0.20

package/dist/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/index.ts"],
-  "sourcesContent": ["// import Debug from '@substrate-system/debug'\n// const debug = Debug()\n\nexport abstract class Input extends HTMLElement {\n    // for `attributeChangedCallback`\n    static observedAttributes = ['autofocus', 'disabled']\n    static TAG:string\n\n    static define (this:((new (...args:any[]) => Input) & typeof Input)) {\n        if (!('customElements' in window)) return\n        if (customElements.get(this.TAG)) return  // only define it once\n\n        return customElements.define(this.TAG, this)\n    }\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\n        // timeout b/c we need to render first\n        setTimeout(() => {\n            const attr = this.getAttribute('value')\n            if (attr) this.value = attr\n\n            const type = this.getAttribute('type')\n            if (type) this.type = type\n        }, 0)\n    }\n\n    get input ():HTMLInputElement|null {\n        return this.querySelector('input')\n    }\n\n    get tabindex ():number {\n        const i = this.input?.getAttribute('tabindex')\n        if (!i) return 0\n        return parseInt(i)\n    }\n\n    get name ():string|undefined|null {\n        return this.getAttribute('name')\n    }\n\n    get placeholder ():string|null {\n        return this.getAttribute('placeholder')\n    }\n\n    get autocomplete ():string|null {\n        return this.getAttribute('autocomplete')\n    }\n\n    set name (newName:string) {\n        this.setAttribute('name', newName)\n    }\n\n    /**\n     * Remove from `this` element and also child.\n     */\n    _removeAttribute (name:string) {\n        this.removeAttribute(name)\n        this.input?.removeAttribute(name)\n    }\n\n    get disabled ():boolean {\n        return !!(this.input?.hasAttribute('disabled'))\n    }\n\n    set disabled (disabledValue:boolean) {\n        if (!disabledValue) {\n            this._removeAttribute('disabled')\n            this.input?.setAttribute('aria-disabled', 'false')\n        } else {\n            this.input?.setAttribute('disabled', '')\n            this.input?.setAttribute('aria-disabled', 'true')\n        }\n    }\n\n    /**\n     * Handle 'example' 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|null} _oldValue The old attribute value\n     * @param  {string|null} newValue The new attribute value\n     */\n    handleChange_disabled (_oldValue:string, newValue:string) {\n        if (!this.input) {\n            setTimeout(() => {\n                if (newValue === null || newValue === 'null') {\n                    this.disabled = false\n                } else {\n                    this.disabled = true\n                }\n            }, 0)  // wait to render\n        } else {\n            if (newValue === null || newValue === 'null') {\n                this.disabled = false\n            } else {\n                this.disabled = true\n            }\n        }\n    }\n\n    /**\n     * Runs when the value of an attribute is changed\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        this.render()\n    }\n\n    connectedCallback () {\n        this.render()\n    }\n\n    get type ():string|null|undefined {\n        return this.input?.getAttribute('type')\n    }\n\n    set type (value:string) {\n        this._setAttribute('type', value)\n    }\n\n    get value () {\n        return this.input?.value\n    }\n\n    set value (text:string|undefined|null) {\n        if (!text) this.input?.removeAttribute('value')\n        else {\n            this.input!.value = text\n        }\n    }\n\n    /**\n     * Set attributes on the internal input element.\n     */\n    _setAttribute (name:string, value:boolean|string|null):void {\n        if (!value) {\n            return this._removeAttribute(name)\n        }\n\n        if (value === true) {\n            // true means set the attribute with no value\n            return this.input?.setAttribute(name, '')\n        }\n\n        // else, set the value\n        this.input?.setAttribute(name, value)\n    }\n\n    render ():string|void {  // void for child class\n        const {\n            type,\n            autofocus,\n            tabindex,\n            disabled,\n            value,\n            name,\n            placeholder,\n            autocomplete\n        } = this\n\n        if (!name) throw new Error('not name')\n\n        const classes:string[] = ['substrate-input']\n\n        const btn = !!(this.type === 'submit' || this.type === 'button')\n\n        const props = ([\n            `class=\"${classes.filter(Boolean).join(' ')}\"`,\n            disabled ? 'disabled' : '',\n            disabled ? 'aria-disabled=\"true\"' : 'aria-disabled=\"false\"',\n            autofocus ? 'autofocus' : '',\n            type ? `type=\"${this.type}\"` : '',\n            tabindex ? `tabindex=\"${tabindex}\"` : 'tabindex=\"0\"',\n            btn ? 'role=\"button\"' : '',\n            value ? `value=\"${value}\"` : '',\n            name ? `name=\"${name}\"` : '',\n            autocomplete ? `autocomplete=\"${autocomplete}\"` : '',\n            placeholder ? `placeholder=\"${placeholder}\"` : ''\n        ]).filter(Boolean).join(' ')\n\n        return `<input ${props} />`\n    }\n}\n"],
-  "mappings": "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",
-  "names": []
+  "sourcesContent": ["import { WebComponent } from '@substrate-system/web-component'\nimport { define } from '@substrate-system/web-component/util'\nimport { ARIA_ATTRIBUTES, INPUT_ATTRIBUTES } from './util'\n\n// for document.querySelector\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'substrate-input': SubstrateInput\n    }\n}\n\nexport class SubstrateInput extends WebComponent.create('substrate-input') {\n    static TAG = 'substrate-input'\n    static INPUT_ATTRIBUTES = INPUT_ATTRIBUTES\n    static ARIA_ATTRIBUTES = ARIA_ATTRIBUTES\n\n    static observedAttributes = (['label', 'id'])\n        .concat(SubstrateInput.INPUT_ATTRIBUTES)\n        .concat(SubstrateInput.ARIA_ATTRIBUTES)\n\n    inputId:string|null = null\n    inputAriaAttributes:Record<string, string> = {}\n    ignoredAriaCallbackNames:Set<string> = new Set()\n    ignoredIdCallback = false\n    generatedInputId = `substrate-input-${Math.random().toString(36).slice(2, 10)}`\n\n    handleChange_label (_oldValue, _newValue) {\n        this.render()\n    }\n\n    handleChange_aria (\n        name:string,\n        _oldValue:string|null,\n        newValue:string|null\n    ) {\n        if (this.ignoredAriaCallbackNames.has(name)) {\n            this.ignoredAriaCallbackNames.delete(name)\n            return\n        }\n\n        if (newValue === null) {\n            delete this.inputAriaAttributes[name]\n            this.querySelector('input')?.removeAttribute(name)\n            return\n        }\n\n        this.inputAriaAttributes[name] = newValue\n        this.querySelector('input')?.setAttribute(name, newValue)\n\n        if (this.hasAttribute(name)) {\n            this.ignoredAriaCallbackNames.add(name)\n            this.removeAttribute(name)\n        }\n    }\n\n    handleChange_id (_oldValue:string|null, newValue:string|null) {\n        if (this.ignoredIdCallback) {\n            this.ignoredIdCallback = false\n            return\n        }\n\n        if (newValue === null) {\n            this.inputId = null\n            this.querySelector('input')?.removeAttribute('id')\n            return\n        }\n\n        this.inputId = newValue\n        this.querySelector('input')?.setAttribute('id', newValue)\n\n        if (this.hasAttribute('id')) {\n            this.ignoredIdCallback = true\n            this.removeAttribute('id')\n        }\n    }\n\n    handleChange_inputAttribute (name:string, newValue:string|null) {\n        const input = this.querySelector('input')\n        if (!input) return\n\n        if (newValue === null) {\n            input.removeAttribute(name)\n            return\n        }\n\n        input.setAttribute(name, newValue)\n    }\n\n    async attributeChangedCallback (\n        name:string,\n        oldValue:string,\n        newValue:string\n    ) {\n        if (name === 'id') {\n            this.handleChange_id(oldValue, newValue)\n            return\n        }\n\n        if (name.startsWith('aria-')) {\n            this.handleChange_aria(name, oldValue, newValue)\n            return\n        }\n\n        if (SubstrateInput.INPUT_ATTRIBUTES.includes(name)) {\n            this.handleChange_inputAttribute(name, newValue)\n            return\n        }\n\n        if (this[`handleChange_${name}`]) {\n            this[`handleChange_${name}`](oldValue, newValue)\n        }\n    }\n\n    connectedCallback () {\n        this.render()\n    }\n\n    getInputIdForRender () {\n        return this.inputId || this.generatedInputId\n    }\n\n    set label (value:string|null) {\n        if (value === null) {\n            this.removeAttribute('label')\n            return\n        }\n        this.setAttribute('label', value)\n    }\n\n    get label ():string|null {\n        return this.getAttribute('label')\n    }\n\n    render () {\n        const label = this.getAttribute('label')\n        const hostId = this.getAttribute('id')\n        const hostAriaAttributes = Array.from(this.attributes)\n            .filter(attr => attr.name.startsWith('aria-'))\n\n        if (hostId !== null) {\n            this.inputId = hostId\n        }\n\n        for (const attr of hostAriaAttributes) {\n            this.inputAriaAttributes[attr.name] = attr.value\n        }\n\n        const name = this.getAttribute('name')\n        const attrs = Array.from(this.attributes)\n            .filter(attr =>\n                attr.name !== 'label' &&\n                attr.name !== 'id' &&\n                !attr.name.startsWith('aria-')\n            )\n            .map(attr => attr.name + (attr.value === '' ?\n                '' :\n                ('=' + `\"${attr.value}\"`))\n            )\n            .join(' ')\n\n        const classes = (this.getAttribute('class') ?? '').split(' ')\n            .concat(['substrate', 'input', name || ''])\n            .filter(Boolean)\n            .join(' ')\n\n        const inputId = this.getInputIdForRender()\n        const renderedIdAttribute = `id=\"${inputId}\"`\n        const ariaAttributes = Object.entries(this.inputAriaAttributes)\n            .map(([attrName, attrValue]) => {\n                return (attrName + (attrValue === '' ?\n                    '' :\n                    ('=' + `\"${attrValue}\"`)))\n            })\n            .join(' ')\n\n        this.innerHTML = label ? `\n            <div class=\"${classes}\">\n            <label class=\"label-content\" for=\"${inputId}\">${label}</label>\n            <input\n            ${renderedIdAttribute}\n            ${ariaAttributes}\n            ${attrs}\n            />\n            </div>\n        ` : `\n            <div class=\"${classes}\">\n            <input\n            ${renderedIdAttribute}\n            ${ariaAttributes}\n            ${attrs}\n            />\n            </div>\n        `\n\n        if (this.hasAttribute('id')) {\n            this.ignoredIdCallback = true\n            this.removeAttribute('id')\n        }\n        for (const attr of hostAriaAttributes) {\n            this.ignoredAriaCallbackNames.add(attr.name)\n            this.removeAttribute(attr.name)\n        }\n    }\n}\n\ndefine(SubstrateInput.TAG, SubstrateInput)\n"],
+  "mappings": "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",
+  "names": ["import_util"]
 }

package/dist/index.css

@@ -1,5 +1,31 @@
-input {
-    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+substrate-input {
+  display: block;
+
+  & .substrate.input {
+    flex-wrap: wrap;
+    align-items: center;
+    min-width: 100%;
+    display: flex;
+
+    & .label-content {
+      width: 100%;
+    }
+
+    & input {
+      border: 1px solid;
+      border-radius: 0;
+      outline: 1px solid #0000;
+      width: 100%;
+      padding: 1rem 1rem .8rem;
+      transition: all .2s;
+
+      &:focus {
+        outline: 1px solid;
+      }
+    }
+  }
 }
 
-/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNyYy9pbmRleC5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7SUFDSSw2RUFBNkU7QUFDakYiLCJmaWxlIjoic3JjL2luZGV4LmNzcyIsInNvdXJjZXNDb250ZW50IjpbImlucHV0IHtcbiAgICBmb250LWZhbWlseTogJ0dpbGwgU2FucycsICdHaWxsIFNhbnMgTVQnLCBDYWxpYnJpLCAnVHJlYnVjaGV0IE1TJywgc2Fucy1zZXJpZjtcbn1cbiJdfQ== */
+substrate-input:not(:defined) {
+  visibility: hidden;
+}

package/dist/index.d.ts

@@ -1,45 +1,35 @@
-export declare abstract class Input extends HTMLElement {
-    static observedAttributes: string[];
+import { WebComponent } from '@substrate-system/web-component';
+declare global {
+    interface HTMLElementTagNameMap {
+        'substrate-input': SubstrateInput;
+    }
+}
+declare const SubstrateInput_base: typeof WebComponent & {
+    new (...args: any[]): WebComponent;
+    TAG: string;
+    define: typeof WebComponent.define;
+    event: typeof WebComponent.event;
+};
+export declare class SubstrateInput extends SubstrateInput_base {
     static TAG: string;
-    static define(this: ((new (...args: any[]) => Input) & typeof Input)): void;
-    constructor();
-    get input(): HTMLInputElement | null;
-    get tabindex(): number;
-    get name(): string | undefined | null;
-    get placeholder(): string | null;
-    get autocomplete(): string | null;
-    set name(newName: string);
-    /**
-     * Remove from `this` element and also child.
-     */
-    _removeAttribute(name: string): void;
-    get disabled(): boolean;
-    set disabled(disabledValue: boolean);
-    /**
-     * Handle 'example' 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|null} _oldValue The old attribute value
-     * @param  {string|null} newValue The new attribute value
-     */
-    handleChange_disabled(_oldValue: string, newValue: string): void;
-    /**
-     * Runs when the value of an attribute is changed
-     *
-     * @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;
+    static INPUT_ATTRIBUTES: string[];
+    static ARIA_ATTRIBUTES: string[];
+    static observedAttributes: string[];
+    inputId: string | null;
+    inputAriaAttributes: Record<string, string>;
+    ignoredAriaCallbackNames: Set<string>;
+    ignoredIdCallback: boolean;
+    generatedInputId: string;
+    handleChange_label(_oldValue: any, _newValue: any): void;
+    handleChange_aria(name: string, _oldValue: string | null, newValue: string | null): void;
+    handleChange_id(_oldValue: string | null, newValue: string | null): void;
+    handleChange_inputAttribute(name: string, newValue: string | null): void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): Promise<void>;
     connectedCallback(): void;
-    get type(): string | null | undefined;
-    set type(value: string);
-    get value(): string | undefined | null;
-    set value(text: string | undefined | null);
-    /**
-     * Set attributes on the internal input element.
-     */
-    _setAttribute(name: string, value: boolean | string | null): void;
-    render(): string | void;
+    getInputIdForRender(): string;
+    set label(value: string | null);
+    get label(): string | null;
+    render(): void;
 }
+export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAGA,8BAAsB,KAAM,SAAQ,WAAW;IAE3C,MAAM,CAAC,kBAAkB,WAA4B;IACrD,MAAM,CAAC,GAAG,EAAC,MAAM,CAAA;IAEjB,MAAM,CAAC,MAAM,CAAE,IAAI,EAAC,CAAC,CAAC,KAAK,GAAG,IAAI,EAAC,GAAG,EAAE,KAAK,KAAK,CAAC,GAAG,OAAO,KAAK,CAAC;;IA2BnE,IAAI,KAAK,IAAI,gBAAgB,GAAC,IAAI,CAEjC;IAED,IAAI,QAAQ,IAAI,MAAM,CAIrB;IAED,IAAI,IAAI,IAAI,MAAM,GAAC,SAAS,GAAC,IAAI,CAEhC;IAED,IAAI,WAAW,IAAI,MAAM,GAAC,IAAI,CAE7B;IAED,IAAI,YAAY,IAAI,MAAM,GAAC,IAAI,CAE9B;IAED,IAAI,IAAI,CAAE,OAAO,EAAC,MAAM,EAEvB;IAED;;OAEG;IACH,gBAAgB,CAAE,IAAI,EAAC,MAAM;IAK7B,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED,IAAI,QAAQ,CAAE,aAAa,EAAC,OAAO,EAQlC;IAED;;;;;;OAMG;IACH,qBAAqB,CAAE,SAAS,EAAC,MAAM,EAAE,QAAQ,EAAC,MAAM;IAkBxD;;;;;;OAMG;IACH,wBAAwB,CAAE,IAAI,EAAC,MAAM,EAAE,QAAQ,EAAC,MAAM,EAAE,QAAQ,EAAC,MAAM;IAMvE,iBAAiB;IAIjB,IAAI,IAAI,IAAI,MAAM,GAAC,IAAI,GAAC,SAAS,CAEhC;IAED,IAAI,IAAI,CAAE,KAAK,EAAC,MAAM,EAErB;IAED,IAAI,KAAK,IAIO,MAAM,GAAC,SAAS,GAAC,IAAI,CAFpC;IAED,IAAI,KAAK,CAAE,IAAI,EAAC,MAAM,GAAC,SAAS,GAAC,IAAI,EAKpC;IAED;;OAEG;IACH,aAAa,CAAE,IAAI,EAAC,MAAM,EAAE,KAAK,EAAC,OAAO,GAAC,MAAM,GAAC,IAAI,GAAE,IAAI;IAc3D,MAAM,IAAI,MAAM,GAAC,IAAI;CAkCxB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAA;AAK9D,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,iBAAiB,EAAE,cAAc,CAAA;KACpC;CACJ;;;;;;;AAED,qBAAa,cAAe,SAAQ,mBAAsC;IACtE,MAAM,CAAC,GAAG,SAAoB;IAC9B,MAAM,CAAC,gBAAgB,WAAmB;IAC1C,MAAM,CAAC,eAAe,WAAkB;IAExC,MAAM,CAAC,kBAAkB,WAEkB;IAE3C,OAAO,EAAC,MAAM,GAAC,IAAI,CAAO;IAC1B,mBAAmB,EAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAK;IAC/C,wBAAwB,EAAC,GAAG,CAAC,MAAM,CAAC,CAAY;IAChD,iBAAiB,UAAQ;IACzB,gBAAgB,SAA+D;IAE/E,kBAAkB,CAAE,SAAS,KAAA,EAAE,SAAS,KAAA;IAIxC,iBAAiB,CACb,IAAI,EAAC,MAAM,EACX,SAAS,EAAC,MAAM,GAAC,IAAI,EACrB,QAAQ,EAAC,MAAM,GAAC,IAAI;IAsBxB,eAAe,CAAE,SAAS,EAAC,MAAM,GAAC,IAAI,EAAE,QAAQ,EAAC,MAAM,GAAC,IAAI;IAqB5D,2BAA2B,CAAE,IAAI,EAAC,MAAM,EAAE,QAAQ,EAAC,MAAM,GAAC,IAAI;IAYxD,wBAAwB,CAC1B,IAAI,EAAC,MAAM,EACX,QAAQ,EAAC,MAAM,EACf,QAAQ,EAAC,MAAM;IAsBnB,iBAAiB;IAIjB,mBAAmB;IAInB,IAAI,KAAK,CAAE,KAAK,EAAC,MAAM,GAAC,IAAI,EAM3B;IAED,IAAI,KAAK,IAAI,MAAM,GAAC,IAAI,CAEvB;IAED,MAAM;CAsET"}

package/dist/index.js

@@ -1,168 +1,152 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-class Input extends HTMLElement {
+import { WebComponent } from "@substrate-system/web-component";
+import { define } from "@substrate-system/web-component/util";
+import { ARIA_ATTRIBUTES, INPUT_ATTRIBUTES } from "./util";
+class SubstrateInput extends WebComponent.create("substrate-input") {
   static {
-    __name(this, "Input");
-  }
-  // for `attributeChangedCallback`
-  static observedAttributes = ["autofocus", "disabled"];
-  static TAG;
-  static define() {
-    if (!("customElements" in window)) return;
-    if (customElements.get(this.TAG)) return;
-    return customElements.define(this.TAG, this);
-  }
-  constructor() {
-    super();
-    const disabled = this.getAttribute("disabled");
-    if (disabled !== null) {
-      setTimeout(() => {
-        this.disabled = true;
-      }, 0);
-    }
-    setTimeout(() => {
-      const attr = this.getAttribute("value");
-      if (attr) this.value = attr;
-      const type = this.getAttribute("type");
-      if (type) this.type = type;
-    }, 0);
-  }
-  get input() {
-    return this.querySelector("input");
-  }
-  get tabindex() {
-    const i = this.input?.getAttribute("tabindex");
-    if (!i) return 0;
-    return parseInt(i);
-  }
-  get name() {
-    return this.getAttribute("name");
-  }
-  get placeholder() {
-    return this.getAttribute("placeholder");
-  }
-  get autocomplete() {
-    return this.getAttribute("autocomplete");
-  }
-  set name(newName) {
-    this.setAttribute("name", newName);
-  }
-  /**
-   * Remove from `this` element and also child.
-   */
-  _removeAttribute(name) {
-    this.removeAttribute(name);
-    this.input?.removeAttribute(name);
+    __name(this, "SubstrateInput");
+  }
+  static TAG = "substrate-input";
+  static INPUT_ATTRIBUTES = INPUT_ATTRIBUTES;
+  static ARIA_ATTRIBUTES = ARIA_ATTRIBUTES;
+  static observedAttributes = ["label", "id"].concat(SubstrateInput.INPUT_ATTRIBUTES).concat(SubstrateInput.ARIA_ATTRIBUTES);
+  inputId = null;
+  inputAriaAttributes = {};
+  ignoredAriaCallbackNames = /* @__PURE__ */ new Set();
+  ignoredIdCallback = false;
+  generatedInputId = `substrate-input-${Math.random().toString(36).slice(2, 10)}`;
+  handleChange_label(_oldValue, _newValue) {
+    this.render();
   }
-  get disabled() {
-    return !!this.input?.hasAttribute("disabled");
+  handleChange_aria(name, _oldValue, newValue) {
+    if (this.ignoredAriaCallbackNames.has(name)) {
+      this.ignoredAriaCallbackNames.delete(name);
+      return;
+    }
+    if (newValue === null) {
+      delete this.inputAriaAttributes[name];
+      this.querySelector("input")?.removeAttribute(name);
+      return;
+    }
+    this.inputAriaAttributes[name] = newValue;
+    this.querySelector("input")?.setAttribute(name, newValue);
+    if (this.hasAttribute(name)) {
+      this.ignoredAriaCallbackNames.add(name);
+      this.removeAttribute(name);
+    }
   }
-  set disabled(disabledValue) {
-    if (!disabledValue) {
-      this._removeAttribute("disabled");
-      this.input?.setAttribute("aria-disabled", "false");
-    } else {
-      this.input?.setAttribute("disabled", "");
-      this.input?.setAttribute("aria-disabled", "true");
+  handleChange_id(_oldValue, newValue) {
+    if (this.ignoredIdCallback) {
+      this.ignoredIdCallback = false;
+      return;
+    }
+    if (newValue === null) {
+      this.inputId = null;
+      this.querySelector("input")?.removeAttribute("id");
+      return;
+    }
+    this.inputId = newValue;
+    this.querySelector("input")?.setAttribute("id", newValue);
+    if (this.hasAttribute("id")) {
+      this.ignoredIdCallback = true;
+      this.removeAttribute("id");
     }
   }
-  /**
-   * Handle 'example' 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|null} _oldValue The old attribute value
-   * @param  {string|null} newValue The new attribute value
-   */
-  handleChange_disabled(_oldValue, newValue) {
-    if (!this.input) {
-      setTimeout(() => {
-        if (newValue === null || newValue === "null") {
-          this.disabled = false;
-        } else {
-          this.disabled = true;
-        }
-      }, 0);
-    } else {
-      if (newValue === null || newValue === "null") {
-        this.disabled = false;
-      } else {
-        this.disabled = true;
-      }
+  handleChange_inputAttribute(name, newValue) {
+    const input = this.querySelector("input");
+    if (!input) return;
+    if (newValue === null) {
+      input.removeAttribute(name);
+      return;
     }
+    input.setAttribute(name, newValue);
   }
-  /**
-   * Runs when the value of an attribute is changed
-   *
-   * @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);
-    this.render();
+  async attributeChangedCallback(name, oldValue, newValue) {
+    if (name === "id") {
+      this.handleChange_id(oldValue, newValue);
+      return;
+    }
+    if (name.startsWith("aria-")) {
+      this.handleChange_aria(name, oldValue, newValue);
+      return;
+    }
+    if (SubstrateInput.INPUT_ATTRIBUTES.includes(name)) {
+      this.handleChange_inputAttribute(name, newValue);
+      return;
+    }
+    if (this[`handleChange_${name}`]) {
+      this[`handleChange_${name}`](oldValue, newValue);
+    }
   }
   connectedCallback() {
     this.render();
   }
-  get type() {
-    return this.input?.getAttribute("type");
+  getInputIdForRender() {
+    return this.inputId || this.generatedInputId;
   }
-  set type(value) {
-    this._setAttribute("type", value);
+  set label(value) {
+    if (value === null) {
+      this.removeAttribute("label");
+      return;
+    }
+    this.setAttribute("label", value);
   }
-  get value() {
-    return this.input?.value;
+  get label() {
+    return this.getAttribute("label");
   }
-  set value(text) {
-    if (!text) this.input?.removeAttribute("value");
-    else {
-      this.input.value = text;
+  render() {
+    const label = this.getAttribute("label");
+    const hostId = this.getAttribute("id");
+    const hostAriaAttributes = Array.from(this.attributes).filter((attr) => attr.name.startsWith("aria-"));
+    if (hostId !== null) {
+      this.inputId = hostId;
     }
-  }
-  /**
-   * Set attributes on the internal input element.
-   */
-  _setAttribute(name, value) {
-    if (!value) {
-      return this._removeAttribute(name);
+    for (const attr of hostAriaAttributes) {
+      this.inputAriaAttributes[attr.name] = attr.value;
     }
-    if (value === true) {
-      return this.input?.setAttribute(name, "");
+    const name = this.getAttribute("name");
+    const attrs = Array.from(this.attributes).filter(
+      (attr) => attr.name !== "label" && attr.name !== "id" && !attr.name.startsWith("aria-")
+    ).map(
+      (attr) => attr.name + (attr.value === "" ? "" : `="${attr.value}"`)
+    ).join(" ");
+    const classes = (this.getAttribute("class") ?? "").split(" ").concat(["substrate", "input", name || ""]).filter(Boolean).join(" ");
+    const inputId = this.getInputIdForRender();
+    const renderedIdAttribute = `id="${inputId}"`;
+    const ariaAttributes = Object.entries(this.inputAriaAttributes).map(([attrName, attrValue]) => {
+      return attrName + (attrValue === "" ? "" : `="${attrValue}"`);
+    }).join(" ");
+    this.innerHTML = label ? `
+            <div class="${classes}">
+            <label class="label-content" for="${inputId}">${label}</label>
+            <input
+            ${renderedIdAttribute}
+            ${ariaAttributes}
+            ${attrs}
+            />
+            </div>
+        ` : `
+            <div class="${classes}">
+            <input
+            ${renderedIdAttribute}
+            ${ariaAttributes}
+            ${attrs}
+            />
+            </div>
+        `;
+    if (this.hasAttribute("id")) {
+      this.ignoredIdCallback = true;
+      this.removeAttribute("id");
+    }
+    for (const attr of hostAriaAttributes) {
+      this.ignoredAriaCallbackNames.add(attr.name);
+      this.removeAttribute(attr.name);
     }
-    this.input?.setAttribute(name, value);
-  }
-  render() {
-    const {
-      type,
-      autofocus,
-      tabindex,
-      disabled,
-      value,
-      name,
-      placeholder,
-      autocomplete
-    } = this;
-    if (!name) throw new Error("not name");
-    const classes = ["substrate-input"];
-    const btn = !!(this.type === "submit" || this.type === "button");
-    const props = [
-      `class="${classes.filter(Boolean).join(" ")}"`,
-      disabled ? "disabled" : "",
-      disabled ? 'aria-disabled="true"' : 'aria-disabled="false"',
-      autofocus ? "autofocus" : "",
-      type ? `type="${this.type}"` : "",
-      tabindex ? `tabindex="${tabindex}"` : 'tabindex="0"',
-      btn ? 'role="button"' : "",
-      value ? `value="${value}"` : "",
-      name ? `name="${name}"` : "",
-      autocomplete ? `autocomplete="${autocomplete}"` : "",
-      placeholder ? `placeholder="${placeholder}"` : ""
-    ].filter(Boolean).join(" ");
-    return `<input ${props} />`;
   }
 }
+define(SubstrateInput.TAG, SubstrateInput);
 export {
-  Input
+  SubstrateInput
 };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/index.ts"],
-  "sourcesContent": ["// import Debug from '@substrate-system/debug'\n// const debug = Debug()\n\nexport abstract class Input extends HTMLElement {\n    // for `attributeChangedCallback`\n    static observedAttributes = ['autofocus', 'disabled']\n    static TAG:string\n\n    static define (this:((new (...args:any[]) => Input) & typeof Input)) {\n        if (!('customElements' in window)) return\n        if (customElements.get(this.TAG)) return  // only define it once\n\n        return customElements.define(this.TAG, this)\n    }\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\n        // timeout b/c we need to render first\n        setTimeout(() => {\n            const attr = this.getAttribute('value')\n            if (attr) this.value = attr\n\n            const type = this.getAttribute('type')\n            if (type) this.type = type\n        }, 0)\n    }\n\n    get input ():HTMLInputElement|null {\n        return this.querySelector('input')\n    }\n\n    get tabindex ():number {\n        const i = this.input?.getAttribute('tabindex')\n        if (!i) return 0\n        return parseInt(i)\n    }\n\n    get name ():string|undefined|null {\n        return this.getAttribute('name')\n    }\n\n    get placeholder ():string|null {\n        return this.getAttribute('placeholder')\n    }\n\n    get autocomplete ():string|null {\n        return this.getAttribute('autocomplete')\n    }\n\n    set name (newName:string) {\n        this.setAttribute('name', newName)\n    }\n\n    /**\n     * Remove from `this` element and also child.\n     */\n    _removeAttribute (name:string) {\n        this.removeAttribute(name)\n        this.input?.removeAttribute(name)\n    }\n\n    get disabled ():boolean {\n        return !!(this.input?.hasAttribute('disabled'))\n    }\n\n    set disabled (disabledValue:boolean) {\n        if (!disabledValue) {\n            this._removeAttribute('disabled')\n            this.input?.setAttribute('aria-disabled', 'false')\n        } else {\n            this.input?.setAttribute('disabled', '')\n            this.input?.setAttribute('aria-disabled', 'true')\n        }\n    }\n\n    /**\n     * Handle 'example' 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|null} _oldValue The old attribute value\n     * @param  {string|null} newValue The new attribute value\n     */\n    handleChange_disabled (_oldValue:string, newValue:string) {\n        if (!this.input) {\n            setTimeout(() => {\n                if (newValue === null || newValue === 'null') {\n                    this.disabled = false\n                } else {\n                    this.disabled = true\n                }\n            }, 0)  // wait to render\n        } else {\n            if (newValue === null || newValue === 'null') {\n                this.disabled = false\n            } else {\n                this.disabled = true\n            }\n        }\n    }\n\n    /**\n     * Runs when the value of an attribute is changed\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        this.render()\n    }\n\n    connectedCallback () {\n        this.render()\n    }\n\n    get type ():string|null|undefined {\n        return this.input?.getAttribute('type')\n    }\n\n    set type (value:string) {\n        this._setAttribute('type', value)\n    }\n\n    get value () {\n        return this.input?.value\n    }\n\n    set value (text:string|undefined|null) {\n        if (!text) this.input?.removeAttribute('value')\n        else {\n            this.input!.value = text\n        }\n    }\n\n    /**\n     * Set attributes on the internal input element.\n     */\n    _setAttribute (name:string, value:boolean|string|null):void {\n        if (!value) {\n            return this._removeAttribute(name)\n        }\n\n        if (value === true) {\n            // true means set the attribute with no value\n            return this.input?.setAttribute(name, '')\n        }\n\n        // else, set the value\n        this.input?.setAttribute(name, value)\n    }\n\n    render ():string|void {  // void for child class\n        const {\n            type,\n            autofocus,\n            tabindex,\n            disabled,\n            value,\n            name,\n            placeholder,\n            autocomplete\n        } = this\n\n        if (!name) throw new Error('not name')\n\n        const classes:string[] = ['substrate-input']\n\n        const btn = !!(this.type === 'submit' || this.type === 'button')\n\n        const props = ([\n            `class=\"${classes.filter(Boolean).join(' ')}\"`,\n            disabled ? 'disabled' : '',\n            disabled ? 'aria-disabled=\"true\"' : 'aria-disabled=\"false\"',\n            autofocus ? 'autofocus' : '',\n            type ? `type=\"${this.type}\"` : '',\n            tabindex ? `tabindex=\"${tabindex}\"` : 'tabindex=\"0\"',\n            btn ? 'role=\"button\"' : '',\n            value ? `value=\"${value}\"` : '',\n            name ? `name=\"${name}\"` : '',\n            autocomplete ? `autocomplete=\"${autocomplete}\"` : '',\n            placeholder ? `placeholder=\"${placeholder}\"` : ''\n        ]).filter(Boolean).join(' ')\n\n        return `<input ${props} />`\n    }\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { WebComponent } from '@substrate-system/web-component'\nimport { define } from '@substrate-system/web-component/util'\nimport { ARIA_ATTRIBUTES, INPUT_ATTRIBUTES } from './util'\n\n// for document.querySelector\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'substrate-input': SubstrateInput\n    }\n}\n\nexport class SubstrateInput extends WebComponent.create('substrate-input') {\n    static TAG = 'substrate-input'\n    static INPUT_ATTRIBUTES = INPUT_ATTRIBUTES\n    static ARIA_ATTRIBUTES = ARIA_ATTRIBUTES\n\n    static observedAttributes = (['label', 'id'])\n        .concat(SubstrateInput.INPUT_ATTRIBUTES)\n        .concat(SubstrateInput.ARIA_ATTRIBUTES)\n\n    inputId:string|null = null\n    inputAriaAttributes:Record<string, string> = {}\n    ignoredAriaCallbackNames:Set<string> = new Set()\n    ignoredIdCallback = false\n    generatedInputId = `substrate-input-${Math.random().toString(36).slice(2, 10)}`\n\n    handleChange_label (_oldValue, _newValue) {\n        this.render()\n    }\n\n    handleChange_aria (\n        name:string,\n        _oldValue:string|null,\n        newValue:string|null\n    ) {\n        if (this.ignoredAriaCallbackNames.has(name)) {\n            this.ignoredAriaCallbackNames.delete(name)\n            return\n        }\n\n        if (newValue === null) {\n            delete this.inputAriaAttributes[name]\n            this.querySelector('input')?.removeAttribute(name)\n            return\n        }\n\n        this.inputAriaAttributes[name] = newValue\n        this.querySelector('input')?.setAttribute(name, newValue)\n\n        if (this.hasAttribute(name)) {\n            this.ignoredAriaCallbackNames.add(name)\n            this.removeAttribute(name)\n        }\n    }\n\n    handleChange_id (_oldValue:string|null, newValue:string|null) {\n        if (this.ignoredIdCallback) {\n            this.ignoredIdCallback = false\n            return\n        }\n\n        if (newValue === null) {\n            this.inputId = null\n            this.querySelector('input')?.removeAttribute('id')\n            return\n        }\n\n        this.inputId = newValue\n        this.querySelector('input')?.setAttribute('id', newValue)\n\n        if (this.hasAttribute('id')) {\n            this.ignoredIdCallback = true\n            this.removeAttribute('id')\n        }\n    }\n\n    handleChange_inputAttribute (name:string, newValue:string|null) {\n        const input = this.querySelector('input')\n        if (!input) return\n\n        if (newValue === null) {\n            input.removeAttribute(name)\n            return\n        }\n\n        input.setAttribute(name, newValue)\n    }\n\n    async attributeChangedCallback (\n        name:string,\n        oldValue:string,\n        newValue:string\n    ) {\n        if (name === 'id') {\n            this.handleChange_id(oldValue, newValue)\n            return\n        }\n\n        if (name.startsWith('aria-')) {\n            this.handleChange_aria(name, oldValue, newValue)\n            return\n        }\n\n        if (SubstrateInput.INPUT_ATTRIBUTES.includes(name)) {\n            this.handleChange_inputAttribute(name, newValue)\n            return\n        }\n\n        if (this[`handleChange_${name}`]) {\n            this[`handleChange_${name}`](oldValue, newValue)\n        }\n    }\n\n    connectedCallback () {\n        this.render()\n    }\n\n    getInputIdForRender () {\n        return this.inputId || this.generatedInputId\n    }\n\n    set label (value:string|null) {\n        if (value === null) {\n            this.removeAttribute('label')\n            return\n        }\n        this.setAttribute('label', value)\n    }\n\n    get label ():string|null {\n        return this.getAttribute('label')\n    }\n\n    render () {\n        const label = this.getAttribute('label')\n        const hostId = this.getAttribute('id')\n        const hostAriaAttributes = Array.from(this.attributes)\n            .filter(attr => attr.name.startsWith('aria-'))\n\n        if (hostId !== null) {\n            this.inputId = hostId\n        }\n\n        for (const attr of hostAriaAttributes) {\n            this.inputAriaAttributes[attr.name] = attr.value\n        }\n\n        const name = this.getAttribute('name')\n        const attrs = Array.from(this.attributes)\n            .filter(attr =>\n                attr.name !== 'label' &&\n                attr.name !== 'id' &&\n                !attr.name.startsWith('aria-')\n            )\n            .map(attr => attr.name + (attr.value === '' ?\n                '' :\n                ('=' + `\"${attr.value}\"`))\n            )\n            .join(' ')\n\n        const classes = (this.getAttribute('class') ?? '').split(' ')\n            .concat(['substrate', 'input', name || ''])\n            .filter(Boolean)\n            .join(' ')\n\n        const inputId = this.getInputIdForRender()\n        const renderedIdAttribute = `id=\"${inputId}\"`\n        const ariaAttributes = Object.entries(this.inputAriaAttributes)\n            .map(([attrName, attrValue]) => {\n                return (attrName + (attrValue === '' ?\n                    '' :\n                    ('=' + `\"${attrValue}\"`)))\n            })\n            .join(' ')\n\n        this.innerHTML = label ? `\n            <div class=\"${classes}\">\n            <label class=\"label-content\" for=\"${inputId}\">${label}</label>\n            <input\n            ${renderedIdAttribute}\n            ${ariaAttributes}\n            ${attrs}\n            />\n            </div>\n        ` : `\n            <div class=\"${classes}\">\n            <input\n            ${renderedIdAttribute}\n            ${ariaAttributes}\n            ${attrs}\n            />\n            </div>\n        `\n\n        if (this.hasAttribute('id')) {\n            this.ignoredIdCallback = true\n            this.removeAttribute('id')\n        }\n        for (const attr of hostAriaAttributes) {\n            this.ignoredAriaCallbackNames.add(attr.name)\n            this.removeAttribute(attr.name)\n        }\n    }\n}\n\ndefine(SubstrateInput.TAG, SubstrateInput)\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/index.min.css

@@ -1,2 +1 @@
-input{font-family:Gill Sans,Gill Sans MT,Calibri,Trebuchet MS,sans-serif}
-/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNyYy9pbmRleC5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsTUFDSSxrRUFDSiIsImZpbGUiOiJzcmMvaW5kZXguY3NzIiwic291cmNlc0NvbnRlbnQiOlsiaW5wdXQge1xuICAgIGZvbnQtZmFtaWx5OiAnR2lsbCBTYW5zJywgJ0dpbGwgU2FucyBNVCcsIENhbGlicmksICdUcmVidWNoZXQgTVMnLCBzYW5zLXNlcmlmO1xufVxuIl19 */
+substrate-input{display:block;& .substrate.input{flex-wrap:wrap;align-items:center;min-width:100%;display:flex;& .label-content{width:100%}& input{border:1px solid;border-radius:0;outline:1px solid #0000;width:100%;padding:1rem 1rem .8rem;transition:all .2s;&:focus{outline:1px solid}}}}substrate-input:not(:defined){visibility:hidden}