@matthew2097/bdp-search-component

bdp-search-component

Busem do Polski to baza firm oferujących przewóz osób. Szybko i skutecznie znajdziesz przewoźnika, który obsługuje interesujące Cię przejazdy. To prosta baza przewoźników, którzy zabiorą Cię z adresu na adres. Na bus do Polski znajdziesz nie tylko powroty do kraju, ale również przewoźników, którzy przewiozą Cię do pracy za granicą, oferują regularne wyjazdy i przewóz paczek. Komponent bdp-search-component - to komponent wyszukiwarki, która ma ułatwić integrację z wieloma środowiskami.

Built with lit-element

Install

Before you start, please look at the DEMO - with npm (DEMO) project There are two ways to use this component. For simple projects or just to get started fast, we recommend using the component by script tag. If your project is using npm then we recommend using the npm package.

Script tag

• Put this script tag in the head of your index.html:

<link rel="preload" href="/node_modules/@matthew2097/bdp-search-component/docs/index.js" as="script" />
<link rel="preload" href="/node_modules/@matthew2097/bdp-search-component/docs/webcomponents-loader.js" as="script" />
<script type="module" src="/node_modules/@matthew2097/bdp-search-component/docs/webcomponents-loader.js"></script>
<script src="/node_modules/@matthew2097/bdp-search-component/docs/webcomponents-loader.js" defer></script>
<script type="module">
    window.WebComponents = window.WebComponents || {
        waitFor(cb) {
            addEventListener('WebComponentsReady', cb)
        }
    }

    WebComponents.waitFor(async () => {
        import('/node_modules/@matthew2097/bdp-search-component/docs/index.js');
    });
</script>

NPM

• Run npm i @matthew2097/bdp-search-component
• import with import '@matthew2097/bdp-search-component'
• copy the img and i18n folders to the assets folder cp -R node_modules/@matthew2097/bdp-search-component/docs/img src/assets && cp -R node_modules/@matthew2097/bdp-search-component/docs/i18n src/assets
• put this code in your project or use dotenv (if you copied the img and i18n folder, enter the path to these folders in ASSETS_PATH):

    window.process = {
        env: {
            ASSETS_PATH: "https://cdn.jsdelivr.net/npm/@matthew2097/bdp-search-component/docs" //this item is required
        },
    };

Then you can use the element <bdp-search-componentl searchButtonText=""></bdp-search-component> anywhere in your template, JSX, html etc. live demo: https://vhst2.csb.app/

API

Properties

Property	Attribute	Description	Type	Default
searchButtonText	searchButtonText	The text displayed in the button	String	""
email	email	Only for partners	String	""
partner	partner	Only for partners	string	""
.phoneIsRequired	.phoneIsRequired	Out this parameter when the phone number is not required	Boolean	True
onlyMobile	onlyMobile	Mobile version only	Boolean	False
autoClear	autoClear	Clear the form after clicking the "search" button	Boolean	False
callback	callback	return redirect path by event	Boolean	False

Example

<bdp-search-component
  searchButtonText="Szukaj"
  email=""
  partner=""
  .phoneIsRequired="false"
  onlyMobile
  autoClear
></bdp-search-component>

Methods

name	Description
clear()	Clear form (not working yet)

Interactions with the methods requires a reference to the element itself, if using webcomponents or a library like Lit-Element or Fast-Element, this can be done easily within the if using the component from the browser

Styling

CSS Variables

We recommend using our CSS variables to easliy tweak the style of this component to fit your project. Here are our current supported CSS variables.

name	Description
--button-bg-color-rgb	Changes the color of the button background
--button-color-rgb	Changes the text color of the button
--checkbox-text-color-rgb	Changes the text color of the checkbox
--checkbox-border-color-rgb	Changes the checkbox border color
--checkbox-bg-color-rgb	Changes the checkbox color - checked
--checkbox-tick-color-rgb	Changes the checkbox tick color - checked
--component-structure-grid	Changes the position of the elements in a component

Example

:root {
  --button-bg-color-rgb: 248, 91, 90;
  --button-color-rgb: 255, 255, 255;
  --checkbox-text-color-rgb: 46, 46, 46;
  --checkbox-border-color-rgb: 19, 24, 79;
  --checkbox-bg-color-rgb: 19, 24, 79;
  --checkbox-tick-color-rgb: 255, 255, 255;
  --component-structure-grid: "from" "to" "error" "date" "intl-tel" "intl-tel2"
    "passengers" "button" "attributes" "attributes2";
}

Geting data from component - Examples

EventListener

const component = document.querySelector("bdp-search-component");

component.addEventListener("bdp-event", (e) => {
  console.log(e.detail);
});