From 24e257e25b252504d55a817fd3a566636e0e722d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Enes=20Y=C4=B1ld=C4=B1r=C4=B1m?=
 <enes.yildirim@trendyol.com>
Date: Mon, 5 Jun 2023 16:54:17 +0300
Subject: [PATCH 1/2] feat(input): add readonly attribute

---
 src/components/input/bl-input.ts | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/input/bl-input.ts b/src/components/input/bl-input.ts
index 284e18f9..b4c8239e 100644
--- a/src/components/input/bl-input.ts
+++ b/src/components/input/bl-input.ts
@@ -23,7 +23,7 @@ export default class BlInput extends FormControlMixin(LitElement) {
   static get styles(): CSSResultGroup {
     return [style];
   }
-  static shadowRootOptions = {...LitElement.shadowRootOptions, delegatesFocus: true};
+  static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };
 
   static formControlValidators = innerInputValidators;
 
@@ -138,6 +138,12 @@ export default class BlInput extends FormControlMixin(LitElement) {
   @property({ type: Boolean, reflect: true })
   disabled = false;
 
+  /**
+   * Makes the input readonly.
+   */
+  @property({ type: Boolean, reflect: true })
+  readonly = false;
+
   /**
    * Makes label as fixed positioned
    */
@@ -335,6 +341,7 @@ export default class BlInput extends FormControlMixin(LitElement) {
           step="${ifDefined(this.step)}"
           ?required=${this.required}
           ?disabled=${this.disabled}
+          ?readonly=${this.readonly}
           @change=${this.changeHandler}
           @input=${this.inputHandler}
           aria-invalid=${this.checkValidity() ? 'false' : 'true'}

From 7ffd7c47ada5acf32aa4e952d598dc878f9b811d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Enes=20Y=C4=B1ld=C4=B1r=C4=B1m?=
 <enes.yildirim@trendyol.com>
Date: Wed, 7 Jun 2023 14:17:15 +0300
Subject: [PATCH 2/2] docs(input): add readonly parameter to storybook

---
 src/components/input/bl-input.stories.mdx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/input/bl-input.stories.mdx b/src/components/input/bl-input.stories.mdx
index 54f8fd9e..afa8dcbd 100644
--- a/src/components/input/bl-input.stories.mdx
+++ b/src/components/input/bl-input.stories.mdx
@@ -71,6 +71,9 @@ import { extraPadding } from '../../utilities/chromatic-decorators';
     disabled: {
       control: 'boolean',
     },
+    readonly: {
+      control: 'boolean',
+    },
     labelFixed: {
       control: 'boolean',
     },
@@ -90,6 +93,7 @@ export const SingleInputTemplate = (args) => html`<bl-input
     value='${ifDefined(args.value)}'
     ?required='${args.required}'
     ?disabled='${args.disabled}'
+    ?readonly='${args.readonly}'
     ?label-fixed='${args.labelFixed}'
     invalid-text='${ifDefined(args.customInvalidText)}'
     help-text='${ifDefined(args.helpText)}'