From edfac3782fe56bbb004f760c76a8c7f13c06d139 Mon Sep 17 00:00:00 2001
From: MattMo <matt@montoyatech.com>
Date: Wed, 14 Dec 2022 07:33:04 -0800
Subject: [PATCH] Added readonly extension for input elements.

---
 ignite-template.js | 35 ++++++++++++++++++++++++++++++++++-
 1 file changed, 34 insertions(+), 1 deletion(-)

diff --git a/ignite-template.js b/ignite-template.js
index f7f8278..1b72a6d 100644
--- a/ignite-template.js
+++ b/ignite-template.js
@@ -913,7 +913,7 @@ class IgniteTemplate {
 
     /**
      * Adds a disabled attribute and class to this template.
-     * @param {Boolean|IgniteProperty} value A value to determine whether or not the element should be marked as disable dor not. 
+     * @param {Boolean|IgniteProperty} value A value to determine whether or not the element should be marked as disable or not. 
      * @param {*} converter Optional function that can convert the value if needed.
      * @returns {IgniteTemplate} This ignite template so function calls can be chained.
      */
@@ -944,6 +944,39 @@ class IgniteTemplate {
         return this;
     }
 
+    /**
+     * Adds a readonly attribute and class to this template.
+     * @param {Boolean|IgniteProperty} value A value to determine whether or not the element should be marked as readonly or not. 
+     * @param {*} converter Optional function that can convert the value if needed.
+     * @returns {IgniteTemplate} This ignite template so function calls can be chained.
+     */
+    readonly(value, converter = null) {
+        if (value instanceof IgniteProperty) {
+            this.attribute("readonly", value, convert => {
+                convert = (converter != null ? converter(convert) : convert);
+                if (convert) {
+                    return "readonly";
+                } else {
+                    return null;
+                }
+            });
+
+            this.class(value, convert => {
+                convert = (converter != null ? converter(convert) : convert);
+                if (convert) {
+                    return "readonly";
+                } else {
+                    return null;
+                }
+            });
+        } else if (value) {
+            this.attribute("readonly", "readonly");
+            this.class("readonly");
+        }
+
+        return this;
+    }
+
     /**
      * Sets the type attribute of the element to be constructed by this template.
      * @param {String|IgniteProperty} value The value to set for the type attribute of the element this template will construct.