chore(input): improve type-safety (#954)

improves type safety for * input * icon
Trendyol · Nov 4, 2024 · 460ae3a · 460ae3a
1 parent aacd375
commit 460ae3a
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 5 deletions.
diff --git a/src/components/icon/bl-icon.ts b/src/components/icon/bl-icon.ts
@@ -12,6 +12,7 @@ const requestMap = new Map<string, Promise<Response>>();
  * @tag bl-icon
  * @summary Baklava Icon component
  *
+ * @attr [name] Name of the icon to show
  * @cssproperty [font-size] Setting size of icon. Default is current font size in DOM place
  * @cssproperty [color=currentColor] Setting color of icon
  */
@@ -26,7 +27,7 @@ export default class BlIcon extends LitElement {
   /**
    * Name of the icon to show
    */
-  @property()
+  @property({ type: String, reflect: true })
   get name(): BaklavaIcon {
     return this._iconName;
   }

diff --git a/src/components/input/bl-input.test.ts b/src/components/input/bl-input.test.ts
@@ -19,6 +19,7 @@ describe("bl-input", () => {
           <legend><span></span></legend>
           <input
             aria-invalid="false"
+            autocomplete="on"
             id="input"
             type="text"
           >
@@ -46,7 +47,7 @@ describe("bl-input", () => {
   });
 
   it('should call showPicker if "showPicker" is in HTMLInputElement.prototype', async () => {
-    const el = await fixture<BlInput>(html`<bl-input type="input"></bl-input>`);
+    const el = await fixture<BlInput>(html`<bl-input type="text"></bl-input>`);
     const spy = stub(el.validationTarget, "showPicker");
 
     el.showPicker();

diff --git a/src/components/input/bl-input.ts b/src/components/input/bl-input.ts
@@ -138,13 +138,13 @@ export default class BlInput extends FormControlMixin(LitElement) {
    * Hints browser to autocomplete this field.
    */
   @property({ type: String, reflect: true })
-  autocomplete: string;
+  autocomplete: HTMLInputElement["autocomplete"] = "on";
 
   /**
    * Sets the input mode of the field for asking browser to show the desired keyboard.
    */
   @property({ type: String, reflect: true })
-  inputmode: "none" | "text" | "decimal" | "numeric" | "tel" | "search" | "email" | "url";
+  inputmode: HTMLInputElement["inputMode"];
 
   /**
    * Sets input to get keyboard focus automatically
@@ -385,7 +385,7 @@ export default class BlInput extends FormControlMixin(LitElement) {
           .value=${live(this.value)}
           inputmode="${ifDefined(this.inputmode)}"
           ?autofocus=${this.autofocus}
-          autocomplete="${ifDefined(this.autocomplete)}"
+          .autocomplete="${this.autocomplete}"
           placeholder="${ifDefined(this.placeholder)}"
           minlength="${ifDefined(this.minlength)}"
           maxlength="${ifDefined(this.maxlength)}"