UNPKG

@boligmappa/web-component-search

Version:

Web component for interacting with the Boligmappa APIs

1,195 lines (1,139 loc) 1.37 MB
/******/ (() => { // webpackBootstrap /******/ var __webpack_modules__ = ({ /***/ "./src/BoligmappaSearch.ts": /*!*********************************!*\ !*** ./src/BoligmappaSearch.ts ***! \*********************************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; __webpack_require__.r(__webpack_exports__); /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ "BoligmappaSearch": () => (/* binding */ BoligmappaSearch) /* harmony export */ }); /* harmony import */ var lit__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! lit */ "./node_modules/lit/index.js"); /* harmony import */ var lit_decorators_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! lit/decorators.js */ "./node_modules/lit/decorators.js"); /* harmony import */ var _results_table_results_table__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./results-table/results-table */ "./src/results-table/results-table.ts"); /* harmony import */ var _results_table_tables_loading_table__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./results-table/tables/loading-table */ "./src/results-table/tables/loading-table.ts"); /* harmony import */ var _helpers_enums_search_type__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./helpers/enums/search-type */ "./src/helpers/enums/search-type.ts"); /* harmony import */ var _assets_icons_loupe_svg__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./assets/icons/loupe.svg */ "./src/assets/icons/loupe.svg"); /* harmony import */ var _assets_icons_remove_button_svg__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./assets/icons/remove-button.svg */ "./src/assets/icons/remove-button.svg"); /* harmony import */ var _requests_tokenRequests__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./requests/tokenRequests */ "./src/requests/tokenRequests.ts"); /* harmony import */ var _requests_searchRequests__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./requests/searchRequests */ "./src/requests/searchRequests.ts"); /* harmony import */ var _helpers_css_modules_colors__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./helpers/css-modules/colors */ "./src/helpers/css-modules/colors.ts"); /* harmony import */ var _helpers_enums_table_type__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./helpers/enums/table-type */ "./src/helpers/enums/table-type.ts"); /* harmony import */ var _helpers_languages_language_loader__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./helpers/languages/language-loader */ "./src/helpers/languages/language-loader.ts"); /* harmony import */ var _helpers_functions_isObjectEmpty__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./helpers/functions/isObjectEmpty */ "./src/helpers/functions/isObjectEmpty.ts"); /* harmony import */ var _adobe_lit_mobx__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! @adobe/lit-mobx */ "./node_modules/@adobe/lit-mobx/lit-mobx.js"); var __decorate = (undefined && undefined.__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; }; // const loupeIcon = require("../assets/icons/loupe.svg") as string; class BoligmappaSearch extends _adobe_lit_mobx__WEBPACK_IMPORTED_MODULE_13__.MobxLitElement { constructor() { super(); this.isLoading = false; this.isLoadingMoreData = false; this.searchText = "test"; this.tableData = { tableType: _helpers_enums_table_type__WEBPACK_IMPORTED_MODULE_10__["default"].None }; this.development = false; // @property() developmentStorage = false; this.textField = ""; this.config = {}; this.clickedItems = {}; this.previousSearchFailed = false; this.apiUrl = "https://proff-api.boligmappa.no/v1"; this.addressPageSize = 5000; this.propertyCursor = ""; this.backCounter = 1; this.initalSearchTextset = false; this.latestSearchText = ""; this.debounce = (callback, waitFor) => { let timeout; return (...args) => { let result; timeout && clearTimeout(timeout); timeout = setTimeout(() => { result = callback(...args); }, waitFor); return result; }; }; this.debounceFunction = this.debounce(async () => { const lastClickedTableType = this.getLastClickedTableType(); this.isLoading = true || 0; // using this.searchText to aviod loading animation when text is empty switch (lastClickedTableType) { case _helpers_enums_table_type__WEBPACK_IMPORTED_MODULE_10__["default"].Overview: if (this.tableData.searchType === _helpers_enums_search_type__WEBPACK_IMPORTED_MODULE_4__["default"].Streets) { await this.searchStreets(1); } if (this.tableData.searchType === _helpers_enums_search_type__WEBPACK_IMPORTED_MODULE_4__["default"].Projects) { await this.searchProjects(1); } break; case _helpers_enums_table_type__WEBPACK_IMPORTED_MODULE_10__["default"].Streets: await this.searchAdresses(1); break; case _helpers_enums_table_type__WEBPACK_IMPORTED_MODULE_10__["default"].Addresses: await this.searchBuildings(1); break; case _helpers_enums_table_type__WEBPACK_IMPORTED_MODULE_10__["default"].Buildings: await this.searchProperties(); break; default: await this.initalSearch(); } this.isLoading = false; }, 200).bind(this); } firstUpdated() { // if (!this.development) { // this.developmentStorage = false; // } if (this.development) { this.apiUrl = "https://staging-proff-api.boligmappa.no/v1"; } } updated(changedProperties) { var _a, _b; if (changedProperties.has("config")) { if (!(0,_helpers_functions_isObjectEmpty__WEBPACK_IMPORTED_MODULE_12__.isObjectEmpty)(this.config)) { this.configureSettingsFromConfiurationInput(); if (!this.config.integrationPartnerSetsAccessToken) { this.getAndSetAccessToken(); } } } if (Boolean(this.textField) && !this.initalSearchTextset) { console.log(`text: ${this.textField}`); const searchField = (_b = (_a = document .querySelector("boligmappa-search")) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.getElementById("searchText"); if (searchField) { searchField.value = this.textField; this.searchText = this.textField; this.initalSearchTextset = true; this.debounceFunction(); } } } configureSettingsFromConfiurationInput() { this.setupDefaultPageSizesIfNoneIsProvided(); this.setupLanguageObject(); } setupLanguageObject() { if (!this.config.language) { this.config.language = "NOR"; } this.languageObject = (0,_helpers_languages_language_loader__WEBPACK_IMPORTED_MODULE_11__.getLanguageObject)(this.config.language); } setupDefaultPageSizesIfNoneIsProvided() { const defaultPageSizes = { streets: 100, projects: 10, buildings: 10, }; this.config.pageSizes = Object.assign(Object.assign({}, defaultPageSizes), this.config.pageSizes); } async handleOnSearchEvent(e) { const input = e.target; this.searchText = input.value; this.searchIfSearchTextIsNotEmpty(); } searchIfSearchTextIsNotEmpty() { if (this.searchText === "") { this.clickedItems = {}; this.tableData = this.generateNewTableDataObject({ tableType: _helpers_enums_table_type__WEBPACK_IMPORTED_MODULE_10__["default"].None, }); } else { this.checkIfSelectedAddressIsStillInSearchText(); this.debounceFunction(); } } checkIfSelectedAddressIsStillInSearchText() { var _a; if (this.tableData.selectedStreet === undefined) { return; } const streetName = (_a = this.tableData.selectedStreet) === null || _a === void 0 ? void 0 : _a.streetName.toUpperCase(); const searchTextWords = this.searchText.split(" "); if (!searchTextWords.some((word) => streetName.startsWith(word.toUpperCase()))) { this.clickedItems = {}; } } removeText() { var _a, _b; this.clickedItems = {}; const searchField = (_b = (_a = document .querySelector("boligmappa-search")) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.getElementById("searchText"); searchField.value = ""; this.tableData = this.generateNewTableDataObject({ tableType: _helpers_enums_table_type__WEBPACK_IMPORTED_MODULE_10__["default"].None, }); } handleSearchError(error, func, paginator) { if (error.name === "InvalidTokenError" && !this.previousSearchFailed) { this.previousSearchFailed = true; this.waitingFunction = [func, paginator]; if (this.config.integrationPartnerSetsAccessToken) { this.dispatchTokenExpiredEvent(); } else { this.getNewTokenThenCallInterruptedSearch(); } } else { console.log(error); } } getLastClickedTableType() { if (this.clickedItems.clickedBuilding) { return _helpers_enums_table_type__WEBPACK_IMPORTED_MODULE_10__["default"].Buildings; } if (this.clickedItems.clickedAddress) { return _helpers_enums_table_type__WEBPACK_IMPORTED_MODULE_10__["default"].Addresses; } if (this.clickedItems.clickedStreet) { return _helpers_enums_table_type__WEBPACK_IMPORTED_MODULE_10__["default"].Streets; } if (this.clickedItems.clickedOverview) { return _helpers_enums_table_type__WEBPACK_IMPORTED_MODULE_10__["default"].Overview; } return null; } async initalSearch() { if (!this.config.access_token) { return; } this.latestSearchText = this.searchText; const usedSearchText = this.searchText; const [streets, projects] = await Promise.all([ (0,_requests_searchRequests__WEBPACK_IMPORTED_MODULE_8__.getStreets)(this.searchText, this.config.pageSizes.streets, 1, this.config.access_token, this.apiUrl).catch((error) => this.handleSearchError(error, this.initalSearch, undefined)), (0,_requests_searchRequests__WEBPACK_IMPORTED_MODULE_8__.getProjects)(1, this.config.pageSizes.projects, this.searchText, this.apiUrl, this.config.access_token).catch((error) => this.handleSearchError(error, this.initalSearch, undefined)), ]); if (usedSearchText !== this.latestSearchText) { return; } if (!streets || !projects) { console.log("Initial search failed"); return; } this.previousSearchFailed = false; let tableType = _helpers_enums_table_type__WEBPACK_IMPORTED_MODULE_10__["default"].Overview; let searchType; if (streets.length && !projects.length) { tableType = _helpers_enums_table_type__WEBPACK_IMPORTED_MODULE_10__["default"].Streets; searchType = _helpers_enums_search_type__WEBPACK_IMPORTED_MODULE_4__["default"].Streets; } if (!streets.length && projects.length) { tableType = _helpers_enums_table_type__WEBPACK_IMPORTED_MODULE_10__["default"].Projects; searchType = _helpers_enums_search_type__WEBPACK_IMPORTED_MODULE_4__["default"].Projects; } this.tableData = this.generateNewTableDataObject({ tableType: tableType, searchType: searchType, projectListData: projects, streetListData: streets, }); } async searchProjects(page) { var _a; if (!this.config.access_token) { return; } this.latestSearchText = this.searchText; const usedSearchText = this.searchText; const projects = await (0,_requests_searchRequests__WEBPACK_IMPORTED_MODULE_8__.getProjects)(page, this.config.pageSizes.projects, this.searchText, this.apiUrl, this.config.access_token).catch((error) => this.handleSearchError(error, this.searchProjects, page)); if (usedSearchText !== this.latestSearchText) { return; } if (projects) { this.previousSearchFailed = false; if (page === 1) { this.tableData = this.generateNewTableDataObject({ tableType: _helpers_enums_table_type__WEBPACK_IMPORTED_MODULE_10__["default"].Projects, searchType: _helpers_enums_search_type__WEBPACK_IMPORTED_MODULE_4__["default"].Projects, projectListData: projects, }); } else { const concatedProjectListData = (_a = this.tableData.projectListData) === null || _a === void 0 ? void 0 : _a.concat(projects); this.tableData = this.generateNewTableDataObject({ tableType: _helpers_enums_table_type__WEBPACK_IMPORTED_MODULE_10__["default"].Projects, projectListData: concatedProjectListData, }); } } } async searchStreets(page) { var _a; if (!this.config.access_token) { return; } this.latestSearchText = this.searchText; const usedSearchText = this.searchText; const streets = await (0,_requests_searchRequests__WEBPACK_IMPORTED_MODULE_8__.getStreets)(this.searchText, this.config.pageSizes.streets, page, this.config.access_token, this.apiUrl).catch((error) => this.handleSearchError(error, this.searchStreets, page)); if (usedSearchText !== this.latestSearchText) { return; } if (streets) { this.previousSearchFailed = false; const tableType = this.clickedItems.clickedOverview && this.tableData.searchType === _helpers_enums_search_type__WEBPACK_IMPORTED_MODULE_4__["default"].Streets ? _helpers_enums_table_type__WEBPACK_IMPORTED_MODULE_10__["default"].Streets : _helpers_enums_table_type__WEBPACK_IMPORTED_MODULE_10__["default"].Overview; if (page === 1) { this.tableData = this.generateNewTableDataObject({ tableType: streets.length === 1 ? undefined : tableType, streetListData: streets, }); if (streets.length == 1) { this.tableData = this.generateNewTableDataObject({ selectedStreet: streets[0], }); this.searchAdresses(1); this.backCounter++; } } else { const concatedStreetListData = (_a = this.tableData.streetListData) === null || _a === void 0 ? void 0 : _a.concat(streets); this.tableData = this.generateNewTableDataObject({ tableType: _helpers_enums_table_type__WEBPACK_IMPORTED_MODULE_10__["default"].Streets, streetListData: concatedStreetListData, }); } } } async searchAdresses(page) { var _a; if (!this.config.access_token || !this.tableData.selectedStreet) { return; } this.latestSearchText = this.searchText; const usedSearchText = this.searchText; const addresses = await (0,_requests_searchRequests__WEBPACK_IMPORTED_MODULE_8__.getAddresses)(this.addressPageSize, page, this.config.access_token, this.apiUrl, this.tableData.selectedStreet.id).catch((error) => this.handleSearchError(error, this.searchAdresses, page)); if (usedSearchText !== this.latestSearchText) { return; } if (addresses) { this.previousSearchFailed = false; if (page === 1) { this.tableData = this.generateNewTableDataObject({ tableType: _helpers_enums_table_type__WEBPACK_IMPORTED_MODULE_10__["default"].Addresses, addressListData: addresses, }); } else { const concatedAddressListData = (_a = this.tableData.addressListData) === null || _a === void 0 ? void 0 : _a.concat(addresses); this.tableData = this.generateNewTableDataObject({ addressListData: concatedAddressListData, }); } } } async searchBuildings(page) { var _a, _b; if (!this.config.access_token || !this.tableData.selectedAddress) { return; } this.latestSearchText = this.searchText; const usedSearchText = this.searchText; const buildings = await (0,_requests_searchRequests__WEBPACK_IMPORTED_MODULE_8__.getBuildings)(this.config.pageSizes.buildings, page, this.config.access_token, this.apiUrl, (_a = this.tableData.selectedAddress) === null || _a === void 0 ? void 0 : _a.id).catch((error) => this.handleSearchError(error, this.searchBuildings, page)); if (usedSearchText !== this.latestSearchText) { return; } if (buildings) { this.previousSearchFailed = false; if (page === 1) { this.tableData = this.generateNewTableDataObject({ tableType: buildings.length === 1 ? undefined : _helpers_enums_table_type__WEBPACK_IMPORTED_MODULE_10__["default"].Buildings, selectedBuilding: buildings.length === 1 ? buildings[0] : undefined, buildingListData: buildings, }); if (buildings.length == 1) { await this.searchProperties(); this.backCounter++; } } else { const concatedBuildingListData = (_b = this.tableData.buildingListData) === null || _b === void 0 ? void 0 : _b.concat(buildings); this.tableData = this.generateNewTableDataObject({ buildingListData: concatedBuildingListData, }); } } } async searchProperties(cursor) { var _a, _b; if (!this.config.access_token || !this.tableData.selectedAddress) { return; } this.latestSearchText = this.searchText; const usedSearchText = this.searchText; let cursorParameterString = ""; if (cursor) { cursorParameterString = `&cursor=${cursor}`; } const data = await (0,_requests_searchRequests__WEBPACK_IMPORTED_MODULE_8__.getProperties)(cursorParameterString, this.config.access_token, this.apiUrl, (_a = this.tableData.selectedAddress) === null || _a === void 0 ? void 0 : _a.id).catch((error) => this.handleSearchError(error, this.searchBuildings, cursor)); if (usedSearchText !== this.latestSearchText) { return; } if (data) { this.previousSearchFailed = false; this.propertyCursor = data.meta.cursor.next; if (data.meta.cursor.prev === "") { this.tableData = this.generateNewTableDataObject({ tableType: _helpers_enums_table_type__WEBPACK_IMPORTED_MODULE_10__["default"].Properties, propertyListData: data.response, }); } else { const concatedPropertyListData = (_b = this.tableData.propertyListData) === null || _b === void 0 ? void 0 : _b.concat(data.response); this.tableData = this.generateNewTableDataObject({ tableType: _helpers_enums_table_type__WEBPACK_IMPORTED_MODULE_10__["default"].Properties, propertyListData: concatedPropertyListData, }); } } } _overviewListener(e) { this.backCounter = 1; switch (e.detail.searchType) { case _helpers_enums_search_type__WEBPACK_IMPORTED_MODULE_4__["default"].Streets: this.tableData = this.generateNewTableDataObject({ tableType: _helpers_enums_table_type__WEBPACK_IMPORTED_MODULE_10__["default"].Streets, searchType: _helpers_enums_search_type__WEBPACK_IMPORTED_MODULE_4__["default"].Streets, }); break; case _helpers_enums_search_type__WEBPACK_IMPORTED_MODULE_4__["default"].Projects: this.tableData = this.generateNewTableDataObject({ tableType: _helpers_enums_table_type__WEBPACK_IMPORTED_MODULE_10__["default"].Projects, searchType: _helpers_enums_search_type__WEBPACK_IMPORTED_MODULE_4__["default"].Projects, }); this.clickedItems.clickedOverview = true; } } _streetListener(e) { this.backCounter = 1; this.tableData = this.generateNewTableDataObject({ selectedStreet: e.detail.street, }); this.isLoading = true; this.searchAdresses(1).finally(() => (this.isLoading = false)); this.clickedItems.clickedStreet = true; } _streetLoadListener() { var _a; if (!this.tableData.streetListData) { this.isLoadingMoreData = false; return; } const streetPagesLoaded = (_a = this.tableData.streetListData) === null || _a === void 0 ? void 0 : _a.length; if (!(streetPagesLoaded % this.config.pageSizes.streets === 0)) { this.isLoadingMoreData = false; return; } const page = streetPagesLoaded / this.config.pageSizes.streets; this.isLoadingMoreData = true; this.searchStreets(page + 1).finally(() => (this.isLoadingMoreData = false)); } _addressListener(e) { this.backCounter = 1; const address = e.detail.address; this.tableData = this.generateNewTableDataObject({ tableType: _helpers_enums_table_type__WEBPACK_IMPORTED_MODULE_10__["default"].Addresses, selectedAddress: address, }); this.isLoading = true; this.searchBuildings(1).finally(() => (this.isLoading = false)); this.clickedItems.clickedAddress = true; } _addressLoadListener() { var _a; if (!this.tableData.addressListData) { return; } const addressPagesLoaded = (_a = this.tableData.addressListData) === null || _a === void 0 ? void 0 : _a.length; if (!(addressPagesLoaded % this.addressPageSize === 0)) { return; } const page = addressPagesLoaded / this.addressPageSize; this.searchAdresses(page + 1); } _buildingListener(e) { this.backCounter = 1; const building = e.detail.building; this.tableData = this.generateNewTableDataObject({ tableType: _helpers_enums_table_type__WEBPACK_IMPORTED_MODULE_10__["default"].Buildings, selectedBuilding: building, }); if (this.tableData.selectedAddress) { this.isLoading = true; this.searchProperties().finally(() => (this.isLoading = false)); this.clickedItems.clickedBuilding = true; } } _buildingsLoadListener() { var _a; if (!this.tableData.buildingListData) { return; } const buildingPagesLoaded = (_a = this.tableData.buildingListData) === null || _a === void 0 ? void 0 : _a.length; if (!(buildingPagesLoaded % this.config.pageSizes.buildings === 0)) { return; } const page = buildingPagesLoaded / this.config.pageSizes.buildings; this.searchBuildings(page + 1); } _propertyListener() { this.backCounter = 1; this.tableData = this.generateNewTableDataObject({ tableType: _helpers_enums_table_type__WEBPACK_IMPORTED_MODULE_10__["default"].None, }); this.clickedItems = {}; this.removeText(); } _propertiesLoadListener() { if (this.propertyCursor === "") { return; } this.isLoadingMoreData = true; this.searchProperties(this.propertyCursor).finally(() => (this.isLoadingMoreData = false)); } _backListener() { if (this.tableData.tableType) { switch (this.tableData.tableType) { case _helpers_enums_table_type__WEBPACK_IMPORTED_MODULE_10__["default"].Properties: this.clickedItems.clickedBuilding = false; break; case _helpers_enums_table_type__WEBPACK_IMPORTED_MODULE_10__["default"].Buildings: this.clickedItems.clickedAddress = false; break; case _helpers_enums_table_type__WEBPACK_IMPORTED_MODULE_10__["default"].Addresses: this.clickedItems.clickedStreet = false; break; case _helpers_enums_table_type__WEBPACK_IMPORTED_MODULE_10__["default"].Streets: this.clickedItems.clickedOverview = false; break; } this.tableData = this.generateNewTableDataObject({ tableType: this.tableData.tableType - this.backCounter, }); this.backCounter = 1; } } dispatchTokenExpiredEvent() { const options = { bubbles: true, composed: true, }; this.dispatchEvent(new CustomEvent("token-expired", options)); } generateNewTableDataObject({ searchType = undefined, tableType = undefined, selectedStreet = undefined, selectedAddress = undefined, selectedBuilding = undefined, streetListData = undefined, addressListData = undefined, buildingListData = undefined, propertyListData = undefined, projectListData = undefined, }) { const newData = Object.assign({}, this.tableData); if (typeof tableType === "number") { newData.tableType = tableType; } if (typeof searchType === "number") { newData.searchType = searchType; } if (selectedStreet) { newData.selectedStreet = selectedStreet; } if (selectedAddress) { newData.selectedAddress = selectedAddress; } if (selectedBuilding) { newData.selectedBuilding = selectedBuilding; } if (streetListData) { newData.streetListData = streetListData; } if (addressListData) { newData.addressListData = addressListData; } if (buildingListData) { newData.buildingListData = buildingListData; } if (propertyListData) { newData.propertyListData = propertyListData; } if (projectListData) { newData.projectListData = projectListData; } return newData; } getNewTokenThenCallInterruptedSearch() { this.getAndSetAccessToken(); this.callWaitingSearch(); } async getAndSetAccessToken() { if (!this.config.retrieveTokenEndpoint) { throw new Error("IntegrationPartnerSetsAccessToken flag is not set, but retrieveTokenEndpoint is not provided. Component has no way to get access tokens."); } const access_token = await (0,_requests_tokenRequests__WEBPACK_IMPORTED_MODULE_7__.getAccessToken)(this.config.idObject, this.config.retrieveTokenEndpoint); this.config.access_token = access_token; this.requestUpdate(); } callWaitingSearch() { if (this.waitingFunction) { const func = this.waitingFunction[0]; const parameters = this.waitingFunction[1]; const bindedFunc = func.bind(this); if (parameters) { bindedFunc(parameters); } else { bindedFunc(); } this.waitingFunction = undefined; } } resultsOrLoading() { var _a; if (this.isLoading) return lit__WEBPACK_IMPORTED_MODULE_0__.html ` <loading-table></loading-table> `; return lit__WEBPACK_IMPORTED_MODULE_0__.html ` <results-table style=${"display: block"} .tableData=${this.tableData} .streetPageSize=${(_a = this.config.pageSizes) === null || _a === void 0 ? void 0 : _a.streets} .searchText=${this.searchText} .isLoadingMoreData=${this.isLoadingMoreData} .languageObject=${this.languageObject} ></results-table> `; } render() { var _a; if (this.config.access_token) { return lit__WEBPACK_IMPORTED_MODULE_0__.html ` <div class="search-container"> <div class="search-box"> <img src=${_assets_icons_loupe_svg__WEBPACK_IMPORTED_MODULE_5__} class="icons" /> <input @input=${this.handleOnSearchEvent} type="text" aria-label="Search" aria-describedby="search-box" id="searchText" placeholder=${this.config.placeholderText ? this.config.placeholderText : (_a = this.languageObject) === null || _a === void 0 ? void 0 : _a.search.placeholder} /> <img src=${_assets_icons_remove_button_svg__WEBPACK_IMPORTED_MODULE_6__} class="icons remove-icon" @click=${() => this.removeText()} /> </div> <div class="results-container" @overview-clicked=${this._overviewListener} @street-clicked=${this._streetListener} @address-clicked=${this._addressListener} @building-clicked=${this._buildingListener} @back-clicked=${this._backListener} @property-confirmed=${this._propertyListener} @load-more-streets=${this._streetLoadListener} @load-more-addresses=${this._addressLoadListener} @load-more-properties=${this._propertiesLoadListener} @load-more-buildings=${this._buildingsLoadListener} > ${this.resultsOrLoading()} </div> </div> `; } else { return lit__WEBPACK_IMPORTED_MODULE_0__.html ``; } } } BoligmappaSearch.styles = lit__WEBPACK_IMPORTED_MODULE_0__.css ` * { font-family: var(--search-font-family); color: var(--search-text-color); } .search-loader { display: none; float: right; margin-top: 16px; margin-right: 18px; } .main { border: 0.1em solid grey; border-radius: 1em; padding: 4em; height: 30em; } .search-container { display: flex; position: relative; align-items: center; flex-direction: column; background-color: var(--search-container-background-color); width: var(--search-container-width, 490px); height: var(--search-container-height); min-width: var(--search-container-min-width); max-width: var(--search-container-max-width); margin: var(--search-container-margin, auto); } .search-box { display: flex; align-items: center; box-sizing: border-box; justify-content: space-between; margin: var(--search-bar-margin, auto); width: var(--search-bar-width, 100%); height: var(--search-bar-height, 3rem); padding: var(--search-bar-padding, 0.2rem 1rem); border: var(--search-bar-border, 1px solid ${(0,lit__WEBPACK_IMPORTED_MODULE_0__.unsafeCSS)(_helpers_css_modules_colors__WEBPACK_IMPORTED_MODULE_9__.darkGreen)}); border-radius: var(--search-bar-border-radius, 1.5rem); background-color: var(--search-bar-background-color, white); margin-bottom: var(--search-bar-margin-bottom); box-shadow: var(--search-bar-box-shadow, 0 0 5px #ccc); } .results-container { position: absolute; top: 100%; width: var(--search-results-container-width, 100%); z-index: var(--search-results-z-index, 100); margin-top: var(--search-results-margin-top, 0.3em); } .icons { height: 40%; filter: invert(40%) sepia(10%) saturate(8%) hue-rotate(328deg) brightness(95%) contrast(92%); } .remove-icon { opacity: 0.4; } .remove-icon:hover { opacity: 1; cursor: pointer; } textarea, input { border: none; outline: none; width: 100%; height: 100%; padding: 0 0.5rem; } `; __decorate([ (0,lit_decorators_js__WEBPACK_IMPORTED_MODULE_1__.state)() ], BoligmappaSearch.prototype, "isLoading", void 0); __decorate([ (0,lit_decorators_js__WEBPACK_IMPORTED_MODULE_1__.state)() ], BoligmappaSearch.prototype, "isLoadingMoreData", void 0); __decorate([ (0,lit_decorators_js__WEBPACK_IMPORTED_MODULE_1__.state)() ], BoligmappaSearch.prototype, "searchText", void 0); __decorate([ (0,lit_decorators_js__WEBPACK_IMPORTED_MODULE_1__.state)() ], BoligmappaSearch.prototype, "tableData", void 0); __decorate([ (0,lit_decorators_js__WEBPACK_IMPORTED_MODULE_1__.property)() ], BoligmappaSearch.prototype, "development", void 0); __decorate([ (0,lit_decorators_js__WEBPACK_IMPORTED_MODULE_1__.property)() ], BoligmappaSearch.prototype, "textField", void 0); __decorate([ (0,lit_decorators_js__WEBPACK_IMPORTED_MODULE_1__.property)() ], BoligmappaSearch.prototype, "config", void 0); __decorate([ (0,lit_decorators_js__WEBPACK_IMPORTED_MODULE_1__.state)() ], BoligmappaSearch.prototype, "clickedItems", void 0); __decorate([ (0,lit_decorators_js__WEBPACK_IMPORTED_MODULE_1__.eventOptions)({ passive: true }) ], BoligmappaSearch.prototype, "handleOnSearchEvent", null); customElements.define("boligmappa-search", BoligmappaSearch); /***/ }), /***/ "./src/helpers/css-modules/buttonStyles.ts": /*!*************************************************!*\ !*** ./src/helpers/css-modules/buttonStyles.ts ***! \*************************************************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; __webpack_require__.r(__webpack_exports__); /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ "radioButtonStyles": () => (/* binding */ radioButtonStyles), /* harmony export */ "checkBoxStyles": () => (/* binding */ checkBoxStyles) /* harmony export */ }); /* harmony import */ var lit__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! lit */ "./node_modules/lit/index.js"); /* harmony import */ var _colors__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./colors */ "./src/helpers/css-modules/colors.ts"); const radioButtonStyles = lit__WEBPACK_IMPORTED_MODULE_0__.css ` .square-radio { border: 2px solid ${(0,lit__WEBPACK_IMPORTED_MODULE_0__.unsafeCSS)(_colors__WEBPACK_IMPORTED_MODULE_1__.darkGreen)}; margin: 2px; margin-right: 16px; width: 20px; height: 20px; border-radius: 50%; position: relative; cursor: pointer; background: white; } .square-radio:hover { background: #e3e3e3; } .square-radio--clicked .square-radio--content { position: absolute; top: 50%; left: 50%; border-radius: 50%; transform: translate(-50%, -50%); background-color: ${(0,lit__WEBPACK_IMPORTED_MODULE_0__.unsafeCSS)(_colors__WEBPACK_IMPORTED_MODULE_1__.darkGreen)}; width: 12px; height: 12px; } td.radio-button-container { vertical-align: inherit; padding: 0; } `; const checkBoxStyles = lit__WEBPACK_IMPORTED_MODULE_0__.css ` .square-checkbox { border: 2px solid ${(0,lit__WEBPACK_IMPORTED_MODULE_0__.unsafeCSS)(_colors__WEBPACK_IMPORTED_MODULE_1__.darkGreen)}; margin: 2px; margin-right: 16px; width: 20px; height: 20px; border-radius: 5%; position: relative; cursor: pointer; background: white; } .square-checkbox:hover { background: #e3e3e3; } .square-checkbox--clicked .square-checkbox--content { position: absolute; top: 50%; left: 50%; border-radius: 5%; transform: translate(-50%, -50%); background-color: ${(0,lit__WEBPACK_IMPORTED_MODULE_0__.unsafeCSS)(_colors__WEBPACK_IMPORTED_MODULE_1__.darkGreen)}; width: 12px; height: 12px; } td.checkbox-button-container { vertical-align: inherit; padding: 0; } `; /***/ }), /***/ "./src/helpers/css-modules/colors.ts": /*!*******************************************!*\ !*** ./src/helpers/css-modules/colors.ts ***! \*******************************************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; __webpack_require__.r(__webpack_exports__); /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ "darkGreen": () => (/* binding */ darkGreen), /* harmony export */ "lightGreen": () => (/* binding */ lightGreen), /* harmony export */ "peach": () => (/* binding */ peach) /* harmony export */ }); const darkGreen = "#254E52"; const lightGreen = "#D9E9E9"; const peach = "#FFEDE0"; /***/ }), /***/ "./src/helpers/css-modules/styles.ts": /*!*******************************************!*\ !*** ./src/helpers/css-modules/styles.ts ***! \*******************************************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; __webpack_require__.r(__webpack_exports__); /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ "buttonStyles": () => (/* binding */ buttonStyles), /* harmony export */ "innerTableStyles": () => (/* binding */ innerTableStyles), /* harmony export */ "tableStyles": () => (/* binding */ tableStyles) /* harmony export */ }); /* harmony import */ var lit__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! lit */ "./node_modules/lit/index.js"); /* harmony import */ var _colors__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./colors */ "./src/helpers/css-modules/colors.ts"); const buttonStyles = lit__WEBPACK_IMPORTED_MODULE_0__.css ` .back-button { font-family: var(--search-button-font-family, var(--search-font-family)); color: var(--search-button-back-text-color, ${(0,lit__WEBPACK_IMPORTED_MODULE_0__.unsafeCSS)(_colors__WEBPACK_IMPORTED_MODULE_1__.darkGreen)}); background: none; border: none; display: inline-block; margin-left: 0; text-decoration: underline; } .back-button:hover { color: var(--search-button-back-text-color-hover, #4d898f); cursor: pointer; } .confirm-button { font-family: var(--search-button-font-family, var(--search-font-family)); display: inline-block; float: right; width: 6rem; height: 1.5rem; border: none; font-weight: 500; border-radius: 0.75rem; background-color: ${(0,lit__WEBPACK_IMPORTED_MODULE_0__.unsafeCSS)(_colors__WEBPACK_IMPORTED_MODULE_1__.darkGreen)}; color: var(--search-button-confirm-text-color, white); cursor: pointer; } .confirm-button.disabled { pointer-events: none; background-color: #cdcdcd; color: var(--search-button-confirm-text-color-disabled, #717171); } .button-container { padding: 0.4rem 1rem; } `; const innerTableStyles = lit__WEBPACK_IMPORTED_MODULE_0__.css ` .inner-table { width: 100%; } .inner-table td { vertical-align: baseline; border-bottom: 0; padding-bottom: 0.5rem; display: table-cell; width: auto; } .inner-table tr { width: auto; display: table-row; } .inner-header { font-size: 0.7rem; color: #aaa; } `; const tableStyles = lit__WEBPACK_IMPORTED_MODULE_0__.css ` table { overflow: hidden; } tr:hover { overflow: hidden; background: #f5f5f5; } tr.disabled { color: #ccc; pointer-events: none; } tr.disabled span.number { color: #ccc; } tr.disabled img { display: none; } tbody td { border-bottom: 1px solid #ddd; padding: 0; } tfoot td { border-top: 1px solid #000; padding: 0; } tbody tr:last-child td { border-bottom: 0; } .table-container { overflow: scroll; height: 100px; } .postal-text { color: var(--search-postal-text-color, #727272); font-size: 0.8rem; } .tablecell-container { position: relative; padding-left: 2rem; padding-top: 0.2rem; padding-bottom: 0.2rem; } .empty-tablecell { padding: 12px 0px; } .results-table { border: var(--search-results-border, 1px solid ${(0,lit__WEBPACK_IMPORTED_MODULE_0__.unsafeCSS)(_colors__WEBPACK_IMPORTED_MODULE_1__.darkGreen)}); border-radius: var(--search-results-border-radius, 16px); background-color: var(--search-results-background-color, white); z-index: var(--search-results-z-index, 100); width: 100%; } .results-table > tbody { display: block; overflow: auto; max-height: var(--search-results-max-height, 70vh); } .results-table tr, td { display: block; width: 100%; overflow: hidden; } .results-text { display: inline-block; font-size: 1rem; } .number { color: var(--search-number-color, ${(0,lit__WEBPACK_IMPORTED_MODULE_0__.unsafeCSS)(_colors__WEBPACK_IMPORTED_MODULE_1__.darkGreen)}); font-size: 1.2rem; font-weight: 500; margin-right: 1rem; } @media only screen and (min-height: 1000px) { .results-table > tbody { max-height: 714px; } } `; /***/ }), /***/ "./src/helpers/enums/search-type.ts": /*!******************************************!*\ !*** ./src/helpers/enums/search-type.ts ***! \******************************************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; __webpack_require__.r(__webpack_exports__); /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__) /* harmony export */ }); var SearchType; (function (SearchType) { SearchType[SearchType["Streets"] = 0] = "Streets"; SearchType[SearchType["Cadastres"] = 1] = "Cadastres"; SearchType[SearchType["Projects"] = 2] = "Projects"; })(SearchType || (SearchType = {})); /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (SearchType); /***/ }), /***/ "./src/helpers/enums/table-type.ts": /*!*****************************************!*\ !*** ./src/helpers/enums/table-type.ts ***! \*****************************************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; __webpack_require__.r(__webpack_exports__); /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__) /* harmony export */ }); var TableType; (function (TableType) { TableType[TableType["None"] = 0] = "None"; TableType[TableType["Overview"] = 1] = "Overview"; TableType[TableType["Streets"] = 2] = "Streets"; TableType[TableType["Projects"] = 2] = "Projects"; TableType[TableType["Addresses"] = 3] = "Addresses"; TableType[TableType["Buildings"] = 4] = "Buildings"; TableType[TableType["Properties"] = 5] = "Properties"; })(TableType || (TableType = {})); /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (TableType); /***/ }), /***/ "./src/helpers/functions/isObjectEmpty.ts": /*!************************************************!*\ !*** ./src/helpers/functions/isObjectEmpty.ts ***! \************************************************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; __webpack_require__.r(__webpack_exports__); /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ "isObjectEmpty": () => (/* binding */ isObjectEmpty) /* harmony export */ }); function isObjectEmpty(obj) { //@ts-ignore for (var attribute in obj) { return false; } return true; } /***/ }), /***/ "./src/helpers/languages/language-loader.ts": /*!**************************************************!*\ !*** ./src/helpers/languages/language-loader.ts ***! \**************************************************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; __webpack_require__.r(__webpack_exports__); /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ "getLanguageObject": () => (/* binding */ getLanguageObject) /* harmony export */ }); /* harmony import */ var _english_json__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./english.json */ "./src/helpers/languages/english.json"); /* harmony import */ var _norwegian_json__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./norwegian.json */ "./src/helpers/languages/norwegian.json"); function getLanguageObject(language) { if (language.toUpperCase() === "ENG") { return _english_json__WEBPACK_IMPORTED_MODULE_0__; } else { return _norwegian_json__WEBPACK_IMPORTED_MODULE_1__; } } /***/ }), /***/ "./src/requests/searchRequests.ts": /*!****************************************!*\ !*** ./src/requests/searchRequests.ts ***! \****************************************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; __webpack_require__.r(__webpack_exports__); /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ "getStreets": () => (/* binding */ getStreets), /* harmony export */ "getAddresses": () => (/* binding */ getAddresses), /* harmony export */ "getBuildings": () => (/* binding */ getBuildings), /* harmony export */ "getProperties": () => (/* binding */ getProperties), /* harmony export */ "getProjects": () => (/* binding */ getProjects) /* harmony export */ }); /* harmony import */ var axios__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! axios */ "./node_modules/axios/index.js"); /* harmony import */ var axios__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(axios__WEBPACK_IMPORTED_MODULE_0__); async function getStreets(searchText, pageSize, page, accessToken, apiUrl) { const requestConfig = { headers: { Authorization: `Bearer ${accessToken}`, }, }; return axios__WEBPACK_IMPORTED_MODULE_0___default().get(`${apiUrl}/search/streets?q=${searchText}&pagesize=${pageSize}&page=${page}`, requestConfig) .then((response) => { const streets = response.data.response; const filteredStreets = streets.filter((street) => street.postalCode !== "0000" && street.postalPlace !== null); return filteredStreets; }) .catch((error) => { if (error.message === "Network Error") { throw new InvalidTokenError(); } }); } async function getAddresses(pageSize, page, accessToken, apiUrl, streetId) { const requestConfig = { headers: { Authorization: `Bearer ${accessToken}`, }, }; return axios__WEBPACK_IMPORTED_MODULE_0___default().get(`${apiUrl}/streets/${streetId}/addresses?pagesize=${pageSize}&page=${page}`, requestConfig) .then((response) => { return response.data.response; }) .catch((error) => { if (error.message === "Network Error") { throw new InvalidTokenError(); } }); } async function getBuildings(pageSize, page, accessToken, apiUrl, addressId) { const requestConfig = { headers: { Authorization: `Bearer ${accessToken}`, }, }; return axios__WEBPACK_IMPORTED_MODULE_0___default().get(`${apiUrl}/addresses/${addressId}/buildings?pagesize=${pageSize}&page=${page}`, requestConfig) .then((response) => { return response.data.response; }) .catch((error) => { if (error.message === "Network Error") { throw new InvalidTokenEr