Component Modal Test

now-cli.json

{
  "development": {
    "proxy": {
      "proxies": ["/api"]
    }
  },
  "styles": {
      "themes": [{
        "module": "@servicenow/sass-theme",
        "main": ["theme.scss"],
        "copyFiles": ["type/*", "*.scss"]
      }]
  }
}

now-ui.json

{
	"components": {
	    "x-180672-snc-component-modal-test": {
	        "innerComponents": []
	    }
	},
	"scopeName": "x_180672_snc_com_0"
}

package.json

{
	"name": "snc-component-modal-test",
	"version": "0.0.1",
	"private": false,
	"description": "",
	"keywords": [
		"ServiceNow",
		"Now Experience UI Component",
		"snc-component-modal-test"
	],
	"readme": "./README.md",
	"engines": {
		"node": ">=8.6.0",
		"npm": ">=5.3.0"
	},
	"module": "src/index.js",
	"dependencies": {
		"@servicenow/cli-archetype": "17.0.3",
		"@servicenow/cli-component-archetype": "17.0.3",
		"@servicenow/library-translate": "orlando",
		"@servicenow/now-dropdown": "^17.0.1",
		"@servicenow/sass-kit": "orlando",
		"@servicenow/sass-theme": "orlando",
		"@servicenow/ui-core": "orlando",
		"@servicenow/ui-renderer-snabbdom": "orlando"
	},
	"devDependencies": {
		"@servicenow/cli-archetype-dev": "17.0.3",
		"@servicenow/cli-component-archetype-dev": "17.0.3"
	}
}

src\x-180672-snc-component-modal-test\index.js

import { createCustomElement } from '@servicenow/ui-core';
import snabbdom from '@servicenow/ui-renderer-snabbdom';
import '@servicenow/now-dropdown';
import styles from './styles.scss';

const handleSelect = ({action, dispatch}) => {
	dispatch('SN_SCRIPTED_MODAL#DATA_SET', {
		selectedValue: properties.selectedValue
	});
}

const view = ({properties}, dispatch) => {

	dispatch('SN_SCRIPTED_MODAL#DATA_SET', {
		selectedValue: properties.selectedValue
	});

	return (
		<div>
			<now-dropdown
				items={properties.options}
				size="md"
				select="single"
				selected-items={[properties.selectedValue]}
			/>
		</div>
	);
};

createCustomElement('x-180672-snc-component-modal-test', {
	renderer: { type: snabbdom },
	view,
	styles,
	actionHandlers: {
		'NOW_DROPDOWN#SELECTED_ITEMS_SET': handleSelect
	},
	properties: {
		options: {
			default: [{
				label: 'First Option',
				id: 'one'
			}, {
				label: 'Option 2',
				id: 'two'
			}]
		},
		selectedValue: {
			default: 'one'
		}
	}
});