@compas-oscd/open-scd 0.34.17 → 0.34.18

package/dist/WizardDivider.d.ts

@@ -1,8 +1,8 @@
-import { LitElement, TemplateResult } from 'lit-element';
-export declare class WizardDividerElement extends LitElement {
-    header?: string;
-    render(): TemplateResult;
-    private renderHeader;
-    private renderSeparator;
-    static styles: import("lit-element").CSSResult;
-}
+import { LitElement, TemplateResult } from 'lit-element';
+export declare class WizardDividerElement extends LitElement {
+    header?: string;
+    render(): TemplateResult;
+    private renderHeader;
+    private renderSeparator;
+    static styles: import("lit-element").CSSResult;
+}

package/dist/WizardDivider.js

@@ -1,19 +1,19 @@
-import { __decorate } from "tslib";
-import { css, customElement, html, LitElement, property, } from 'lit-element';
-let WizardDividerElement = class WizardDividerElement extends LitElement {
-    render() {
-        return html ` ${this.renderHeader()} ${this.renderSeparator()}`;
-    }
-    renderHeader() {
-        if (!this.header) {
-            return html ``;
-        }
-        return html `<h4 class="header">${this.header}</h4>`;
-    }
-    renderSeparator() {
-        return html `<div role="separator"></div>`;
-    }
-};
+import { __decorate } from "tslib";
+import { css, customElement, html, LitElement, property, } from 'lit-element';
+let WizardDividerElement = class WizardDividerElement extends LitElement {
+    render() {
+        return html ` ${this.renderHeader()} ${this.renderSeparator()}`;
+    }
+    renderHeader() {
+        if (!this.header) {
+            return html ``;
+        }
+        return html `<h4 class="header">${this.header}</h4>`;
+    }
+    renderSeparator() {
+        return html `<div role="separator"></div>`;
+    }
+};
 WizardDividerElement.styles = css `
     div {
       height: 0px;
@@ -24,14 +24,14 @@ WizardDividerElement.styles = css `
       border-image: initial;
       border-bottom: 1px solid rgba(0, 0, 0, 0.12);
     }
-  `;
-__decorate([
-    property({
-        type: String,
-    })
-], WizardDividerElement.prototype, "header", void 0);
-WizardDividerElement = __decorate([
-    customElement('wizard-divider')
-], WizardDividerElement);
-export { WizardDividerElement };
+  `;
+__decorate([
+    property({
+        type: String,
+    })
+], WizardDividerElement.prototype, "header", void 0);
+WizardDividerElement = __decorate([
+    customElement('wizard-divider')
+], WizardDividerElement);
+export { WizardDividerElement };
 //# sourceMappingURL=WizardDivider.js.map

package/dist/Wizarding.js

@@ -1,38 +1,38 @@
-import { __decorate } from "tslib";
-import { html, state, query } from 'lit-element';
-import { ifImplemented, } from './foundation.js';
-import './wizard-dialog.js';
-export function Wizarding(Base) {
-    class WizardingElement extends Base {
-        onWizard(we) {
-            const wizard = we.detail.wizard;
-            if (wizard === null)
-                this.workflow.shift();
-            else if (we.detail.subwizard)
-                this.workflow.unshift(wizard);
-            else
-                this.workflow.push(wizard);
-            this.requestUpdate('workflow');
-            this.updateComplete.then(() => this.wizardUI.updateComplete.then(() => this.wizardUI.dialog?.updateComplete.then(() => this.wizardUI.dialog?.focus())));
-        }
-        constructor(...args) {
-            super(...args);
-            /** FIFO queue of [[`Wizard`]]s to display. */
-            this.workflow = [];
-            this.addEventListener('wizard', this.onWizard);
-            this.addEventListener('editor-action', () => this.wizardUI.requestUpdate());
-        }
-        render() {
+import { __decorate } from "tslib";
+import { html, state, query } from 'lit-element';
+import { ifImplemented, } from './foundation.js';
+import './wizard-dialog.js';
+export function Wizarding(Base) {
+    class WizardingElement extends Base {
+        onWizard(we) {
+            const wizard = we.detail.wizard;
+            if (wizard === null)
+                this.workflow.shift();
+            else if (we.detail.subwizard)
+                this.workflow.unshift(wizard);
+            else
+                this.workflow.push(wizard);
+            this.requestUpdate('workflow');
+            this.updateComplete.then(() => this.wizardUI.updateComplete.then(() => this.wizardUI.dialog?.updateComplete.then(() => this.wizardUI.dialog?.focus())));
+        }
+        constructor(...args) {
+            super(...args);
+            /** FIFO queue of [[`Wizard`]]s to display. */
+            this.workflow = [];
+            this.addEventListener('wizard', this.onWizard);
+            this.addEventListener('editor-action', () => this.wizardUI.requestUpdate());
+        }
+        render() {
             return html `${ifImplemented(super.render())}
-        <wizard-dialog .wizard=${this.workflow[0]?.() ?? []}></wizard-dialog>`;
-        }
-    }
-    __decorate([
-        state()
-    ], WizardingElement.prototype, "workflow", void 0);
-    __decorate([
-        query('wizard-dialog')
-    ], WizardingElement.prototype, "wizardUI", void 0);
-    return WizardingElement;
-}
+        <wizard-dialog .wizard=${this.workflow[0]?.() ?? []}></wizard-dialog>`;
+        }
+    }
+    __decorate([
+        state()
+    ], WizardingElement.prototype, "workflow", void 0);
+    __decorate([
+        query('wizard-dialog')
+    ], WizardingElement.prototype, "wizardUI", void 0);
+    return WizardingElement;
+}
 //# sourceMappingURL=Wizarding.js.map

package/dist/Wizarding.js.map

@@ -1 +1 @@
-{"version":3,"file":"Wizarding.js","sourceRoot":"","sources":["../src/Wizarding.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAkB,KAAK,EAAE,MAAM,aAAa,CAAC;AACjE,OAAO,EACL,aAAa,GAKd,MAAM,iBAAiB,CAAC;AAEzB,OAAO,oBAAoB,CAAC;AAO5B,MAAM,UAAU,SAAS,CACvB,IAAW;IAKX,MAAM,gBAAiB,SAAQ,IAAI;QAOzB,QAAQ,CAAC,EAAe;YAC9B,MAAM,MAAM,GAAG,EAAE,CAAC,MAAM,CAAC,MAAM,CAAC;YAChC,IAAI,MAAM,KAAK,IAAI;gBAAE,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE,CAAC;iBACtC,IAAI,EAAE,CAAC,MAAM,CAAC,SAAS;gBAAE,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;;gBACvD,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;YAChC,IAAI,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;YAC/B,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,GAAG,EAAE,CAC5B,IAAI,CAAC,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAC,GAAG,EAAE,CACrC,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,EAAE,CAC7C,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,KAAK,EAAE,CAC9B,CACF,CACF,CAAC;QACJ,CAAC;QAED,YAAY,GAAG,IAAW;YACxB,KAAK,CAAC,GAAG,IAAI,CAAC,CAAC;YAtBjB,8CAA8C;YAE9C,aAAQ,GAAoB,EAAE,CAAC;YAsB7B,IAAI,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;YAC/C,IAAI,CAAC,gBAAgB,CAAC,eAAe,EAAE,GAAG,EAAE,CAC1C,IAAI,CAAC,QAAQ,CAAC,aAAa,EAAE,CAC9B,CAAC;QACJ,CAAC;QAED,MAAM;YACJ,OAAO,IAAI,CAAA,GAAG,aAAa,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC;iCAChB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,EAAE,IAAI,EAAE,mBAAmB,CAAC;QAC3E,CAAC;KACF;IAhCC;QADC,KAAK,EAAE;sDACuB;IAEP;QAAvB,KAAK,CAAC,eAAe,CAAC;sDAAyB;IAgClD,OAAO,gBAAuB,CAAC;AACjC,CAAC","sourcesContent":["import { html, state, TemplateResult, query } from 'lit-element';\nimport {\n  ifImplemented,\n  LitElementConstructor,\n  Mixin,\n  WizardEvent,\n  WizardFactory,\n} from './foundation.js';\n\nimport './wizard-dialog.js';\nimport { WizardDialog } from './wizard-dialog.js';\n\n/** `LitElement` mixin that adds a `workflow` property which [[`Wizard`]]s are\n * queued onto on incoming [[`WizardEvent`]]s, first come first displayed. */\nexport type WizardingElement = Mixin<typeof Wizarding>;\n\nexport function Wizarding<TBase extends LitElementConstructor>(\n  Base: TBase\n): TBase & (new (...args: any[]) => {\n  workflow: WizardFactory[];\n  wizardUI: WizardDialog;\n}) {\n  class WizardingElement extends Base {\n    /** FIFO queue of [[`Wizard`]]s to display. */\n    @state()\n    workflow: WizardFactory[] = [];\n\n    @query('wizard-dialog') wizardUI!: WizardDialog;\n\n    private onWizard(we: WizardEvent) {\n      const wizard = we.detail.wizard;\n      if (wizard === null) this.workflow.shift();\n      else if (we.detail.subwizard) this.workflow.unshift(wizard);\n      else this.workflow.push(wizard);\n      this.requestUpdate('workflow');\n      this.updateComplete.then(() =>\n        this.wizardUI.updateComplete.then(() =>\n          this.wizardUI.dialog?.updateComplete.then(() =>\n            this.wizardUI.dialog?.focus()\n          )\n        )\n      );\n    }\n\n    constructor(...args: any[]) {\n      super(...args);\n\n      this.addEventListener('wizard', this.onWizard);\n      this.addEventListener('editor-action', () =>\n        this.wizardUI.requestUpdate()\n      );\n    }\n\n    render(): TemplateResult {\n      return html`${ifImplemented(super.render())}\n        <wizard-dialog .wizard=${this.workflow[0]?.() ?? []}></wizard-dialog>`;\n    }\n  }\n\n  return WizardingElement as any;\n}\n"]}
+{"version":3,"file":"Wizarding.js","sourceRoot":"","sources":["../src/Wizarding.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAkB,KAAK,EAAE,MAAM,aAAa,CAAC;AACjE,OAAO,EACL,aAAa,GAKd,MAAM,iBAAiB,CAAC;AAEzB,OAAO,oBAAoB,CAAC;AAO5B,MAAM,UAAU,SAAS,CAAsC,IAAW;IACxE,MAAM,gBAAiB,SAAQ,IAAI;QAOzB,QAAQ,CAAC,EAAe;YAC9B,MAAM,MAAM,GAAG,EAAE,CAAC,MAAM,CAAC,MAAM,CAAC;YAChC,IAAI,MAAM,KAAK,IAAI;gBAAE,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE,CAAC;iBACtC,IAAI,EAAE,CAAC,MAAM,CAAC,SAAS;gBAAE,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;;gBACvD,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;YAChC,IAAI,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;YAC/B,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,GAAG,EAAE,CAC5B,IAAI,CAAC,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAC,GAAG,EAAE,CACrC,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,EAAE,CAC7C,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,KAAK,EAAE,CAC9B,CACF,CACF,CAAC;QACJ,CAAC;QAED,YAAY,GAAG,IAAW;YACxB,KAAK,CAAC,GAAG,IAAI,CAAC,CAAC;YAtBjB,8CAA8C;YAE9C,aAAQ,GAAoB,EAAE,CAAC;YAsB7B,IAAI,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;YAC/C,IAAI,CAAC,gBAAgB,CAAC,eAAe,EAAE,GAAG,EAAE,CAC1C,IAAI,CAAC,QAAQ,CAAC,aAAa,EAAE,CAC9B,CAAC;QACJ,CAAC;QAED,MAAM;YACJ,OAAO,IAAI,CAAA,GAAG,aAAa,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC;iCAChB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,EAAE,IAAI,EAAE,mBAAmB,CAAC;QAC3E,CAAC;KACF;IAhCC;QADC,KAAK,EAAE;sDACuB;IAEP;QAAvB,KAAK,CAAC,eAAe,CAAC;sDAAyB;IAgClD,OAAO,gBAAgB,CAAC;AAC1B,CAAC","sourcesContent":["import { html, state, TemplateResult, query } from 'lit-element';\nimport {\n  ifImplemented,\n  LitElementConstructor,\n  Mixin,\n  WizardEvent,\n  WizardFactory,\n} from './foundation.js';\n\nimport './wizard-dialog.js';\nimport { WizardDialog } from './wizard-dialog.js';\n\n/** `LitElement` mixin that adds a `workflow` property which [[`Wizard`]]s are\n * queued onto on incoming [[`WizardEvent`]]s, first come first displayed. */\nexport type WizardingElement = Mixin<typeof Wizarding>;\n\nexport function Wizarding<TBase extends LitElementConstructor>(Base: TBase) {\n  class WizardingElement extends Base {\n    /** FIFO queue of [[`Wizard`]]s to display. */\n    @state()\n    workflow: WizardFactory[] = [];\n\n    @query('wizard-dialog') wizardUI!: WizardDialog;\n\n    private onWizard(we: WizardEvent) {\n      const wizard = we.detail.wizard;\n      if (wizard === null) this.workflow.shift();\n      else if (we.detail.subwizard) this.workflow.unshift(wizard);\n      else this.workflow.push(wizard);\n      this.requestUpdate('workflow');\n      this.updateComplete.then(() =>\n        this.wizardUI.updateComplete.then(() =>\n          this.wizardUI.dialog?.updateComplete.then(() =>\n            this.wizardUI.dialog?.focus()\n          )\n        )\n      );\n    }\n\n    constructor(...args: any[]) {\n      super(...args);\n\n      this.addEventListener('wizard', this.onWizard);\n      this.addEventListener('editor-action', () =>\n        this.wizardUI.requestUpdate()\n      );\n    }\n\n    render(): TemplateResult {\n      return html`${ifImplemented(super.render())}\n        <wizard-dialog .wizard=${this.workflow[0]?.() ?? []}></wizard-dialog>`;\n    }\n  }\n\n  return WizardingElement;\n}\n"]}

package/dist/action-icon.d.ts

@@ -1,25 +1,25 @@
-import { LitElement, TemplateResult } from 'lit-element';
-import '@material/mwc-icon';
-/**
- * A responsive container rendering actions in a header.
- *
- * The "action" slot may contain up to eight icon buttons.
- * The "icon" slot, if filled overrides the icon property.
- * The default slot will be rendered into the pane body in a single column.
- */
-export declare class ActionIcon extends LitElement {
-    /** caption text, displayed in the header */
-    label?: string;
-    /** icon name, displayed unless the "icon" slot is filled */
-    icon?: string;
-    /** color header with secondary theme color while focus is within */
-    secondary: boolean;
-    /** highlight pane with dotted outline */
-    highlighted: boolean;
-    /** disables CSS adoption to action buttons */
-    hideActions: boolean;
-    firstUpdated(): Promise<void>;
-    private renderIcon;
-    render(): TemplateResult;
-    static styles: import("lit-element").CSSResult;
-}
+import { LitElement, TemplateResult } from 'lit-element';
+import '@material/mwc-icon';
+/**
+ * A responsive container rendering actions in a header.
+ *
+ * The "action" slot may contain up to eight icon buttons.
+ * The "icon" slot, if filled overrides the icon property.
+ * The default slot will be rendered into the pane body in a single column.
+ */
+export declare class ActionIcon extends LitElement {
+    /** caption text, displayed in the header */
+    label?: string;
+    /** icon name, displayed unless the "icon" slot is filled */
+    icon?: string;
+    /** color header with secondary theme color while focus is within */
+    secondary: boolean;
+    /** highlight pane with dotted outline */
+    highlighted: boolean;
+    /** disables CSS adoption to action buttons */
+    hideActions: boolean;
+    firstUpdated(): Promise<void>;
+    private renderIcon;
+    render(): TemplateResult;
+    static styles: import("lit-element").CSSResult;
+}

package/dist/action-icon.js

@@ -1,40 +1,40 @@
-import { __decorate } from "tslib";
-import { css, customElement, html, LitElement, property, } from 'lit-element';
-import { nothing } from 'lit-html';
-import '@material/mwc-icon';
-/**
- * A responsive container rendering actions in a header.
- *
- * The "action" slot may contain up to eight icon buttons.
- * The "icon" slot, if filled overrides the icon property.
- * The default slot will be rendered into the pane body in a single column.
- */
-let ActionIcon = class ActionIcon extends LitElement {
-    constructor() {
-        super(...arguments);
-        /** color header with secondary theme color while focus is within */
-        this.secondary = false;
-        /** highlight pane with dotted outline */
-        this.highlighted = false;
-        /** disables CSS adoption to action buttons */
-        this.hideActions = false;
-    }
-    async firstUpdated() {
-        this.tabIndex = 0;
-    }
-    renderIcon() {
+import { __decorate } from "tslib";
+import { css, customElement, html, LitElement, property, } from 'lit-element';
+import { nothing } from 'lit-html';
+import '@material/mwc-icon';
+/**
+ * A responsive container rendering actions in a header.
+ *
+ * The "action" slot may contain up to eight icon buttons.
+ * The "icon" slot, if filled overrides the icon property.
+ * The default slot will be rendered into the pane body in a single column.
+ */
+let ActionIcon = class ActionIcon extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** color header with secondary theme color while focus is within */
+        this.secondary = false;
+        /** highlight pane with dotted outline */
+        this.highlighted = false;
+        /** disables CSS adoption to action buttons */
+        this.hideActions = false;
+    }
+    async firstUpdated() {
+        this.tabIndex = 0;
+    }
+    renderIcon() {
         return html `<span>
       <slot name="icon"
         >${this.icon ? html `<mwc-icon>${this.icon}</mwc-icon>` : nothing}</slot
       ></span
-    > `;
-    }
-    render() {
+    > `;
+    }
+    render() {
         return html `<header>${this.label ?? nothing}</header>
       <section>${this.renderIcon()}<slot name="action"></slot></section>
-      <footer>${this.label ?? nothing}</footer>`;
-    }
-};
+      <footer>${this.label ?? nothing}</footer>`;
+    }
+};
 ActionIcon.styles = css `
     :host {
       display: flex;
@@ -197,24 +197,24 @@ ActionIcon.styles = css `
     :host(:focus-within[hideActions]) header {
       transform: translate(0, -40px);
     }
-  `;
-__decorate([
-    property({ type: String })
-], ActionIcon.prototype, "label", void 0);
-__decorate([
-    property({ type: String })
-], ActionIcon.prototype, "icon", void 0);
-__decorate([
-    property({ type: Boolean })
-], ActionIcon.prototype, "secondary", void 0);
-__decorate([
-    property({ type: Boolean })
-], ActionIcon.prototype, "highlighted", void 0);
-__decorate([
-    property({ type: Boolean })
-], ActionIcon.prototype, "hideActions", void 0);
-ActionIcon = __decorate([
-    customElement('action-icon')
-], ActionIcon);
-export { ActionIcon };
+  `;
+__decorate([
+    property({ type: String })
+], ActionIcon.prototype, "label", void 0);
+__decorate([
+    property({ type: String })
+], ActionIcon.prototype, "icon", void 0);
+__decorate([
+    property({ type: Boolean })
+], ActionIcon.prototype, "secondary", void 0);
+__decorate([
+    property({ type: Boolean })
+], ActionIcon.prototype, "highlighted", void 0);
+__decorate([
+    property({ type: Boolean })
+], ActionIcon.prototype, "hideActions", void 0);
+ActionIcon = __decorate([
+    customElement('action-icon')
+], ActionIcon);
+export { ActionIcon };
 //# sourceMappingURL=action-icon.js.map

package/dist/action-pane.d.ts

@@ -1,25 +1,25 @@
-import { LitElement, TemplateResult } from 'lit-element';
-import '@material/mwc-icon';
-/**
- * A responsive container rendering actions in a header.
- *
- * The "action" slot may contain up to eight icon buttons.
- * The "icon" slot, if filled overrides the icon property.
- * The default slot will be rendered into the pane body in a single column.
- */
-export declare class ActionPane extends LitElement {
-    /** caption text, displayed in the header */
-    label?: string;
-    /** icon name, displayed unless the "icon" slot is filled */
-    icon?: string;
-    /** color header with secondary theme color while focus is within */
-    secondary: boolean;
-    /** highlight pane with dotted outline */
-    highlighted: boolean;
-    /** nesting level, default (closest pane ancestor's level) + 1 */
-    level: number;
-    firstUpdated(): Promise<void>;
-    private renderHeader;
-    render(): TemplateResult;
-    static styles: import("lit-element").CSSResult;
-}
+import { LitElement, TemplateResult } from 'lit-element';
+import '@material/mwc-icon';
+/**
+ * A responsive container rendering actions in a header.
+ *
+ * The "action" slot may contain up to eight icon buttons.
+ * The "icon" slot, if filled overrides the icon property.
+ * The default slot will be rendered into the pane body in a single column.
+ */
+export declare class ActionPane extends LitElement {
+    /** caption text, displayed in the header */
+    label?: string;
+    /** icon name, displayed unless the "icon" slot is filled */
+    icon?: string;
+    /** color header with secondary theme color while focus is within */
+    secondary: boolean;
+    /** highlight pane with dotted outline */
+    highlighted: boolean;
+    /** nesting level, default (closest pane ancestor's level) + 1 */
+    level: number;
+    firstUpdated(): Promise<void>;
+    private renderHeader;
+    render(): TemplateResult;
+    static styles: import("lit-element").CSSResult;
+}

package/dist/action-pane.js

@@ -1,80 +1,80 @@
-import { __decorate } from "tslib";
-import { css, customElement, html, LitElement, property, } from 'lit-element';
-import { classMap } from 'lit-html/directives/class-map';
-import '@material/mwc-icon';
-import { nothing } from 'lit-html';
-function closestTo(node, selector) {
-    const closest = node.nodeType === Node.ELEMENT_NODE
-        ? node.closest(selector)
-        : null;
-    if (closest)
-        return closest;
-    const root = node.getRootNode();
-    if (root instanceof ShadowRoot)
-        return closestTo(root.host, selector);
-    return null;
-}
-/**
- * A responsive container rendering actions in a header.
- *
- * The "action" slot may contain up to eight icon buttons.
- * The "icon" slot, if filled overrides the icon property.
- * The default slot will be rendered into the pane body in a single column.
- */
-let ActionPane = class ActionPane extends LitElement {
-    constructor() {
-        super(...arguments);
-        /** color header with secondary theme color while focus is within */
-        this.secondary = false;
-        /** highlight pane with dotted outline */
-        this.highlighted = false;
-        /** nesting level, default (closest pane ancestor's level) + 1 */
-        this.level = 1;
-    }
-    async firstUpdated() {
-        this.tabIndex = 0;
-        const parentPane = closestTo(this.parentNode, 'action-pane');
-        if (parentPane)
-            this.level = parentPane.level + 1;
-        this.level = Math.floor(this.level);
-    }
-    renderHeader() {
+import { __decorate } from "tslib";
+import { css, customElement, html, LitElement, property, } from 'lit-element';
+import { classMap } from 'lit-html/directives/class-map';
+import '@material/mwc-icon';
+import { nothing } from 'lit-html';
+function closestTo(node, selector) {
+    const closest = node.nodeType === Node.ELEMENT_NODE
+        ? node.closest(selector)
+        : null;
+    if (closest)
+        return closest;
+    const root = node.getRootNode();
+    if (root instanceof ShadowRoot)
+        return closestTo(root.host, selector);
+    return null;
+}
+/**
+ * A responsive container rendering actions in a header.
+ *
+ * The "action" slot may contain up to eight icon buttons.
+ * The "icon" slot, if filled overrides the icon property.
+ * The default slot will be rendered into the pane body in a single column.
+ */
+let ActionPane = class ActionPane extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** color header with secondary theme color while focus is within */
+        this.secondary = false;
+        /** highlight pane with dotted outline */
+        this.highlighted = false;
+        /** nesting level, default (closest pane ancestor's level) + 1 */
+        this.level = 1;
+    }
+    async firstUpdated() {
+        this.tabIndex = 0;
+        const parentPane = closestTo(this.parentNode, 'action-pane');
+        if (parentPane)
+            this.level = parentPane.level + 1;
+        this.level = Math.floor(this.level);
+    }
+    renderHeader() {
         const content = html `<span
         ><slot name="icon"
-          >${this.icon
-            ? html `<mwc-icon>${this.icon}</mwc-icon>`
+          >${this.icon
+            ? html `<mwc-icon>${this.icon}</mwc-icon>`
             : nothing}</slot
         ></span
       >
       ${this.label ?? nothing}
-      <nav><slot name="action"></slot></nav>`;
-        const headingLevel = Math.floor(Math.max(this.level, 1));
-        // Sometimes a TemplateResult is passed in as Label, not a string. So only when it's a string show a title.
-        const title = typeof this.label === 'string' ? this.label : '';
-        switch (headingLevel) {
-            case 1:
-                return html `<h1 title="${title}">${content}</h1>`;
-            case 2:
-                return html `<h2 title="${title}">${content}</h2>`;
-            case 3:
-                return html `<h3 title="${title}">${content}</h3>`;
-            default:
-                return html `<h4 title="${title}">${content}</h4>`;
-        }
-    }
-    render() {
+      <nav><slot name="action"></slot></nav>`;
+        const headingLevel = Math.floor(Math.max(this.level, 1));
+        // Sometimes a TemplateResult is passed in as Label, not a string. So only when it's a string show a title.
+        const title = typeof this.label === 'string' ? this.label : '';
+        switch (headingLevel) {
+            case 1:
+                return html `<h1 title="${title}">${content}</h1>`;
+            case 2:
+                return html `<h2 title="${title}">${content}</h2>`;
+            case 3:
+                return html `<h3 title="${title}">${content}</h3>`;
+            default:
+                return html `<h4 title="${title}">${content}</h4>`;
+        }
+    }
+    render() {
         return html `<section
-      class="${classMap({
-            secondary: this.secondary,
-            highlighted: this.highlighted,
-            contrasted: this.level % 2 === 0,
+      class="${classMap({
+            secondary: this.secondary,
+            highlighted: this.highlighted,
+            contrasted: this.level % 2 === 0,
         })}"
     >
       ${this.renderHeader()}
       <div><slot></slot></div>
-    </section>`;
-    }
-};
+    </section>`;
+    }
+};
 ActionPane.styles = css `
     :host {
       outline: none;
@@ -153,24 +153,24 @@ ActionPane.styles = css `
       top: -0.1em;
       --mdc-icon-size: 1em;
     }
-  `;
-__decorate([
-    property({ type: String })
-], ActionPane.prototype, "label", void 0);
-__decorate([
-    property({ type: String })
-], ActionPane.prototype, "icon", void 0);
-__decorate([
-    property({ type: Boolean })
-], ActionPane.prototype, "secondary", void 0);
-__decorate([
-    property({ type: Boolean })
-], ActionPane.prototype, "highlighted", void 0);
-__decorate([
-    property({ type: Number })
-], ActionPane.prototype, "level", void 0);
-ActionPane = __decorate([
-    customElement('action-pane')
-], ActionPane);
-export { ActionPane };
+  `;
+__decorate([
+    property({ type: String })
+], ActionPane.prototype, "label", void 0);
+__decorate([
+    property({ type: String })
+], ActionPane.prototype, "icon", void 0);
+__decorate([
+    property({ type: Boolean })
+], ActionPane.prototype, "secondary", void 0);
+__decorate([
+    property({ type: Boolean })
+], ActionPane.prototype, "highlighted", void 0);
+__decorate([
+    property({ type: Number })
+], ActionPane.prototype, "level", void 0);
+ActionPane = __decorate([
+    customElement('action-pane')
+], ActionPane);
+export { ActionPane };
 //# sourceMappingURL=action-pane.js.map

package/dist/addons/Editor.d.ts

@@ -1,25 +1,25 @@
-import { EditEventV2, OpenEvent, XMLEditor } from '@compas-oscd/core';
-import { LitElement, TemplateResult } from 'lit-element';
-import { EditEvent } from '@compas-oscd/core';
-export declare class OscdEditor extends LitElement {
-    /** The `XMLDocument` to be edited */
-    doc: XMLDocument | null;
-    /** The name of the current [[`doc`]] */
-    docName: string;
-    /** The UUID of the current [[`doc`]] */
-    docId: string;
-    /** XML Editor to apply changes to the scd */
-    editor: XMLEditor;
-    host: HTMLElement;
-    private onAction;
-    handleEditEvent(event: EditEvent): void;
-    /**
-     *
-     * @deprecated [Move to handleOpenDoc instead]
-     */
-    private onOpenDoc;
-    handleOpenDoc({ detail: { docName, doc } }: OpenEvent): void;
-    connectedCallback(): void;
-    render(): TemplateResult;
-    handleEditEventV2(event: EditEventV2): Promise<void>;
-}
+import { EditEventV2, OpenEvent, XMLEditor } from '@openscd/core';
+import { LitElement, TemplateResult } from 'lit-element';
+import { EditEvent } from '@openscd/core';
+export declare class OscdEditor extends LitElement {
+    /** The `XMLDocument` to be edited */
+    doc: XMLDocument | null;
+    /** The name of the current [[`doc`]] */
+    docName: string;
+    /** The UUID of the current [[`doc`]] */
+    docId: string;
+    /** XML Editor to apply changes to the scd */
+    editor: XMLEditor;
+    host: HTMLElement;
+    private onAction;
+    handleEditEvent(event: EditEvent): void;
+    /**
+     *
+     * @deprecated [Move to handleOpenDoc instead]
+     */
+    private onOpenDoc;
+    handleOpenDoc({ detail: { docName, doc } }: OpenEvent): void;
+    connectedCallback(): void;
+    render(): TemplateResult;
+    handleEditEventV2(event: EditEventV2): Promise<void>;
+}