Adding components

.eslintrc

@@ -0,0 +1,10 @@
+{
+    "extends": "eslint:recommended",
+    "rules": {
+        "consistent-return": 2,
+        "indent"           : [1, 4],
+        "no-else-return"   : 1,
+        "semi"             : [1, "always"],
+        "space-unary-ops"  : 2
+    }
+}

.vscode/settings.json

@@ -4,5 +4,5 @@
     "**/bower_components": true,
     "**/.sfdx": true
   },
-  "eslint.nodePath": "/Users/leviolson/.vscode/extensions/salesforce.salesforcedx-vscode-lwc-47.17.1/node_modules"
+  "vlocity.sfdxUsername": "lolson@eaglecrk.com.vusrvo-009555"
 }

force-app/main/default/lwc/checkboxComponent/checkboxComponent.html

@@ -0,0 +1,11 @@
+<template>
+    <vlocity_cmt-omniscript-checkbox
+        json-def={jsonDef}
+        data-omni-key={jsonDef.name}
+        json-data={jsonData}
+        layout={layout}
+        resume={resume}
+        script-header-def={scriptHeaderDef}
+        seed-json={seedDataJSON}>
+    </vlocity_cmt-omniscript-checkbox>
+</template>

force-app/main/default/lwc/checkboxComponent/checkboxComponent.js

@@ -0,0 +1,15 @@
+import { LightningElement } from "lwc";
+import OmniscriptCheckbox from "vlocity_cmt/omniscriptCheckbox";
+
+export default class checkboxComponent extends OmniscriptCheckbox {
+
+    connectedCallback() {
+        console.debug("checkboxComponent - connected");
+        this.omniApplyCallResp({'checkbox':false});
+    }
+
+    handleChange(evt) {
+        console.debug("hangleChange: ", evt);
+    }
+
+}

force-app/main/default/lwc/checkboxComponent/checkboxComponent.js-meta.xml

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
+    <apiVersion>46.0</apiVersion>
+    <isExposed>true</isExposed>
+    <runtimeNamespace>vlocity_cmt</runtimeNamespace>
+    <masterLabel>checkboxComponent</masterLabel>
+</LightningComponentBundle>

force-app/main/default/lwc/customLayout/customLayout.html

@@ -5,4 +5,4 @@
     <div class="slds-grid">
         <slot></slot>
     </div>
-</template>
+</template>

force-app/main/default/lwc/customLayout/customLayout.js

@@ -12,8 +12,8 @@ export default class CustomLayout extends BaseLayout(LightningElement) {
 
     connectedCallback() {
         this.cards = this.definition.Cards;
-        console.log("This is definition object", JSON.parse(JSON.stringify(this.definition)));
+        console.log("This is defination object", JSON.parse(JSON.stringify(this.definition)));
         console.log("This is records", JSON.parse(JSON.stringify(this.records)));
         console.log("This is cards", JSON.parse(JSON.stringify(this.cards)));
     }
-}
+}

force-app/main/default/lwc/fileUpload/fileUpload.html

@@ -0,0 +1,8 @@
+<template>
+    <vlocity_cmt-input
+        theme="nds"
+        type="file"
+        label="Accept everything"
+        oninput={handleInput}>
+    </vlocity_cmt-input>
+</template>

force-app/main/default/lwc/fileUpload/fileUpload.js

@@ -0,0 +1,36 @@
+import { LightningElement, api } from "lwc";
+import Input from "vlocity_cmt/input";
+import template from "./fileUpload.html"
+import { OmniscriptBaseMixin } from 'vlocity_cmt/omniscriptBaseMixin';
+
+export default class fileUpload extends OmniscriptBaseMixin(Input){
+
+    get value() {
+        return this._value;
+    }
+    @api
+    set value(val) {
+        console.debug('Setter files', val);
+        this._value = val;
+    }
+    get FileList() {
+        return this._FileList;
+    }
+    @api
+    set FileList(val) {
+        console.debug('Setter files', val);
+        this._FileList = val;
+    }
+
+    connectedCallback() {
+        console.debug("fileUpload - connected");
+    }
+
+    handleInput(evt) {
+        console.debug("handleInput", this.inputValue);
+    }
+
+    render() {
+        return template;
+    }
+}

force-app/main/default/lwc/fileUpload/fileUpload.js-meta.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
+  <apiVersion>46.0</apiVersion>
+  <isExposed>true</isExposed>
+  <runtimeNamespace>vlocity_cmt</runtimeNamespace>
+</LightningComponentBundle>

force-app/main/default/lwc/jsconfig.json

@@ -9,6 +9,9 @@
             "c/helloWorld": [
                 "helloWorld/helloWorld.js"
             ],
+            "c/myAccordionComponent": [
+                "myAccordionComponent/myAccordionComponent.js"
+            ],
             "c/myActionComponent": [
                 "myActionComponent/myActionComponent.js"
             ],
@@ -20,6 +23,27 @@
             ],
             "c/myTextComponent": [
                 "myTextComponent/myTextComponent.js"
+            ],
+            "c/myCardComponent": [
+                "myCardComponent/myCardComponent.js"
+            ],
+            "c/myCssComponent": [
+                "myCssComponent/myCssComponent.js"
+            ],
+            "c/myCustomComponentWithNavButtons": [
+                "myCustomComponentWithNavButtons/myCustomComponentWithNavButtons.js"
+            ],
+            "c/myCheckboxComponent": [
+                "myCheckboxComponent/myCheckboxComponent.js"
+            ],
+            "c/checkboxComponent": [
+                "checkboxComponent/checkboxComponent.js"
+            ],
+            "c/fileUpload": [
+                "fileUpload/fileUpload.js"
+            ],
+            "c/typeaheadAddressComponent": [
+                "typeaheadAddressComponent/typeaheadAddressComponent.js"
             ]
         }
     },

force-app/main/default/lwc/myAccordionComponent/myAccordionComponent.html

@@ -0,0 +1,67 @@
+<template>
+    <ul class="nds-accordion">
+        <li class="nds-accordion__list-item">
+            <section class='nds-accordion__section a1'>
+                <div class="nds-accordion__summary">
+                    <h3 class="nds-text-heading_small nds-accordion__summary-heading">
+                        <button onclick={a1Click} aria-controls="accordion-details-01" aria-expanded="true" class="nds-button nds-button_reset nds-accordion__summary-action">
+                            <svg class="nds-accordion__summary-action-icon nds-button__icon nds-button__icon_left" aria-hidden="true">
+                                <use xlink:href="/resource/1581107539000/vlocity_cmt__newport/assets/icons/utility-sprite/svg/symbols.svg#switch"></use>
+                            </svg>
+                            <span class="nds-truncate" title="Accordion summary">Accordion summary</span>
+                        </button>
+                    </h3>
+                    <button onclick={a1Click} class="nds-button nds-button_icon nds-button_icon-border-filled nds-button_icon-x-small nds-shrink-none" aria-haspopup="true">
+                        <svg class="nds-button__icon" aria-hidden="true">
+                            <use xlink:href="/resource/1581107539000/vlocity_cmt__newport/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
+                        </svg>
+                        <span class="nds-assistive-text">More Options</span>
+                    </button>
+                </div>
+                <div aria-hidden="false" class="nds-accordion__content" id="accordion-details-01">Accordion details - A</div>
+            </section>
+        </li>
+        <li class="nds-accordion__list-item">
+            <section class='nds-accordion__section a2'>
+                <div class="nds-accordion__summary">
+                    <h3 class="nds-text-heading_small nds-accordion__summary-heading">
+                        <button onclick={a2Click} aria-controls="accordion-details-02" aria-expanded="false" class="nds-button nds-button_reset nds-accordion__summary-action">
+                            <svg class="nds-accordion__summary-action-icon nds-button__icon nds-button__icon_left" aria-hidden="true">
+                                <use xlink:href="/resource/1581107539000/vlocity_cmt__newport/assets/icons/utility-sprite/svg/symbols.svg#switch"></use>
+                            </svg>
+                            <span class="nds-truncate" title="Accordion summary">Accordion summary</span>
+                        </button>
+                    </h3>
+                    <button onclick={a2Click} class="nds-button nds-button_icon nds-button_icon-border-filled nds-button_icon-x-small nds-shrink-none" aria-haspopup="true">
+                        <svg class="nds-button__icon" aria-hidden="true">
+                            <use xlink:href="/resource/1581107539000/vlocity_cmt__newport/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
+                        </svg>
+                        <span class="nds-assistive-text">More Options</span>
+                    </button>
+                </div>
+                <div aria-hidden="true" class="nds-accordion__content" id="accordion-details-02">Accordion details - B</div>
+            </section>
+        </li>
+        <li class="nds-accordion__list-item">
+            <section class='nds-accordion__section a3'>
+                <div class="nds-accordion__summary">
+                    <h3 class="nds-text-heading_small nds-accordion__summary-heading">
+                        <button onclick={a3Click} aria-controls="accordion-details-03" aria-expanded="false" class="nds-button nds-button_reset nds-accordion__summary-action">
+                            <svg class="nds-accordion__summary-action-icon nds-button__icon nds-button__icon_left" aria-hidden="true">
+                                <use xlink:href="/resource/1581107539000/vlocity_cmt__newport/assets/icons/utility-sprite/svg/symbols.svg#switch"></use>
+                            </svg>
+                            <span class="nds-truncate" title="Accordion summary">Accordion summary</span>
+                        </button>
+                    </h3>
+                    <button onclick={a3Click} class="nds-button nds-button_icon nds-button_icon-border-filled nds-button_icon-x-small nds-shrink-none" aria-haspopup="true">
+                        <svg class="nds-button__icon" aria-hidden="true">
+                            <use xlink:href="/resource/1581107539000/vlocity_cmt__newport/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
+                        </svg>
+                        <span class="nds-assistive-text">More Options</span>
+                    </button>
+                </div>
+                <div aria-hidden="true" class="nds-accordion__content" id="accordion-details-03">Accordion details - C</div>
+            </section>
+        </li>
+    </ul>
+</template>

force-app/main/default/lwc/myAccordionComponent/myAccordionComponent.js

@@ -0,0 +1,49 @@
+import { LightningElement, track } from "lwc";
+// import omniscriptCustomLwc from "vlocity_cmt/omniscriptCustomLwc";
+import template from "./myAccordionComponent.html"
+import { OmniscriptBaseMixin } from 'vlocity_cmt/omniscriptBaseMixin';
+
+export default class myAccordionComponent extends OmniscriptBaseMixin(LightningElement) {
+
+    // Besides copy paste from https://nds.vlocity.tools/?path=/story/ui-components-accordion--default
+    //   the only thing to add to HTML is the class "a1", "a2", etc... on
+    //   the `nds-accordion__secion` section element
+    accordions = 3;
+
+    // Whether multiple accordions can be open at the same time
+    showMultiple = false;
+
+    // Smart method that dynamically adjusts which accordions are open
+    //   based on `showMultiple` variable
+    accordionOpen(num) {
+        let accordion = this.template.querySelector(`.a${num}`);
+        // console.debug("accordion", num, accordion, accordion.classList);
+        accordion.classList.toggle('nds-is-open');
+
+        if (!this.showMultiple) {
+            for (let i = 1; i <= this.accordions; i++) {
+                if (i === num) continue;
+                let a = this.template.querySelector('.a' + i);
+                a.classList.remove('nds-is-open');
+            }
+        }
+    }
+
+    a1Click() {
+        this.accordionOpen(1);
+    }
+    a2Click() {
+        this.accordionOpen(2);
+    }
+    a3Click() {
+        this.accordionOpen(3);
+    }
+
+    connectedCallback() {
+        console.debug('myAccordionComponent', this);
+    }
+
+    render() {
+        return template;
+    }
+}

force-app/main/default/lwc/myAccordionComponent/myAccordionComponent.js-meta.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
+    <apiVersion>46.0</apiVersion>
+    <isExposed>true</isExposed>
+    <runtimeNamespace>vlocity_cmt</runtimeNamespace>
+</LightningComponentBundle>

force-app/main/default/lwc/myActionComponent/myActionComponent.html

@@ -1,17 +1,16 @@
 <template>
     Wow.
-    <vlocity_cmt-action
-        icon-extraclass="slds-m-right_small"
-        state-action={item}
-        action-wrapperclass="slds-size--1-of-1"
-        action-labelclass="slds-size--7-of-8"
-        icon-wrapperclass="slds-size--1-of-8"
-    ></vlocity_cmt-action>
-
+    <!-- <vlocity_cmt-action
+         icon-extraclass="slds-m-right_small"
+         state-action={item}
+         action-wrapperclass="slds-size--1-of-1"
+         action-labelclass="slds-size--7-of-8"
+         icon-wrapperclass="slds-size--1-of-8"
+         ></vlocity_cmt-action>
+    -->
 
     <vlocity_cmt-action
         debug="true"
-        definition=""
         onclick={fetchData}
         ondata={onSuccessCallback}
         onerror={onErrorCallback}>
@@ -29,4 +28,4 @@
         <p>URL: {url}</p>
     </vlocity_cmt-navigate-action>
 
-</template>
+</template>

force-app/main/default/lwc/myActionComponent/myActionComponent.js

@@ -50,4 +50,4 @@ export default class MyActionComponent extends OmniscriptBaseMixin(LightningElem
     }
 
 
-}
+}

force-app/main/default/lwc/myCardComponent/myCardComponent.html

@@ -0,0 +1,23 @@
+<template>
+    <article class="nds-card">
+        <div class="nds-card__header nds-grid">
+            <header class="nds-media nds-media_center nds-has-flexi-truncate">
+                <div class="nds-media__figure">
+                    <span class="nds-icon_container nds-icon-standard-contact" title="description of icon when needed">
+                        <svg class="nds-icon nds-icon_small" aria-hidden="true">
+                            <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#contact"></use>
+                        </svg>
+                    </span>
+                </div>
+                <div class="nds-media__body">
+                    <h2>
+                        <a href="javascript:void(0);" class="nds-card__header-link nds-truncate" title={title}>
+                            <span class="nds-text-heading_small">{title}</span>
+                        </a>
+                    </h2>
+                </div>
+            </header>
+        </div>
+        <div class="nds-card__body nds-card__body_inner">{body}</div>
+    </article>
+</template>

force-app/main/default/lwc/myCardComponent/myCardComponent.js

@@ -0,0 +1,11 @@
+import { LightningElement, api } from 'lwc';
+
+export default class MyCardComponent extends LightningElement {
+    @api title = 'Default Title';
+    @api body = 'Default Body';
+    @api link = 'Default Link';
+
+    connectedCallback() {
+        console.log('MyCardComponent - connected');
+    }
+}

force-app/main/default/lwc/myCardComponent/myCardComponent.js-meta.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
+    <apiVersion>47.0</apiVersion>
+    <isExposed>true</isExposed>
+    <runtimeNamespace>vlocity_cmt</runtimeNamespace>
+</LightningComponentBundle>

force-app/main/default/lwc/myCheckboxComponent/myCheckboxComponent.html

@@ -0,0 +1,4 @@
+<template>
+    <c-checkbox-component>
+    </c-checkbox-component>
+</template>

force-app/main/default/lwc/myCheckboxComponent/myCheckboxComponent.js

@@ -0,0 +1,15 @@
+import { LightningElement, track } from "lwc";
+import template from "./myCheckboxComponent.html"
+import { OmniscriptBaseMixin } from 'vlocity_cmt/omniscriptBaseMixin';
+
+export default class myCheckboxComponent extends OmniscriptBaseMixin(LightningElement){
+
+    connectedCallback() {
+        // this.layout = this.getAttribute('data-omni-layout'); // returns lightning or newport
+        console.debug("myCheckboxComponent - connected");
+    }
+
+    render() {
+        return template;
+    }
+}

force-app/main/default/lwc/myCheckboxComponent/myCheckboxComponent.js-meta.xml

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
+    <apiVersion>46.0</apiVersion>
+    <isExposed>true</isExposed>
+    <masterLabel>myCheckboxComponent</masterLabel>
+    <runtimeNamespace>vlocity_cmt</runtimeNamespace>
+</LightningComponentBundle>

force-app/main/default/lwc/myCssComponent/myCssComponent.css

@@ -0,0 +1,3 @@
+.via-nds .nds-button.nds-button_brand {
+    background-color: red !important;
+}

force-app/main/default/lwc/myCssComponent/myCssComponent.html

@@ -0,0 +1,3 @@
+<template>
+    
+</template>

force-app/main/default/lwc/myCssComponent/myCssComponent.js

@@ -0,0 +1,8 @@
+import { LightningElement } from 'lwc';
+import { OmniscriptBaseMixin } from 'vlocity_cmt/omniscriptBaseMixin';
+
+export default class MyCssComponent extends OmniscriptBaseMixin(LightningElement) {
+    connectedCallback() {
+        console.log("myCssComponent - Connected");
+    }
+}

force-app/main/default/lwc/myCssComponent/myCssComponent.js-meta.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
+    <apiVersion>48.0</apiVersion>
+    <isExposed>true</isExposed>
+    <runtimeNamespace>vlocity_cmt</runtimeNamespace>
+</LightningComponentBundle>

force-app/main/default/lwc/myCustomComponent/myCustomComponent.html

@@ -4,8 +4,15 @@
             theme={theme}
             min-length="10"
             required
+            onblur={handleInput}
             label="Minimum 10 char"
             placeholder="Minimum 10 char">
         </vlocity_cmt-input>
+
+        <!-- <c-my-card-component
+             title="Title"
+             body="Body"
+             link="Link"
+             ></c-my-card-component> -->
     </div>
 </template>

force-app/main/default/lwc/myCustomComponent/myCustomComponent.js

@@ -20,14 +20,13 @@ export default class MyCustomComponent extends OmniscriptBaseMixin(LightningElem
             console.log("MyCustomComponent - this.omniSeedJson:", JSON.parse(JSON.stringify(this.omniSeedJson)));
             console.log("MyCustomComponent - this.omniJsonDef:", JSON.parse(JSON.stringify(this.omniJsonDef)));
             console.log("MyCustomComponent - this.omniJsonData:", JSON.parse(JSON.stringify(this.omniJsonData)));
-            // console.log("MyCustomComponent - this.omniLayout:", JSON.parse(JSON.stringify(this.omniLayout)));
         } catch (e) {
             console.debug("Error Parsing: ", e);
-
         }
     }
 
-    handleBlur(evt) {
-        this.omniUpdateDataJson(evt);
+    handleInput(evt) {
+        let inp = this.template.querySelector('input')
+        this.omniUpdateDataJson();
     }
 }

force-app/main/default/lwc/myCustomComponentWithNavButtons/myCustomComponentWithNavButtons.css

@@ -0,0 +1,3 @@
+.nds-button.nds-button_secondary {
+    background-color: red;
+}

force-app/main/default/lwc/myCustomComponentWithNavButtons/myCustomComponentWithNavButtons.html

@@ -0,0 +1,23 @@
+<template>
+    <div class="nds-box">
+        <p>A block of content</p>
+    </div>
+    <div class="nds-grid nds-grid_align-spread">
+        <div class="nds-col">
+            <vlocity_cmt-button
+                theme="nds"
+                onclick={gotoPrev}
+                variant="primary"
+                label="Previous">
+            </vlocity_cmt-button>
+        </div>
+        <div class="nds-col">
+            <vlocity_cmt-button
+                theme="nds"
+                onclick={gotoNext}
+                variant="secondary"
+                label="Next">
+            </vlocity_cmt-button>
+        </div>
+    </div>
+</template>

force-app/main/default/lwc/myCustomComponentWithNavButtons/myCustomComponentWithNavButtons.js

@@ -0,0 +1,22 @@
+import { LightningElement } from "lwc";
+import template from "./myCustomComponentWithNavButtons.html"
+import { OmniscriptBaseMixin } from 'vlocity_cmt/omniscriptBaseMixin';
+import { dispatchOmniEvent } from 'vlocity_cmt/omniscriptUtils';
+
+export default class myCustomComponentWithNavButtons extends OmniscriptBaseMixin(LightningElement) {
+    connectedCallback() {
+        console.debug("myCustomComponentWithNavButtons - connected");
+    }
+
+    gotoNext() {
+        dispatchOmniEvent(this, { moveToStep: 'next' }, 'omniautoadvance');
+    }
+
+    gotoPrev() {
+        dispatchOmniEvent(this, { moveToStep: this.stepIndex - 1 }, 'omniautoadvance');
+    }
+
+    render() {
+        return template;
+    }
+}

force-app/main/default/lwc/myCustomComponentWithNavButtons/myCustomComponentWithNavButtons.js-meta.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
+    <apiVersion>45.0</apiVersion>
+    <isExposed>true</isExposed>
+    <runtimeNamespace>vlocity_cmt</runtimeNamespace>
+</LightningComponentBundle>

force-app/main/default/lwc/myOmniComponentInBaseClass/myOmniComponentInBaseClass.html

@@ -6,4 +6,4 @@
         layout={layout}
         resume={resume}>
     </vlocity_cmt-omniscript-text>
-</template>
+</template>

force-app/main/default/lwc/myOmniComponentInBaseClass/myOmniComponentInBaseClass.js

@@ -14,4 +14,4 @@ export default class MyOmniComponentInBaseClass extends OmniscriptBaseMixin(Ligh
     render() {
         return template;
     }
-}
+}

force-app/main/default/lwc/myOmniComponentInBaseClass/myOmniComponentInBaseClass.js-meta.xml

@@ -1,6 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
     <apiVersion>47.0</apiVersion>
-    <isExposed>true</isExposed>
-    <runtimeNamespace>vlocity_cmt</runtimeNamespace>
+    <isExposed>false</isExposed>
 </LightningComponentBundle>

force-app/main/default/lwc/myStepCustomNavigation/myStepCustomNavigation.html

@@ -0,0 +1,34 @@
+<template>
+    <vlocity_cmt-omniscript-step
+        json-def={jsonDef}
+        data-omni-key={jsonDef.name}
+        json-data={jsonData}
+        layout={layout}
+        resume={resume}
+        script-header-def={scriptHeaderDef}
+        seed-json={seedDataJSON}>
+
+        <slot></slot>
+
+        <div class="nds-grid nds-grid_align-spread nds-size_12-of-12">
+            <div class="nds-col">
+                <!-- All this JUST to specify the button variant for NDS... -->
+                <vlocity_cmt-button
+                    theme="nds"
+                    onclick={gotoPrev}
+                    variant="primary"
+                    label="Previous">
+                </vlocity_cmt-button>
+            </div>
+            <div class="nds-col">
+                <!-- All this JUST to specify the button variant for NDS... -->
+                <vlocity_cmt-button
+                    theme="nds"
+                    onclick={gotoNext}
+                    variant="secondary"
+                    label="Next">
+                </vlocity_cmt-button>
+            </div>
+        </div>
+    </vlocity_cmt-omniscript-step>
+</template>

force-app/main/default/lwc/myStepCustomNavigation/myStepCustomNavigation.js

@@ -0,0 +1,25 @@
+import { LightningElement } from 'lwc';
+import template from './myStepCustomNavigation.html'
+import omniscriptStep from 'vlocity_cmt/omniscriptStep';
+import { OmniscriptBaseMixin } from 'vlocity_cmt/omniscriptBaseMixin';
+import { dispatchOmniEvent } from 'vlocity_cmt/omniscriptUtils';
+
+export default class myStepCustomNavigation extends OmniscriptBaseMixin(omniscriptStep) {
+
+    connectedCallback() {
+        console.debug("myStepCustomNavigation - connected");
+    }
+
+    gotoNext() {
+        dispatchOmniEvent(this, { moveToStep: 'next' }, 'omniautoadvance');
+    }
+
+    gotoPrev() {
+        console.debug('gotoPrev stepIndex', this.stepIndex);
+        dispatchOmniEvent(this, { moveToStep: this.stepIndex - 1 }, 'omniautoadvance');
+    }
+
+    render() {
+        return template;
+    }
+}

force-app/main/default/lwc/myStepCustomNavigation/myStepCustomNavigation.js-meta.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
+    <apiVersion>46.0</apiVersion>
+    <isExposed>true</isExposed>
+    <runtimeNamespace>vlocity_cmt</runtimeNamespace>
+</LightningComponentBundle>

force-app/main/default/lwc/myTextComponent/myTextComponent.js

@@ -1,10 +1,19 @@
-import template from "./myTextComponent.html";
 import OmniscriptText from 'vlocity_cmt/omniscriptText';
+import template from "./myTextComponent.html";
 
-export default class MyTextComponent extends OmniscriptText {
+export default class MyTextComponent extends OmniscriptTbext {
     connectedCallback() {
-        console.log("myTextComponent - Connected");
-
+        console.log("MyTextComponent - Connected");
+        try {
+            console.log("MyTextComponent - this:", this);
+            console.log("MyTextComponent - this.scriptHeaderDef:", JSON.parse(JSON.stringify(this.scriptHeaderDef)));
+            console.log("MyTextComponent - this.resume:", JSON.parse(JSON.stringify(this.resume)));
+            console.log("MyTextComponent - this.seedJson:", JSON.parse(JSON.stringify(this.seedJson)));
+            console.log("MyTextComponent - this.jsonDef:", JSON.parse(JSON.stringify(this.jsonDef)));
+            console.log("MyTextComponent - this.jsonData:", JSON.parse(JSON.stringify(this.jsonData)));
+        } catch (e) {
+            console.debug("Error Parsing: ", e);
+        }
     }
 
     render() {

force-app/main/default/lwc/typeaheadAddressComponent/typeaheadAddressComponent.html

@@ -0,0 +1,6 @@
+<template>
+
+
+    <script src="https://maps.googleapis.com/maps/api/js?client=gme-verizoncommunications&channel=VPSCX&libraries=places&callback=initAutocomplete" async defer></script>
+
+</template>

force-app/main/default/lwc/typeaheadAddressComponent/typeaheadAddressComponent.js

@@ -0,0 +1,18 @@
+import { LightningElement } from "lwc";
+import Typeahead from "vlocity_cmt/typeahead";
+import template from "./typeaheadAddressComponent.html"
+import { OmniscriptBaseMixin } from 'vlocity_cmt/omniscriptBaseMixin';
+
+export default class typeaheadAddressComponent extends OmniscriptBaseMixin(Typeahead){
+    // your properties and methods here
+
+    connectedCallback() {
+        // Call omniUpdateDataJson to update the omniscript
+        // this.omniUpdateDataJson({'key':'value'});
+    }
+
+    render()
+    {
+        return template;
+    }
+}

force-app/main/default/lwc/typeaheadAddressComponent/typeaheadAddressComponent.js-meta.xml

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
+    <apiVersion>46.0</apiVersion>
+    <isExposed>true</isExposed>
+    <masterLabel>typeaheadAddressComponent</masterLabel>
+    <targets>
+        <target>lightning__RecordPage</target>
+        <target>lightning__AppPage</target>
+        <target>lightning__HomePage</target>
+    </targets>
+</LightningComponentBundle>