@backbone.one/bb1-web-components
Advanced tools
To install the BB1EnergyCalculator web component, you need to use npm. Run the following command in your project
directory:
npm i @backbone.one/bb1-web-components
After installing the package, you can use the bb1-energy-calculator web component in your project. Follow the steps
below to integrate it into your application.
Import the Component
Import the @backbone.one/bb1-web-components web component in your JavaScript or TypeScript file:
import '@backbone.one/bb1-web-components';
Add the Component to Your HTML
You can now use the bb1-energy-calculator component in your HTML. Here is an example of how to include it in your
HTML file:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Your Page</title>
<style>
bb1-energy-calculator {
--font-family: Verdana;
--color: #4c4343;
--household-selected-bg-color: rgba(255, 0, 0, 0.4);
--submit-color: #f0f2f8;
--submit-bg-color: #e83f3f;
}
</style>
</head>
<body>
<bb1-energy-calculator
offer-service-api-key="your-api-key"
calculator-link="https://your-domain.com/#/energy-calculator"
translations='{"key": "value"}'
onsubmit="handleSubmit"
onerror="handleError"
></bb1-energy-calculator>
</body>
</html>
The bb1-energy-calculator component accepts the following attributes:
- `offer-service-api-key` (string): The API key for the offer service.
- `calculator-link` (string?): The URL to the tariff calculator that will be opened when the form is submitted. If not provided, no calculator will be opened.
- `translations` (object): A JSON object containing translation keys and values.
- `onsubmit` (function(event: OnsubmitEvent): void?): A JavaScript function to handle the form submission.
- `onerror` (function(error: OnerrorEvent): void?): A JavaScript function to handle errors.
The translations attribute accepts a JSON object with the following keys:
title (string?): The title of the calculator. If not provided, no title will be displayed.subTitle (string?): The subtitle of the calculator. If not provided, no subtitle will be displayed.householdSize (string): The label for the household size input.annualConsumption (string): The label for the annual consumption input.zip (string): The label for the ZIP code input.zipPlaceholder (string): The placeholder for the ZIP code input.gridOperator (string): The label for the grid operator input.gridOperatorPlaceholder (string): The placeholder for the grid operator input.gridOperatorInfo (string): The info text for the grid operator input.submit (string): The text for the submit button.You can customize the appearance of the bb1-energy-calculator web component using CSS variables.
Example:
bb1-energy-calculator {
--font-family: Verdana;
--color: #4c4343;
--household-selected-bg-color: rgba(255, 0, 0, 0.4);
--submit-color: #f0f2f8;
--submit-bg-color: #e83f3f;
}
bb1-energy-calculator::part(title) {
font-size: 24px;
font-weight: bold;
}
bb1-energy-calculator::part(subtitle) {
font-size: 18px;
color: #666;
}
--font-family: Sets the font family for the component.--color: Sets the text color for the component.--household-selected-bg-color: Sets the background color for the selected household size button.--submit-color: Sets the text color for the submit button.--submit-bg-color: Sets the background color for the submit button.::part(title): Styles the title part of the component.::part(subtitle): Styles the subtitle part of the component.The bb1-energy-calculator component is written in TypeScript and includes type definitions for the attributes and
events. You can use these types to ensure type safety in your application.
Import the types in your TypeScript file:
import '@backbone.one/bb1-web-components' // Import the component
import { OnsubmitEvent, OnerrorEvent, Translations } from '@backbone.one/bb1-web-components' // Import the types
FAQs
<!-- TOC -->
The npm package @backbone.one/bb1-web-components receives a total of 20 weekly downloads. As such, @backbone.one/bb1-web-components popularity was classified as not popular.
We found that @backbone.one/bb1-web-components demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
vlt's new "reproduce" tool verifies npm packages against their source code, outperforming traditional provenance adoption in the JavaScript ecosystem.
Research
Security News
Socket researchers uncovered a malicious PyPI package exploiting Deezer’s API to enable coordinated music piracy through API abuse and C2 server control.
Research
The Socket Research Team discovered a malicious npm package, '@ton-wallet/create', stealing cryptocurrency wallet keys from developers and users in the TON ecosystem.