@compas-oscd/open-scd 0.34.0 → 0.34.1

package/dist/wizard-dialog.js

@@ -0,0 +1,374 @@
+import { __decorate } from "tslib";
+import { customElement, css, queryAll, LitElement, property, state, TemplateResult, html, query, } from 'lit-element';
+import { ifDefined } from 'lit-html/directives/if-defined';
+import { get } from 'lit-translate';
+import '@material/mwc-button';
+import '@material/mwc-dialog';
+import '@material/mwc-icon-button';
+import '@material/mwc-icon-button-toggle';
+import '@material/mwc-menu';
+import { Dialog } from '@material/mwc-dialog';
+import { formatXml } from '@openscd/xml';
+import 'ace-custom-element';
+import './wizard-checkbox.js';
+import './wizard-textfield.js';
+import './wizard-select.js';
+import { newActionEvent, } from '@openscd/core/foundation/deprecated/editor.js';
+import { newWizardEvent, wizardInputSelector, isWizardFactory, checkValidity, reportValidity, identity, } from './foundation.js';
+function renderWizardInput(input) {
+    if (input instanceof TemplateResult)
+        return input;
+    if (input.kind === 'Checkbox')
+        return html `<wizard-checkbox
+      ?nullable=${input.nullable}
+      ?defaultChecked=${input.default}
+      ?dialogInitialFocus=${input.dialogInitialFocus}
+      label="${input.label}"
+      helper="${ifDefined(input.helper)}"
+      .maybeValue=${input.maybeValue}
+    ></wizard-checkbox>`;
+    if (input.kind === 'Select')
+        return html `<wizard-select
+      ?nullable=${input.nullable}
+      ?dialogInitialFocus=${input.dialogInitialFocus}
+      label="${input.label}"
+      helper="${ifDefined(input.helper)}"
+      defaultValue="${ifDefined(input.default)}"
+      validationMessage="${ifDefined(input.valadationMessage)}"
+      .maybeValue=${input.maybeValue}
+      >${input.values.map(value => html `<mwc-list-item value="${value}">${value}</mwc-list-item>`)}</wizard-select
+    >`;
+    return html `<wizard-textfield
+    ?nullable=${input.nullable}
+    ?required=${input.required}
+    ?disabled=${input.disabled}
+    ?dialogInitialFocus=${input.dialogInitialFocus}
+    label="${input.label}"
+    defaultValue="${ifDefined(input.default)}"
+    helper="${ifDefined(input.helper)}"
+    validationMessage="${ifDefined(input.helper)}"
+    unit="${ifDefined(input.unit)}"
+    .multipliers=${input.multipliers ?? []}
+    .multiplier=${input.multiplier ?? null}
+    suffix="${ifDefined(input.suffix)}"
+    .maybeValue=${input.maybeValue}
+    pattern="${ifDefined(input.pattern)}"
+    minLength="${ifDefined(input.minLength)}"
+    maxLength="${ifDefined(input.maxLength)}"
+    type="${ifDefined(input.type)}"
+    min="${ifDefined(input.min)}"
+    max="${ifDefined(input.max)}"
+  ></wizard-textfield>`;
+}
+function dialogInputs(dialog) {
+    return Array.from(dialog?.querySelectorAll(wizardInputSelector) ?? []);
+}
+function dialogValid(dialog) {
+    return dialogInputs(dialog).every(checkValidity);
+}
+function codeAction(element) {
+    return inputs => {
+        const text = inputs[0].value;
+        if (!text || !element.parentElement)
+            return [];
+        const desc = {
+            parent: element.parentElement,
+            reference: element.nextSibling,
+            element,
+        };
+        const del = {
+            old: desc,
+            checkValidity: () => true,
+        };
+        const cre = {
+            new: {
+                ...desc,
+                element: new DOMParser().parseFromString(text, 'application/xml')
+                    .documentElement,
+            },
+            checkValidity: () => true,
+        };
+        return [
+            {
+                actions: [del, cre],
+                title: get('code.log', {
+                    id: identity(element),
+                }),
+            },
+        ];
+    };
+}
+/** A wizard style dialog consisting of several pages commiting some
+ * [[`EditorAction`]] on completion and aborting on dismissal. */
+let WizardDialog = class WizardDialog extends LitElement {
+    /** The `Dialog` showing the active [[`WizardPage`]]. */
+    get dialog() {
+        return this.dialogs[this.pageIndex];
+    }
+    get code() {
+        return ((this.dialog?.querySelector('mwc-icon-button-toggle')?.on ?? false) &&
+            localStorage.getItem('mode') === 'pro');
+    }
+    /** Checks the inputs of all [[`WizardPage`]]s for validity. */
+    checkValidity() {
+        return Array.from(this.inputs).every(checkValidity);
+    }
+    get firstInvalidPage() {
+        return Array.from(this.dialogs).findIndex(dialog => !dialogValid(dialog));
+    }
+    prev() {
+        if (this.pageIndex <= 0)
+            return;
+        this.pageIndex--;
+        this.dialog?.show();
+    }
+    async next() {
+        if (dialogValid(this.dialog)) {
+            if (this.wizard.length > this.pageIndex + 1)
+                this.pageIndex++;
+            this.dialog?.show();
+        }
+        else {
+            this.dialog?.show();
+            await this.dialog?.updateComplete;
+            dialogInputs(this.dialog).map(reportValidity);
+        }
+    }
+    /** Commits `action` if all inputs are valid, reports validity otherwise. */
+    async act(action, primary = true) {
+        if (action === undefined)
+            return false;
+        const wizardInputs = Array.from(this.inputs);
+        const wizardList = (this.dialog?.querySelector('filtered-list,mwc-list'));
+        if (!this.checkValidity()) {
+            this.pageIndex = this.firstInvalidPage;
+            wizardInputs.map(reportValidity);
+            return false;
+        }
+        const wizardActions = action(wizardInputs, this, wizardList);
+        if (wizardActions.length > 0) {
+            if (primary)
+                this.wizard[this.pageIndex].primary = undefined;
+            else
+                this.wizard[this.pageIndex].secondary = undefined;
+            this.dispatchEvent(newWizardEvent());
+        }
+        wizardActions.forEach(wa => isWizardFactory(wa)
+            ? this.dispatchEvent(newWizardEvent(wa))
+            : this.dispatchEvent(newActionEvent(wa)));
+        return true;
+    }
+    /** Triggers menu action callback */
+    async menuAct(action) {
+        if (!action)
+            return;
+        action(this);
+    }
+    onClosed(ae) {
+        if (!(ae.target instanceof Dialog && ae.detail?.action))
+            return;
+        if (ae.detail.action === 'close')
+            this.dispatchEvent(newWizardEvent());
+        else if (ae.detail.action === 'prev')
+            this.prev();
+        else if (ae.detail.action === 'next')
+            this.next();
+    }
+    constructor() {
+        super();
+        /** The [[`Wizard`]] implemented by this dialog. */
+        this.wizard = [];
+        /** Index of the currently active [[`WizardPage`]] */
+        this.pageIndex = 0;
+        this.act = this.act.bind(this);
+        this.renderPage = this.renderPage.bind(this);
+    }
+    updated(changedProperties) {
+        if (changedProperties.has('wizard')) {
+            this.pageIndex = 0;
+            while (this.wizard.findIndex(page => page.initial) > this.pageIndex &&
+                dialogValid(this.dialog)) {
+                this.dialog?.close();
+                this.next();
+            }
+            this.dialog?.show();
+        }
+        if (this.wizard[this.pageIndex]?.primary?.auto) {
+            this.updateComplete.then(() => this.act(this.wizard[this.pageIndex].primary.action));
+        }
+        if (this.actionsMenu)
+            this.actionsMenu.anchor = this.menuButton;
+    }
+    renderMenu(page) {
+        const someIconsDefined = page.menuActions?.some(menuAction => menuAction.icon);
+        return html ` <mwc-icon-button
+        icon="more_vert"
+        @click=${() => {
+            if (!this.actionsMenu.open)
+                this.actionsMenu.show();
+            else
+                this.actionsMenu.close();
+        }}
+      ></mwc-icon-button>
+      <mwc-menu class="actions-menu" corner="BOTTOM_RIGHT" menuCorner="END">
+        ${page.menuActions.map(menuAction => html `<mwc-list-item
+              .graphic=${someIconsDefined ? 'icon' : null}
+              @click=${() => this.menuAct(menuAction.action)}
+            >
+              <span>${menuAction.label}</span>
+              ${menuAction.icon
+            ? html `<mwc-icon slot="graphic">${menuAction.icon}</mwc-icon>`
+            : html ``}
+            </mwc-list-item>`)}
+      </mwc-menu>`;
+    }
+    renderPage(page, index) {
+        const isProMode = localStorage.getItem('mode') === 'pro';
+        const hasPageElement = Boolean(page.element);
+        const showCodeToggleButton = hasPageElement && isProMode;
+        let extraWidth = 0;
+        if (showCodeToggleButton && page.menuActions) {
+            extraWidth = 96;
+        }
+        else if (showCodeToggleButton || page.menuActions) {
+            extraWidth = 48;
+        }
+        else {
+            extraWidth = 0;
+        }
+        return html `<mwc-dialog
+      defaultAction="next"
+      heading=${page.title}
+      @closed=${this.onClosed}
+      style="--mdc-dialog-min-width:calc(100% + ${extraWidth}px)"
+    >
+      ${showCodeToggleButton || page.menuActions
+            ? html `<nav>
+            ${showCodeToggleButton
+                ? html `<mwc-icon-button-toggle
+                  onicon="code"
+                  officon="code_off"
+                  @click=${() => this.requestUpdate()}
+                ></mwc-icon-button-toggle>`
+                : ''}
+            ${page.menuActions ? this.renderMenu(page) : ''}
+          </nav>`
+            : ''}
+      <div id="wizard-content">
+        ${this.code && page.element
+            ? html `<ace-editor
+              base-path="/public/ace"
+              wrap
+              soft-tabs
+              style="width: 80vw; height: calc(100vh - 240px);"
+              theme="ace/theme/solarized_${localStorage.getItem('theme')}"
+              mode="ace/mode/xml"
+              value="${formatXml(new XMLSerializer().serializeToString(page.element))}"
+            ></ace-editor>`
+            : page.content?.map(renderWizardInput)}
+      </div>
+      ${index > 0
+            ? html `<mwc-button
+            slot="secondaryAction"
+            dialogAction="prev"
+            icon="navigate_before"
+            label=${this.wizard?.[index - 1].title}
+          ></mwc-button>`
+            : html ``}
+      ${page.secondary
+            ? html `<mwc-button
+            slot="secondaryAction"
+            @click=${() => this.act(page.secondary?.action, false)}
+            icon="${page.secondary.icon}"
+            label="${page.secondary.label}"
+          ></mwc-button>`
+            : html `<mwc-button
+            slot="secondaryAction"
+            dialogAction="close"
+            label="${get('close')}"
+            style="--mdc-theme-primary: var(--mdc-theme-error)"
+          ></mwc-button>`}
+      ${this.code && page.element
+            ? html `<mwc-button
+            slot="primaryAction"
+            @click=${() => this.act(codeAction(page.element))}
+            icon="code"
+            label="${get('save')}"
+            trailingIcon
+          ></mwc-button>`
+            : page.primary
+                ? html `<mwc-button
+            slot="primaryAction"
+            @click=${() => this.act(page.primary?.action)}
+            icon="${page.primary.icon}"
+            label="${page.primary.label}"
+            trailingIcon
+          ></mwc-button>`
+                : index + 1 < (this.wizard?.length ?? 0)
+                    ? html `<mwc-button
+            slot="primaryAction"
+            dialogAction="next"
+            icon="navigate_next"
+            label=${this.wizard?.[index + 1].title}
+            trailingicon
+          ></mwc-button>`
+                    : html ``}
+    </mwc-dialog>`;
+    }
+    render() {
+        return html `${this.wizard.map(this.renderPage)}`;
+    }
+};
+WizardDialog.styles = css `
+    mwc-dialog {
+      --mdc-dialog-max-width: 92vw;
+    }
+
+    mwc-dialog > nav {
+      position: absolute;
+      top: 8px;
+      right: 14px;
+      color: var(--base00);
+    }
+
+    mwc-dialog > nav > mwc-icon-button-toggle[on] {
+      color: var(--mdc-theme-primary);
+    }
+
+    #wizard-content {
+      display: flex;
+      flex-direction: column;
+    }
+
+    #wizard-content > * {
+      display: block;
+      margin-top: 16px;
+    }
+
+    *[iconTrailing='search'] {
+      --mdc-shape-small: 28px;
+    }
+  `;
+__decorate([
+    property({ type: Array })
+], WizardDialog.prototype, "wizard", void 0);
+__decorate([
+    state()
+], WizardDialog.prototype, "pageIndex", void 0);
+__decorate([
+    queryAll('mwc-dialog')
+], WizardDialog.prototype, "dialogs", void 0);
+__decorate([
+    queryAll(wizardInputSelector)
+], WizardDialog.prototype, "inputs", void 0);
+__decorate([
+    query('.actions-menu')
+], WizardDialog.prototype, "actionsMenu", void 0);
+__decorate([
+    query('mwc-icon-button[icon="more_vert"]')
+], WizardDialog.prototype, "menuButton", void 0);
+WizardDialog = __decorate([
+    customElement('wizard-dialog')
+], WizardDialog);
+export { WizardDialog };
+//# sourceMappingURL=wizard-dialog.js.map

package/dist/wizard-dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wizard-dialog.js","sourceRoot":"","sources":["../src/wizard-dialog.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  customElement,\n  css,\n  queryAll,\n  LitElement,\n  property,\n  state,\n  TemplateResult,\n  html,\n  query,\n} from 'lit-element';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { get } from 'lit-translate';\n\nimport '@material/mwc-button';\nimport '@material/mwc-dialog';\nimport '@material/mwc-icon-button';\nimport '@material/mwc-icon-button-toggle';\nimport '@material/mwc-menu';\nimport { Dialog } from '@material/mwc-dialog';\nimport { IconButton } from '@material/mwc-icon-button';\nimport { List } from '@material/mwc-list';\nimport { Menu } from '@material/mwc-menu';\n\nimport { formatXml } from '@openscd/xml';\n\nimport 'ace-custom-element';\nimport './wizard-checkbox.js';\nimport './wizard-textfield.js';\nimport './wizard-select.js';\n\nimport {\n  newActionEvent,\n  Delete,\n  Create,\n} from '@openscd/core/foundation/deprecated/editor.js';\nimport {\n  Wizard,\n  WizardInputElement,\n  WizardPage,\n  newWizardEvent,\n  WizardActor,\n  wizardInputSelector,\n  isWizardFactory,\n  checkValidity,\n  reportValidity,\n  identity,\n  WizardInput,\n  WizardMenuActor,\n} from './foundation.js';\n\nfunction renderWizardInput(\n  input: TemplateResult | WizardInput\n): TemplateResult {\n  if (input instanceof TemplateResult) return input;\n\n  if (input.kind === 'Checkbox')\n    return html`<wizard-checkbox\n      ?nullable=${input.nullable}\n      ?defaultChecked=${input.default}\n      ?dialogInitialFocus=${input.dialogInitialFocus}\n      label=\"${input.label}\"\n      helper=\"${ifDefined(input.helper)}\"\n      .maybeValue=${input.maybeValue}\n    ></wizard-checkbox>`;\n\n  if (input.kind === 'Select')\n    return html`<wizard-select\n      ?nullable=${input.nullable}\n      ?dialogInitialFocus=${input.dialogInitialFocus}\n      label=\"${input.label}\"\n      helper=\"${ifDefined(input.helper)}\"\n      defaultValue=\"${ifDefined(input.default)}\"\n      validationMessage=\"${ifDefined(input.valadationMessage)}\"\n      .maybeValue=${input.maybeValue}\n      >${input.values.map(\n        value => html`<mwc-list-item value=\"${value}\">${value}</mwc-list-item>`\n      )}</wizard-select\n    >`;\n\n  return html`<wizard-textfield\n    ?nullable=${input.nullable}\n    ?required=${input.required}\n    ?disabled=${input.disabled}\n    ?dialogInitialFocus=${input.dialogInitialFocus}\n    label=\"${input.label}\"\n    defaultValue=\"${ifDefined(input.default)}\"\n    helper=\"${ifDefined(input.helper)}\"\n    validationMessage=\"${ifDefined(input.helper)}\"\n    unit=\"${ifDefined(input.unit)}\"\n    .multipliers=${input.multipliers ?? []}\n    .multiplier=${input.multiplier ?? null}\n    suffix=\"${ifDefined(input.suffix)}\"\n    .maybeValue=${input.maybeValue}\n    pattern=\"${ifDefined(input.pattern)}\"\n    minLength=\"${ifDefined(input.minLength)}\"\n    maxLength=\"${ifDefined(input.maxLength)}\"\n    type=\"${ifDefined(input.type)}\"\n    min=\"${ifDefined(input.min)}\"\n    max=\"${ifDefined(input.max)}\"\n  ></wizard-textfield>`;\n}\n\nfunction dialogInputs(dialog?: Dialog): WizardInputElement[] {\n  return Array.from(dialog?.querySelectorAll(wizardInputSelector) ?? []);\n}\n\nfunction dialogValid(dialog?: Dialog): boolean {\n  return dialogInputs(dialog).every(checkValidity);\n}\n\nfunction codeAction(element: Element): WizardActor {\n  return inputs => {\n    const text = inputs[0].value!;\n    if (!text || !element.parentElement) return [];\n    const desc = {\n      parent: element.parentElement!,\n      reference: element.nextSibling,\n      element,\n    };\n    const del: Delete = {\n      old: desc,\n      checkValidity: () => true,\n    };\n    const cre: Create = {\n      new: {\n        ...desc,\n        element: new DOMParser().parseFromString(text, 'application/xml')\n          .documentElement,\n      },\n      checkValidity: () => true,\n    };\n    return [\n      {\n        actions: [del, cre],\n        title: get('code.log', {\n          id: identity(element),\n        }),\n      },\n    ];\n  };\n}\n\n/** A wizard style dialog consisting of several pages commiting some\n * [[`EditorAction`]] on completion and aborting on dismissal. */\n@customElement('wizard-dialog')\nexport class WizardDialog extends LitElement {\n  /** The [[`Wizard`]] implemented by this dialog. */\n  @property({ type: Array })\n  wizard: Wizard = [];\n  /** Index of the currently active [[`WizardPage`]] */\n  @state()\n  pageIndex = 0;\n\n  @queryAll('mwc-dialog') dialogs!: NodeListOf<Dialog>;\n  @queryAll(wizardInputSelector) inputs!: NodeListOf<WizardInputElement>;\n  @query('.actions-menu') actionsMenu!: Menu;\n  @query('mwc-icon-button[icon=\"more_vert\"]') menuButton!: IconButton;\n\n  /** The `Dialog` showing the active [[`WizardPage`]]. */\n  get dialog(): Dialog | undefined {\n    return this.dialogs[this.pageIndex];\n  }\n\n  get code(): boolean {\n    return (\n      (this.dialog?.querySelector('mwc-icon-button-toggle')?.on ?? false) &&\n      localStorage.getItem('mode') === 'pro'\n    );\n  }\n\n  /** Checks the inputs of all [[`WizardPage`]]s for validity. */\n  checkValidity(): boolean {\n    return Array.from(this.inputs).every(checkValidity);\n  }\n\n  private get firstInvalidPage(): number {\n    return Array.from(this.dialogs).findIndex(dialog => !dialogValid(dialog));\n  }\n\n  prev(): void {\n    if (this.pageIndex <= 0) return;\n    this.pageIndex--;\n    this.dialog?.show();\n  }\n\n  async next(): Promise<void> {\n    if (dialogValid(this.dialog)) {\n      if (this.wizard.length > this.pageIndex + 1) this.pageIndex++;\n      this.dialog?.show();\n    } else {\n      this.dialog?.show();\n      await this.dialog?.updateComplete;\n      dialogInputs(this.dialog).map(reportValidity);\n    }\n  }\n\n  /** Commits `action` if all inputs are valid, reports validity otherwise. */\n  async act(action?: WizardActor, primary = true): Promise<boolean> {\n    if (action === undefined) return false;\n    const wizardInputs = Array.from(this.inputs);\n    const wizardList = <List | null>(\n      this.dialog?.querySelector('filtered-list,mwc-list')\n    );\n    if (!this.checkValidity()) {\n      this.pageIndex = this.firstInvalidPage;\n      wizardInputs.map(reportValidity);\n      return false;\n    }\n\n    const wizardActions = action(wizardInputs, this, wizardList);\n    if (wizardActions.length > 0) {\n      if (primary) this.wizard[this.pageIndex].primary = undefined;\n      else this.wizard[this.pageIndex].secondary = undefined;\n      this.dispatchEvent(newWizardEvent());\n    }\n    wizardActions.forEach(wa =>\n      isWizardFactory(wa)\n        ? this.dispatchEvent(newWizardEvent(wa))\n        : this.dispatchEvent(newActionEvent(wa))\n    );\n    return true;\n  }\n\n  /** Triggers menu action callback */\n  async menuAct(action?: WizardMenuActor): Promise<void> {\n    if (!action) return;\n\n    action(this);\n  }\n\n  private onClosed(ae: CustomEvent<{ action: string } | null>): void {\n    if (!(ae.target instanceof Dialog && ae.detail?.action)) return;\n    if (ae.detail.action === 'close') this.dispatchEvent(newWizardEvent());\n    else if (ae.detail.action === 'prev') this.prev();\n    else if (ae.detail.action === 'next') this.next();\n  }\n\n  constructor() {\n    super();\n\n    this.act = this.act.bind(this);\n    this.renderPage = this.renderPage.bind(this);\n  }\n\n  updated(changedProperties: Map<string | number | symbol, unknown>): void {\n    if (changedProperties.has('wizard')) {\n      this.pageIndex = 0;\n      while (\n        this.wizard.findIndex(page => page.initial) > this.pageIndex &&\n        dialogValid(this.dialog)\n      ) {\n        this.dialog?.close();\n        this.next();\n      }\n      this.dialog?.show();\n    }\n    if (this.wizard[this.pageIndex]?.primary?.auto) {\n      this.updateComplete.then(() =>\n        this.act(this.wizard[this.pageIndex].primary!.action)\n      );\n    }\n\n    if (this.actionsMenu)\n      this.actionsMenu.anchor = <HTMLElement>this.menuButton;\n  }\n\n  renderMenu(page: WizardPage): TemplateResult {\n    const someIconsDefined = page.menuActions?.some(\n      menuAction => menuAction.icon\n    );\n\n    return html` <mwc-icon-button\n        icon=\"more_vert\"\n        @click=${() => {\n          if (!this.actionsMenu.open) this.actionsMenu.show();\n          else this.actionsMenu.close();\n        }}\n      ></mwc-icon-button>\n      <mwc-menu class=\"actions-menu\" corner=\"BOTTOM_RIGHT\" menuCorner=\"END\">\n        ${page.menuActions!.map(\n          menuAction =>\n            html`<mwc-list-item\n              .graphic=${someIconsDefined ? 'icon' : null}\n              @click=${() => this.menuAct(menuAction.action)}\n            >\n              <span>${menuAction.label}</span>\n              ${menuAction.icon\n                ? html`<mwc-icon slot=\"graphic\">${menuAction.icon}</mwc-icon>`\n                : html``}\n            </mwc-list-item>`\n        )}\n      </mwc-menu>`;\n  }\n\n  renderPage(page: WizardPage, index: number): TemplateResult {\n    const isProMode = localStorage.getItem('mode') === 'pro';\n    const hasPageElement = Boolean(page.element);\n    const showCodeToggleButton = hasPageElement && isProMode\n\n    let extraWidth = 0;\n\n    if(showCodeToggleButton && page.menuActions){\n      extraWidth = 96;\n    }else if(showCodeToggleButton || page.menuActions){\n      extraWidth = 48;\n    }else{\n      extraWidth = 0;\n    }\n\n\n    return html`<mwc-dialog\n      defaultAction=\"next\"\n      heading=${page.title}\n      @closed=${this.onClosed}\n      style=\"--mdc-dialog-min-width:calc(100% + ${extraWidth}px)\"\n    >\n      ${showCodeToggleButton || page.menuActions\n        ? html`<nav>\n            ${showCodeToggleButton\n              ? html`<mwc-icon-button-toggle\n                  onicon=\"code\"\n                  officon=\"code_off\"\n                  @click=${() => this.requestUpdate()}\n                ></mwc-icon-button-toggle>`\n              : ''}\n            ${page.menuActions ? this.renderMenu(page) : ''}\n          </nav>`\n        : ''}\n      <div id=\"wizard-content\">\n        ${this.code && page.element\n          ? html`<ace-editor\n              base-path=\"/public/ace\"\n              wrap\n              soft-tabs\n              style=\"width: 80vw; height: calc(100vh - 240px);\"\n              theme=\"ace/theme/solarized_${localStorage.getItem('theme')}\"\n              mode=\"ace/mode/xml\"\n              value=\"${formatXml(\n                new XMLSerializer().serializeToString(page.element)\n              )}\"\n            ></ace-editor>`\n          : page.content?.map(renderWizardInput)}\n      </div>\n      ${index > 0\n        ? html`<mwc-button\n            slot=\"secondaryAction\"\n            dialogAction=\"prev\"\n            icon=\"navigate_before\"\n            label=${this.wizard?.[index - 1].title}\n          ></mwc-button>`\n        : html``}\n      ${page.secondary\n        ? html`<mwc-button\n            slot=\"secondaryAction\"\n            @click=${() => this.act(page.secondary?.action, false)}\n            icon=\"${page.secondary.icon}\"\n            label=\"${page.secondary.label}\"\n          ></mwc-button>`\n        : html`<mwc-button\n            slot=\"secondaryAction\"\n            dialogAction=\"close\"\n            label=\"${get('close')}\"\n            style=\"--mdc-theme-primary: var(--mdc-theme-error)\"\n          ></mwc-button>`}\n      ${this.code && page.element\n        ? html`<mwc-button\n            slot=\"primaryAction\"\n            @click=${() => this.act(codeAction(page.element!))}\n            icon=\"code\"\n            label=\"${get('save')}\"\n            trailingIcon\n          ></mwc-button>`\n        : page.primary\n        ? html`<mwc-button\n            slot=\"primaryAction\"\n            @click=${() => this.act(page.primary?.action)}\n            icon=\"${page.primary.icon}\"\n            label=\"${page.primary.label}\"\n            trailingIcon\n          ></mwc-button>`\n        : index + 1 < (this.wizard?.length ?? 0)\n        ? html`<mwc-button\n            slot=\"primaryAction\"\n            dialogAction=\"next\"\n            icon=\"navigate_next\"\n            label=${this.wizard?.[index + 1].title}\n            trailingicon\n          ></mwc-button>`\n        : html``}\n    </mwc-dialog>`;\n  }\n\n  render(): TemplateResult {\n    return html`${this.wizard.map(this.renderPage)}`;\n  }\n\n  static styles = css`\n    mwc-dialog {\n      --mdc-dialog-max-width: 92vw;\n    }\n\n    mwc-dialog > nav {\n      position: absolute;\n      top: 8px;\n      right: 14px;\n      color: var(--base00);\n    }\n\n    mwc-dialog > nav > mwc-icon-button-toggle[on] {\n      color: var(--mdc-theme-primary);\n    }\n\n    #wizard-content {\n      display: flex;\n      flex-direction: column;\n    }\n\n    #wizard-content > * {\n      display: block;\n      margin-top: 16px;\n    }\n\n    *[iconTrailing='search'] {\n      --mdc-shape-small: 28px;\n    }\n  `;\n}\n"]}

package/dist/wizard-select.js

@@ -0,0 +1,115 @@
+import { __decorate } from "tslib";
+import { customElement, html, state, property, query, } from 'lit-element';
+import '@material/mwc-switch';
+import { Select } from '@material/mwc-select';
+/** A potentially `nullable` `Select`.
+ *
+ * NB: Use `maybeValue: string | null` instead of `value` if `nullable`!*/
+let WizardSelect = class WizardSelect extends Select {
+    get null() {
+        return this.nullable && this.isNull;
+    }
+    set null(value) {
+        if (!this.nullable || value === this.isNull)
+            return;
+        this.isNull = value;
+        if (this.null)
+            this.disable();
+        else
+            this.enable();
+    }
+    /** Replacement for `value`, can only be `null` if [[`nullable`]]. */
+    get maybeValue() {
+        return this.null ? null : this.value;
+    }
+    set maybeValue(value) {
+        if (value === null)
+            this.null = true;
+        else {
+            this.null = false;
+            this.value = value;
+        }
+    }
+    enable() {
+        if (this.nulled === null)
+            return;
+        this.value = this.nulled;
+        this.nulled = null;
+        this.disabled = false;
+    }
+    disable() {
+        if (this.nulled !== null)
+            return;
+        this.nulled = this.value;
+        this.value = this.defaultValue;
+        this.disabled = true;
+    }
+    async firstUpdated() {
+        await super.firstUpdated();
+    }
+    checkValidity() {
+        if (this.nullable && !this.nullSwitch?.checked)
+            return true;
+        return super.checkValidity();
+    }
+    constructor() {
+        super();
+        /** Whether [[`maybeValue`]] may be `null` */
+        this.nullable = false;
+        this.isNull = false;
+        /** The default `value` displayed if [[`maybeValue`]] is `null`. */
+        this.defaultValue = '';
+        /** Additional values that cause validation to fail. */
+        this.reservedValues = [];
+        // FIXME: workaround to allow disable of the whole component - need basic refactor
+        this.disabledSwitch = false;
+        this.nulled = null;
+        this.disabledSwitch = this.hasAttribute('disabled');
+    }
+    renderSwitch() {
+        if (this.nullable) {
+            return html `<mwc-switch
+        style="margin-left: 12px;"
+        ?checked=${!this.null}
+        ?disabled=${this.disabledSwitch}
+        @change=${() => {
+                this.null = !this.nullSwitch.checked;
+            }}
+      ></mwc-switch>`;
+        }
+        return html ``;
+    }
+    render() {
+        return html `
+      <div style="display: flex; flex-direction: row;">
+        <div style="flex: auto;">${super.render()}</div>
+        <div style="display: flex; align-items: center; height: 56px;">
+          ${this.renderSwitch()}
+        </div>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: Boolean })
+], WizardSelect.prototype, "nullable", void 0);
+__decorate([
+    state()
+], WizardSelect.prototype, "null", null);
+__decorate([
+    property({ type: String })
+], WizardSelect.prototype, "maybeValue", null);
+__decorate([
+    property({ type: String })
+], WizardSelect.prototype, "defaultValue", void 0);
+__decorate([
+    property({ type: Array })
+], WizardSelect.prototype, "reservedValues", void 0);
+__decorate([
+    query('mwc-switch')
+], WizardSelect.prototype, "nullSwitch", void 0);
+WizardSelect = __decorate([
+    customElement('wizard-select')
+], WizardSelect);
+export { WizardSelect };
+//# sourceMappingURL=wizard-select.js.map

package/dist/wizard-select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wizard-select.js","sourceRoot":"","sources":["../src/wizard-select.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  customElement,\n  html,\n  state,\n  property,\n  query,\n  TemplateResult,\n} from 'lit-element';\n\nimport '@material/mwc-switch';\nimport { Switch } from '@material/mwc-switch';\nimport { Select } from '@material/mwc-select';\n\n/** A potentially `nullable` `Select`.\n *\n * NB: Use `maybeValue: string | null` instead of `value` if `nullable`!*/\n@customElement('wizard-select')\nexport class WizardSelect extends Select {\n  /** Whether [[`maybeValue`]] may be `null` */\n  @property({ type: Boolean })\n  nullable = false;\n  private isNull = false;\n  @state()\n  private get null(): boolean {\n    return this.nullable && this.isNull;\n  }\n  private set null(value: boolean) {\n    if (!this.nullable || value === this.isNull) return;\n    this.isNull = value;\n    if (this.null) this.disable();\n    else this.enable();\n  }\n  /** Replacement for `value`, can only be `null` if [[`nullable`]]. */\n  @property({ type: String })\n  get maybeValue(): string | null {\n    return this.null ? null : this.value;\n  }\n  set maybeValue(value: string | null) {\n    if (value === null) this.null = true;\n    else {\n      this.null = false;\n      this.value = value;\n    }\n  }\n  /** The default `value` displayed if [[`maybeValue`]] is `null`. */\n  @property({ type: String })\n  defaultValue = '';\n  /** Additional values that cause validation to fail. */\n  @property({ type: Array })\n  reservedValues: string[] = [];\n\n  // FIXME: workaround to allow disable of the whole component - need basic refactor\n  private disabledSwitch = false;\n\n  @query('mwc-switch') nullSwitch?: Switch;\n\n  private nulled: string | null = null;\n\n  private enable(): void {\n    if (this.nulled === null) return;\n    this.value = this.nulled;\n    this.nulled = null;\n    this.disabled = false;\n  }\n\n  private disable(): void {\n    if (this.nulled !== null) return;\n    this.nulled = this.value;\n    this.value = this.defaultValue;\n    this.disabled = true;\n  }\n\n  async firstUpdated(): Promise<void> {\n    await super.firstUpdated();\n  }\n\n  checkValidity(): boolean {\n    if (this.nullable && !this.nullSwitch?.checked) return true;\n    return super.checkValidity();\n  }\n\n  constructor() {\n    super();\n\n    this.disabledSwitch = this.hasAttribute('disabled');\n  }\n\n  renderSwitch(): TemplateResult {\n    if (this.nullable) {\n      return html`<mwc-switch\n        style=\"margin-left: 12px;\"\n        ?checked=${!this.null}\n        ?disabled=${this.disabledSwitch}\n        @change=${() => {\n          this.null = !this.nullSwitch!.checked;\n        }}\n      ></mwc-switch>`;\n    }\n    return html``;\n  }\n\n  render(): TemplateResult {\n    return html`\n      <div style=\"display: flex; flex-direction: row;\">\n        <div style=\"flex: auto;\">${super.render()}</div>\n        <div style=\"display: flex; align-items: center; height: 56px;\">\n          ${this.renderSwitch()}\n        </div>\n      </div>\n    `;\n  }\n}\n"]}