HyperLocal WebComponents

https://storybook.hyperlocalhq.com/hylo-storybook/typedoc
Admin
Documentation for HyperLocal's WebComponents, providing a library of reusable UI components built...
Tokens:1,865,504
Snippets:15,333
Trust Score:5.2
Update:1 year ago
Show doc for...
Tokens:
Raw
### HyloInstallationLayer API Documentation

Source: https://storybook.hyperlocalhq.com/hylo-storybook/typedoc/classes/HyloInstallationLayer

Provides details on the HyloInstallationLayer class, including its configurable properties for managing installation states and accessibility, as well as events that signal installation progress and layer status.

```APIDOC
HyloInstallationLayer:
  Properties:
    openHide: string
      Description: A CSS query which defines elements which will be aria-hidden="true" when the layer gets open. When closed again, the aria-hidden attribute is removed again. If an element had aria-hidden="true" before opening the layer, it will keep aria-hidden="true" after closing the layer again.
    possible: boolean = false
      Description: Is it possible to install the app?
    srCloseLabel: string = 'schließen.'
      Description: Added as "aria-label" to the close button.
    srEndLabel: string = ' Layer Ende.'
      Description: A text which marks the ending of the layer. Only visible for screen readers.
    srLabel: string = 'Layer.'
      Description: Added as "aria-label" to the enclosing aside tag.
    srStartLabel: string = ' Layer Anfang.'
      Description: A text which marks the beginning of the layer. Only visible for screen readers.

  Events:
    hyloAppInstallationPossible: EventEmitter<any>
      Description: Fires when the installation of the app is possible. Does not fire if this.installed == true.
    hyloAppInstalled: EventEmitter<any>
      Description: Fires when the user agreed to install the app or it is the installed app?
    hyloInstallationLayerOpend: EventEmitter<any>
      Description: Fires when the layer opened.
      Visibility: Protected, Inherited
```

--------------------------------

### HyloInstallationLayer Class Documentation

Source: https://storybook.hyperlocalhq.com/hylo-storybook/typedoc/classes/HyloMenuController

Documentation for the HyloInstallationLayer class. This class might be related to installation processes or layers.

```APIDOC
Class: HyloInstallationLayer
Description: Manages or represents an installation layer or process.
Details: Refer to the linked TypeDoc for specific methods, properties, and usage.
```

--------------------------------

### HyloInstallationLayer Class Documentation

Source: https://storybook.hyperlocalhq.com/hylo-storybook/typedoc/classes/HyloList

Documentation for the HyloInstallationLayer class. This class might be related to installation processes or layers.

```APIDOC
Class: HyloInstallationLayer
Description: Manages or represents an installation layer or process.
Details: Refer to the linked TypeDoc for specific methods, properties, and usage.
```

--------------------------------

### HyloInstallationLayer Methods

Source: https://storybook.hyperlocalhq.com/hylo-storybook/typedoc/classes/HyloInstallationLayer

API documentation for methods within the HyloInstallationLayer class. These methods control installation prompts and user interaction states.

```APIDOC
HyloInstallationLayer Methods:

- beforeinstallprompt: Handles the beforeinstallprompt event for PWA installations.
- closeGoto: Closes a 'goto' interface or modal.
- installed: Indicates if the Hylo app is installed.
- open: Opens the installation layer or related UI.
- openHide: Hides the installation layer or related UI.
- possible: Checks if Hylo app installation is possible.
- srCloseLabel: Accessibility label for closing the layer.
- srEndLabel: Accessibility label for the end of a process.
- srLabel: General accessibility label for the layer.
- srStartLabel: Accessibility label for the start of a process.
- hyloAppInstallationPossible: Boolean indicating if Hylo app installation is possible.
- hyloAppInstalled: Boolean indicating if Hylo app is installed.
- hyloInstallationLayerOpend: Boolean indicating if the installation layer has been opened.
```

--------------------------------

### HyloInstallationLayer API Documentation

Source: https://storybook.hyperlocalhq.com/hylo-storybook/typedoc/classes/HyloSlider

API documentation for the HyloInstallationLayer component, related to installation or setup.

```APIDOC
HyloInstallationLayer:
  URL: https://storybook.hyperlocalhq.com/hylo-storybook/typedoc/classes/HyloInstallationLayer.html
```

--------------------------------

### HyloInstallationLayer API Documentation

Source: https://storybook.hyperlocalhq.com/hylo-storybook/typedoc/classes/HyloEmbed

API documentation for the HyloInstallationLayer component, related to installation or setup.

```APIDOC
HyloInstallationLayer:
  URL: https://storybook.hyperlocalhq.com/hylo-storybook/typedoc/classes/HyloInstallationLayer.html
```

--------------------------------

### HyloMenuWrapper CSS Transition Example

Source: https://storybook.hyperlocalhq.com/hylo-storybook/typedoc/classes/HyloMenuWrapper

Demonstrates CSS styling for the HyloMenuWrapper component, including opacity transitions and state changes for animated visibility.

```css
hylo-menu-wrapper {
  width: 100%;
  opacity: 1;
  transition: opacity 0.2s ease-out;
  transition-delay: 0.2s;

  &.transition {
    opacity: 0;
  }
}
```

--------------------------------

### Get Range Utility

Source: https://storybook.hyperlocalhq.com/hylo-storybook/typedoc/classes/HyloAccessibilityToggleArea

Generates an array of numbers within a specified range, inclusive of the start and end points. This is useful for creating sequences of numbers.

```APIDOC
getRange(start: number, end: number): number[]
  Generates an array of numbers from start to end (inclusive).
  Parameters:
    start: The starting number of the range.
    end: The ending number of the range.
  Returns:
    An array of numbers within the specified range.
```

--------------------------------

### HyloApp Component Documentation

Source: https://storybook.hyperlocalhq.com/hylo-storybook/typedoc/classes/HyloDjangoCmsFix

Documentation for the HyloApp component, which serves as the main application wrapper or entry point. It likely handles global state, routing, or core application setup.

```APIDOC
HyloApp:
  Description: Main application component.
  URL: https://storybook.hyperlocalhq.com/hylo-storybook/typedoc/classes/HyloApp.html
```

--------------------------------

### HyloInstallationLayer Component Documentation

Source: https://storybook.hyperlocalhq.com/hylo-storybook/typedoc/classes/HyloInstallationLayer

Documentation for the HyloInstallationLayer web component, which provides guidance and prompts for installing Progressive Web Apps (PWAs). It handles browser support for the 'beforeinstallprompt' event and offers slots for custom content.

```APIDOC
Class HyloInstallationLayer
  A layer which explains to the user how to install the PWA or provides a button for installation if the browser supports it. Judge, depending on the values of "possible" and "install", if you want to show the layer or a button which opens the layer. Usually you want possible == true and installed == false. These values can change -> listen to the events!
  If the browser supports the "beforeinstallprompt", an installation button is shown. Since the button can only be used ones, a description is show on how to install the app after the button is used.
  The layer comes with prerendered default content which can be overwritten. Here the slot names: header, button, desktop-chrome, desktop-edge, desktop-edge-html, mobile-chrome, mobile-edge, mobile-opera, mobile-opera-mini, mobile-firefox, mobile-samsung, mobile-safari, button-used, general.

  Properties:
    beforeinstallprompt: any
      The "beforeinstallprompt" event. If you're adding the layer after the event got fired, you can catch the event on your own and provide it by using this property.
    closeGoto: string
      A css query selector which defines an element to which the focus will shift when the layer gets closed. If the css query results in multiple elements, the first which is not hidden (display != "none" and visibility != "hidden") is used.
    installed: boolean = false
      Did the user agreed to install the app or is it the installed app already?
    open: boolean = false
      Is the layer open? Use the property to open/close the layer.
    openHide: string
      A css query selector which defines an element to which the focus will shift when the layer gets closed. If the css query results in multiple elements, the first which is not hidden (display != "none" and visibility != "hidden") is used.
    possible: boolean = false
      Is the PWA installation possible?
    srCloseLabel: string
      Accessibility label for the close button.
    srEndLabel: string
      Accessibility label for the end of the installation instructions.
    srLabel: string
      Accessibility label for the layer.
    srStartLabel: string
      Accessibility label for the start of the installation instructions.

  Events:
    hyloAppInstallationPossible
      Fired when the PWA installation becomes possible.
    hyloAppInstalled
      Fired when the PWA has been installed.
    hyloInstallationLayerOpend
      Fired when the installation layer is opened.
```

--------------------------------

### Get Range Utility

Source: https://storybook.hyperlocalhq.com/hylo-storybook/typedoc/classes/HyloAccessibilityList

Generates an array of numbers within a specified range, inclusive of the start and end points. This is useful for creating sequences of numbers.

```APIDOC
getRange(start: number, end: number): number[]
  Generates an array of numbers from start to end (inclusive).
  Parameters:
    start: The starting number of the range.
    end: The ending number of the range.
  Returns:
    An array of numbers within the specified range.
```

--------------------------------

### Get Range Utility

Source: https://storybook.hyperlocalhq.com/hylo-storybook/typedoc/classes/HyloMenuWrapper

Generates an array of numbers within a specified range, inclusive of the start and end points. This is useful for creating sequences of numbers.

```APIDOC
getRange(start: number, end: number): number[]
  Generates an array of numbers from start to end (inclusive).
  Parameters:
    start: The starting number of the range.
    end: The ending number of the range.
  Returns:
    An array of numbers within the specified range.
```

--------------------------------

### Get Range Utility

Source: https://storybook.hyperlocalhq.com/hylo-storybook/typedoc/classes/HyloCheckboxGroup

Generates an array of numbers within a specified range, inclusive of the start and end points. This is useful for creating sequences of numbers.

```APIDOC
getRange(start: number, end: number): number[]
  Generates an array of numbers from start to end (inclusive).
  Parameters:
    start: The starting number of the range.
    end: The ending number of the range.
  Returns:
    An array of numbers within the specified range.
```

--------------------------------

### HyperLocal WebComponents Overview

Source: https://storybook.hyperlocalhq.com/hylo-storybook/typedoc/classes/HyloTextarea

Lists key web components available within the HyperLocal WebComponents library, providing entry points for further API exploration.

```APIDOC
HyperLocal WebComponents:

Core Components:
  - GraphQLBuilder: Utility for building GraphQL queries.
  - HyloAccessibilityAnnouncement: Component for accessibility announcements.
  - HyloAccessibilityButton: Button component with accessibility features.
  - HyloAccessibilityDropdown: Dropdown component with accessibility features.
  - HyloAccessibilityFocus: Component for managing focus accessibility.
  - HyloAccessibilityFocusManager: Manager for accessibility focus.
  - HyloAccessibilityList: List component with accessibility features.

Refer to the project's TypeDoc documentation for detailed API information on each component.
```

--------------------------------

### HyperLocal WebComponents Overview

Source: https://storybook.hyperlocalhq.com/hylo-storybook/typedoc/classes/HyloButtonFont

Lists key web components available in the HyperLocal library, providing links to their respective documentation pages.

```APIDOC
GraphQLBuilder
HyloAccessibilityAnnouncement
HyloAccessibilityButton
HyloAccessibilityDropdown
HyloAccessibilityFocus
HyloAccessibilityFocusManager
HyloAccessibilityList
HyloAccessibilityToggleArea
HyloAccordion
HyloAccordionItem
HyloAccordionItemBody
HyloAccordionItemHeader
HyloAd
HyloAnchorMenu
HyloApolloClient
HyloApp
HyloAudio
HyloBackdrop
HyloBreakpointListener
HyloButton
HyloButtonBack
HyloButtonContrast
HyloButtonFont
HyloButtonRotate
HyloCalendar
HyloCalendar2
HyloCard
HyloCardGrid
HyloCardLegacy
HyloCheckbox
HyloCheckboxGroup
HyloColorSchemeManager
HyloContent

(Note: This list represents component names. Detailed API documentation for each component can be found via the provided links in the source material.)
```

--------------------------------

### HyloMenuWrapper Properties and Methods

Source: https://storybook.hyperlocalhq.com/hylo-storybook/typedoc/classes/HyloMenuWrapper

Documentation for the HyloMenuWrapper class, detailing properties for controlling menu visibility based on URL paths and viewport sizes, as well as transition behavior. It includes properties for path matching, viewport-specific visibility, transition settings, and a method to check the current transition state.

```APIDOC
HyloMenuWrapper:
  Properties:
    path: any
      The path when the view should be visible. When providing a string, the given path is checked against the beginning of the actual url location. Multiple paths can be defined by separating them with a comma (e.g., "/events,/map"). Alternatively, a regular expression can be provided to be matched against the url location.
    sm: any
      Is visible in sm viewport size. If a string or RegExp is provided, it is used as "path" for this particular breakpoint.
    transition: boolean = true
      Does the wrapper use CSS transition to blend in/out the menu view? Defaults to true.
    transitionMax: number = 200
      Every transition is considered done after this amount of milliseconds. No transition should take longer than this. Defaults to 200.
    vertical: any
      Is visible in vertical viewport orientation. If a string or RegExp is provided, it is used as "path" for this particular orientation.
    view: string
      The view id of the menu. Must be a unique id used to separate different menus by the hylo-menu-controller.
    xl: any
      Is visible in xl viewport size. If a string or RegExp is provided, it is used as "path" for this particular breakpoint.
    xs: any
      Is visible in xs viewport size. If a string or RegExp is provided, it is used as "path" for this particular breakpoint.

  Methods:
    getTransitioning(): Promise<boolean>
      Returns if the wrapper is currently in a CSS transition.
      - Returns: Promise<boolean> - A promise that resolves to a boolean indicating if a transition is active.
      - Visibility: Protected
      - Inherited: Yes
```

--------------------------------

### Icon Size Adjustment Configuration Example

Source: https://storybook.hyperlocalhq.com/hylo-storybook/typedoc/classes/HyloIconsSizeAdjustments

Example JSON structure for configuring icon size adjustments. It maps CSS classes applied to the root element to a multiplier, which can be a number or a CSS variable.

```JSON
{
  "document-root-class-2": 2,
  "document-root-class-3": "--css-variable"
}
```

--------------------------------

### HyloTemplate Routing Example

Source: https://storybook.hyperlocalhq.com/hylo-storybook/typedoc/classes/HyloTemplate

Example demonstrating how to define dynamic page switches using ion-route components wrapped by a hylo-router. It shows how different paths can load either a specific component ('page-component') or the generic 'hylo-template' for dynamic content injection.

```HTML
<ion-route url="/page/" component="page-component"></ion-route>
<ion-route url="/:path1/" component="hylo-template"></ion-route>
<ion-route url="/:path1/:path2/" component="hylo-template"></ion-route>
<ion-route url="/:path1/:path2/:path3" component="hylo-template"></ion-route>
```

--------------------------------

### HyperLocal WebComponents Overview

Source: https://storybook.hyperlocalhq.com/hylo-storybook/typedoc/classes/HyloButton

Lists the available web components within the HyperLocal library. This provides an overview of the different UI elements and utilities offered, linking to their specific documentation.

```APIDOC
HyperLocal WebComponents:
  GraphQLBuilder
  HyloAccessibilityAnnouncement
  HyloAccessibilityButton
  HyloAccessibilityDropdown
  HyloAccessibilityFocus
  HyloAccessibilityFocusManager
  HyloAccessibilityList
  HyloAccessibilityToggleArea
  HyloAccordion
  HyloAccordionItem
  HyloAccordionItemBody
  HyloAccordionItemHeader
  HyloAd
  HyloAnchorMenu
  HyloApolloClient
  HyloApp
  HyloAudio
  HyloBackdrop
  HyloBreakpointListener
  HyloButton
  HyloButtonBack
```

--------------------------------

### HyloInstallationLayer Class Documentation

Source: https://storybook.hyperlocalhq.com/hylo-storybook/typedoc/classes/HyloIconsSizeAdjustments

Documentation for the HyloInstallationLayer class. This class might be related to installation processes or layers.

```APIDOC
Class: HyloInstallationLayer
Description: Manages or represents an installation layer or process.
Details: Refer to the linked TypeDoc for specific methods, properties, and usage.
```

--------------------------------

### HyloTipLayer API

Source: https://storybook.hyperlocalhq.com/hylo-storybook/typedoc/functions/enableKeyboardInteractivity

API documentation for the HyloTipLayer component. This component likely displays tooltips, popovers, or informational tips.

```APIDOC
HyloTipLayer:
  // Component for displaying contextual tips or information.
  // Often triggered by hover or focus events on other elements.
```

--------------------------------

### extractPlainText Function

Source: https://storybook.hyperlocalhq.com/hylo-storybook/typedoc/classes/HyloDjangoEncryptedEmail

Documentation for the extractPlainText function, used to strip HTML tags and get plain text.

```APIDOC
extractPlainText:
  Description: Extracts plain text content from an HTML string by removing all HTML tags.
  Parameters:
    htmlString: The string containing HTML.
  Returns: A string containing only the plain text content.
  Usage: Useful for displaying content without formatting or for text analysis.
  Example:
    extractPlainText('<p>Hello <b>world</b>!</p>') // returns 'Hello world!'
  Details: The linked documentation may specify how it handles special HTML entities or script tags.
```

--------------------------------

### HyloButtonBack API

Source: https://storybook.hyperlocalhq.com/hylo-storybook/typedoc/classes/HyloCardGrid

Documentation for HyloButtonBack. Details its API for creating back navigation buttons. Full details available at the linked URL.

```APIDOC
HyloButtonBack:
  URL: https://storybook.hyperlocalhq.com/hylo-storybook/typedoc/classes/HyloButtonBack.html
  Description: Component for back navigation buttons.
```

--------------------------------

### extractPlainText Function

Source: https://storybook.hyperlocalhq.com/hylo-storybook/typedoc/classes/HyloAccordionItemBody

Documentation for the extractPlainText function, used to strip HTML tags and get plain text.

```APIDOC
extractPlainText:
  Description: Extracts plain text content from an HTML string by removing all HTML tags.
  Parameters:
    htmlString: The string containing HTML.
  Returns: A string containing only the plain text content.
  Usage: Useful for displaying content without formatting or for text analysis.
  Example:
    extractPlainText('<p>Hello <b>world</b>!</p>') // returns 'Hello world!'
  Details: The linked documentation may specify how it handles special HTML entities or script tags.
```

--------------------------------

### HyperLocal WebComponents Overview

Source: https://storybook.hyperlocalhq.com/hylo-storybook/typedoc/classes/HyloBreakpointListener

Lists various component classes available in the HyperLocal WebComponents library, covering UI elements, utility classes, and integration components.

```APIDOC
GraphQLBuilder
HyloAccessibilityAnnouncement
HyloAccessibilityButton
HyloAccessibilityDropdown
HyloAccessibilityFocus
HyloAccessibilityFocusManager
HyloAccessibilityList
HyloAccessibilityToggleArea
HyloAccordion
HyloAccordionItem
HyloAccordionItemBody
HyloAccordionItemHeader
HyloAd
HyloAnchorMenu
HyloApolloClient
HyloApp
HyloAudio
HyloBackdrop
HyloButton
HyloButtonBack
HyloButtonContrast
HyloButtonFont
HyloButtonRotate
HyloCalendar
HyloCalendar2
HyloCard
HyloCardGrid
```

--------------------------------

### HyloInstallationLayer Class Documentation

Source: https://storybook.hyperlocalhq.com/hylo-storybook/typedoc/classes/HyloSrOnly

Documentation for the HyloInstallationLayer class. This class might be related to installation processes or layers.

```APIDOC
Class: HyloInstallationLayer
Description: Manages or represents an installation layer or process.
Details: Refer to the linked TypeDoc for specific methods, properties, and usage.
```

--------------------------------

### HyperLocal WebComponents List

Source: https://storybook.hyperlocalhq.com/hylo-storybook/typedoc/classes/HyloIcon

Lists all available HyperLocal WebComponents documented in Storybook. Each entry links to the specific component's documentation, detailing its API and usage.

```APIDOC
Available WebComponents:

- GraphQLBuilder: https://storybook.hyperlocalhq.com/hylo-storybook/typedoc/classes/GraphQLBuilder.html
- HyloAccessibilityAnnouncement: https://storybook.hyperlocalhq.com/hylo-storybook/typedoc/classes/HyloAccessibilityAnnouncement.html
- HyloAccessibilityButton: https://storybook.hyperlocalhq.com/hylo-storybook/typedoc/classes/HyloAccessibilityButton.html
- HyloAccessibilityDropdown: https://storybook.hyperlocalhq.com/hylo-storybook/typedoc/classes/HyloAccessibilityDropdown.html
- HyloAccessibilityFocus: https://storybook.hyperlocalhq.com/hylo-storybook/typedoc/classes/HyloAccessibilityFocus.html
- HyloAccessibilityFocusManager: https://storybook.hyperlocalhq.com/hylo-storybook/typedoc/classes/HyloAccessibilityFocusManager.html
- HyloAccessibilityList: https://storybook.hyperlocalhq.com/hylo-storybook/typedoc/classes/HyloAccessibilityList.html
- HyloAccessibilityToggleArea: https://storybook.hyperlocalhq.com/hylo-storybook/typedoc/classes/HyloAccessibilityToggleArea.html
- HyloAccordion: https://storybook.hyperlocalhq.com/hylo-storybook/typedoc/classes/HyloAccordion.html
- HyloAccordionItem: https://storybook.hyperlocalhq.com/hylo-storybook/typedoc/classes/HyloAccordionItem.html
- HyloAccordionItemBody: https://storybook.hyperlocalhq.com/hylo-storybook/typedoc/classes/HyloAccordionItemBody.html
- HyloAccordionItemHeader: https://storybook.hyperlocalhq.com/hylo-storybook/typedoc/classes/HyloAccordionItemHeader.html
- HyloAd: https://storybook.hyperlocalhq.com/hylo-storybook/typedoc/classes/HyloAd.html
- HyloAnchorMenu: https://storybook.hyperlocalhq.com/hylo-storybook/typedoc/classes/HyloAnchorMenu.html
- HyloApolloClient: https://storybook.hyperlocalhq.com/hylo-storybook/typedoc/classes/HyloApolloClient.html
- HyloApp: https://storybook.hyperlocalhq.com/hylo-storybook/typedoc/classes/HyloApp.html
- HyloAudio: https://storybook.hyperlocalhq.com/hylo-storybook/typedoc/classes/HyloAudio.html
- HyloBackdrop: https://storybook.hyperlocalhq.com/hylo-storybook/typedoc/classes/HyloBackdrop.html
- HyloBreakpointListener: https://storybook.hyperlocalhq.com/hylo-storybook/typedoc/classes/HyloBreakpointListener.html
- HyloButton: https://storybook.hyperlocalhq.com/hylo-storybook/typedoc/classes/HyloButton.html
- HyloButtonBack: https://storybook.hyperlocalhq.com/hylo-storybook/typedoc/classes/HyloButtonBack.html
- HyloButtonContrast: https://storybook.hyperlocalhq.com/hylo-storybook/typedoc/classes/HyloButtonContrast.html
- HyloButtonFont: https://storybook.hyperlocalhq.com/hylo-storybook/typedoc/classes/HyloButtonFont.html
- HyloButtonRotate: https://storybook.hyperlocalhq.com/hylo-storybook/typedoc/classes/HyloButtonRotate.html
- HyloCalendar: https://storybook.hyperlocalhq.com/hylo-storybook/typedoc/classes/HyloCalendar.html
- HyloCalendar2: https://storybook.hyperlocalhq.com/hylo-storybook/typedoc/classes/HyloCalendar2.html
- HyloCard: https://storybook.hyperlocalhq.com/hylo-storybook/typedoc/classes/HyloCard.html
- HyloCardGrid: https://storybook.hyperlocalhq.com/hylo-storybook/typedoc/classes/HyloCardGrid.html
- HyloCardLegacy: https://storybook.hyperlocalhq.com/hylo-storybook/typedoc/classes/HyloCardLegacy.html
- HyloCheckbox: https://storybook.hyperlocalhq.com/hylo-storybook/typedoc/classes/HyloCheckbox.html
- HyloCheckboxGroup: https://storybook.hyperlocalhq.com/hylo-storybook/typedoc/classes/HyloCheckboxGroup.html
```

--------------------------------

### HyloMenuWrapper API Documentation

Source: https://storybook.hyperlocalhq.com/hylo-storybook/typedoc/classes/HyloMenuWrapper

Comprehensive API documentation for the HyloMenuWrapper class, detailing its properties for controlling visibility, transitions, and responsiveness, along with lifecycle hook methods.

```APIDOC
Class HyloMenuWrapper:
  Wraps a menu view of a hylo-menu-controller component.
  The controller expects the wrapper to have a css transition from blending in/out state to/from normal visible state. Define the normal visible style and transition parameters and then add the transitional styles for the beginning/end state of the transition to a class "transition".
  The wrapper is listening for a transition event. If none occurs, the swapping of views fails. If you don't want to use transitions, unset the "transition" flag of the component.
  Place the components of the view inside the hylo-menu-wrapper component. The first direct child of the wrapper is checked for hook functions. If you define these methods, the wrapper will call these functions at a specific time of the view swapping cycle. Possible hook functions are: menuWillActivate(), menuDidActivate(), menuWillDeactivate(), menuDidDeactivate().
  Also if the url path changes and the first child defined a method locationChanged(), the wrapper will call this function with the new url location as parameter when the url location changed and after the first load of the component. locationChanged() will be called after possible calls of the swapping cycle functions.
  If you don't define a viewport size and/or orientation, the view is used for all sizes and/or orientations. A hylo-breakpoint-listener component must be present in your app to use different viewport sizes and/or orientations.

Properties:
  bodyClass: string
    Defines a class for the body tag.
    Activates the view if the body tag has this css class no matter whether a path still applies. All set breakpoint and/or orientation flags still apply.
  horizontal: any
    Is visible in horizontal viewport orientation. If a string or RegExp is provided, it is used as "path" for this particular orientation.
  lg: any
    Is visible in lg viewport size. If a string or RegExp is provided, it is used as "path" for this particular breakpoint.
  md: any
    Is visible in md viewport size. If a string or RegExp is provided, it is used as "path" for this particular breakpoint.
  sm: any
    Is visible in sm viewport size. If a string or RegExp is provided, it is used as "path" for this particular breakpoint.
  path: string | RegExp
    The path to match for this view.
  transition: boolean
    Flag to enable/disable CSS transitions for view swapping.
  transitionMax: boolean
    Flag to enable/disable CSS transitions for view swapping when max breakpoints are met.
  vertical: any
    Is visible in vertical viewport orientation. If a string or RegExp is provided, it is used as "path" for this particular orientation.
  view: string
    The name of the view to display.
  xl: any
    Is visible in xl viewport size. If a string or RegExp is provided, it is used as "path" for this particular breakpoint.
  xs: any
    Is visible in xs viewport size. If a string or RegExp is provided, it is used as "path" for this particular breakpoint.

Methods:
  getTransitioning(): boolean
    Returns the current transitioning state of the wrapper.

Lifecycle Hooks (called on the first direct child of the wrapper):
  menuWillActivate(): void
    Called before the menu view is activated.
  menuDidActivate(): void
    Called after the menu view has been activated.
  menuWillDeactivate(): void
    Called before the menu view is deactivated.
  menuDidDeactivate(): void
    Called after the menu view has been deactivated.
  locationChanged(location: string): void
    Called when the URL path changes, after the first load and after view swapping functions. Receives the new URL location as a parameter.
```

--------------------------------

### HyloInstallationLayer Class Documentation

Source: https://storybook.hyperlocalhq.com/hylo-storybook/typedoc/classes/HyloPageWidth

Documentation for the HyloInstallationLayer class. This class might be related to installation processes or layers.

```APIDOC
Class: HyloInstallationLayer
Description: Manages or represents an installation layer or process.
Details: Refer to the linked TypeDoc for specific methods, properties, and usage.
```

--------------------------------

### HyloInstallationLayer Class Documentation

Source: https://storybook.hyperlocalhq.com/hylo-storybook/typedoc/classes/HyloNavigationCard

Documentation for the HyloInstallationLayer class. This class might be related to installation processes or layers.

```APIDOC
Class: HyloInstallationLayer
Description: Manages or represents an installation layer or process.
Details: Refer to the linked TypeDoc for specific methods, properties, and usage.
```

--------------------------------

### layerLabelStart

Source: https://storybook.hyperlocalhq.com/hylo-storybook/typedoc/classes/HyloVideo

Specifies the label for the start marker of the player layer, aiding navigation and accessibility. The default label is 'Media Player Layer Anfang', associated with the translation key 'videoLayerLabelStart'.

```TypeScript
layerLabelStart: string = 'Media Player Layer Anfang'
```

--------------------------------

### HyloButtonBack API

Source: https://storybook.hyperlocalhq.com/hylo-storybook/typedoc/classes/HyloReplaceImages

API documentation for HyloButtonBack, a button component specifically for navigating back.

```APIDOC
HyloButtonBack:
  - Button component for back navigation.
  - (Specific methods and properties not detailed in the provided text.)
```

--------------------------------

### HyloInstallationLayer Class Documentation

Source: https://storybook.hyperlocalhq.com/hylo-storybook/typedoc/classes/HyloListTourDivider

Documentation for the HyloInstallationLayer class. This class might be related to installation processes or layers.

```APIDOC
Class: HyloInstallationLayer
Description: Manages or represents an installation layer or process.
Details: Refer to the linked TypeDoc for specific methods, properties, and usage.
```

--------------------------------

### HyloMenuController API Documentation

Source: https://storybook.hyperlocalhq.com/hylo-storybook/typedoc/classes/HyloMenuController

API reference for the HyloMenuController class, detailing methods for programmatic control over menu view transitions and updates. It outlines parameters, return types, and usage contexts for each method.

```APIDOC
Class HyloMenuController
  Manages multiple views of a menu by blending in and out different menu components depending on url/path, breakpoints and/or orientation. Only one view can be active at the same time.

  Dependencies:
    - A hylo-location-listener component must be present in your app.

  Methods:

  changeView(view: string): Promise<void>
    - Changes the view of the menu.
    - Should not be used when an automated view change is in progress. Use the "bodyClass" property of the hylo-menu-wrapper component and the update() function instead.
    - Parameters:
      - view (string): The view id defined by a hylo-menu-wrapper component.
    - Returns:
      - Promise<void>: A promise that resolves when the view change is complete.

  update(): Promise<void>
    - Updates the current view.
    - Should be called if the conditions for the displayed view changed without having a change been triggered automatically.
    - Also, the functions "componentDidActivate", "componentWillDeactivate" and "componentWillReactivate" of the hylo-nav and hylo-router-component respectively are fired after the menu view change got triggered. For any changes done in these functions which affect the menu view, you have to call the update function.
    - Returns:
      - Promise<void>: A promise that resolves when the update is complete.
    - Member Visibility:
      - Protected
      - Inherited
```

--------------------------------

### Hylo Menu Controller and Wrapper API

Source: https://storybook.hyperlocalhq.com/hylo-storybook/typedoc/classes/HyloCardGrid

API documentation for HyloMenuController and HyloMenuWrapper, managing menu states and UI.

```APIDOC
HyloMenuController:
  Description: Manages the state and behavior of menus, such as opening/closing.
  Methods:
    openMenu(menuId: string):
      - Opens a specific menu.
    closeMenu(menuId: string):
      - Closes a specific menu.
    toggleMenu(menuId: string):
      - Toggles the state of a specific menu.

HyloMenuWrapper:
  Description: A wrapper component for menu items, often used with HyloMenuController.
  Props:
    menuId: string
      - Identifier for the menu this wrapper controls.
    children: React.ReactNode
      - The content of the menu.
```

--------------------------------

### HyloInstallationLayer Class Documentation

Source: https://storybook.hyperlocalhq.com/hylo-storybook/typedoc/classes/HyloListSimple

Documentation for the HyloInstallationLayer class. This class might be related to installation processes or layers.

```APIDOC
Class: HyloInstallationLayer
Description: Manages or represents an installation layer or process.
Details: Refer to the linked TypeDoc for specific methods, properties, and usage.
```

--------------------------------

### Hylo Menu Controller and Wrapper API

Source: https://storybook.hyperlocalhq.com/hylo-storybook/typedoc/classes/HyloButtonContrast

API documentation for HyloMenuController and HyloMenuWrapper, managing menu states and UI.

```APIDOC
HyloMenuController:
  Description: Manages the state and behavior of menus, such as opening/closing.
  Methods:
    openMenu(menuId: string):
      - Opens a specific menu.
    closeMenu(menuId: string):
      - Closes a specific menu.
    toggleMenu(menuId: string):
      - Toggles the state of a specific menu.

HyloMenuWrapper:
  Description: A wrapper component for menu items, often used with HyloMenuController.
  Props:
    menuId: string
      - Identifier for the menu this wrapper controls.
    children: React.ReactNode
      - The content of the menu.
```

--------------------------------

### HyloInstallationLayer Class Documentation

Source: https://storybook.hyperlocalhq.com/hylo-storybook/typedoc/classes/HyloHiddenMarker

Documentation for the HyloInstallationLayer class. This class might be related to installation processes or layers.

```APIDOC
Class: HyloInstallationLayer
Description: Manages or represents an installation layer or process.
Details: Refer to the linked TypeDoc for specific methods, properties, and usage.
```

--------------------------------

### HyloApp API

Source: https://storybook.hyperlocalhq.com/hylo-storybook/typedoc/classes/HyloListDestination

Documentation for the HyloApp component, part of the HyperLocal WebComponents library. This component likely serves as the main application container or entry point.

```APIDOC
HyloApp:
  - Description: The main application component or entry point.
  - Link: https://storybook.hyperlocalhq.com/hylo-storybook/typedoc/classes/HyloApp.html
```

--------------------------------

### Hylo Menu Controller and Wrapper API

Source: https://storybook.hyperlocalhq.com/hylo-storybook/typedoc/classes/HyloSpace

API documentation for HyloMenuController and HyloMenuWrapper, managing menu states and UI.

```APIDOC
HyloMenuController:
  Description: Manages the state and behavior of menus, such as opening/closing.
  Methods:
    openMenu(menuId: string):
      - Opens a specific menu.
    closeMenu(menuId: string):
      - Closes a specific menu.
    toggleMenu(menuId: string):
      - Toggles the state of a specific menu.

HyloMenuWrapper:
  Description: A wrapper component for menu items, often used with HyloMenuController.
  Props:
    menuId: string
      - Identifier for the menu this wrapper controls.
    children: React.ReactNode
      - The content of the menu.
```

--------------------------------

### HyloInstallationLayer Class Documentation

Source: https://storybook.hyperlocalhq.com/hylo-storybook/typedoc/classes/HyloFont

Documentation for the HyloInstallationLayer class. This class might be related to installation processes or layers.

```APIDOC
Class: HyloInstallationLayer
Description: Manages or represents an installation layer or process.
Details: Refer to the linked TypeDoc for specific methods, properties, and usage.
```

--------------------------------

### HyperLocal WebComponents Library

Source: https://storybook.hyperlocalhq.com/hylo-storybook/typedoc/classes/HyloTemplate

Overview of the HyperLocal WebComponents library, listing available classes for building user interfaces and handling application logic.

```APIDOC
GraphQLBuilder:
  Description: Utility for building GraphQL queries.

HyloAccessibilityAnnouncement:
  Description: Component for accessibility announcements.

HyloAccessibilityButton:
  Description: Button component with accessibility features.

HyloAccessibilityDropdown:
  Description: Dropdown component with accessibility features.

HyloAccessibilityFocus:
  Description: Manages focus for accessibility.

HyloAccessibilityFocusManager:
  Description: Manager for accessibility focus.

HyloAccessibilityList:
  Description: List component with accessibility features.

HyloAccessibilityToggleArea:
  Description: Toggles an area for accessibility.

HyloAccordion:
  Description: Accordion component.

HyloAccordionItem:
  Description: Item within an accordion.

HyloAccordionItemBody:
  Description: Body content of an accordion item.

HyloAccordionItemHeader:
  Description: Header of an accordion item.

HyloAd:
  Description: Component for displaying advertisements.

HyloAnchorMenu:
  Description: Navigation menu based on anchors.

HyloApolloClient:
  Description: Wrapper for Apollo Client integration.

HyloApp:
  Description: Main application component.

HyloAudio:
  Description: Component for audio playback.

HyloBackdrop:
  Description: Component for creating a backdrop effect.

HyloBreakpointListener:
  Description: Listens for browser breakpoint changes.

HyloButton:
  Description: Generic button component.

HyloButtonBack:
  Description: Button for navigating back.

HyloButtonContrast:
  Description: Button for contrast adjustments.

HyloButtonFont:
  Description: Button for font size adjustments.

HyloButtonRotate:
  Description: Button for rotation functionality.

HyloCalendar:
  Description: Calendar component.

HyloCalendar2:
  Description: An alternative calendar component.

HyloCard:
  Description: Card component for displaying content.

HyloCardGrid:
  Description: Component for displaying cards in a grid.

HyloCardLegacy:
  Description: Legacy card component.

HyloCheckbox:
  Description: Checkbox input component.

HyloCheckboxGroup:
  Description: Component for grouping checkboxes.
```

--------------------------------

### HyloInstallationLayer Class Documentation

Source: https://storybook.hyperlocalhq.com/hylo-storybook/typedoc/classes/HyloAudio

Documentation for the HyloInstallationLayer class. This class might be related to installation processes or layers.

```APIDOC
Class: HyloInstallationLayer
Description: Manages or represents an installation layer or process.
Details: Refer to the linked TypeDoc for specific methods, properties, and usage.
```

--------------------------------

### Hylo Components and Utilities API Documentation

Source: https://storybook.hyperlocalhq.com/hylo-storybook/typedoc/classes/HyloApolloClient

This section lists various components and utility functions available in the Hylo project, as documented by Storybook. Each entry links to detailed API information including class signatures, method parameters, return types, and usage examples.

```APIDOC
HyloNavigationCard:
  API Documentation for the HyloNavigationCard component.

HyloOsSniffer:
  API Documentation for the HyloOsSniffer component.

HyloPageDefault:
  API Documentation for the HyloPageDefault component.

HyloPageGridlover:
  API Documentation for the HyloPageGridlover component.

HyloPageList:
  API Documentation for the HyloPageList component.

HyloPageMenu:
  API Documentation for the HyloPageMenu component.

HyloPageRoot:
  API Documentation for the HyloPageRoot component.

HyloPageRootLegacy:
  API Documentation for the HyloPageRootLegacy component.

HyloPageWidth:
  API Documentation for the HyloPageWidth component.

HyloReplaceImages:
  API Documentation for the HyloReplaceImages component.

HyloResponsiveImage:
  API Documentation for the HyloResponsiveImage component.

HyloRouter:
  API Documentation for the HyloRouter component.

HyloRouterLink:
  API Documentation for the HyloRouterLink component.

HyloScrollArea:
  API Documentation for the HyloScrollArea component.

HyloScrollShiftFix:
  API Documentation for the HyloScrollShiftFix component.

HyloScrollTop:
  API Documentation for the HyloScrollTop component.

HyloScrollbar:
  API Documentation for the HyloScrollbar component.

HyloSelect:
  API Documentation for the HyloSelect component.

HyloSidebar:
  API Documentation for the HyloSidebar component.

HyloSkipTo:
  API Documentation for the HyloSkipTo component.

HyloSlide:
  API Documentation for the HyloSlide component.

HyloSlider:
  API Documentation for the HyloSlider component.

HyloSnapSlider:
  API Documentation for the HyloSnapSlider component.

HyloSnapSliderItem:
  API Documentation for the HyloSnapSliderItem component.

HyloSpace:
  API Documentation for the HyloSpace component.

HyloSrOnly:
  API Documentation for the HyloSrOnly component.

HyloSrPause:
  API Documentation for the HyloSrPause component.

HyloSwipeListener:
  API Documentation for the HyloSwipeListener component.

HyloTab:
  API Documentation for the HyloTab component.

HyloTabBody:
  API Documentation for the HyloTabBody component.

HyloTabHeader:
  API Documentation for the HyloTabHeader component.

HyloTabs:
  API Documentation for the HyloTabs component.

HyloTemplate:
  API Documentation for the HyloTemplate component.

HyloTextHeight:
  API Documentation for the HyloTextHeight component.

HyloTextMore:
  API Documentation for the HyloTextMore component.

HyloTextWidth:
  API Documentation for the HyloTextWidth component.

HyloTextarea:
  API Documentation for the HyloTextarea component.

HyloTipLayer:
  API Documentation for the HyloTipLayer component.

HyloVideo:
  API Documentation for the HyloVideo component.

HyloViewHeightListener:
  API Documentation for the HyloViewHeightListener component.

JSONParser:
  API Documentation for the JSONParser class.

match_google_anaylitcs_tag:
  API Documentation for the match_google_anaylitcs_tag variable/function.

match_meta:
  API Documentation for the match_meta variable/function.

match_nothing:
  API Documentation for the match_nothing variable/function.

addToLocationSearch:
  API Documentation for the addToLocationSearch function.

adjustTimezone:
  API Documentation for the adjustTimezone function.
```

--------------------------------

### extractPlainText Function

Source: https://storybook.hyperlocalhq.com/hylo-storybook/typedoc/classes/HyloTextHeight

Documentation for the extractPlainText function, used to strip HTML tags and get plain text.

```APIDOC
extractPlainText:
  Description: Extracts plain text content from an HTML string by removing all HTML tags.
  Parameters:
    htmlString: The string containing HTML.
  Returns: A string containing only the plain text content.
  Usage: Useful for displaying content without formatting or for text analysis.
  Example:
    extractPlainText('<p>Hello <b>world</b>!</p>') // returns 'Hello world!'
  Details: The linked documentation may specify how it handles special HTML entities or script tags.
```

--------------------------------

### extractPlainText Function

Source: https://storybook.hyperlocalhq.com/hylo-storybook/typedoc/classes/HyloPageGridlover

Documentation for the extractPlainText function, used to strip HTML tags and get plain text.

```APIDOC
extractPlainText:
  Description: Extracts plain text content from an HTML string by removing all HTML tags.
  Parameters:
    htmlString: The string containing HTML.
  Returns: A string containing only the plain text content.
  Usage: Useful for displaying content without formatting or for text analysis.
  Example:
    extractPlainText('<p>Hello <b>world</b>!</p>') // returns 'Hello world!'
  Details: The linked documentation may specify how it handles special HTML entities or script tags.
```

--------------------------------

### HyperLocal WebComponents List

Source: https://storybook.hyperlocalhq.com/hylo-storybook/typedoc/classes/HyloTipLayer

A comprehensive list of available HyperLocal WebComponents, with links to their specific documentation for detailed API information, properties, and usage.

```APIDOC
GraphQLBuilder
HyloAccessibilityAnnouncement
HyloAccessibilityButton
HyloAccessibilityDropdown
HyloAccessibilityFocus
HyloAccessibilityFocusManager
HyloAccessibilityList
HyloAccessibilityToggleArea
HyloAccordion
HyloAccordionItem
HyloAccordionItemBody
HyloAccordionItemHeader
HyloAd
```

--------------------------------

### extractPlainText Function

Source: https://storybook.hyperlocalhq.com/hylo-storybook/typedoc/classes/HyloMapLocationOver

Documentation for the extractPlainText function, used to strip HTML tags and get plain text.

```APIDOC
extractPlainText:
  Description: Extracts plain text content from an HTML string by removing all HTML tags.
  Parameters:
    htmlString: The string containing HTML.
  Returns: A string containing only the plain text content.
  Usage: Useful for displaying content without formatting or for text analysis.
  Example:
    extractPlainText('<p>Hello <b>world</b>!</p>') // returns 'Hello world!'
  Details: The linked documentation may specify how it handles special HTML entities or script tags.
```

--------------------------------

### HyperLocal WebComponents API Overview

Source: https://storybook.hyperlocalhq.com/hylo-storybook/typedoc/classes/HyloAccordionItemHeader

Lists the primary HyperLocal WebComponents available, providing access points to their respective documentation and functionalities.

```APIDOC
HyperLocal WebComponents:
  GraphQLBuilder: A component for building GraphQL queries.
  HyloAccessibilityAnnouncement: Component for accessibility announcements.
  HyloAccessibilityButton: Button component with accessibility features.
  HyloAccessibilityDropdown: Dropdown component with accessibility features.
  HyloAccessibilityFocus: Component for managing accessibility focus.
  HyloAccessibilityFocusManager: Manager for accessibility focus.
  HyloAccessibilityList: List component with accessibility features.
  HyloAccessibilityToggleArea: Component for toggling accessibility areas.
  HyloAccordion: Component for creating accordion interfaces.
  HyloAccordionItem: Component for individual accordion items.
  HyloAccordionItemBody: Body content for accordion items.
  HyloAccordionItemHeader: Header for accordion items.
  HyloAd: Component for displaying advertisements.
  HyloAnchorMenu: Navigation menu component using anchor links.
  HyloApolloClient: Wrapper for Apollo Client integration.
  HyloApp: Root component for the HyperLocal application.
  HyloAudio: Component for audio playback.
  HyloBackdrop: Component for displaying a backdrop overlay.
  HyloBreakpointListener: Listener for responsive breakpoints.
  HyloButton: General-purpose button component.
  HyloButtonBack: Button component for navigating back.
  HyloButtonContrast: Button component for contrast adjustments.
  HyloButtonFont: Button component for font size adjustments.
  HyloButtonRotate: Button component for rotation actions.
  HyloCalendar: Calendar component.
  HyloCalendar2: An alternative calendar component.
  HyloCard: Component for displaying content in a card format.
  HyloCardGrid: Component for displaying cards in a grid layout.
  HyloCardLegacy: A legacy card component.
  HyloCheckbox: Checkbox input component.
  HyloCheckboxGroup: Group of checkbox input components.
  HyloColorSchemeManager: Manages the application's color scheme.
  HyloContent: Component for displaying content blocks.
  HyloCookieBanner: Component for displaying cookie consent banners.
```
Tokens:
Raw