@compas-oscd/open-scd 0.34.16 → 0.34.18

package/dist/wizard-dialog.js

@@ -1,24 +1,24 @@
-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 '@compas-oscd/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')
+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}
@@ -26,8 +26,8 @@ function renderWizardInput(input) {
       label="${input.label}"
       helper="${ifDefined(input.helper)}"
       .maybeValue=${input.maybeValue}
-    ></wizard-checkbox>`;
-    if (input.kind === 'Select')
+    ></wizard-checkbox>`;
+    if (input.kind === 'Select')
         return html `<wizard-select
       ?nullable=${input.nullable}
       ?dialogInitialFocus=${input.dialogInitialFocus}
@@ -37,7 +37,7 @@ function renderWizardInput(input) {
       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}
@@ -58,156 +58,156 @@ function renderWizardInput(input) {
     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);
+  ></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();
+        @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">
@@ -216,46 +216,46 @@ let WizardDialog = class WizardDialog extends LitElement {
               @click=${() => this.menuAct(menuAction.action)}
             >
               <span>${menuAction.label}</span>
-              ${menuAction.icon
-            ? html `<mwc-icon slot="graphic">${menuAction.icon}</mwc-icon>`
+              ${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;
-        }
+      </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
+      ${showCodeToggleButton || page.menuActions
             ? html `<nav>
-            ${showCodeToggleButton
+            ${showCodeToggleButton
                 ? html `<mwc-icon-button-toggle
                   onicon="code"
                   officon="code_off"
                   @click=${() => this.requestUpdate()}
-                ></mwc-icon-button-toggle>`
+                ></mwc-icon-button-toggle>`
                 : ''}
             ${page.menuActions ? this.renderMenu(page) : ''}
-          </nav>`
+          </nav>`
             : ''}
       <div id="wizard-content">
-        ${this.code && page.element
+        ${this.code && page.element
             ? html `<ace-editor
               base-path="/public/ace"
               wrap
@@ -264,61 +264,61 @@ let WizardDialog = class WizardDialog extends LitElement {
               theme="ace/theme/solarized_${localStorage.getItem('theme')}"
               mode="ace/mode/xml"
               value="${formatXml(new XMLSerializer().serializeToString(page.element))}"
-            ></ace-editor>`
+            ></ace-editor>`
             : page.content?.map(renderWizardInput)}
       </div>
-      ${index > 0
+      ${index > 0
             ? html `<mwc-button
             slot="secondaryAction"
             dialogAction="prev"
             icon="navigate_before"
             label=${this.wizard?.[index - 1].title}
-          ></mwc-button>`
+          ></mwc-button>`
             : html ``}
-      ${page.secondary
+      ${page.secondary
             ? html `<mwc-button
             slot="secondaryAction"
             @click=${() => this.act(page.secondary?.action, false)}
             icon="${page.secondary.icon}"
             label="${page.secondary.label}"
-          ></mwc-button>`
+          ></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
+      ${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
+          ></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)
+          ></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>`
+          ></mwc-button>`
                     : html ``}
-    </mwc-dialog>`;
-    }
-    render() {
-        return html `${this.wizard.map(this.renderPage)}`;
-    }
-};
+    </mwc-dialog>`;
+    }
+    render() {
+        return html `${this.wizard.map(this.renderPage)}`;
+    }
+};
 WizardDialog.styles = css `
     mwc-dialog {
       --mdc-dialog-max-width: 92vw;
@@ -348,27 +348,27 @@ WizardDialog.styles = css `
     *[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 };
+  `;
+__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