fix(ui-library): updating js example app change events with values (#…

…1066)

packages/js-example-app/src/index.ejs

@@ -188,6 +188,19 @@
             <p label="Tab 11" icon="blr360">Tab 11</p>
           </blr-tab-bar>
         </div>
+
+        <div class="component">
+          <p>Toggle Switch</p>
+          <blr-label-toggleswitch
+            theme="Light"
+            size="md"
+            show-state-label="true"
+            label="Label-text"
+            check-input-id="toggle-switchId"
+            variant="trailing"
+            name="toggle-switch-name"
+          ></blr-label-toggleswitch>
+        </div>
       </div>
 
       <div id="logs" class="logsWrapper"></div>

packages/js-example-app/src/index.js

@@ -12,6 +12,9 @@ const blrSelect = document.getElementsByTagName('blr-select')[0];
 const blrInputFieldText = document.getElementsByTagName('blr-input-field-text')[0];
 const blrInputFieldNumber = document.getElementsByTagName('blr-input-field-number')[0];
 const blrTextArea = document.getElementsByTagName('blr-textarea')[0];
+const blrRadio = document.getElementsByTagName('blr-radio')[0];
+const blrToggleSwitch = document.getElementsByTagName('blr-label-toggleswitch')[0];
+const blrTabBar = document.getElementsByTagName('blr-tab-bar')[0];
 
 const addLog = (log) => {
   logsContainer.innerHTML = logsContainer.innerHTML + log + '<br>';
@@ -24,10 +27,10 @@ toggleLoadingButton.addEventListener('click', () => {
 
   if (currentState) {
     blrButtonText.removeAttribute('loading');
-    addLog('Set button text loading state to false');
+    addLog('Set blr-button-text loading state to false');
   } else {
     blrButtonText.setAttribute('loading', 'true');
-    addLog('Set button text loading state to true');
+    addLog('Set blr-button-text loading state to true');
   }
 });
 
@@ -36,10 +39,10 @@ toggleDisabledState.addEventListener('click', () => {
 
   if (currentState) {
     blrButtonText.removeAttribute('disabled');
-    addLog('Set text button disabled state to false');
+    addLog('Set blr-button-text disabled state to false');
   } else {
     blrButtonText.setAttribute('disabled', 'true');
-    addLog('Set text button loading state to true');
+    addLog('Set blr-button-text loading state to true');
   }
 });
 
@@ -79,16 +82,16 @@ blrCheckbox.addEventListener('blrBlur', () => {
   addLog('blr-checkbox blurred');
 });
 
-blrSelect.addEventListener('blrSelectedValueChange', () => {
-  addLog('blr-select changed');
+blrSelect.addEventListener('blrSelectedValueChange', (e) => {
+  addLog('blr-select changed: ' + e.detail.selectedValue);
 });
 
 blrSelect.addEventListener('blrFocus', () => {
-  addLog('blr-select focus');
+  addLog('blr-select focused');
 });
 
 blrSelect.addEventListener('blrBlur', () => {
-  addLog('blr-select blur');
+  addLog('blr-select blurred');
 });
 
 blrInputFieldText.addEventListener('blrFocus', () => {
@@ -99,20 +102,28 @@ blrInputFieldText.addEventListener('blrBlur', () => {
   addLog('blr-input-field-text blurred');
 });
 
-blrInputFieldText.addEventListener('blrTextValueChange', () => {
-  addLog('blr-input-field-text changed');
+blrInputFieldText.addEventListener('blrSelect', () => {
+  addLog('blr-input-field-text selected');
+});
+
+blrInputFieldText.addEventListener('blrTextValueChange', (e) => {
+  addLog('blr-input-field-text changed: ' + e.detail.inputValue);
 });
 
 blrInputFieldNumber.addEventListener('blrFocus', () => {
-  addLog('blr-number-input focused');
+  addLog('blr-input-field-number focused');
 });
 
 blrInputFieldNumber.addEventListener('blrBlur', () => {
-  addLog('blr-number-input blurred');
+  addLog('blr-input-field-number blurred');
+});
+
+blrInputFieldNumber.addEventListener('blrSelect', () => {
+  addLog('blr-input-field-number selected');
 });
 
-blrInputFieldNumber.addEventListener('blrNumberValueChange', () => {
-  addLog('blr-number-input value changed');
+blrInputFieldNumber.addEventListener('blrNumberValueChange', (e) => {
+  addLog('blr-input-field-number value changed: ' + e.detail.inputValue);
 });
 
 blrTextArea.addEventListener('blrFocus', () => {
@@ -123,10 +134,46 @@ blrTextArea.addEventListener('blrBlur', () => {
   addLog('blr-textarea blurred');
 });
 
-blrTextArea.addEventListener('blrChange', () => {
-  addLog('blr-textarea changed');
+blrTextArea.addEventListener('blrTextValueChange', (e) => {
+  addLog('blr-textarea changed: ' + e.detail.inputValue);
 });
 
 blrTextArea.addEventListener('blrSelect', () => {
   addLog('blr-textarea selected');
 });
+
+blrRadio.addEventListener('blrFocus', () => {
+  addLog('blr-radio focused');
+});
+
+blrRadio.addEventListener('blrBlur', () => {
+  addLog('blr-radio blurred');
+});
+
+blrRadio.addEventListener('blrSelectedValueChange', (e) => {
+  addLog('blr-radio changed: ' + e.detail.selectedValue);
+});
+
+blrToggleSwitch.addEventListener('blrFocus', () => {
+  addLog('blr-toggleswitch focused');
+});
+
+blrToggleSwitch.addEventListener('blrBlur', () => {
+  addLog('blr-toggleswitch blurred');
+});
+
+blrToggleSwitch.addEventListener('blrCheckedChange', (e) => {
+  addLog('blr-toggleswitch changed: ' + e.detail.checkedState);
+});
+
+blrTabBar.addEventListener('blrFocus', () => {
+  addLog('blr-tab-bar focused');
+});
+
+blrTabBar.addEventListener('blrBlur', () => {
+  addLog('blr-tab-bar blurred');
+});
+
+blrTabBar.addEventListener('blrChange', (e) => {
+  addLog('blr-tab-bar changed: ' + e.detail.changedValue);
+});

packages/ui-library/src/components/checkbox/index.stories.ts

@@ -173,19 +173,22 @@ export default {
     },
     // Events
     blrCheckedChange: {
-      description: 'Fires when the value changes.',
+      description: 'Fires when the component checked state changes.',
+      action: 'blrCheckedChange',
       table: {
         category: 'Events',
       },
     },
     blrFocus: {
       description: 'Fires when the component is focused.',
+      action: 'blrFocus',
       table: {
         category: 'Events',
       },
     },
     blrBlur: {
       description: 'Fires when the component lost focus.',
+      action: 'blrBlur',
       table: {
         category: 'Events',
       },

packages/ui-library/src/components/checkbox/index.ts

@@ -32,7 +32,7 @@ export type BlrCheckboxEventHandlers = {
 /**
  * @fires blrFocus Checkbox received focus
  * @fires blrBlur Checkbox lost focus
- * @fires blrCheckedChange Checkbox state changed (event.checkState)
+ * @fires blrCheckedChange Checkbox state changed (currentCheckedState)
  */
 export class BlrCheckbox extends LitElementCustom {
   static styles = [];

packages/ui-library/src/components/input-field-number/index.ts

@@ -87,7 +87,7 @@ export class BlrInputFieldNumber extends LitElementCustom {
       const step = Number(this.step ?? 1);
       const newValue = oldValue + step;
       this.currentValue = newValue;
-      this.dispatchEvent(createBlrNumberValueChangeEvent({ originalEvent: event, oldValue, newValue }));
+      this.dispatchEvent(createBlrNumberValueChangeEvent({ originalEvent: event, inputValue: newValue }));
       this.dispatchEvent(createBlrNumberStepperClickEvent({ originalEvent: event, direction: 'increase', step }));
       this.requestUpdate('currentValue');
     }
@@ -99,7 +99,7 @@ export class BlrInputFieldNumber extends LitElementCustom {
       const step = Number(this.step ?? 1);
       const newValue = oldValue - step;
       this.currentValue = newValue;
-      this.dispatchEvent(createBlrNumberValueChangeEvent({ originalEvent: event, oldValue, newValue }));
+      this.dispatchEvent(createBlrNumberValueChangeEvent({ originalEvent: event, inputValue: newValue }));
       this.dispatchEvent(createBlrNumberStepperClickEvent({ originalEvent: event, direction: 'decrease', step }));
       this.requestUpdate('currentValue');
     }
@@ -131,10 +131,9 @@ export class BlrInputFieldNumber extends LitElementCustom {
   };
 
   protected handleChange(event: Event) {
-    const oldValue = Number(this.currentValue);
     const newValue = Number(this._numberFieldNode.value) || 0;
     this.currentValue = newValue;
-    this.dispatchEvent(createBlrNumberValueChangeEvent({ originalEvent: event, oldValue, newValue }));
+    this.dispatchEvent(createBlrNumberValueChangeEvent({ originalEvent: event, inputValue: newValue }));
   }
 
   protected customFormat(cur: number, fractions: number, digits: number): string {
@@ -330,7 +329,7 @@ export class BlrInputFieldNumber extends LitElementCustom {
                 ?disabled="${this.disabled}"
                 ?readonly="${this.readonly}"
                 ?required="${this.required}"
-                @change=${this.handleChange}
+                @input=${this.handleChange}
                 @blur=${this.handleBlur}
                 @focus=${this.handleFocus}
                 @select=${this.handleSelect}

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

@@ -1,6 +1,6 @@
 import { html, nothing } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
-import { property, state } from 'lit/decorators.js';
+import { property, query, state } from 'lit/decorators.js';
 import { styleCustom } from './index.css';
 import { formDark, formLight } from '../../foundation/semantic-tokens/form.css';
 import { inputFieldTextLight, inputFieldTextDark } from './index.css';
@@ -41,6 +41,10 @@ export type BlrInputFieldTextEventHandlers = {
  */
 export class BlrInputFieldText extends LitElementCustom {
   static styles = [styleCustom];
+
+  @query('input')
+  protected _inputFieldTextNode!: HTMLInputElement;
+
   @property() inputFieldTextId!: string;
   @property() type: InputTypes = 'text';
   @property() arialabel!: string;
@@ -90,7 +94,9 @@ export class BlrInputFieldText extends LitElementCustom {
 
   protected handleChange = (event: Event) => {
     if (!this.disabled) {
-      this.dispatchEvent(createBlrTextValueChangeEvent({ originalEvent: event }));
+      this.dispatchEvent(
+        createBlrTextValueChangeEvent({ originalEvent: event, inputValue: this._inputFieldTextNode.value })
+      );
     }
   };
 

packages/ui-library/src/components/radio/index.ts

@@ -1,6 +1,6 @@
 import { html, nothing } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
-import { property } from 'lit/decorators.js';
+import { property, query } from 'lit/decorators.js';
 import { styleCustom } from './index.css';
 import { InputSizesType } from '../../globals/types';
 import { formDark, formLight } from '../../foundation/semantic-tokens/form.css';
@@ -11,12 +11,16 @@ import { ThemeType } from '../../foundation/_tokens-generated/index.themes';
 import { BlrFormCaptionGroupRenderFunction } from '../form-caption-group/renderFunction';
 import { BlrFormCaptionRenderFunction } from '../form-caption/renderFunction';
 import { BlrFormLabelInlineRenderFunction } from '../form-label/form-label-inline/renderFunction';
+import { createBlrBlurEvent, createBlrFocusEvent, createBlrSelectedValueChangeEvent } from '../../globals/events';
 import { LitElementCustom } from '../../utils/lit-element-custom';
 
 export class BlrRadio extends LitElementCustom {
   static styles = [styleCustom];
 
-  @property() radioId!: string;
+  @query('input')
+  protected _radioNode!: HTMLInputElement;
+
+  @property() optionId!: string;
   @property() label!: string;
   @property() disabled?: boolean;
   @property() readonly?: boolean;
@@ -36,6 +40,24 @@ export class BlrRadio extends LitElementCustom {
 
   @property() theme: ThemeType = 'Light';
 
+  protected handleFocus = (event: FocusEvent) => {
+    if (!this.disabled) {
+      this.dispatchEvent(createBlrFocusEvent({ originalEvent: event }));
+    }
+  };
+
+  protected handleBlur = (event: FocusEvent) => {
+    if (!this.disabled) {
+      this.dispatchEvent(createBlrBlurEvent({ originalEvent: event }));
+    }
+  };
+
+  protected handleChange(event: Event) {
+    this.dispatchEvent(
+      createBlrSelectedValueChangeEvent({ originalEvent: event, selectedValue: this._radioNode.value })
+    );
+  }
+
   protected render() {
     if (this.sizeVariant) {
       const dynamicStyles = this.theme === 'Light' ? [formLight, radioLight] : [formDark, radioDark];
@@ -83,7 +105,7 @@ export class BlrRadio extends LitElementCustom {
         </style>
         <div class="blr-radio ${classes}">
           <input
-            id=${this.radioId || nothing}
+            id=${this.optionId || nothing}
             class="${classes} input-control"
             type="radio"
             name=${this.name}
@@ -92,14 +114,14 @@ export class BlrRadio extends LitElementCustom {
             ?invalid=${this.hasError}
             ?checked=${this.checked}
             ?required=${this.required}
-            @input=${this.blrChange}
-            @blur=${this.blrBlur}
-            @focus=${this.blrFocus}
+            @input=${this.handleChange}
+            @focus=${this.handleFocus}
+            @blur=${this.handleBlur}
           />
           <div class="label-wrapper">
             ${BlrFormLabelInlineRenderFunction({
               labelText: this.label,
-              forValue: this.radioId,
+              forValue: this.optionId,
               labelSize: this.sizeVariant,
             })}
             ${this.hasHint || this.hasError

packages/ui-library/src/components/select/index.ts

@@ -1,6 +1,6 @@
 import { html, nothing } from 'lit';
 import { ClassMapDirective, classMap } from 'lit/directives/class-map.js';
-import { property, state } from 'lit/decorators.js';
+import { property, query, state } from 'lit/decorators.js';
 import { styleCustom } from './index.css';
 import { FormSizesType, SizesType } from '../../globals/types';
 import { selectInputLight, selectInputDark } from './index.css';
@@ -40,6 +40,9 @@ export type BlrSelectEventHandlers = {
 export class BlrSelect extends LitElementCustom {
   static styles = [styleCustom];
 
+  @query('select')
+  protected _selectNode!: HTMLInputElement;
+
   @property() arialabel?: string;
   @property() selectId!: string;
   @property() labelAppendix?: string;
@@ -88,7 +91,9 @@ export class BlrSelect extends LitElementCustom {
   }
 
   protected handleChange(event: Event) {
-    this.dispatchEvent(createBlrSelectedValueChangeEvent({ originalEvent: event }));
+    this.dispatchEvent(
+      createBlrSelectedValueChangeEvent({ originalEvent: event, selectedValue: this._selectNode.value })
+    );
   }
 
   protected renderIcon(classes: DirectiveResult<typeof ClassMapDirective>) {
@@ -199,7 +204,7 @@ export class BlrSelect extends LitElementCustom {
                 name=${this.name || nothing}
                 ?disabled=${this.disabled}
                 ?required=${this.required}
-                @change=${this.handleChange}
+                @input=${this.handleChange}
                 @focus=${this.handleFocus}
                 @blur=${this.handleBlur}
               >