@matthew2097/bdp-search-component v1.1.13

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

Example

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

Methods

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.

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