Skip to content

RD-1868 RD-1189 Add coponent slots and CSS custom properties to allow customization #113

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
katemihalikova merged 3 commits into from
May 6, 2026
Merged

RD-1868 RD-1189 Add coponent slots and CSS custom properties to allow customization #113

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f6b5017
RD-1868 RD-1189 Add component slots and CSS custom properties to allo…
katemihalikova Apr 27, 2026
6a709a3
RD-1901 Fix tests for slot-based approach
katemihalikova May 5, 2026
79dc6a8
RD-1901 Add tests to GitHub Actions
katemihalikova May 5, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .github/workflows/lint-and-typecheck.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ jobs:
- name: Clear NPM cache
run: npm cache clean --force

- name: Install dependencies and build
- name: Install dependencies
run: npm ci

- name: Build
Expand Down
24 changes: 24 additions & 0 deletions .github/workflows/unit-tests.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
name: Unit tests

on: [pull_request]

jobs:
unit-tests:
runs-on: ubuntu-latest
steps:
- name: Check out Git repository
uses: actions/checkout@v4

- name: Set up Node.js
uses: actions/setup-node@v4
with:
node-version: 24

- name: Install Node.js dependencies
run: npm ci

- name: Install Playwright browsers
run: npx playwright install --with-deps chromium

- name: Running unit tests
run: npm run test
66 changes: 66 additions & 0 deletions demos/08-bootstrap.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
<!doctype html>
<html>
<head>
<title>MapTiler Geocoding Control example</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" />
<style>
body {
display: flex;
flex-direction: row;
justify-content: space-between;
}

maptiler-geocoder {
margin: 0.5rem;
}

.second {
--size-width: 300px;
--input-group-padding: 0;
--color-items: rebeccapurple;
--color-items-secondary: violet;
}

.second input:focus {
box-shadow: none;
}

.third input:placeholder-shown ~ [data-clear-button] {
display: none;
}
</style>
</head>

<body>
<maptiler-geocoder class="first" iconsBaseUrl="/assets/icons/">
<i slot="search-icon" class="bi bi-binoculars text-primary"></i>
<i slot="clear-icon" class="bi bi-x-octagon"></i>
<i slot="loading-icon" class="bi bi-cloud-arrow-down"></i>
<i slot="no-results-icon" class="bi bi-cloud-rain text-danger"></i>
</maptiler-geocoder>

<maptiler-geocoder class="second" iconsBaseUrl="/assets/icons/">
<div slot="search-button" class="d-none"></div>
<input slot="input" class="form-control" placeholder="Try searching!" />
<button slot="clear-button" class="btn btn-danger">
<i class="bi bi-x-octagon"></i>
</button>
<div slot="loading-icon" class="spinner-border spinner-border-sm text-info align-self-center me-2"></div>
</maptiler-geocoder>

<maptiler-geocoder class="third" iconsBaseUrl="/assets/icons/">
<div slot="content" class="input-group input-group-sm">
<input type="text" class="form-control text-center" placeholder="Start search here" />
<button data-clear-button class="btn btn-danger">
<i class="bi bi-x-octagon"></i>
</button>
<button data-reverse-button class="btn btn-success">
<i class="bi bi-pin"></i>
</button>
</div>
</maptiler-geocoder>
<script type="module" src="/src/08-bootstrap.ts"></script>
</body>
</html>
1 change: 1 addition & 0 deletions demos/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,7 @@
<a href="05-leaflet.html">Leaflet →</a>
<a href="06-openlayers.html">OpenLayers →</a>
<a href="07-worldview.html">Worldview →</a>
<a href="08-bootstrap.html">Bootstrap →</a>
</div>
</div>
</body>
Expand Down
7 changes: 7 additions & 0 deletions demos/src/08-bootstrap.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import "../../src";

import { getApiKey } from "./demo-utils";

for (const el of document.querySelectorAll("maptiler-geocoder")) {
el.apiKey = getApiKey();
}
Loading
Loading