@compas-oscd/open-scd 0.34.42 → 0.34.43

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

@@ -1 +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 as keyof typeof pluginIcons]}\n          </mwc-icon>\n          ${plugin.name}\n        </mwc-check-list-item>\n\n    `;\n  }\n\n}\n"]}
+{"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

@@ -1,26 +1,33 @@
-import { TemplateResult } from 'lit-element';
+import { LitElement, PropertyValues, 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 '@material/mwc-list';
+import { List } from '@material/mwc-list';
+import { ListItemBase } from '@material/mwc-list/mwc-list-item-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 {
+export declare class FilteredList extends LitElement {
     /** search mwc-textfield label property */
     searchFieldLabel?: string;
     /** Whether the check all option (checkbox next to search text field) is activated */
     disableCheckAll: boolean;
+    multi: boolean;
+    activatable: boolean;
     private get existCheckListItem();
     private get isAllSelected();
     private get isSomeSelected();
     searchField: TextField;
+    list: List;
+    get items(): ListItemBase[];
+    get selected(): ListItemBase | ListItemBase[] | null;
     private onCheckAll;
     onFilterInput(): void;
-    protected onListItemConnected(e: CustomEvent): void;
     protected update(changedProperties: Map<string | number | symbol, unknown>): void;
     constructor();
+    protected firstUpdated(_changedProperties: PropertyValues): void;
     private renderCheckAll;
     render(): TemplateResult;
     static styles: import("lit-element").CSSResult;

package/dist/filtered-list.js

@@ -1,12 +1,12 @@
 import { __decorate } from "tslib";
-import { css, customElement, html, property, query, state, unsafeCSS, } from 'lit-element';
+import { css, customElement, html, LitElement, 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 '@material/mwc-list';
 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;
@@ -40,7 +40,7 @@ function hideFiltered(item, searchText) {
 /**
  * A mwc-list with mwc-textfield that filters the list items for given or separated terms
  */
-let FilteredList = class FilteredList extends ListBase {
+let FilteredList = class FilteredList extends LitElement {
     get existCheckListItem() {
         return this.items.some(item => item instanceof CheckListItem);
     }
@@ -56,6 +56,12 @@ let FilteredList = class FilteredList extends ListBase {
             .filter(item => item instanceof CheckListItem)
             .some(checkItem => checkItem.selected);
     }
+    get items() {
+        return this.list?.items ?? [];
+    }
+    get selected() {
+        return this.list.selected;
+    }
     onCheckAll() {
         const select = !this.isAllSelected;
         this.items
@@ -63,14 +69,8 @@ let FilteredList = class FilteredList extends ListBase {
             .forEach(item => (item.selected = select));
     }
     onFilterInput() {
-        if (!this.searchField)
-            return;
         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
@@ -80,10 +80,15 @@ let FilteredList = class FilteredList extends ListBase {
         super();
         /** Whether the check all option (checkbox next to search text field) is activated */
         this.disableCheckAll = false;
+        this.multi = false;
+        this.activatable = false;
         this.addEventListener('selected', () => {
             this.requestUpdate();
         });
     }
+    firstUpdated(_changedProperties) {
+        this.requestUpdate();
+    }
     renderCheckAll() {
         return this.existCheckListItem && !this.disableCheckAll
             ? html `<mwc-formfield class="checkall"
@@ -109,7 +114,11 @@ let FilteredList = class FilteredList extends ListBase {
         ></abbr>
         ${this.renderCheckAll()}
       </div>
-      ${super.render()}`;
+      <mwc-list
+        .multi=${this.multi}
+        .activatable=${this.activatable}>
+        <slot></slot>
+      </mwc-list>`;
     }
 };
 FilteredList.styles = css `
@@ -151,6 +160,12 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], FilteredList.prototype, "disableCheckAll", void 0);
+__decorate([
+    property({ type: Boolean })
+], FilteredList.prototype, "multi", void 0);
+__decorate([
+    property({ type: Boolean })
+], FilteredList.prototype, "activatable", void 0);
 __decorate([
     state()
 ], FilteredList.prototype, "existCheckListItem", null);
@@ -163,6 +178,9 @@ __decorate([
 __decorate([
     query('mwc-textfield')
 ], FilteredList.prototype, "searchField", void 0);
+__decorate([
+    query('mwc-list')
+], FilteredList.prototype, "list", void 0);
 FilteredList = __decorate([
     customElement('filtered-list')
 ], FilteredList);

package/dist/filtered-list.js.map

@@ -1 +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    if (!this.searchField) return;\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"]}
+{"version":3,"file":"filtered-list.js","sourceRoot":"","sources":["../src/filtered-list.ts"],"names":[],"mappings":";AAAA,OAAO,EACL,GAAG,EACH,aAAa,EACb,IAAI,EACJ,UAAU,EACV,QAAQ,EAER,KAAK,EACL,KAAK,EAEL,SAAS,GACV,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AAEpC,OAAO,wBAAwB,CAAC;AAChC,OAAO,yBAAyB,CAAC;AACjC,OAAO,yBAAyB,CAAC;AACjC,OAAO,oBAAoB,CAAC;AAC5B,OAAO,EAAE,aAAa,EAAE,MAAM,wCAAwC,CAAC;AACvE,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAI1C,SAAS,QAAQ,CAAC,IAAa;IAC7B,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa;QAAE,OAAO,IAAI,CAAC;IACvE,IAAI,IAAI,CAAC,aAAa,YAAY,YAAY;QAAE,OAAO,IAAI,CAAC;IAC5D,OAAO,QAAQ,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;AACtC,CAAC;AAED,SAAS,YAAY,CAAC,IAAkB,EAAE,UAAkB;IAC1D,MAAM,aAAa,GAAG,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;IAC5C,MAAM,cAAc,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;SAC7C,GAAG,CAAC,KAAK,CAAC,EAAE,CAAe,KAAM,CAAC,SAAS,CAAC;SAC5C,IAAI,CAAC,IAAI,CAAC,CAAC;IACd,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;IAEzB,MAAM,YAAY,GAAW,CAC3B,aAAa;QACb,cAAc;QACd,KAAK,CACN,CAAC,WAAW,EAAE,CAAC;IAEhB,MAAM,KAAK,GAAa,UAAU;SAC/B,WAAW,EAAE;SACb,OAAO,CAAC,mBAAmB,EAAE,MAAM,CAAC;SACpC,IAAI,EAAE;SACN,KAAK,CAAC,MAAM,CAAC,CAAC;IAEjB,CAAC,KAAK,CAAC,MAAM,KAAK,CAAC,IAAI,KAAK,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;QACvC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE;YACjB,gBAAgB;YAChB,MAAM,MAAM,GAAG,IAAI,MAAM,CACvB,IAAI,IAAI,GAAG,CAAC,OAAO,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC,OAAO,CAAC,KAAK,EAAE,MAAM,CAAC,EACvD,GAAG,CACJ,CAAC;YACF,OAAO,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QACnC,CAAC,CAAC;QACA,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC;QAC3C,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;AAC7C,CAAC;AAED;;GAEG;AAEI,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,UAAU;IAc1C,IAAY,kBAAkB;QAC5B,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,YAAY,aAAa,CAAC,CAAC;IAChE,CAAC;IAGD,IAAY,aAAa;QACvB,OAAO,IAAI,CAAC,KAAK;aACd,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC;aAC9B,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,YAAY,aAAa,CAAC;aAC7C,KAAK,CAAC,SAAS,CAAC,EAAE,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;IAC5C,CAAC;IAGD,IAAY,cAAc;QACxB,OAAO,IAAI,CAAC,KAAK;aACd,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC;aAC9B,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,YAAY,aAAa,CAAC;aAC7C,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;IAC3C,CAAC;IAKD,IAAI,KAAK;QACP,OAAO,IAAI,CAAC,IAAI,EAAE,KAAK,IAAI,EAAE,CAAC;IAChC,CAAC;IAED,IAAI,QAAQ;QACV,OAAO,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;IAC5B,CAAC;IAEO,UAAU;QAChB,MAAM,MAAM,GAAG,CAAC,IAAI,CAAC,aAAa,CAAC;QACnC,IAAI,CAAC,KAAK;aACP,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;aACpE,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,MAAM,CAAC,CAAC,CAAC;IAC/C,CAAC;IAED,aAAa;QACX,KAAK,CAAC,IAAI,CACR,IAAI,CAAC,gBAAgB,CACnB,yDAAyD,CAC1D,CACF,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CACf,YAAY,CAAC,IAAoB,EAAE,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAC3D,CAAC;IACJ,CAAC;IAES,MAAM,CACd,iBAAyD;QAEzD,KAAK,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC;QAChC,+BAA+B;QAC/B,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAED;QACE,KAAK,EAAE,CAAC;QAnEV,qFAAqF;QAErF,oBAAe,GAAG,KAAK,CAAC;QAGxB,UAAK,GAAG,KAAK,CAAC;QAEd,gBAAW,GAAG,KAAK,CAAC;QA6DlB,IAAI,CAAC,gBAAgB,CAAC,UAAU,EAAE,GAAG,EAAE;YACrC,IAAI,CAAC,aAAa,EAAE,CAAC;QACvB,CAAC,CAAC,CAAC;IACL,CAAC;IAES,YAAY,CAAC,kBAAkC;QACvD,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAEO,cAAc;QACpB,OAAO,IAAI,CAAC,kBAAkB,IAAI,CAAC,IAAI,CAAC,eAAe;YACrD,CAAC,CAAC,IAAI,CAAA;;6BAEiB,CAAC,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,cAAc;uBAChD,IAAI,CAAC,aAAa;sBACnB,GAAG,EAAE;gBACb,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,CAAC;;0BAEa;YACpB,CAAC,CAAC,IAAI,CAAA,EAAE,CAAC;IACb,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;uBACQ,IAAI,CAAC,gBAAgB,IAAI,GAAG,CAAC,QAAQ,CAAC;;qBAExC,IAAI,CAAC,gBAAgB,IAAI,EAAE;;;qBAG3B,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE;;;UAGrC,IAAI,CAAC,cAAc,EAAE;;;iBAGd,IAAI,CAAC,KAAK;uBACJ,IAAI,CAAC,WAAW;;kBAErB,CAAC;IACjB,CAAC;;AAEM,mBAAM,GAAG,GAAG,CAAA;MACf,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BzB,CAAC;AA/IF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sDACD;AAG1B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;qDACJ;AAGxB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;2CACd;AAEd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;iDACR;AAGpB;IADC,KAAK,EAAE;sDAGP;AAGD;IADC,KAAK,EAAE;iDAMP;AAGD;IADC,KAAK,EAAE;kDAMP;AAEuB;IAAvB,KAAK,CAAC,eAAe,CAAC;iDAAyB;AAC7B;IAAlB,KAAK,CAAC,UAAU,CAAC;0CAAa;AAnCpB,YAAY;IADxB,aAAa,CAAC,eAAe,CAAC;GAClB,YAAY,CAmJxB;SAnJY,YAAY","sourcesContent":["import {\n  css,\n  customElement,\n  html,\n  LitElement,\n  property,\n  PropertyValues,\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 '@material/mwc-list';\nimport { CheckListItem } from '@material/mwc-list/mwc-check-list-item';\nimport { List } from '@material/mwc-list';\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 LitElement {\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  @property({ type: Boolean })\n  multi = false;\n  @property({ type: Boolean })\n  activatable = 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  @query('mwc-list') list!: List;\n\n  get items() {\n    return this.list?.items ?? [];\n  }\n\n  get selected() {\n    return this.list.selected;\n  }\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 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  protected firstUpdated(_changedProperties: PropertyValues): void {\n    this.requestUpdate();\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      <mwc-list\n        .multi=${this.multi}\n        .activatable=${this.activatable}>\n        <slot></slot>\n      </mwc-list>`;\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.js

@@ -1,13 +1,13 @@
 import { __decorate } from "tslib";
 import { css, customElement, html, LitElement, property, query, } from 'lit-element';
-import { until } from 'lit-html/directives/until';
+import { until } from 'lit-html/directives/until.js';
 import { get } from 'lit-translate';
 import '@material/mwc-icon';
 import '@material/mwc-list';
 import '@material/mwc-list/mwc-list-item';
 import './filtered-list.js';
 import { depth } from './foundation.js';
-import { ifDefined } from 'lit-html/directives/if-defined';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
 const waitingList = html `<div class="column">
   <mwc-list
     ><mwc-list-item noninteractive hasMeta

package/dist/finder-list.js.map

@@ -1 +1 @@
-{"version":3,"file":"finder-list.js","sourceRoot":"","sources":["../src/finder-list.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  css,\n  customElement,\n  html,\n  LitElement,\n  property,\n  query,\n  TemplateResult,\n} from 'lit-element';\nimport { until } from 'lit-html/directives/until';\nimport { get } from 'lit-translate';\n\nimport '@material/mwc-icon';\nimport '@material/mwc-list';\nimport '@material/mwc-list/mwc-list-item';\nimport { List } from '@material/mwc-list';\nimport { SingleSelectedEvent } from '@material/mwc-list/mwc-list-foundation';\nimport { ListItem } from '@material/mwc-list/mwc-list-item';\n\nimport './filtered-list.js';\nimport { depth } from './foundation.js';\nimport { ifDefined } from 'lit-html/directives/if-defined';\n\nexport type Selection = { [name: string]: Selection };\n\nexport type Path = string[];\nexport interface Directory {\n  path: Path;\n  header?: TemplateResult;\n  entries: string[];\n}\n\nconst waitingList = html`<div class=\"column\">\n  <mwc-list\n    ><mwc-list-item noninteractive hasMeta\n      >${get('loading')}<mwc-icon slot=\"meta\">pending</mwc-icon></mwc-list-item\n    ></mwc-list\n  >\n</div>`;\n\n@customElement('finder-list')\nexport class FinderList extends LitElement {\n  @property({ type: Object })\n  selection: Selection = {};\n\n  @property({ type: Boolean })\n  multi = false;\n\n  @property({ type: Number })\n  get depth(): number {\n    return depth(this.selection);\n  }\n\n  @property({ type: Array })\n  get paths(): Path[] {\n    return this.getPaths();\n  }\n  set paths(paths: Path[]) {\n    const selection: Selection = {};\n    for (const path of paths) {\n      let i = selection;\n      for (const name of path) {\n        if (!Object.prototype.hasOwnProperty.call(i, name)) i[name] = {};\n        i = i[name];\n      }\n    }\n    this.selection = selection;\n  }\n\n  @property({ type: Array })\n  get path(): Path {\n    return this.paths[0] ?? [];\n  }\n  set path(path: Path) {\n    this.paths = [path];\n  }\n\n  @property({ attribute: false })\n  read: (path: Path) => Promise<Directory> = async path => {\n    return {\n      path,\n      header: html`<h2>${'/' + path.join('/')}</h2>`,\n      entries: [],\n    };\n  };\n\n  @property({ attribute: false })\n  loaded: Promise<void> = Promise.resolve();\n\n  getTitle(path: string[]): string {\n    return path.join('/');\n  }\n\n  getDisplayString(entry: string, path: string[]): string {\n    return entry;\n  }\n\n  @query('div')\n  container!: Element;\n\n  private getPaths(depth?: number): Path[] {\n    let paths: Path[] = Object.keys(this.selection).map(key => [key]);\n\n    let i = depth ?? this.depth - 1;\n    while (i-- > 0) {\n      paths = paths.flatMap(path => {\n        let dir = this.selection;\n        for (const entry of path) dir = dir[entry]; // recursive descent\n        const newPaths = Object.keys(dir).map(entry => path.concat(entry));\n        return newPaths.length === 0 ? [path] : newPaths;\n      });\n    }\n\n    return depth === undefined\n      ? paths\n      : paths.filter(path => path.length > depth);\n  }\n\n  multiSelect(event: SingleSelectedEvent, path: Path, clicked: string): void {\n    let dir = this.selection;\n    for (const entry of path) dir = dir[entry]; // recursive descent\n\n    if (dir && dir[clicked]) delete dir[clicked];\n    // deselect if selected\n    else dir[clicked] = {}; // select otherwise\n  }\n\n  singleSelect(event: SingleSelectedEvent, path: Path, clicked: string): void {\n    if (this.path[path.length] === clicked) this.path = path;\n    // deselect if selected\n    else this.path = path.concat(clicked); // select otherwise\n  }\n\n  async select(event: SingleSelectedEvent, path: Path): Promise<void> {\n    const clicked = (<ListItem>(<List>event.target).selected).value;\n\n    if (this.multi) this.multiSelect(event, path, clicked);\n    else this.singleSelect(event, path, clicked);\n\n    this.requestUpdate();\n    await this.updateComplete;\n    await new Promise(resolve => setTimeout(resolve, 250));\n    this.container.scrollLeft = 1000 * this.depth;\n  }\n\n  renderDirectory(path: Path, entries: string[]): TemplateResult {\n    return html`<filtered-list\n      @selected=${(e: SingleSelectedEvent) => this.select(e, path)}\n      searchFieldLabel=\"${this.getTitle(path)}\"\n    >\n      ${entries.map(\n        entry =>\n          html`<mwc-list-item\n            value=\"${entry}\"\n            ?activated=${this.getPaths(path.length)\n              .map(p => JSON.stringify(p))\n              .includes(JSON.stringify(path.concat(entry)))}\n            >${this.getDisplayString(entry, path)}</mwc-list-item\n          >`\n      )}\n    </filtered-list>`;\n  }\n\n  async renderColumn(column: number): Promise<TemplateResult> {\n    const paths = this.getPaths(column);\n\n    const dirs = paths.map(path => this.read(path));\n    const lists: TemplateResult[] = [];\n\n    for await (const { header, entries, path } of dirs) {\n      if (header || entries.length > 0)\n        lists.push(\n          html`${ifDefined(header)} ${this.renderDirectory(path, entries)}`\n        );\n    }\n\n    if (lists.length === 0) return html``;\n    return html`<div class=\"column\">${lists}</div>`;\n  }\n\n  render(): TemplateResult {\n    const columns = new Array(this.depth)\n      .fill(0)\n      .map((_, index) => this.renderColumn(index));\n    this.loaded = Promise.allSettled(columns).then();\n    return html`<div class=\"pane\">\n      ${columns.map(column => until(column, waitingList))}\n    </div>`;\n  }\n\n  static styles = css`\n    div.pane {\n      display: flex;\n      flex-direction: row;\n      overflow: auto;\n    }\n\n    h2 {\n      color: var(--mdc-theme-primary);\n    }\n\n    section {\n      display: flex;\n      flex-direction: column;\n      width: max-content;\n    }\n\n    section > mwc-list {\n      margin-top: 76px;\n    }\n\n    a {\n      font-weight: 600;\n      font-variant: small-caps;\n      text-transform: lowercase;\n      text-decoration: none;\n      color: var(--mdc-theme-primary);\n    }\n\n    a:link {\n      color: var(--mdc-theme-error);\n    }\n\n    a:visited {\n      color: var(--mdc-theme-secondary);\n    }\n  `;\n}\n"]}
+{"version":3,"file":"finder-list.js","sourceRoot":"","sources":["../src/finder-list.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  css,\n  customElement,\n  html,\n  LitElement,\n  property,\n  query,\n  TemplateResult,\n} from 'lit-element';\nimport { until } from 'lit-html/directives/until.js';\nimport { get } from 'lit-translate';\n\nimport '@material/mwc-icon';\nimport '@material/mwc-list';\nimport '@material/mwc-list/mwc-list-item';\nimport { List } from '@material/mwc-list';\nimport { SingleSelectedEvent } from '@material/mwc-list/mwc-list-foundation';\nimport { ListItem } from '@material/mwc-list/mwc-list-item';\n\nimport './filtered-list.js';\nimport { depth } from './foundation.js';\nimport { ifDefined } from 'lit-html/directives/if-defined.js';\n\nexport type Selection = { [name: string]: Selection };\n\nexport type Path = string[];\nexport interface Directory {\n  path: Path;\n  header?: TemplateResult;\n  entries: string[];\n}\n\nconst waitingList = html`<div class=\"column\">\n  <mwc-list\n    ><mwc-list-item noninteractive hasMeta\n      >${get('loading')}<mwc-icon slot=\"meta\">pending</mwc-icon></mwc-list-item\n    ></mwc-list\n  >\n</div>`;\n\n@customElement('finder-list')\nexport class FinderList extends LitElement {\n  @property({ type: Object })\n  selection: Selection = {};\n\n  @property({ type: Boolean })\n  multi = false;\n\n  @property({ type: Number })\n  get depth(): number {\n    return depth(this.selection);\n  }\n\n  @property({ type: Array })\n  get paths(): Path[] {\n    return this.getPaths();\n  }\n  set paths(paths: Path[]) {\n    const selection: Selection = {};\n    for (const path of paths) {\n      let i = selection;\n      for (const name of path) {\n        if (!Object.prototype.hasOwnProperty.call(i, name)) i[name] = {};\n        i = i[name];\n      }\n    }\n    this.selection = selection;\n  }\n\n  @property({ type: Array })\n  get path(): Path {\n    return this.paths[0] ?? [];\n  }\n  set path(path: Path) {\n    this.paths = [path];\n  }\n\n  @property({ attribute: false })\n  read: (path: Path) => Promise<Directory> = async path => {\n    return {\n      path,\n      header: html`<h2>${'/' + path.join('/')}</h2>`,\n      entries: [],\n    };\n  };\n\n  @property({ attribute: false })\n  loaded: Promise<void> = Promise.resolve();\n\n  getTitle(path: string[]): string {\n    return path.join('/');\n  }\n\n  getDisplayString(entry: string, path: string[]): string {\n    return entry;\n  }\n\n  @query('div')\n  container!: Element;\n\n  private getPaths(depth?: number): Path[] {\n    let paths: Path[] = Object.keys(this.selection).map(key => [key]);\n\n    let i = depth ?? this.depth - 1;\n    while (i-- > 0) {\n      paths = paths.flatMap(path => {\n        let dir = this.selection;\n        for (const entry of path) dir = dir[entry]; // recursive descent\n        const newPaths = Object.keys(dir).map(entry => path.concat(entry));\n        return newPaths.length === 0 ? [path] : newPaths;\n      });\n    }\n\n    return depth === undefined\n      ? paths\n      : paths.filter(path => path.length > depth);\n  }\n\n  multiSelect(event: SingleSelectedEvent, path: Path, clicked: string): void {\n    let dir = this.selection;\n    for (const entry of path) dir = dir[entry]; // recursive descent\n\n    if (dir && dir[clicked]) delete dir[clicked];\n    // deselect if selected\n    else dir[clicked] = {}; // select otherwise\n  }\n\n  singleSelect(event: SingleSelectedEvent, path: Path, clicked: string): void {\n    if (this.path[path.length] === clicked) this.path = path;\n    // deselect if selected\n    else this.path = path.concat(clicked); // select otherwise\n  }\n\n  async select(event: SingleSelectedEvent, path: Path): Promise<void> {\n    const clicked = (<ListItem>(<List>event.target).selected).value;\n\n    if (this.multi) this.multiSelect(event, path, clicked);\n    else this.singleSelect(event, path, clicked);\n\n    this.requestUpdate();\n    await this.updateComplete;\n    await new Promise(resolve => setTimeout(resolve, 250));\n    this.container.scrollLeft = 1000 * this.depth;\n  }\n\n  renderDirectory(path: Path, entries: string[]): TemplateResult {\n    return html`<filtered-list\n      @selected=${(e: SingleSelectedEvent) => this.select(e, path)}\n      searchFieldLabel=\"${this.getTitle(path)}\"\n    >\n      ${entries.map(\n        entry =>\n          html`<mwc-list-item\n            value=\"${entry}\"\n            ?activated=${this.getPaths(path.length)\n              .map(p => JSON.stringify(p))\n              .includes(JSON.stringify(path.concat(entry)))}\n            >${this.getDisplayString(entry, path)}</mwc-list-item\n          >`\n      )}\n    </filtered-list>`;\n  }\n\n  async renderColumn(column: number): Promise<TemplateResult> {\n    const paths = this.getPaths(column);\n\n    const dirs = paths.map(path => this.read(path));\n    const lists: TemplateResult[] = [];\n\n    for await (const { header, entries, path } of dirs) {\n      if (header || entries.length > 0)\n        lists.push(\n          html`${ifDefined(header)} ${this.renderDirectory(path, entries)}`\n        );\n    }\n\n    if (lists.length === 0) return html``;\n    return html`<div class=\"column\">${lists}</div>`;\n  }\n\n  render(): TemplateResult {\n    const columns = new Array(this.depth)\n      .fill(0)\n      .map((_, index) => this.renderColumn(index));\n    this.loaded = Promise.allSettled(columns).then();\n    return html`<div class=\"pane\">\n      ${columns.map(column => until(column, waitingList))}\n    </div>`;\n  }\n\n  static styles = css`\n    div.pane {\n      display: flex;\n      flex-direction: row;\n      overflow: auto;\n    }\n\n    h2 {\n      color: var(--mdc-theme-primary);\n    }\n\n    section {\n      display: flex;\n      flex-direction: column;\n      width: max-content;\n    }\n\n    section > mwc-list {\n      margin-top: 76px;\n    }\n\n    a {\n      font-weight: 600;\n      font-variant: small-caps;\n      text-transform: lowercase;\n      text-decoration: none;\n      color: var(--mdc-theme-primary);\n    }\n\n    a:link {\n      color: var(--mdc-theme-error);\n    }\n\n    a:visited {\n      color: var(--mdc-theme-secondary);\n    }\n  `;\n}\n"]}

package/dist/foundation/compare.js

@@ -1,5 +1,5 @@
 import { html } from 'lit-element';
-import { repeat } from 'lit-html/directives/repeat';
+import { repeat } from 'lit-html/directives/repeat.js';
 import { get } from 'lit-translate';
 import '@material/mwc-list';
 import '@material/mwc-list/mwc-list-item';

package/dist/foundation/compare.js.map

@@ -1 +1 @@
-{"version":3,"file":"compare.js","sourceRoot":"","sources":["../../src/foundation/compare.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, TemplateResult } from 'lit-element';\nimport { repeat } from 'lit-html/directives/repeat';\nimport { get } from 'lit-translate';\n\nimport '@material/mwc-list';\nimport '@material/mwc-list/mwc-list-item';\nimport '@material/mwc-icon';\n\nimport { identity } from '../foundation.js';\nimport { SVGTemplateResult } from 'lit-html';\n\nimport { attributeIcon, contentIcon, elementIcon } from '../icons/compare.js';\n\nconst diffTypeToIcon: Map<DiffType, SVGTemplateResult> = new Map<\n  DiffType,\n  SVGTemplateResult\n>();\n\ndiffTypeToIcon.set('Attribute', attributeIcon);\ndiffTypeToIcon.set('Content', contentIcon);\ndiffTypeToIcon.set('Element', elementIcon);\n\nexport type DiffType = 'Element' | 'Attribute' | 'Content';\n\nexport type Diff<T> =\n  | { type: DiffType; oldValue: T; newValue: null }\n  | { type: DiffType; oldValue: null; newValue: T }\n  | { type: DiffType; oldValue: T; newValue: T };\n\n/**\n * Type to filter out a difference based on `tagName`.`attributeName`\n *\n * The matcher can be a boolean or a `consumer` that returns a boolean\n */\nexport interface DiffFilter<T> {\n  [selector: string]: DiffFilterSelector<T>;\n}\n\ninterface DiffFilterSelector<T> {\n  full?: DiffFilterConsumer<T>;\n  attributes?: {\n    [name: string]: DiffFilterConsumer<T>;\n  };\n}\n\n/**\n * Consumer to match if a diff should be filtered out.\n */\ntype DiffFilterConsumer<T> = boolean | ((value: T | null) => boolean);\n\nfunction getDiffFilterSelector(\n  elementToBeCompared: Element,\n  rootElementToBeCompared: Element,\n  filters: DiffFilter<Element>\n): DiffFilterSelector<Element> | undefined {\n  const querySelector: string | undefined =\n    rootElementToBeCompared === elementToBeCompared\n      ? ':scope'\n      : Object.keys(filters).find(selector =>\n          Array.from(\n            rootElementToBeCompared.querySelectorAll(selector)\n          ).includes(elementToBeCompared)\n        );\n\n  return querySelector ? filters[querySelector!] : undefined;\n}\n\nfunction shouldFilterElement(\n  element: Element,\n  filter: DiffFilterSelector<Element> | undefined\n): boolean {\n  if (!filter || !filter.full) {\n    return false;\n  }\n  const consumer: DiffFilterConsumer<Element> = filter!.full!;\n\n  return typeof consumer === 'boolean' ? consumer : consumer(element);\n}\n\nfunction shouldFilterAttribute(\n  element: Element,\n  attribute: string,\n  filter: DiffFilterSelector<Element> | undefined\n): boolean {\n  if (!filter || !filter.attributes || !filter.attributes![attribute]) {\n    return false;\n  }\n  const consumer: DiffFilterConsumer<Element> = filter!.attributes![attribute];\n\n  return typeof consumer === 'boolean' ? consumer : consumer(element);\n}\n\n/**\n * Returns the description of the Element that differs.\n *\n * @param element - The Element to retrieve the identifier from.\n */\nfunction describe(element: Element): string {\n  const id = identity(element);\n  return typeof id === 'string' ? id : get('unidentifiable');\n}\n\n/**\n * Check if there are any attribute values changed between the two elements.\n *\n * @param elementToBeCompared     - The element to check for differences.\n * @param elementToCompareAgainst - The element used to check against.\n */\nexport function diffSclAttributes(\n  elementToBeCompared: Element,\n  elementToCompareAgainst: Element,\n  filterToIgnore: DiffFilter<Element>,\n  searchElementToBeCompared: Element\n): [string, Diff<string>][] {\n  const attrDiffs: [string, Diff<string>][] = [];\n\n  // First check if there is any text inside the element and there should be no child elements.\n  const newText = elementToBeCompared.textContent?.trim() ?? '';\n  const oldText = elementToCompareAgainst.textContent?.trim() ?? '';\n  if (\n    elementToBeCompared.childElementCount === 0 &&\n    elementToCompareAgainst.childElementCount === 0 &&\n    newText !== oldText\n  ) {\n    const shouldFilter: boolean = shouldFilterElement(\n      elementToBeCompared,\n      getDiffFilterSelector(\n        elementToBeCompared,\n        searchElementToBeCompared,\n        filterToIgnore\n      )\n    );\n\n    if (!shouldFilter) {\n      attrDiffs.push([\n        'value',\n        { type: 'Content', newValue: newText, oldValue: oldText },\n      ]);\n    }\n  }\n\n  // Next check if there are any difference between attributes.\n  const attributeNames = new Set(\n    elementToCompareAgainst\n      .getAttributeNames()\n      .concat(elementToBeCompared.getAttributeNames())\n  );\n  for (const name of attributeNames) {\n    const shouldFilter: boolean = shouldFilterAttribute(\n      elementToBeCompared,\n      name,\n      getDiffFilterSelector(\n        elementToBeCompared,\n        searchElementToBeCompared,\n        filterToIgnore\n      )\n    );\n    if (\n      !shouldFilter &&\n      elementToCompareAgainst.getAttribute(name) !==\n        elementToBeCompared.getAttribute(name)\n    ) {\n      attrDiffs.push([\n        name,\n        <Diff<string>>{\n          type: 'Attribute',\n          newValue: elementToBeCompared.getAttribute(name),\n          oldValue: elementToCompareAgainst.getAttribute(name),\n        },\n      ]);\n    }\n  }\n  return attrDiffs;\n}\n\n/**\n * Function to retrieve the identity to compare 2 children on the same level.\n * This means we only need to last part of the Identity string to compare the children.\n *\n * @param element - The element to retrieve the identity from.\n */\nexport function identityForCompare(element: Element): string | number {\n  let identityOfElement = identity(element);\n  if (typeof identityOfElement === 'string') {\n    identityOfElement = identityOfElement.split('>').pop() ?? '';\n  }\n  return identityOfElement;\n}\n\n/**\n * Custom method for comparing to check if 2 elements are the same. Because they are on the same level\n * we don't need to compare the full identity, we just compare the part of the Element itself.\n *\n * <b>Remark</b>Private elements are already filtered out, so we don't need to bother them.\n *\n * @param newValue - The new element to compare with the old element.\n * @param oldValue - The old element to which the new element is compared.\n */\nexport function isSame(newValue: Element, oldValue: Element): boolean {\n  return (\n    newValue.tagName === oldValue.tagName &&\n    identityForCompare(newValue) === identityForCompare(oldValue)\n  );\n}\n\n/**\n * List of all differences between children elements that both old and new element have.\n * The list contains children both elements have and children that were added or removed\n * from the new element.\n * <b>Remark</b>: Private elements are ignored.\n *\n * @param elementToBeCompared     - The element to check for differences.\n * @param elementToCompareAgainst - The element used to check against.\n */\nexport function diffSclChilds(\n  elementToBeCompared: Element,\n  elementToCompareAgainst: Element,\n  filterToIgnore: DiffFilter<Element>,\n  searchElementToBeCompared: Element,\n  searchElementToCompareAgainst: Element\n): Diff<Element>[] {\n  const childDiffs: Diff<Element>[] = [];\n  const childrenToBeCompared = Array.from(elementToBeCompared.children);\n  const childrenToCompareTo = Array.from(elementToCompareAgainst.children);\n\n  childrenToBeCompared.forEach(newElement => {\n    if (!newElement.closest('Private')) {\n      const shouldFilter: boolean = shouldFilterElement(\n        newElement,\n        getDiffFilterSelector(\n          newElement,\n          searchElementToBeCompared,\n          filterToIgnore\n        )\n      );\n      if (!shouldFilter) {\n        const twinIndex = childrenToCompareTo.findIndex(ourChild =>\n          isSame(newElement, ourChild)\n        );\n        const oldElement =\n          twinIndex > -1 ? childrenToCompareTo[twinIndex] : null;\n\n        if (oldElement) {\n          childrenToCompareTo.splice(twinIndex, 1);\n          childDiffs.push({\n            type: 'Element',\n            newValue: newElement,\n            oldValue: oldElement,\n          });\n        } else {\n          childDiffs.push({\n            type: 'Element',\n            newValue: newElement,\n            oldValue: null,\n          });\n        }\n      }\n    }\n  });\n  childrenToCompareTo.forEach(oldElement => {\n    if (!oldElement.closest('Private')) {\n      const shouldFilter: boolean = shouldFilterElement(\n        oldElement,\n        getDiffFilterSelector(\n          oldElement,\n          searchElementToCompareAgainst,\n          filterToIgnore\n        )\n      );\n      if (!shouldFilter) {\n        childDiffs.push({\n          type: 'Element',\n          newValue: null,\n          oldValue: oldElement,\n        });\n      }\n    }\n  });\n  return childDiffs;\n}\n\n/**\n * Generate HTML (TemplateResult) containing all the differences between the two elements passed.\n * If null is returned there are no differences between the two elements.\n *\n * @param elementToBeCompared     - The element to check for differences.\n * @param elementToCompareAgainst - The element used to check against.\n */\nexport function renderDiff(\n  elementToBeCompared: Element,\n  elementToCompareAgainst: Element,\n  filterToIgnore: DiffFilter<Element> = {}\n): TemplateResult | null {\n  return renderDiffInternal(\n    elementToBeCompared,\n    elementToCompareAgainst,\n    filterToIgnore,\n    elementToBeCompared,\n    elementToCompareAgainst\n  );\n}\n\nfunction renderDiffInternal(\n  elementToBeCompared: Element,\n  elementToCompareAgainst: Element,\n  filterToIgnore: DiffFilter<Element> = {},\n  searchElementToBeCompared: Element,\n  searchElementToCompareAgainst: Element\n): TemplateResult | null {\n  // Determine the ID from the current tag. These can be numbers or strings.\n  let idTitle: string | undefined = identity(elementToBeCompared).toString();\n  if (idTitle === 'NaN') {\n    idTitle = undefined;\n  }\n\n  // Set the root elements if they are not defined yet\n  searchElementToBeCompared = searchElementToBeCompared || elementToBeCompared;\n  searchElementToCompareAgainst =\n    searchElementToCompareAgainst || elementToCompareAgainst;\n\n  const attrDiffs: [string, Diff<string>][] = diffSclAttributes(\n    elementToBeCompared,\n    elementToCompareAgainst,\n    filterToIgnore,\n    searchElementToBeCompared\n  );\n\n  // Next check which elements are added, deleted or in both elements.\n  const childDiffs: Diff<Element>[] = diffSclChilds(\n    elementToBeCompared,\n    elementToCompareAgainst,\n    filterToIgnore,\n    searchElementToBeCompared,\n    searchElementToCompareAgainst\n  );\n\n  const childAddedOrDeleted: Diff<Element>[] = [];\n  const childToCompare: Diff<Element>[] = [];\n  childDiffs.forEach(diff => {\n    if (!diff.oldValue || !diff.newValue) {\n      childAddedOrDeleted.push(diff);\n    } else {\n      childToCompare.push(diff);\n    }\n  });\n\n  // These children exist in both old and new element, let's check if there are any difference in the children.\n  const childToCompareTemplates = childToCompare\n    .map(diff => renderDiff(diff.newValue!, diff.oldValue!, filterToIgnore))\n    .filter(result => result !== null);\n\n  // If there are difference generate the HTML otherwise just return null.\n  if (\n    childToCompareTemplates.length > 0 ||\n    attrDiffs.length > 0 ||\n    childAddedOrDeleted.length > 0\n  ) {\n    return html` ${attrDiffs.length > 0 || childAddedOrDeleted.length > 0\n      ? html`<div class=\"container container--alt\">\n          <div class=\"list__container list__container--left\">\n            <mwc-list multi right nonInteractive>\n              ${repeat(\n                attrDiffs,\n                e => e,\n                ([name, diff]) =>\n                  html`<mwc-list-item right twoLine graphic=\"icon\">\n                    ${diff.oldValue !== null\n                      ? html`\n                          <span>\n                            ${name}:\n                            ${diff.oldValue === '' ? '\"\"' : diff.oldValue}\n                          </span>\n                          <span slot=\"secondary\">${idTitle}</span>\n                          <mwc-icon slot=\"graphic\">\n                            ${diffTypeToIcon.get(diff.type)}\n                          </mwc-icon>\n                        `\n                      : ''}\n                  </mwc-list-item>`\n              )}\n              ${repeat(\n                childAddedOrDeleted,\n                e => e,\n                diff =>\n                  html` <mwc-list-item right twoLine graphic=\"icon\">\n                    ${diff.oldValue\n                      ? html`\n                          <span>${diff.oldValue.tagName}</span>\n                          <span slot=\"secondary\">\n                            ${describe(diff.oldValue!)}\n                          </span>\n                          <mwc-icon slot=\"graphic\">\n                            ${diffTypeToIcon.get(diff.type)}\n                          </mwc-icon>\n                        `\n                      : ''}\n                  </mwc-list-item>`\n              )}\n            </mwc-list>\n          </div>\n          <div class=\"list__container\">\n            <mwc-list multi left nonInteractive>\n              ${repeat(\n                attrDiffs,\n                e => e,\n                ([name, diff]) =>\n                  html` <mwc-list-item left twoLine graphic=\"icon\">\n                    ${diff.newValue !== null\n                      ? html`\n                          <span>\n                            ${name}:\n                            ${diff.newValue === '' ? '\"\"' : diff.newValue}\n                          </span>\n                          <span slot=\"secondary\">${idTitle}</span>\n                          <mwc-icon slot=\"graphic\">\n                            ${diffTypeToIcon.get(diff.type)}\n                          </mwc-icon>\n                        `\n                      : ''}\n                  </mwc-list-item>`\n              )}\n              ${repeat(\n                childAddedOrDeleted,\n                e => e,\n                diff =>\n                  html` <mwc-list-item left twoLine graphic=\"icon\">\n                    ${diff.newValue\n                      ? html`\n                          <span>${diff.newValue.tagName}</span>\n                          <span slot=\"secondary\">\n                            ${describe(diff.newValue!)}\n                          </span>\n                          <mwc-icon slot=\"graphic\">\n                            ${diffTypeToIcon.get(diff.type)}\n                          </mwc-icon>\n                        `\n                      : ''}\n                  </mwc-list-item>`\n              )}\n            </mwc-list>\n          </div>\n        </div>`\n      : ''}\n    ${childToCompareTemplates}`;\n  }\n  return null;\n}\n"]}
+{"version":3,"file":"compare.js","sourceRoot":"","sources":["../../src/foundation/compare.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, TemplateResult } from 'lit-element';\nimport { repeat } from 'lit-html/directives/repeat.js';\nimport { get } from 'lit-translate';\n\nimport '@material/mwc-list';\nimport '@material/mwc-list/mwc-list-item';\nimport '@material/mwc-icon';\n\nimport { identity } from '../foundation.js';\nimport { SVGTemplateResult } from 'lit-html';\n\nimport { attributeIcon, contentIcon, elementIcon } from '../icons/compare.js';\n\nconst diffTypeToIcon: Map<DiffType, SVGTemplateResult> = new Map<\n  DiffType,\n  SVGTemplateResult\n>();\n\ndiffTypeToIcon.set('Attribute', attributeIcon);\ndiffTypeToIcon.set('Content', contentIcon);\ndiffTypeToIcon.set('Element', elementIcon);\n\nexport type DiffType = 'Element' | 'Attribute' | 'Content';\n\nexport type Diff<T> =\n  | { type: DiffType; oldValue: T; newValue: null }\n  | { type: DiffType; oldValue: null; newValue: T }\n  | { type: DiffType; oldValue: T; newValue: T };\n\n/**\n * Type to filter out a difference based on `tagName`.`attributeName`\n *\n * The matcher can be a boolean or a `consumer` that returns a boolean\n */\nexport interface DiffFilter<T> {\n  [selector: string]: DiffFilterSelector<T>;\n}\n\ninterface DiffFilterSelector<T> {\n  full?: DiffFilterConsumer<T>;\n  attributes?: {\n    [name: string]: DiffFilterConsumer<T>;\n  };\n}\n\n/**\n * Consumer to match if a diff should be filtered out.\n */\ntype DiffFilterConsumer<T> = boolean | ((value: T | null) => boolean);\n\nfunction getDiffFilterSelector(\n  elementToBeCompared: Element,\n  rootElementToBeCompared: Element,\n  filters: DiffFilter<Element>\n): DiffFilterSelector<Element> | undefined {\n  const querySelector: string | undefined =\n    rootElementToBeCompared === elementToBeCompared\n      ? ':scope'\n      : Object.keys(filters).find(selector =>\n          Array.from(\n            rootElementToBeCompared.querySelectorAll(selector)\n          ).includes(elementToBeCompared)\n        );\n\n  return querySelector ? filters[querySelector!] : undefined;\n}\n\nfunction shouldFilterElement(\n  element: Element,\n  filter: DiffFilterSelector<Element> | undefined\n): boolean {\n  if (!filter || !filter.full) {\n    return false;\n  }\n  const consumer: DiffFilterConsumer<Element> = filter!.full!;\n\n  return typeof consumer === 'boolean' ? consumer : consumer(element);\n}\n\nfunction shouldFilterAttribute(\n  element: Element,\n  attribute: string,\n  filter: DiffFilterSelector<Element> | undefined\n): boolean {\n  if (!filter || !filter.attributes || !filter.attributes![attribute]) {\n    return false;\n  }\n  const consumer: DiffFilterConsumer<Element> = filter!.attributes![attribute];\n\n  return typeof consumer === 'boolean' ? consumer : consumer(element);\n}\n\n/**\n * Returns the description of the Element that differs.\n *\n * @param element - The Element to retrieve the identifier from.\n */\nfunction describe(element: Element): string {\n  const id = identity(element);\n  return typeof id === 'string' ? id : get('unidentifiable');\n}\n\n/**\n * Check if there are any attribute values changed between the two elements.\n *\n * @param elementToBeCompared     - The element to check for differences.\n * @param elementToCompareAgainst - The element used to check against.\n */\nexport function diffSclAttributes(\n  elementToBeCompared: Element,\n  elementToCompareAgainst: Element,\n  filterToIgnore: DiffFilter<Element>,\n  searchElementToBeCompared: Element\n): [string, Diff<string>][] {\n  const attrDiffs: [string, Diff<string>][] = [];\n\n  // First check if there is any text inside the element and there should be no child elements.\n  const newText = elementToBeCompared.textContent?.trim() ?? '';\n  const oldText = elementToCompareAgainst.textContent?.trim() ?? '';\n  if (\n    elementToBeCompared.childElementCount === 0 &&\n    elementToCompareAgainst.childElementCount === 0 &&\n    newText !== oldText\n  ) {\n    const shouldFilter: boolean = shouldFilterElement(\n      elementToBeCompared,\n      getDiffFilterSelector(\n        elementToBeCompared,\n        searchElementToBeCompared,\n        filterToIgnore\n      )\n    );\n\n    if (!shouldFilter) {\n      attrDiffs.push([\n        'value',\n        { type: 'Content', newValue: newText, oldValue: oldText },\n      ]);\n    }\n  }\n\n  // Next check if there are any difference between attributes.\n  const attributeNames = new Set(\n    elementToCompareAgainst\n      .getAttributeNames()\n      .concat(elementToBeCompared.getAttributeNames())\n  );\n  for (const name of attributeNames) {\n    const shouldFilter: boolean = shouldFilterAttribute(\n      elementToBeCompared,\n      name,\n      getDiffFilterSelector(\n        elementToBeCompared,\n        searchElementToBeCompared,\n        filterToIgnore\n      )\n    );\n    if (\n      !shouldFilter &&\n      elementToCompareAgainst.getAttribute(name) !==\n        elementToBeCompared.getAttribute(name)\n    ) {\n      attrDiffs.push([\n        name,\n        <Diff<string>>{\n          type: 'Attribute',\n          newValue: elementToBeCompared.getAttribute(name),\n          oldValue: elementToCompareAgainst.getAttribute(name),\n        },\n      ]);\n    }\n  }\n  return attrDiffs;\n}\n\n/**\n * Function to retrieve the identity to compare 2 children on the same level.\n * This means we only need to last part of the Identity string to compare the children.\n *\n * @param element - The element to retrieve the identity from.\n */\nexport function identityForCompare(element: Element): string | number {\n  let identityOfElement = identity(element);\n  if (typeof identityOfElement === 'string') {\n    identityOfElement = identityOfElement.split('>').pop() ?? '';\n  }\n  return identityOfElement;\n}\n\n/**\n * Custom method for comparing to check if 2 elements are the same. Because they are on the same level\n * we don't need to compare the full identity, we just compare the part of the Element itself.\n *\n * <b>Remark</b>Private elements are already filtered out, so we don't need to bother them.\n *\n * @param newValue - The new element to compare with the old element.\n * @param oldValue - The old element to which the new element is compared.\n */\nexport function isSame(newValue: Element, oldValue: Element): boolean {\n  return (\n    newValue.tagName === oldValue.tagName &&\n    identityForCompare(newValue) === identityForCompare(oldValue)\n  );\n}\n\n/**\n * List of all differences between children elements that both old and new element have.\n * The list contains children both elements have and children that were added or removed\n * from the new element.\n * <b>Remark</b>: Private elements are ignored.\n *\n * @param elementToBeCompared     - The element to check for differences.\n * @param elementToCompareAgainst - The element used to check against.\n */\nexport function diffSclChilds(\n  elementToBeCompared: Element,\n  elementToCompareAgainst: Element,\n  filterToIgnore: DiffFilter<Element>,\n  searchElementToBeCompared: Element,\n  searchElementToCompareAgainst: Element\n): Diff<Element>[] {\n  const childDiffs: Diff<Element>[] = [];\n  const childrenToBeCompared = Array.from(elementToBeCompared.children);\n  const childrenToCompareTo = Array.from(elementToCompareAgainst.children);\n\n  childrenToBeCompared.forEach(newElement => {\n    if (!newElement.closest('Private')) {\n      const shouldFilter: boolean = shouldFilterElement(\n        newElement,\n        getDiffFilterSelector(\n          newElement,\n          searchElementToBeCompared,\n          filterToIgnore\n        )\n      );\n      if (!shouldFilter) {\n        const twinIndex = childrenToCompareTo.findIndex(ourChild =>\n          isSame(newElement, ourChild)\n        );\n        const oldElement =\n          twinIndex > -1 ? childrenToCompareTo[twinIndex] : null;\n\n        if (oldElement) {\n          childrenToCompareTo.splice(twinIndex, 1);\n          childDiffs.push({\n            type: 'Element',\n            newValue: newElement,\n            oldValue: oldElement,\n          });\n        } else {\n          childDiffs.push({\n            type: 'Element',\n            newValue: newElement,\n            oldValue: null,\n          });\n        }\n      }\n    }\n  });\n  childrenToCompareTo.forEach(oldElement => {\n    if (!oldElement.closest('Private')) {\n      const shouldFilter: boolean = shouldFilterElement(\n        oldElement,\n        getDiffFilterSelector(\n          oldElement,\n          searchElementToCompareAgainst,\n          filterToIgnore\n        )\n      );\n      if (!shouldFilter) {\n        childDiffs.push({\n          type: 'Element',\n          newValue: null,\n          oldValue: oldElement,\n        });\n      }\n    }\n  });\n  return childDiffs;\n}\n\n/**\n * Generate HTML (TemplateResult) containing all the differences between the two elements passed.\n * If null is returned there are no differences between the two elements.\n *\n * @param elementToBeCompared     - The element to check for differences.\n * @param elementToCompareAgainst - The element used to check against.\n */\nexport function renderDiff(\n  elementToBeCompared: Element,\n  elementToCompareAgainst: Element,\n  filterToIgnore: DiffFilter<Element> = {}\n): TemplateResult | null {\n  return renderDiffInternal(\n    elementToBeCompared,\n    elementToCompareAgainst,\n    filterToIgnore,\n    elementToBeCompared,\n    elementToCompareAgainst\n  );\n}\n\nfunction renderDiffInternal(\n  elementToBeCompared: Element,\n  elementToCompareAgainst: Element,\n  filterToIgnore: DiffFilter<Element> = {},\n  searchElementToBeCompared: Element,\n  searchElementToCompareAgainst: Element\n): TemplateResult | null {\n  // Determine the ID from the current tag. These can be numbers or strings.\n  let idTitle: string | undefined = identity(elementToBeCompared).toString();\n  if (idTitle === 'NaN') {\n    idTitle = undefined;\n  }\n\n  // Set the root elements if they are not defined yet\n  searchElementToBeCompared = searchElementToBeCompared || elementToBeCompared;\n  searchElementToCompareAgainst =\n    searchElementToCompareAgainst || elementToCompareAgainst;\n\n  const attrDiffs: [string, Diff<string>][] = diffSclAttributes(\n    elementToBeCompared,\n    elementToCompareAgainst,\n    filterToIgnore,\n    searchElementToBeCompared\n  );\n\n  // Next check which elements are added, deleted or in both elements.\n  const childDiffs: Diff<Element>[] = diffSclChilds(\n    elementToBeCompared,\n    elementToCompareAgainst,\n    filterToIgnore,\n    searchElementToBeCompared,\n    searchElementToCompareAgainst\n  );\n\n  const childAddedOrDeleted: Diff<Element>[] = [];\n  const childToCompare: Diff<Element>[] = [];\n  childDiffs.forEach(diff => {\n    if (!diff.oldValue || !diff.newValue) {\n      childAddedOrDeleted.push(diff);\n    } else {\n      childToCompare.push(diff);\n    }\n  });\n\n  // These children exist in both old and new element, let's check if there are any difference in the children.\n  const childToCompareTemplates = childToCompare\n    .map(diff => renderDiff(diff.newValue!, diff.oldValue!, filterToIgnore))\n    .filter(result => result !== null);\n\n  // If there are difference generate the HTML otherwise just return null.\n  if (\n    childToCompareTemplates.length > 0 ||\n    attrDiffs.length > 0 ||\n    childAddedOrDeleted.length > 0\n  ) {\n    return html` ${attrDiffs.length > 0 || childAddedOrDeleted.length > 0\n      ? html`<div class=\"container container--alt\">\n          <div class=\"list__container list__container--left\">\n            <mwc-list multi right nonInteractive>\n              ${repeat(\n                attrDiffs,\n                e => e,\n                ([name, diff]) =>\n                  html`<mwc-list-item right twoLine graphic=\"icon\">\n                    ${diff.oldValue !== null\n                      ? html`\n                          <span>\n                            ${name}:\n                            ${diff.oldValue === '' ? '\"\"' : diff.oldValue}\n                          </span>\n                          <span slot=\"secondary\">${idTitle}</span>\n                          <mwc-icon slot=\"graphic\">\n                            ${diffTypeToIcon.get(diff.type)}\n                          </mwc-icon>\n                        `\n                      : ''}\n                  </mwc-list-item>`\n              )}\n              ${repeat(\n                childAddedOrDeleted,\n                e => e,\n                diff =>\n                  html` <mwc-list-item right twoLine graphic=\"icon\">\n                    ${diff.oldValue\n                      ? html`\n                          <span>${diff.oldValue.tagName}</span>\n                          <span slot=\"secondary\">\n                            ${describe(diff.oldValue!)}\n                          </span>\n                          <mwc-icon slot=\"graphic\">\n                            ${diffTypeToIcon.get(diff.type)}\n                          </mwc-icon>\n                        `\n                      : ''}\n                  </mwc-list-item>`\n              )}\n            </mwc-list>\n          </div>\n          <div class=\"list__container\">\n            <mwc-list multi left nonInteractive>\n              ${repeat(\n                attrDiffs,\n                e => e,\n                ([name, diff]) =>\n                  html` <mwc-list-item left twoLine graphic=\"icon\">\n                    ${diff.newValue !== null\n                      ? html`\n                          <span>\n                            ${name}:\n                            ${diff.newValue === '' ? '\"\"' : diff.newValue}\n                          </span>\n                          <span slot=\"secondary\">${idTitle}</span>\n                          <mwc-icon slot=\"graphic\">\n                            ${diffTypeToIcon.get(diff.type)}\n                          </mwc-icon>\n                        `\n                      : ''}\n                  </mwc-list-item>`\n              )}\n              ${repeat(\n                childAddedOrDeleted,\n                e => e,\n                diff =>\n                  html` <mwc-list-item left twoLine graphic=\"icon\">\n                    ${diff.newValue\n                      ? html`\n                          <span>${diff.newValue.tagName}</span>\n                          <span slot=\"secondary\">\n                            ${describe(diff.newValue!)}\n                          </span>\n                          <mwc-icon slot=\"graphic\">\n                            ${diffTypeToIcon.get(diff.type)}\n                          </mwc-icon>\n                        `\n                      : ''}\n                  </mwc-list-item>`\n              )}\n            </mwc-list>\n          </div>\n        </div>`\n      : ''}\n    ${childToCompareTemplates}`;\n  }\n  return null;\n}\n"]}

package/dist/foundation.d.ts

@@ -7,6 +7,7 @@ import AceEditor from 'ace-custom-element';
 import { WizardTextField } from './wizard-textfield.js';
 import { WizardSelect } from './wizard-select.js';
 import { EditorAction } from '@compas-oscd/core';
+export declare const oscdHtml: (strings: TemplateStringsArray, ...values: unknown[]) => TemplateResult;
 export declare const wizardInputSelector = "wizard-textfield, mwc-textfield, ace-editor, mwc-select, wizard-select, wizard-checkbox";
 export type WizardInputElement = WizardTextField | TextField | (AceEditor & {
     checkValidity: () => boolean;

package/dist/foundation.js

@@ -1,9 +1,11 @@
+import { html } from 'lit-element';
 import { directive } from 'lit-html';
 import { Select } from '@material/mwc-select';
 import { getChildElementsByTagName } from '@compas-oscd/xml';
 import { WizardTextField } from './wizard-textfield.js';
 import { WizardSelect } from './wizard-select.js';
 import { WizardCheckbox } from './wizard-checkbox.js';
+export const oscdHtml = html;
 export const wizardInputSelector = 'wizard-textfield, mwc-textfield, ace-editor, mwc-select, wizard-select, wizard-checkbox';
 export function isWizardFactory(maybeFactory) {
     return typeof maybeFactory === 'function';