import { Component, Event, h, Host, Prop, State, Watch } from '@stencil/core';
export class DamgaProxyGraph {
  constructor() {
    this.isDialogShown = false;
  }
  watchHandler(newValue) {
    this.internalValue = newValue;
  }
  render() {
    var _a, _b;
    const { domains, isDialogShown, isPending, value } = this;
    return (h(Host, { class: "d-inline" },
      h("dvn-button", { view: "outline", onClick: () => this.isDialogShown = true, progressing: isPending }, (value === null || value === void 0 ? void 0 : value.length) === 1 ? value[0] : `${value === null || value === void 0 ? void 0 : value.length} / ${domains === null || domains === void 0 ? void 0 : domains.length} domains`),
      h("dvn-dialog", { shown: isDialogShown, onDismiss: () => this.isDialogShown = false },
        h("dvn-table", { leaned: true },
          h("dvn-table-header", null,
            h("dvn-table-header-cell", null,
              h("dvn-checkbox", { checked: ((_a = this.internalValue) === null || _a === void 0 ? void 0 : _a.length) === ((_b = this.domains) === null || _b === void 0 ? void 0 : _b.length), onChange: (e) => {
                  e.stopImmediatePropagation();
                  if (e.detail) {
                    this.internalValue = [...this.domains];
                  }
                  else {
                    this.internalValue = [];
                  }
                }, label: "All" }))),
          h("dvn-table-body", null, domains.map((domain) => (h("dvn-table-row", { key: domain },
            h("dvn-checkbox", { checked: this.internalValue.includes(domain), onChange: (e) => {
                e.stopImmediatePropagation();
                if (e.detail) {
                  this.internalValue = [...this.internalValue, domain];
                }
                else {
                  this.internalValue = this.internalValue.filter(d => d !== domain);
                }
              }, label: domain })))))),
        h("dvn-card-footer", { slot: "actions" },
          h("dvn-button", { view: "flat" }, "Cancel"),
          h("dvn-button", { tint: "primary", onClick: () => {
              this.change.emit(this.internalValue);
              this.isDialogShown = false;
            } }, "Apply")))));
  }
  static get is() { return "damga-proxy-graph-domain-filter"; }
  static get originalStyleUrls() { return {
    "$": ["damga-proxy-graph-domain-filter.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["damga-proxy-graph-domain-filter.css"]
  }; }
  static get properties() { return {
    "value": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "string[]",
        "resolved": "string[]",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      }
    },
    "domains": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "string[]",
        "resolved": "string[]",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      }
    },
    "isPending": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "is-pending",
      "reflect": false
    }
  }; }
  static get states() { return {
    "isDialogShown": {},
    "internalValue": {}
  }; }
  static get events() { return [{
      "method": "change",
      "name": "change",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      }
    }]; }
  static get watchers() { return [{
      "propName": "value",
      "methodName": "watchHandler"
    }]; }
}
