A panel component that extends GirafeResizableElement. Used as main Left and Right panels on the app. It has a state toggle manager that can activate or deactivate toggle paths based on changes in its state. It also has methods to shows/hide itself based on the state toggle paths and state.

To have the toggle on the state working, the component must have this structure, with a slot="main" and children with the data-toggle-path set:

Hierarchy (View Summary)

Constructors

Properties

activeTooltips: any[] = []
callbacks: Callback[] = []
closeButton?: HTMLElement
componentManager: ComponentManager
configManager: ConfigManager
displayStyle?: string
dock: "left" | "right" | "bottom"
gutter?: HTMLElement
lastHeight: number = 0
lastWidth: number = 0
maxHeight?: number
maxWidth?: number
minHeight?: number
minWidth?: number
name: string
prevX: number = 0
prevY: number = 0
rendered: boolean = false
shadow: ShadowRoot
stateManager: StateManager
styleUrl: null | string = null
styleUrls: string[] = ...
template: Hole | () => Hole
templateUrl: string = './template.html'
timeoutId?: Timeout
title: string = 'Unknown panel'
toggleSize: number = 0

Accessors

Methods

  • Deserialize an element and set the current element state to the deserialized one

    Parameters

    • _serializedElement: unknown

      The element serialization as returned by the serialize method

    Returns void

  • Convert the string in parameter with uHtml and return it. This allows to convert a string with html in a right html object. For example, htmlUnsafe('

    ') will return an html div object.

    Parameters

    • str: string

    Returns Hole

  • In the templates, sometimes for accessibility reasons, we have to support the KeyDown Event In those case, we often juste want to do the same as the click event when Enter or Space is pressed Then this method can be used : it just calls the click event on the same element

    Parameters

    • e: KeyboardEvent

    Returns void