@boligmappa/web-component-search/lib/results-table/tables/overview-table.js

Web component for interacting with the Boligmappa APIs

var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { LitElement, html, css } from "lit";
import { property } from "lit/decorators.js";
import { tableStyles } from "../../helpers/css-modules/styles";
import SearchType from "../../helpers/enums/search-type";
import arrowIcon from "../../assets/icons/arrow_forward.svg";
export class OverviewTable extends LitElement {
    constructor() {
        super();
        this.overviewData = {};
        this.streetPageSize = -1;
    }
    static get styles() {
        return [
            tableStyles,
            css `
        tr:hover {
          cursor: pointer;
        }
        .arrow-icon {
          height: 20px;
          display: inline-block;
          position: absolute;
          right: 0;
          top: 50%;
          transform: translate(-50%, -50%);
        }
      `,
        ];
    }
    streetsInStreetList() {
        if (this.overviewData.streetListData === undefined ||
            this.overviewData.streetListData.length === 0) {
            return false;
        }
        return true;
    }
    projectsInProjectList() {
        if (this.overviewData.projectListData === undefined ||
            this.overviewData.projectListData.length === 0) {
            return false;
        }
        return true;
    }
    cadastresInCadastreList() {
        if (this.overviewData.cadastreListData === undefined ||
            this.overviewData.cadastreListData.length === 0) {
            return false;
        }
        return true;
    }
    rowClicked(searchType) {
        const options = {
            detail: { searchType },
            bubbles: true,
            composed: true,
        };
        this.dispatchEvent(new CustomEvent("overview-clicked", options));
    }
    render() {
        var _a, _b, _c, _d, _e, _f, _g;
        return html `
      <table class="results-table">
        <tbody>
          <tr
            @click=${() => this.rowClicked(SearchType.Streets)}
            class=${this.streetsInStreetList() ? "" : "disabled"}
          >
            <td>
              <div class="tablecell-container">
                <div class="results-text">
                  <span class="number"
                    >${this.streetsInStreetList()
            ? ((_a = this.overviewData.streetListData) === null || _a === void 0 ? void 0 : _a.length) +
                (((_b = this.overviewData.streetListData) === null || _b === void 0 ? void 0 : _b.length) ===
                    this.streetPageSize
                    ? "+"
                    : "")
            : "0"}</span
                  >
                  ${(_c = this.languageObject) === null || _c === void 0 ? void 0 : _c.overview.streets}
                </div>
                <img src=${arrowIcon} class="arrow-icon" />
              </div>
            </td>
          </tr>
          <tr
            @click=${() => this.rowClicked(SearchType.Cadastres)}
            class=${this.cadastresInCadastreList() ? "" : "disabled"}
          >
            <td>
              <div class="tablecell-container">
                <div class="results-text">
                  <span class="number"
                    >${this.cadastresInCadastreList()
            ? (_d = this.overviewData.cadastreListData) === null || _d === void 0 ? void 0 : _d.length
            : "0"}</span
                  >
                  ${(_e = this.languageObject) === null || _e === void 0 ? void 0 : _e.overview.cadastres}
                </div>
                <img src=${arrowIcon} class="arrow-icon" />
              </div>
            </td>
          </tr>
          <tr
            @click=${() => this.rowClicked(SearchType.Projects)}
            class=${this.projectsInProjectList() ? "" : "disabled"}
          >
            <td>
              <div class="tablecell-container">
                <div class="results-text">
                  <span class="number"
                    >${this.projectsInProjectList()
            ? (_f = this.overviewData.projectListData) === null || _f === void 0 ? void 0 : _f.length
            : "0"}</span
                  >
                  ${(_g = this.languageObject) === null || _g === void 0 ? void 0 : _g.overview.projects}
                </div>
                <img src=${arrowIcon} class="arrow-icon" />
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    `;
    }
}
__decorate([
    property({
        hasChanged(newVal, oldVal) {
            return JSON.stringify(newVal) !== JSON.stringify(oldVal);
        },
    })
], OverviewTable.prototype, "overviewData", void 0);
__decorate([
    property()
], OverviewTable.prototype, "streetPageSize", void 0);
__decorate([
    property()
], OverviewTable.prototype, "languageObject", void 0);
customElements.define("overview-table", OverviewTable);
//# sourceMappingURL=overview-table.js.map