mbg-val-input 0.4.2 → 0.4.3

package/src/MbgValInput.ts

@@ -38,6 +38,8 @@ function sanitizeAndValidateInt(
   isUserInput: boolean,
   isSigned = true,
 ) {
+  if (!value) return '';
+
   // allow leading negative sign
   const signed = value[0] === '-' ? '-' : '';
   const negative = signed === '-';
@@ -104,6 +106,8 @@ function sanitizeAndValidateFloat(
   isUserInput: boolean,
   size: 32 | 64,
 ) {
+  if (!value) return '';
+
   let sanitized = '';
 
   // allow leading negative sign
@@ -177,18 +181,20 @@ function sanitizeAndValidateFloat(
 }
 
 function sanitizeOctet(value: string) {
-  return value.replace(/[^0-9a-fA-F]/g, '');
+  return value?.replace(/[^0-9a-fA-F]/g, '');
 }
 
 function sanitizeObjRef(value: string) {
-  return value.replace(/[^A-Za-z0-9_/$]/g, '');
+  return value?.replace(/[^A-Za-z0-9_/$]/g, '');
 }
 
 function sanitizeBitString(value: string) {
-  return value.replace(/[^01]/g, '');
+  return value?.replace(/[^01]/g, '');
 }
 
 function formatTimestamp(input: string) {
+  if (!input) return '';
+
   const digits = input.replace(/\D/g, '');
 
   // Extract parts
@@ -223,6 +229,8 @@ export class MbgValInput extends LitElement {
 
   @property({ type: String }) bType?: string;
 
+  @property({ type: Boolean }) readOnly = false;
+
   // If the DA/BDA is assigned a Val in DataTypeTemplates
   @property({ type: String }) default = '';
 
@@ -304,6 +312,7 @@ export class MbgValInput extends LitElement {
         type="text"
         value="${validatedDefault ?? nothing}"
         @input="${this.handleBigIntInput}"
+        ?disabled="${this.readOnly}"
       ></md-outlined-text-field>`;
     }
 
@@ -316,6 +325,7 @@ export class MbgValInput extends LitElement {
       max="${max}"
       value="${validatedDefault ?? nothing}"
       @input="${this.handleIntInput}"
+      ?disabled="${this.readOnly}"
     ></md-outlined-text-field>`;
   }
 
@@ -353,6 +363,7 @@ export class MbgValInput extends LitElement {
         type="text"
         value="${validatedDefault ?? nothing}"
         @input="${this.handleFloatInput}"
+        ?disabled="${this.readOnly}"
       ></md-outlined-text-field>
     `;
   }
@@ -374,6 +385,7 @@ export class MbgValInput extends LitElement {
         value="${sanitizeOctet(this.default) ?? nothing}"
         maxlength="${size * 2}"
         @input="${this.handleOctetInput}"
+        ?disabled="${this.readOnly}"
       ></md-outlined-text-field>
     `;
   }
@@ -394,6 +406,7 @@ export class MbgValInput extends LitElement {
         value="${this.default ?? nothing}"
         maxlength="${size}"
         @input="${this.handleStringInput}"
+        ?disabled="${this.readOnly}"
       ></md-outlined-text-field>
     `;
   }
@@ -410,7 +423,11 @@ export class MbgValInput extends LitElement {
     }
 
     return html`
-      <md-filled-select id="input" label="${this.label}">
+      <md-filled-select
+        id="input"
+        label="${this.label}"
+        ?disabled="${this.readOnly}"
+      >
         ${ordinals.map(
           (ordinal, index) => html`
             <md-select-option
@@ -449,6 +466,7 @@ export class MbgValInput extends LitElement {
         label="${this.label}"
         value="${validatedDefault ?? nothing}"
         @input="${this.handleTimestampInput}"
+        ?disabled="${this.readOnly}"
       ></md-outlined-text-field>
     `;
   }
@@ -470,13 +488,14 @@ export class MbgValInput extends LitElement {
         value="${sanitizeObjRef(this.default) ?? nothing}"
         maxlength="255"
         @input="${this.handleObjRefInput}"
+        ?disabled="${this.readOnly}"
       ></md-outlined-text-field>
     `;
   }
 
   dbposInput() {
     return html`
-      <md-filled-select id="input" label="${this.label}">
+      <md-filled-select id="input" label="${this.label}" ?disabled="${this.readOnly}">
         <md-select-option value="0" ?selected=${this.default === '0'}>
           <div slot="headline">0 - intermediate-state</div>
         </md-select-option>
@@ -497,7 +516,7 @@ export class MbgValInput extends LitElement {
 
   tcmdInput() {
     return html`
-      <md-filled-select id="input" label="${this.label}">
+      <md-filled-select id="input" label="${this.label}" ?disabled="${this.readOnly}">
         <md-select-option value="0" ?selected=${this.default === '0'}>
           <div slot="headline">0 - neutral</div>
         </md-select-option>
@@ -533,6 +552,7 @@ export class MbgValInput extends LitElement {
         value="${sanitizeBitString(this.default) ?? nothing}"
         maxlength="${size}"
         @input="${this.handleBitStringInput}"
+        ?disabled="${this.readOnly}"
       ></md-outlined-text-field>
     `;
   }
@@ -552,7 +572,11 @@ export class MbgValInput extends LitElement {
     return {
       BOOLEAN: html`<label
         >${this.label}
-        <md-switch id="input" ?selected=${xmlBoolean(this.default)}></md-switch
+        <md-switch
+          id="input"
+          ?disabled="${this.readOnly}"
+          ?selected=${xmlBoolean(this.default)}
+        ></md-switch
       ></label>`,
       INT8: this.intInput(8),
       INT16: this.intInput(16),
@@ -576,7 +600,7 @@ export class MbgValInput extends LitElement {
       VisString255: this.stringInput(255),
       Unicode255: this.stringInput(255),
       Quality: this.bitstringInput(14),
-      Currency: currencyInput(this.label, this.default),
+      Currency: currencyInput(this.label, this.default, this.readOnly),
       Enum: this.enumInput(),
       Timestamp: this.timestampInput(),
       ObjRef: this.objrefInput(),
@@ -599,6 +623,7 @@ export class MbgValInput extends LitElement {
         id="input"
         label="${this.label}"
         value="${this.default ?? nothing}"
+        ?disabled="${this.readOnly}"
       ></md-outlined-text-field>`
     );
   }

package/src/currency-input.ts

@@ -3,9 +3,13 @@ import { html } from 'lit';
 import '@material/web/select/filled-select.js';
 import '@material/web/select/select-option.js';
 
-export function currencyInput(label: string, defaultVal: string) {
+export function currencyInput(
+  label: string,
+  defaultVal: string,
+  readOnly: boolean,
+) {
   return html`
-    <md-filled-select id="input" label="${label}">
+    <md-filled-select id="input" label="${label}" ?disabled="${readOnly}">
       <md-select-option value="AED" ?selected=${defaultVal === 'AED'}>
         <div slot="headline">AED (UAE Dirham)</div>
       </md-select-option>

package/stories/index.stories.ts

@@ -6,6 +6,7 @@ export default {
   component: 'mbg-val-input',
   argTypes: {
     bType: { control: 'text' },
+    readOnly: { control: 'boolean' },
     defaultVal: { control: 'text' },
     enumOrdinals: { control: 'array' },
     enumLabels: { control: 'array' },
@@ -22,6 +23,7 @@ interface Story<T> {
 
 interface ArgTypes {
   bType?: string;
+  readOnly?: boolean;
   defaultVal?: string;
   enumOrdinals?: string[];
   enumLabels?: string[];
@@ -31,6 +33,7 @@ interface ArgTypes {
 
 const Template: Story<ArgTypes> = ({
   bType,
+  readOnly,
   defaultVal,
   enumOrdinals,
   enumLabels,
@@ -39,6 +42,7 @@ const Template: Story<ArgTypes> = ({
 }: ArgTypes) => html`
   <mbg-val-input
     .bType=${bType}
+    .readOnly=${readOnly}
     .default=${defaultVal}
     .enumOrdinals=${JSON.stringify(enumOrdinals)}
     .enumLabels=${JSON.stringify(enumLabels)}
@@ -66,6 +70,14 @@ BooleanWithDefault.args = {
   label: 'Boolean (Default: true)',
 };
 
+export const BooleanReadOnly = Template.bind({});
+BooleanReadOnly.args = {
+  bType: 'BOOLEAN',
+  defaultVal: 'true',
+  readOnly: true,
+  label: 'Boolean (Default: true)',
+};
+
 export const Int32U = Template.bind({});
 Int32U.args = {
   bType: 'INT32U',
@@ -82,6 +94,7 @@ export const Int64WithDefault = Template.bind({});
 Int64WithDefault.args = {
   bType: 'INT64',
   defaultVal: '-42',
+  readOnly: true,
   label: 'INT64 (Default: -42)',
 };
 
@@ -116,6 +129,7 @@ Octet16.args = {
   bType: 'Octet16',
   defaultVal: '0123456789ABCDEF0123456789ABCDEF',
   label: 'Octet16',
+  readOnly: true,
 };
 
 export const VisString32 = Template.bind({});
@@ -145,6 +159,14 @@ Currency.args = {
   label: 'Currency',
 };
 
+export const CurrencyReadOnly = Template.bind({});
+CurrencyReadOnly.args = {
+  bType: 'Currency',
+  defaultVal: 'JPY',
+  readOnly: true,
+  label: 'Currency',
+};
+
 export const EnumHlth = Template.bind({});
 EnumHlth.args = {
   bType: 'Enum',
@@ -154,6 +176,16 @@ EnumHlth.args = {
   defaultVal: '1',
 };
 
+export const EnumHlthReadOnly = Template.bind({});
+EnumHlthReadOnly.args = {
+  bType: 'Enum',
+  enumOrdinals: ['1', '2', '3'],
+  enumLabels: ['Ok', 'Warning', 'Alarm'],
+  label: 'Enum - HealthKind',
+  defaultVal: '1',
+  readOnly: true,
+};
+
 export const Timestamp = Template.bind({});
 Timestamp.args = {
   bType: 'Timestamp',
@@ -170,9 +202,17 @@ ObjRef.args = {
 
 export const Dbpos = Template.bind({});
 Dbpos.args = {
+  bType: 'Dbpos',
+  label: 'Double-Point Status',
+  defaultVal: '0',
+};
+
+export const DbposReadOnly = Template.bind({});
+DbposReadOnly.args = {
   bType: 'Dbpos',
   label: 'Double-Point Status',
   defaultVal: '2',
+  readOnly: true,
 };
 
 export const Tcmd = Template.bind({});
@@ -182,6 +222,14 @@ Tcmd.args = {
   defaultVal: '2',
 };
 
+export const TcmdReadOnly = Template.bind({});
+TcmdReadOnly.args = {
+  bType: 'Tcmd',
+  label: 'Tap Command',
+  defaultVal: '3',
+  readOnly: true,
+};
+
 export const EntryTime = Template.bind({});
 EntryTime.args = {
   bType: 'EntryTime',
@@ -206,6 +254,7 @@ OptFlds.args = {
   bType: 'OptFlds',
   label: 'Optional Fields',
   defaultVal: '0000000011',
+  readOnly: false,
 };
 
 export const SvOptFlds = Template.bind({});
@@ -213,6 +262,7 @@ SvOptFlds.args = {
   bType: 'SvOptFlds',
   label: 'Sampled Values Optional Fields',
   defaultVal: '000101',
+  readOnly: true,
 };
 
 export const LogOptFlds = Template.bind({});