mbg-val-input 0.4.2 → 0.5.0

package/src/MbgValInput.ts

@@ -4,8 +4,10 @@ import { property, query } from 'lit/decorators.js';
 import type { MdSwitch } from '@material/web/switch/switch.js';
 import { currencyInput } from './currency-input.js';
 
+import { designTokens } from './design-tokens.js';
+
 import '@material/web/textfield/outlined-text-field.js';
-import '@material/web/select/filled-select.js';
+import '@material/web/select/outlined-select.js';
 import '@material/web/select/select-option.js';
 import '@material/web/switch/switch.js';
 
@@ -38,6 +40,8 @@ function sanitizeAndValidateInt(
   isUserInput: boolean,
   isSigned = true,
 ) {
+  if (!value) return '';
+
   // allow leading negative sign
   const signed = value[0] === '-' ? '-' : '';
   const negative = signed === '-';
@@ -104,6 +108,8 @@ function sanitizeAndValidateFloat(
   isUserInput: boolean,
   size: 32 | 64,
 ) {
+  if (!value) return '';
+
   let sanitized = '';
 
   // allow leading negative sign
@@ -177,18 +183,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
@@ -213,16 +221,27 @@ function formatTimestamp(input: string) {
 
 /** Web Component for inputting IEC61850-6 "Val" values */
 export class MbgValInput extends LitElement {
-  static styles = css`
-    md-outlined-text-field.Timestamp {
-      min-width: 250px;
-      max-width: 100%;
-      width: auto;
-    }
-  `;
+  static styles = [
+    designTokens,
+    css`
+      md-outlined-text-field.Timestamp {
+        min-width: 250px;
+        max-width: 100%;
+        width: auto;
+      }
+
+      .boolean-input {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+      }
+    `,
+  ];
 
   @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 +323,7 @@ export class MbgValInput extends LitElement {
         type="text"
         value="${validatedDefault ?? nothing}"
         @input="${this.handleBigIntInput}"
+        ?disabled="${this.readOnly}"
       ></md-outlined-text-field>`;
     }
 
@@ -316,6 +336,7 @@ export class MbgValInput extends LitElement {
       max="${max}"
       value="${validatedDefault ?? nothing}"
       @input="${this.handleIntInput}"
+      ?disabled="${this.readOnly}"
     ></md-outlined-text-field>`;
   }
 
@@ -353,6 +374,7 @@ export class MbgValInput extends LitElement {
         type="text"
         value="${validatedDefault ?? nothing}"
         @input="${this.handleFloatInput}"
+        ?disabled="${this.readOnly}"
       ></md-outlined-text-field>
     `;
   }
@@ -374,6 +396,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 +417,7 @@ export class MbgValInput extends LitElement {
         value="${this.default ?? nothing}"
         maxlength="${size}"
         @input="${this.handleStringInput}"
+        ?disabled="${this.readOnly}"
       ></md-outlined-text-field>
     `;
   }
@@ -410,7 +434,11 @@ export class MbgValInput extends LitElement {
     }
 
     return html`
-      <md-filled-select id="input" label="${this.label}">
+      <md-outlined-select
+        id="input"
+        label="${this.label}"
+        ?disabled="${this.readOnly}"
+      >
         ${ordinals.map(
           (ordinal, index) => html`
             <md-select-option
@@ -422,7 +450,7 @@ export class MbgValInput extends LitElement {
             </md-select-option>
           `,
         )}
-      </md-filled-select>
+      </md-outlined-select>
     `;
   }
 
@@ -449,6 +477,7 @@ export class MbgValInput extends LitElement {
         label="${this.label}"
         value="${validatedDefault ?? nothing}"
         @input="${this.handleTimestampInput}"
+        ?disabled="${this.readOnly}"
       ></md-outlined-text-field>
     `;
   }
@@ -470,13 +499,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-outlined-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>
@@ -491,13 +521,13 @@ export class MbgValInput extends LitElement {
         <md-select-option value="3" ?selected=${this.default === '3'}>
           <div slot="headline">3 - bad-state</div>
         </md-select-option>
-      </md-filled-select>
+      </md-outlined-select>
     `;
   }
 
   tcmdInput() {
     return html`
-      <md-filled-select id="input" label="${this.label}">
+      <md-outlined-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>
@@ -512,7 +542,7 @@ export class MbgValInput extends LitElement {
         <md-select-option value="3" ?selected=${this.default === '3'}>
           <div slot="headline">3 - reserved</div>
         </md-select-option>
-      </md-filled-select>
+      </md-outlined-select>
     `;
   }
 
@@ -533,6 +563,7 @@ export class MbgValInput extends LitElement {
         value="${sanitizeBitString(this.default) ?? nothing}"
         maxlength="${size}"
         @input="${this.handleBitStringInput}"
+        ?disabled="${this.readOnly}"
       ></md-outlined-text-field>
     `;
   }
@@ -550,9 +581,14 @@ export class MbgValInput extends LitElement {
 
   get inputs(): Partial<Record<string, TemplateResult>> {
     return {
-      BOOLEAN: html`<label
+      BOOLEAN: html`<label class="boolean-input"
         >${this.label}
-        <md-switch id="input" ?selected=${xmlBoolean(this.default)}></md-switch
+        <md-switch
+          id="input"
+          ?disabled="${this.readOnly}"
+          ?selected=${xmlBoolean(this.default)}
+          icons
+        ></md-switch
       ></label>`,
       INT8: this.intInput(8),
       INT16: this.intInput(16),
@@ -576,7 +612,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 +635,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

@@ -1,11 +1,15 @@
 import { html } from 'lit';
 
-import '@material/web/select/filled-select.js';
+import '@material/web/select/outlined-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-outlined-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>
@@ -492,6 +496,6 @@ export function currencyInput(label: string, defaultVal: string) {
       <md-select-option value="ZWG" ?selected=${defaultVal === 'ZWG'}>
         <div slot="headline">ZWG (Zimbabwe Gold)</div>
       </md-select-option>
-    </md-filled-select>
+    </md-outlined-select>
   `;
 }

package/src/design-tokens.ts

@@ -0,0 +1,32 @@
+import { css } from 'lit';
+
+export const designTokens = css`
+  :host {
+    /* public design tokens */
+    --mbg-val-input-shape: 4px;
+    --mbg-val-input-space: 16px;
+    --mbg-val-input-height: 56px;
+    --mbg-val-input-width: auto;
+    --mbg-val-input-min-width: 100px;
+    --mbg-val-input-max-width: 100%;
+
+    /* assign values specific to the text field */
+    --md-outlined-text-field-container-shape: var(--mbg-val-input-shape, 4px);
+    --md-outlined-text-field-top-space: var(--mbg-val-input-space, 16px);
+    --md-outlined-text-field-bottom-space: var(--mbg-val-input-space, 16px);
+
+    /* assign values specific to the select field */
+    --md-outlined-select-text-field-container-shape: var(
+      --mbg-val-input-shape,
+      4px
+    );
+    --md-outlined-field-top-space: var(--mbg-val-input-space, 16px);
+    --md-outlined-field-bottom-space: var(--mbg-val-input-space, 16px);
+
+    /* assign universal values */
+    height: var(--mbg-val-input-height, 56px);
+    width: var(--mbg-val-input-width, auto);
+    min-width: var(--mbg-val-input-min-width, 100px);
+    max-width: var(--mbg-val-input-max-width, 100%);
+  }
+`;

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({});