@compas-oscd/open-scd 0.34.5 → 0.34.7

package/dist/addons/plugin-manager/custom-plugin-dialog.js

@@ -0,0 +1,177 @@
+import { __decorate } from "tslib";
+import { customElement, html, LitElement, query, css, } from 'lit-element';
+import { get } from 'lit-translate';
+import { newAddExternalPluginEvent, pluginIcons } from '../../open-scd.js';
+import { menuPosition } from "../../plugin.js";
+import '@material/mwc-dialog';
+import '@material/mwc-drawer';
+import '@material/mwc-list';
+import '@material/mwc-select';
+import '@material/mwc-switch';
+import '@material/mwc-textfield';
+let OscdCustomPluginDialog = class OscdCustomPluginDialog extends LitElement {
+    render() {
+        return html `
+      <mwc-dialog id="dialog" heading="${get('plugins.add.heading')}">
+        <div style="display: flex; flex-direction: column; row-gap: 8px;">
+          <p style="color:var(--mdc-theme-error);">
+            ${get('plugins.add.warning')}
+          </p>
+          <mwc-textfield
+            label="${get('plugins.add.name')}"
+            helper="${get('plugins.add.nameHelper')}"
+            required
+            id="pluginNameInput"
+          ></mwc-textfield>
+          <mwc-list id="pluginKindList">
+            <mwc-radio-list-item
+              id="editor"
+              value="editor"
+              hasMeta
+              selected
+              left
+            >
+              ${get('plugins.editor')}
+              <mwc-icon slot="meta">
+                ${pluginIcons['editor']}
+              </mwc-icon>
+            </mwc-radio-list-item>
+            <mwc-radio-list-item value="menu" hasMeta left>
+              ${get('plugins.menu')}
+            <mwc-icon slot="meta">
+              ${pluginIcons['menu']}
+            </mwc-icon>
+            </mwc-radio-list-item>
+            <div id="menudetails">
+              <mwc-formfield
+                id="enabledefault"
+                label="${get('plugins.requireDoc')}"
+              >
+                <mwc-switch id="requireDoc" checked></mwc-switch>
+              </mwc-formfield>
+              <mwc-select id="positionList" value="middle" fixedpositionList>
+                ${Object.values(menuPosition).map(menutype => html `<mwc-list-item value="${menutype}"
+                      >${get('plugins.' + menutype)}</mwc-list-item
+                    >`)}
+              </mwc-select>
+            </div>
+            <style>
+              #menudetails {
+                display: none;
+                padding: 20px;
+                padding-left: 50px;
+              }
+              #pluginKindList [value="menu"][selected] ~ #menudetails {
+                display: grid;
+              }
+              #enabledefault {
+                padding-bottom: 20px;
+              }
+              #positionList {
+                max-width: 250px;
+              }
+            </style>
+            <mwc-radio-list-item id="validator" value="validator" hasMeta left>
+              ${get('plugins.validator')}
+              <mwc-icon slot="meta">
+                ${pluginIcons['validator']}
+              </mwc-icon>
+            </mwc-radio-list-item>
+          </mwc-list>
+          <mwc-textfield
+            label="${get('plugins.add.src')}"
+            helper="${get('plugins.add.srcHelper')}"
+            placeholder="http://example.com/plugin.js"
+            type="url"
+            required
+            id="pluginSrcInput">
+          </mwc-textfield>
+        </div>
+        <mwc-button
+          slot="secondaryAction"
+          dialogAction="close"
+          label="${get('cancel')}">
+        </mwc-button>
+        <mwc-button
+          id="addButton"
+          slot="primaryAction"
+          icon="add"
+          label="${get('add')}"
+          trailingIcon
+          @click=${() => this.handleAddPlugin()}>
+        </mwc-button>
+      </mwc-dialog>
+    `;
+    }
+    close() {
+        this.dialog.close();
+    }
+    show() {
+        this.dialog.show();
+    }
+    get open() {
+        return this.dialog.open;
+    }
+    handleAddPlugin() {
+        if (!(this.pluginSrcInput.checkValidity() &&
+            this.pluginNameInput.checkValidity() &&
+            this.pluginKindList.selected &&
+            this.requireDoc &&
+            this.positionList.selected))
+            return;
+        this.dispatchEvent(newAddExternalPluginEvent({
+            src: this.pluginSrcInput.value,
+            name: this.pluginNameInput.value,
+            kind: this.pluginKindList.selected.value,
+            requireDoc: this.requireDoc.checked,
+            position: this.positionList.value,
+            active: true,
+            // this is an added plugin and will be remove by reset either way
+            activeByDefault: false,
+        }));
+        this.requestUpdate();
+        this.dialog.close();
+    }
+};
+OscdCustomPluginDialog.styles = css `
+
+    mwc-dialog {
+      --mdc-dialog-max-width: 98vw;
+    }
+
+    mwc-dialog > form {
+      display: flex;
+      flex-direction: column;
+    }
+
+    mwc-dialog > form > * {
+      display: block;
+      margin-top: 16px;
+    }
+  `;
+__decorate([
+    query('#dialog')
+], OscdCustomPluginDialog.prototype, "dialog", void 0);
+__decorate([
+    query('#pluginSrcInput')
+], OscdCustomPluginDialog.prototype, "pluginSrcInput", void 0);
+__decorate([
+    query('#pluginNameInput')
+], OscdCustomPluginDialog.prototype, "pluginNameInput", void 0);
+__decorate([
+    query('#pluginKindList')
+], OscdCustomPluginDialog.prototype, "pluginKindList", void 0);
+__decorate([
+    query('#requireDoc')
+], OscdCustomPluginDialog.prototype, "requireDoc", void 0);
+__decorate([
+    query('#positionList')
+], OscdCustomPluginDialog.prototype, "positionList", void 0);
+__decorate([
+    query('#addButton')
+], OscdCustomPluginDialog.prototype, "addButton", void 0);
+OscdCustomPluginDialog = __decorate([
+    customElement('oscd-custom-plugin-dialog')
+], OscdCustomPluginDialog);
+export { OscdCustomPluginDialog };
+//# sourceMappingURL=custom-plugin-dialog.js.map

package/dist/addons/plugin-manager/custom-plugin-dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"custom-plugin-dialog.js","sourceRoot":"","sources":["../../../src/addons/plugin-manager/custom-plugin-dialog.ts"],"names":[],"mappings":"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","sourcesContent":["\nimport {\n  customElement,\n  html,\n  LitElement,\n  query,\n  TemplateResult,\n  css,\n} from 'lit-element';\nimport { get } from 'lit-translate';\nimport {\n  newAddExternalPluginEvent,\n  pluginIcons\n} from '../../open-scd.js';\n\nimport {\n  MenuPosition,\n  menuPosition,\n  PluginKind\n} from \"../../plugin.js\";\n\nimport type { Button } from '@material/mwc-button';\nimport type { Dialog } from '@material/mwc-dialog';\nimport { List } from '@material/mwc-list';\nimport type { ListItem } from '@material/mwc-list/mwc-list-item';\nimport type { Select } from '@material/mwc-select';\nimport type { Switch } from '@material/mwc-switch';\nimport type { TextField } from '@material/mwc-textfield';\n\nimport '@material/mwc-dialog';\nimport '@material/mwc-drawer';\nimport '@material/mwc-list';\nimport '@material/mwc-select';\nimport '@material/mwc-switch';\nimport '@material/mwc-textfield';\n\n\n@customElement('oscd-custom-plugin-dialog')\nexport class OscdCustomPluginDialog extends LitElement {\n\n  @query('#dialog') dialog!: Dialog\n  @query('#pluginSrcInput') pluginSrcInput!: TextField\n  @query('#pluginNameInput') pluginNameInput!: TextField\n  @query('#pluginKindList') pluginKindList!: List\n  @query('#requireDoc') requireDoc!: Switch\n  @query('#positionList') positionList!: Select\n  @query('#addButton') addButton!: Button\n\n  render(): TemplateResult {\n    return html`\n      <mwc-dialog id=\"dialog\" heading=\"${get('plugins.add.heading')}\">\n        <div style=\"display: flex; flex-direction: column; row-gap: 8px;\">\n          <p style=\"color:var(--mdc-theme-error);\">\n            ${get('plugins.add.warning')}\n          </p>\n          <mwc-textfield\n            label=\"${get('plugins.add.name')}\"\n            helper=\"${get('plugins.add.nameHelper')}\"\n            required\n            id=\"pluginNameInput\"\n          ></mwc-textfield>\n          <mwc-list id=\"pluginKindList\">\n            <mwc-radio-list-item\n              id=\"editor\"\n              value=\"editor\"\n              hasMeta\n              selected\n              left\n            >\n              ${get('plugins.editor')}\n              <mwc-icon slot=\"meta\">\n                ${pluginIcons['editor']}\n              </mwc-icon>\n            </mwc-radio-list-item>\n            <mwc-radio-list-item value=\"menu\" hasMeta left>\n              ${get('plugins.menu')}\n            <mwc-icon slot=\"meta\">\n              ${pluginIcons['menu']}\n            </mwc-icon>\n            </mwc-radio-list-item>\n            <div id=\"menudetails\">\n              <mwc-formfield\n                id=\"enabledefault\"\n                label=\"${get('plugins.requireDoc')}\"\n              >\n                <mwc-switch id=\"requireDoc\" checked></mwc-switch>\n              </mwc-formfield>\n              <mwc-select id=\"positionList\" value=\"middle\" fixedpositionList>\n                ${Object.values(menuPosition).map(\n                  menutype =>\n                    html`<mwc-list-item value=\"${menutype}\"\n                      >${get('plugins.' + menutype)}</mwc-list-item\n                    >`\n                )}\n              </mwc-select>\n            </div>\n            <style>\n              #menudetails {\n                display: none;\n                padding: 20px;\n                padding-left: 50px;\n              }\n              #pluginKindList [value=\"menu\"][selected] ~ #menudetails {\n                display: grid;\n              }\n              #enabledefault {\n                padding-bottom: 20px;\n              }\n              #positionList {\n                max-width: 250px;\n              }\n            </style>\n            <mwc-radio-list-item id=\"validator\" value=\"validator\" hasMeta left>\n              ${get('plugins.validator')}\n              <mwc-icon slot=\"meta\">\n                ${pluginIcons['validator']}\n              </mwc-icon>\n            </mwc-radio-list-item>\n          </mwc-list>\n          <mwc-textfield\n            label=\"${get('plugins.add.src')}\"\n            helper=\"${get('plugins.add.srcHelper')}\"\n            placeholder=\"http://example.com/plugin.js\"\n            type=\"url\"\n            required\n            id=\"pluginSrcInput\">\n          </mwc-textfield>\n        </div>\n        <mwc-button\n          slot=\"secondaryAction\"\n          dialogAction=\"close\"\n          label=\"${get('cancel')}\">\n        </mwc-button>\n        <mwc-button\n          id=\"addButton\"\n          slot=\"primaryAction\"\n          icon=\"add\"\n          label=\"${get('add')}\"\n          trailingIcon\n          @click=${() => this.handleAddPlugin()}>\n        </mwc-button>\n      </mwc-dialog>\n    `;\n  }\n\n  static styles = css`\n\n    mwc-dialog {\n      --mdc-dialog-max-width: 98vw;\n    }\n\n    mwc-dialog > form {\n      display: flex;\n      flex-direction: column;\n    }\n\n    mwc-dialog > form > * {\n      display: block;\n      margin-top: 16px;\n    }\n  `\n\n  public close(){\n    this.dialog.close()\n  }\n\n  public show(){\n    this.dialog.show()\n  }\n\n  get open(){\n    return this.dialog.open\n  }\n\n  private handleAddPlugin() {\n\n    if (\n      !(\n        this.pluginSrcInput.checkValidity() &&\n        this.pluginNameInput.checkValidity() &&\n        this.pluginKindList.selected &&\n        this.requireDoc &&\n        this.positionList.selected\n      )\n    )\n      return;\n\n    this.dispatchEvent(\n      newAddExternalPluginEvent({\n        src: this.pluginSrcInput.value,\n        name: this.pluginNameInput.value,\n        kind: <PluginKind>(<ListItem>this.pluginKindList.selected).value,\n        requireDoc: this.requireDoc.checked,\n        position: <MenuPosition>this.positionList.value,\n        active: true,\n        // this is an added plugin and will be remove by reset either way\n        activeByDefault: false,\n      })\n    );\n\n    this.requestUpdate();\n    this.dialog.close();\n  }\n\n}\n\n\n"]}

package/dist/addons/plugin-manager/plugin-manager.d.ts

@@ -0,0 +1,20 @@
+import { LitElement, TemplateResult } from 'lit-element';
+import type { Dialog } from '@material/mwc-dialog';
+import '@material/mwc-dialog';
+import '@material/mwc-list';
+import type { List } from '@material/mwc-list';
+import { Plugin } from "../../plugin.js";
+export declare class OscdPluginManager extends LitElement {
+    /** The plugins to render the layout. */
+    plugins: Plugin[];
+    root: Dialog;
+    pluginList: List;
+    render(): TemplateResult;
+    static styles: import("lit-element").CSSResult;
+    show(): void;
+    private generateEditorListItems;
+    private generateMenuListItems;
+    private generateValidatorListItems;
+    private dispatchOpenCustomPluginDialogEvent;
+    private renderPluginListItem;
+}

package/dist/addons/plugin-manager/plugin-manager.js

@@ -0,0 +1,165 @@
+import { __decorate } from "tslib";
+import { customElement, html, LitElement, property, query, css } from 'lit-element';
+import { get } from 'lit-translate';
+import '@material/mwc-dialog';
+import '@material/mwc-list';
+import { newResetPluginsEvent, newSetPluginsEvent, pluginIcons } from '../../open-scd.js';
+let OscdPluginManager = class OscdPluginManager extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** The plugins to render the layout. */
+        this.plugins = [];
+    }
+    render() {
+        return html `
+        <mwc-dialog
+          stacked
+          id="plugin-manager-root"
+          heading="${get('plugins.heading')}"
+        >
+          <mwc-list
+            id="pluginList"
+            multi
+            @selected=${(e) => {
+            const selectedPlugins = this.pluginList.items
+                .filter((item, index) => e.detail.index.has(index))
+                // @ts-expect-error: we add plugin to the list item
+                .map(item => item.plugin);
+            this.dispatchEvent(newSetPluginsEvent(selectedPlugins));
+        }}
+          >
+            <mwc-list-item graphic="avatar" noninteractive>
+              <strong>${get(`plugins.editor`)}</strong>
+              <mwc-icon slot="graphic" class="inverted">
+                ${pluginIcons['editor']}
+              </mwc-icon>
+            </mwc-list-item>
+
+            <li divider role="separator"></li>
+
+            ${this.generateEditorListItems()}
+
+            <mwc-list-item graphic="avatar" noninteractive>
+              <strong>${get(`plugins.menu`)}</strong>
+              <mwc-icon slot="graphic" class="inverted">
+                <strong>${pluginIcons['menu']}</strong></mwc-icon>
+              </mwc-list-item>
+            <li divider role="separator"></li>
+
+            ${this.generateMenuListItems('top')}
+
+            <li divider role="separator" inset></li>
+
+            ${this.generateValidatorListItems()}
+
+            <li divider role="separator" inset></li>
+
+            ${this.generateMenuListItems('middle')}
+
+            <li divider role="separator" inset></li>
+
+            ${this.generateMenuListItems('bottom')}
+
+          </mwc-list>
+          <mwc-button
+            slot="secondaryAction"
+            icon="refresh"
+            label="${get('reset')}"
+            @click=${async () => {
+            this.dispatchEvent(newResetPluginsEvent());
+            this.requestUpdate();
+        }}
+            style="--mdc-theme-primary: var(--mdc-theme-error)"
+          >
+          </mwc-button>
+          <mwc-button
+            slot="secondaryAction"
+            icon=""
+            label="${get('close')}"
+            dialogAction="close">
+          </mwc-button>
+          <mwc-button
+            outlined
+            trailingIcon
+            slot="primaryAction"
+            icon="library_add"
+            label="${get('plugins.add.heading')}&hellip;"
+            @click=${() => this.dispatchOpenCustomPluginDialogEvent()}>
+          </mwc-button>
+        </mwc-dialog>
+      `;
+    }
+    show() {
+        this.root.show();
+    }
+    generateEditorListItems() {
+        return this.plugins
+            .filter(p => p.kind === 'editor')
+            .map(this.renderPluginListItem);
+    }
+    generateMenuListItems(position) {
+        return this.plugins
+            .filter(p => p.kind === 'menu' && p.position === position)
+            .map(this.renderPluginListItem);
+    }
+    generateValidatorListItems() {
+        return this.plugins
+            .filter(p => p.kind === 'validator')
+            .map(this.renderPluginListItem);
+    }
+    dispatchOpenCustomPluginDialogEvent() {
+        const event = new CustomEvent('open-plugin-download', {
+            bubbles: true,
+            composed: true,
+        });
+        this.dispatchEvent(event);
+    }
+    renderPluginListItem(plugin) {
+        if (!plugin) {
+            return html ``;
+        }
+        return html `
+      <mwc-check-list-item
+          class="${plugin.official ? 'official' : 'external'}"
+          value="${plugin.src}"
+          .plugin=${plugin}
+          ?selected=${plugin.active}
+          @request-selected=${(e) => {
+            if (e.detail.source !== 'interaction') {
+                e.preventDefault();
+                e.stopPropagation();
+                e.stopImmediatePropagation();
+                return false;
+            }
+        }}
+          hasMeta
+          left
+        >
+          <mwc-icon slot="meta">
+            ${plugin.icon || pluginIcons[plugin.kind]}
+          </mwc-icon>
+          ${plugin.name}
+        </mwc-check-list-item>
+
+    `;
+    }
+};
+OscdPluginManager.styles = css `
+    mwc-dialog {
+      --mdc-dialog-max-width: 98vw;
+    }
+  `;
+__decorate([
+    property({ type: Array })
+], OscdPluginManager.prototype, "plugins", void 0);
+__decorate([
+    query('#plugin-manager-root')
+], OscdPluginManager.prototype, "root", void 0);
+__decorate([
+    query('#pluginList')
+], OscdPluginManager.prototype, "pluginList", void 0);
+OscdPluginManager = __decorate([
+    customElement('oscd-plugin-manager')
+], OscdPluginManager);
+export { OscdPluginManager };
+//# sourceMappingURL=plugin-manager.js.map

package/dist/addons/plugin-manager/plugin-manager.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"plugin-manager.js","sourceRoot":"","sources":["../../../src/addons/plugin-manager/plugin-manager.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  customElement,\n  html,\n  LitElement,\n  property,\n  query,\n  TemplateResult,\n  css\n} from 'lit-element';\nimport { get } from 'lit-translate';\n\nimport type { ActionDetail } from '@material/mwc-list';\nimport type { MultiSelectedEvent } from '@material/mwc-list/mwc-list-foundation.js';\nimport type { Dialog } from '@material/mwc-dialog';\nimport '@material/mwc-dialog';\nimport '@material/mwc-list';\nimport type {List} from '@material/mwc-list';\n\nimport {\n  newResetPluginsEvent,\n  newSetPluginsEvent,\n  pluginIcons\n} from '../../open-scd.js';\n\nimport {\n  MenuPosition,\n  Plugin,\n} from \"../../plugin.js\";\n\n@customElement('oscd-plugin-manager')\nexport class OscdPluginManager extends LitElement {\n\n  /** The plugins to render the layout. */\n  @property({ type: Array }) plugins: Plugin[] = [];\n  @query('#plugin-manager-root') root!: Dialog\n  @query('#pluginList') pluginList!: List\n\n  render(): TemplateResult {\n      return html`\n        <mwc-dialog\n          stacked\n          id=\"plugin-manager-root\"\n          heading=\"${get('plugins.heading')}\"\n        >\n          <mwc-list\n            id=\"pluginList\"\n            multi\n            @selected=${(e: MultiSelectedEvent) => {\n              const selectedPlugins = this.pluginList.items\n              .filter((item, index) => e.detail.index.has(index))\n              // @ts-expect-error: we add plugin to the list item\n              .map(item => item.plugin) as Plugin[]\n\n              this.dispatchEvent(newSetPluginsEvent(selectedPlugins))\n            }}\n          >\n            <mwc-list-item graphic=\"avatar\" noninteractive>\n              <strong>${get(`plugins.editor`)}</strong>\n              <mwc-icon slot=\"graphic\" class=\"inverted\">\n                ${pluginIcons['editor']}\n              </mwc-icon>\n            </mwc-list-item>\n\n            <li divider role=\"separator\"></li>\n\n            ${this.generateEditorListItems()}\n\n            <mwc-list-item graphic=\"avatar\" noninteractive>\n              <strong>${get(`plugins.menu`)}</strong>\n              <mwc-icon slot=\"graphic\" class=\"inverted\">\n                <strong>${pluginIcons['menu']}</strong></mwc-icon>\n              </mwc-list-item>\n            <li divider role=\"separator\"></li>\n\n            ${this.generateMenuListItems('top')}\n\n            <li divider role=\"separator\" inset></li>\n\n            ${this.generateValidatorListItems()}\n\n            <li divider role=\"separator\" inset></li>\n\n            ${this.generateMenuListItems('middle')}\n\n            <li divider role=\"separator\" inset></li>\n\n            ${this.generateMenuListItems('bottom')}\n\n          </mwc-list>\n          <mwc-button\n            slot=\"secondaryAction\"\n            icon=\"refresh\"\n            label=\"${get('reset')}\"\n            @click=${async () => {\n              this.dispatchEvent(newResetPluginsEvent());\n              this.requestUpdate();\n            }}\n            style=\"--mdc-theme-primary: var(--mdc-theme-error)\"\n          >\n          </mwc-button>\n          <mwc-button\n            slot=\"secondaryAction\"\n            icon=\"\"\n            label=\"${get('close')}\"\n            dialogAction=\"close\">\n          </mwc-button>\n          <mwc-button\n            outlined\n            trailingIcon\n            slot=\"primaryAction\"\n            icon=\"library_add\"\n            label=\"${get('plugins.add.heading')}&hellip;\"\n            @click=${() => this.dispatchOpenCustomPluginDialogEvent()}>\n          </mwc-button>\n        </mwc-dialog>\n      `;\n  }\n\n  static styles = css`\n    mwc-dialog {\n      --mdc-dialog-max-width: 98vw;\n    }\n  `\n\n  public show(){\n    this.root.show()\n  }\n\n\n  private generateEditorListItems(): TemplateResult[] {\n    return this.plugins\n      .filter(p => p.kind === 'editor')\n      .map(this.renderPluginListItem)\n  }\n\n  private generateMenuListItems(position: MenuPosition): TemplateResult[] {\n    return this.plugins\n      .filter(p => p.kind === 'menu' && p.position === position)\n      .map(this.renderPluginListItem)\n  }\n\n  private generateValidatorListItems(): TemplateResult[] {\n    return this.plugins\n      .filter(p => p.kind === 'validator')\n      .map(this.renderPluginListItem)\n  }\n\n  private dispatchOpenCustomPluginDialogEvent(): void {\n    const event = new CustomEvent('open-plugin-download', {\n      bubbles: true,\n      composed: true,\n    });\n\n    this.dispatchEvent(event);\n  }\n\n  private renderPluginListItem(plugin?: Plugin): TemplateResult {\n    if(!plugin){ return html`` }\n\n    return html`\n      <mwc-check-list-item\n          class=\"${plugin.official ? 'official' : 'external'}\"\n          value=\"${plugin.src}\"\n          .plugin=${plugin}\n          ?selected=${plugin.active}\n          @request-selected=${(e: CustomEvent<{source: string}>) => {\n            if(e.detail.source !== 'interaction'){\n              e.preventDefault();\n              e.stopPropagation();\n              e.stopImmediatePropagation();\n              return false;\n            }\n          }}\n          hasMeta\n          left\n        >\n          <mwc-icon slot=\"meta\">\n            ${plugin.icon || pluginIcons[plugin.kind]}\n          </mwc-icon>\n          ${plugin.name}\n        </mwc-check-list-item>\n\n    `;\n  }\n\n}\n"]}

package/dist/filtered-list.d.ts

@@ -0,0 +1,27 @@
+import { TemplateResult } from 'lit-element';
+import '@material/mwc-checkbox';
+import '@material/mwc-formfield';
+import '@material/mwc-textfield';
+import { ListBase } from '@material/mwc-list/mwc-list-base';
+import { TextField } from '@material/mwc-textfield';
+/**
+ * A mwc-list with mwc-textfield that filters the list items for given or separated terms
+ */
+export declare class FilteredList extends ListBase {
+    /** search mwc-textfield label property */
+    searchFieldLabel?: string;
+    /** Whether the check all option (checkbox next to search text field) is activated */
+    disableCheckAll: boolean;
+    private get existCheckListItem();
+    private get isAllSelected();
+    private get isSomeSelected();
+    searchField: TextField;
+    private onCheckAll;
+    onFilterInput(): void;
+    protected onListItemConnected(e: CustomEvent): void;
+    protected update(changedProperties: Map<string | number | symbol, unknown>): void;
+    constructor();
+    private renderCheckAll;
+    render(): TemplateResult;
+    static styles: import("lit-element").CSSResult;
+}

package/dist/filtered-list.js

@@ -0,0 +1,168 @@
+import { __decorate } from "tslib";
+import { css, customElement, html, property, query, state, unsafeCSS, } from 'lit-element';
+import { get } from 'lit-translate';
+import '@material/mwc-checkbox';
+import '@material/mwc-formfield';
+import '@material/mwc-textfield';
+import { CheckListItem } from '@material/mwc-list/mwc-check-list-item';
+import { List } from '@material/mwc-list';
+import { ListBase } from '@material/mwc-list/mwc-list-base';
+function slotItem(item) {
+    if (!item.closest('filtered-list') || !item.parentElement)
+        return item;
+    if (item.parentElement instanceof FilteredList)
+        return item;
+    return slotItem(item.parentElement);
+}
+function hideFiltered(item, searchText) {
+    const itemInnerText = item.innerText + '\n';
+    const childInnerText = Array.from(item.children)
+        .map(child => child.innerText)
+        .join('\n');
+    const value = item.value;
+    const filterTarget = (itemInnerText +
+        childInnerText +
+        value).toUpperCase();
+    const terms = searchText
+        .toUpperCase()
+        .replace(/[.+^${}()|[\]\\]/g, '\\$&')
+        .trim()
+        .split(/\s+/g);
+    (terms.length === 1 && terms[0] === '') ||
+        terms.every(term => {
+            // regexp escape
+            const reTerm = new RegExp(`*${term}*`.replace(/\*/g, '.*').replace(/\?/g, '.{1}'), 'i');
+            return reTerm.test(filterTarget);
+        })
+        ? slotItem(item).classList.remove('hidden')
+        : slotItem(item).classList.add('hidden');
+}
+/**
+ * A mwc-list with mwc-textfield that filters the list items for given or separated terms
+ */
+let FilteredList = class FilteredList extends ListBase {
+    get existCheckListItem() {
+        return this.items.some(item => item instanceof CheckListItem);
+    }
+    get isAllSelected() {
+        return this.items
+            .filter(item => !item.disabled)
+            .filter(item => item instanceof CheckListItem)
+            .every(checkItem => checkItem.selected);
+    }
+    get isSomeSelected() {
+        return this.items
+            .filter(item => !item.disabled)
+            .filter(item => item instanceof CheckListItem)
+            .some(checkItem => checkItem.selected);
+    }
+    onCheckAll() {
+        const select = !this.isAllSelected;
+        this.items
+            .filter(item => !item.disabled && !item.classList.contains('hidden'))
+            .forEach(item => (item.selected = select));
+    }
+    onFilterInput() {
+        Array.from(this.querySelectorAll('mwc-list-item, mwc-check-list-item, mwc-radio-list-item')).forEach(item => hideFiltered(item, this.searchField.value));
+    }
+    onListItemConnected(e) {
+        super.onListItemConnected(e);
+        this.requestUpdate();
+    }
+    update(changedProperties) {
+        super.update(changedProperties);
+        // regenerate filtering of text
+        this.onFilterInput();
+    }
+    constructor() {
+        super();
+        /** Whether the check all option (checkbox next to search text field) is activated */
+        this.disableCheckAll = false;
+        this.addEventListener('selected', () => {
+            this.requestUpdate();
+        });
+    }
+    renderCheckAll() {
+        return this.existCheckListItem && !this.disableCheckAll
+            ? html `<mwc-formfield class="checkall"
+          ><mwc-checkbox
+            ?indeterminate=${!this.isAllSelected && this.isSomeSelected}
+            ?checked=${this.isAllSelected}
+            @change=${() => {
+                this.onCheckAll();
+            }}
+          ></mwc-checkbox
+        ></mwc-formfield>`
+            : html ``;
+    }
+    render() {
+        return html `<div id="tfcontainer">
+        <abbr title="${this.searchFieldLabel ?? get('filter')}"
+          ><mwc-textfield
+            label="${this.searchFieldLabel ?? ''}"
+            iconTrailing="search"
+            outlined
+            @input=${() => this.onFilterInput()}
+          ></mwc-textfield
+        ></abbr>
+        ${this.renderCheckAll()}
+      </div>
+      ${super.render()}`;
+    }
+};
+FilteredList.styles = css `
+    ${unsafeCSS(List.styles)}
+
+    #tfcontainer {
+      display: flex;
+      flex: auto;
+    }
+
+    ::slotted(.hidden) {
+      display: none;
+    }
+
+    abbr {
+      display: flex;
+      flex: auto;
+      margin: 8px;
+      text-decoration: none;
+      border-bottom: none;
+    }
+
+    mwc-textfield {
+      width: 100%;
+      --mdc-shape-small: 28px;
+    }
+
+    mwc-formfield.checkall {
+      padding-right: 8px;
+    }
+
+    .mdc-list {
+      padding-inline-start: 0px;
+    }
+  `;
+__decorate([
+    property({ type: String })
+], FilteredList.prototype, "searchFieldLabel", void 0);
+__decorate([
+    property({ type: Boolean })
+], FilteredList.prototype, "disableCheckAll", void 0);
+__decorate([
+    state()
+], FilteredList.prototype, "existCheckListItem", null);
+__decorate([
+    state()
+], FilteredList.prototype, "isAllSelected", null);
+__decorate([
+    state()
+], FilteredList.prototype, "isSomeSelected", null);
+__decorate([
+    query('mwc-textfield')
+], FilteredList.prototype, "searchField", void 0);
+FilteredList = __decorate([
+    customElement('filtered-list')
+], FilteredList);
+export { FilteredList };
+//# sourceMappingURL=filtered-list.js.map

package/dist/filtered-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filtered-list.js","sourceRoot":"","sources":["../src/filtered-list.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  css,\n  customElement,\n  html,\n  property,\n  query,\n  state,\n  TemplateResult,\n  unsafeCSS,\n} from 'lit-element';\nimport { get } from 'lit-translate';\n\nimport '@material/mwc-checkbox';\nimport '@material/mwc-formfield';\nimport '@material/mwc-textfield';\nimport { CheckListItem } from '@material/mwc-list/mwc-check-list-item';\nimport { List } from '@material/mwc-list';\nimport { ListBase } from '@material/mwc-list/mwc-list-base';\nimport { ListItemBase } from '@material/mwc-list/mwc-list-item-base';\nimport { TextField } from '@material/mwc-textfield';\n\nfunction slotItem(item: Element): Element {\n  if (!item.closest('filtered-list') || !item.parentElement) return item;\n  if (item.parentElement instanceof FilteredList) return item;\n  return slotItem(item.parentElement);\n}\n\nfunction hideFiltered(item: ListItemBase, searchText: string): void {\n  const itemInnerText = item.innerText + '\\n';\n  const childInnerText = Array.from(item.children)\n    .map(child => (<HTMLElement>child).innerText)\n    .join('\\n');\n  const value = item.value;\n\n  const filterTarget: string = (\n    itemInnerText +\n    childInnerText +\n    value\n  ).toUpperCase();\n\n  const terms: string[] = searchText\n    .toUpperCase()\n    .replace(/[.+^${}()|[\\]\\\\]/g, '\\\\$&')\n    .trim()\n    .split(/\\s+/g);\n\n  (terms.length === 1 && terms[0] === '') ||\n  terms.every(term => {\n    // regexp escape\n    const reTerm = new RegExp(\n      `*${term}*`.replace(/\\*/g, '.*').replace(/\\?/g, '.{1}'),\n      'i'\n    );\n    return reTerm.test(filterTarget);\n  })\n    ? slotItem(item).classList.remove('hidden')\n    : slotItem(item).classList.add('hidden');\n}\n\n/**\n * A mwc-list with mwc-textfield that filters the list items for given or separated terms\n */\n@customElement('filtered-list')\nexport class FilteredList extends ListBase {\n  /** search mwc-textfield label property */\n  @property({ type: String })\n  searchFieldLabel?: string;\n  /** Whether the check all option (checkbox next to search text field) is activated */\n  @property({ type: Boolean })\n  disableCheckAll = false;\n\n  @state()\n  private get existCheckListItem(): boolean {\n    return this.items.some(item => item instanceof CheckListItem);\n  }\n\n  @state()\n  private get isAllSelected(): boolean {\n    return this.items\n      .filter(item => !item.disabled)\n      .filter(item => item instanceof CheckListItem)\n      .every(checkItem => checkItem.selected);\n  }\n\n  @state()\n  private get isSomeSelected(): boolean {\n    return this.items\n      .filter(item => !item.disabled)\n      .filter(item => item instanceof CheckListItem)\n      .some(checkItem => checkItem.selected);\n  }\n\n  @query('mwc-textfield') searchField!: TextField;\n\n  private onCheckAll(): void {\n    const select = !this.isAllSelected;\n    this.items\n      .filter(item => !item.disabled && !item.classList.contains('hidden'))\n      .forEach(item => (item.selected = select));\n  }\n\n  onFilterInput(): void {\n    Array.from(\n      this.querySelectorAll(\n        'mwc-list-item, mwc-check-list-item, mwc-radio-list-item'\n      )\n    ).forEach(item =>\n      hideFiltered(item as ListItemBase, this.searchField.value)\n    );\n  }\n\n  protected onListItemConnected(e: CustomEvent): void {\n    super.onListItemConnected(e);\n    this.requestUpdate();\n  }\n\n  protected update(\n    changedProperties: Map<string | number | symbol, unknown>\n  ): void {\n    super.update(changedProperties);\n    // regenerate filtering of text\n    this.onFilterInput();\n  }\n\n  constructor() {\n    super();\n    this.addEventListener('selected', () => {\n      this.requestUpdate();\n    });\n  }\n\n  private renderCheckAll(): TemplateResult {\n    return this.existCheckListItem && !this.disableCheckAll\n      ? html`<mwc-formfield class=\"checkall\"\n          ><mwc-checkbox\n            ?indeterminate=${!this.isAllSelected && this.isSomeSelected}\n            ?checked=${this.isAllSelected}\n            @change=${() => {\n              this.onCheckAll();\n            }}\n          ></mwc-checkbox\n        ></mwc-formfield>`\n      : html``;\n  }\n\n  render(): TemplateResult {\n    return html`<div id=\"tfcontainer\">\n        <abbr title=\"${this.searchFieldLabel ?? get('filter')}\"\n          ><mwc-textfield\n            label=\"${this.searchFieldLabel ?? ''}\"\n            iconTrailing=\"search\"\n            outlined\n            @input=${() => this.onFilterInput()}\n          ></mwc-textfield\n        ></abbr>\n        ${this.renderCheckAll()}\n      </div>\n      ${super.render()}`;\n  }\n\n  static styles = css`\n    ${unsafeCSS(List.styles)}\n\n    #tfcontainer {\n      display: flex;\n      flex: auto;\n    }\n\n    ::slotted(.hidden) {\n      display: none;\n    }\n\n    abbr {\n      display: flex;\n      flex: auto;\n      margin: 8px;\n      text-decoration: none;\n      border-bottom: none;\n    }\n\n    mwc-textfield {\n      width: 100%;\n      --mdc-shape-small: 28px;\n    }\n\n    mwc-formfield.checkall {\n      padding-right: 8px;\n    }\n\n    .mdc-list {\n      padding-inline-start: 0px;\n    }\n  `;\n}\n"]}

package/dist/finder-list.d.ts

@@ -0,0 +1,37 @@
+import { LitElement, TemplateResult } from 'lit-element';
+import '@material/mwc-icon';
+import '@material/mwc-list';
+import '@material/mwc-list/mwc-list-item';
+import { SingleSelectedEvent } from '@material/mwc-list/mwc-list-foundation';
+import './filtered-list.js';
+export type Selection = {
+    [name: string]: Selection;
+};
+export type Path = string[];
+export interface Directory {
+    path: Path;
+    header?: TemplateResult;
+    entries: string[];
+}
+export declare class FinderList extends LitElement {
+    selection: Selection;
+    multi: boolean;
+    get depth(): number;
+    get paths(): Path[];
+    set paths(paths: Path[]);
+    get path(): Path;
+    set path(path: Path);
+    read: (path: Path) => Promise<Directory>;
+    loaded: Promise<void>;
+    getTitle(path: string[]): string;
+    getDisplayString(entry: string, path: string[]): string;
+    container: Element;
+    private getPaths;
+    multiSelect(event: SingleSelectedEvent, path: Path, clicked: string): void;
+    singleSelect(event: SingleSelectedEvent, path: Path, clicked: string): void;
+    select(event: SingleSelectedEvent, path: Path): Promise<void>;
+    renderDirectory(path: Path, entries: string[]): TemplateResult;
+    renderColumn(column: number): Promise<TemplateResult>;
+    render(): TemplateResult;
+    static styles: import("lit-element").CSSResult;
+}