focus-trap.d.ts 2.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. export interface IFocusTrap {
  2. inactive: boolean;
  3. readonly focused: boolean;
  4. focusFirstElement: (() => void);
  5. focusLastElement: (() => void);
  6. getFocusableElements: (() => HTMLElement[]);
  7. }
  8. /**
  9. * Focus trap web component.
  10. * @customElement focus-trap
  11. * @slot - Default content.
  12. */
  13. export declare class FocusTrap extends HTMLElement implements IFocusTrap {
  14. static get observedAttributes(): string[];
  15. /**
  16. * Determines whether the focus trap is active or not.
  17. * @attr
  18. */
  19. get inactive(): boolean;
  20. set inactive(value: boolean);
  21. private $backup;
  22. private debounceId;
  23. private $start;
  24. private $end;
  25. private _focused;
  26. /**
  27. * Returns whether the element currently has focus.
  28. */
  29. get focused(): boolean;
  30. /**
  31. * Attaches the shadow root.
  32. */
  33. constructor();
  34. /**
  35. * Hooks up the element.
  36. */
  37. connectedCallback(): void;
  38. /**
  39. * Tears down the element.
  40. */
  41. disconnectedCallback(): void;
  42. /**
  43. * When the attributes changes we need to re-render the template.
  44. */
  45. attributeChangedCallback(): void;
  46. /**
  47. * Focuses the first focusable element in the focus trap.
  48. */
  49. focusFirstElement(): void;
  50. /**
  51. * Focuses the last focusable element in the focus trap.
  52. */
  53. focusLastElement(): void;
  54. /**
  55. * Returns a list of the focusable children found within the element.
  56. */
  57. getFocusableElements(): HTMLElement[];
  58. /**
  59. * Focuses on either the last or first focusable element.
  60. * @param {boolean} trapToEnd
  61. */
  62. protected trapFocus(trapToEnd?: boolean): void;
  63. /**
  64. * When the element gains focus this function is called.
  65. */
  66. private onFocusIn;
  67. /**
  68. * When the element looses its focus this function is called.
  69. */
  70. private onFocusOut;
  71. /**
  72. * Updates the focused property and updates the view.
  73. * The update is debounced because the focusin and focusout out
  74. * might fire multiple times in a row. We only want to render
  75. * the element once, therefore waiting until the focus is "stable".
  76. * @param value
  77. */
  78. private updateFocused;
  79. /**
  80. * Updates the template.
  81. */
  82. protected render(): void;
  83. }