OXIESEC PANEL

Name	Size	Modified	Perms
📁 ..	-	02/20/2020 06:32:01 AM	rwxr-xr-x
📄 Demo.ts	2.73 KB	02/20/2020 06:32:03 AM	rw-r--r--
📄 Demos.ts	294 bytes	02/20/2020 06:32:03 AM	rw-r--r--
📄 FormDemo.ts	1.6 KB	02/20/2020 06:32:04 AM	rw-r--r--
📄 SlidersDemo.ts	1.72 KB	02/20/2020 06:32:04 AM	rw-r--r--
📄 StylesMenuDemo.ts	1.65 KB	02/20/2020 06:32:05 AM	rw-r--r--

Editing: FormDemo.ts

import { Attachment, Gui, GuiFactory } from '@ephox/alloy';
import { Option } from '@ephox/katamari';
import { SelectorFind } from '@ephox/sugar';

import * as Inputs from 'tinymce/themes/mobile/ui/Inputs';
import * as SerialisedDialog from 'tinymce/themes/mobile/ui/SerialisedDialog';
import * as UiDomFactory from 'tinymce/themes/mobile/util/UiDomFactory';

export default function () {
  const ephoxUi = SelectorFind.first('#ephox-ui').getOrDie();

const form = SerialisedDialog.sketch({
    onExecute () { },
    getInitialValue () {
      return Option.some({
        alpha: 'Alpha',
        beta: '',
        gamma: '',
        delta: ''
      });
    },
    fields: [
      Inputs.field('alpha', 'placeholder-alpha'),
      Inputs.field('beta', 'placeholder-beta'),
      Inputs.field('gamma', 'placeholder-gamma'),
      Inputs.field('delta', 'placeholder-delta')
    ]
  });

const gui = Gui.create();
  Attachment.attachSystem(ephoxUi, gui);

const container = GuiFactory.build({
    dom: UiDomFactory.dom('<div class="${prefix}-outer-container ${prefix}-fullscreen-maximized"></div>'),
    components: [
      {
        dom: UiDomFactory.dom('<div class="${prefix}-toolstrip"></div>'),
        components: [
          {
            dom: UiDomFactory.dom('<div class="${prefix}-toolbar ${prefix}-context-toolbar"></div>'),
            components: [
              {
                dom: UiDomFactory.dom('<div class="${prefix}-toolbar-group"></div>'),
                components: [
                  form
                ]
              }
            ]
          }
        ]
      }
    ]
  });

gui.add(container);
}