@felleslosninger/minid-elements 0.0.110 → 0.0.111

package/dist/components/code-input-2.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"code-input-2.js","sources":["../../src/components/code-input-2.component.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { customElement, property, queryAll } from 'lit/decorators.js';\nimport { styled } from '../mixins/tailwind.mixin';\n\nconst styles = [css``];\n\n@customElement('mid-code-input-2')\nexport class MinidCodeInput2 extends styled(LitElement, styles) {\n  private values = Array<string>();\n\n  @queryAll('input')\n  inputElements!: NodeList;\n\n  @property()\n  value = '';\n\n  @property({ type: Number })\n  length = 5;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.values = new Array(this.length).fill('');\n  }\n\n  // el.addEventListener('input', (evt) => this.onInput(evt, index));\n  // el.addEventListener('paste', (evt) => this.onPaste(evt));\n  // el.addEventListener('keydown', (evt) => this.onKeydown(evt, index));\n  // el.addEventListener('focusin', () => this.onFocusIn(index));\n  // el.addEventListener('focusout', () => this.onFocusOut(index));\n\n  handleKeydown(index: number) {\n    return (event: KeyboardEvent) => {\n      console.log(index, event);\n      this.values[index] = (event.target as HTMLInputElement).value;\n      this.value = this.values.join('');\n      console.log(this.values, this.value);\n      console.log(this.inputElements);\n\n      // if (event.key === 'Backspace' && index > 0) {\n      //   if ((this.items[index] as HTMLInputElement).value === '') {\n      //     (this.items[index - 1] as HTMLInputElement).value = '';\n      //     (this.items[index - 1] as HTMLInputElement).focus();\n      //   } else {\n      //     (this.items[index] as HTMLInputElement).value = '';\n      //   }\n      // }\n      // this.setCurrentValue();\n      // this.toggleCompleted();\n    };\n  }\n\n  handleInput(index: number) {\n    return (event: InputEvent) => {\n      console.log(index, event);\n    };\n  }\n\n  private input(index: number) {\n    return html`\n      <input\n        id=${'code-input-' + index}\n        class=\"bg-neutral-subtle\"\n        min=\"0\"\n        max=\"9\"\n        size=\"1\"\n        maxlength=\"1\"\n        @keydown=${this.handleKeydown(index)}\n        @input=${this.handleInput(index)}\n      />\n    `;\n  }\n\n  override render() {\n    const fields = [];\n    for (let index = 0; index < this.length; index++) {\n      fields.push(this.input(index));\n    }\n    return html` <div class=\"flex\">${fields}</div> `;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;AAIA,MAAM,SAAS,CAAC,KAAK;AAGd,IAAM,kBAAN,cAA8B,OAAO,YAAY,MAAM,EAAE;AAAA,EAAzD,cAAA;AAAA,UAAA,GAAA,SAAA;AACL,SAAQ,SAAS,MAAc;AAMvB,SAAA,QAAA;AAGC,SAAA,SAAA;AAAA,EAAA;AAAA,EAET,oBAA0B;AACxB,UAAM,kBAAkB;AACxB,SAAK,SAAS,IAAI,MAAM,KAAK,MAAM,EAAE,KAAK,EAAE;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAS9C,cAAc,OAAe;AAC3B,WAAO,CAAC,UAAyB;AACvB,cAAA,IAAI,OAAO,KAAK;AACxB,WAAK,OAAO,KAAK,IAAK,MAAM,OAA4B;AACxD,WAAK,QAAQ,KAAK,OAAO,KAAK,EAAE;AAChC,cAAQ,IAAI,KAAK,QAAQ,KAAK,KAAK;AAC3B,cAAA,IAAI,KAAK,aAAa;AAAA,IAYhC;AAAA,EAAA;AAAA,EAGF,YAAY,OAAe;AACzB,WAAO,CAAC,UAAsB;AACpB,cAAA,IAAI,OAAO,KAAK;AAAA,IAC1B;AAAA,EAAA;AAAA,EAGM,MAAM,OAAe;AACpB,WAAA;AAAA;AAAA,aAEE,gBAAgB,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAMf,KAAK,cAAc,KAAK,CAAC;AAAA,iBAC3B,KAAK,YAAY,KAAK,CAAC;AAAA;AAAA;AAAA,EAAA;AAAA,EAK7B,SAAS;AAChB,UAAM,SAAS,CAAC;AAChB,aAAS,QAAQ,GAAG,QAAQ,KAAK,QAAQ,SAAS;AAChD,aAAO,KAAK,KAAK,MAAM,KAAK,CAAC;AAAA,IAAA;AAE/B,WAAO,0BAA0B,MAAM;AAAA,EAAA;AAE3C;AApEE,gBAAA;AAAA,EADC,SAAS,OAAO;AAAA,GAHN,gBAIX,WAAA,iBAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS;AAAA,GANC,gBAOX,WAAA,SAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GATf,gBAUX,WAAA,UAAA,CAAA;AAVW,kBAAN,gBAAA;AAAA,EADN,cAAc,kBAAkB;AAAA,GACpB,eAAA;"}