Extensible web component library for development, built with Lit and Shoelace.
- Node.js v. 18.0.0+
- npm (comes with Node.js) v. 8.0.0+
index.html
<html>
<head>
<script type="module">
import 'katapult-pro-extended/elements/page-element/katapult-page-element.js';
</script>
<!-- Your favicon code -->
<style>
:host {
--primary-color: #8BC34A;
--secondary-color: #7CB342;
--accent-color: #FFB300;
}
</style>
</head>
<body>
<katapult-page-element
supportNum=""
supportEmail=""
companyName=""
logoLink=""
>
<!-- Your content and Katapult elements -->
<katapult-job-dropdown slot="toolbar-center"></katapult-job-dropdown>
</katapult-page-element>
</body>
</html>Host: If
:hostdoesn't work, try:rootinstead.
Favicon: Add a favicon to avoid
favicon.ico 404errors.
Color Theme: Set CSS variables:
--primary-color,--secondary-color,--accent-color
- The main wrapper for your webpage. Place content and other Katapult elements inside.
- Includes a v2 authentication call and a v2 nine-dot call.
- It's recommended to make any v2 calls over 5 seconds after the user has logged in or the page has loaded.
- If a user chooses to save their API key for 30 days, it will be stored in
localStorageunder the name'apiKey'. Access the API key here withJSON.parse(localStorage.getItem('apiKey'))to avoid hardcoding it in your program. - Attributes:
supportNum,supportEmail,companyName,logoLink
- Slots:
slot="toolbar-left-of-logo"slot="toolbar-left"slot="toolbar-center"slot="toolbar-right"
- Parts:
- Styling the grey/empty area under the toolbar. Ex. Aligning all page content to the center
katapult-page-element::part(content-wrapper) { /* Your styling here */ align-content: center; }
import 'katapult-pro-extended/elements/page-element/katapult-page-element.js';- Dropdown for job selection (This is a v3 API call)
- This call is made as soon as the page loads after login. Make other v3 calls with at least a 50 ms delay.
- Has function:
getSelectedJob()that returns the current job's data
import 'katapult-pro-extended/elements/katapult-job-dropdown.js';Note: Katapult styles are written as javascript modules and exported as CSS using Lit
To use these styles in your own Lit elements, simply import the style module and include it in your component’s
static stylesarray.
- Utility flexbox layout styles for rapid, attribute-based flex layouts.
import { KatapultFlex } from 'katapult-pro-extended/styles/katapult-flex.js';- Customizes scrollbar appearance for a consistent look.
import { KatapultScrollbars } from 'katapult-pro-extended/styles/katapult-scrollbars.js';- Overrides shoelace defaults and extends Shoelace component styles to match Katapult branding, including attribute-based style customizations.
import { KatapultShoelace } from 'katapult-pro-extended/styles/katapult-shoelace.js';- Defines color variables and palettes for Shoelace and Katapult components.
import {KatapultShoelaceColors} from 'katapult-pro-extended/styles/katapult-shoelace-colors.js';- Katapult Pro API V3 Documentation
- API V3 Rate Limit:
- 50 milliseconds between calls
- Token limit of 10000, a
GETcall costs 1 token,POSTandDELETEcalls cost 10 tokens. Tokens are refilled every minute.
- API V3 Rate Limit:
- Katapult Pro API V2 Documentation
- API V2 Rate Limit:
- 2 seconds between calls
- API V2 Rate Limit: