sticky-styler.d.ts 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  1. /**
  2. * @license
  3. * Copyright Google LLC All Rights Reserved.
  4. *
  5. * Use of this source code is governed by an MIT-style license that can be
  6. * found in the LICENSE file at https://angular.io/license
  7. */
  8. /**
  9. * Directions that can be used when setting sticky positioning.
  10. * @docs-private
  11. */
  12. import { Direction } from '@angular/cdk/bidi';
  13. export declare type StickyDirection = 'top' | 'bottom' | 'left' | 'right';
  14. /**
  15. * List of all possible directions that can be used for sticky positioning.
  16. * @docs-private
  17. */
  18. export declare const STICKY_DIRECTIONS: StickyDirection[];
  19. /**
  20. * Applies and removes sticky positioning styles to the `CdkTable` rows and columns cells.
  21. * @docs-private
  22. */
  23. export declare class StickyStyler {
  24. private _isNativeHtmlTable;
  25. private _stickCellCss;
  26. direction: Direction;
  27. private _isBrowser;
  28. /**
  29. * @param _isNativeHtmlTable Whether the sticky logic should be based on a table
  30. * that uses the native `<table>` element.
  31. * @param _stickCellCss The CSS class that will be applied to every row/cell that has
  32. * sticky positioning applied.
  33. * @param direction The directionality context of the table (ltr/rtl); affects column positioning
  34. * by reversing left/right positions.
  35. * @param _isBrowser Whether the table is currently being rendered on the server or the client.
  36. */
  37. constructor(_isNativeHtmlTable: boolean, _stickCellCss: string, direction: Direction, _isBrowser?: boolean);
  38. /**
  39. * Clears the sticky positioning styles from the row and its cells by resetting the `position`
  40. * style, setting the zIndex to 0, and unsetting each provided sticky direction.
  41. * @param rows The list of rows that should be cleared from sticking in the provided directions
  42. * @param stickyDirections The directions that should no longer be set as sticky on the rows.
  43. */
  44. clearStickyPositioning(rows: HTMLElement[], stickyDirections: StickyDirection[]): void;
  45. /**
  46. * Applies sticky left and right positions to the cells of each row according to the sticky
  47. * states of the rendered column definitions.
  48. * @param rows The rows that should have its set of cells stuck according to the sticky states.
  49. * @param stickyStartStates A list of boolean states where each state represents whether the cell
  50. * in this index position should be stuck to the start of the row.
  51. * @param stickyEndStates A list of boolean states where each state represents whether the cell
  52. * in this index position should be stuck to the end of the row.
  53. */
  54. updateStickyColumns(rows: HTMLElement[], stickyStartStates: boolean[], stickyEndStates: boolean[]): void;
  55. /**
  56. * Applies sticky positioning to the row's cells if using the native table layout, and to the
  57. * row itself otherwise.
  58. * @param rowsToStick The list of rows that should be stuck according to their corresponding
  59. * sticky state and to the provided top or bottom position.
  60. * @param stickyStates A list of boolean states where each state represents whether the row
  61. * should be stuck in the particular top or bottom position.
  62. * @param position The position direction in which the row should be stuck if that row should be
  63. * sticky.
  64. *
  65. */
  66. stickRows(rowsToStick: HTMLElement[], stickyStates: boolean[], position: 'top' | 'bottom'): void;
  67. /**
  68. * When using the native table in Safari, sticky footer cells do not stick. The only way to stick
  69. * footer rows is to apply sticky styling to the tfoot container. This should only be done if
  70. * all footer rows are sticky. If not all footer rows are sticky, remove sticky positioning from
  71. * the tfoot element.
  72. */
  73. updateStickyFooterContainer(tableElement: Element, stickyStates: boolean[]): void;
  74. /**
  75. * Removes the sticky style on the element by removing the sticky cell CSS class, re-evaluating
  76. * the zIndex, removing each of the provided sticky directions, and removing the
  77. * sticky position if there are no more directions.
  78. */
  79. _removeStickyStyle(element: HTMLElement, stickyDirections: StickyDirection[]): void;
  80. /**
  81. * Adds the sticky styling to the element by adding the sticky style class, changing position
  82. * to be sticky (and -webkit-sticky), setting the appropriate zIndex, and adding a sticky
  83. * direction and value.
  84. */
  85. _addStickyStyle(element: HTMLElement, dir: StickyDirection, dirValue: number): void;
  86. /**
  87. * Calculate what the z-index should be for the element, depending on what directions (top,
  88. * bottom, left, right) have been set. It should be true that elements with a top direction
  89. * should have the highest index since these are elements like a table header. If any of those
  90. * elements are also sticky in another direction, then they should appear above other elements
  91. * that are only sticky top (e.g. a sticky column on a sticky header). Bottom-sticky elements
  92. * (e.g. footer rows) should then be next in the ordering such that they are below the header
  93. * but above any non-sticky elements. Finally, left/right sticky elements (e.g. sticky columns)
  94. * should minimally increment so that they are above non-sticky elements but below top and bottom
  95. * elements.
  96. */
  97. _getCalculatedZIndex(element: HTMLElement): string;
  98. /** Gets the widths for each cell in the provided row. */
  99. _getCellWidths(row: HTMLElement): number[];
  100. /**
  101. * Determines the left and right positions of each sticky column cell, which will be the
  102. * accumulation of all sticky column cell widths to the left and right, respectively.
  103. * Non-sticky cells do not need to have a value set since their positions will not be applied.
  104. */
  105. _getStickyStartColumnPositions(widths: number[], stickyStates: boolean[]): number[];
  106. /**
  107. * Determines the left and right positions of each sticky column cell, which will be the
  108. * accumulation of all sticky column cell widths to the left and right, respectively.
  109. * Non-sticky cells do not need to have a value set since their positions will not be applied.
  110. */
  111. _getStickyEndColumnPositions(widths: number[], stickyStates: boolean[]): number[];
  112. }