Adding components

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

@@ -3,12 +3,21 @@
         "experimentalDecorators": true,
         "baseUrl": ".",
         "paths": {
+            "c/customLayout": [
+                "customLayout/customLayout.js"
+            ],
             "c/helloWorld": [
                 "helloWorld/helloWorld.js"
             ],
+            "c/myActionComponent": [
+                "myActionComponent/myActionComponent.js"
+            ],
             "c/myCustomComponent": [
                 "myCustomComponent/myCustomComponent.js"
             ],
+            "c/myOmniComponentInBaseClass": [
+                "myOmniComponentInBaseClass/myOmniComponentInBaseClass.js"
+            ],
             "c/myTextComponent": [
                 "myTextComponent/myTextComponent.js"
             ]

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

@@ -0,0 +1,32 @@
+<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
+        debug="true"
+        definition=""
+        onclick={fetchData}
+        ondata={onSuccessCallback}
+        onerror={onErrorCallback}>
+        <p>URL: {url}</p>
+    </vlocity_cmt-action>
+    <!-- <vlocity_cmt-button label="Fetch Contact" theme="nds" type="button" variant="brand">My Button</vlocity_cmt-button> -->
+
+    <vlocity_cmt-navigate-action
+        target-type={_targetType}
+        target-id={_targetId}
+        target-name={_targetName}
+        target-params={_targetParams}
+        target-action={_targetAction}
+        replace>
+        <p>URL: {url}</p>
+    </vlocity_cmt-navigate-action>
+
+</template>

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

@@ -0,0 +1,53 @@
+import tmpl from './myActionComponent.html';
+import { LightningElement, track } from 'lwc';
+import { OmniscriptBaseMixin } from 'vlocity_cmt/omniscriptBaseMixin';
+
+export default class MyActionComponent extends OmniscriptBaseMixin(LightningElement) {
+    @track url;
+    @track query = JSON.stringify({
+        datasource: {
+            type: "query",
+            value: {
+                query: "SELECT Id, name FROM Contact LIMIT 1"
+            }
+        },
+        url: "/${data[0].Id}",
+        target: "_blank",
+        parameters: {},
+        navigate: false
+    });
+
+    connectedCallback() {
+        console.log('MyActionComponent - Connected');
+    }
+
+    render() {
+        return tmpl;
+    }
+
+    fetchData(evt) {
+        let action = evt.target;
+        let def = JSON.parse(this.query);
+        action.definition = this.query;
+        action.triggerAction();
+    }
+    // I'm passing these properties down to the navigate-action via
+    // attributes.
+    onSuccessCallback(evt) {
+        let result = evt.detail.result;
+        this._targetType = "Record";
+        this._targetId = result[0].Id;
+
+        // Because we're setting the attribute values via attributes,
+        // we need to give the ui a chance to re-render.
+        Promise.resolve().then(() => {
+            this.url = result[0].attributes.url;
+        });
+    }
+
+    onErrorCallback(error) {
+        console.log(error);
+    }
+
+
+}

force-app/main/default/lwc/myActionComponent/myActionComponent.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/myCustomComponent/myCustomComponent.html

@@ -1,9 +1,11 @@
 <template>
-    <vlocity_cmt-input
-        theme="nds"
-        min-length="10"
-        required
-        label="Minimum 10 char"
-        placeholder="Minimum 10 char">
-    </vlocity_cmt-input>
+    <div class={parentClass}>
+        <vlocity_cmt-input
+            theme={theme}
+            min-length="10"
+            required
+            label="Minimum 10 char"
+            placeholder="Minimum 10 char">
+        </vlocity_cmt-input>
+    </div>
 </template>

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

@@ -1,10 +1,30 @@
-import { LightningElement } from 'lwc';
-import pubsub from 'vlocity_cmt/pubsub';
+import { LightningElement, track } from 'lwc';
 import { OmniscriptBaseMixin } from 'vlocity_cmt/omniscriptBaseMixin';
 
 export default class MyCustomComponent extends OmniscriptBaseMixin(LightningElement) {
+    @track layout;
+    @track theme;
+    @track parentClass;
+
     connectedCallback() {
         console.log("MyCustomComponent - Connected");
+
+        this.layout = this.getAttribute('data-omni-layout'); // returns lightning or newport
+        this.theme = this.layout === 'lightning' ? 'slds' : 'nds'; // we can now use theme={theme} in html
+        this.parentClass = this.layout === 'lightning' ? 'slds-grid slds-wrap' : 'nds-grid nds-wrap';
+
+        try {
+            console.log("MyCustomComponent - this:", this);
+            console.log("MyCustomComponent - this.omniScriptHeaderDef:", JSON.parse(JSON.stringify(this.omniScriptHeaderDef)));
+            console.log("MyCustomComponent - this.omniResume:", JSON.parse(JSON.stringify(this.omniResume)));
+            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) {