@compas-oscd/open-scd 0.34.0 → 0.34.1

package/dist/openscd/src/wizard-textfield.js

@@ -0,0 +1,191 @@
+import { __decorate } from "tslib";
+import { customElement, html, state, property, query, } from 'lit-element';
+import { get } from 'lit-translate';
+import '@material/mwc-icon-button';
+import '@material/mwc-list/mwc-list-item';
+import '@material/mwc-menu';
+import '@material/mwc-switch';
+import { TextField } from '@material/mwc-textfield';
+/** A potentially `nullable` `TextField` that allows for selection of an SI
+ * `multiplier` if an SI `unit` is given.
+ *
+ * NB: Use `maybeValue: string | null` instead of `value` if `nullable`!*/
+let WizardTextField = class WizardTextField extends TextField {
+    get multiplier() {
+        if (this.unit == '')
+            return null;
+        return (this.multipliers[this.multiplierIndex] ?? this.multipliers[0] ?? null);
+    }
+    set multiplier(value) {
+        const index = this.multipliers.indexOf(value);
+        if (index >= 0)
+            this.multiplierIndex = index;
+        this.suffix = (this.multiplier ?? '') + this.unit;
+    }
+    get null() {
+        return this.nullable && this.isNull;
+    }
+    set null(value) {
+        if (!this.nullable || value === this.isNull)
+            return;
+        this.isNull = value;
+        if (this.null)
+            this.disable();
+        else
+            this.enable();
+    }
+    /** Replacement for `value`, can only be `null` if [[`nullable`]]. */
+    get maybeValue() {
+        return this.null ? null : this.value;
+    }
+    set maybeValue(value) {
+        if (value === null)
+            this.null = true;
+        else {
+            this.null = false;
+            this.value = value;
+        }
+    }
+    selectMultiplier(se) {
+        this.multiplier = this.multipliers[se.detail.index];
+    }
+    enable() {
+        if (this.nulled === null)
+            return;
+        this.value = this.nulled;
+        this.nulled = null;
+        this.helperPersistent = false;
+        this.disabled = false;
+    }
+    disable() {
+        if (this.nulled !== null)
+            return;
+        this.nulled = this.value;
+        this.value = this.defaultValue;
+        this.helperPersistent = true;
+        this.disabled = true;
+    }
+    async firstUpdated() {
+        await super.firstUpdated();
+        if (this.multiplierMenu)
+            this.multiplierMenu.anchor =
+                this.multiplierButton ?? null;
+    }
+    checkValidity() {
+        if (this.reservedValues &&
+            this.reservedValues.some(array => array === this.value)) {
+            this.setCustomValidity(get('textfield.unique'));
+            return false;
+        }
+        this.setCustomValidity(''); //Reset. Otherwise super.checkValidity always falseM
+        return super.checkValidity();
+    }
+    constructor() {
+        super();
+        /** Whether [[`maybeValue`]] may be `null` */
+        this.nullable = false;
+        /** Selectable SI multipliers for a non-empty [[`unit`]]. */
+        this.multipliers = [null, ''];
+        this.multiplierIndex = 0;
+        /** SI Unit, must be non-empty to allow for selecting a [[`multiplier`]].
+         * Overrides `suffix`. */
+        this.unit = '';
+        this.isNull = false;
+        /** The default `value` displayed if [[`maybeValue`]] is `null`. */
+        this.defaultValue = '';
+        /** Additional values that cause validation to fail. */
+        this.reservedValues = [];
+        // FIXME: workaround to allow disable of the whole component - need basic refactor
+        this.disabledSwitch = false;
+        this.nulled = null;
+        this.disabledSwitch = this.hasAttribute('disabled');
+    }
+    renderUnitSelector() {
+        if (this.multipliers.length && this.unit)
+            return html `<div style="position:relative;">
+        <mwc-icon-button
+          style="margin:5px;"
+          icon="more"
+          ?disabled=${this.null || this.disabledSwitch}
+          @click=${() => this.multiplierMenu?.show()}
+        ></mwc-icon-button>
+        <mwc-menu
+          @selected=${this.selectMultiplier}
+          fixed
+          .anchor=${this.multiplierButton ?? null}
+          >${this.renderMulplierList()}</mwc-menu
+        >
+      </div>`;
+        else
+            return html ``;
+    }
+    renderMulplierList() {
+        return html `${this.multipliers.map(multiplier => html `<mwc-list-item ?selected=${multiplier === this.multiplier}
+          >${multiplier === null
+            ? get('textfield.noMultiplier')
+            : multiplier}</mwc-list-item
+        >`)}`;
+    }
+    renderSwitch() {
+        if (this.nullable) {
+            return html `<mwc-switch
+        style="margin-left: 12px;"
+        ?checked=${!this.null}
+        ?disabled=${this.disabledSwitch}
+        @change=${() => {
+                this.null = !this.nullSwitch.checked;
+            }}
+      ></mwc-switch>`;
+        }
+        return html ``;
+    }
+    render() {
+        return html `
+      <div style="display: flex; flex-direction: row;">
+        <div style="flex: auto;">${super.render()}</div>
+        ${this.renderUnitSelector()}
+        <div style="display: flex; align-items: center; height: 56px;">
+          ${this.renderSwitch()}
+        </div>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: Boolean })
+], WizardTextField.prototype, "nullable", void 0);
+__decorate([
+    property({ type: Array })
+], WizardTextField.prototype, "multipliers", void 0);
+__decorate([
+    property({ type: String })
+], WizardTextField.prototype, "multiplier", null);
+__decorate([
+    property({ type: String })
+], WizardTextField.prototype, "unit", void 0);
+__decorate([
+    state()
+], WizardTextField.prototype, "null", null);
+__decorate([
+    property({ type: String })
+], WizardTextField.prototype, "maybeValue", null);
+__decorate([
+    property({ type: String })
+], WizardTextField.prototype, "defaultValue", void 0);
+__decorate([
+    property({ type: Array })
+], WizardTextField.prototype, "reservedValues", void 0);
+__decorate([
+    query('mwc-switch')
+], WizardTextField.prototype, "nullSwitch", void 0);
+__decorate([
+    query('mwc-menu')
+], WizardTextField.prototype, "multiplierMenu", void 0);
+__decorate([
+    query('mwc-icon-button')
+], WizardTextField.prototype, "multiplierButton", void 0);
+WizardTextField = __decorate([
+    customElement('wizard-textfield')
+], WizardTextField);
+export { WizardTextField };
+//# sourceMappingURL=wizard-textfield.js.map

package/dist/openscd/src/wizard-textfield.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wizard-textfield.js","sourceRoot":"","sources":["../../../src/wizard-textfield.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  customElement,\n  html,\n  state,\n  property,\n  query,\n  TemplateResult,\n} from 'lit-element';\nimport { get } from 'lit-translate';\n\nimport '@material/mwc-icon-button';\nimport '@material/mwc-list/mwc-list-item';\nimport '@material/mwc-menu';\nimport '@material/mwc-switch';\nimport { IconButton } from '@material/mwc-icon-button';\nimport { Menu } from '@material/mwc-menu';\nimport { SingleSelectedEvent } from '@material/mwc-list/mwc-list-foundation';\nimport { Switch } from '@material/mwc-switch';\nimport { TextField } from '@material/mwc-textfield';\n\n/** A potentially `nullable` `TextField` that allows for selection of an SI\n * `multiplier` if an SI `unit` is given.\n *\n * NB: Use `maybeValue: string | null` instead of `value` if `nullable`!*/\n@customElement('wizard-textfield')\nexport class WizardTextField extends TextField {\n  /** Whether [[`maybeValue`]] may be `null` */\n  @property({ type: Boolean })\n  nullable = false;\n  /** Selectable SI multipliers for a non-empty [[`unit`]]. */\n  @property({ type: Array })\n  multipliers = [null, ''];\n  private multiplierIndex = 0;\n  @property({ type: String })\n  get multiplier(): string | null {\n    if (this.unit == '') return null;\n    return (\n      this.multipliers[this.multiplierIndex] ?? this.multipliers[0] ?? null\n    );\n  }\n  set multiplier(value: string | null) {\n    const index = this.multipliers.indexOf(value);\n    if (index >= 0) this.multiplierIndex = index;\n    this.suffix = (this.multiplier ?? '') + this.unit;\n  }\n  /** SI Unit, must be non-empty to allow for selecting a [[`multiplier`]].\n   * Overrides `suffix`. */\n  @property({ type: String })\n  unit = '';\n  private isNull = false;\n  @state()\n  private get null(): boolean {\n    return this.nullable && this.isNull;\n  }\n  private set null(value: boolean) {\n    if (!this.nullable || value === this.isNull) return;\n    this.isNull = value;\n    if (this.null) this.disable();\n    else this.enable();\n  }\n  /** Replacement for `value`, can only be `null` if [[`nullable`]]. */\n  @property({ type: String })\n  get maybeValue(): string | null {\n    return this.null ? null : this.value;\n  }\n  set maybeValue(value: string | null) {\n    if (value === null) this.null = true;\n    else {\n      this.null = false;\n      this.value = value;\n    }\n  }\n  /** The default `value` displayed if [[`maybeValue`]] is `null`. */\n  @property({ type: String })\n  defaultValue = '';\n  /** Additional values that cause validation to fail. */\n  @property({ type: Array })\n  reservedValues: string[] = [];\n\n  // FIXME: workaround to allow disable of the whole component - need basic refactor\n  private disabledSwitch = false;\n\n  @query('mwc-switch') nullSwitch?: Switch;\n  @query('mwc-menu') multiplierMenu?: Menu;\n  @query('mwc-icon-button') multiplierButton?: IconButton;\n\n  private nulled: string | null = null;\n\n  private selectMultiplier(se: SingleSelectedEvent): void {\n    this.multiplier = this.multipliers[se.detail.index];\n  }\n\n  private enable(): void {\n    if (this.nulled === null) return;\n    this.value = this.nulled;\n    this.nulled = null;\n    this.helperPersistent = false;\n    this.disabled = false;\n  }\n\n  private disable(): void {\n    if (this.nulled !== null) return;\n    this.nulled = this.value;\n    this.value = this.defaultValue;\n    this.helperPersistent = true;\n    this.disabled = true;\n  }\n\n  async firstUpdated(): Promise<void> {\n    await super.firstUpdated();\n    if (this.multiplierMenu)\n      this.multiplierMenu.anchor =\n        (this.multiplierButton as HTMLElement) ?? null;\n  }\n\n  checkValidity(): boolean {\n    if (\n      this.reservedValues &&\n      this.reservedValues.some(array => array === this.value)\n    ) {\n      this.setCustomValidity(get('textfield.unique'));\n      return false;\n    }\n    this.setCustomValidity(''); //Reset. Otherwise super.checkValidity always falseM\n    return super.checkValidity();\n  }\n\n  constructor() {\n    super();\n\n    this.disabledSwitch = this.hasAttribute('disabled');\n  }\n\n  renderUnitSelector(): TemplateResult {\n    if (this.multipliers.length && this.unit)\n      return html`<div style=\"position:relative;\">\n        <mwc-icon-button\n          style=\"margin:5px;\"\n          icon=\"more\"\n          ?disabled=${this.null || this.disabledSwitch}\n          @click=${() => this.multiplierMenu?.show()}\n        ></mwc-icon-button>\n        <mwc-menu\n          @selected=${this.selectMultiplier}\n          fixed\n          .anchor=${this.multiplierButton ?? null}\n          >${this.renderMulplierList()}</mwc-menu\n        >\n      </div>`;\n    else return html``;\n  }\n\n  renderMulplierList(): TemplateResult {\n    return html`${this.multipliers.map(\n      multiplier =>\n        html`<mwc-list-item ?selected=${multiplier === this.multiplier}\n          >${multiplier === null\n            ? get('textfield.noMultiplier')\n            : multiplier}</mwc-list-item\n        >`\n    )}`;\n  }\n\n  renderSwitch(): TemplateResult {\n    if (this.nullable) {\n      return html`<mwc-switch\n        style=\"margin-left: 12px;\"\n        ?checked=${!this.null}\n        ?disabled=${this.disabledSwitch}\n        @change=${() => {\n          this.null = !this.nullSwitch!.checked;\n        }}\n      ></mwc-switch>`;\n    }\n    return html``;\n  }\n\n  render(): TemplateResult {\n    return html`\n      <div style=\"display: flex; flex-direction: row;\">\n        <div style=\"flex: auto;\">${super.render()}</div>\n        ${this.renderUnitSelector()}\n        <div style=\"display: flex; align-items: center; height: 56px;\">\n          ${this.renderSwitch()}\n        </div>\n      </div>\n    `;\n  }\n}\n"]}

package/dist/openscd/src/wizards.js

@@ -0,0 +1,196 @@
+import { html } from 'lit-element';
+import { repeat } from 'lit-html/directives/repeat';
+import { get } from 'lit-translate';
+import '@material/mwc-icon';
+import '@material/mwc-list';
+import '@material/mwc-list/mwc-check-list-item';
+import '@material/mwc-list/mwc-list-item';
+import { identity, isEqual, isSame, newWizardEvent, } from './foundation.js';
+function describe(element) {
+    const id = identity(element);
+    return typeof id === 'string' ? id.replace(/^>/, '') : get('unidentifiable');
+}
+function mergeWizardAction(attrDiffs, childDiffs, sink, source, options) {
+    return (_, wizard) => {
+        const actions = [];
+        const checkList = wizard.shadowRoot.querySelector('mwc-list');
+        const selectedAttrDiffs = checkList.selected
+            .filter(item => item.classList.contains('attr'))
+            .map(item => attrDiffs[item.value]);
+        const newSink = sink.cloneNode(false);
+        const parent = selectedAttrDiffs.length ? newSink : sink;
+        if (selectedAttrDiffs.length) {
+            if (sink.childElementCount === 0)
+                newSink.textContent = sink.textContent;
+            for (const [name, diff] of selectedAttrDiffs)
+                if (name === 'value') {
+                    newSink.textContent = diff.theirs;
+                }
+                else if (diff.theirs === null)
+                    newSink.removeAttribute(name);
+                else
+                    newSink.setAttribute(name, diff.theirs);
+            actions.push({ old: { element: sink }, new: { element: newSink } });
+        }
+        let acted = false;
+        const selectedChildDiffs = checkList.selected
+            .filter(item => item.classList.contains('child'))
+            .map(item => childDiffs[item.value]);
+        if (selectedChildDiffs.length) {
+            for (const diff of selectedChildDiffs)
+                if (!diff.ours)
+                    actions.push({
+                        new: { parent, element: diff.theirs },
+                    });
+                else if (!diff.theirs)
+                    actions.push({
+                        old: {
+                            parent,
+                            element: diff.ours,
+                            reference: diff.ours.nextSibling,
+                        },
+                    });
+                else {
+                    acted = true;
+                    wizard.dispatchEvent(newWizardEvent(mergeWizard(diff.ours, diff.theirs, {
+                        ...options,
+                        title: undefined,
+                    })));
+                }
+        }
+        if (actions.length === 0 && !acted)
+            wizard.dispatchEvent(newWizardEvent());
+        return [
+            {
+                actions,
+                title: get('merge.log', {
+                    sink: describe(sink),
+                    source: describe(source),
+                    tag: sink.tagName,
+                }),
+            },
+        ];
+    };
+}
+export function mergeWizard(sink, source, options) {
+    const attrDiffs = [];
+    const ourText = sink.textContent ?? '';
+    const theirText = source.textContent ?? '';
+    if (sink.childElementCount === 0 &&
+        source.childElementCount === 0 &&
+        theirText !== ourText)
+        attrDiffs.push(['value', { ours: ourText, theirs: theirText }]);
+    const attributeNames = new Set(source.getAttributeNames().concat(sink.getAttributeNames()));
+    for (const name of attributeNames)
+        if (source.getAttribute(name) !== sink.getAttribute(name))
+            attrDiffs.push([
+                name,
+                {
+                    theirs: source.getAttribute(name),
+                    ours: sink.getAttribute(name),
+                },
+            ]);
+    const childDiffs = [];
+    const ourChildren = Array.from(sink.children);
+    const theirChildren = Array.from(source.children);
+    theirChildren.forEach(theirs => {
+        const twinIndex = ourChildren.findIndex(ourChild => isSame(theirs, ourChild));
+        const ours = twinIndex > -1 ? ourChildren[twinIndex] : null;
+        if (ours)
+            ourChildren.splice(twinIndex, 1);
+        if (ours && isEqual(theirs, ours))
+            return;
+        if (!ours || !isEqual(theirs, ours))
+            childDiffs.push({ theirs, ours });
+    });
+    ourChildren.forEach(ours => childDiffs.push({ theirs: null, ours }));
+    return [
+        {
+            title: options?.title ??
+                get('merge.defaultTitle', {
+                    sink: describe(sink),
+                    source: describe(source),
+                    tag: sink.tagName,
+                }),
+            primary: {
+                label: get('merge.title'),
+                icon: 'merge_type',
+                action: mergeWizardAction(attrDiffs, childDiffs, sink, source, options),
+                auto: options?.auto?.(sink, source) ?? false,
+            },
+            content: [
+                html `
+          <mwc-list multi>
+            ${repeat(attrDiffs, e => e, ([name, diff], index) => html `<mwc-check-list-item
+                  value=${index}
+                  class="attr"
+                  twoline
+                  left
+                  hasMeta
+                  .selected=${options?.selected?.(diff) ?? false}
+                  .disabled=${options?.disabled?.(diff) ?? false}
+                  style="--mdc-checkbox-checked-color: var(--mdc-theme-${diff.ours
+                    ? diff.theirs
+                        ? 'secondary'
+                        : 'error'
+                    : 'primary'});"
+                >
+                  <span>${name}</span>
+                  <span slot="secondary"
+                    >${diff.ours ?? ''}
+                    ${diff.ours && diff.theirs ? html `&cularr;` : ' '}
+                    ${diff.theirs ?? ''}</span
+                  >
+                  <mwc-icon slot="meta"
+                    >${diff.ours
+                    ? diff.theirs
+                        ? 'edit'
+                        : 'delete'
+                    : 'add'}</mwc-icon
+                  >
+                </mwc-check-list-item>`)}
+            ${childDiffs.length
+                    ? html `<mwc-list-item noninteractive
+                    >${get('merge.children')}</mwc-list-item
+                  >
+                  <li padded divider role="separator"></li>`
+                    : ''}
+            ${repeat(childDiffs, e => e, (diff, index) => html `<mwc-check-list-item
+                  value=${index}
+                  class="child"
+                  twoline
+                  left
+                  hasMeta
+                  .selected=${options?.selected?.(diff) ?? false}
+                  .disabled=${options?.disabled?.(diff) ?? false}
+                  style="--mdc-checkbox-checked-color: var(--mdc-theme-${diff.ours
+                    ? diff.theirs
+                        ? 'secondary'
+                        : 'error'
+                    : 'primary'});"
+                >
+                  <span>${diff.ours?.tagName ?? diff.theirs?.tagName}</span>
+                  <span slot="secondary"
+                    >${diff.ours ? describe(diff.ours) : ''}
+                    ${diff.ours &&
+                    diff.theirs &&
+                    describe(diff.ours) + describe(diff.theirs)
+                    ? html `&cularr;`
+                    : ' '}
+                    ${diff.theirs ? describe(diff.theirs) : ''}</span
+                  >
+                  <mwc-icon slot="meta"
+                    >${diff.ours
+                    ? diff.theirs
+                        ? 'merge_type'
+                        : 'delete'
+                    : 'add'}</mwc-icon
+                  >
+                </mwc-check-list-item>`)}
+          </mwc-list>
+        `,
+            ],
+        },
+    ];
+}
+//# sourceMappingURL=wizards.js.map

package/dist/openscd/src/wizards.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wizards.js","sourceRoot":"","sources":["../../../src/wizards.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AACnC,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AAEpC,OAAO,oBAAoB,CAAC;AAC5B,OAAO,oBAAoB,CAAC;AAC5B,OAAO,wCAAwC,CAAC;AAChD,OAAO,kCAAkC,CAAC;AAG1C,OAAO,EACL,QAAQ,EACR,OAAO,EACP,MAAM,EACN,cAAc,GAGf,MAAM,iBAAiB,CAAC;AAczB,SAAS,QAAQ,CAAC,OAAgB;IAChC,MAAM,EAAE,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAC;IAE7B,OAAO,OAAO,EAAE,KAAK,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;AAC/E,CAAC;AAED,SAAS,iBAAiB,CACxB,SAAmC,EACnC,UAA2B,EAC3B,IAAa,EACb,MAAe,EACf,OAAsB;IAEtB,OAAO,CAAC,CAAC,EAAE,MAAe,EAAkB,EAAE;QAC5C,MAAM,OAAO,GAAmB,EAAE,CAAC;QACnC,MAAM,SAAS,GAAG,MAAM,CAAC,UAAW,CAAC,aAAa,CAAC,UAAU,CAAE,CAAC;QAEhE,MAAM,iBAAiB,GAAgB,SAAS,CAAC,QAAS;aACvD,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;aAC/C,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,KAA0B,CAAC,CAAC,CAAC;QAE3D,MAAM,OAAO,GAAY,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;QAC/C,MAAM,MAAM,GAAG,iBAAiB,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC;QACzD,IAAI,iBAAiB,CAAC,MAAM,EAAE;YAC5B,IAAI,IAAI,CAAC,iBAAiB,KAAK,CAAC;gBAAE,OAAO,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC;YACzE,KAAK,MAAM,CAAC,IAAI,EAAE,IAAI,CAAC,IAAI,iBAAiB;gBAC1C,IAAI,IAAI,KAAK,OAAO,EAAE;oBACpB,OAAO,CAAC,WAAW,GAAG,IAAI,CAAC,MAAM,CAAC;iBACnC;qBAAM,IAAI,IAAI,CAAC,MAAM,KAAK,IAAI;oBAAE,OAAO,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;;oBAC1D,OAAO,CAAC,YAAY,CAAC,IAAI,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;YAC/C,OAAO,CAAC,IAAI,CAAC,EAAE,GAAG,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE,GAAG,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE,CAAC,CAAC;SACrE;QAED,IAAI,KAAK,GAAG,KAAK,CAAC;QAElB,MAAM,kBAAkB,GAAgB,SAAS,CAAC,QAAS;aACxD,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;aAChD,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC,KAA0B,CAAC,CAAC,CAAC;QAC5D,IAAI,kBAAkB,CAAC,MAAM,EAAE;YAC7B,KAAK,MAAM,IAAI,IAAI,kBAAkB;gBACnC,IAAI,CAAC,IAAI,CAAC,IAAI;oBACZ,OAAO,CAAC,IAAI,CAAC;wBACX,GAAG,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,CAAC,MAAM,EAAE;qBACtC,CAAC,CAAC;qBACA,IAAI,CAAC,IAAI,CAAC,MAAM;oBACnB,OAAO,CAAC,IAAI,CAAC;wBACX,GAAG,EAAE;4BACH,MAAM;4BACN,OAAO,EAAE,IAAI,CAAC,IAAI;4BAClB,SAAS,EAAE,IAAI,CAAC,IAAI,CAAC,WAAW;yBACjC;qBACF,CAAC,CAAC;qBACA;oBACH,KAAK,GAAG,IAAI,CAAC;oBACb,MAAM,CAAC,aAAa,CAClB,cAAc,CACZ,WAAW,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,MAAM,EAAE;wBAClC,GAAG,OAAO;wBACV,KAAK,EAAE,SAAS;qBACjB,CAAC,CACH,CACF,CAAC;iBACH;SACJ;QAED,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,KAAK;YAAE,MAAM,CAAC,aAAa,CAAC,cAAc,EAAE,CAAC,CAAC;QAE3E,OAAO;YACL;gBACE,OAAO;gBACP,KAAK,EAAE,GAAG,CAAC,WAAW,EAAE;oBACtB,IAAI,EAAE,QAAQ,CAAC,IAAI,CAAC;oBACpB,MAAM,EAAE,QAAQ,CAAC,MAAM,CAAC;oBACxB,GAAG,EAAE,IAAI,CAAC,OAAO;iBAClB,CAAC;aACH;SACF,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,WAAW,CACzB,IAAa,EACb,MAAe,EACf,OAAsB;IAEtB,MAAM,SAAS,GAA6B,EAAE,CAAC;IAC/C,MAAM,OAAO,GAAG,IAAI,CAAC,WAAW,IAAI,EAAE,CAAC;IACvC,MAAM,SAAS,GAAG,MAAM,CAAC,WAAW,IAAI,EAAE,CAAC;IAE3C,IACE,IAAI,CAAC,iBAAiB,KAAK,CAAC;QAC5B,MAAM,CAAC,iBAAiB,KAAK,CAAC;QAC9B,SAAS,KAAK,OAAO;QAErB,SAAS,CAAC,IAAI,CAAC,CAAC,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,CAAC,CAAC;IAElE,MAAM,cAAc,GAAG,IAAI,GAAG,CAC5B,MAAM,CAAC,iBAAiB,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,iBAAiB,EAAE,CAAC,CAC5D,CAAC;IAEF,KAAK,MAAM,IAAI,IAAI,cAAc;QAC/B,IAAI,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;YACvD,SAAS,CAAC,IAAI,CAAC;gBACb,IAAI;gBACU;oBACZ,MAAM,EAAE,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC;oBACjC,IAAI,EAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;iBAC9B;aACF,CAAC,CAAC;IAEP,MAAM,UAAU,GAAoB,EAAE,CAAC;IACvC,MAAM,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAC9C,MAAM,aAAa,GAAG,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;IAElD,aAAa,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE;QAC7B,MAAM,SAAS,GAAG,WAAW,CAAC,SAAS,CAAC,QAAQ,CAAC,EAAE,CACjD,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAC,CACzB,CAAC;QACF,MAAM,IAAI,GAAG,SAAS,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;QAE5D,IAAI,IAAI;YAAE,WAAW,CAAC,MAAM,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC;QAC3C,IAAI,IAAI,IAAI,OAAO,CAAC,MAAM,EAAE,IAAI,CAAC;YAAE,OAAO;QAE1C,IAAI,CAAC,IAAI,IAAI,CAAC,OAAO,CAAC,MAAM,EAAE,IAAI,CAAC;YAAE,UAAU,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC;IACzE,CAAC,CAAC,CAAC;IAEH,WAAW,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;IAErE,OAAO;QACL;YACE,KAAK,EACH,OAAO,EAAE,KAAK;gBACd,GAAG,CAAC,oBAAoB,EAAE;oBACxB,IAAI,EAAE,QAAQ,CAAC,IAAI,CAAC;oBACpB,MAAM,EAAE,QAAQ,CAAC,MAAM,CAAC;oBACxB,GAAG,EAAE,IAAI,CAAC,OAAO;iBAClB,CAAC;YACJ,OAAO,EAAE;gBACP,KAAK,EAAE,GAAG,CAAC,aAAa,CAAC;gBACzB,IAAI,EAAE,YAAY;gBAClB,MAAM,EAAE,iBAAiB,CAAC,SAAS,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,CAAC;gBACvE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,IAAI,EAAE,MAAM,CAAC,IAAI,KAAK;aAC7C;YACD,OAAO,EAAE;gBACP,IAAI,CAAA;;cAEE,MAAM,CACN,SAAS,EACT,CAAC,CAAC,EAAE,CAAC,CAAC,EACN,CAAC,CAAC,IAAI,EAAE,IAAI,CAAC,EAAE,KAAK,EAAE,EAAE,CACtB,IAAI,CAAA;0BACM,KAAK;;;;;8BAKD,OAAO,EAAE,QAAQ,EAAE,CAAC,IAAI,CAAC,IAAI,KAAK;8BAClC,OAAO,EAAE,QAAQ,EAAE,CAAC,IAAI,CAAC,IAAI,KAAK;yEACS,IAAI,CAAC,IAAI;oBAC9D,CAAC,CAAC,IAAI,CAAC,MAAM;wBACX,CAAC,CAAC,WAAW;wBACb,CAAC,CAAC,OAAO;oBACX,CAAC,CAAC,SAAS;;0BAEL,IAAI;;uBAEP,IAAI,CAAC,IAAI,IAAI,EAAE;sBAChB,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAA,UAAU,CAAC,CAAC,CAAC,GAAG;sBAC/C,IAAI,CAAC,MAAM,IAAI,EAAE;;;uBAGhB,IAAI,CAAC,IAAI;oBACV,CAAC,CAAC,IAAI,CAAC,MAAM;wBACX,CAAC,CAAC,MAAM;wBACR,CAAC,CAAC,QAAQ;oBACZ,CAAC,CAAC,KAAK;;uCAEU,CAC1B;cACC,UAAU,CAAC,MAAM;oBACjB,CAAC,CAAC,IAAI,CAAA;uBACG,GAAG,CAAC,gBAAgB,CAAC;;4DAEgB;oBAC9C,CAAC,CAAC,EAAE;cACJ,MAAM,CACN,UAAU,EACV,CAAC,CAAC,EAAE,CAAC,CAAC,EACN,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CACd,IAAI,CAAA;0BACM,KAAK;;;;;8BAKD,OAAO,EAAE,QAAQ,EAAE,CAAC,IAAI,CAAC,IAAI,KAAK;8BAClC,OAAO,EAAE,QAAQ,EAAE,CAAC,IAAI,CAAC,IAAI,KAAK;yEACS,IAAI,CAAC,IAAI;oBAC9D,CAAC,CAAC,IAAI,CAAC,MAAM;wBACX,CAAC,CAAC,WAAW;wBACb,CAAC,CAAC,OAAO;oBACX,CAAC,CAAC,SAAS;;0BAEL,IAAI,CAAC,IAAI,EAAE,OAAO,IAAI,IAAI,CAAC,MAAM,EAAE,OAAO;;uBAE7C,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE;sBACrC,IAAI,CAAC,IAAI;oBACX,IAAI,CAAC,MAAM;oBACX,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC;oBACzC,CAAC,CAAC,IAAI,CAAA,UAAU;oBAChB,CAAC,CAAC,GAAG;sBACL,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE;;;uBAGvC,IAAI,CAAC,IAAI;oBACV,CAAC,CAAC,IAAI,CAAC,MAAM;wBACX,CAAC,CAAC,YAAY;wBACd,CAAC,CAAC,QAAQ;oBACZ,CAAC,CAAC,KAAK;;uCAEU,CAC1B;;SAEJ;aACF;SACF;KACF,CAAC;AACJ,CAAC","sourcesContent":["import { html } from 'lit-element';\nimport { repeat } from 'lit-html/directives/repeat';\nimport { get } from 'lit-translate';\n\nimport '@material/mwc-icon';\nimport '@material/mwc-list';\nimport '@material/mwc-list/mwc-check-list-item';\nimport '@material/mwc-list/mwc-list-item';\nimport { ListItem } from '@material/mwc-list/mwc-list-item';\n\nimport {\n  identity,\n  isEqual,\n  isSame,\n  newWizardEvent,\n  Wizard,\n  WizardActor,\n} from './foundation.js';\nimport { EditorAction, SimpleAction } from '@openscd/core/foundation/deprecated/editor.js';\ninterface MergeOptions {\n  title?: string;\n  selected?: (diff: Diff<Element | string>) => boolean;\n  disabled?: (diff: Diff<Element | string>) => boolean;\n  auto?: (sink: Element, source: Element) => boolean;\n}\n\nexport type Diff<T> =\n  | { ours: T; theirs: null }\n  | { ours: null; theirs: T }\n  | { ours: T; theirs: T };\n\nfunction describe(element: Element): string {\n  const id = identity(element);\n\n  return typeof id === 'string' ? id.replace(/^>/, '') : get('unidentifiable');\n}\n\nfunction mergeWizardAction(\n  attrDiffs: [string, Diff<string>][],\n  childDiffs: Diff<Element>[],\n  sink: Element,\n  source: Element,\n  options?: MergeOptions\n): WizardActor {\n  return (_, wizard: Element): EditorAction[] => {\n    const actions: SimpleAction[] = [];\n    const checkList = wizard.shadowRoot!.querySelector('mwc-list')!;\n\n    const selectedAttrDiffs = (<ListItem[]>checkList.selected)\n      .filter(item => item.classList.contains('attr'))\n      .map(item => attrDiffs[item.value as unknown as number]);\n\n    const newSink = <Element>sink.cloneNode(false);\n    const parent = selectedAttrDiffs.length ? newSink : sink;\n    if (selectedAttrDiffs.length) {\n      if (sink.childElementCount === 0) newSink.textContent = sink.textContent;\n      for (const [name, diff] of selectedAttrDiffs)\n        if (name === 'value') {\n          newSink.textContent = diff.theirs;\n        } else if (diff.theirs === null) newSink.removeAttribute(name);\n        else newSink.setAttribute(name, diff.theirs);\n      actions.push({ old: { element: sink }, new: { element: newSink } });\n    }\n\n    let acted = false;\n\n    const selectedChildDiffs = (<ListItem[]>checkList.selected)\n      .filter(item => item.classList.contains('child'))\n      .map(item => childDiffs[item.value as unknown as number]);\n    if (selectedChildDiffs.length) {\n      for (const diff of selectedChildDiffs)\n        if (!diff.ours)\n          actions.push({\n            new: { parent, element: diff.theirs },\n          });\n        else if (!diff.theirs)\n          actions.push({\n            old: {\n              parent,\n              element: diff.ours,\n              reference: diff.ours.nextSibling,\n            },\n          });\n        else {\n          acted = true;\n          wizard.dispatchEvent(\n            newWizardEvent(\n              mergeWizard(diff.ours, diff.theirs, {\n                ...options,\n                title: undefined,\n              })\n            )\n          );\n        }\n    }\n\n    if (actions.length === 0 && !acted) wizard.dispatchEvent(newWizardEvent());\n\n    return [\n      {\n        actions,\n        title: get('merge.log', {\n          sink: describe(sink),\n          source: describe(source),\n          tag: sink.tagName,\n        }),\n      },\n    ];\n  };\n}\n\nexport function mergeWizard(\n  sink: Element,\n  source: Element,\n  options?: MergeOptions\n): Wizard {\n  const attrDiffs: [string, Diff<string>][] = [];\n  const ourText = sink.textContent ?? '';\n  const theirText = source.textContent ?? '';\n\n  if (\n    sink.childElementCount === 0 &&\n    source.childElementCount === 0 &&\n    theirText !== ourText\n  )\n    attrDiffs.push(['value', { ours: ourText, theirs: theirText }]);\n\n  const attributeNames = new Set(\n    source.getAttributeNames().concat(sink.getAttributeNames())\n  );\n\n  for (const name of attributeNames)\n    if (source.getAttribute(name) !== sink.getAttribute(name))\n      attrDiffs.push([\n        name,\n        <Diff<string>>{\n          theirs: source.getAttribute(name),\n          ours: sink.getAttribute(name),\n        },\n      ]);\n\n  const childDiffs: Diff<Element>[] = [];\n  const ourChildren = Array.from(sink.children);\n  const theirChildren = Array.from(source.children);\n\n  theirChildren.forEach(theirs => {\n    const twinIndex = ourChildren.findIndex(ourChild =>\n      isSame(theirs, ourChild)\n    );\n    const ours = twinIndex > -1 ? ourChildren[twinIndex] : null;\n\n    if (ours) ourChildren.splice(twinIndex, 1);\n    if (ours && isEqual(theirs, ours)) return;\n\n    if (!ours || !isEqual(theirs, ours)) childDiffs.push({ theirs, ours });\n  });\n\n  ourChildren.forEach(ours => childDiffs.push({ theirs: null, ours }));\n\n  return [\n    {\n      title:\n        options?.title ??\n        get('merge.defaultTitle', {\n          sink: describe(sink),\n          source: describe(source),\n          tag: sink.tagName,\n        }),\n      primary: {\n        label: get('merge.title'),\n        icon: 'merge_type',\n        action: mergeWizardAction(attrDiffs, childDiffs, sink, source, options),\n        auto: options?.auto?.(sink, source) ?? false,\n      },\n      content: [\n        html`\n          <mwc-list multi>\n            ${repeat(\n              attrDiffs,\n              e => e,\n              ([name, diff], index) =>\n                html`<mwc-check-list-item\n                  value=${index}\n                  class=\"attr\"\n                  twoline\n                  left\n                  hasMeta\n                  .selected=${options?.selected?.(diff) ?? false}\n                  .disabled=${options?.disabled?.(diff) ?? false}\n                  style=\"--mdc-checkbox-checked-color: var(--mdc-theme-${diff.ours\n                    ? diff.theirs\n                      ? 'secondary'\n                      : 'error'\n                    : 'primary'});\"\n                >\n                  <span>${name}</span>\n                  <span slot=\"secondary\"\n                    >${diff.ours ?? ''}\n                    ${diff.ours && diff.theirs ? html`&cularr;` : ' '}\n                    ${diff.theirs ?? ''}</span\n                  >\n                  <mwc-icon slot=\"meta\"\n                    >${diff.ours\n                      ? diff.theirs\n                        ? 'edit'\n                        : 'delete'\n                      : 'add'}</mwc-icon\n                  >\n                </mwc-check-list-item>`\n            )}\n            ${childDiffs.length\n              ? html`<mwc-list-item noninteractive\n                    >${get('merge.children')}</mwc-list-item\n                  >\n                  <li padded divider role=\"separator\"></li>`\n              : ''}\n            ${repeat(\n              childDiffs,\n              e => e,\n              (diff, index) =>\n                html`<mwc-check-list-item\n                  value=${index}\n                  class=\"child\"\n                  twoline\n                  left\n                  hasMeta\n                  .selected=${options?.selected?.(diff) ?? false}\n                  .disabled=${options?.disabled?.(diff) ?? false}\n                  style=\"--mdc-checkbox-checked-color: var(--mdc-theme-${diff.ours\n                    ? diff.theirs\n                      ? 'secondary'\n                      : 'error'\n                    : 'primary'});\"\n                >\n                  <span>${diff.ours?.tagName ?? diff.theirs?.tagName}</span>\n                  <span slot=\"secondary\"\n                    >${diff.ours ? describe(diff.ours) : ''}\n                    ${diff.ours &&\n                    diff.theirs &&\n                    describe(diff.ours) + describe(diff.theirs)\n                      ? html`&cularr;`\n                      : ' '}\n                    ${diff.theirs ? describe(diff.theirs) : ''}</span\n                  >\n                  <mwc-icon slot=\"meta\"\n                    >${diff.ours\n                      ? diff.theirs\n                        ? 'merge_type'\n                        : 'delete'\n                      : 'add'}</mwc-icon\n                  >\n                </mwc-check-list-item>`\n            )}\n          </mwc-list>\n        `,\n      ],\n    },\n  ];\n}\n"]}

package/dist/oscd-filter-button.js

@@ -0,0 +1,89 @@
+import { __decorate } from "tslib";
+import { css, customElement, html, property, query, unsafeCSS, } from 'lit-element';
+import { get } from 'lit-translate';
+import '@material/mwc-icon-button';
+import '@material/mwc-dialog';
+import './filtered-list.js';
+import { FilteredList } from './filtered-list.js';
+/**
+ * A mwc-list with mwc-textfield that filters the list items for given or separated terms
+ */
+let FilterButton = class FilterButton extends FilteredList {
+    constructor() {
+        super(...arguments);
+        this.disabled = false;
+    }
+    toggleList() {
+        this.filterDialog.show();
+    }
+    onClosing() {
+        const selectedItems = [];
+        if (this.selected) {
+            if (this.selected instanceof Array) {
+                this.selected.forEach(item => selectedItems.push(item.value));
+            }
+            else {
+                selectedItems.push(this.selected.value);
+            }
+            this.dispatchEvent(newSelectedItemsChangedEvent(selectedItems));
+        }
+    }
+    render() {
+        return html `
+      <mwc-icon-button
+        icon="${this.icon}"
+        @click="${this.toggleList}"
+        ?disabled="${this.disabled}"
+      >
+        <slot name="icon"></slot>
+      </mwc-icon-button>
+      <mwc-dialog
+        id="filterDialog"
+        heading="${this.header ? this.header : get('filter')}"
+        scrimClickAction=""
+        @closing="${() => this.onClosing()}"
+      >
+        ${super.render()}
+        <mwc-button slot="primaryAction" dialogAction="close">
+          ${get('close')}
+        </mwc-button>
+      </mwc-dialog>
+    `;
+    }
+};
+FilterButton.styles = css `
+    ${unsafeCSS(FilteredList.styles)}
+
+    mwc-icon-button {
+      color: var(--mdc-theme-on-surface);
+    }
+
+    mwc-dialog {
+      --mdc-dialog-max-height: calc(100vh - 150px);
+    }
+  `;
+__decorate([
+    property()
+], FilterButton.prototype, "header", void 0);
+__decorate([
+    property()
+], FilterButton.prototype, "icon", void 0);
+__decorate([
+    property({ type: Boolean })
+], FilterButton.prototype, "disabled", void 0);
+__decorate([
+    query('#filterDialog')
+], FilterButton.prototype, "filterDialog", void 0);
+FilterButton = __decorate([
+    customElement('oscd-filter-button')
+], FilterButton);
+export { FilterButton };
+function newSelectedItemsChangedEvent(selectedItems, eventInitDict) {
+    return new CustomEvent('selected-items-changed', {
+        bubbles: true,
+        composed: true,
+        ...eventInitDict,
+        detail: { selectedItems, ...eventInitDict?.detail },
+    });
+}
+//# sourceMappingURL=oscd-filter-button.js.map

package/dist/oscd-filter-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"oscd-filter-button.js","sourceRoot":"","sources":["../src/oscd-filter-button.ts"],"names":[],"mappings":";AAAA,OAAO,EACL,GAAG,EACH,aAAa,EACb,IAAI,EACJ,QAAQ,EACR,KAAK,EAEL,SAAS,GACV,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AAEpC,OAAO,2BAA2B,CAAC;AACnC,OAAO,sBAAsB,CAAC;AAE9B,OAAO,oBAAoB,CAAC;AAE5B,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAGlD;;GAEG;AAEI,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,YAAY;IAAvC;;QAML,aAAQ,GAAG,KAAK,CAAC;IAuDnB,CAAC;IAlDS,UAAU;QAChB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;IAC3B,CAAC;IAEO,SAAS;QACf,MAAM,aAAa,GAAa,EAAE,CAAC;QACnC,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,IAAI,IAAI,CAAC,QAAQ,YAAY,KAAK,EAAE;gBAClC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;aAC/D;iBAAM;gBACL,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;aACzC;YACD,IAAI,CAAC,aAAa,CAAC,4BAA4B,CAAC,aAAa,CAAC,CAAC,CAAC;SACjE;IACH,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;gBAEC,IAAI,CAAC,IAAI;kBACP,IAAI,CAAC,UAAU;qBACZ,IAAI,CAAC,QAAQ;;;;;;mBAMf,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,QAAQ,CAAC;;oBAExC,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE;;UAEhC,KAAK,CAAC,MAAM,EAAE;;YAEZ,GAAG,CAAC,OAAO,CAAC;;;KAGnB,CAAC;IACJ,CAAC;;AAEM,mBAAM,GAAG,GAAG,CAAA;MACf,SAAS,CAAC,YAAY,CAAC,MAAM,CAAC;;;;;;;;;GASjC,CAAC;AA1DF;IADC,QAAQ,EAAE;4CACsB;AAEjC;IADC,QAAQ,EAAE;0CACG;AAEd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;8CACX;AAGjB;IADC,KAAK,CAAC,eAAe,CAAC;kDACO;AATnB,YAAY;IADxB,aAAa,CAAC,oBAAoB,CAAC;GACvB,YAAY,CA6DxB;SA7DY,YAAY;AAmEzB,SAAS,4BAA4B,CACnC,aAAuB,EACvB,aAA2D;IAE3D,OAAO,IAAI,WAAW,CAA6B,wBAAwB,EAAE;QAC3E,OAAO,EAAE,IAAI;QACb,QAAQ,EAAE,IAAI;QACd,GAAG,aAAa;QAChB,MAAM,EAAE,EAAE,aAAa,EAAE,GAAG,aAAa,EAAE,MAAM,EAAE;KACpD,CAAC,CAAC;AACL,CAAC","sourcesContent":["import {\n  css,\n  customElement,\n  html,\n  property,\n  query,\n  TemplateResult,\n  unsafeCSS,\n} from 'lit-element';\nimport { get } from 'lit-translate';\n\nimport '@material/mwc-icon-button';\nimport '@material/mwc-dialog';\n\nimport './filtered-list.js';\n\nimport { FilteredList } from './filtered-list.js';\nimport { Dialog } from '@material/mwc-dialog';\n\n/**\n * A mwc-list with mwc-textfield that filters the list items for given or separated terms\n */\n@customElement('oscd-filter-button')\nexport class FilterButton extends FilteredList {\n  @property()\n  header!: TemplateResult | string;\n  @property()\n  icon!: string;\n  @property({ type: Boolean })\n  disabled = false;\n\n  @query('#filterDialog')\n  private filterDialog!: Dialog;\n\n  private toggleList(): void {\n    this.filterDialog.show();\n  }\n\n  private onClosing(): void {\n    const selectedItems: string[] = [];\n    if (this.selected) {\n      if (this.selected instanceof Array) {\n        this.selected.forEach(item => selectedItems.push(item.value));\n      } else {\n        selectedItems.push(this.selected.value);\n      }\n      this.dispatchEvent(newSelectedItemsChangedEvent(selectedItems));\n    }\n  }\n\n  render(): TemplateResult {\n    return html`\n      <mwc-icon-button\n        icon=\"${this.icon}\"\n        @click=\"${this.toggleList}\"\n        ?disabled=\"${this.disabled}\"\n      >\n        <slot name=\"icon\"></slot>\n      </mwc-icon-button>\n      <mwc-dialog\n        id=\"filterDialog\"\n        heading=\"${this.header ? this.header : get('filter')}\"\n        scrimClickAction=\"\"\n        @closing=\"${() => this.onClosing()}\"\n      >\n        ${super.render()}\n        <mwc-button slot=\"primaryAction\" dialogAction=\"close\">\n          ${get('close')}\n        </mwc-button>\n      </mwc-dialog>\n    `;\n  }\n\n  static styles = css`\n    ${unsafeCSS(FilteredList.styles)}\n\n    mwc-icon-button {\n      color: var(--mdc-theme-on-surface);\n    }\n\n    mwc-dialog {\n      --mdc-dialog-max-height: calc(100vh - 150px);\n    }\n  `;\n}\n\nexport interface SelectedItemsChangedDetail {\n  selectedItems: string[];\n}\nexport type SelectedItemsChangedEvent = CustomEvent<SelectedItemsChangedDetail>;\nfunction newSelectedItemsChangedEvent(\n  selectedItems: string[],\n  eventInitDict?: CustomEventInit<SelectedItemsChangedDetail>\n): SelectedItemsChangedEvent {\n  return new CustomEvent<SelectedItemsChangedDetail>('selected-items-changed', {\n    bubbles: true,\n    composed: true,\n    ...eventInitDict,\n    detail: { selectedItems, ...eventInitDict?.detail },\n  });\n}\n\ndeclare global {\n  interface ElementEventMap {\n    ['selected-items-changed']: SelectedItemsChangedEvent;\n  }\n}\n"]}