fix(ui): add eventListeners to Textinput (#482)

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

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');
+});

packages/ui-library/src/components/forms/text-input/index.stories.ts

@@ -4,7 +4,6 @@ import { BlrTextInputRenderFunction } from './renderFunction';
 import { FormSizes, InputTypes } from '../../../globals/constants';
 import { PureIconKeys } from '@boiler/icons';
 import { Themes } from '../../../foundation/_tokens-generated/index.themes';
-import { action } from '@storybook/addon-actions';
 import { html } from 'lit-html';
 
 // this loads the all components instances and registers their html tags
@@ -227,34 +226,34 @@ export default {
       },
     },
     // Events
-    onChange: {
-      name: 'onChange',
+    blrChange: {
+      name: 'blrChange',
       description: 'Fires when the value changes.',
-      action: 'onChange',
+      action: 'blrChange',
       table: {
         category: 'Events',
       },
     },
-    onSelect: {
-      name: 'onSelect',
+    blrSelect: {
+      name: 'blrSelect',
       description: 'Fires when some text is selected.',
-      action: 'onSelect',
+      action: 'blrSelect',
       table: {
         category: 'Events',
       },
     },
-    onFocus: {
-      name: 'onFocus',
+    blrFocus: {
+      name: 'blrFocus',
       description: 'Fires when the component is focused.',
-      action: 'onFocus',
+      action: 'blrFocus',
       table: {
         category: 'Events',
       },
     },
-    onBlur: {
-      name: 'onBlur',
+    blrBlur: {
+      name: 'blrBlur',
       description: 'Fires when the component lost focus.',
-      action: 'onBlur',
+      action: 'blrBlur',
       table: {
         category: 'Events',
       },
@@ -323,57 +322,25 @@ Text Input allows users to enter textual information or data into a designated a
 export const BlrTextInput = (params: BlrTextInputType) => BlrTextInputRenderFunction(params);
 BlrTextInput.storyName = 'Text Input';
 
-const args: BlrTextInputType = {
-  theme: 'Light',
-  size: 'md',
-  type: 'text',
-  placeholder: 'Placeholder-text',
-  value: '',
-  maxLength: 200,
-  hasLabel: true,
-  label: 'Label-text',
-  labelAppendix: '(Appendix)',
-  showInputIcon: true,
-  inputIcon: 'blr360',
-  hasHint: false,
-  hintMessage: 'This is a small hint message',
-  hintIcon: 'blrInfo',
-  disabled: false,
-  readonly: false,
-  required: false,
-  hasError: false,
-  errorMessage: '',
-  errorIcon: undefined,
-  arialabel: 'TextInput',
-  textInputId: 'Input Id',
-  name: 'TextInput',
-  onChange: () => action('onChange'),
-  onSelect: () => action('onSelect'),
-  onFocus: () => action('onFocus'),
-  onBlur: () => action('onBlur'),
-};
-BlrTextInput.args = args;
 // Default parameters for Text Input component
 const defaultParams: BlrTextInputType = {
   size: 'md',
   placeholder: 'Placeholder-text',
   value: '',
   maxLength: 140,
   label: 'Label-text',
-  labelAppendix: '',
+  labelAppendix: '(Appendix)',
   hasHint: false,
   hintMessage: 'This is a small hint message',
   hintIcon: 'blrInfo',
   arialabel: 'TextInput',
-  name: '',
+  name: 'TextInput',
   theme: 'Light',
-  textInputId: '',
+  textInputId: 'Input Id',
   hasLabel: true,
-
   required: false,
   disabled: false,
   readonly: false,
-
   hasError: false,
   errorMessage: '',
   errorIcon: 'blrInfo',
@@ -382,6 +349,8 @@ const defaultParams: BlrTextInputType = {
   showInputIcon: true,
 };
 
+BlrTextInput.args = defaultParams;
+
 //disabledArgTypesTable to deactivate the controls-Panel for a story in storybook
 const argTypesToDisable = [
   'theme',
@@ -408,10 +377,10 @@ const argTypesToDisable = [
   'errorIcon',
   'arialabel',
   'name',
-  'onChange',
-  'onFocus',
-  'onBlur',
-  'onSelect',
+  'blrChange',
+  'blrSelect',
+  'blrFocus',
+  'blrBlur',
 ];
 
 const generateDisabledArgTypes = (argTypes: string[]) => {

packages/ui-library/src/components/forms/text-input/index.ts

@@ -32,10 +32,6 @@ export class BlrTextInput extends LitElement {
   @property() readonly?: boolean;
   @property() size?: FormSizesType = 'md';
   @property() required?: boolean;
-  @property() onChange?: HTMLElement['oninput'];
-  @property() onBlur?: HTMLElement['blur'];
-  @property() onFocus?: HTMLElement['focus'];
-  @property() onSelect?: HTMLElement['onselect'];
   @property() maxLength?: number;
   @property() pattern?: string;
   @property() hasError?: boolean;
@@ -48,9 +44,14 @@ export class BlrTextInput extends LitElement {
   @property() errorIcon?: SizelessIconType;
   @property() hasLabel!: boolean;
   @property() name!: string;
-
   @property() theme: ThemeType = 'Light';
 
+  // these are not triggered directly but allows us to map it internally and bve typesafe
+  @property() blrFocus?: () => void;
+  @property() blrBlur?: () => void;
+  @property() blrChange?: () => void;
+  @property() blrSelect?: () => void;
+
   @state() protected currentType: InputTypes = this.type;
   @state() protected isFocused = false;
 
@@ -59,11 +60,41 @@ export class BlrTextInput extends LitElement {
   };
 
   protected handleFocus = () => {
-    this.isFocused = true;
+    if (!this.disabled) {
+      this.isFocused = true;
+      this.dispatchEvent(
+        new CustomEvent('blrFocus', { bubbles: true, composed: true, detail: { originalEvent: event } })
+      );
+    }
   };
 
   protected handleBlur = () => {
-    this.isFocused = false;
+    if (!this.disabled) {
+      this.isFocused = false;
+      this.dispatchEvent(
+        new CustomEvent('blrBlur', { bubbles: true, composed: true, detail: { originalEvent: event } })
+      );
+    }
+  };
+
+  protected handleChange = (event: Event) => {
+    if (!this.disabled) {
+      this.dispatchEvent(
+        new CustomEvent('blrChange', { bubbles: true, composed: true, detail: { originalEvent: event } })
+      );
+    }
+  };
+
+  protected handleSelect = (event: Event) => {
+    if (!this.disabled) {
+      this.dispatchEvent(
+        new CustomEvent('blrSelect', {
+          bubbles: true,
+          composed: true,
+          detail: { originalEvent: event },
+        })
+      );
+    }
   };
 
   protected render() {
@@ -158,12 +189,13 @@ export class BlrTextInput extends LitElement {
                 ?disabled="${this.disabled}"
                 ?readonly="${this.readonly}"
                 ?required="${this.required}"
-                @input=${this.onChange}
+                @input=${this.handleChange}
                 @blur=${this.handleBlur}
                 @focus=${this.handleFocus}
                 maxlength="${this.maxLength}"
                 pattern="${this.pattern}"
                 hasError="${this.hasError}"
+                @select=${this.handleSelect}
               />
             </div>
             ${this.showInputIcon && !wasInitialPasswordField && !this.readonly