From 225938704f1a0f5c0774f81cf5600e073796a576 Mon Sep 17 00:00:00 2001
From: S Anand <root.node@gmail.com>
Date: Mon, 20 Sep 2021 12:27:44 +0530
Subject: [PATCH 1/8] WIP: bs5-input

---
 src/bs5-input.html | 265 +++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 265 insertions(+)
 create mode 100644 src/bs5-input.html

diff --git a/src/bs5-input.html b/src/bs5-input.html
new file mode 100644
index 0000000..4241d8a
--- /dev/null
+++ b/src/bs5-input.html
@@ -0,0 +1,265 @@
+<template $name="bs5-input" type="" title="" placeholder="" bs5-class="" maxLength:number="" default="" media=""
+    items:array="" height:number="" width:number="" help="" html-content="" prefix-item="" suffix-item=""
+    title-placement="">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
+        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
+    <style>
+        /* TODO: Should these be global, given that it should be theme-based? */
+        bs5-input {
+            --box-shadow: 0px 2px 4px #d3d3d3;
+            --text-color: #212529;
+            --border-color: #cecece;
+            --error: #dc3545;
+            --placeholder-color: rgb(117, 117, 117);
+            --focus-blue: #0d6efd;
+            --focus-bg-grey: #c2bfbf2d;
+            --upload_file-bg: rgba(26, 118, 189, 0.1);
+            --upload-file-border: rgba(126, 170, 205, 0.5);
+            --btn-primary: #1979C2;
+            --txt-white: #fff;
+            --white-bg: #fff;
+            --secondary-color: #1979C2;
+            --disabled-color: #A1A1A1;
+        }
+
+        bs5-input input:hover {
+            box-shadow: var(--box-shadow)
+        }
+
+        bs5-input input:focus {
+            color: var(--text-color) !important;
+            border-color: var(--border-color) !important;
+            outline: 0 !important;
+            box-shadow: var(--box-shadow) !important;
+        }
+
+        bs5-input[disabled='true']>*,
+        bs5-input[disabled='true'] :hover {
+            color: #a1a1a1;
+            box-shadow: none
+        }
+
+        bs5-input[bs5-class=error] input {
+            border-color: var(--error);
+        }
+
+        bs5-input[bs5-class=error] input:focus {
+            border-color: var(--error) !important;
+        }
+
+        bs5-input input:focus::-webkit-input-placeholder {
+            color: var(--placeholder-color) !important;
+        }
+
+        bs5-input[type="checkbox"] input:hover:enabled {
+            border-color: var(--focus-blue);
+        }
+
+        bs5-input[type="checkbox"] input:disabled {
+            pointer-events: unset !important;
+            cursor: no-drop;
+        }
+
+        bs5-input textarea:hover {
+            box-shadow: var(--box-shadow)
+        }
+
+        bs5-input[type="textarea"] :focus {
+            color: var(--text-color) !important;
+            border-color: var(--border-color) !important;
+            outline: 0 !important;
+            box-shadow: var(--box-shadow) !important;
+        }
+
+        bs5-input[type="textarea"][bs5-class=error] textarea {
+            border-color: var(--error);
+        }
+
+        bs5-input[type="textarea"][bs5-class=error] textarea:focus {
+            border-color: var(--error) !important;
+        }
+
+        bs5-input[type="textarea"] .badge {
+            background-color: var(--white-bg);
+            border: 1px solid var(--border-color);
+            left: 90% !important;
+            color: var(--bs-secondary) !important;
+        }
+
+        bs5-input[type="select"] :hover {
+            box-shadow: var(--box-shadow)
+        }
+
+        bs5-input .form-select:focus {
+            color: var(--text-color) !important;
+            border-color: var(--border-color) !important;
+            outline: 0 !important;
+            box-shadow: var(--box-shadow) !important;
+        }
+
+        bs5-input select option {
+            background: var(--white-bg);
+            color: rgb(0, 0, 0);
+            top: 10em;
+            border: 1px solid var(--border-color);
+        }
+
+        bs5-input[type="switch"] input:hover:enabled {
+            border-color: var(--focus-blue);
+        }
+
+        bs5-input[type="switch"] input:disabled {
+            pointer-events: unset !important;
+            cursor: no-drop;
+        }
+
+        bs5-input[disabled]>* {
+            pointer-events: unset !important;
+            cursor: no-drop;
+            opacity: 0.5;
+        }
+
+        bs5-input[disabled]>* :hover {
+            box-shadow: none;
+        }
+
+        bs5-input .dropdown-menu.show > * {
+            display: block;
+            padding: 5px 10px;
+        }
+    </style>
+
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
+        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
+    <% let disabledAttr = this.hasAttribute('disabled') %>
+    <% if (type == "text" || type == "email" || type == "password" || type =="number" || type == "search") { %>
+      <% if (prefixItem.trim().length != 0 && suffixItem.trim().length != 0) { %>
+        <label for="basic-url" class="mb-3"> <%- title %> </label>
+        <div class="input-group mb-3">
+          <div class="input-group-prepend">
+            <span class="input-group-text"><%= prefixItem %></span>
+          </div>
+          <input type="text" class="form-control">
+          <div class="input-group-append">
+            <span class="input-group-text"><%= suffixItem %></span>
+          </div>
+        </div>
+      <% } else { %>
+        <% if (titlePlacement.trim() == 'inline' || titlePlacement.trim() == 'block'){ %>
+          <% let placeTitle = titlePlacement.trim() == 'inline' ? 'col-sm-2' : '' %>
+          <div class="form-group row">
+            <label for="inputPassword" class="<%- placeTitle %> col-form-label"><%- title %></label>
+            <div class="col-sm-10">
+              <input type="<%- type %>" name="<%- title %>" placeholder="<%- placeholder %>" value="<%- obj.default %>"
+                  class="form-control <%- bs5Class %>" maxlength="<%- maxlength %>" aria-describedby="helpText"
+                  style="background: url(<%- media %>) no-repeat right 5px top 3px" ; />
+              <small id="helpText" class="form-text text-muted"><%- help %></small>
+            </div>
+          </div>
+        <% } else { %>
+          <div class="form-floating mb-3">
+            <% if(disabledAttr) {  %>
+            <input type="<%- type %>" name="<%- title %>" placeholder="<%- placeholder %>"
+                class="form-control <%- bs5Class %>" disabled />
+            <% }else{ %>
+            <input type="<%- type %>" name="<%- title %>" placeholder="<%- placeholder %>"
+                class="form-control <%- bs5Class %>" maxlength="<%- maxlength %>" aria-describedby="helpText"
+                value="<%- obj.default %>" style="background: url(<%- media %>) no-repeat right 5px top 15px" />
+            <small id="helpText" class="form-text text-muted"><%- help %></small>
+            <% }%>
+            <label><%= title %></label>
+          </div>
+        <% } %>
+      <% } %>
+    <% } else if (type =="textarea") { %>
+      <div class="form-floating">
+        <span class="position-absolute top-0 translate-middle badge">
+            <span class="word-count"></span> / <%- maxlength %>
+        </span>
+        <textarea class="form-control <%- bs5Class %>" placeholder="Leave a comment here" id="floatingTextarea2"
+            style="height: <%- height %>px" aria-describedby="helpText"></textarea>
+        <label for="floatingTextarea2"><%= title %></label>
+        <small id="helpText" class="form-text text-muted"><%- help %></small>
+      </div>
+      <script oninput>
+        this.querySelector('.word-count').textContent = e.target.value.length
+      </script>
+    <% } else if (type == "select") { %>
+      <% if (disabledAttr) { %>
+        <select class="form-select" disabled>
+          <% for(var i = 0; i < items.length; i++) { %>
+            <option value="<%- i %>"><%- items[i] %></option>
+          <% } %></select>
+      <% } else { %>
+        <select class="form-select" aria-describedby="helpText">
+            <% for(var i = 0; i < items.length; i++) { %>
+            <option value="<%- i %>"><%- items[i] %></option>
+            <% } %>
+        </select>
+        <small id="helpText" class="form-text text-muted"><%- help %></small>
+      <% } %>
+    <% } else if (type == "checkbox" || type == "radio") { %>
+      <% for (var i = 0; i < items.length; i++) { %>
+        <% if (disabledAttr) { %>
+          <div class="form-check"><input class="form-check-input" type="<%- type %>" default=""
+              id="flexCheckDefault <%= i %>" name="flexRadioDefault" disabled>
+        <% } else { %>
+          <% if ($.inArray(items[i], obj.default) > -1) { %>
+            <div class="form-check"> <input class="form-check-input" type="<%- type %>" default=""
+                id="flexCheckDefault <%= i %>" name="flexRadioDefault" checked>
+          <% } else { %>
+              <div class="form-check"> <input class="form-check-input" type="<%- type %>" default=""
+                  id="flexCheckDefault <%= i %>" name="flexRadioDefault">
+          <% } %>
+        <% } %>
+        <label class="form-check-label" for="flexCheckDefault <%= i %>"><%- items[i] %></label>
+      </div>
+        </br>
+
+        <% } %>
+        <% } else if (type == "switch") { %>
+
+        <% for(var i = 0; i < items.length; i++) { %>
+        <div class="form-switch">
+            <% if(disabledAttr) { %>
+            <input class="form-check-input" type="checkbox" value="" id="switchBtn <%= i %>" name="flexRadioDefault"
+                disabled>
+            <% }else{ %>
+                <% if($.inArray(items[i], obj.default) > -1) { %>
+            <input class="form-check-input" type="checkbox" value="" id="switchBtn <%= i %>"
+                name="flexRadioDefault" checked>
+                <% } else { %>
+                    <input class="form-check-input" type="checkbox" value="" id="switchBtn <%= i %>"
+                    name="flexRadioDefault">
+                    <% } %>
+
+            <%}   %>
+            <label class="form-check-label" for="switchBtn <%= i %>">
+                <%- items[i] %>
+            </label>
+        </div>
+        </br>
+        <% } %>
+        <% } else if (type == "dropdown") { %>
+
+        <div class="dropdown">
+            <% if (disabledAttr) { %>
+            <button class="btn btn-primary  dropdown-toggle" type="button" id="dropdownMenuButton1"
+                data-bs-toggle="dropdown" aria-expanded="false" aria-describedby="helpText" disabled>
+                <% } else { %>
+                <button class="btn btn-primary  dropdown-toggle" type="button" id="dropdownMenuButton1"
+                    data-bs-toggle="dropdown" aria-expanded="false" aria-describedby="helpText">
+                    <%} %>
+                    <%= title%>
+                </button>
+                <small id="helpText" class="form-text text-muted"><%- help %></small>
+                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
+                    <slot></slot>
+                </div>
+        </div>
+
+        <% } else { %>
+        incorrect input field type
+        <% } %>
+
+</template>

From d36f5c1d6714e84e629db0fc235c58276c3f3afd Mon Sep 17 00:00:00 2001
From: S Anand <root.node@gmail.com>
Date: Mon, 20 Sep 2021 12:35:07 +0530
Subject: [PATCH 2/8] WIP: uifactory-config

---
 src/uifactory-config.html | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)
 create mode 100644 src/uifactory-config.html

diff --git a/src/uifactory-config.html b/src/uifactory-config.html
new file mode 100644
index 0000000..801c1e4
--- /dev/null
+++ b/src/uifactory-config.html
@@ -0,0 +1,19 @@
+<template $name="uifactory-config" component="comic-gen">
+  <% for (let [name, info] of Object.entries(uifactory.components[component])) { %>
+    <bs5-input type="text" title="<%= name %>"></bs5-input>
+  <% } %>
+</template>
+
+
+
+
+
+<script src="uifactory.js" import="@svg-chart @bs5-input"></script>
+<button>Render</button>
+<div id="output"></div>
+
+<script>
+  document.querySelector('button').addEventListener('click', function () {
+    document.querySelector('#output').innerHTML = `<uifactory-config component="svg-chart"></uifactory-config>`
+  })
+</script>

From 74a8dce6e1d5f259a81662f467c82c8b9d6b9e43 Mon Sep 17 00:00:00 2001
From: Samarth Gulati <samarth.gulati@gramener.com>
Date: Mon, 20 Sep 2021 16:36:44 +0530
Subject: [PATCH 3/8] indentation and default type

---
 src/bs5-input.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/bs5-input.html b/src/bs5-input.html
index 4241d8a..20aedc8 100644
--- a/src/bs5-input.html
+++ b/src/bs5-input.html
@@ -1,4 +1,4 @@
-<template $name="bs5-input" type="" title="" placeholder="" bs5-class="" maxLength:number="" default="" media=""
+<template $name="bs5-input" type="text" title="" placeholder="" bs5-class="" maxLength:number="" default="" media=""
     items:array="" height:number="" width:number="" help="" html-content="" prefix-item="" suffix-item=""
     title-placement="">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
@@ -192,9 +192,9 @@
           <% } %></select>
       <% } else { %>
         <select class="form-select" aria-describedby="helpText">
-            <% for(var i = 0; i < items.length; i++) { %>
+          <% for(var i = 0; i < items.length; i++) { %>
             <option value="<%- i %>"><%- items[i] %></option>
-            <% } %>
+          <% } %>
         </select>
         <small id="helpText" class="form-text text-muted"><%- help %></small>
       <% } %>

From 94f9f88d0fc1c451be2df91b58f4c4d8952e4141 Mon Sep 17 00:00:00 2001
From: Samarth Gulati <samarth.gulati@gramener.com>
Date: Mon, 20 Sep 2021 16:37:50 +0530
Subject: [PATCH 4/8] uifactory configurator

- `<uifactory-config>` shows code and button to copy code
- User should be able to set width= and height= attribute for the component
- User should be able to set the % width of the fields part
---
 src/uifactory-config.html | 171 +++++++++++++++++++++++++++++++++++---
 1 file changed, 161 insertions(+), 10 deletions(-)

diff --git a/src/uifactory-config.html b/src/uifactory-config.html
index 801c1e4..c683d0a 100644
--- a/src/uifactory-config.html
+++ b/src/uifactory-config.html
@@ -1,19 +1,170 @@
-<template $name="uifactory-config" component="comic-gen">
-  <% for (let [name, info] of Object.entries(uifactory.components[component])) { %>
-    <bs5-input type="text" title="<%= name %>"></bs5-input>
-  <% } %>
-</template>
+<template $name="uifactory-config" component="comic-gen" ratio="2:5">
+  <style>
+    /* Customize website's scrollbar like Mac OS
+    Not supports in Firefox and IE */
 
+    /* total width */
+    uifactory-config ::-webkit-scrollbar {
+        background-color: #fff;
+        width: 16px;
+    }
 
+    /* background of the scrollbar except button or resizer */
+    uifactory-config ::-webkit-scrollbar-track {
+        background-color: #fff;
+    }
 
+    /* scrollbar itself */
+    uifactory-config ::-webkit-scrollbar-thumb {
+        background-color: #babac0;
+        border-radius: 16px;
+        border: 4px solid #fff;
+    }
 
+    /* set button(top and bottom of the scrollbar) */
+    uifactory-config ::-webkit-scrollbar-button {
+        display:none;
+    }
+    
+    uifactory-config {
+      display: grid;
+      grid-template-columns: var(--left, 1fr) var(--right, 1fr);
+      grid-template-rows: 4fr 1fr;
+      height: 100%;
+    }
+    uifactory-config > section {
+      overflow: auto;
+    }
+    uifactory-config > .preview,
+    uifactory-config > .preview > iframe {
+      width: 100%;
+      height: 100%;
+    }
+    uifactory-config > pre {
+      grid-column: 1 / 3;
+      position: relative;
+    }
+    uifactory-config > pre > button {
+      position: absolute;
+      top: 0.5rem;
+      right: 0.5rem;
+    }
+    uifactory-config > pre > code {
+      display: flex;
+      font-family: monospace;
+    } 
+  </style>
+  <% 
+    const split = ratio.split(':');
+    this.style.setProperty('--left', split[0] + 'fr'); 
+    this.style.setProperty('--right', split[1] + 'fr'); 
+  %>
+  <section>
+    <% for (let [name, props] of Object.entries(uifactory.components[component].properties)) { %>
+      <bs5-input default="<%- props.value %>" title="<%- name %>"></bs5-input>
+    <% } %>
+    <bs5-input data-type="style" default="auto" title="width"></bs5-input>
+    <bs5-input data-type="style" default="auto" title="height"></bs5-input>
+  </section>
+  <section class="preview"></section>
+  <pre>
+    <button>Copy</button>
+    <code>
+    </code>
+  </pre>
+  <script onclick>
+    if(!e.target.matches('uifactory-config pre > button')) return
+    // https://stackoverflow.com/a/30810322/15483581
+    function fallbackCopyTextToClipboard(text) {
+      var textArea = document.createElement("textarea");
+      textArea.value = text;
+      
+      // Avoid scrolling to bottom
+      textArea.style.top = "0";
+      textArea.style.left = "0";
+      textArea.style.position = "fixed";
+
+      document.body.appendChild(textArea);
+      textArea.focus();
+      textArea.select();
+
+      try {
+        var successful = document.execCommand('copy');
+        var msg = successful ? 'successful' : 'unsuccessful';
+        console.log('Fallback: Copying text command was ' + msg);
+      } catch (err) {
+        console.error('Fallback: Oops, unable to copy', err);
+      }
+
+      document.body.removeChild(textArea);
+    }
+    function copyTextToClipboard(text, callback) {
+      if (!navigator.clipboard) {
+        fallbackCopyTextToClipboard(text);
+        callback()
+        return;
+      }
+      navigator.clipboard.writeText(text).then(function() {
+        console.log('Async: Copying to clipboard was successful!');
+        callback()
+      }, function(err) {
+        console.error('Async: Could not copy text: ', err);
+      });
+    }
+    this.querySelector('pre > button').textContent = 'Copying...'
+    copyTextToClipboard(this.querySelector('code').textContent, () => {
+      this.querySelector('pre > button').textContent = 'Copy'
+    })
+  </script>
+  <script onrender onchange>
+    const container = this.querySelector('.preview')
+    container.innerHTML = ''
+    const iframe = document.createElement('iframe')
+    container.appendChild(iframe)
+    const preview = iframe.contentWindow.document.body
+    const style = document.createElement('style')
+    style.innerHTML = `body { display: flex; width: 100vw; height: 100vh; align-items:center; justify-content: center;}`
+    preview.appendChild(style)
+    const lib = document.createElement('script')
+    lib.setAttribute('src', 'uifactory.js')
+    lib.setAttribute('import', '@' + component)
+    preview.appendChild(lib)
+    const comp = document.createElement(component)
+    this.querySelectorAll('input').forEach(prop => {
+      const bs5Input = prop.parentElement.parentElement
+      if('type' in bs5Input.dataset && bs5Input.dataset.type === 'style') {
+        comp.style[prop.name] = prop.value
+      } else {
+        if(prop.value.length > 0) {
+          comp.setAttribute(prop.name, prop.value)
+        }
+      }
+    })
+    this.querySelector('code').textContent = comp.outerHTML
+    preview.appendChild(comp)
+  </script>
+</template>
 
-<script src="uifactory.js" import="@svg-chart @bs5-input"></script>
-<button>Render</button>
-<div id="output"></div>
 
+
+
+
+<script src="uifactory.js" import="@bs5-input @svg-chart"></script>
 <script>
-  document.querySelector('button').addEventListener('click', function () {
-    document.querySelector('#output').innerHTML = `<uifactory-config component="svg-chart"></uifactory-config>`
+  new Promise(res => {
+    const interval = setInterval(function(){
+      if('bs5-input' in uifactory.components) {
+        clearInterval(interval)
+        document.querySelector('#output').innerHTML = `<uifactory-config component="bs5-input"></uifactory-config>`
+        res()
+      }
+    }, 100)
   })
 </script>
+<bs5-input onchange="updateConfig(event)" type="select" title="component" default="svg-chart" items="['bs5-input', 'svg-chart']"></bs5-input>
+<div id="output"></div>
+<script>
+  function updateConfig(e) {
+    document.querySelector('#output uifactory-config').setAttribute('component', e.currentTarget.items[Number(e.target.value)])
+  }
+</script>

From 23bec8afbfb378b8d025cf454f6641ca654238c9 Mon Sep 17 00:00:00 2001
From: Samarth Gulati <samarth.gulati@gramener.com>
Date: Tue, 21 Sep 2021 12:42:09 +0530
Subject: [PATCH 5/8] add timeout for button label

---
 src/uifactory-config.html | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/uifactory-config.html b/src/uifactory-config.html
index c683d0a..ce4711d 100644
--- a/src/uifactory-config.html
+++ b/src/uifactory-config.html
@@ -111,9 +111,12 @@
         console.error('Async: Could not copy text: ', err);
       });
     }
-    this.querySelector('pre > button').textContent = 'Copying...'
+    this.querySelector('pre > button').textContent = 'Copying'
     copyTextToClipboard(this.querySelector('code').textContent, () => {
-      this.querySelector('pre > button').textContent = 'Copy'
+      this.querySelector('pre > button').textContent = 'Copied'
+      setTimeout(_ => {
+        this.querySelector('pre > button').textContent = 'Copy'
+      }, 1000)
     })
   </script>
   <script onrender onchange>
@@ -145,10 +148,6 @@
   </script>
 </template>
 
-
-
-
-
 <script src="uifactory.js" import="@bs5-input @svg-chart"></script>
 <script>
   new Promise(res => {

From 2416f4c1bd20623f5ec6559a607d9be765aa80b1 Mon Sep 17 00:00:00 2001
From: Samarth Gulati <samarth.gulati@gramener.com>
Date: Tue, 21 Sep 2021 13:22:01 +0530
Subject: [PATCH 6/8] support innerHTML for slots

---
 src/head-ing.html         | 23 +++++++++++++++++++++++
 src/uifactory-config.html | 20 +++++++++++++++-----
 2 files changed, 38 insertions(+), 5 deletions(-)
 create mode 100644 src/head-ing.html

diff --git a/src/head-ing.html b/src/head-ing.html
new file mode 100644
index 0000000..d0f03e8
--- /dev/null
+++ b/src/head-ing.html
@@ -0,0 +1,23 @@
+<template $name="head-ing" size="1">
+  <% if(size === '1') { %>
+    <h1>
+      <slot>hello world</slot>
+    </h1>
+  <% } else if(size === '2') { %>
+    <h2>
+      <slot>hello world</slot>
+    </h2>
+  <% } else if(size === '3') { %>
+    <h3>
+      <slot>hello world</slot>
+    </h3>
+  <% } else if(size === '4') { %>
+    <h4>
+      <slot>hello world</slot>
+    </h4>
+  <% } else if(size === '5') { %>
+    <h5>
+      <slot>hello world</slot>
+    </h5>
+  <% } %>
+</template>
\ No newline at end of file
diff --git a/src/uifactory-config.html b/src/uifactory-config.html
index ce4711d..215ce5d 100644
--- a/src/uifactory-config.html
+++ b/src/uifactory-config.html
@@ -53,6 +53,9 @@
       display: flex;
       font-family: monospace;
     } 
+    uifactory-config bs5-input[title="innerHTML"] {
+      font-family: monospace;
+    }
   </style>
   <% 
     const split = ratio.split(':');
@@ -61,8 +64,9 @@
   %>
   <section>
     <% for (let [name, props] of Object.entries(uifactory.components[component].properties)) { %>
-      <bs5-input default="<%- props.value %>" title="<%- name %>"></bs5-input>
+      <bs5-input data-type="attribute" default="<%- props.value %>" title="<%- name %>"></bs5-input>
     <% } %>
+    <bs5-input data-type="property" type="textarea" title="innerHTML"></bs5-input>
     <bs5-input data-type="style" default="auto" title="width"></bs5-input>
     <bs5-input data-type="style" default="auto" title="height"></bs5-input>
   </section>
@@ -133,10 +137,16 @@
     lib.setAttribute('import', '@' + component)
     preview.appendChild(lib)
     const comp = document.createElement(component)
-    this.querySelectorAll('input').forEach(prop => {
-      const bs5Input = prop.parentElement.parentElement
+    this.querySelectorAll('bs5-input').forEach(bs5Input => {
+      let prop = bs5Input.querySelector('input')
+      if(!prop) { 
+        prop = bs5Input.querySelector('textarea')
+        if(!prop) return
+      }
       if('type' in bs5Input.dataset && bs5Input.dataset.type === 'style') {
         comp.style[prop.name] = prop.value
+      } else if('type' in bs5Input.dataset && bs5Input.dataset.type === 'property') {
+        comp[bs5Input.title] = prop.value
       } else {
         if(prop.value.length > 0) {
           comp.setAttribute(prop.name, prop.value)
@@ -148,7 +158,7 @@
   </script>
 </template>
 
-<script src="uifactory.js" import="@bs5-input @svg-chart"></script>
+<script src="uifactory.js" import="@bs5-input @svg-chart @head-ing"></script>
 <script>
   new Promise(res => {
     const interval = setInterval(function(){
@@ -160,7 +170,7 @@
     }, 100)
   })
 </script>
-<bs5-input onchange="updateConfig(event)" type="select" title="component" default="svg-chart" items="['bs5-input', 'svg-chart']"></bs5-input>
+<bs5-input onchange="updateConfig(event)" type="select" title="component" default="svg-chart" items="['bs5-input', 'svg-chart', 'head-ing']"></bs5-input>
 <div id="output"></div>
 <script>
   function updateConfig(e) {

From 077a5b009c9f02c152908053e6b55c0c18fd4c61 Mon Sep 17 00:00:00 2001
From: ChanduRach <chandanas445@gmail.com>
Date: Tue, 21 Sep 2021 14:43:16 +0530
Subject: [PATCH 7/8] Bs5 input attr format and indentation

---
 src/bs5-input.html | 517 ++++++++++++++++++++++-----------------------
 1 file changed, 252 insertions(+), 265 deletions(-)

diff --git a/src/bs5-input.html b/src/bs5-input.html
index 20aedc8..8491ca5 100644
--- a/src/bs5-input.html
+++ b/src/bs5-input.html
@@ -1,265 +1,252 @@
-<template $name="bs5-input" type="text" title="" placeholder="" bs5-class="" maxLength:number="" default="" media=""
-    items:array="" height:number="" width:number="" help="" html-content="" prefix-item="" suffix-item=""
-    title-placement="">
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
-        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
-    <style>
-        /* TODO: Should these be global, given that it should be theme-based? */
-        bs5-input {
-            --box-shadow: 0px 2px 4px #d3d3d3;
-            --text-color: #212529;
-            --border-color: #cecece;
-            --error: #dc3545;
-            --placeholder-color: rgb(117, 117, 117);
-            --focus-blue: #0d6efd;
-            --focus-bg-grey: #c2bfbf2d;
-            --upload_file-bg: rgba(26, 118, 189, 0.1);
-            --upload-file-border: rgba(126, 170, 205, 0.5);
-            --btn-primary: #1979C2;
-            --txt-white: #fff;
-            --white-bg: #fff;
-            --secondary-color: #1979C2;
-            --disabled-color: #A1A1A1;
-        }
-
-        bs5-input input:hover {
-            box-shadow: var(--box-shadow)
-        }
-
-        bs5-input input:focus {
-            color: var(--text-color) !important;
-            border-color: var(--border-color) !important;
-            outline: 0 !important;
-            box-shadow: var(--box-shadow) !important;
-        }
-
-        bs5-input[disabled='true']>*,
-        bs5-input[disabled='true'] :hover {
-            color: #a1a1a1;
-            box-shadow: none
-        }
-
-        bs5-input[bs5-class=error] input {
-            border-color: var(--error);
-        }
-
-        bs5-input[bs5-class=error] input:focus {
-            border-color: var(--error) !important;
-        }
-
-        bs5-input input:focus::-webkit-input-placeholder {
-            color: var(--placeholder-color) !important;
-        }
-
-        bs5-input[type="checkbox"] input:hover:enabled {
-            border-color: var(--focus-blue);
-        }
-
-        bs5-input[type="checkbox"] input:disabled {
-            pointer-events: unset !important;
-            cursor: no-drop;
-        }
-
-        bs5-input textarea:hover {
-            box-shadow: var(--box-shadow)
-        }
-
-        bs5-input[type="textarea"] :focus {
-            color: var(--text-color) !important;
-            border-color: var(--border-color) !important;
-            outline: 0 !important;
-            box-shadow: var(--box-shadow) !important;
-        }
-
-        bs5-input[type="textarea"][bs5-class=error] textarea {
-            border-color: var(--error);
-        }
-
-        bs5-input[type="textarea"][bs5-class=error] textarea:focus {
-            border-color: var(--error) !important;
-        }
-
-        bs5-input[type="textarea"] .badge {
-            background-color: var(--white-bg);
-            border: 1px solid var(--border-color);
-            left: 90% !important;
-            color: var(--bs-secondary) !important;
-        }
-
-        bs5-input[type="select"] :hover {
-            box-shadow: var(--box-shadow)
-        }
-
-        bs5-input .form-select:focus {
-            color: var(--text-color) !important;
-            border-color: var(--border-color) !important;
-            outline: 0 !important;
-            box-shadow: var(--box-shadow) !important;
-        }
-
-        bs5-input select option {
-            background: var(--white-bg);
-            color: rgb(0, 0, 0);
-            top: 10em;
-            border: 1px solid var(--border-color);
-        }
-
-        bs5-input[type="switch"] input:hover:enabled {
-            border-color: var(--focus-blue);
-        }
-
-        bs5-input[type="switch"] input:disabled {
-            pointer-events: unset !important;
-            cursor: no-drop;
-        }
-
-        bs5-input[disabled]>* {
-            pointer-events: unset !important;
-            cursor: no-drop;
-            opacity: 0.5;
-        }
-
-        bs5-input[disabled]>* :hover {
-            box-shadow: none;
-        }
-
-        bs5-input .dropdown-menu.show > * {
-            display: block;
-            padding: 5px 10px;
-        }
-    </style>
-
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
-        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
-    <% let disabledAttr = this.hasAttribute('disabled') %>
-    <% if (type == "text" || type == "email" || type == "password" || type =="number" || type == "search") { %>
-      <% if (prefixItem.trim().length != 0 && suffixItem.trim().length != 0) { %>
-        <label for="basic-url" class="mb-3"> <%- title %> </label>
-        <div class="input-group mb-3">
-          <div class="input-group-prepend">
-            <span class="input-group-text"><%= prefixItem %></span>
-          </div>
-          <input type="text" class="form-control">
-          <div class="input-group-append">
-            <span class="input-group-text"><%= suffixItem %></span>
-          </div>
-        </div>
-      <% } else { %>
-        <% if (titlePlacement.trim() == 'inline' || titlePlacement.trim() == 'block'){ %>
-          <% let placeTitle = titlePlacement.trim() == 'inline' ? 'col-sm-2' : '' %>
-          <div class="form-group row">
-            <label for="inputPassword" class="<%- placeTitle %> col-form-label"><%- title %></label>
-            <div class="col-sm-10">
-              <input type="<%- type %>" name="<%- title %>" placeholder="<%- placeholder %>" value="<%- obj.default %>"
-                  class="form-control <%- bs5Class %>" maxlength="<%- maxlength %>" aria-describedby="helpText"
-                  style="background: url(<%- media %>) no-repeat right 5px top 3px" ; />
-              <small id="helpText" class="form-text text-muted"><%- help %></small>
-            </div>
-          </div>
-        <% } else { %>
-          <div class="form-floating mb-3">
-            <% if(disabledAttr) {  %>
-            <input type="<%- type %>" name="<%- title %>" placeholder="<%- placeholder %>"
-                class="form-control <%- bs5Class %>" disabled />
-            <% }else{ %>
-            <input type="<%- type %>" name="<%- title %>" placeholder="<%- placeholder %>"
-                class="form-control <%- bs5Class %>" maxlength="<%- maxlength %>" aria-describedby="helpText"
-                value="<%- obj.default %>" style="background: url(<%- media %>) no-repeat right 5px top 15px" />
-            <small id="helpText" class="form-text text-muted"><%- help %></small>
-            <% }%>
-            <label><%= title %></label>
-          </div>
-        <% } %>
-      <% } %>
-    <% } else if (type =="textarea") { %>
-      <div class="form-floating">
-        <span class="position-absolute top-0 translate-middle badge">
-            <span class="word-count"></span> / <%- maxlength %>
-        </span>
-        <textarea class="form-control <%- bs5Class %>" placeholder="Leave a comment here" id="floatingTextarea2"
-            style="height: <%- height %>px" aria-describedby="helpText"></textarea>
-        <label for="floatingTextarea2"><%= title %></label>
-        <small id="helpText" class="form-text text-muted"><%- help %></small>
-      </div>
-      <script oninput>
-        this.querySelector('.word-count').textContent = e.target.value.length
-      </script>
-    <% } else if (type == "select") { %>
-      <% if (disabledAttr) { %>
-        <select class="form-select" disabled>
-          <% for(var i = 0; i < items.length; i++) { %>
-            <option value="<%- i %>"><%- items[i] %></option>
-          <% } %></select>
-      <% } else { %>
-        <select class="form-select" aria-describedby="helpText">
-          <% for(var i = 0; i < items.length; i++) { %>
-            <option value="<%- i %>"><%- items[i] %></option>
-          <% } %>
-        </select>
-        <small id="helpText" class="form-text text-muted"><%- help %></small>
-      <% } %>
-    <% } else if (type == "checkbox" || type == "radio") { %>
-      <% for (var i = 0; i < items.length; i++) { %>
-        <% if (disabledAttr) { %>
-          <div class="form-check"><input class="form-check-input" type="<%- type %>" default=""
-              id="flexCheckDefault <%= i %>" name="flexRadioDefault" disabled>
-        <% } else { %>
-          <% if ($.inArray(items[i], obj.default) > -1) { %>
-            <div class="form-check"> <input class="form-check-input" type="<%- type %>" default=""
-                id="flexCheckDefault <%= i %>" name="flexRadioDefault" checked>
-          <% } else { %>
-              <div class="form-check"> <input class="form-check-input" type="<%- type %>" default=""
-                  id="flexCheckDefault <%= i %>" name="flexRadioDefault">
-          <% } %>
-        <% } %>
-        <label class="form-check-label" for="flexCheckDefault <%= i %>"><%- items[i] %></label>
-      </div>
-        </br>
-
-        <% } %>
-        <% } else if (type == "switch") { %>
-
-        <% for(var i = 0; i < items.length; i++) { %>
-        <div class="form-switch">
-            <% if(disabledAttr) { %>
-            <input class="form-check-input" type="checkbox" value="" id="switchBtn <%= i %>" name="flexRadioDefault"
-                disabled>
-            <% }else{ %>
-                <% if($.inArray(items[i], obj.default) > -1) { %>
-            <input class="form-check-input" type="checkbox" value="" id="switchBtn <%= i %>"
-                name="flexRadioDefault" checked>
-                <% } else { %>
-                    <input class="form-check-input" type="checkbox" value="" id="switchBtn <%= i %>"
-                    name="flexRadioDefault">
-                    <% } %>
-
-            <%}   %>
-            <label class="form-check-label" for="switchBtn <%= i %>">
-                <%- items[i] %>
-            </label>
-        </div>
-        </br>
-        <% } %>
-        <% } else if (type == "dropdown") { %>
-
-        <div class="dropdown">
-            <% if (disabledAttr) { %>
-            <button class="btn btn-primary  dropdown-toggle" type="button" id="dropdownMenuButton1"
-                data-bs-toggle="dropdown" aria-expanded="false" aria-describedby="helpText" disabled>
-                <% } else { %>
-                <button class="btn btn-primary  dropdown-toggle" type="button" id="dropdownMenuButton1"
-                    data-bs-toggle="dropdown" aria-expanded="false" aria-describedby="helpText">
-                    <%} %>
-                    <%= title%>
-                </button>
-                <small id="helpText" class="form-text text-muted"><%- help %></small>
-                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
-                    <slot></slot>
-                </div>
-        </div>
-
-        <% } else { %>
-        incorrect input field type
-        <% } %>
-
-</template>
+<template $name="bs5-input" type="text" title="" placeholder="" bs5-class="" maxLength:number="" default="" media=""
+    items:array="" height:number="" width:number="" help="" html-content="" prefix-item="" suffix-item=""
+    title-placement="">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
+        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
+    <style>
+        /* TODO: Should these be global, given that it should be theme-based? */
+        bs5-input {
+            --box-shadow: 0px 2px 4px #d3d3d3;
+            --text-color: #212529;
+            --border-color: #cecece;
+            --error: #dc3545;
+            --placeholder-color: rgb(117, 117, 117);
+            --focus-blue: #0d6efd;
+            --focus-bg-grey: #c2bfbf2d;
+            --upload_file-bg: rgba(26, 118, 189, 0.1);
+            --upload-file-border: rgba(126, 170, 205, 0.5);
+            --btn-primary: #1979C2;
+            --txt-white: #fff;
+            --white-bg: #fff;
+            --secondary-color: #1979C2;
+            --disabled-color: #A1A1A1;
+        }
+
+        bs5-input input:hover {
+            box-shadow: var(--box-shadow)
+        }
+
+        bs5-input input:focus {
+            color: var(--text-color) !important;
+            border-color: var(--border-color) !important;
+            outline: 0 !important;
+            box-shadow: var(--box-shadow) !important;
+        }
+
+        bs5-input[disabled='true']>*,
+        bs5-input[disabled='true'] :hover {
+            color: #a1a1a1;
+            box-shadow: none
+        }
+
+        bs5-input[bs5-class=error] input {
+            border-color: var(--error);
+        }
+
+        bs5-input[bs5-class=error] input:focus {
+            border-color: var(--error) !important;
+        }
+
+        bs5-input input:focus::-webkit-input-placeholder {
+            color: var(--placeholder-color) !important;
+        }
+
+        bs5-input[type="checkbox"] input:hover:enabled {
+            border-color: var(--focus-blue);
+        }
+
+        bs5-input[type="checkbox"] input:disabled {
+            pointer-events: unset !important;
+            cursor: no-drop;
+        }
+
+        bs5-input textarea:hover {
+            box-shadow: var(--box-shadow)
+        }
+
+        bs5-input[type="textarea"] :focus {
+            color: var(--text-color) !important;
+            border-color: var(--border-color) !important;
+            outline: 0 !important;
+            box-shadow: var(--box-shadow) !important;
+        }
+
+        bs5-input[type="textarea"][bs5-class=error] textarea {
+            border-color: var(--error);
+        }
+
+        bs5-input[type="textarea"][bs5-class=error] textarea:focus {
+            border-color: var(--error) !important;
+        }
+
+        bs5-input[type="textarea"] .badge {
+            background-color: var(--white-bg);
+            border: 1px solid var(--border-color);
+            left: 90% !important;
+            color: var(--bs-secondary) !important;
+        }
+
+        bs5-input[type="select"] :hover {
+            box-shadow: var(--box-shadow)
+        }
+
+        bs5-input .form-select:focus {
+            color: var(--text-color) !important;
+            border-color: var(--border-color) !important;
+            outline: 0 !important;
+            box-shadow: var(--box-shadow) !important;
+        }
+
+        bs5-input select option {
+            background: var(--white-bg);
+            color: rgb(0, 0, 0);
+            top: 10em;
+            border: 1px solid var(--border-color);
+        }
+
+        bs5-input[type="switch"] input:hover:enabled {
+            border-color: var(--focus-blue);
+        }
+
+        bs5-input[type="switch"] input:disabled {
+            pointer-events: unset !important;
+            cursor: no-drop;
+        }
+
+        bs5-input[disabled]>* {
+            pointer-events: unset !important;
+            cursor: no-drop;
+            opacity: 0.5;
+        }
+
+        bs5-input[disabled]>* :hover {
+            box-shadow: none;
+        }
+
+        bs5-input .dropdown-menu.show > * {
+            display: block;
+            padding: 5px 10px;
+        }
+    </style>
+
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
+        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
+    <% let disabledAttr = this.hasAttribute('disabled') %>
+    <% if (type == "text" || type == "email" || type == "password" || type =="number" || type == "search") { %>
+      <% if (prefixItem.length != 0 && suffixItem.length != 0) { %>
+        <label for="inputGroup" class="mb-3"> <%- title %> </label>
+        <div class="input-group mb-3">
+          <div class="input-group-prepend">
+            <span class="input-group-text"><%= prefixItem %></span>
+          </div>
+          <input type="text" class="form-control">
+          <div class="input-group-append">
+            <span class="input-group-text"><%= suffixItem %></span>
+          </div>
+        </div>
+      <% } else { %>
+        <% if (titlePlacement == 'inline' || titlePlacement == 'block'){ %>
+          <% let placeTitle = titlePlacement == 'inline' ? 'col-sm-2' : '' %>
+          <div class="form-group row">
+            <label for="inputPassword" class="<%- placeTitle %> col-form-label"><%- title %></label>
+            <div class="col-sm-10">
+              <input type="<%- type %>" name="<%- title %>"  placeholder="<%- placeholder %>" value="<%- obj.default %>"
+                  class="form-control <%- bs5Class %>" maxlength="<%- maxlength %>" aria-describedby="helpText"
+                  style="background: url(<%- media %>) no-repeat right 5px top 3px" ; />
+              <small id="helpText" class="form-text text-muted"><%- help %></small>
+            </div>
+          </div>
+        <% } else { %>
+          <div class="form-floating mb-3">
+            <% if(disabledAttr) {  %>
+            <input type="<%- type %>" name="<%- title %>" placeholder="<%- placeholder %>"
+                class="form-control <%- bs5Class %>" disabled />
+            <% }else{ %>
+            <input type="<%- type %>" name="<%- title %>" placeholder="<%- placeholder %>"
+                class="form-control <%- bs5Class %>" maxlength="<%- maxlength %>" aria-describedby="helpText"
+                value="<%- obj.default %>" style="background: url(<%- media %>) no-repeat right 5px top 15px" />
+            <small id="helpText" class="form-text text-muted"><%- help %></small>
+            <% }%>
+            <label><%= title %></label>
+          </div>
+        <% } %>
+      <% } %>
+    <% } else if (type =="textarea") { %>
+      <div class="form-floating">
+            <span class="position-absolute top-0 translate-middle badge">
+            <span class="word-count"></span> / <%- maxlength %></span>
+            <textarea class="form-control <%- bs5Class %>" placeholder="Leave a comment here" id="floatingTextarea2"
+            style="height: <%- height %>px" aria-describedby="helpText" maxlength=" <%- maxlength %>"></textarea>
+            <label for="floatingTextarea2"><%= title %></label>
+            <small id="helpText" class="form-text text-muted"><%- help %></small>
+      </div>
+      <script oninput>
+        this.querySelector('.word-count').textContent = e.target.value.length
+      </script>
+    <% } else if (type == "select") { %>
+      <% if (disabledAttr) { %>
+        <select class="form-select" disabled>
+          <% for(var i = 0; i < items.length; i++) { %>
+            <option value="<%- i %>"><%- items[i] %></option>
+          <% } %></select>
+      <% } else { %>
+        <select class="form-select" aria-describedby="helpText">
+          <% for(var i = 0; i < items.length; i++) { %>
+            <option value="<%- i %>"><%- items[i] %></option>
+          <% } %>
+        </select>
+        <small id="helpText" class="form-text text-muted"><%- help %></small>
+      <% } %>
+    <% } else if (type == "checkbox" || type == "radio") { %>
+        <% for (var i = 0; i < items.length; i++) { %>
+        <% if (disabledAttr) { %>
+             <div class="form-check"><input class="form-check-input" type="<%- type %>" default=""
+              id="flexCheckDefault <%= i %>" name="flexRadioDefault" disabled>
+        <% } else { %>
+        <% if ($.inArray(items[i], obj.default) > -1) { %>
+            <div class="form-check"> <input class="form-check-input" type="<%- type %>" default=""
+                  id="flexCheckDefault <%= i %>" name="flexRadioDefault" checked>  </div>
+        <% } else { %>
+            <div class="form-check"> <input class="form-check-input" type="<%- type %>" default=""
+                  id="flexCheckDefault <%= i %>" name="flexRadioDefault">  </div>
+        <% } %>
+        <% } %>
+        <label class="form-check-label" for="flexCheckDefault <%= i %>"><%- items[i] %></label>
+        </br>
+        <% } %>
+    <% } else if (type == "switch") { %>
+        <% for(var i = 0; i < items.length; i++) { %>
+        <div class="form-switch">
+            <% if(disabledAttr) { %>
+                <input class="form-check-input" type="checkbox" value="" id="switchBtn <%= i %>" name="flexRadioDefault"disabled>
+            <% }else{ %>
+                <% if($.inArray(items[i], obj.default) > -1) { %>
+                <input class="form-check-input" type="checkbox" value="" id="switchBtn <%= i %>" name="flexRadioDefault" checked>
+                <% } else { %>
+                <input class="form-check-input" type="checkbox" value="" id="switchBtn <%= i %>" name="flexRadioDefault">
+                <% } %>
+            <% } %>
+        <label class="form-check-label" for="switchBtn <%= i %>"><%- items[i] %></label>
+        </div>
+        </br>
+        <% } %>
+    <% } else if (type == "dropdown") { %>
+        <div class="dropdown">
+            <% if (disabledAttr) { %>
+                <button class="btn btn-primary  dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false" aria-describedby="helpText" disabled>
+            <% } else { %>
+                <button class="btn btn-primary  dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false" aria-describedby="helpText">
+            <%} %>
+        <%= title%>
+        </button>
+        <small id="helpText" class="form-text text-muted"><%- help %></small>
+        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
+        <slot></slot>
+        </div>
+        </div>
+
+    <% } else { %>
+        incorrect input field type
+    <% } %>
+
+</template>

From 2b5da09b2213092a1e36417a4be2cd59c7ec50fb Mon Sep 17 00:00:00 2001
From: Samarth Gulati <samarth.gulati@gramener.com>
Date: Tue, 21 Sep 2021 16:36:53 +0530
Subject: [PATCH 8/8] add support for style class and id

---
 src/uifactory-config.html | 41 ++++++++++++++++++++++++++++++++++++++-
 1 file changed, 40 insertions(+), 1 deletion(-)

diff --git a/src/uifactory-config.html b/src/uifactory-config.html
index 215ce5d..1e2b222 100644
--- a/src/uifactory-config.html
+++ b/src/uifactory-config.html
@@ -1,3 +1,18 @@
+<template $name="custom-property">
+  <button>+ custom property</button>
+  <bs5-input style="display: none" title="custom property name" help="hit enter to create new field"></bs5-input>
+  <script onclick>
+    if(!e.target.matches('button')) return
+    this.querySelector('bs5-input').style.display = 'block'
+    e.target.style.display = 'none'
+  </script>
+  <script onkeypress>
+    if(!e.target.matches('input')) return
+    if(e.key !== 'Enter') return
+    this.querySelector('button').style.display = 'block'
+    this.querySelector('bs5-input').style.display = 'none'
+  </script>
+</template>
 <template $name="uifactory-config" component="comic-gen" ratio="2:5">
   <style>
     /* Customize website's scrollbar like Mac OS
@@ -53,6 +68,21 @@
       display: flex;
       font-family: monospace;
     } 
+    uifactory-config bs5-input {
+      display: block;
+    }
+    uifactory-config bs5-input[data-type="attribute"] {
+      background: hsl(90deg, 100%, 97%);
+    }
+    uifactory-config bs5-input[data-type="property"] {
+      background: hsl(50deg, 100%, 98%);
+    }
+    uifactory-config bs5-input[data-type="style"] {
+      background: hsl(20deg, 100%, 98%);
+    }
+    uifactory-config bs5-input[type="textarea"] {
+      margin-bottom: 1rem;
+    }
     uifactory-config bs5-input[title="innerHTML"] {
       font-family: monospace;
     }
@@ -69,6 +99,9 @@
     <bs5-input data-type="property" type="textarea" title="innerHTML"></bs5-input>
     <bs5-input data-type="style" default="auto" title="width"></bs5-input>
     <bs5-input data-type="style" default="auto" title="height"></bs5-input>
+    <bs5-input data-type="property" default="" title="style"></bs5-input>
+    <bs5-input data-type="property" default="" title="class"></bs5-input>
+    <bs5-input data-type="property" default="" title="id"></bs5-input>
   </section>
   <section class="preview"></section>
   <pre>
@@ -146,7 +179,13 @@
       if('type' in bs5Input.dataset && bs5Input.dataset.type === 'style') {
         comp.style[prop.name] = prop.value
       } else if('type' in bs5Input.dataset && bs5Input.dataset.type === 'property') {
-        comp[bs5Input.title] = prop.value
+        let val = ''
+        if(bs5Input.title === 'style') {
+          this.querySelectorAll('bs5-input[data-type="style"] input').forEach(p => {
+            val += `${p.name}:${p.value}; `
+          })
+        }
+        comp[bs5Input.title] = val + prop.value
       } else {
         if(prop.value.length > 0) {
           comp.setAttribute(prop.name, prop.value)