@oslokommune/punkt-elements
Version:
Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo
32 lines (31 loc) • 1.22 kB
TypeScript
import { ReactiveController, ReactiveControllerHost } from 'lit';
/**
* Tracker om fokus kom fra mus/touch eller tastatur og reflekterer det til et
* mål-element som `data-navtype="pointer"` (eller fjerner attributtet). CSS
* bruker dette til å skille dempet fokus (klikk) fra kraftig fokus (tab).
*
* Bakgrunn: nettlesere matcher alltid :focus-visible på tekstinputs uavhengig
* av om brukeren klikket eller tabbet seg dit. CSS alene kan derfor ikke skille
* disse to tilfellene.
*
* Bruk i en Lit-komponent:
*
* private _focusModality = new FocusModalityController(this, '.pkt-inputwrapper')
*
* `targetSelector` slås opp på hosten ved hver fokushendelse. Send `null`
* (eller utelat) for å bruke selve host-elementet som mål.
*/
export declare class FocusModalityController implements ReactiveController {
private host;
private targetSelector;
private pointerJustUsed;
private pointerTimeoutId;
constructor(host: ReactiveControllerHost & HTMLElement, targetSelector?: string | null);
hostConnected(): void;
hostDisconnected(): void;
private getTarget;
private setNavtype;
private handlePointerDown;
private handleFocusIn;
private handleFocusOut;
}