feat(input): add types

.changeset/serious-sheep-drum.md

@@ -0,0 +1,5 @@
+---
+'@lion/form-core': patch
+---
+
+Added index definition file to git, to allow for importing LionField module definition. Adjust some types now that LionInput will be typed

.changeset/witty-adults-sip.md

@@ -0,0 +1,5 @@
+---
+'@lion/input': minor
+---
+
+Add types for LionInput component, including applying them in the tests.

packages/input/index.d.ts

@@ -0,0 +1 @@
+export { LionInput } from './src/LionInput.js';

packages/input/src/LionInput.js

@@ -6,6 +6,7 @@ import { LionField } from '@lion/form-core';
  * @customElement lion-input
  * @extends {LionField}
  */
+// @ts-expect-error false positive for incompatible static get properties. Lit-element merges super properties already for you.
 export class LionInput extends LionField {
   static get properties() {
     return {
@@ -39,8 +40,9 @@ export class LionInput extends LionField {
       input: () => {
         // TODO: Find a better way to do value delegation via attr
         const native = document.createElement('input');
-        if (this.hasAttribute('value')) {
+        const value = this.getAttribute('value');
-          native.setAttribute('value', this.getAttribute('value'));
+        if (value) {
+          native.setAttribute('value', value);
         }
         return native;
       },
@@ -51,8 +53,13 @@ export class LionInput extends LionField {
     super();
     this.readOnly = false;
     this.type = 'text';
+    this.placeholder = '';
   }
 
+  /**
+   * @param {PropertyKey} name
+   * @param {?} oldValue
+   */
   requestUpdateInternal(name, oldValue) {
     super.requestUpdateInternal(name, oldValue);
     if (name === 'readOnly') {
@@ -60,11 +67,13 @@ export class LionInput extends LionField {
     }
   }
 
+  /** @param {import('lit-element').PropertyValues } changedProperties */
   firstUpdated(changedProperties) {
     super.firstUpdated(changedProperties);
     this.__delegateReadOnly();
   }
 
+  /** @param {import('lit-element').PropertyValues } changedProperties */
   updated(changedProperties) {
     super.updated(changedProperties);
     if (changedProperties.has('type')) {

packages/input/test/lion-input-integrations.test.js

@@ -7,7 +7,6 @@ const tagString = 'lion-input';
 describe('<lion-input> integrations', () => {
   runInteractionStateMixinSuite({
     tagString,
-    suffix: 'lion-input',
   });
 
   runFormatMixinSuite({

packages/input/test/lion-input.test.js

@@ -2,12 +2,16 @@ import { expect, fixture, html, unsafeStatic } from '@open-wc/testing';
 
 import '../lion-input.js';
 
+/**
+ * @typedef {import('../src/LionInput').LionInput} LionInput
+ */
+
 const tagString = 'lion-input';
 const tag = unsafeStatic(tagString);
 
 describe('<lion-input>', () => {
   it('delegates readOnly property and readonly attribute', async () => {
-    const el = await fixture(html`<${tag} readonly></${tag}>`);
+    const el = /** @type {LionInput} */ (await fixture(html`<${tag} readonly></${tag}>`));
     expect(el._inputNode.readOnly).to.equal(true);
     el.readOnly = false;
     await el.updateComplete;
@@ -16,19 +20,19 @@ describe('<lion-input>', () => {
   });
 
   it('delegates value attribute', async () => {
-    const el = await fixture(html`<${tag} value="prefilled"></${tag}>`);
+    const el = /** @type {LionInput} */ (await fixture(html`<${tag} value="prefilled"></${tag}>`));
     expect(el._inputNode.getAttribute('value')).to.equal('prefilled');
   });
 
   it('automatically creates an <input> element if not provided by user', async () => {
-    const el = await fixture(html`
+    const el = /** @type {LionInput} */ (await fixture(html`
       <${tag}></${tag}>
-    `);
+    `));
     expect(el.querySelector('input')).to.equal(el._inputNode);
   });
 
   it('has a type which is reflected to an attribute and is synced down to the native input', async () => {
-    const el = await fixture(html`<${tag}></${tag}>`);
+    const el = /** @type {LionInput} */ (await fixture(html`<${tag}></${tag}>`));
     expect(el.type).to.equal('text');
     expect(el.getAttribute('type')).to.equal('text');
     expect(el._inputNode.getAttribute('type')).to.equal('text');
@@ -40,7 +44,7 @@ describe('<lion-input>', () => {
   });
 
   it('has an attribute that can be used to set the placeholder text of the input', async () => {
-    const el = await fixture(html`<${tag} placeholder="text"></${tag}>`);
+    const el = /** @type {LionInput} */ (await fixture(html`<${tag} placeholder="text"></${tag}>`));
     expect(el.getAttribute('placeholder')).to.equal('text');
     expect(el._inputNode.getAttribute('placeholder')).to.equal('text');
 

tsconfig.json

@@ -23,7 +23,8 @@
     "packages/overlays/**/*.js",
     "packages/tooltip/**/*.js",
     "packages/button/src/**/*.js",
-    "packages/listbox/src/*.js"
+    "packages/listbox/src/*.js",
+    "packages/input/**/*.js"
   ],
   "exclude": [
     "node_modules",