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);
});