@kato-lee/cdk 14.2.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +8 -0
- package/_index.scss +8 -0
- package/a11y/_index.import.scss +2 -0
- package/a11y/_index.scss +102 -0
- package/a11y/index.d.ts +1212 -0
- package/a11y-prebuilt.css +1 -0
- package/accordion/index.d.ts +140 -0
- package/bidi/index.d.ts +80 -0
- package/clipboard/index.d.ts +115 -0
- package/coercion/index.d.ts +67 -0
- package/collections/index.d.ts +374 -0
- package/dialog/index.d.ts +469 -0
- package/drag-drop/index.d.ts +1614 -0
- package/esm2020/a11y/a11y-module.mjs +32 -0
- package/esm2020/a11y/a11y_public_index.mjs +5 -0
- package/esm2020/a11y/aria-describer/aria-describer.mjs +232 -0
- package/esm2020/a11y/aria-describer/aria-reference.mjs +44 -0
- package/esm2020/a11y/fake-event-detection.mjs +31 -0
- package/esm2020/a11y/focus-monitor/focus-monitor.mjs +451 -0
- package/esm2020/a11y/focus-trap/configurable-focus-trap-config.mjs +9 -0
- package/esm2020/a11y/focus-trap/configurable-focus-trap-factory.mjs +53 -0
- package/esm2020/a11y/focus-trap/configurable-focus-trap.mjs +51 -0
- package/esm2020/a11y/focus-trap/event-listener-inert-strategy.mjs +61 -0
- package/esm2020/a11y/focus-trap/focus-trap-inert-strategy.mjs +11 -0
- package/esm2020/a11y/focus-trap/focus-trap-manager.mjs +53 -0
- package/esm2020/a11y/focus-trap/focus-trap.mjs +402 -0
- package/esm2020/a11y/high-contrast-mode/high-contrast-mode-detector.mjs +109 -0
- package/esm2020/a11y/index.mjs +9 -0
- package/esm2020/a11y/input-modality/input-modality-detector.mjs +176 -0
- package/esm2020/a11y/interactivity-checker/interactivity-checker.mjs +238 -0
- package/esm2020/a11y/key-manager/activedescendant-key-manager.mjs +20 -0
- package/esm2020/a11y/key-manager/focus-key-manager.mjs +29 -0
- package/esm2020/a11y/key-manager/list-key-manager.mjs +321 -0
- package/esm2020/a11y/live-announcer/live-announcer-tokens.mjs +19 -0
- package/esm2020/a11y/live-announcer/live-announcer.mjs +178 -0
- package/esm2020/a11y/public-api.mjs +26 -0
- package/esm2020/accordion/accordion-item.mjs +167 -0
- package/esm2020/accordion/accordion-module.mjs +24 -0
- package/esm2020/accordion/accordion.mjs +70 -0
- package/esm2020/accordion/accordion_public_index.mjs +5 -0
- package/esm2020/accordion/index.mjs +9 -0
- package/esm2020/accordion/public-api.mjs +11 -0
- package/esm2020/bidi/bidi-module.mjs +23 -0
- package/esm2020/bidi/bidi_public_index.mjs +5 -0
- package/esm2020/bidi/dir-document-token.mjs +33 -0
- package/esm2020/bidi/dir.mjs +69 -0
- package/esm2020/bidi/directionality.mjs +52 -0
- package/esm2020/bidi/index.mjs +9 -0
- package/esm2020/bidi/public-api.mjs +12 -0
- package/esm2020/clipboard/clipboard-module.mjs +23 -0
- package/esm2020/clipboard/clipboard.mjs +53 -0
- package/esm2020/clipboard/clipboard_public_index.mjs +5 -0
- package/esm2020/clipboard/copy-to-clipboard.mjs +99 -0
- package/esm2020/clipboard/index.mjs +9 -0
- package/esm2020/clipboard/pending-copy.mjs +69 -0
- package/esm2020/clipboard/public-api.mjs +12 -0
- package/esm2020/coercion/array.mjs +11 -0
- package/esm2020/coercion/boolean-property.mjs +12 -0
- package/esm2020/coercion/css-pixel-value.mjs +15 -0
- package/esm2020/coercion/element.mjs +16 -0
- package/esm2020/coercion/index.mjs +9 -0
- package/esm2020/coercion/number-property.mjs +21 -0
- package/esm2020/coercion/public-api.mjs +14 -0
- package/esm2020/coercion/string-array.mjs +38 -0
- package/esm2020/collections/array-data-source.mjs +21 -0
- package/esm2020/collections/collection-viewer.mjs +9 -0
- package/esm2020/collections/collections_public_index.mjs +5 -0
- package/esm2020/collections/data-source.mjs +19 -0
- package/esm2020/collections/dispose-view-repeater-strategy.mjs +47 -0
- package/esm2020/collections/index.mjs +9 -0
- package/esm2020/collections/public-api.mjs +17 -0
- package/esm2020/collections/recycle-view-repeater-strategy.mjs +128 -0
- package/esm2020/collections/selection-model.mjs +216 -0
- package/esm2020/collections/tree-adapter.mjs +9 -0
- package/esm2020/collections/unique-selection-dispatcher.mjs +55 -0
- package/esm2020/collections/view-repeater.mjs +14 -0
- package/esm2020/dialog/dialog-config.mjs +63 -0
- package/esm2020/dialog/dialog-container.mjs +278 -0
- package/esm2020/dialog/dialog-injectors.mjs +26 -0
- package/esm2020/dialog/dialog-module.mjs +42 -0
- package/esm2020/dialog/dialog-ref.mjs +76 -0
- package/esm2020/dialog/dialog.mjs +301 -0
- package/esm2020/dialog/dialog_public_index.mjs +5 -0
- package/esm2020/dialog/index.mjs +9 -0
- package/esm2020/dialog/public-api.mjs +14 -0
- package/esm2020/drag-drop/directives/assertions.mjs +18 -0
- package/esm2020/drag-drop/directives/config.mjs +14 -0
- package/esm2020/drag-drop/directives/drag-handle.mjs +66 -0
- package/esm2020/drag-drop/directives/drag-placeholder.mjs +36 -0
- package/esm2020/drag-drop/directives/drag-preview.mjs +47 -0
- package/esm2020/drag-drop/directives/drag.mjs +487 -0
- package/esm2020/drag-drop/directives/drop-list-group.mjs +53 -0
- package/esm2020/drag-drop/directives/drop-list.mjs +345 -0
- package/esm2020/drag-drop/dom/client-rect.mjs +64 -0
- package/esm2020/drag-drop/dom/clone-node.mjs +65 -0
- package/esm2020/drag-drop/dom/parent-position-tracker.mjs +76 -0
- package/esm2020/drag-drop/dom/styling.mjs +69 -0
- package/esm2020/drag-drop/dom/transition-duration.mjs +36 -0
- package/esm2020/drag-drop/drag-drop-module.mjs +57 -0
- package/esm2020/drag-drop/drag-drop-registry.mjs +231 -0
- package/esm2020/drag-drop/drag-drop.mjs +57 -0
- package/esm2020/drag-drop/drag-drop_public_index.mjs +5 -0
- package/esm2020/drag-drop/drag-events.mjs +9 -0
- package/esm2020/drag-drop/drag-parent.mjs +16 -0
- package/esm2020/drag-drop/drag-ref.mjs +1146 -0
- package/esm2020/drag-drop/drag-utils.mjs +60 -0
- package/esm2020/drag-drop/drop-list-ref.mjs +577 -0
- package/esm2020/drag-drop/index.mjs +9 -0
- package/esm2020/drag-drop/public-api.mjs +23 -0
- package/esm2020/drag-drop/sorting/drop-list-sort-strategy.mjs +9 -0
- package/esm2020/drag-drop/sorting/single-axis-sort-strategy.mjs +341 -0
- package/esm2020/index.mjs +9 -0
- package/esm2020/keycodes/index.mjs +9 -0
- package/esm2020/keycodes/keycodes.mjs +127 -0
- package/esm2020/keycodes/keycodes_public_index.mjs +5 -0
- package/esm2020/keycodes/modifiers.mjs +18 -0
- package/esm2020/keycodes/public-api.mjs +10 -0
- package/esm2020/layout/breakpoints-observer.mjs +105 -0
- package/esm2020/layout/breakpoints.mjs +29 -0
- package/esm2020/layout/index.mjs +9 -0
- package/esm2020/layout/layout-module.mjs +19 -0
- package/esm2020/layout/layout_public_index.mjs +5 -0
- package/esm2020/layout/media-matcher.mjs +85 -0
- package/esm2020/layout/public-api.mjs +12 -0
- package/esm2020/listbox/index.mjs +9 -0
- package/esm2020/listbox/listbox-module.mjs +24 -0
- package/esm2020/listbox/listbox.mjs +872 -0
- package/esm2020/listbox/listbox_public_index.mjs +5 -0
- package/esm2020/listbox/public-api.mjs +10 -0
- package/esm2020/menu/context-menu-trigger.mjs +212 -0
- package/esm2020/menu/index.mjs +9 -0
- package/esm2020/menu/menu-aim.mjs +203 -0
- package/esm2020/menu/menu-bar.mjs +133 -0
- package/esm2020/menu/menu-base.mjs +187 -0
- package/esm2020/menu/menu-errors.mjs +22 -0
- package/esm2020/menu/menu-group.mjs +30 -0
- package/esm2020/menu/menu-interface.mjs +11 -0
- package/esm2020/menu/menu-item-checkbox.mjs +49 -0
- package/esm2020/menu/menu-item-radio.mjs +71 -0
- package/esm2020/menu/menu-item-selectable.mjs +42 -0
- package/esm2020/menu/menu-item.mjs +267 -0
- package/esm2020/menu/menu-module.mjs +62 -0
- package/esm2020/menu/menu-stack.mjs +156 -0
- package/esm2020/menu/menu-trigger-base.mjs +107 -0
- package/esm2020/menu/menu-trigger.mjs +291 -0
- package/esm2020/menu/menu.mjs +134 -0
- package/esm2020/menu/menu_public_index.mjs +5 -0
- package/esm2020/menu/pointer-focus-tracker.mjs +51 -0
- package/esm2020/menu/public-api.mjs +24 -0
- package/esm2020/observers/index.mjs +9 -0
- package/esm2020/observers/observe-content.mjs +187 -0
- package/esm2020/observers/observers_public_index.mjs +5 -0
- package/esm2020/observers/public-api.mjs +9 -0
- package/esm2020/overlay/dispatchers/base-overlay-dispatcher.mjs +52 -0
- package/esm2020/overlay/dispatchers/index.mjs +10 -0
- package/esm2020/overlay/dispatchers/overlay-keyboard-dispatcher.mjs +81 -0
- package/esm2020/overlay/dispatchers/overlay-outside-click-dispatcher.mjs +138 -0
- package/esm2020/overlay/fullscreen-overlay-container.mjs +94 -0
- package/esm2020/overlay/index.mjs +9 -0
- package/esm2020/overlay/overlay-config.mjs +45 -0
- package/esm2020/overlay/overlay-container.mjs +81 -0
- package/esm2020/overlay/overlay-directives.mjs +427 -0
- package/esm2020/overlay/overlay-module.mjs +29 -0
- package/esm2020/overlay/overlay-ref.mjs +427 -0
- package/esm2020/overlay/overlay-reference.mjs +9 -0
- package/esm2020/overlay/overlay.mjs +125 -0
- package/esm2020/overlay/overlay_public_index.mjs +5 -0
- package/esm2020/overlay/position/connected-position.mjs +88 -0
- package/esm2020/overlay/position/flexible-connected-position-strategy.mjs +985 -0
- package/esm2020/overlay/position/global-position-strategy.mjs +237 -0
- package/esm2020/overlay/position/overlay-position-builder.mjs +50 -0
- package/esm2020/overlay/position/position-strategy.mjs +9 -0
- package/esm2020/overlay/position/scroll-clip.mjs +40 -0
- package/esm2020/overlay/public-api.mjs +22 -0
- package/esm2020/overlay/scroll/block-scroll-strategy.mjs +80 -0
- package/esm2020/overlay/scroll/close-scroll-strategy.mjs +61 -0
- package/esm2020/overlay/scroll/index.mjs +14 -0
- package/esm2020/overlay/scroll/noop-scroll-strategy.mjs +17 -0
- package/esm2020/overlay/scroll/reposition-scroll-strategy.mjs +61 -0
- package/esm2020/overlay/scroll/scroll-strategy-options.mjs +55 -0
- package/esm2020/overlay/scroll/scroll-strategy.mjs +14 -0
- package/esm2020/platform/features/input-types.mjs +59 -0
- package/esm2020/platform/features/passive-listeners.mjs +36 -0
- package/esm2020/platform/features/scrolling.mjs +85 -0
- package/esm2020/platform/features/shadow-dom.mjs +54 -0
- package/esm2020/platform/features/test-environment.mjs +24 -0
- package/esm2020/platform/index.mjs +9 -0
- package/esm2020/platform/platform-module.mjs +19 -0
- package/esm2020/platform/platform.mjs +85 -0
- package/esm2020/platform/platform_public_index.mjs +5 -0
- package/esm2020/platform/public-api.mjs +15 -0
- package/esm2020/portal/dom-portal-outlet.mjs +158 -0
- package/esm2020/portal/index.mjs +9 -0
- package/esm2020/portal/portal-directives.mjs +246 -0
- package/esm2020/portal/portal-errors.mjs +51 -0
- package/esm2020/portal/portal-injector.mjs +28 -0
- package/esm2020/portal/portal.mjs +188 -0
- package/esm2020/portal/portal_public_index.mjs +5 -0
- package/esm2020/portal/public-api.mjs +12 -0
- package/esm2020/public-api.mjs +9 -0
- package/esm2020/scrolling/fixed-size-virtual-scroll.mjs +217 -0
- package/esm2020/scrolling/index.mjs +9 -0
- package/esm2020/scrolling/public-api.mjs +20 -0
- package/esm2020/scrolling/scroll-dispatcher.mjs +163 -0
- package/esm2020/scrolling/scrollable.mjs +176 -0
- package/esm2020/scrolling/scrolling-module.mjs +67 -0
- package/esm2020/scrolling/scrolling_public_index.mjs +5 -0
- package/esm2020/scrolling/viewport-ruler.mjs +146 -0
- package/esm2020/scrolling/virtual-for-of.mjs +298 -0
- package/esm2020/scrolling/virtual-scroll-repeater.mjs +9 -0
- package/esm2020/scrolling/virtual-scroll-strategy.mjs +11 -0
- package/esm2020/scrolling/virtual-scroll-viewport.mjs +437 -0
- package/esm2020/scrolling/virtual-scrollable-element.mjs +41 -0
- package/esm2020/scrolling/virtual-scrollable-window.mjs +40 -0
- package/esm2020/scrolling/virtual-scrollable.mjs +40 -0
- package/esm2020/stepper/index.mjs +9 -0
- package/esm2020/stepper/public-api.mjs +13 -0
- package/esm2020/stepper/step-header.mjs +30 -0
- package/esm2020/stepper/step-label.mjs +23 -0
- package/esm2020/stepper/stepper-button.mjs +56 -0
- package/esm2020/stepper/stepper-module.mjs +40 -0
- package/esm2020/stepper/stepper.mjs +458 -0
- package/esm2020/stepper/stepper_public_index.mjs +5 -0
- package/esm2020/table/can-stick.mjs +44 -0
- package/esm2020/table/cell.mjs +217 -0
- package/esm2020/table/coalesced-style-scheduler.mjs +91 -0
- package/esm2020/table/index.mjs +9 -0
- package/esm2020/table/public-api.mjs +20 -0
- package/esm2020/table/row.mjs +262 -0
- package/esm2020/table/sticky-position-listener.mjs +11 -0
- package/esm2020/table/sticky-styler.mjs +345 -0
- package/esm2020/table/table-errors.mjs +67 -0
- package/esm2020/table/table-module.mjs +94 -0
- package/esm2020/table/table.mjs +1065 -0
- package/esm2020/table/table_public_index.mjs +5 -0
- package/esm2020/table/text-column.mjs +153 -0
- package/esm2020/table/tokens.mjs +16 -0
- package/esm2020/text-field/autofill.mjs +113 -0
- package/esm2020/text-field/autosize.mjs +309 -0
- package/esm2020/text-field/index.mjs +9 -0
- package/esm2020/text-field/public-api.mjs +11 -0
- package/esm2020/text-field/text-field-module.mjs +24 -0
- package/esm2020/text-field/text-field_public_index.mjs +5 -0
- package/esm2020/tree/control/base-tree-control.mjs +57 -0
- package/esm2020/tree/control/flat-tree-control.mjs +51 -0
- package/esm2020/tree/control/nested-tree-control.mjs +58 -0
- package/esm2020/tree/control/tree-control.mjs +2 -0
- package/esm2020/tree/index.mjs +9 -0
- package/esm2020/tree/nested-node.mjs +112 -0
- package/esm2020/tree/node.mjs +35 -0
- package/esm2020/tree/outlet.mjs +39 -0
- package/esm2020/tree/padding.mjs +131 -0
- package/esm2020/tree/public-api.mjs +20 -0
- package/esm2020/tree/toggle.mjs +50 -0
- package/esm2020/tree/tree-errors.mjs +43 -0
- package/esm2020/tree/tree-module.mjs +49 -0
- package/esm2020/tree/tree.mjs +347 -0
- package/esm2020/tree/tree_public_index.mjs +5 -0
- package/esm2020/version.mjs +11 -0
- package/fesm2015/a11y.mjs +2473 -0
- package/fesm2015/a11y.mjs.map +1 -0
- package/fesm2015/accordion.mjs +414 -0
- package/fesm2015/accordion.mjs.map +1 -0
- package/fesm2015/bidi.mjs +194 -0
- package/fesm2015/bidi.mjs.map +1 -0
- package/fesm2015/cdk.mjs +30 -0
- package/fesm2015/cdk.mjs.map +1 -0
- package/fesm2015/clipboard.mjs +263 -0
- package/fesm2015/clipboard.mjs.map +1 -0
- package/fesm2015/coercion.mjs +132 -0
- package/fesm2015/coercion.mjs.map +1 -0
- package/fesm2015/collections.mjs +519 -0
- package/fesm2015/collections.mjs.map +1 -0
- package/fesm2015/dialog.mjs +1050 -0
- package/fesm2015/dialog.mjs.map +1 -0
- package/fesm2015/drag-drop.mjs +3812 -0
- package/fesm2015/drag-drop.mjs.map +1 -0
- package/fesm2015/keycodes.mjs +167 -0
- package/fesm2015/keycodes.mjs.map +1 -0
- package/fesm2015/layout.mjs +337 -0
- package/fesm2015/layout.mjs.map +1 -0
- package/fesm2015/listbox.mjs +1200 -0
- package/fesm2015/listbox.mjs.map +1 -0
- package/fesm2015/menu.mjs +2719 -0
- package/fesm2015/menu.mjs.map +1 -0
- package/fesm2015/observers.mjs +326 -0
- package/fesm2015/observers.mjs.map +1 -0
- package/fesm2015/overlay.mjs +3137 -0
- package/fesm2015/overlay.mjs.map +1 -0
- package/fesm2015/platform.mjs +385 -0
- package/fesm2015/platform.mjs.map +1 -0
- package/fesm2015/portal.mjs +691 -0
- package/fesm2015/portal.mjs.map +1 -0
- package/fesm2015/scrolling.mjs +1558 -0
- package/fesm2015/scrolling.mjs.map +1 -0
- package/fesm2015/stepper.mjs +989 -0
- package/fesm2015/stepper.mjs.map +1 -0
- package/fesm2015/table.mjs +2356 -0
- package/fesm2015/table.mjs.map +1 -0
- package/fesm2015/testing.mjs +833 -0
- package/fesm2015/testing.mjs.map +1 -0
- package/fesm2015/text-field.mjs +461 -0
- package/fesm2015/text-field.mjs.map +1 -0
- package/fesm2015/tree.mjs +1303 -0
- package/fesm2015/tree.mjs.map +1 -0
- package/fesm2020/a11y.mjs +2476 -0
- package/fesm2020/a11y.mjs.map +1 -0
- package/fesm2020/accordion.mjs +414 -0
- package/fesm2020/accordion.mjs.map +1 -0
- package/fesm2020/bidi.mjs +192 -0
- package/fesm2020/bidi.mjs.map +1 -0
- package/fesm2020/cdk.mjs +30 -0
- package/fesm2020/cdk.mjs.map +1 -0
- package/fesm2020/clipboard.mjs +259 -0
- package/fesm2020/clipboard.mjs.map +1 -0
- package/fesm2020/coercion.mjs +132 -0
- package/fesm2020/coercion.mjs.map +1 -0
- package/fesm2020/collections.mjs +535 -0
- package/fesm2020/collections.mjs.map +1 -0
- package/fesm2020/dialog.mjs +787 -0
- package/fesm2020/dialog.mjs.map +1 -0
- package/fesm2020/drag-drop.mjs +3808 -0
- package/fesm2020/drag-drop.mjs.map +1 -0
- package/fesm2020/keycodes.mjs +167 -0
- package/fesm2020/keycodes.mjs.map +1 -0
- package/fesm2020/layout.mjs +337 -0
- package/fesm2020/layout.mjs.map +1 -0
- package/fesm2020/listbox.mjs +1164 -0
- package/fesm2020/listbox.mjs.map +1 -0
- package/fesm2020/menu.mjs +2615 -0
- package/fesm2020/menu.mjs.map +1 -0
- package/fesm2020/observers.mjs +325 -0
- package/fesm2020/observers.mjs.map +1 -0
- package/fesm2020/overlay.mjs +3145 -0
- package/fesm2020/overlay.mjs.map +1 -0
- package/fesm2020/platform.mjs +383 -0
- package/fesm2020/platform.mjs.map +1 -0
- package/fesm2020/portal.mjs +689 -0
- package/fesm2020/portal.mjs.map +1 -0
- package/fesm2020/scrolling.mjs +1591 -0
- package/fesm2020/scrolling.mjs.map +1 -0
- package/fesm2020/stepper.mjs +985 -0
- package/fesm2020/stepper.mjs.map +1 -0
- package/fesm2020/table.mjs +2348 -0
- package/fesm2020/table.mjs.map +1 -0
- package/fesm2020/testing.mjs +797 -0
- package/fesm2020/testing.mjs.map +1 -0
- package/fesm2020/text-field.mjs +459 -0
- package/fesm2020/text-field.mjs.map +1 -0
- package/fesm2020/tree.mjs +1305 -0
- package/fesm2020/tree.mjs.map +1 -0
- package/index.d.ts +6 -0
- package/keycodes/index.d.ts +249 -0
- package/layout/index.d.ts +90 -0
- package/listbox/index.d.ts +419 -0
- package/menu/index.d.ts +1013 -0
- package/observers/index.d.ts +109 -0
- package/overlay/_index-deprecated.scss +13 -0
- package/overlay/_index.import.scss +13 -0
- package/overlay/_index.scss +152 -0
- package/overlay/index.d.ts +1343 -0
- package/overlay-prebuilt.css +1 -0
- package/package.json +232 -0
- package/platform/index.d.ts +106 -0
- package/portal/index.d.ts +328 -0
- package/scrolling/index.d.ts +849 -0
- package/stepper/index.d.ts +419 -0
- package/table/index.d.ts +1483 -0
- package/text-field/_index.import.scss +2 -0
- package/text-field/_index.scss +89 -0
- package/text-field/index.d.ts +203 -0
- package/text-field-prebuilt.css +1 -0
- package/tree/index.d.ts +593 -0
|
@@ -0,0 +1,2356 @@
|
|
|
1
|
+
import { coerceBooleanProperty } from '@kato-lee/cdk/coercion';
|
|
2
|
+
import { _VIEW_REPEATER_STRATEGY, _RecycleViewRepeaterStrategy, isDataSource, _DisposeViewRepeaterStrategy } from '@kato-lee/cdk/collections';
|
|
3
|
+
export { DataSource } from '@kato-lee/cdk/collections';
|
|
4
|
+
import { DOCUMENT } from '@angular/common';
|
|
5
|
+
import * as i0 from '@angular/core';
|
|
6
|
+
import { InjectionToken, Directive, Inject, Optional, Input, ContentChild, Injectable, Component, ChangeDetectionStrategy, ViewEncapsulation, EmbeddedViewRef, EventEmitter, NgZone, Attribute, SkipSelf, Output, ViewChild, ContentChildren, NgModule } from '@angular/core';
|
|
7
|
+
import { Subject, from, BehaviorSubject, isObservable, of } from 'rxjs';
|
|
8
|
+
import { takeUntil, take } from 'rxjs/operators';
|
|
9
|
+
import * as i1 from '@kato-lee/cdk/bidi';
|
|
10
|
+
import * as i2 from '@kato-lee/cdk/platform';
|
|
11
|
+
import * as i3 from '@kato-lee/cdk/scrolling';
|
|
12
|
+
import { ScrollingModule } from '@kato-lee/cdk/scrolling';
|
|
13
|
+
|
|
14
|
+
/**
|
|
15
|
+
* @license
|
|
16
|
+
* Copyright Google LLC All Rights Reserved.
|
|
17
|
+
*
|
|
18
|
+
* Use of this source code is governed by an MIT-style license that can be
|
|
19
|
+
* found in the LICENSE file at https://angular.io/license
|
|
20
|
+
*/
|
|
21
|
+
/**
|
|
22
|
+
* Mixin to provide a directive with a function that checks if the sticky input has been
|
|
23
|
+
* changed since the last time the function was called. Essentially adds a dirty-check to the
|
|
24
|
+
* sticky value.
|
|
25
|
+
* @docs-private
|
|
26
|
+
*/
|
|
27
|
+
function mixinHasStickyInput(base) {
|
|
28
|
+
return class extends base {
|
|
29
|
+
constructor(...args) {
|
|
30
|
+
super(...args);
|
|
31
|
+
this._sticky = false;
|
|
32
|
+
/** Whether the sticky input has changed since it was last checked. */
|
|
33
|
+
this._hasStickyChanged = false;
|
|
34
|
+
}
|
|
35
|
+
/** Whether sticky positioning should be applied. */
|
|
36
|
+
get sticky() {
|
|
37
|
+
return this._sticky;
|
|
38
|
+
}
|
|
39
|
+
set sticky(v) {
|
|
40
|
+
const prevValue = this._sticky;
|
|
41
|
+
this._sticky = coerceBooleanProperty(v);
|
|
42
|
+
this._hasStickyChanged = prevValue !== this._sticky;
|
|
43
|
+
}
|
|
44
|
+
/** Whether the sticky value has changed since this was last called. */
|
|
45
|
+
hasStickyChanged() {
|
|
46
|
+
const hasStickyChanged = this._hasStickyChanged;
|
|
47
|
+
this._hasStickyChanged = false;
|
|
48
|
+
return hasStickyChanged;
|
|
49
|
+
}
|
|
50
|
+
/** Resets the dirty check for cases where the sticky state has been used without checking. */
|
|
51
|
+
resetStickyChanged() {
|
|
52
|
+
this._hasStickyChanged = false;
|
|
53
|
+
}
|
|
54
|
+
};
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
/**
|
|
58
|
+
* @license
|
|
59
|
+
* Copyright Google LLC All Rights Reserved.
|
|
60
|
+
*
|
|
61
|
+
* Use of this source code is governed by an MIT-style license that can be
|
|
62
|
+
* found in the LICENSE file at https://angular.io/license
|
|
63
|
+
*/
|
|
64
|
+
/**
|
|
65
|
+
* Used to provide a table to some of the sub-components without causing a circular dependency.
|
|
66
|
+
* @docs-private
|
|
67
|
+
*/
|
|
68
|
+
const CDK_TABLE = new InjectionToken('CDK_TABLE');
|
|
69
|
+
/** Injection token that can be used to specify the text column options. */
|
|
70
|
+
const TEXT_COLUMN_OPTIONS = new InjectionToken('text-column-options');
|
|
71
|
+
|
|
72
|
+
/**
|
|
73
|
+
* @license
|
|
74
|
+
* Copyright Google LLC All Rights Reserved.
|
|
75
|
+
*
|
|
76
|
+
* Use of this source code is governed by an MIT-style license that can be
|
|
77
|
+
* found in the LICENSE file at https://angular.io/license
|
|
78
|
+
*/
|
|
79
|
+
/**
|
|
80
|
+
* Cell definition for a CDK table.
|
|
81
|
+
* Captures the template of a column's data row cell as well as cell-specific properties.
|
|
82
|
+
*/
|
|
83
|
+
class CdkCellDef {
|
|
84
|
+
constructor(/** @docs-private */ template) {
|
|
85
|
+
this.template = template;
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
CdkCellDef.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: CdkCellDef, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
89
|
+
CdkCellDef.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.0", type: CdkCellDef, selector: "[cdkCellDef]", ngImport: i0 });
|
|
90
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: CdkCellDef, decorators: [{
|
|
91
|
+
type: Directive,
|
|
92
|
+
args: [{ selector: '[cdkCellDef]' }]
|
|
93
|
+
}], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
|
|
94
|
+
/**
|
|
95
|
+
* Header cell definition for a CDK table.
|
|
96
|
+
* Captures the template of a column's header cell and as well as cell-specific properties.
|
|
97
|
+
*/
|
|
98
|
+
class CdkHeaderCellDef {
|
|
99
|
+
constructor(/** @docs-private */ template) {
|
|
100
|
+
this.template = template;
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
CdkHeaderCellDef.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: CdkHeaderCellDef, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
104
|
+
CdkHeaderCellDef.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.0", type: CdkHeaderCellDef, selector: "[cdkHeaderCellDef]", ngImport: i0 });
|
|
105
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: CdkHeaderCellDef, decorators: [{
|
|
106
|
+
type: Directive,
|
|
107
|
+
args: [{ selector: '[cdkHeaderCellDef]' }]
|
|
108
|
+
}], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
|
|
109
|
+
/**
|
|
110
|
+
* Footer cell definition for a CDK table.
|
|
111
|
+
* Captures the template of a column's footer cell and as well as cell-specific properties.
|
|
112
|
+
*/
|
|
113
|
+
class CdkFooterCellDef {
|
|
114
|
+
constructor(/** @docs-private */ template) {
|
|
115
|
+
this.template = template;
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
CdkFooterCellDef.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: CdkFooterCellDef, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
119
|
+
CdkFooterCellDef.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.0", type: CdkFooterCellDef, selector: "[cdkFooterCellDef]", ngImport: i0 });
|
|
120
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: CdkFooterCellDef, decorators: [{
|
|
121
|
+
type: Directive,
|
|
122
|
+
args: [{ selector: '[cdkFooterCellDef]' }]
|
|
123
|
+
}], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
|
|
124
|
+
// Boilerplate for applying mixins to CdkColumnDef.
|
|
125
|
+
/** @docs-private */
|
|
126
|
+
class CdkColumnDefBase {
|
|
127
|
+
}
|
|
128
|
+
const _CdkColumnDefBase = mixinHasStickyInput(CdkColumnDefBase);
|
|
129
|
+
/**
|
|
130
|
+
* Column definition for the CDK table.
|
|
131
|
+
* Defines a set of cells available for a table column.
|
|
132
|
+
*/
|
|
133
|
+
class CdkColumnDef extends _CdkColumnDefBase {
|
|
134
|
+
constructor(_table) {
|
|
135
|
+
super();
|
|
136
|
+
this._table = _table;
|
|
137
|
+
this._stickyEnd = false;
|
|
138
|
+
}
|
|
139
|
+
/** Unique name for this column. */
|
|
140
|
+
get name() {
|
|
141
|
+
return this._name;
|
|
142
|
+
}
|
|
143
|
+
set name(name) {
|
|
144
|
+
this._setNameInput(name);
|
|
145
|
+
}
|
|
146
|
+
/**
|
|
147
|
+
* Whether this column should be sticky positioned on the end of the row. Should make sure
|
|
148
|
+
* that it mimics the `CanStick` mixin such that `_hasStickyChanged` is set to true if the value
|
|
149
|
+
* has been changed.
|
|
150
|
+
*/
|
|
151
|
+
get stickyEnd() {
|
|
152
|
+
return this._stickyEnd;
|
|
153
|
+
}
|
|
154
|
+
set stickyEnd(v) {
|
|
155
|
+
const prevValue = this._stickyEnd;
|
|
156
|
+
this._stickyEnd = coerceBooleanProperty(v);
|
|
157
|
+
this._hasStickyChanged = prevValue !== this._stickyEnd;
|
|
158
|
+
}
|
|
159
|
+
/**
|
|
160
|
+
* Overridable method that sets the css classes that will be added to every cell in this
|
|
161
|
+
* column.
|
|
162
|
+
* In the future, columnCssClassName will change from type string[] to string and this
|
|
163
|
+
* will set a single string value.
|
|
164
|
+
* @docs-private
|
|
165
|
+
*/
|
|
166
|
+
_updateColumnCssClassName() {
|
|
167
|
+
this._columnCssClassName = [`cdk-column-${this.cssClassFriendlyName}`];
|
|
168
|
+
}
|
|
169
|
+
/**
|
|
170
|
+
* This has been extracted to a util because of TS 4 and VE.
|
|
171
|
+
* View Engine doesn't support property rename inheritance.
|
|
172
|
+
* TS 4.0 doesn't allow properties to override accessors or vice-versa.
|
|
173
|
+
* @docs-private
|
|
174
|
+
*/
|
|
175
|
+
_setNameInput(value) {
|
|
176
|
+
// If the directive is set without a name (updated programmatically), then this setter will
|
|
177
|
+
// trigger with an empty string and should not overwrite the programmatically set value.
|
|
178
|
+
if (value) {
|
|
179
|
+
this._name = value;
|
|
180
|
+
this.cssClassFriendlyName = value.replace(/[^a-z0-9_-]/gi, '-');
|
|
181
|
+
this._updateColumnCssClassName();
|
|
182
|
+
}
|
|
183
|
+
}
|
|
184
|
+
}
|
|
185
|
+
CdkColumnDef.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: CdkColumnDef, deps: [{ token: CDK_TABLE, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
|
|
186
|
+
CdkColumnDef.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.0", type: CdkColumnDef, selector: "[cdkColumnDef]", inputs: { sticky: "sticky", name: ["cdkColumnDef", "name"], stickyEnd: "stickyEnd" }, providers: [{ provide: 'MAT_SORT_HEADER_COLUMN_DEF', useExisting: CdkColumnDef }], queries: [{ propertyName: "cell", first: true, predicate: CdkCellDef, descendants: true }, { propertyName: "headerCell", first: true, predicate: CdkHeaderCellDef, descendants: true }, { propertyName: "footerCell", first: true, predicate: CdkFooterCellDef, descendants: true }], usesInheritance: true, ngImport: i0 });
|
|
187
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: CdkColumnDef, decorators: [{
|
|
188
|
+
type: Directive,
|
|
189
|
+
args: [{
|
|
190
|
+
selector: '[cdkColumnDef]',
|
|
191
|
+
inputs: ['sticky'],
|
|
192
|
+
providers: [{ provide: 'MAT_SORT_HEADER_COLUMN_DEF', useExisting: CdkColumnDef }],
|
|
193
|
+
}]
|
|
194
|
+
}], ctorParameters: function () {
|
|
195
|
+
return [{ type: undefined, decorators: [{
|
|
196
|
+
type: Inject,
|
|
197
|
+
args: [CDK_TABLE]
|
|
198
|
+
}, {
|
|
199
|
+
type: Optional
|
|
200
|
+
}] }];
|
|
201
|
+
}, propDecorators: { name: [{
|
|
202
|
+
type: Input,
|
|
203
|
+
args: ['cdkColumnDef']
|
|
204
|
+
}], stickyEnd: [{
|
|
205
|
+
type: Input,
|
|
206
|
+
args: ['stickyEnd']
|
|
207
|
+
}], cell: [{
|
|
208
|
+
type: ContentChild,
|
|
209
|
+
args: [CdkCellDef]
|
|
210
|
+
}], headerCell: [{
|
|
211
|
+
type: ContentChild,
|
|
212
|
+
args: [CdkHeaderCellDef]
|
|
213
|
+
}], footerCell: [{
|
|
214
|
+
type: ContentChild,
|
|
215
|
+
args: [CdkFooterCellDef]
|
|
216
|
+
}] } });
|
|
217
|
+
/** Base class for the cells. Adds a CSS classname that identifies the column it renders in. */
|
|
218
|
+
class BaseCdkCell {
|
|
219
|
+
constructor(columnDef, elementRef) {
|
|
220
|
+
elementRef.nativeElement.classList.add(...columnDef._columnCssClassName);
|
|
221
|
+
}
|
|
222
|
+
}
|
|
223
|
+
/** Header cell template container that adds the right classes and role. */
|
|
224
|
+
class CdkHeaderCell extends BaseCdkCell {
|
|
225
|
+
constructor(columnDef, elementRef) {
|
|
226
|
+
super(columnDef, elementRef);
|
|
227
|
+
}
|
|
228
|
+
}
|
|
229
|
+
CdkHeaderCell.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: CdkHeaderCell, deps: [{ token: CdkColumnDef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
230
|
+
CdkHeaderCell.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.0", type: CdkHeaderCell, selector: "cdk-header-cell, th[cdk-header-cell]", host: { attributes: { "role": "columnheader" }, classAttribute: "cdk-header-cell" }, usesInheritance: true, ngImport: i0 });
|
|
231
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: CdkHeaderCell, decorators: [{
|
|
232
|
+
type: Directive,
|
|
233
|
+
args: [{
|
|
234
|
+
selector: 'cdk-header-cell, th[cdk-header-cell]',
|
|
235
|
+
host: {
|
|
236
|
+
'class': 'cdk-header-cell',
|
|
237
|
+
'role': 'columnheader',
|
|
238
|
+
},
|
|
239
|
+
}]
|
|
240
|
+
}], ctorParameters: function () { return [{ type: CdkColumnDef }, { type: i0.ElementRef }]; } });
|
|
241
|
+
/** Footer cell template container that adds the right classes and role. */
|
|
242
|
+
class CdkFooterCell extends BaseCdkCell {
|
|
243
|
+
constructor(columnDef, elementRef) {
|
|
244
|
+
var _a;
|
|
245
|
+
super(columnDef, elementRef);
|
|
246
|
+
if (((_a = columnDef._table) === null || _a === void 0 ? void 0 : _a._elementRef.nativeElement.nodeType) === 1) {
|
|
247
|
+
const tableRole = columnDef._table._elementRef.nativeElement.getAttribute('role');
|
|
248
|
+
const role = tableRole === 'grid' || tableRole === 'treegrid' ? 'gridcell' : 'cell';
|
|
249
|
+
elementRef.nativeElement.setAttribute('role', role);
|
|
250
|
+
}
|
|
251
|
+
}
|
|
252
|
+
}
|
|
253
|
+
CdkFooterCell.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: CdkFooterCell, deps: [{ token: CdkColumnDef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
254
|
+
CdkFooterCell.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.0", type: CdkFooterCell, selector: "cdk-footer-cell, td[cdk-footer-cell]", host: { classAttribute: "cdk-footer-cell" }, usesInheritance: true, ngImport: i0 });
|
|
255
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: CdkFooterCell, decorators: [{
|
|
256
|
+
type: Directive,
|
|
257
|
+
args: [{
|
|
258
|
+
selector: 'cdk-footer-cell, td[cdk-footer-cell]',
|
|
259
|
+
host: {
|
|
260
|
+
'class': 'cdk-footer-cell',
|
|
261
|
+
},
|
|
262
|
+
}]
|
|
263
|
+
}], ctorParameters: function () { return [{ type: CdkColumnDef }, { type: i0.ElementRef }]; } });
|
|
264
|
+
/** Cell template container that adds the right classes and role. */
|
|
265
|
+
class CdkCell extends BaseCdkCell {
|
|
266
|
+
constructor(columnDef, elementRef) {
|
|
267
|
+
var _a;
|
|
268
|
+
super(columnDef, elementRef);
|
|
269
|
+
if (((_a = columnDef._table) === null || _a === void 0 ? void 0 : _a._elementRef.nativeElement.nodeType) === 1) {
|
|
270
|
+
const tableRole = columnDef._table._elementRef.nativeElement.getAttribute('role');
|
|
271
|
+
const role = tableRole === 'grid' || tableRole === 'treegrid' ? 'gridcell' : 'cell';
|
|
272
|
+
elementRef.nativeElement.setAttribute('role', role);
|
|
273
|
+
}
|
|
274
|
+
}
|
|
275
|
+
}
|
|
276
|
+
CdkCell.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: CdkCell, deps: [{ token: CdkColumnDef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
277
|
+
CdkCell.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.0", type: CdkCell, selector: "cdk-cell, td[cdk-cell]", host: { classAttribute: "cdk-cell" }, usesInheritance: true, ngImport: i0 });
|
|
278
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: CdkCell, decorators: [{
|
|
279
|
+
type: Directive,
|
|
280
|
+
args: [{
|
|
281
|
+
selector: 'cdk-cell, td[cdk-cell]',
|
|
282
|
+
host: {
|
|
283
|
+
'class': 'cdk-cell',
|
|
284
|
+
},
|
|
285
|
+
}]
|
|
286
|
+
}], ctorParameters: function () { return [{ type: CdkColumnDef }, { type: i0.ElementRef }]; } });
|
|
287
|
+
|
|
288
|
+
/**
|
|
289
|
+
* @license
|
|
290
|
+
* Copyright Google LLC All Rights Reserved.
|
|
291
|
+
*
|
|
292
|
+
* Use of this source code is governed by an MIT-style license that can be
|
|
293
|
+
* found in the LICENSE file at https://angular.io/license
|
|
294
|
+
*/
|
|
295
|
+
/**
|
|
296
|
+
* @docs-private
|
|
297
|
+
*/
|
|
298
|
+
class _Schedule {
|
|
299
|
+
constructor() {
|
|
300
|
+
this.tasks = [];
|
|
301
|
+
this.endTasks = [];
|
|
302
|
+
}
|
|
303
|
+
}
|
|
304
|
+
/** Injection token used to provide a coalesced style scheduler. */
|
|
305
|
+
const _COALESCED_STYLE_SCHEDULER = new InjectionToken('_COALESCED_STYLE_SCHEDULER');
|
|
306
|
+
/**
|
|
307
|
+
* Allows grouping up CSSDom mutations after the current execution context.
|
|
308
|
+
* This can significantly improve performance when separate consecutive functions are
|
|
309
|
+
* reading from the CSSDom and then mutating it.
|
|
310
|
+
*
|
|
311
|
+
* @docs-private
|
|
312
|
+
*/
|
|
313
|
+
class _CoalescedStyleScheduler {
|
|
314
|
+
constructor(_ngZone) {
|
|
315
|
+
this._ngZone = _ngZone;
|
|
316
|
+
this._currentSchedule = null;
|
|
317
|
+
this._destroyed = new Subject();
|
|
318
|
+
}
|
|
319
|
+
/**
|
|
320
|
+
* Schedules the specified task to run at the end of the current VM turn.
|
|
321
|
+
*/
|
|
322
|
+
schedule(task) {
|
|
323
|
+
this._createScheduleIfNeeded();
|
|
324
|
+
this._currentSchedule.tasks.push(task);
|
|
325
|
+
}
|
|
326
|
+
/**
|
|
327
|
+
* Schedules the specified task to run after other scheduled tasks at the end of the current
|
|
328
|
+
* VM turn.
|
|
329
|
+
*/
|
|
330
|
+
scheduleEnd(task) {
|
|
331
|
+
this._createScheduleIfNeeded();
|
|
332
|
+
this._currentSchedule.endTasks.push(task);
|
|
333
|
+
}
|
|
334
|
+
/** Prevent any further tasks from running. */
|
|
335
|
+
ngOnDestroy() {
|
|
336
|
+
this._destroyed.next();
|
|
337
|
+
this._destroyed.complete();
|
|
338
|
+
}
|
|
339
|
+
_createScheduleIfNeeded() {
|
|
340
|
+
if (this._currentSchedule) {
|
|
341
|
+
return;
|
|
342
|
+
}
|
|
343
|
+
this._currentSchedule = new _Schedule();
|
|
344
|
+
this._getScheduleObservable()
|
|
345
|
+
.pipe(takeUntil(this._destroyed))
|
|
346
|
+
.subscribe(() => {
|
|
347
|
+
while (this._currentSchedule.tasks.length || this._currentSchedule.endTasks.length) {
|
|
348
|
+
const schedule = this._currentSchedule;
|
|
349
|
+
// Capture new tasks scheduled by the current set of tasks.
|
|
350
|
+
this._currentSchedule = new _Schedule();
|
|
351
|
+
for (const task of schedule.tasks) {
|
|
352
|
+
task();
|
|
353
|
+
}
|
|
354
|
+
for (const task of schedule.endTasks) {
|
|
355
|
+
task();
|
|
356
|
+
}
|
|
357
|
+
}
|
|
358
|
+
this._currentSchedule = null;
|
|
359
|
+
});
|
|
360
|
+
}
|
|
361
|
+
_getScheduleObservable() {
|
|
362
|
+
// Use onStable when in the context of an ongoing change detection cycle so that we
|
|
363
|
+
// do not accidentally trigger additional cycles.
|
|
364
|
+
return this._ngZone.isStable
|
|
365
|
+
? from(Promise.resolve(undefined))
|
|
366
|
+
: this._ngZone.onStable.pipe(take(1));
|
|
367
|
+
}
|
|
368
|
+
}
|
|
369
|
+
_CoalescedStyleScheduler.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: _CoalescedStyleScheduler, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
370
|
+
_CoalescedStyleScheduler.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: _CoalescedStyleScheduler });
|
|
371
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: _CoalescedStyleScheduler, decorators: [{
|
|
372
|
+
type: Injectable
|
|
373
|
+
}], ctorParameters: function () { return [{ type: i0.NgZone }]; } });
|
|
374
|
+
|
|
375
|
+
/**
|
|
376
|
+
* @license
|
|
377
|
+
* Copyright Google LLC All Rights Reserved.
|
|
378
|
+
*
|
|
379
|
+
* Use of this source code is governed by an MIT-style license that can be
|
|
380
|
+
* found in the LICENSE file at https://angular.io/license
|
|
381
|
+
*/
|
|
382
|
+
/**
|
|
383
|
+
* The row template that can be used by the mat-table. Should not be used outside of the
|
|
384
|
+
* material library.
|
|
385
|
+
*/
|
|
386
|
+
const CDK_ROW_TEMPLATE = `<ng-container cdkCellOutlet></ng-container>`;
|
|
387
|
+
/**
|
|
388
|
+
* Base class for the CdkHeaderRowDef and CdkRowDef that handles checking their columns inputs
|
|
389
|
+
* for changes and notifying the table.
|
|
390
|
+
*/
|
|
391
|
+
class BaseRowDef {
|
|
392
|
+
constructor(
|
|
393
|
+
/** @docs-private */ template, _differs) {
|
|
394
|
+
this.template = template;
|
|
395
|
+
this._differs = _differs;
|
|
396
|
+
}
|
|
397
|
+
ngOnChanges(changes) {
|
|
398
|
+
// Create a new columns differ if one does not yet exist. Initialize it based on initial value
|
|
399
|
+
// of the columns property or an empty array if none is provided.
|
|
400
|
+
if (!this._columnsDiffer) {
|
|
401
|
+
const columns = (changes['columns'] && changes['columns'].currentValue) || [];
|
|
402
|
+
this._columnsDiffer = this._differs.find(columns).create();
|
|
403
|
+
this._columnsDiffer.diff(columns);
|
|
404
|
+
}
|
|
405
|
+
}
|
|
406
|
+
/**
|
|
407
|
+
* Returns the difference between the current columns and the columns from the last diff, or null
|
|
408
|
+
* if there is no difference.
|
|
409
|
+
*/
|
|
410
|
+
getColumnsDiff() {
|
|
411
|
+
return this._columnsDiffer.diff(this.columns);
|
|
412
|
+
}
|
|
413
|
+
/** Gets this row def's relevant cell template from the provided column def. */
|
|
414
|
+
extractCellTemplate(column) {
|
|
415
|
+
if (this instanceof CdkHeaderRowDef) {
|
|
416
|
+
return column.headerCell.template;
|
|
417
|
+
}
|
|
418
|
+
if (this instanceof CdkFooterRowDef) {
|
|
419
|
+
return column.footerCell.template;
|
|
420
|
+
}
|
|
421
|
+
else {
|
|
422
|
+
return column.cell.template;
|
|
423
|
+
}
|
|
424
|
+
}
|
|
425
|
+
}
|
|
426
|
+
BaseRowDef.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: BaseRowDef, deps: [{ token: i0.TemplateRef }, { token: i0.IterableDiffers }], target: i0.ɵɵFactoryTarget.Directive });
|
|
427
|
+
BaseRowDef.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.0", type: BaseRowDef, usesOnChanges: true, ngImport: i0 });
|
|
428
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: BaseRowDef, decorators: [{
|
|
429
|
+
type: Directive
|
|
430
|
+
}], ctorParameters: function () { return [{ type: i0.TemplateRef }, { type: i0.IterableDiffers }]; } });
|
|
431
|
+
// Boilerplate for applying mixins to CdkHeaderRowDef.
|
|
432
|
+
/** @docs-private */
|
|
433
|
+
class CdkHeaderRowDefBase extends BaseRowDef {
|
|
434
|
+
}
|
|
435
|
+
const _CdkHeaderRowDefBase = mixinHasStickyInput(CdkHeaderRowDefBase);
|
|
436
|
+
/**
|
|
437
|
+
* Header row definition for the CDK table.
|
|
438
|
+
* Captures the header row's template and other header properties such as the columns to display.
|
|
439
|
+
*/
|
|
440
|
+
class CdkHeaderRowDef extends _CdkHeaderRowDefBase {
|
|
441
|
+
constructor(template, _differs, _table) {
|
|
442
|
+
super(template, _differs);
|
|
443
|
+
this._table = _table;
|
|
444
|
+
}
|
|
445
|
+
// Prerender fails to recognize that ngOnChanges in a part of this class through inheritance.
|
|
446
|
+
// Explicitly define it so that the method is called as part of the Angular lifecycle.
|
|
447
|
+
ngOnChanges(changes) {
|
|
448
|
+
super.ngOnChanges(changes);
|
|
449
|
+
}
|
|
450
|
+
}
|
|
451
|
+
CdkHeaderRowDef.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: CdkHeaderRowDef, deps: [{ token: i0.TemplateRef }, { token: i0.IterableDiffers }, { token: CDK_TABLE, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
|
|
452
|
+
CdkHeaderRowDef.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.0", type: CdkHeaderRowDef, selector: "[cdkHeaderRowDef]", inputs: { columns: ["cdkHeaderRowDef", "columns"], sticky: ["cdkHeaderRowDefSticky", "sticky"] }, usesInheritance: true, usesOnChanges: true, ngImport: i0 });
|
|
453
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: CdkHeaderRowDef, decorators: [{
|
|
454
|
+
type: Directive,
|
|
455
|
+
args: [{
|
|
456
|
+
selector: '[cdkHeaderRowDef]',
|
|
457
|
+
inputs: ['columns: cdkHeaderRowDef', 'sticky: cdkHeaderRowDefSticky'],
|
|
458
|
+
}]
|
|
459
|
+
}], ctorParameters: function () {
|
|
460
|
+
return [{ type: i0.TemplateRef }, { type: i0.IterableDiffers }, { type: undefined, decorators: [{
|
|
461
|
+
type: Inject,
|
|
462
|
+
args: [CDK_TABLE]
|
|
463
|
+
}, {
|
|
464
|
+
type: Optional
|
|
465
|
+
}] }];
|
|
466
|
+
} });
|
|
467
|
+
// Boilerplate for applying mixins to CdkFooterRowDef.
|
|
468
|
+
/** @docs-private */
|
|
469
|
+
class CdkFooterRowDefBase extends BaseRowDef {
|
|
470
|
+
}
|
|
471
|
+
const _CdkFooterRowDefBase = mixinHasStickyInput(CdkFooterRowDefBase);
|
|
472
|
+
/**
|
|
473
|
+
* Footer row definition for the CDK table.
|
|
474
|
+
* Captures the footer row's template and other footer properties such as the columns to display.
|
|
475
|
+
*/
|
|
476
|
+
class CdkFooterRowDef extends _CdkFooterRowDefBase {
|
|
477
|
+
constructor(template, _differs, _table) {
|
|
478
|
+
super(template, _differs);
|
|
479
|
+
this._table = _table;
|
|
480
|
+
}
|
|
481
|
+
// Prerender fails to recognize that ngOnChanges in a part of this class through inheritance.
|
|
482
|
+
// Explicitly define it so that the method is called as part of the Angular lifecycle.
|
|
483
|
+
ngOnChanges(changes) {
|
|
484
|
+
super.ngOnChanges(changes);
|
|
485
|
+
}
|
|
486
|
+
}
|
|
487
|
+
CdkFooterRowDef.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: CdkFooterRowDef, deps: [{ token: i0.TemplateRef }, { token: i0.IterableDiffers }, { token: CDK_TABLE, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
|
|
488
|
+
CdkFooterRowDef.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.0", type: CdkFooterRowDef, selector: "[cdkFooterRowDef]", inputs: { columns: ["cdkFooterRowDef", "columns"], sticky: ["cdkFooterRowDefSticky", "sticky"] }, usesInheritance: true, usesOnChanges: true, ngImport: i0 });
|
|
489
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: CdkFooterRowDef, decorators: [{
|
|
490
|
+
type: Directive,
|
|
491
|
+
args: [{
|
|
492
|
+
selector: '[cdkFooterRowDef]',
|
|
493
|
+
inputs: ['columns: cdkFooterRowDef', 'sticky: cdkFooterRowDefSticky'],
|
|
494
|
+
}]
|
|
495
|
+
}], ctorParameters: function () {
|
|
496
|
+
return [{ type: i0.TemplateRef }, { type: i0.IterableDiffers }, { type: undefined, decorators: [{
|
|
497
|
+
type: Inject,
|
|
498
|
+
args: [CDK_TABLE]
|
|
499
|
+
}, {
|
|
500
|
+
type: Optional
|
|
501
|
+
}] }];
|
|
502
|
+
} });
|
|
503
|
+
/**
|
|
504
|
+
* Data row definition for the CDK table.
|
|
505
|
+
* Captures the header row's template and other row properties such as the columns to display and
|
|
506
|
+
* a when predicate that describes when this row should be used.
|
|
507
|
+
*/
|
|
508
|
+
class CdkRowDef extends BaseRowDef {
|
|
509
|
+
// TODO(andrewseguin): Add an input for providing a switch function to determine
|
|
510
|
+
// if this template should be used.
|
|
511
|
+
constructor(template, _differs, _table) {
|
|
512
|
+
super(template, _differs);
|
|
513
|
+
this._table = _table;
|
|
514
|
+
}
|
|
515
|
+
}
|
|
516
|
+
CdkRowDef.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: CdkRowDef, deps: [{ token: i0.TemplateRef }, { token: i0.IterableDiffers }, { token: CDK_TABLE, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
|
|
517
|
+
CdkRowDef.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.0", type: CdkRowDef, selector: "[cdkRowDef]", inputs: { columns: ["cdkRowDefColumns", "columns"], when: ["cdkRowDefWhen", "when"] }, usesInheritance: true, ngImport: i0 });
|
|
518
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: CdkRowDef, decorators: [{
|
|
519
|
+
type: Directive,
|
|
520
|
+
args: [{
|
|
521
|
+
selector: '[cdkRowDef]',
|
|
522
|
+
inputs: ['columns: cdkRowDefColumns', 'when: cdkRowDefWhen'],
|
|
523
|
+
}]
|
|
524
|
+
}], ctorParameters: function () {
|
|
525
|
+
return [{ type: i0.TemplateRef }, { type: i0.IterableDiffers }, { type: undefined, decorators: [{
|
|
526
|
+
type: Inject,
|
|
527
|
+
args: [CDK_TABLE]
|
|
528
|
+
}, {
|
|
529
|
+
type: Optional
|
|
530
|
+
}] }];
|
|
531
|
+
} });
|
|
532
|
+
/**
|
|
533
|
+
* Outlet for rendering cells inside of a row or header row.
|
|
534
|
+
* @docs-private
|
|
535
|
+
*/
|
|
536
|
+
class CdkCellOutlet {
|
|
537
|
+
constructor(_viewContainer) {
|
|
538
|
+
this._viewContainer = _viewContainer;
|
|
539
|
+
CdkCellOutlet.mostRecentCellOutlet = this;
|
|
540
|
+
}
|
|
541
|
+
ngOnDestroy() {
|
|
542
|
+
// If this was the last outlet being rendered in the view, remove the reference
|
|
543
|
+
// from the static property after it has been destroyed to avoid leaking memory.
|
|
544
|
+
if (CdkCellOutlet.mostRecentCellOutlet === this) {
|
|
545
|
+
CdkCellOutlet.mostRecentCellOutlet = null;
|
|
546
|
+
}
|
|
547
|
+
}
|
|
548
|
+
}
|
|
549
|
+
/**
|
|
550
|
+
* Static property containing the latest constructed instance of this class.
|
|
551
|
+
* Used by the CDK table when each CdkHeaderRow and CdkRow component is created using
|
|
552
|
+
* createEmbeddedView. After one of these components are created, this property will provide
|
|
553
|
+
* a handle to provide that component's cells and context. After init, the CdkCellOutlet will
|
|
554
|
+
* construct the cells with the provided context.
|
|
555
|
+
*/
|
|
556
|
+
CdkCellOutlet.mostRecentCellOutlet = null;
|
|
557
|
+
CdkCellOutlet.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: CdkCellOutlet, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
558
|
+
CdkCellOutlet.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.0", type: CdkCellOutlet, selector: "[cdkCellOutlet]", ngImport: i0 });
|
|
559
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: CdkCellOutlet, decorators: [{
|
|
560
|
+
type: Directive,
|
|
561
|
+
args: [{ selector: '[cdkCellOutlet]' }]
|
|
562
|
+
}], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; } });
|
|
563
|
+
/** Header template container that contains the cell outlet. Adds the right class and role. */
|
|
564
|
+
class CdkHeaderRow {
|
|
565
|
+
}
|
|
566
|
+
CdkHeaderRow.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: CdkHeaderRow, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
567
|
+
CdkHeaderRow.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: CdkHeaderRow, selector: "cdk-header-row, tr[cdk-header-row]", host: { attributes: { "role": "row" }, classAttribute: "cdk-header-row" }, ngImport: i0, template: "<ng-container cdkCellOutlet></ng-container>", isInline: true, dependencies: [{ kind: "directive", type: CdkCellOutlet, selector: "[cdkCellOutlet]" }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None });
|
|
568
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: CdkHeaderRow, decorators: [{
|
|
569
|
+
type: Component,
|
|
570
|
+
args: [{
|
|
571
|
+
selector: 'cdk-header-row, tr[cdk-header-row]',
|
|
572
|
+
template: CDK_ROW_TEMPLATE,
|
|
573
|
+
host: {
|
|
574
|
+
'class': 'cdk-header-row',
|
|
575
|
+
'role': 'row',
|
|
576
|
+
},
|
|
577
|
+
// See note on CdkTable for explanation on why this uses the default change detection strategy.
|
|
578
|
+
// tslint:disable-next-line:validate-decorators
|
|
579
|
+
changeDetection: ChangeDetectionStrategy.Default,
|
|
580
|
+
encapsulation: ViewEncapsulation.None,
|
|
581
|
+
}]
|
|
582
|
+
}] });
|
|
583
|
+
/** Footer template container that contains the cell outlet. Adds the right class and role. */
|
|
584
|
+
class CdkFooterRow {
|
|
585
|
+
}
|
|
586
|
+
CdkFooterRow.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: CdkFooterRow, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
587
|
+
CdkFooterRow.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: CdkFooterRow, selector: "cdk-footer-row, tr[cdk-footer-row]", host: { attributes: { "role": "row" }, classAttribute: "cdk-footer-row" }, ngImport: i0, template: "<ng-container cdkCellOutlet></ng-container>", isInline: true, dependencies: [{ kind: "directive", type: CdkCellOutlet, selector: "[cdkCellOutlet]" }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None });
|
|
588
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: CdkFooterRow, decorators: [{
|
|
589
|
+
type: Component,
|
|
590
|
+
args: [{
|
|
591
|
+
selector: 'cdk-footer-row, tr[cdk-footer-row]',
|
|
592
|
+
template: CDK_ROW_TEMPLATE,
|
|
593
|
+
host: {
|
|
594
|
+
'class': 'cdk-footer-row',
|
|
595
|
+
'role': 'row',
|
|
596
|
+
},
|
|
597
|
+
// See note on CdkTable for explanation on why this uses the default change detection strategy.
|
|
598
|
+
// tslint:disable-next-line:validate-decorators
|
|
599
|
+
changeDetection: ChangeDetectionStrategy.Default,
|
|
600
|
+
encapsulation: ViewEncapsulation.None,
|
|
601
|
+
}]
|
|
602
|
+
}] });
|
|
603
|
+
/** Data row template container that contains the cell outlet. Adds the right class and role. */
|
|
604
|
+
class CdkRow {
|
|
605
|
+
}
|
|
606
|
+
CdkRow.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: CdkRow, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
607
|
+
CdkRow.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: CdkRow, selector: "cdk-row, tr[cdk-row]", host: { attributes: { "role": "row" }, classAttribute: "cdk-row" }, ngImport: i0, template: "<ng-container cdkCellOutlet></ng-container>", isInline: true, dependencies: [{ kind: "directive", type: CdkCellOutlet, selector: "[cdkCellOutlet]" }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None });
|
|
608
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: CdkRow, decorators: [{
|
|
609
|
+
type: Component,
|
|
610
|
+
args: [{
|
|
611
|
+
selector: 'cdk-row, tr[cdk-row]',
|
|
612
|
+
template: CDK_ROW_TEMPLATE,
|
|
613
|
+
host: {
|
|
614
|
+
'class': 'cdk-row',
|
|
615
|
+
'role': 'row',
|
|
616
|
+
},
|
|
617
|
+
// See note on CdkTable for explanation on why this uses the default change detection strategy.
|
|
618
|
+
// tslint:disable-next-line:validate-decorators
|
|
619
|
+
changeDetection: ChangeDetectionStrategy.Default,
|
|
620
|
+
encapsulation: ViewEncapsulation.None,
|
|
621
|
+
}]
|
|
622
|
+
}] });
|
|
623
|
+
/** Row that can be used to display a message when no data is shown in the table. */
|
|
624
|
+
class CdkNoDataRow {
|
|
625
|
+
constructor(templateRef) {
|
|
626
|
+
this.templateRef = templateRef;
|
|
627
|
+
this._contentClassName = 'cdk-no-data-row';
|
|
628
|
+
}
|
|
629
|
+
}
|
|
630
|
+
CdkNoDataRow.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: CdkNoDataRow, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
631
|
+
CdkNoDataRow.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.0", type: CdkNoDataRow, selector: "ng-template[cdkNoDataRow]", ngImport: i0 });
|
|
632
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: CdkNoDataRow, decorators: [{
|
|
633
|
+
type: Directive,
|
|
634
|
+
args: [{
|
|
635
|
+
selector: 'ng-template[cdkNoDataRow]',
|
|
636
|
+
}]
|
|
637
|
+
}], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
|
|
638
|
+
|
|
639
|
+
/**
|
|
640
|
+
* @license
|
|
641
|
+
* Copyright Google LLC All Rights Reserved.
|
|
642
|
+
*
|
|
643
|
+
* Use of this source code is governed by an MIT-style license that can be
|
|
644
|
+
* found in the LICENSE file at https://angular.io/license
|
|
645
|
+
*/
|
|
646
|
+
/**
|
|
647
|
+
* List of all possible directions that can be used for sticky positioning.
|
|
648
|
+
* @docs-private
|
|
649
|
+
*/
|
|
650
|
+
const STICKY_DIRECTIONS = ['top', 'bottom', 'left', 'right'];
|
|
651
|
+
/**
|
|
652
|
+
* Applies and removes sticky positioning styles to the `CdkTable` rows and columns cells.
|
|
653
|
+
* @docs-private
|
|
654
|
+
*/
|
|
655
|
+
class StickyStyler {
|
|
656
|
+
/**
|
|
657
|
+
* @param _isNativeHtmlTable Whether the sticky logic should be based on a table
|
|
658
|
+
* that uses the native `<table>` element.
|
|
659
|
+
* @param _stickCellCss The CSS class that will be applied to every row/cell that has
|
|
660
|
+
* sticky positioning applied.
|
|
661
|
+
* @param direction The directionality context of the table (ltr/rtl); affects column positioning
|
|
662
|
+
* by reversing left/right positions.
|
|
663
|
+
* @param _isBrowser Whether the table is currently being rendered on the server or the client.
|
|
664
|
+
* @param _needsPositionStickyOnElement Whether we need to specify position: sticky on cells
|
|
665
|
+
* using inline styles. If false, it is assumed that position: sticky is included in
|
|
666
|
+
* the component stylesheet for _stickCellCss.
|
|
667
|
+
* @param _positionListener A listener that is notified of changes to sticky rows/columns
|
|
668
|
+
* and their dimensions.
|
|
669
|
+
*/
|
|
670
|
+
constructor(_isNativeHtmlTable, _stickCellCss, direction, _coalescedStyleScheduler, _isBrowser = true, _needsPositionStickyOnElement = true, _positionListener) {
|
|
671
|
+
this._isNativeHtmlTable = _isNativeHtmlTable;
|
|
672
|
+
this._stickCellCss = _stickCellCss;
|
|
673
|
+
this.direction = direction;
|
|
674
|
+
this._coalescedStyleScheduler = _coalescedStyleScheduler;
|
|
675
|
+
this._isBrowser = _isBrowser;
|
|
676
|
+
this._needsPositionStickyOnElement = _needsPositionStickyOnElement;
|
|
677
|
+
this._positionListener = _positionListener;
|
|
678
|
+
this._cachedCellWidths = [];
|
|
679
|
+
this._borderCellCss = {
|
|
680
|
+
'top': `${_stickCellCss}-border-elem-top`,
|
|
681
|
+
'bottom': `${_stickCellCss}-border-elem-bottom`,
|
|
682
|
+
'left': `${_stickCellCss}-border-elem-left`,
|
|
683
|
+
'right': `${_stickCellCss}-border-elem-right`,
|
|
684
|
+
};
|
|
685
|
+
}
|
|
686
|
+
/**
|
|
687
|
+
* Clears the sticky positioning styles from the row and its cells by resetting the `position`
|
|
688
|
+
* style, setting the zIndex to 0, and unsetting each provided sticky direction.
|
|
689
|
+
* @param rows The list of rows that should be cleared from sticking in the provided directions
|
|
690
|
+
* @param stickyDirections The directions that should no longer be set as sticky on the rows.
|
|
691
|
+
*/
|
|
692
|
+
clearStickyPositioning(rows, stickyDirections) {
|
|
693
|
+
const elementsToClear = [];
|
|
694
|
+
for (const row of rows) {
|
|
695
|
+
// If the row isn't an element (e.g. if it's an `ng-container`),
|
|
696
|
+
// it won't have inline styles or `children` so we skip it.
|
|
697
|
+
if (row.nodeType !== row.ELEMENT_NODE) {
|
|
698
|
+
continue;
|
|
699
|
+
}
|
|
700
|
+
elementsToClear.push(row);
|
|
701
|
+
for (let i = 0; i < row.children.length; i++) {
|
|
702
|
+
elementsToClear.push(row.children[i]);
|
|
703
|
+
}
|
|
704
|
+
}
|
|
705
|
+
// Coalesce with sticky row/column updates (and potentially other changes like column resize).
|
|
706
|
+
this._coalescedStyleScheduler.schedule(() => {
|
|
707
|
+
for (const element of elementsToClear) {
|
|
708
|
+
this._removeStickyStyle(element, stickyDirections);
|
|
709
|
+
}
|
|
710
|
+
});
|
|
711
|
+
}
|
|
712
|
+
/**
|
|
713
|
+
* Applies sticky left and right positions to the cells of each row according to the sticky
|
|
714
|
+
* states of the rendered column definitions.
|
|
715
|
+
* @param rows The rows that should have its set of cells stuck according to the sticky states.
|
|
716
|
+
* @param stickyStartStates A list of boolean states where each state represents whether the cell
|
|
717
|
+
* in this index position should be stuck to the start of the row.
|
|
718
|
+
* @param stickyEndStates A list of boolean states where each state represents whether the cell
|
|
719
|
+
* in this index position should be stuck to the end of the row.
|
|
720
|
+
* @param recalculateCellWidths Whether the sticky styler should recalculate the width of each
|
|
721
|
+
* column cell. If `false` cached widths will be used instead.
|
|
722
|
+
*/
|
|
723
|
+
updateStickyColumns(rows, stickyStartStates, stickyEndStates, recalculateCellWidths = true) {
|
|
724
|
+
if (!rows.length ||
|
|
725
|
+
!this._isBrowser ||
|
|
726
|
+
!(stickyStartStates.some(state => state) || stickyEndStates.some(state => state))) {
|
|
727
|
+
if (this._positionListener) {
|
|
728
|
+
this._positionListener.stickyColumnsUpdated({ sizes: [] });
|
|
729
|
+
this._positionListener.stickyEndColumnsUpdated({ sizes: [] });
|
|
730
|
+
}
|
|
731
|
+
return;
|
|
732
|
+
}
|
|
733
|
+
const firstRow = rows[0];
|
|
734
|
+
const numCells = firstRow.children.length;
|
|
735
|
+
const cellWidths = this._getCellWidths(firstRow, recalculateCellWidths);
|
|
736
|
+
const startPositions = this._getStickyStartColumnPositions(cellWidths, stickyStartStates);
|
|
737
|
+
const endPositions = this._getStickyEndColumnPositions(cellWidths, stickyEndStates);
|
|
738
|
+
const lastStickyStart = stickyStartStates.lastIndexOf(true);
|
|
739
|
+
const firstStickyEnd = stickyEndStates.indexOf(true);
|
|
740
|
+
// Coalesce with sticky row updates (and potentially other changes like column resize).
|
|
741
|
+
this._coalescedStyleScheduler.schedule(() => {
|
|
742
|
+
const isRtl = this.direction === 'rtl';
|
|
743
|
+
const start = isRtl ? 'right' : 'left';
|
|
744
|
+
const end = isRtl ? 'left' : 'right';
|
|
745
|
+
for (const row of rows) {
|
|
746
|
+
for (let i = 0; i < numCells; i++) {
|
|
747
|
+
const cell = row.children[i];
|
|
748
|
+
if (stickyStartStates[i]) {
|
|
749
|
+
this._addStickyStyle(cell, start, startPositions[i], i === lastStickyStart);
|
|
750
|
+
}
|
|
751
|
+
if (stickyEndStates[i]) {
|
|
752
|
+
this._addStickyStyle(cell, end, endPositions[i], i === firstStickyEnd);
|
|
753
|
+
}
|
|
754
|
+
}
|
|
755
|
+
}
|
|
756
|
+
if (this._positionListener) {
|
|
757
|
+
this._positionListener.stickyColumnsUpdated({
|
|
758
|
+
sizes: lastStickyStart === -1
|
|
759
|
+
? []
|
|
760
|
+
: cellWidths
|
|
761
|
+
.slice(0, lastStickyStart + 1)
|
|
762
|
+
.map((width, index) => (stickyStartStates[index] ? width : null)),
|
|
763
|
+
});
|
|
764
|
+
this._positionListener.stickyEndColumnsUpdated({
|
|
765
|
+
sizes: firstStickyEnd === -1
|
|
766
|
+
? []
|
|
767
|
+
: cellWidths
|
|
768
|
+
.slice(firstStickyEnd)
|
|
769
|
+
.map((width, index) => (stickyEndStates[index + firstStickyEnd] ? width : null))
|
|
770
|
+
.reverse(),
|
|
771
|
+
});
|
|
772
|
+
}
|
|
773
|
+
});
|
|
774
|
+
}
|
|
775
|
+
/**
|
|
776
|
+
* Applies sticky positioning to the row's cells if using the native table layout, and to the
|
|
777
|
+
* row itself otherwise.
|
|
778
|
+
* @param rowsToStick The list of rows that should be stuck according to their corresponding
|
|
779
|
+
* sticky state and to the provided top or bottom position.
|
|
780
|
+
* @param stickyStates A list of boolean states where each state represents whether the row
|
|
781
|
+
* should be stuck in the particular top or bottom position.
|
|
782
|
+
* @param position The position direction in which the row should be stuck if that row should be
|
|
783
|
+
* sticky.
|
|
784
|
+
*
|
|
785
|
+
*/
|
|
786
|
+
stickRows(rowsToStick, stickyStates, position) {
|
|
787
|
+
// Since we can't measure the rows on the server, we can't stick the rows properly.
|
|
788
|
+
if (!this._isBrowser) {
|
|
789
|
+
return;
|
|
790
|
+
}
|
|
791
|
+
// If positioning the rows to the bottom, reverse their order when evaluating the sticky
|
|
792
|
+
// position such that the last row stuck will be "bottom: 0px" and so on. Note that the
|
|
793
|
+
// sticky states need to be reversed as well.
|
|
794
|
+
const rows = position === 'bottom' ? rowsToStick.slice().reverse() : rowsToStick;
|
|
795
|
+
const states = position === 'bottom' ? stickyStates.slice().reverse() : stickyStates;
|
|
796
|
+
// Measure row heights all at once before adding sticky styles to reduce layout thrashing.
|
|
797
|
+
const stickyOffsets = [];
|
|
798
|
+
const stickyCellHeights = [];
|
|
799
|
+
const elementsToStick = [];
|
|
800
|
+
for (let rowIndex = 0, stickyOffset = 0; rowIndex < rows.length; rowIndex++) {
|
|
801
|
+
if (!states[rowIndex]) {
|
|
802
|
+
continue;
|
|
803
|
+
}
|
|
804
|
+
stickyOffsets[rowIndex] = stickyOffset;
|
|
805
|
+
const row = rows[rowIndex];
|
|
806
|
+
elementsToStick[rowIndex] = this._isNativeHtmlTable
|
|
807
|
+
? Array.from(row.children)
|
|
808
|
+
: [row];
|
|
809
|
+
const height = row.getBoundingClientRect().height;
|
|
810
|
+
stickyOffset += height;
|
|
811
|
+
stickyCellHeights[rowIndex] = height;
|
|
812
|
+
}
|
|
813
|
+
const borderedRowIndex = states.lastIndexOf(true);
|
|
814
|
+
// Coalesce with other sticky row updates (top/bottom), sticky columns updates
|
|
815
|
+
// (and potentially other changes like column resize).
|
|
816
|
+
this._coalescedStyleScheduler.schedule(() => {
|
|
817
|
+
var _a, _b;
|
|
818
|
+
for (let rowIndex = 0; rowIndex < rows.length; rowIndex++) {
|
|
819
|
+
if (!states[rowIndex]) {
|
|
820
|
+
continue;
|
|
821
|
+
}
|
|
822
|
+
const offset = stickyOffsets[rowIndex];
|
|
823
|
+
const isBorderedRowIndex = rowIndex === borderedRowIndex;
|
|
824
|
+
for (const element of elementsToStick[rowIndex]) {
|
|
825
|
+
this._addStickyStyle(element, position, offset, isBorderedRowIndex);
|
|
826
|
+
}
|
|
827
|
+
}
|
|
828
|
+
if (position === 'top') {
|
|
829
|
+
(_a = this._positionListener) === null || _a === void 0 ? void 0 : _a.stickyHeaderRowsUpdated({
|
|
830
|
+
sizes: stickyCellHeights,
|
|
831
|
+
offsets: stickyOffsets,
|
|
832
|
+
elements: elementsToStick,
|
|
833
|
+
});
|
|
834
|
+
}
|
|
835
|
+
else {
|
|
836
|
+
(_b = this._positionListener) === null || _b === void 0 ? void 0 : _b.stickyFooterRowsUpdated({
|
|
837
|
+
sizes: stickyCellHeights,
|
|
838
|
+
offsets: stickyOffsets,
|
|
839
|
+
elements: elementsToStick,
|
|
840
|
+
});
|
|
841
|
+
}
|
|
842
|
+
});
|
|
843
|
+
}
|
|
844
|
+
/**
|
|
845
|
+
* When using the native table in Safari, sticky footer cells do not stick. The only way to stick
|
|
846
|
+
* footer rows is to apply sticky styling to the tfoot container. This should only be done if
|
|
847
|
+
* all footer rows are sticky. If not all footer rows are sticky, remove sticky positioning from
|
|
848
|
+
* the tfoot element.
|
|
849
|
+
*/
|
|
850
|
+
updateStickyFooterContainer(tableElement, stickyStates) {
|
|
851
|
+
if (!this._isNativeHtmlTable) {
|
|
852
|
+
return;
|
|
853
|
+
}
|
|
854
|
+
const tfoot = tableElement.querySelector('tfoot');
|
|
855
|
+
// Coalesce with other sticky updates (and potentially other changes like column resize).
|
|
856
|
+
this._coalescedStyleScheduler.schedule(() => {
|
|
857
|
+
if (stickyStates.some(state => !state)) {
|
|
858
|
+
this._removeStickyStyle(tfoot, ['bottom']);
|
|
859
|
+
}
|
|
860
|
+
else {
|
|
861
|
+
this._addStickyStyle(tfoot, 'bottom', 0, false);
|
|
862
|
+
}
|
|
863
|
+
});
|
|
864
|
+
}
|
|
865
|
+
/**
|
|
866
|
+
* Removes the sticky style on the element by removing the sticky cell CSS class, re-evaluating
|
|
867
|
+
* the zIndex, removing each of the provided sticky directions, and removing the
|
|
868
|
+
* sticky position if there are no more directions.
|
|
869
|
+
*/
|
|
870
|
+
_removeStickyStyle(element, stickyDirections) {
|
|
871
|
+
for (const dir of stickyDirections) {
|
|
872
|
+
element.style[dir] = '';
|
|
873
|
+
element.classList.remove(this._borderCellCss[dir]);
|
|
874
|
+
}
|
|
875
|
+
// If the element no longer has any more sticky directions, remove sticky positioning and
|
|
876
|
+
// the sticky CSS class.
|
|
877
|
+
// Short-circuit checking element.style[dir] for stickyDirections as they
|
|
878
|
+
// were already removed above.
|
|
879
|
+
const hasDirection = STICKY_DIRECTIONS.some(dir => stickyDirections.indexOf(dir) === -1 && element.style[dir]);
|
|
880
|
+
if (hasDirection) {
|
|
881
|
+
element.style.zIndex = this._getCalculatedZIndex(element);
|
|
882
|
+
}
|
|
883
|
+
else {
|
|
884
|
+
// When not hasDirection, _getCalculatedZIndex will always return ''.
|
|
885
|
+
element.style.zIndex = '';
|
|
886
|
+
if (this._needsPositionStickyOnElement) {
|
|
887
|
+
element.style.position = '';
|
|
888
|
+
}
|
|
889
|
+
element.classList.remove(this._stickCellCss);
|
|
890
|
+
}
|
|
891
|
+
}
|
|
892
|
+
/**
|
|
893
|
+
* Adds the sticky styling to the element by adding the sticky style class, changing position
|
|
894
|
+
* to be sticky (and -webkit-sticky), setting the appropriate zIndex, and adding a sticky
|
|
895
|
+
* direction and value.
|
|
896
|
+
*/
|
|
897
|
+
_addStickyStyle(element, dir, dirValue, isBorderElement) {
|
|
898
|
+
element.classList.add(this._stickCellCss);
|
|
899
|
+
if (isBorderElement) {
|
|
900
|
+
element.classList.add(this._borderCellCss[dir]);
|
|
901
|
+
}
|
|
902
|
+
element.style[dir] = `${dirValue}px`;
|
|
903
|
+
element.style.zIndex = this._getCalculatedZIndex(element);
|
|
904
|
+
if (this._needsPositionStickyOnElement) {
|
|
905
|
+
element.style.cssText += 'position: -webkit-sticky; position: sticky; ';
|
|
906
|
+
}
|
|
907
|
+
}
|
|
908
|
+
/**
|
|
909
|
+
* Calculate what the z-index should be for the element, depending on what directions (top,
|
|
910
|
+
* bottom, left, right) have been set. It should be true that elements with a top direction
|
|
911
|
+
* should have the highest index since these are elements like a table header. If any of those
|
|
912
|
+
* elements are also sticky in another direction, then they should appear above other elements
|
|
913
|
+
* that are only sticky top (e.g. a sticky column on a sticky header). Bottom-sticky elements
|
|
914
|
+
* (e.g. footer rows) should then be next in the ordering such that they are below the header
|
|
915
|
+
* but above any non-sticky elements. Finally, left/right sticky elements (e.g. sticky columns)
|
|
916
|
+
* should minimally increment so that they are above non-sticky elements but below top and bottom
|
|
917
|
+
* elements.
|
|
918
|
+
*/
|
|
919
|
+
_getCalculatedZIndex(element) {
|
|
920
|
+
const zIndexIncrements = {
|
|
921
|
+
top: 100,
|
|
922
|
+
bottom: 10,
|
|
923
|
+
left: 1,
|
|
924
|
+
right: 1,
|
|
925
|
+
};
|
|
926
|
+
let zIndex = 0;
|
|
927
|
+
// Use `Iterable` instead of `Array` because TypeScript, as of 3.6.3,
|
|
928
|
+
// loses the array generic type in the `for of`. But we *also* have to use `Array` because
|
|
929
|
+
// typescript won't iterate over an `Iterable` unless you compile with `--downlevelIteration`
|
|
930
|
+
for (const dir of STICKY_DIRECTIONS) {
|
|
931
|
+
if (element.style[dir]) {
|
|
932
|
+
zIndex += zIndexIncrements[dir];
|
|
933
|
+
}
|
|
934
|
+
}
|
|
935
|
+
return zIndex ? `${zIndex}` : '';
|
|
936
|
+
}
|
|
937
|
+
/** Gets the widths for each cell in the provided row. */
|
|
938
|
+
_getCellWidths(row, recalculateCellWidths = true) {
|
|
939
|
+
if (!recalculateCellWidths && this._cachedCellWidths.length) {
|
|
940
|
+
return this._cachedCellWidths;
|
|
941
|
+
}
|
|
942
|
+
const cellWidths = [];
|
|
943
|
+
const firstRowCells = row.children;
|
|
944
|
+
for (let i = 0; i < firstRowCells.length; i++) {
|
|
945
|
+
let cell = firstRowCells[i];
|
|
946
|
+
cellWidths.push(cell.getBoundingClientRect().width);
|
|
947
|
+
}
|
|
948
|
+
this._cachedCellWidths = cellWidths;
|
|
949
|
+
return cellWidths;
|
|
950
|
+
}
|
|
951
|
+
/**
|
|
952
|
+
* Determines the left and right positions of each sticky column cell, which will be the
|
|
953
|
+
* accumulation of all sticky column cell widths to the left and right, respectively.
|
|
954
|
+
* Non-sticky cells do not need to have a value set since their positions will not be applied.
|
|
955
|
+
*/
|
|
956
|
+
_getStickyStartColumnPositions(widths, stickyStates) {
|
|
957
|
+
const positions = [];
|
|
958
|
+
let nextPosition = 0;
|
|
959
|
+
for (let i = 0; i < widths.length; i++) {
|
|
960
|
+
if (stickyStates[i]) {
|
|
961
|
+
positions[i] = nextPosition;
|
|
962
|
+
nextPosition += widths[i];
|
|
963
|
+
}
|
|
964
|
+
}
|
|
965
|
+
return positions;
|
|
966
|
+
}
|
|
967
|
+
/**
|
|
968
|
+
* Determines the left and right positions of each sticky column cell, which will be the
|
|
969
|
+
* accumulation of all sticky column cell widths to the left and right, respectively.
|
|
970
|
+
* Non-sticky cells do not need to have a value set since their positions will not be applied.
|
|
971
|
+
*/
|
|
972
|
+
_getStickyEndColumnPositions(widths, stickyStates) {
|
|
973
|
+
const positions = [];
|
|
974
|
+
let nextPosition = 0;
|
|
975
|
+
for (let i = widths.length; i > 0; i--) {
|
|
976
|
+
if (stickyStates[i]) {
|
|
977
|
+
positions[i] = nextPosition;
|
|
978
|
+
nextPosition += widths[i];
|
|
979
|
+
}
|
|
980
|
+
}
|
|
981
|
+
return positions;
|
|
982
|
+
}
|
|
983
|
+
}
|
|
984
|
+
|
|
985
|
+
/**
|
|
986
|
+
* @license
|
|
987
|
+
* Copyright Google LLC All Rights Reserved.
|
|
988
|
+
*
|
|
989
|
+
* Use of this source code is governed by an MIT-style license that can be
|
|
990
|
+
* found in the LICENSE file at https://angular.io/license
|
|
991
|
+
*/
|
|
992
|
+
/**
|
|
993
|
+
* Returns an error to be thrown when attempting to find an nonexistent column.
|
|
994
|
+
* @param id Id whose lookup failed.
|
|
995
|
+
* @docs-private
|
|
996
|
+
*/
|
|
997
|
+
function getTableUnknownColumnError(id) {
|
|
998
|
+
return Error(`Could not find column with id "${id}".`);
|
|
999
|
+
}
|
|
1000
|
+
/**
|
|
1001
|
+
* Returns an error to be thrown when two column definitions have the same name.
|
|
1002
|
+
* @docs-private
|
|
1003
|
+
*/
|
|
1004
|
+
function getTableDuplicateColumnNameError(name) {
|
|
1005
|
+
return Error(`Duplicate column definition name provided: "${name}".`);
|
|
1006
|
+
}
|
|
1007
|
+
/**
|
|
1008
|
+
* Returns an error to be thrown when there are multiple rows that are missing a when function.
|
|
1009
|
+
* @docs-private
|
|
1010
|
+
*/
|
|
1011
|
+
function getTableMultipleDefaultRowDefsError() {
|
|
1012
|
+
return Error(`There can only be one default row without a when predicate function.`);
|
|
1013
|
+
}
|
|
1014
|
+
/**
|
|
1015
|
+
* Returns an error to be thrown when there are no matching row defs for a particular set of data.
|
|
1016
|
+
* @docs-private
|
|
1017
|
+
*/
|
|
1018
|
+
function getTableMissingMatchingRowDefError(data) {
|
|
1019
|
+
return Error(`Could not find a matching row definition for the` +
|
|
1020
|
+
`provided row data: ${JSON.stringify(data)}`);
|
|
1021
|
+
}
|
|
1022
|
+
/**
|
|
1023
|
+
* Returns an error to be thrown when there is no row definitions present in the content.
|
|
1024
|
+
* @docs-private
|
|
1025
|
+
*/
|
|
1026
|
+
function getTableMissingRowDefsError() {
|
|
1027
|
+
return Error('Missing definitions for header, footer, and row; ' +
|
|
1028
|
+
'cannot determine which columns should be rendered.');
|
|
1029
|
+
}
|
|
1030
|
+
/**
|
|
1031
|
+
* Returns an error to be thrown when the data source does not match the compatible types.
|
|
1032
|
+
* @docs-private
|
|
1033
|
+
*/
|
|
1034
|
+
function getTableUnknownDataSourceError() {
|
|
1035
|
+
return Error(`Provided data source did not match an array, Observable, or DataSource`);
|
|
1036
|
+
}
|
|
1037
|
+
/**
|
|
1038
|
+
* Returns an error to be thrown when the text column cannot find a parent table to inject.
|
|
1039
|
+
* @docs-private
|
|
1040
|
+
*/
|
|
1041
|
+
function getTableTextColumnMissingParentTableError() {
|
|
1042
|
+
return Error(`Text column could not find a parent table for registration.`);
|
|
1043
|
+
}
|
|
1044
|
+
/**
|
|
1045
|
+
* Returns an error to be thrown when a table text column doesn't have a name.
|
|
1046
|
+
* @docs-private
|
|
1047
|
+
*/
|
|
1048
|
+
function getTableTextColumnMissingNameError() {
|
|
1049
|
+
return Error(`Table text column must have a name.`);
|
|
1050
|
+
}
|
|
1051
|
+
|
|
1052
|
+
/**
|
|
1053
|
+
* @license
|
|
1054
|
+
* Copyright Google LLC All Rights Reserved.
|
|
1055
|
+
*
|
|
1056
|
+
* Use of this source code is governed by an MIT-style license that can be
|
|
1057
|
+
* found in the LICENSE file at https://angular.io/license
|
|
1058
|
+
*/
|
|
1059
|
+
/** The injection token used to specify the StickyPositioningListener. */
|
|
1060
|
+
const STICKY_POSITIONING_LISTENER = new InjectionToken('CDK_SPL');
|
|
1061
|
+
|
|
1062
|
+
/**
|
|
1063
|
+
* Enables the recycle view repeater strategy, which reduces rendering latency. Not compatible with
|
|
1064
|
+
* tables that animate rows.
|
|
1065
|
+
*/
|
|
1066
|
+
class CdkRecycleRows {
|
|
1067
|
+
}
|
|
1068
|
+
CdkRecycleRows.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: CdkRecycleRows, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
1069
|
+
CdkRecycleRows.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.0", type: CdkRecycleRows, selector: "cdk-table[recycleRows], table[cdk-table][recycleRows]", providers: [{ provide: _VIEW_REPEATER_STRATEGY, useClass: _RecycleViewRepeaterStrategy }], ngImport: i0 });
|
|
1070
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: CdkRecycleRows, decorators: [{
|
|
1071
|
+
type: Directive,
|
|
1072
|
+
args: [{
|
|
1073
|
+
selector: 'cdk-table[recycleRows], table[cdk-table][recycleRows]',
|
|
1074
|
+
providers: [{ provide: _VIEW_REPEATER_STRATEGY, useClass: _RecycleViewRepeaterStrategy }],
|
|
1075
|
+
}]
|
|
1076
|
+
}] });
|
|
1077
|
+
/**
|
|
1078
|
+
* Provides a handle for the table to grab the view container's ng-container to insert data rows.
|
|
1079
|
+
* @docs-private
|
|
1080
|
+
*/
|
|
1081
|
+
class DataRowOutlet {
|
|
1082
|
+
constructor(viewContainer, elementRef) {
|
|
1083
|
+
this.viewContainer = viewContainer;
|
|
1084
|
+
this.elementRef = elementRef;
|
|
1085
|
+
}
|
|
1086
|
+
}
|
|
1087
|
+
DataRowOutlet.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: DataRowOutlet, deps: [{ token: i0.ViewContainerRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
1088
|
+
DataRowOutlet.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.0", type: DataRowOutlet, selector: "[rowOutlet]", ngImport: i0 });
|
|
1089
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: DataRowOutlet, decorators: [{
|
|
1090
|
+
type: Directive,
|
|
1091
|
+
args: [{ selector: '[rowOutlet]' }]
|
|
1092
|
+
}], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.ElementRef }]; } });
|
|
1093
|
+
/**
|
|
1094
|
+
* Provides a handle for the table to grab the view container's ng-container to insert the header.
|
|
1095
|
+
* @docs-private
|
|
1096
|
+
*/
|
|
1097
|
+
class HeaderRowOutlet {
|
|
1098
|
+
constructor(viewContainer, elementRef) {
|
|
1099
|
+
this.viewContainer = viewContainer;
|
|
1100
|
+
this.elementRef = elementRef;
|
|
1101
|
+
}
|
|
1102
|
+
}
|
|
1103
|
+
HeaderRowOutlet.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: HeaderRowOutlet, deps: [{ token: i0.ViewContainerRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
1104
|
+
HeaderRowOutlet.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.0", type: HeaderRowOutlet, selector: "[headerRowOutlet]", ngImport: i0 });
|
|
1105
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: HeaderRowOutlet, decorators: [{
|
|
1106
|
+
type: Directive,
|
|
1107
|
+
args: [{ selector: '[headerRowOutlet]' }]
|
|
1108
|
+
}], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.ElementRef }]; } });
|
|
1109
|
+
/**
|
|
1110
|
+
* Provides a handle for the table to grab the view container's ng-container to insert the footer.
|
|
1111
|
+
* @docs-private
|
|
1112
|
+
*/
|
|
1113
|
+
class FooterRowOutlet {
|
|
1114
|
+
constructor(viewContainer, elementRef) {
|
|
1115
|
+
this.viewContainer = viewContainer;
|
|
1116
|
+
this.elementRef = elementRef;
|
|
1117
|
+
}
|
|
1118
|
+
}
|
|
1119
|
+
FooterRowOutlet.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: FooterRowOutlet, deps: [{ token: i0.ViewContainerRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
1120
|
+
FooterRowOutlet.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.0", type: FooterRowOutlet, selector: "[footerRowOutlet]", ngImport: i0 });
|
|
1121
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: FooterRowOutlet, decorators: [{
|
|
1122
|
+
type: Directive,
|
|
1123
|
+
args: [{ selector: '[footerRowOutlet]' }]
|
|
1124
|
+
}], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.ElementRef }]; } });
|
|
1125
|
+
/**
|
|
1126
|
+
* Provides a handle for the table to grab the view
|
|
1127
|
+
* container's ng-container to insert the no data row.
|
|
1128
|
+
* @docs-private
|
|
1129
|
+
*/
|
|
1130
|
+
class NoDataRowOutlet {
|
|
1131
|
+
constructor(viewContainer, elementRef) {
|
|
1132
|
+
this.viewContainer = viewContainer;
|
|
1133
|
+
this.elementRef = elementRef;
|
|
1134
|
+
}
|
|
1135
|
+
}
|
|
1136
|
+
NoDataRowOutlet.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: NoDataRowOutlet, deps: [{ token: i0.ViewContainerRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
1137
|
+
NoDataRowOutlet.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.0", type: NoDataRowOutlet, selector: "[noDataRowOutlet]", ngImport: i0 });
|
|
1138
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: NoDataRowOutlet, decorators: [{
|
|
1139
|
+
type: Directive,
|
|
1140
|
+
args: [{ selector: '[noDataRowOutlet]' }]
|
|
1141
|
+
}], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.ElementRef }]; } });
|
|
1142
|
+
/**
|
|
1143
|
+
* The table template that can be used by the mat-table. Should not be used outside of the
|
|
1144
|
+
* material library.
|
|
1145
|
+
* @docs-private
|
|
1146
|
+
*/
|
|
1147
|
+
const CDK_TABLE_TEMPLATE =
|
|
1148
|
+
// Note that according to MDN, the `caption` element has to be projected as the **first**
|
|
1149
|
+
// element in the table. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/caption
|
|
1150
|
+
`
|
|
1151
|
+
<ng-content select="caption"></ng-content>
|
|
1152
|
+
<ng-content select="colgroup, col"></ng-content>
|
|
1153
|
+
<ng-container headerRowOutlet></ng-container>
|
|
1154
|
+
<ng-container rowOutlet></ng-container>
|
|
1155
|
+
<ng-container noDataRowOutlet></ng-container>
|
|
1156
|
+
<ng-container footerRowOutlet></ng-container>
|
|
1157
|
+
`;
|
|
1158
|
+
/**
|
|
1159
|
+
* Class used to conveniently type the embedded view ref for rows with a context.
|
|
1160
|
+
* @docs-private
|
|
1161
|
+
*/
|
|
1162
|
+
class RowViewRef extends EmbeddedViewRef {
|
|
1163
|
+
}
|
|
1164
|
+
/**
|
|
1165
|
+
* A data table that can render a header row, data rows, and a footer row.
|
|
1166
|
+
* Uses the dataSource input to determine the data to be rendered. The data can be provided either
|
|
1167
|
+
* as a data array, an Observable stream that emits the data array to render, or a DataSource with a
|
|
1168
|
+
* connect function that will return an Observable stream that emits the data array to render.
|
|
1169
|
+
*/
|
|
1170
|
+
class CdkTable {
|
|
1171
|
+
constructor(_differs, _changeDetectorRef, _elementRef, role, _dir, _document, _platform, _viewRepeater, _coalescedStyleScheduler, _viewportRuler,
|
|
1172
|
+
/**
|
|
1173
|
+
* @deprecated `_stickyPositioningListener` parameter to become required.
|
|
1174
|
+
* @breaking-change 13.0.0
|
|
1175
|
+
*/
|
|
1176
|
+
_stickyPositioningListener,
|
|
1177
|
+
/**
|
|
1178
|
+
* @deprecated `_ngZone` parameter to become required.
|
|
1179
|
+
* @breaking-change 14.0.0
|
|
1180
|
+
*/
|
|
1181
|
+
_ngZone) {
|
|
1182
|
+
this._differs = _differs;
|
|
1183
|
+
this._changeDetectorRef = _changeDetectorRef;
|
|
1184
|
+
this._elementRef = _elementRef;
|
|
1185
|
+
this._dir = _dir;
|
|
1186
|
+
this._platform = _platform;
|
|
1187
|
+
this._viewRepeater = _viewRepeater;
|
|
1188
|
+
this._coalescedStyleScheduler = _coalescedStyleScheduler;
|
|
1189
|
+
this._viewportRuler = _viewportRuler;
|
|
1190
|
+
this._stickyPositioningListener = _stickyPositioningListener;
|
|
1191
|
+
this._ngZone = _ngZone;
|
|
1192
|
+
/** Subject that emits when the component has been destroyed. */
|
|
1193
|
+
this._onDestroy = new Subject();
|
|
1194
|
+
/**
|
|
1195
|
+
* Map of all the user's defined columns (header, data, and footer cell template) identified by
|
|
1196
|
+
* name. Collection populated by the column definitions gathered by `ContentChildren` as well as
|
|
1197
|
+
* any custom column definitions added to `_customColumnDefs`.
|
|
1198
|
+
*/
|
|
1199
|
+
this._columnDefsByName = new Map();
|
|
1200
|
+
/**
|
|
1201
|
+
* Column definitions that were defined outside of the direct content children of the table.
|
|
1202
|
+
* These will be defined when, e.g., creating a wrapper around the cdkTable that has
|
|
1203
|
+
* column definitions as *its* content child.
|
|
1204
|
+
*/
|
|
1205
|
+
this._customColumnDefs = new Set();
|
|
1206
|
+
/**
|
|
1207
|
+
* Data row definitions that were defined outside of the direct content children of the table.
|
|
1208
|
+
* These will be defined when, e.g., creating a wrapper around the cdkTable that has
|
|
1209
|
+
* built-in data rows as *its* content child.
|
|
1210
|
+
*/
|
|
1211
|
+
this._customRowDefs = new Set();
|
|
1212
|
+
/**
|
|
1213
|
+
* Header row definitions that were defined outside of the direct content children of the table.
|
|
1214
|
+
* These will be defined when, e.g., creating a wrapper around the cdkTable that has
|
|
1215
|
+
* built-in header rows as *its* content child.
|
|
1216
|
+
*/
|
|
1217
|
+
this._customHeaderRowDefs = new Set();
|
|
1218
|
+
/**
|
|
1219
|
+
* Footer row definitions that were defined outside of the direct content children of the table.
|
|
1220
|
+
* These will be defined when, e.g., creating a wrapper around the cdkTable that has a
|
|
1221
|
+
* built-in footer row as *its* content child.
|
|
1222
|
+
*/
|
|
1223
|
+
this._customFooterRowDefs = new Set();
|
|
1224
|
+
/**
|
|
1225
|
+
* Whether the header row definition has been changed. Triggers an update to the header row after
|
|
1226
|
+
* content is checked. Initialized as true so that the table renders the initial set of rows.
|
|
1227
|
+
*/
|
|
1228
|
+
this._headerRowDefChanged = true;
|
|
1229
|
+
/**
|
|
1230
|
+
* Whether the footer row definition has been changed. Triggers an update to the footer row after
|
|
1231
|
+
* content is checked. Initialized as true so that the table renders the initial set of rows.
|
|
1232
|
+
*/
|
|
1233
|
+
this._footerRowDefChanged = true;
|
|
1234
|
+
/**
|
|
1235
|
+
* Whether the sticky column styles need to be updated. Set to `true` when the visible columns
|
|
1236
|
+
* change.
|
|
1237
|
+
*/
|
|
1238
|
+
this._stickyColumnStylesNeedReset = true;
|
|
1239
|
+
/**
|
|
1240
|
+
* Whether the sticky styler should recalculate cell widths when applying sticky styles. If
|
|
1241
|
+
* `false`, cached values will be used instead. This is only applicable to tables with
|
|
1242
|
+
* {@link fixedLayout} enabled. For other tables, cell widths will always be recalculated.
|
|
1243
|
+
*/
|
|
1244
|
+
this._forceRecalculateCellWidths = true;
|
|
1245
|
+
/**
|
|
1246
|
+
* Cache of the latest rendered `RenderRow` objects as a map for easy retrieval when constructing
|
|
1247
|
+
* a new list of `RenderRow` objects for rendering rows. Since the new list is constructed with
|
|
1248
|
+
* the cached `RenderRow` objects when possible, the row identity is preserved when the data
|
|
1249
|
+
* and row template matches, which allows the `IterableDiffer` to check rows by reference
|
|
1250
|
+
* and understand which rows are added/moved/removed.
|
|
1251
|
+
*
|
|
1252
|
+
* Implemented as a map of maps where the first key is the `data: T` object and the second is the
|
|
1253
|
+
* `CdkRowDef<T>` object. With the two keys, the cache points to a `RenderRow<T>` object that
|
|
1254
|
+
* contains an array of created pairs. The array is necessary to handle cases where the data
|
|
1255
|
+
* array contains multiple duplicate data objects and each instantiated `RenderRow` must be
|
|
1256
|
+
* stored.
|
|
1257
|
+
*/
|
|
1258
|
+
this._cachedRenderRowsMap = new Map();
|
|
1259
|
+
/**
|
|
1260
|
+
* CSS class added to any row or cell that has sticky positioning applied. May be overridden by
|
|
1261
|
+
* table subclasses.
|
|
1262
|
+
*/
|
|
1263
|
+
this.stickyCssClass = 'cdk-table-sticky';
|
|
1264
|
+
/**
|
|
1265
|
+
* Whether to manually add position: sticky to all sticky cell elements. Not needed if
|
|
1266
|
+
* the position is set in a selector associated with the value of stickyCssClass. May be
|
|
1267
|
+
* overridden by table subclasses
|
|
1268
|
+
*/
|
|
1269
|
+
this.needsPositionStickyOnElement = true;
|
|
1270
|
+
/** Whether the no data row is currently showing anything. */
|
|
1271
|
+
this._isShowingNoDataRow = false;
|
|
1272
|
+
this._multiTemplateDataRows = false;
|
|
1273
|
+
this._fixedLayout = false;
|
|
1274
|
+
/**
|
|
1275
|
+
* Emits when the table completes rendering a set of data rows based on the latest data from the
|
|
1276
|
+
* data source, even if the set of rows is empty.
|
|
1277
|
+
*/
|
|
1278
|
+
this.contentChanged = new EventEmitter();
|
|
1279
|
+
// TODO(andrewseguin): Remove max value as the end index
|
|
1280
|
+
// and instead calculate the view on init and scroll.
|
|
1281
|
+
/**
|
|
1282
|
+
* Stream containing the latest information on what rows are being displayed on screen.
|
|
1283
|
+
* Can be used by the data source to as a heuristic of what data should be provided.
|
|
1284
|
+
*
|
|
1285
|
+
* @docs-private
|
|
1286
|
+
*/
|
|
1287
|
+
this.viewChange = new BehaviorSubject({
|
|
1288
|
+
start: 0,
|
|
1289
|
+
end: Number.MAX_VALUE,
|
|
1290
|
+
});
|
|
1291
|
+
if (!role) {
|
|
1292
|
+
this._elementRef.nativeElement.setAttribute('role', 'table');
|
|
1293
|
+
}
|
|
1294
|
+
this._document = _document;
|
|
1295
|
+
this._isNativeHtmlTable = this._elementRef.nativeElement.nodeName === 'TABLE';
|
|
1296
|
+
}
|
|
1297
|
+
/**
|
|
1298
|
+
* Tracking function that will be used to check the differences in data changes. Used similarly
|
|
1299
|
+
* to `ngFor` `trackBy` function. Optimize row operations by identifying a row based on its data
|
|
1300
|
+
* relative to the function to know if a row should be added/removed/moved.
|
|
1301
|
+
* Accepts a function that takes two parameters, `index` and `item`.
|
|
1302
|
+
*/
|
|
1303
|
+
get trackBy() {
|
|
1304
|
+
return this._trackByFn;
|
|
1305
|
+
}
|
|
1306
|
+
set trackBy(fn) {
|
|
1307
|
+
if ((typeof ngDevMode === 'undefined' || ngDevMode) && fn != null && typeof fn !== 'function') {
|
|
1308
|
+
console.warn(`trackBy must be a function, but received ${JSON.stringify(fn)}.`);
|
|
1309
|
+
}
|
|
1310
|
+
this._trackByFn = fn;
|
|
1311
|
+
}
|
|
1312
|
+
/**
|
|
1313
|
+
* The table's source of data, which can be provided in three ways (in order of complexity):
|
|
1314
|
+
* - Simple data array (each object represents one table row)
|
|
1315
|
+
* - Stream that emits a data array each time the array changes
|
|
1316
|
+
* - `DataSource` object that implements the connect/disconnect interface.
|
|
1317
|
+
*
|
|
1318
|
+
* If a data array is provided, the table must be notified when the array's objects are
|
|
1319
|
+
* added, removed, or moved. This can be done by calling the `renderRows()` function which will
|
|
1320
|
+
* render the diff since the last table render. If the data array reference is changed, the table
|
|
1321
|
+
* will automatically trigger an update to the rows.
|
|
1322
|
+
*
|
|
1323
|
+
* When providing an Observable stream, the table will trigger an update automatically when the
|
|
1324
|
+
* stream emits a new array of data.
|
|
1325
|
+
*
|
|
1326
|
+
* Finally, when providing a `DataSource` object, the table will use the Observable stream
|
|
1327
|
+
* provided by the connect function and trigger updates when that stream emits new data array
|
|
1328
|
+
* values. During the table's ngOnDestroy or when the data source is removed from the table, the
|
|
1329
|
+
* table will call the DataSource's `disconnect` function (may be useful for cleaning up any
|
|
1330
|
+
* subscriptions registered during the connect process).
|
|
1331
|
+
*/
|
|
1332
|
+
get dataSource() {
|
|
1333
|
+
return this._dataSource;
|
|
1334
|
+
}
|
|
1335
|
+
set dataSource(dataSource) {
|
|
1336
|
+
if (this._dataSource !== dataSource) {
|
|
1337
|
+
this._switchDataSource(dataSource);
|
|
1338
|
+
}
|
|
1339
|
+
}
|
|
1340
|
+
/**
|
|
1341
|
+
* Whether to allow multiple rows per data object by evaluating which rows evaluate their 'when'
|
|
1342
|
+
* predicate to true. If `multiTemplateDataRows` is false, which is the default value, then each
|
|
1343
|
+
* dataobject will render the first row that evaluates its when predicate to true, in the order
|
|
1344
|
+
* defined in the table, or otherwise the default row which does not have a when predicate.
|
|
1345
|
+
*/
|
|
1346
|
+
get multiTemplateDataRows() {
|
|
1347
|
+
return this._multiTemplateDataRows;
|
|
1348
|
+
}
|
|
1349
|
+
set multiTemplateDataRows(v) {
|
|
1350
|
+
this._multiTemplateDataRows = coerceBooleanProperty(v);
|
|
1351
|
+
// In Ivy if this value is set via a static attribute (e.g. <table multiTemplateDataRows>),
|
|
1352
|
+
// this setter will be invoked before the row outlet has been defined hence the null check.
|
|
1353
|
+
if (this._rowOutlet && this._rowOutlet.viewContainer.length) {
|
|
1354
|
+
this._forceRenderDataRows();
|
|
1355
|
+
this.updateStickyColumnStyles();
|
|
1356
|
+
}
|
|
1357
|
+
}
|
|
1358
|
+
/**
|
|
1359
|
+
* Whether to use a fixed table layout. Enabling this option will enforce consistent column widths
|
|
1360
|
+
* and optimize rendering sticky styles for native tables. No-op for flex tables.
|
|
1361
|
+
*/
|
|
1362
|
+
get fixedLayout() {
|
|
1363
|
+
return this._fixedLayout;
|
|
1364
|
+
}
|
|
1365
|
+
set fixedLayout(v) {
|
|
1366
|
+
this._fixedLayout = coerceBooleanProperty(v);
|
|
1367
|
+
// Toggling `fixedLayout` may change column widths. Sticky column styles should be recalculated.
|
|
1368
|
+
this._forceRecalculateCellWidths = true;
|
|
1369
|
+
this._stickyColumnStylesNeedReset = true;
|
|
1370
|
+
}
|
|
1371
|
+
ngOnInit() {
|
|
1372
|
+
this._setupStickyStyler();
|
|
1373
|
+
if (this._isNativeHtmlTable) {
|
|
1374
|
+
this._applyNativeTableSections();
|
|
1375
|
+
}
|
|
1376
|
+
// Set up the trackBy function so that it uses the `RenderRow` as its identity by default. If
|
|
1377
|
+
// the user has provided a custom trackBy, return the result of that function as evaluated
|
|
1378
|
+
// with the values of the `RenderRow`'s data and index.
|
|
1379
|
+
this._dataDiffer = this._differs.find([]).create((_i, dataRow) => {
|
|
1380
|
+
return this.trackBy ? this.trackBy(dataRow.dataIndex, dataRow.data) : dataRow;
|
|
1381
|
+
});
|
|
1382
|
+
this._viewportRuler
|
|
1383
|
+
.change()
|
|
1384
|
+
.pipe(takeUntil(this._onDestroy))
|
|
1385
|
+
.subscribe(() => {
|
|
1386
|
+
this._forceRecalculateCellWidths = true;
|
|
1387
|
+
});
|
|
1388
|
+
}
|
|
1389
|
+
ngAfterContentChecked() {
|
|
1390
|
+
// Cache the row and column definitions gathered by ContentChildren and programmatic injection.
|
|
1391
|
+
this._cacheRowDefs();
|
|
1392
|
+
this._cacheColumnDefs();
|
|
1393
|
+
// Make sure that the user has at least added header, footer, or data row def.
|
|
1394
|
+
if (!this._headerRowDefs.length &&
|
|
1395
|
+
!this._footerRowDefs.length &&
|
|
1396
|
+
!this._rowDefs.length &&
|
|
1397
|
+
(typeof ngDevMode === 'undefined' || ngDevMode)) {
|
|
1398
|
+
throw getTableMissingRowDefsError();
|
|
1399
|
+
}
|
|
1400
|
+
// Render updates if the list of columns have been changed for the header, row, or footer defs.
|
|
1401
|
+
const columnsChanged = this._renderUpdatedColumns();
|
|
1402
|
+
const rowDefsChanged = columnsChanged || this._headerRowDefChanged || this._footerRowDefChanged;
|
|
1403
|
+
// Ensure sticky column styles are reset if set to `true` elsewhere.
|
|
1404
|
+
this._stickyColumnStylesNeedReset = this._stickyColumnStylesNeedReset || rowDefsChanged;
|
|
1405
|
+
this._forceRecalculateCellWidths = rowDefsChanged;
|
|
1406
|
+
// If the header row definition has been changed, trigger a render to the header row.
|
|
1407
|
+
if (this._headerRowDefChanged) {
|
|
1408
|
+
this._forceRenderHeaderRows();
|
|
1409
|
+
this._headerRowDefChanged = false;
|
|
1410
|
+
}
|
|
1411
|
+
// If the footer row definition has been changed, trigger a render to the footer row.
|
|
1412
|
+
if (this._footerRowDefChanged) {
|
|
1413
|
+
this._forceRenderFooterRows();
|
|
1414
|
+
this._footerRowDefChanged = false;
|
|
1415
|
+
}
|
|
1416
|
+
// If there is a data source and row definitions, connect to the data source unless a
|
|
1417
|
+
// connection has already been made.
|
|
1418
|
+
if (this.dataSource && this._rowDefs.length > 0 && !this._renderChangeSubscription) {
|
|
1419
|
+
this._observeRenderChanges();
|
|
1420
|
+
}
|
|
1421
|
+
else if (this._stickyColumnStylesNeedReset) {
|
|
1422
|
+
// In the above case, _observeRenderChanges will result in updateStickyColumnStyles being
|
|
1423
|
+
// called when it row data arrives. Otherwise, we need to call it proactively.
|
|
1424
|
+
this.updateStickyColumnStyles();
|
|
1425
|
+
}
|
|
1426
|
+
this._checkStickyStates();
|
|
1427
|
+
}
|
|
1428
|
+
ngOnDestroy() {
|
|
1429
|
+
[
|
|
1430
|
+
this._rowOutlet.viewContainer,
|
|
1431
|
+
this._headerRowOutlet.viewContainer,
|
|
1432
|
+
this._footerRowOutlet.viewContainer,
|
|
1433
|
+
this._cachedRenderRowsMap,
|
|
1434
|
+
this._customColumnDefs,
|
|
1435
|
+
this._customRowDefs,
|
|
1436
|
+
this._customHeaderRowDefs,
|
|
1437
|
+
this._customFooterRowDefs,
|
|
1438
|
+
this._columnDefsByName,
|
|
1439
|
+
].forEach(def => {
|
|
1440
|
+
def.clear();
|
|
1441
|
+
});
|
|
1442
|
+
this._headerRowDefs = [];
|
|
1443
|
+
this._footerRowDefs = [];
|
|
1444
|
+
this._defaultRowDef = null;
|
|
1445
|
+
this._onDestroy.next();
|
|
1446
|
+
this._onDestroy.complete();
|
|
1447
|
+
if (isDataSource(this.dataSource)) {
|
|
1448
|
+
this.dataSource.disconnect(this);
|
|
1449
|
+
}
|
|
1450
|
+
}
|
|
1451
|
+
/**
|
|
1452
|
+
* Renders rows based on the table's latest set of data, which was either provided directly as an
|
|
1453
|
+
* input or retrieved through an Observable stream (directly or from a DataSource).
|
|
1454
|
+
* Checks for differences in the data since the last diff to perform only the necessary
|
|
1455
|
+
* changes (add/remove/move rows).
|
|
1456
|
+
*
|
|
1457
|
+
* If the table's data source is a DataSource or Observable, this will be invoked automatically
|
|
1458
|
+
* each time the provided Observable stream emits a new data array. Otherwise if your data is
|
|
1459
|
+
* an array, this function will need to be called to render any changes.
|
|
1460
|
+
*/
|
|
1461
|
+
renderRows() {
|
|
1462
|
+
this._renderRows = this._getAllRenderRows();
|
|
1463
|
+
const changes = this._dataDiffer.diff(this._renderRows);
|
|
1464
|
+
if (!changes) {
|
|
1465
|
+
this._updateNoDataRow();
|
|
1466
|
+
this.contentChanged.next();
|
|
1467
|
+
return;
|
|
1468
|
+
}
|
|
1469
|
+
const viewContainer = this._rowOutlet.viewContainer;
|
|
1470
|
+
this._viewRepeater.applyChanges(changes, viewContainer, (record, _adjustedPreviousIndex, currentIndex) => this._getEmbeddedViewArgs(record.item, currentIndex), record => record.item.data, (change) => {
|
|
1471
|
+
if (change.operation === 1 /* _ViewRepeaterOperation.INSERTED */ && change.context) {
|
|
1472
|
+
this._renderCellTemplateForItem(change.record.item.rowDef, change.context);
|
|
1473
|
+
}
|
|
1474
|
+
});
|
|
1475
|
+
// Update the meta context of a row's context data (index, count, first, last, ...)
|
|
1476
|
+
this._updateRowIndexContext();
|
|
1477
|
+
// Update rows that did not get added/removed/moved but may have had their identity changed,
|
|
1478
|
+
// e.g. if trackBy matched data on some property but the actual data reference changed.
|
|
1479
|
+
changes.forEachIdentityChange((record) => {
|
|
1480
|
+
const rowView = viewContainer.get(record.currentIndex);
|
|
1481
|
+
rowView.context.$implicit = record.item.data;
|
|
1482
|
+
});
|
|
1483
|
+
this._updateNoDataRow();
|
|
1484
|
+
// Allow the new row data to render before measuring it.
|
|
1485
|
+
// @breaking-change 14.0.0 Remove undefined check once _ngZone is required.
|
|
1486
|
+
if (this._ngZone && NgZone.isInAngularZone()) {
|
|
1487
|
+
this._ngZone.onStable.pipe(take(1), takeUntil(this._onDestroy)).subscribe(() => {
|
|
1488
|
+
this.updateStickyColumnStyles();
|
|
1489
|
+
});
|
|
1490
|
+
}
|
|
1491
|
+
else {
|
|
1492
|
+
this.updateStickyColumnStyles();
|
|
1493
|
+
}
|
|
1494
|
+
this.contentChanged.next();
|
|
1495
|
+
}
|
|
1496
|
+
/** Adds a column definition that was not included as part of the content children. */
|
|
1497
|
+
addColumnDef(columnDef) {
|
|
1498
|
+
this._customColumnDefs.add(columnDef);
|
|
1499
|
+
}
|
|
1500
|
+
/** Removes a column definition that was not included as part of the content children. */
|
|
1501
|
+
removeColumnDef(columnDef) {
|
|
1502
|
+
this._customColumnDefs.delete(columnDef);
|
|
1503
|
+
}
|
|
1504
|
+
/** Adds a row definition that was not included as part of the content children. */
|
|
1505
|
+
addRowDef(rowDef) {
|
|
1506
|
+
this._customRowDefs.add(rowDef);
|
|
1507
|
+
}
|
|
1508
|
+
/** Removes a row definition that was not included as part of the content children. */
|
|
1509
|
+
removeRowDef(rowDef) {
|
|
1510
|
+
this._customRowDefs.delete(rowDef);
|
|
1511
|
+
}
|
|
1512
|
+
/** Adds a header row definition that was not included as part of the content children. */
|
|
1513
|
+
addHeaderRowDef(headerRowDef) {
|
|
1514
|
+
this._customHeaderRowDefs.add(headerRowDef);
|
|
1515
|
+
this._headerRowDefChanged = true;
|
|
1516
|
+
}
|
|
1517
|
+
/** Removes a header row definition that was not included as part of the content children. */
|
|
1518
|
+
removeHeaderRowDef(headerRowDef) {
|
|
1519
|
+
this._customHeaderRowDefs.delete(headerRowDef);
|
|
1520
|
+
this._headerRowDefChanged = true;
|
|
1521
|
+
}
|
|
1522
|
+
/** Adds a footer row definition that was not included as part of the content children. */
|
|
1523
|
+
addFooterRowDef(footerRowDef) {
|
|
1524
|
+
this._customFooterRowDefs.add(footerRowDef);
|
|
1525
|
+
this._footerRowDefChanged = true;
|
|
1526
|
+
}
|
|
1527
|
+
/** Removes a footer row definition that was not included as part of the content children. */
|
|
1528
|
+
removeFooterRowDef(footerRowDef) {
|
|
1529
|
+
this._customFooterRowDefs.delete(footerRowDef);
|
|
1530
|
+
this._footerRowDefChanged = true;
|
|
1531
|
+
}
|
|
1532
|
+
/** Sets a no data row definition that was not included as a part of the content children. */
|
|
1533
|
+
setNoDataRow(noDataRow) {
|
|
1534
|
+
this._customNoDataRow = noDataRow;
|
|
1535
|
+
}
|
|
1536
|
+
/**
|
|
1537
|
+
* Updates the header sticky styles. First resets all applied styles with respect to the cells
|
|
1538
|
+
* sticking to the top. Then, evaluating which cells need to be stuck to the top. This is
|
|
1539
|
+
* automatically called when the header row changes its displayed set of columns, or if its
|
|
1540
|
+
* sticky input changes. May be called manually for cases where the cell content changes outside
|
|
1541
|
+
* of these events.
|
|
1542
|
+
*/
|
|
1543
|
+
updateStickyHeaderRowStyles() {
|
|
1544
|
+
const headerRows = this._getRenderedRows(this._headerRowOutlet);
|
|
1545
|
+
const tableElement = this._elementRef.nativeElement;
|
|
1546
|
+
// Hide the thead element if there are no header rows. This is necessary to satisfy
|
|
1547
|
+
// overzealous a11y checkers that fail because the `rowgroup` element does not contain
|
|
1548
|
+
// required child `row`.
|
|
1549
|
+
const thead = tableElement.querySelector('thead');
|
|
1550
|
+
if (thead) {
|
|
1551
|
+
thead.style.display = headerRows.length ? '' : 'none';
|
|
1552
|
+
}
|
|
1553
|
+
const stickyStates = this._headerRowDefs.map(def => def.sticky);
|
|
1554
|
+
this._stickyStyler.clearStickyPositioning(headerRows, ['top']);
|
|
1555
|
+
this._stickyStyler.stickRows(headerRows, stickyStates, 'top');
|
|
1556
|
+
// Reset the dirty state of the sticky input change since it has been used.
|
|
1557
|
+
this._headerRowDefs.forEach(def => def.resetStickyChanged());
|
|
1558
|
+
}
|
|
1559
|
+
/**
|
|
1560
|
+
* Updates the footer sticky styles. First resets all applied styles with respect to the cells
|
|
1561
|
+
* sticking to the bottom. Then, evaluating which cells need to be stuck to the bottom. This is
|
|
1562
|
+
* automatically called when the footer row changes its displayed set of columns, or if its
|
|
1563
|
+
* sticky input changes. May be called manually for cases where the cell content changes outside
|
|
1564
|
+
* of these events.
|
|
1565
|
+
*/
|
|
1566
|
+
updateStickyFooterRowStyles() {
|
|
1567
|
+
const footerRows = this._getRenderedRows(this._footerRowOutlet);
|
|
1568
|
+
const tableElement = this._elementRef.nativeElement;
|
|
1569
|
+
// Hide the tfoot element if there are no footer rows. This is necessary to satisfy
|
|
1570
|
+
// overzealous a11y checkers that fail because the `rowgroup` element does not contain
|
|
1571
|
+
// required child `row`.
|
|
1572
|
+
const tfoot = tableElement.querySelector('tfoot');
|
|
1573
|
+
if (tfoot) {
|
|
1574
|
+
tfoot.style.display = footerRows.length ? '' : 'none';
|
|
1575
|
+
}
|
|
1576
|
+
const stickyStates = this._footerRowDefs.map(def => def.sticky);
|
|
1577
|
+
this._stickyStyler.clearStickyPositioning(footerRows, ['bottom']);
|
|
1578
|
+
this._stickyStyler.stickRows(footerRows, stickyStates, 'bottom');
|
|
1579
|
+
this._stickyStyler.updateStickyFooterContainer(this._elementRef.nativeElement, stickyStates);
|
|
1580
|
+
// Reset the dirty state of the sticky input change since it has been used.
|
|
1581
|
+
this._footerRowDefs.forEach(def => def.resetStickyChanged());
|
|
1582
|
+
}
|
|
1583
|
+
/**
|
|
1584
|
+
* Updates the column sticky styles. First resets all applied styles with respect to the cells
|
|
1585
|
+
* sticking to the left and right. Then sticky styles are added for the left and right according
|
|
1586
|
+
* to the column definitions for each cell in each row. This is automatically called when
|
|
1587
|
+
* the data source provides a new set of data or when a column definition changes its sticky
|
|
1588
|
+
* input. May be called manually for cases where the cell content changes outside of these events.
|
|
1589
|
+
*/
|
|
1590
|
+
updateStickyColumnStyles() {
|
|
1591
|
+
const headerRows = this._getRenderedRows(this._headerRowOutlet);
|
|
1592
|
+
const dataRows = this._getRenderedRows(this._rowOutlet);
|
|
1593
|
+
const footerRows = this._getRenderedRows(this._footerRowOutlet);
|
|
1594
|
+
// For tables not using a fixed layout, the column widths may change when new rows are rendered.
|
|
1595
|
+
// In a table using a fixed layout, row content won't affect column width, so sticky styles
|
|
1596
|
+
// don't need to be cleared unless either the sticky column config changes or one of the row
|
|
1597
|
+
// defs change.
|
|
1598
|
+
if ((this._isNativeHtmlTable && !this._fixedLayout) || this._stickyColumnStylesNeedReset) {
|
|
1599
|
+
// Clear the left and right positioning from all columns in the table across all rows since
|
|
1600
|
+
// sticky columns span across all table sections (header, data, footer)
|
|
1601
|
+
this._stickyStyler.clearStickyPositioning([...headerRows, ...dataRows, ...footerRows], ['left', 'right']);
|
|
1602
|
+
this._stickyColumnStylesNeedReset = false;
|
|
1603
|
+
}
|
|
1604
|
+
// Update the sticky styles for each header row depending on the def's sticky state
|
|
1605
|
+
headerRows.forEach((headerRow, i) => {
|
|
1606
|
+
this._addStickyColumnStyles([headerRow], this._headerRowDefs[i]);
|
|
1607
|
+
});
|
|
1608
|
+
// Update the sticky styles for each data row depending on its def's sticky state
|
|
1609
|
+
this._rowDefs.forEach(rowDef => {
|
|
1610
|
+
// Collect all the rows rendered with this row definition.
|
|
1611
|
+
const rows = [];
|
|
1612
|
+
for (let i = 0; i < dataRows.length; i++) {
|
|
1613
|
+
if (this._renderRows[i].rowDef === rowDef) {
|
|
1614
|
+
rows.push(dataRows[i]);
|
|
1615
|
+
}
|
|
1616
|
+
}
|
|
1617
|
+
this._addStickyColumnStyles(rows, rowDef);
|
|
1618
|
+
});
|
|
1619
|
+
// Update the sticky styles for each footer row depending on the def's sticky state
|
|
1620
|
+
footerRows.forEach((footerRow, i) => {
|
|
1621
|
+
this._addStickyColumnStyles([footerRow], this._footerRowDefs[i]);
|
|
1622
|
+
});
|
|
1623
|
+
// Reset the dirty state of the sticky input change since it has been used.
|
|
1624
|
+
Array.from(this._columnDefsByName.values()).forEach(def => def.resetStickyChanged());
|
|
1625
|
+
}
|
|
1626
|
+
/**
|
|
1627
|
+
* Get the list of RenderRow objects to render according to the current list of data and defined
|
|
1628
|
+
* row definitions. If the previous list already contained a particular pair, it should be reused
|
|
1629
|
+
* so that the differ equates their references.
|
|
1630
|
+
*/
|
|
1631
|
+
_getAllRenderRows() {
|
|
1632
|
+
const renderRows = [];
|
|
1633
|
+
// Store the cache and create a new one. Any re-used RenderRow objects will be moved into the
|
|
1634
|
+
// new cache while unused ones can be picked up by garbage collection.
|
|
1635
|
+
const prevCachedRenderRows = this._cachedRenderRowsMap;
|
|
1636
|
+
this._cachedRenderRowsMap = new Map();
|
|
1637
|
+
// For each data object, get the list of rows that should be rendered, represented by the
|
|
1638
|
+
// respective `RenderRow` object which is the pair of `data` and `CdkRowDef`.
|
|
1639
|
+
for (let i = 0; i < this._data.length; i++) {
|
|
1640
|
+
let data = this._data[i];
|
|
1641
|
+
const renderRowsForData = this._getRenderRowsForData(data, i, prevCachedRenderRows.get(data));
|
|
1642
|
+
if (!this._cachedRenderRowsMap.has(data)) {
|
|
1643
|
+
this._cachedRenderRowsMap.set(data, new WeakMap());
|
|
1644
|
+
}
|
|
1645
|
+
for (let j = 0; j < renderRowsForData.length; j++) {
|
|
1646
|
+
let renderRow = renderRowsForData[j];
|
|
1647
|
+
const cache = this._cachedRenderRowsMap.get(renderRow.data);
|
|
1648
|
+
if (cache.has(renderRow.rowDef)) {
|
|
1649
|
+
cache.get(renderRow.rowDef).push(renderRow);
|
|
1650
|
+
}
|
|
1651
|
+
else {
|
|
1652
|
+
cache.set(renderRow.rowDef, [renderRow]);
|
|
1653
|
+
}
|
|
1654
|
+
renderRows.push(renderRow);
|
|
1655
|
+
}
|
|
1656
|
+
}
|
|
1657
|
+
return renderRows;
|
|
1658
|
+
}
|
|
1659
|
+
/**
|
|
1660
|
+
* Gets a list of `RenderRow<T>` for the provided data object and any `CdkRowDef` objects that
|
|
1661
|
+
* should be rendered for this data. Reuses the cached RenderRow objects if they match the same
|
|
1662
|
+
* `(T, CdkRowDef)` pair.
|
|
1663
|
+
*/
|
|
1664
|
+
_getRenderRowsForData(data, dataIndex, cache) {
|
|
1665
|
+
const rowDefs = this._getRowDefs(data, dataIndex);
|
|
1666
|
+
return rowDefs.map(rowDef => {
|
|
1667
|
+
const cachedRenderRows = cache && cache.has(rowDef) ? cache.get(rowDef) : [];
|
|
1668
|
+
if (cachedRenderRows.length) {
|
|
1669
|
+
const dataRow = cachedRenderRows.shift();
|
|
1670
|
+
dataRow.dataIndex = dataIndex;
|
|
1671
|
+
return dataRow;
|
|
1672
|
+
}
|
|
1673
|
+
else {
|
|
1674
|
+
return { data, rowDef, dataIndex };
|
|
1675
|
+
}
|
|
1676
|
+
});
|
|
1677
|
+
}
|
|
1678
|
+
/** Update the map containing the content's column definitions. */
|
|
1679
|
+
_cacheColumnDefs() {
|
|
1680
|
+
this._columnDefsByName.clear();
|
|
1681
|
+
const columnDefs = mergeArrayAndSet(this._getOwnDefs(this._contentColumnDefs), this._customColumnDefs);
|
|
1682
|
+
columnDefs.forEach(columnDef => {
|
|
1683
|
+
if (this._columnDefsByName.has(columnDef.name) &&
|
|
1684
|
+
(typeof ngDevMode === 'undefined' || ngDevMode)) {
|
|
1685
|
+
throw getTableDuplicateColumnNameError(columnDef.name);
|
|
1686
|
+
}
|
|
1687
|
+
this._columnDefsByName.set(columnDef.name, columnDef);
|
|
1688
|
+
});
|
|
1689
|
+
}
|
|
1690
|
+
/** Update the list of all available row definitions that can be used. */
|
|
1691
|
+
_cacheRowDefs() {
|
|
1692
|
+
this._headerRowDefs = mergeArrayAndSet(this._getOwnDefs(this._contentHeaderRowDefs), this._customHeaderRowDefs);
|
|
1693
|
+
this._footerRowDefs = mergeArrayAndSet(this._getOwnDefs(this._contentFooterRowDefs), this._customFooterRowDefs);
|
|
1694
|
+
this._rowDefs = mergeArrayAndSet(this._getOwnDefs(this._contentRowDefs), this._customRowDefs);
|
|
1695
|
+
// After all row definitions are determined, find the row definition to be considered default.
|
|
1696
|
+
const defaultRowDefs = this._rowDefs.filter(def => !def.when);
|
|
1697
|
+
if (!this.multiTemplateDataRows &&
|
|
1698
|
+
defaultRowDefs.length > 1 &&
|
|
1699
|
+
(typeof ngDevMode === 'undefined' || ngDevMode)) {
|
|
1700
|
+
throw getTableMultipleDefaultRowDefsError();
|
|
1701
|
+
}
|
|
1702
|
+
this._defaultRowDef = defaultRowDefs[0];
|
|
1703
|
+
}
|
|
1704
|
+
/**
|
|
1705
|
+
* Check if the header, data, or footer rows have changed what columns they want to display or
|
|
1706
|
+
* whether the sticky states have changed for the header or footer. If there is a diff, then
|
|
1707
|
+
* re-render that section.
|
|
1708
|
+
*/
|
|
1709
|
+
_renderUpdatedColumns() {
|
|
1710
|
+
const columnsDiffReducer = (acc, def) => acc || !!def.getColumnsDiff();
|
|
1711
|
+
// Force re-render data rows if the list of column definitions have changed.
|
|
1712
|
+
const dataColumnsChanged = this._rowDefs.reduce(columnsDiffReducer, false);
|
|
1713
|
+
if (dataColumnsChanged) {
|
|
1714
|
+
this._forceRenderDataRows();
|
|
1715
|
+
}
|
|
1716
|
+
// Force re-render header/footer rows if the list of column definitions have changed.
|
|
1717
|
+
const headerColumnsChanged = this._headerRowDefs.reduce(columnsDiffReducer, false);
|
|
1718
|
+
if (headerColumnsChanged) {
|
|
1719
|
+
this._forceRenderHeaderRows();
|
|
1720
|
+
}
|
|
1721
|
+
const footerColumnsChanged = this._footerRowDefs.reduce(columnsDiffReducer, false);
|
|
1722
|
+
if (footerColumnsChanged) {
|
|
1723
|
+
this._forceRenderFooterRows();
|
|
1724
|
+
}
|
|
1725
|
+
return dataColumnsChanged || headerColumnsChanged || footerColumnsChanged;
|
|
1726
|
+
}
|
|
1727
|
+
/**
|
|
1728
|
+
* Switch to the provided data source by resetting the data and unsubscribing from the current
|
|
1729
|
+
* render change subscription if one exists. If the data source is null, interpret this by
|
|
1730
|
+
* clearing the row outlet. Otherwise start listening for new data.
|
|
1731
|
+
*/
|
|
1732
|
+
_switchDataSource(dataSource) {
|
|
1733
|
+
this._data = [];
|
|
1734
|
+
if (isDataSource(this.dataSource)) {
|
|
1735
|
+
this.dataSource.disconnect(this);
|
|
1736
|
+
}
|
|
1737
|
+
// Stop listening for data from the previous data source.
|
|
1738
|
+
if (this._renderChangeSubscription) {
|
|
1739
|
+
this._renderChangeSubscription.unsubscribe();
|
|
1740
|
+
this._renderChangeSubscription = null;
|
|
1741
|
+
}
|
|
1742
|
+
if (!dataSource) {
|
|
1743
|
+
if (this._dataDiffer) {
|
|
1744
|
+
this._dataDiffer.diff([]);
|
|
1745
|
+
}
|
|
1746
|
+
this._rowOutlet.viewContainer.clear();
|
|
1747
|
+
}
|
|
1748
|
+
this._dataSource = dataSource;
|
|
1749
|
+
}
|
|
1750
|
+
/** Set up a subscription for the data provided by the data source. */
|
|
1751
|
+
_observeRenderChanges() {
|
|
1752
|
+
// If no data source has been set, there is nothing to observe for changes.
|
|
1753
|
+
if (!this.dataSource) {
|
|
1754
|
+
return;
|
|
1755
|
+
}
|
|
1756
|
+
let dataStream;
|
|
1757
|
+
if (isDataSource(this.dataSource)) {
|
|
1758
|
+
dataStream = this.dataSource.connect(this);
|
|
1759
|
+
}
|
|
1760
|
+
else if (isObservable(this.dataSource)) {
|
|
1761
|
+
dataStream = this.dataSource;
|
|
1762
|
+
}
|
|
1763
|
+
else if (Array.isArray(this.dataSource)) {
|
|
1764
|
+
dataStream = of(this.dataSource);
|
|
1765
|
+
}
|
|
1766
|
+
if (dataStream === undefined && (typeof ngDevMode === 'undefined' || ngDevMode)) {
|
|
1767
|
+
throw getTableUnknownDataSourceError();
|
|
1768
|
+
}
|
|
1769
|
+
this._renderChangeSubscription = dataStream
|
|
1770
|
+
.pipe(takeUntil(this._onDestroy))
|
|
1771
|
+
.subscribe(data => {
|
|
1772
|
+
this._data = data || [];
|
|
1773
|
+
this.renderRows();
|
|
1774
|
+
});
|
|
1775
|
+
}
|
|
1776
|
+
/**
|
|
1777
|
+
* Clears any existing content in the header row outlet and creates a new embedded view
|
|
1778
|
+
* in the outlet using the header row definition.
|
|
1779
|
+
*/
|
|
1780
|
+
_forceRenderHeaderRows() {
|
|
1781
|
+
// Clear the header row outlet if any content exists.
|
|
1782
|
+
if (this._headerRowOutlet.viewContainer.length > 0) {
|
|
1783
|
+
this._headerRowOutlet.viewContainer.clear();
|
|
1784
|
+
}
|
|
1785
|
+
this._headerRowDefs.forEach((def, i) => this._renderRow(this._headerRowOutlet, def, i));
|
|
1786
|
+
this.updateStickyHeaderRowStyles();
|
|
1787
|
+
}
|
|
1788
|
+
/**
|
|
1789
|
+
* Clears any existing content in the footer row outlet and creates a new embedded view
|
|
1790
|
+
* in the outlet using the footer row definition.
|
|
1791
|
+
*/
|
|
1792
|
+
_forceRenderFooterRows() {
|
|
1793
|
+
// Clear the footer row outlet if any content exists.
|
|
1794
|
+
if (this._footerRowOutlet.viewContainer.length > 0) {
|
|
1795
|
+
this._footerRowOutlet.viewContainer.clear();
|
|
1796
|
+
}
|
|
1797
|
+
this._footerRowDefs.forEach((def, i) => this._renderRow(this._footerRowOutlet, def, i));
|
|
1798
|
+
this.updateStickyFooterRowStyles();
|
|
1799
|
+
}
|
|
1800
|
+
/** Adds the sticky column styles for the rows according to the columns' stick states. */
|
|
1801
|
+
_addStickyColumnStyles(rows, rowDef) {
|
|
1802
|
+
const columnDefs = Array.from(rowDef.columns || []).map(columnName => {
|
|
1803
|
+
const columnDef = this._columnDefsByName.get(columnName);
|
|
1804
|
+
if (!columnDef && (typeof ngDevMode === 'undefined' || ngDevMode)) {
|
|
1805
|
+
throw getTableUnknownColumnError(columnName);
|
|
1806
|
+
}
|
|
1807
|
+
return columnDef;
|
|
1808
|
+
});
|
|
1809
|
+
const stickyStartStates = columnDefs.map(columnDef => columnDef.sticky);
|
|
1810
|
+
const stickyEndStates = columnDefs.map(columnDef => columnDef.stickyEnd);
|
|
1811
|
+
this._stickyStyler.updateStickyColumns(rows, stickyStartStates, stickyEndStates, !this._fixedLayout || this._forceRecalculateCellWidths);
|
|
1812
|
+
}
|
|
1813
|
+
/** Gets the list of rows that have been rendered in the row outlet. */
|
|
1814
|
+
_getRenderedRows(rowOutlet) {
|
|
1815
|
+
const renderedRows = [];
|
|
1816
|
+
for (let i = 0; i < rowOutlet.viewContainer.length; i++) {
|
|
1817
|
+
const viewRef = rowOutlet.viewContainer.get(i);
|
|
1818
|
+
renderedRows.push(viewRef.rootNodes[0]);
|
|
1819
|
+
}
|
|
1820
|
+
return renderedRows;
|
|
1821
|
+
}
|
|
1822
|
+
/**
|
|
1823
|
+
* Get the matching row definitions that should be used for this row data. If there is only
|
|
1824
|
+
* one row definition, it is returned. Otherwise, find the row definitions that has a when
|
|
1825
|
+
* predicate that returns true with the data. If none return true, return the default row
|
|
1826
|
+
* definition.
|
|
1827
|
+
*/
|
|
1828
|
+
_getRowDefs(data, dataIndex) {
|
|
1829
|
+
if (this._rowDefs.length == 1) {
|
|
1830
|
+
return [this._rowDefs[0]];
|
|
1831
|
+
}
|
|
1832
|
+
let rowDefs = [];
|
|
1833
|
+
if (this.multiTemplateDataRows) {
|
|
1834
|
+
rowDefs = this._rowDefs.filter(def => !def.when || def.when(dataIndex, data));
|
|
1835
|
+
}
|
|
1836
|
+
else {
|
|
1837
|
+
let rowDef = this._rowDefs.find(def => def.when && def.when(dataIndex, data)) || this._defaultRowDef;
|
|
1838
|
+
if (rowDef) {
|
|
1839
|
+
rowDefs.push(rowDef);
|
|
1840
|
+
}
|
|
1841
|
+
}
|
|
1842
|
+
if (!rowDefs.length && (typeof ngDevMode === 'undefined' || ngDevMode)) {
|
|
1843
|
+
throw getTableMissingMatchingRowDefError(data);
|
|
1844
|
+
}
|
|
1845
|
+
return rowDefs;
|
|
1846
|
+
}
|
|
1847
|
+
_getEmbeddedViewArgs(renderRow, index) {
|
|
1848
|
+
const rowDef = renderRow.rowDef;
|
|
1849
|
+
const context = { $implicit: renderRow.data };
|
|
1850
|
+
return {
|
|
1851
|
+
templateRef: rowDef.template,
|
|
1852
|
+
context,
|
|
1853
|
+
index,
|
|
1854
|
+
};
|
|
1855
|
+
}
|
|
1856
|
+
/**
|
|
1857
|
+
* Creates a new row template in the outlet and fills it with the set of cell templates.
|
|
1858
|
+
* Optionally takes a context to provide to the row and cells, as well as an optional index
|
|
1859
|
+
* of where to place the new row template in the outlet.
|
|
1860
|
+
*/
|
|
1861
|
+
_renderRow(outlet, rowDef, index, context = {}) {
|
|
1862
|
+
// TODO(andrewseguin): enforce that one outlet was instantiated from createEmbeddedView
|
|
1863
|
+
const view = outlet.viewContainer.createEmbeddedView(rowDef.template, context, index);
|
|
1864
|
+
this._renderCellTemplateForItem(rowDef, context);
|
|
1865
|
+
return view;
|
|
1866
|
+
}
|
|
1867
|
+
_renderCellTemplateForItem(rowDef, context) {
|
|
1868
|
+
for (let cellTemplate of this._getCellTemplates(rowDef)) {
|
|
1869
|
+
if (CdkCellOutlet.mostRecentCellOutlet) {
|
|
1870
|
+
CdkCellOutlet.mostRecentCellOutlet._viewContainer.createEmbeddedView(cellTemplate, context);
|
|
1871
|
+
}
|
|
1872
|
+
}
|
|
1873
|
+
this._changeDetectorRef.markForCheck();
|
|
1874
|
+
}
|
|
1875
|
+
/**
|
|
1876
|
+
* Updates the index-related context for each row to reflect any changes in the index of the rows,
|
|
1877
|
+
* e.g. first/last/even/odd.
|
|
1878
|
+
*/
|
|
1879
|
+
_updateRowIndexContext() {
|
|
1880
|
+
const viewContainer = this._rowOutlet.viewContainer;
|
|
1881
|
+
for (let renderIndex = 0, count = viewContainer.length; renderIndex < count; renderIndex++) {
|
|
1882
|
+
const viewRef = viewContainer.get(renderIndex);
|
|
1883
|
+
const context = viewRef.context;
|
|
1884
|
+
context.count = count;
|
|
1885
|
+
context.first = renderIndex === 0;
|
|
1886
|
+
context.last = renderIndex === count - 1;
|
|
1887
|
+
context.even = renderIndex % 2 === 0;
|
|
1888
|
+
context.odd = !context.even;
|
|
1889
|
+
if (this.multiTemplateDataRows) {
|
|
1890
|
+
context.dataIndex = this._renderRows[renderIndex].dataIndex;
|
|
1891
|
+
context.renderIndex = renderIndex;
|
|
1892
|
+
}
|
|
1893
|
+
else {
|
|
1894
|
+
context.index = this._renderRows[renderIndex].dataIndex;
|
|
1895
|
+
}
|
|
1896
|
+
}
|
|
1897
|
+
}
|
|
1898
|
+
/** Gets the column definitions for the provided row def. */
|
|
1899
|
+
_getCellTemplates(rowDef) {
|
|
1900
|
+
if (!rowDef || !rowDef.columns) {
|
|
1901
|
+
return [];
|
|
1902
|
+
}
|
|
1903
|
+
return Array.from(rowDef.columns, columnId => {
|
|
1904
|
+
const column = this._columnDefsByName.get(columnId);
|
|
1905
|
+
if (!column && (typeof ngDevMode === 'undefined' || ngDevMode)) {
|
|
1906
|
+
throw getTableUnknownColumnError(columnId);
|
|
1907
|
+
}
|
|
1908
|
+
return rowDef.extractCellTemplate(column);
|
|
1909
|
+
});
|
|
1910
|
+
}
|
|
1911
|
+
/** Adds native table sections (e.g. tbody) and moves the row outlets into them. */
|
|
1912
|
+
_applyNativeTableSections() {
|
|
1913
|
+
const documentFragment = this._document.createDocumentFragment();
|
|
1914
|
+
const sections = [
|
|
1915
|
+
{ tag: 'thead', outlets: [this._headerRowOutlet] },
|
|
1916
|
+
{ tag: 'tbody', outlets: [this._rowOutlet, this._noDataRowOutlet] },
|
|
1917
|
+
{ tag: 'tfoot', outlets: [this._footerRowOutlet] },
|
|
1918
|
+
];
|
|
1919
|
+
for (const section of sections) {
|
|
1920
|
+
const element = this._document.createElement(section.tag);
|
|
1921
|
+
element.setAttribute('role', 'rowgroup');
|
|
1922
|
+
for (const outlet of section.outlets) {
|
|
1923
|
+
element.appendChild(outlet.elementRef.nativeElement);
|
|
1924
|
+
}
|
|
1925
|
+
documentFragment.appendChild(element);
|
|
1926
|
+
}
|
|
1927
|
+
// Use a DocumentFragment so we don't hit the DOM on each iteration.
|
|
1928
|
+
this._elementRef.nativeElement.appendChild(documentFragment);
|
|
1929
|
+
}
|
|
1930
|
+
/**
|
|
1931
|
+
* Forces a re-render of the data rows. Should be called in cases where there has been an input
|
|
1932
|
+
* change that affects the evaluation of which rows should be rendered, e.g. toggling
|
|
1933
|
+
* `multiTemplateDataRows` or adding/removing row definitions.
|
|
1934
|
+
*/
|
|
1935
|
+
_forceRenderDataRows() {
|
|
1936
|
+
this._dataDiffer.diff([]);
|
|
1937
|
+
this._rowOutlet.viewContainer.clear();
|
|
1938
|
+
this.renderRows();
|
|
1939
|
+
}
|
|
1940
|
+
/**
|
|
1941
|
+
* Checks if there has been a change in sticky states since last check and applies the correct
|
|
1942
|
+
* sticky styles. Since checking resets the "dirty" state, this should only be performed once
|
|
1943
|
+
* during a change detection and after the inputs are settled (after content check).
|
|
1944
|
+
*/
|
|
1945
|
+
_checkStickyStates() {
|
|
1946
|
+
const stickyCheckReducer = (acc, d) => {
|
|
1947
|
+
return acc || d.hasStickyChanged();
|
|
1948
|
+
};
|
|
1949
|
+
// Note that the check needs to occur for every definition since it notifies the definition
|
|
1950
|
+
// that it can reset its dirty state. Using another operator like `some` may short-circuit
|
|
1951
|
+
// remaining definitions and leave them in an unchecked state.
|
|
1952
|
+
if (this._headerRowDefs.reduce(stickyCheckReducer, false)) {
|
|
1953
|
+
this.updateStickyHeaderRowStyles();
|
|
1954
|
+
}
|
|
1955
|
+
if (this._footerRowDefs.reduce(stickyCheckReducer, false)) {
|
|
1956
|
+
this.updateStickyFooterRowStyles();
|
|
1957
|
+
}
|
|
1958
|
+
if (Array.from(this._columnDefsByName.values()).reduce(stickyCheckReducer, false)) {
|
|
1959
|
+
this._stickyColumnStylesNeedReset = true;
|
|
1960
|
+
this.updateStickyColumnStyles();
|
|
1961
|
+
}
|
|
1962
|
+
}
|
|
1963
|
+
/**
|
|
1964
|
+
* Creates the sticky styler that will be used for sticky rows and columns. Listens
|
|
1965
|
+
* for directionality changes and provides the latest direction to the styler. Re-applies column
|
|
1966
|
+
* stickiness when directionality changes.
|
|
1967
|
+
*/
|
|
1968
|
+
_setupStickyStyler() {
|
|
1969
|
+
const direction = this._dir ? this._dir.value : 'ltr';
|
|
1970
|
+
this._stickyStyler = new StickyStyler(this._isNativeHtmlTable, this.stickyCssClass, direction, this._coalescedStyleScheduler, this._platform.isBrowser, this.needsPositionStickyOnElement, this._stickyPositioningListener);
|
|
1971
|
+
(this._dir ? this._dir.change : of())
|
|
1972
|
+
.pipe(takeUntil(this._onDestroy))
|
|
1973
|
+
.subscribe(value => {
|
|
1974
|
+
this._stickyStyler.direction = value;
|
|
1975
|
+
this.updateStickyColumnStyles();
|
|
1976
|
+
});
|
|
1977
|
+
}
|
|
1978
|
+
/** Filters definitions that belong to this table from a QueryList. */
|
|
1979
|
+
_getOwnDefs(items) {
|
|
1980
|
+
return items.filter(item => !item._table || item._table === this);
|
|
1981
|
+
}
|
|
1982
|
+
/** Creates or removes the no data row, depending on whether any data is being shown. */
|
|
1983
|
+
_updateNoDataRow() {
|
|
1984
|
+
const noDataRow = this._customNoDataRow || this._noDataRow;
|
|
1985
|
+
if (!noDataRow) {
|
|
1986
|
+
return;
|
|
1987
|
+
}
|
|
1988
|
+
const shouldShow = this._rowOutlet.viewContainer.length === 0;
|
|
1989
|
+
if (shouldShow === this._isShowingNoDataRow) {
|
|
1990
|
+
return;
|
|
1991
|
+
}
|
|
1992
|
+
const container = this._noDataRowOutlet.viewContainer;
|
|
1993
|
+
if (shouldShow) {
|
|
1994
|
+
const view = container.createEmbeddedView(noDataRow.templateRef);
|
|
1995
|
+
const rootNode = view.rootNodes[0];
|
|
1996
|
+
// Only add the attributes if we have a single root node since it's hard
|
|
1997
|
+
// to figure out which one to add it to when there are multiple.
|
|
1998
|
+
if (view.rootNodes.length === 1 && (rootNode === null || rootNode === void 0 ? void 0 : rootNode.nodeType) === this._document.ELEMENT_NODE) {
|
|
1999
|
+
rootNode.setAttribute('role', 'row');
|
|
2000
|
+
rootNode.classList.add(noDataRow._contentClassName);
|
|
2001
|
+
}
|
|
2002
|
+
}
|
|
2003
|
+
else {
|
|
2004
|
+
container.clear();
|
|
2005
|
+
}
|
|
2006
|
+
this._isShowingNoDataRow = shouldShow;
|
|
2007
|
+
}
|
|
2008
|
+
}
|
|
2009
|
+
CdkTable.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: CdkTable, deps: [{ token: i0.IterableDiffers }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: 'role', attribute: true }, { token: i1.Directionality, optional: true }, { token: DOCUMENT }, { token: i2.Platform }, { token: _VIEW_REPEATER_STRATEGY }, { token: _COALESCED_STYLE_SCHEDULER }, { token: i3.ViewportRuler }, { token: STICKY_POSITIONING_LISTENER, optional: true, skipSelf: true }, { token: i0.NgZone, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
2010
|
+
CdkTable.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: CdkTable, selector: "cdk-table, table[cdk-table]", inputs: { trackBy: "trackBy", dataSource: "dataSource", multiTemplateDataRows: "multiTemplateDataRows", fixedLayout: "fixedLayout" }, outputs: { contentChanged: "contentChanged" }, host: { properties: { "class.cdk-table-fixed-layout": "fixedLayout" }, classAttribute: "cdk-table" }, providers: [
|
|
2011
|
+
{ provide: CDK_TABLE, useExisting: CdkTable },
|
|
2012
|
+
{ provide: _VIEW_REPEATER_STRATEGY, useClass: _DisposeViewRepeaterStrategy },
|
|
2013
|
+
{ provide: _COALESCED_STYLE_SCHEDULER, useClass: _CoalescedStyleScheduler },
|
|
2014
|
+
// Prevent nested tables from seeing this table's StickyPositioningListener.
|
|
2015
|
+
{ provide: STICKY_POSITIONING_LISTENER, useValue: null },
|
|
2016
|
+
], queries: [{ propertyName: "_noDataRow", first: true, predicate: CdkNoDataRow, descendants: true }, { propertyName: "_contentColumnDefs", predicate: CdkColumnDef, descendants: true }, { propertyName: "_contentRowDefs", predicate: CdkRowDef, descendants: true }, { propertyName: "_contentHeaderRowDefs", predicate: CdkHeaderRowDef, descendants: true }, { propertyName: "_contentFooterRowDefs", predicate: CdkFooterRowDef, descendants: true }], viewQueries: [{ propertyName: "_rowOutlet", first: true, predicate: DataRowOutlet, descendants: true, static: true }, { propertyName: "_headerRowOutlet", first: true, predicate: HeaderRowOutlet, descendants: true, static: true }, { propertyName: "_footerRowOutlet", first: true, predicate: FooterRowOutlet, descendants: true, static: true }, { propertyName: "_noDataRowOutlet", first: true, predicate: NoDataRowOutlet, descendants: true, static: true }], exportAs: ["cdkTable"], ngImport: i0, template: "\n <ng-content select=\"caption\"></ng-content>\n <ng-content select=\"colgroup, col\"></ng-content>\n <ng-container headerRowOutlet></ng-container>\n <ng-container rowOutlet></ng-container>\n <ng-container noDataRowOutlet></ng-container>\n <ng-container footerRowOutlet></ng-container>\n", isInline: true, styles: [".cdk-table-fixed-layout{table-layout:fixed}"], dependencies: [{ kind: "directive", type: DataRowOutlet, selector: "[rowOutlet]" }, { kind: "directive", type: HeaderRowOutlet, selector: "[headerRowOutlet]" }, { kind: "directive", type: FooterRowOutlet, selector: "[footerRowOutlet]" }, { kind: "directive", type: NoDataRowOutlet, selector: "[noDataRowOutlet]" }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None });
|
|
2017
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: CdkTable, decorators: [{
|
|
2018
|
+
type: Component,
|
|
2019
|
+
args: [{ selector: 'cdk-table, table[cdk-table]', exportAs: 'cdkTable', template: CDK_TABLE_TEMPLATE, host: {
|
|
2020
|
+
'class': 'cdk-table',
|
|
2021
|
+
'[class.cdk-table-fixed-layout]': 'fixedLayout',
|
|
2022
|
+
}, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Default, providers: [
|
|
2023
|
+
{ provide: CDK_TABLE, useExisting: CdkTable },
|
|
2024
|
+
{ provide: _VIEW_REPEATER_STRATEGY, useClass: _DisposeViewRepeaterStrategy },
|
|
2025
|
+
{ provide: _COALESCED_STYLE_SCHEDULER, useClass: _CoalescedStyleScheduler },
|
|
2026
|
+
// Prevent nested tables from seeing this table's StickyPositioningListener.
|
|
2027
|
+
{ provide: STICKY_POSITIONING_LISTENER, useValue: null },
|
|
2028
|
+
], styles: [".cdk-table-fixed-layout{table-layout:fixed}"] }]
|
|
2029
|
+
}], ctorParameters: function () {
|
|
2030
|
+
return [{ type: i0.IterableDiffers }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: undefined, decorators: [{
|
|
2031
|
+
type: Attribute,
|
|
2032
|
+
args: ['role']
|
|
2033
|
+
}] }, { type: i1.Directionality, decorators: [{
|
|
2034
|
+
type: Optional
|
|
2035
|
+
}] }, { type: undefined, decorators: [{
|
|
2036
|
+
type: Inject,
|
|
2037
|
+
args: [DOCUMENT]
|
|
2038
|
+
}] }, { type: i2.Platform }, { type: undefined, decorators: [{
|
|
2039
|
+
type: Inject,
|
|
2040
|
+
args: [_VIEW_REPEATER_STRATEGY]
|
|
2041
|
+
}] }, { type: _CoalescedStyleScheduler, decorators: [{
|
|
2042
|
+
type: Inject,
|
|
2043
|
+
args: [_COALESCED_STYLE_SCHEDULER]
|
|
2044
|
+
}] }, { type: i3.ViewportRuler }, { type: undefined, decorators: [{
|
|
2045
|
+
type: Optional
|
|
2046
|
+
}, {
|
|
2047
|
+
type: SkipSelf
|
|
2048
|
+
}, {
|
|
2049
|
+
type: Inject,
|
|
2050
|
+
args: [STICKY_POSITIONING_LISTENER]
|
|
2051
|
+
}] }, { type: i0.NgZone, decorators: [{
|
|
2052
|
+
type: Optional
|
|
2053
|
+
}] }];
|
|
2054
|
+
}, propDecorators: { trackBy: [{
|
|
2055
|
+
type: Input
|
|
2056
|
+
}], dataSource: [{
|
|
2057
|
+
type: Input
|
|
2058
|
+
}], multiTemplateDataRows: [{
|
|
2059
|
+
type: Input
|
|
2060
|
+
}], fixedLayout: [{
|
|
2061
|
+
type: Input
|
|
2062
|
+
}], contentChanged: [{
|
|
2063
|
+
type: Output
|
|
2064
|
+
}], _rowOutlet: [{
|
|
2065
|
+
type: ViewChild,
|
|
2066
|
+
args: [DataRowOutlet, { static: true }]
|
|
2067
|
+
}], _headerRowOutlet: [{
|
|
2068
|
+
type: ViewChild,
|
|
2069
|
+
args: [HeaderRowOutlet, { static: true }]
|
|
2070
|
+
}], _footerRowOutlet: [{
|
|
2071
|
+
type: ViewChild,
|
|
2072
|
+
args: [FooterRowOutlet, { static: true }]
|
|
2073
|
+
}], _noDataRowOutlet: [{
|
|
2074
|
+
type: ViewChild,
|
|
2075
|
+
args: [NoDataRowOutlet, { static: true }]
|
|
2076
|
+
}], _contentColumnDefs: [{
|
|
2077
|
+
type: ContentChildren,
|
|
2078
|
+
args: [CdkColumnDef, { descendants: true }]
|
|
2079
|
+
}], _contentRowDefs: [{
|
|
2080
|
+
type: ContentChildren,
|
|
2081
|
+
args: [CdkRowDef, { descendants: true }]
|
|
2082
|
+
}], _contentHeaderRowDefs: [{
|
|
2083
|
+
type: ContentChildren,
|
|
2084
|
+
args: [CdkHeaderRowDef, {
|
|
2085
|
+
descendants: true,
|
|
2086
|
+
}]
|
|
2087
|
+
}], _contentFooterRowDefs: [{
|
|
2088
|
+
type: ContentChildren,
|
|
2089
|
+
args: [CdkFooterRowDef, {
|
|
2090
|
+
descendants: true,
|
|
2091
|
+
}]
|
|
2092
|
+
}], _noDataRow: [{
|
|
2093
|
+
type: ContentChild,
|
|
2094
|
+
args: [CdkNoDataRow]
|
|
2095
|
+
}] } });
|
|
2096
|
+
/** Utility function that gets a merged list of the entries in an array and values of a Set. */
|
|
2097
|
+
function mergeArrayAndSet(array, set) {
|
|
2098
|
+
return array.concat(Array.from(set));
|
|
2099
|
+
}
|
|
2100
|
+
|
|
2101
|
+
/**
|
|
2102
|
+
* @license
|
|
2103
|
+
* Copyright Google LLC All Rights Reserved.
|
|
2104
|
+
*
|
|
2105
|
+
* Use of this source code is governed by an MIT-style license that can be
|
|
2106
|
+
* found in the LICENSE file at https://angular.io/license
|
|
2107
|
+
*/
|
|
2108
|
+
/**
|
|
2109
|
+
* Column that simply shows text content for the header and row cells. Assumes that the table
|
|
2110
|
+
* is using the native table implementation (`<table>`).
|
|
2111
|
+
*
|
|
2112
|
+
* By default, the name of this column will be the header text and data property accessor.
|
|
2113
|
+
* The header text can be overridden with the `headerText` input. Cell values can be overridden with
|
|
2114
|
+
* the `dataAccessor` input. Change the text justification to the start or end using the `justify`
|
|
2115
|
+
* input.
|
|
2116
|
+
*/
|
|
2117
|
+
class CdkTextColumn {
|
|
2118
|
+
constructor(
|
|
2119
|
+
// `CdkTextColumn` is always requiring a table, but we just assert it manually
|
|
2120
|
+
// for better error reporting.
|
|
2121
|
+
// tslint:disable-next-line: lightweight-tokens
|
|
2122
|
+
_table, _options) {
|
|
2123
|
+
this._table = _table;
|
|
2124
|
+
this._options = _options;
|
|
2125
|
+
/** Alignment of the cell values. */
|
|
2126
|
+
this.justify = 'start';
|
|
2127
|
+
this._options = _options || {};
|
|
2128
|
+
}
|
|
2129
|
+
/** Column name that should be used to reference this column. */
|
|
2130
|
+
get name() {
|
|
2131
|
+
return this._name;
|
|
2132
|
+
}
|
|
2133
|
+
set name(name) {
|
|
2134
|
+
this._name = name;
|
|
2135
|
+
// With Ivy, inputs can be initialized before static query results are
|
|
2136
|
+
// available. In that case, we defer the synchronization until "ngOnInit" fires.
|
|
2137
|
+
this._syncColumnDefName();
|
|
2138
|
+
}
|
|
2139
|
+
ngOnInit() {
|
|
2140
|
+
this._syncColumnDefName();
|
|
2141
|
+
if (this.headerText === undefined) {
|
|
2142
|
+
this.headerText = this._createDefaultHeaderText();
|
|
2143
|
+
}
|
|
2144
|
+
if (!this.dataAccessor) {
|
|
2145
|
+
this.dataAccessor =
|
|
2146
|
+
this._options.defaultDataAccessor || ((data, name) => data[name]);
|
|
2147
|
+
}
|
|
2148
|
+
if (this._table) {
|
|
2149
|
+
// Provide the cell and headerCell directly to the table with the static `ViewChild` query,
|
|
2150
|
+
// since the columnDef will not pick up its content by the time the table finishes checking
|
|
2151
|
+
// its content and initializing the rows.
|
|
2152
|
+
this.columnDef.cell = this.cell;
|
|
2153
|
+
this.columnDef.headerCell = this.headerCell;
|
|
2154
|
+
this._table.addColumnDef(this.columnDef);
|
|
2155
|
+
}
|
|
2156
|
+
else if (typeof ngDevMode === 'undefined' || ngDevMode) {
|
|
2157
|
+
throw getTableTextColumnMissingParentTableError();
|
|
2158
|
+
}
|
|
2159
|
+
}
|
|
2160
|
+
ngOnDestroy() {
|
|
2161
|
+
if (this._table) {
|
|
2162
|
+
this._table.removeColumnDef(this.columnDef);
|
|
2163
|
+
}
|
|
2164
|
+
}
|
|
2165
|
+
/**
|
|
2166
|
+
* Creates a default header text. Use the options' header text transformation function if one
|
|
2167
|
+
* has been provided. Otherwise simply capitalize the column name.
|
|
2168
|
+
*/
|
|
2169
|
+
_createDefaultHeaderText() {
|
|
2170
|
+
const name = this.name;
|
|
2171
|
+
if (!name && (typeof ngDevMode === 'undefined' || ngDevMode)) {
|
|
2172
|
+
throw getTableTextColumnMissingNameError();
|
|
2173
|
+
}
|
|
2174
|
+
if (this._options && this._options.defaultHeaderTextTransform) {
|
|
2175
|
+
return this._options.defaultHeaderTextTransform(name);
|
|
2176
|
+
}
|
|
2177
|
+
return name[0].toUpperCase() + name.slice(1);
|
|
2178
|
+
}
|
|
2179
|
+
/** Synchronizes the column definition name with the text column name. */
|
|
2180
|
+
_syncColumnDefName() {
|
|
2181
|
+
if (this.columnDef) {
|
|
2182
|
+
this.columnDef.name = this.name;
|
|
2183
|
+
}
|
|
2184
|
+
}
|
|
2185
|
+
}
|
|
2186
|
+
CdkTextColumn.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: CdkTextColumn, deps: [{ token: CdkTable, optional: true }, { token: TEXT_COLUMN_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
2187
|
+
CdkTextColumn.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: CdkTextColumn, selector: "cdk-text-column", inputs: { name: "name", headerText: "headerText", dataAccessor: "dataAccessor", justify: "justify" }, viewQueries: [{ propertyName: "columnDef", first: true, predicate: CdkColumnDef, descendants: true, static: true }, { propertyName: "cell", first: true, predicate: CdkCellDef, descendants: true, static: true }, { propertyName: "headerCell", first: true, predicate: CdkHeaderCellDef, descendants: true, static: true }], ngImport: i0, template: `
|
|
2188
|
+
<ng-container cdkColumnDef>
|
|
2189
|
+
<th cdk-header-cell *cdkHeaderCellDef [style.text-align]="justify">
|
|
2190
|
+
{{headerText}}
|
|
2191
|
+
</th>
|
|
2192
|
+
<td cdk-cell *cdkCellDef="let data" [style.text-align]="justify">
|
|
2193
|
+
{{dataAccessor(data, name)}}
|
|
2194
|
+
</td>
|
|
2195
|
+
</ng-container>
|
|
2196
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: CdkCellDef, selector: "[cdkCellDef]" }, { kind: "directive", type: CdkHeaderCellDef, selector: "[cdkHeaderCellDef]" }, { kind: "directive", type: CdkColumnDef, selector: "[cdkColumnDef]", inputs: ["sticky", "cdkColumnDef", "stickyEnd"] }, { kind: "directive", type: CdkCell, selector: "cdk-cell, td[cdk-cell]" }, { kind: "directive", type: CdkHeaderCell, selector: "cdk-header-cell, th[cdk-header-cell]" }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None });
|
|
2197
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: CdkTextColumn, decorators: [{
|
|
2198
|
+
type: Component,
|
|
2199
|
+
args: [{
|
|
2200
|
+
selector: 'cdk-text-column',
|
|
2201
|
+
template: `
|
|
2202
|
+
<ng-container cdkColumnDef>
|
|
2203
|
+
<th cdk-header-cell *cdkHeaderCellDef [style.text-align]="justify">
|
|
2204
|
+
{{headerText}}
|
|
2205
|
+
</th>
|
|
2206
|
+
<td cdk-cell *cdkCellDef="let data" [style.text-align]="justify">
|
|
2207
|
+
{{dataAccessor(data, name)}}
|
|
2208
|
+
</td>
|
|
2209
|
+
</ng-container>
|
|
2210
|
+
`,
|
|
2211
|
+
encapsulation: ViewEncapsulation.None,
|
|
2212
|
+
// Change detection is intentionally not set to OnPush. This component's template will be provided
|
|
2213
|
+
// to the table to be inserted into its view. This is problematic when change detection runs since
|
|
2214
|
+
// the bindings in this template will be evaluated _after_ the table's view is evaluated, which
|
|
2215
|
+
// mean's the template in the table's view will not have the updated value (and in fact will cause
|
|
2216
|
+
// an ExpressionChangedAfterItHasBeenCheckedError).
|
|
2217
|
+
// tslint:disable-next-line:validate-decorators
|
|
2218
|
+
changeDetection: ChangeDetectionStrategy.Default,
|
|
2219
|
+
}]
|
|
2220
|
+
}], ctorParameters: function () {
|
|
2221
|
+
return [{ type: CdkTable, decorators: [{
|
|
2222
|
+
type: Optional
|
|
2223
|
+
}] }, { type: undefined, decorators: [{
|
|
2224
|
+
type: Optional
|
|
2225
|
+
}, {
|
|
2226
|
+
type: Inject,
|
|
2227
|
+
args: [TEXT_COLUMN_OPTIONS]
|
|
2228
|
+
}] }];
|
|
2229
|
+
}, propDecorators: { name: [{
|
|
2230
|
+
type: Input
|
|
2231
|
+
}], headerText: [{
|
|
2232
|
+
type: Input
|
|
2233
|
+
}], dataAccessor: [{
|
|
2234
|
+
type: Input
|
|
2235
|
+
}], justify: [{
|
|
2236
|
+
type: Input
|
|
2237
|
+
}], columnDef: [{
|
|
2238
|
+
type: ViewChild,
|
|
2239
|
+
args: [CdkColumnDef, { static: true }]
|
|
2240
|
+
}], cell: [{
|
|
2241
|
+
type: ViewChild,
|
|
2242
|
+
args: [CdkCellDef, { static: true }]
|
|
2243
|
+
}], headerCell: [{
|
|
2244
|
+
type: ViewChild,
|
|
2245
|
+
args: [CdkHeaderCellDef, { static: true }]
|
|
2246
|
+
}] } });
|
|
2247
|
+
|
|
2248
|
+
/**
|
|
2249
|
+
* @license
|
|
2250
|
+
* Copyright Google LLC All Rights Reserved.
|
|
2251
|
+
*
|
|
2252
|
+
* Use of this source code is governed by an MIT-style license that can be
|
|
2253
|
+
* found in the LICENSE file at https://angular.io/license
|
|
2254
|
+
*/
|
|
2255
|
+
const EXPORTED_DECLARATIONS = [
|
|
2256
|
+
CdkTable,
|
|
2257
|
+
CdkRowDef,
|
|
2258
|
+
CdkCellDef,
|
|
2259
|
+
CdkCellOutlet,
|
|
2260
|
+
CdkHeaderCellDef,
|
|
2261
|
+
CdkFooterCellDef,
|
|
2262
|
+
CdkColumnDef,
|
|
2263
|
+
CdkCell,
|
|
2264
|
+
CdkRow,
|
|
2265
|
+
CdkHeaderCell,
|
|
2266
|
+
CdkFooterCell,
|
|
2267
|
+
CdkHeaderRow,
|
|
2268
|
+
CdkHeaderRowDef,
|
|
2269
|
+
CdkFooterRow,
|
|
2270
|
+
CdkFooterRowDef,
|
|
2271
|
+
DataRowOutlet,
|
|
2272
|
+
HeaderRowOutlet,
|
|
2273
|
+
FooterRowOutlet,
|
|
2274
|
+
CdkTextColumn,
|
|
2275
|
+
CdkNoDataRow,
|
|
2276
|
+
CdkRecycleRows,
|
|
2277
|
+
NoDataRowOutlet,
|
|
2278
|
+
];
|
|
2279
|
+
class CdkTableModule {
|
|
2280
|
+
}
|
|
2281
|
+
CdkTableModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: CdkTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
2282
|
+
CdkTableModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.0", ngImport: i0, type: CdkTableModule, declarations: [CdkTable,
|
|
2283
|
+
CdkRowDef,
|
|
2284
|
+
CdkCellDef,
|
|
2285
|
+
CdkCellOutlet,
|
|
2286
|
+
CdkHeaderCellDef,
|
|
2287
|
+
CdkFooterCellDef,
|
|
2288
|
+
CdkColumnDef,
|
|
2289
|
+
CdkCell,
|
|
2290
|
+
CdkRow,
|
|
2291
|
+
CdkHeaderCell,
|
|
2292
|
+
CdkFooterCell,
|
|
2293
|
+
CdkHeaderRow,
|
|
2294
|
+
CdkHeaderRowDef,
|
|
2295
|
+
CdkFooterRow,
|
|
2296
|
+
CdkFooterRowDef,
|
|
2297
|
+
DataRowOutlet,
|
|
2298
|
+
HeaderRowOutlet,
|
|
2299
|
+
FooterRowOutlet,
|
|
2300
|
+
CdkTextColumn,
|
|
2301
|
+
CdkNoDataRow,
|
|
2302
|
+
CdkRecycleRows,
|
|
2303
|
+
NoDataRowOutlet], imports: [ScrollingModule], exports: [CdkTable,
|
|
2304
|
+
CdkRowDef,
|
|
2305
|
+
CdkCellDef,
|
|
2306
|
+
CdkCellOutlet,
|
|
2307
|
+
CdkHeaderCellDef,
|
|
2308
|
+
CdkFooterCellDef,
|
|
2309
|
+
CdkColumnDef,
|
|
2310
|
+
CdkCell,
|
|
2311
|
+
CdkRow,
|
|
2312
|
+
CdkHeaderCell,
|
|
2313
|
+
CdkFooterCell,
|
|
2314
|
+
CdkHeaderRow,
|
|
2315
|
+
CdkHeaderRowDef,
|
|
2316
|
+
CdkFooterRow,
|
|
2317
|
+
CdkFooterRowDef,
|
|
2318
|
+
DataRowOutlet,
|
|
2319
|
+
HeaderRowOutlet,
|
|
2320
|
+
FooterRowOutlet,
|
|
2321
|
+
CdkTextColumn,
|
|
2322
|
+
CdkNoDataRow,
|
|
2323
|
+
CdkRecycleRows,
|
|
2324
|
+
NoDataRowOutlet] });
|
|
2325
|
+
CdkTableModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: CdkTableModule, imports: [ScrollingModule] });
|
|
2326
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: CdkTableModule, decorators: [{
|
|
2327
|
+
type: NgModule,
|
|
2328
|
+
args: [{
|
|
2329
|
+
exports: EXPORTED_DECLARATIONS,
|
|
2330
|
+
declarations: EXPORTED_DECLARATIONS,
|
|
2331
|
+
imports: [ScrollingModule],
|
|
2332
|
+
}]
|
|
2333
|
+
}] });
|
|
2334
|
+
|
|
2335
|
+
/**
|
|
2336
|
+
* @license
|
|
2337
|
+
* Copyright Google LLC All Rights Reserved.
|
|
2338
|
+
*
|
|
2339
|
+
* Use of this source code is governed by an MIT-style license that can be
|
|
2340
|
+
* found in the LICENSE file at https://angular.io/license
|
|
2341
|
+
*/
|
|
2342
|
+
|
|
2343
|
+
/**
|
|
2344
|
+
* @license
|
|
2345
|
+
* Copyright Google LLC All Rights Reserved.
|
|
2346
|
+
*
|
|
2347
|
+
* Use of this source code is governed by an MIT-style license that can be
|
|
2348
|
+
* found in the LICENSE file at https://angular.io/license
|
|
2349
|
+
*/
|
|
2350
|
+
|
|
2351
|
+
/**
|
|
2352
|
+
* Generated bundle index. Do not edit.
|
|
2353
|
+
*/
|
|
2354
|
+
|
|
2355
|
+
export { BaseCdkCell, BaseRowDef, CDK_ROW_TEMPLATE, CDK_TABLE, CDK_TABLE_TEMPLATE, CdkCell, CdkCellDef, CdkCellOutlet, CdkColumnDef, CdkFooterCell, CdkFooterCellDef, CdkFooterRow, CdkFooterRowDef, CdkHeaderCell, CdkHeaderCellDef, CdkHeaderRow, CdkHeaderRowDef, CdkNoDataRow, CdkRecycleRows, CdkRow, CdkRowDef, CdkTable, CdkTableModule, CdkTextColumn, DataRowOutlet, FooterRowOutlet, HeaderRowOutlet, NoDataRowOutlet, STICKY_DIRECTIONS, STICKY_POSITIONING_LISTENER, StickyStyler, TEXT_COLUMN_OPTIONS, _COALESCED_STYLE_SCHEDULER, _CoalescedStyleScheduler, _Schedule, mixinHasStickyInput };
|
|
2356
|
+
//# sourceMappingURL=table.mjs.map
|