hb-footer

Category: layout · Tags: layout, navigation

Summary

hb-footer is a site footer with small, regular, and a large placeholder layout. The regular layout uses Bulma container, columns, hb-contact-item for contacts/socials/cells, optional link columns, policy row, and slots for header/content/bottom. Bootstrap Icons load for small-layout expand controls.

What it does

1. Coercion: disable_expanding_small accepts yes / true as strings; JSON props (company, columns, …) are parsed in $effect; missing column/cell _id and policy keys are normalized.
2. Small mode: Compact bar with optional expand to the full regular grid unless disable_expanding_small is true.
3. Regular mode: Company block, optional contacts, socials (preset networks), dynamic columns with label buttons (footerClick + cell _id) or nested contact payloads, policy anchors vs footerClick with key.
4. Large mode: Renders the text large only — not ready for production.

Custom element

hb-footer

Attributes

Strings from HTML; objects/arrays as JSON strings; booleans yes / no (or true / false for disable_expanding_small).

| Attribute | Type (logical) | HTML / notes | | --- | --- | --- | | company | ICompany (JSON) | Required for meaningful UI: logoUri, siteName, companyName, description, optional vatNumber, fiscalCode, since, registration. | | type | "small" | "regular" | "large" | Default regular; invalid values become regular. | | id | string (optional) | Host id. | | style | string (optional) | In typings; not read in the current script. | | columns | IColumn[] (JSON) | Optional _id, title, cells with optional _id, label, or phone / address / email / site. | | contacts | IContacts (JSON) | Phones, addresses, emails, sites. | | socials | ISocials (JSON) | Keys: facebook, gmail, twitter, github, youtube, twitch, discord — presence shows a row; github uses the value as link URI. | | policies | IPolicies[] (JSON) | label, key, optional link (anchor vs button). | | brandandcontacts | IBrandAndContacts (JSON) | Parsed if present; not rendered in the default template. | | disable_expanding_small | boolean / string | Disables expand for type="small". |

Custom events

| Event name | detail shape | | --- | --- | | footerClick | { elClick: string } — column cell _id or policy key when no link. |

Styling

CSS custom properties (extra/docs.ts)

| Variable | Role | | --- | --- | | --hb-footer-sections | Equal-width column count (set inline on .hb-footer-columns). | | --bulma-section-padding-desktop | Top padding of :host footer. | | --bulma-block-spacing | Spacing between contact rows. | | --bulma-size-7 | Bottom line typography. |

CSS parts (extra/docs.ts)

| Part | Role | | --- | --- | | column-cell-button-content | Ghost button for column cells with label. |

Slots (extra/docs.ts)

| Slot | Role | | --- | --- | | footer_small | Compact bar when type="small" and not expanded. | | footerheader | Region above the main grid. | | footercontent | Wraps the main columns grid. | | footerpolicy | Policy row. | | footerbottom | Bottom copyright / registration line. |

TypeScript

types/webcomponent.type.d.ts — Component, Events, ICompany, IColumn, IContacts, ISocials, IPolicies, etc.

Dependencies

hb-contact-item — phones, addresses, emails, sites, social rows, mixed column cells.

Minimal HTML example

<hb-footer
  type="regular"
  company='{"logoUri":"","siteName":"Acme","companyName":"Acme S.r.l.","description":"Short tagline."}'
></hb-footer>

document.querySelector("hb-footer")?.addEventListener("footerClick", (e) => {
  console.log(e.detail.elClick);
});