fix(ui-library): adding text input to example js app

deven-org · Feb 8, 2024 · 5de0361 · 5de0361
1 parent 7fad804
commit 5de0361
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 0 deletions.
diff --git a/packages/js-example-app/src/assets/index.html b/packages/js-example-app/src/assets/index.html
@@ -110,6 +110,11 @@ <h2>Vanilla JS Example Application</h2>
           <blr-radio size="md"></blr-radio>
         </div>
 
+        <div class="component">
+          <p>Text Input</p>
+          <blr-text-input size="md" placeholder="Placeholder-text" value="" maxlength="140" label="Label-text" labelappendix="(Appendix)" arialabel="TextInput" name="TextInput" theme="Light" textinputid="Input Id" haslabel="true" type="text" inputicon="blr360" showinputicon="true"></blr-text-input>
+        </div>
+
         <div class="component">
           <p>Tab Bar</p>
           <blr-tab-bar

diff --git a/packages/js-example-app/src/index.js b/packages/js-example-app/src/index.js
@@ -8,6 +8,7 @@ const logsContainer = document.querySelector('#logs');
 const blrButton = document.getElementsByTagName('blr-text-button')[0];
 const blrCheckbox = document.getElementsByTagName('blr-checkbox')[0];
 const blrSelect = document.getElementsByTagName('blr-select')[0];
+const blrTextInput = document.getElementsByTagName('blr-text-input')[0];
 
 const addLog = (log) => {
   logsContainer.innerHTML = logsContainer.innerHTML + log + '<br>';
@@ -66,3 +67,15 @@ blrCheckbox.addEventListener('blrBlur', () => {
 blrSelect.addEventListener('blrChange', (e) => {
   addLog('blr-select changed');
 });
+
+blrTextInput.addEventListener('blrFocus', (e) => {
+  addLog('blr-text-input focused');
+});
+
+blrTextInput.addEventListener('blrBlur', (e) => {
+  addLog('blr-text-input blurred');
+});
+
+blrTextInput.addEventListener('blrChange', (e) => {
+  addLog('blr-text-input changed');
+});