@boligmappa/web-component-search
Version:
Web component for interacting with the Boligmappa APIs
134 lines • 4.48 kB
JavaScript
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 { buttonStyles, tableStyles } from "../../helpers/css-modules/styles";
import arrowIcon from "../../assets/icons/arrow_forward.svg";
import "../loading-animation";
export class StreetsTable extends LitElement {
constructor() {
super();
this.streetsData = [];
this.isLoadingMoreData = false;
}
static get styles() {
return [
buttonStyles,
tableStyles,
css `
tr:hover {
cursor: pointer;
}
.arrow-icon {
height: 20px;
display: inline-block;
position: absolute;
right: 0;
top: 50%;
transform: translate(-50%, -50%);
}
`,
];
}
firstUpdated() {
var _a;
this.tableBody = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById("streetsTableBody");
}
onStreetClicked(street) {
const options = {
detail: { street: street },
bubbles: true,
composed: true,
};
this.dispatchEvent(new CustomEvent("street-clicked", options));
}
loadMoreStreets() {
const options = {
bubbles: true,
composed: true,
};
this.dispatchEvent(new CustomEvent("load-more-streets", options));
}
backButtonClicked() {
const options = {
bubbles: true,
composed: true,
};
this.dispatchEvent(new CustomEvent("back-clicked", options));
}
loadMoreStreetsIfScrolledToBottom() {
if (!this.tableBody) {
return;
}
if (this.tableBody.scrollHeight - Math.ceil(this.tableBody.scrollTop) ===
this.tableBody.clientHeight) {
this.loadMoreStreets();
}
}
render() {
if (this.streetsData) {
return html `
<table class="results-table">
<tbody
id="streetsTableBody"
@scroll=${() => this.loadMoreStreetsIfScrolledToBottom()}
}}
>
${this.streetsData.map((street) => html `<tr
@click=${() => this.onStreetClicked(street)}
>
<td>
<div class="tablecell-container">
<div class="results-text">
${street.streetName}
<br />
<span class="postal-text"
>${street.postalCode + " " + street.postalPlace}</span
>
</div>
<img src=${arrowIcon} class="arrow-icon" />
</div>
</td>
</tr>`)}
${this.isLoadingMoreData
? html ` <tr>
<td>
<loading-animation></loading-animation>
</td>
</tr>`
: html ``}
</tbody>
<tfoot>
<tr>
<td>
<div class="button-container">
<button class="back-button" @click=${this.backButtonClicked}>
Tilbake
</button>
</div>
</td>
</tr>
</tfoot>
</table>
`;
}
else
return html ``;
}
}
__decorate([
property()
], StreetsTable.prototype, "isLoadingMoreData", void 0);
__decorate([
property({
hasChanged(newVal, oldVal) {
return JSON.stringify(newVal) !== JSON.stringify(oldVal);
},
})
], StreetsTable.prototype, "streetsData", void 0);
customElements.define("streets-table", StreetsTable);
//# sourceMappingURL=streets-table.js.map