There is a simple working example of a HAX element provided in our monorepo. The example-hax-element tag implements very basic wiring for a title and boolean value to demonstrate how you can integrate your web component with the design system as well as form settings
Source of this file
/**
* Copyright 2024 The Pennsylvania State University
* @license Apache-2.0, see License.md for full text.
*/
import { LitElement, html, css } from "lit";
/**
* `example-hax-element`
* @element example-hax-element
* `Provide an example to pick apart of a working HAX element`
* @demo demo/index.html
*/
export class ExampleHaxElement extends LitElement {
// convention our team enjoys
static get tag() {
return "example-hax-element";
}
constructor() {
super();
this.title = null;
this.shiny = false;
}
static get properties() {
return {
title: {
type: String
},
shiny: {
type: Boolean,
reflect: true
}
};
}
static get styles() {
return [css`
:host {
display: block;
}
:host([shiny]) h2 {
background-color: var(--ddd-theme-accent);
}
`];
}
render() {
return html`${this.title}
`;
}
/**
* haxProperties integration via file reference
*/
static get haxProperties() {
return new URL(`./lib/${this.tag}.haxProperties.json`, import.meta.url).href;
}
}
globalThis.customElements.define(ExampleHaxElement.tag, ExampleHaxElement);
Source of this file
{
"designSystem": {
"primary": true,
"accent": true
},
"hideDefaultSettings": false,
"canEditSource": true,
"gizmo": {
"title": "Example element",
"description": "Example Title text element",
"icon": "icons:android",
"color": "green",
"tags": [
"Other",
"example"
],
"handles": [],
"meta": {
"author": "HAXTheWeb core team"
}
},
"settings": {
"configure": [
{
"property": "title",
"title": "Title",
"description": "Simple heading title to present",
"inputMethod": "textfield"
},
{
"property": "shiny",
"title": "Shiny",
"description": "Is this shiny or plain",
"inputMethod": "boolean"
}
],
"advanced": [],
"developer": []
},
"saveOptions": {
"unsetAttributes": []
},
"demoSchema": [
{
"tag": "example-hax-element",
"properties": {
"title": "This is my title",
"shiny": true
},
"content": ""
}
]
}