@ptsecurity/mosaic 12.0.2 → 12.2.2
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/_theming.scss +475 -101
- package/_visual.scss +131 -13
- package/bundles/ptsecurity-mosaic-autocomplete.umd.js +18 -20
- package/bundles/ptsecurity-mosaic-autocomplete.umd.js.map +1 -1
- package/bundles/ptsecurity-mosaic-button-toggle.umd.js +15 -17
- package/bundles/ptsecurity-mosaic-button-toggle.umd.js.map +1 -1
- package/bundles/ptsecurity-mosaic-button.umd.js +17 -19
- package/bundles/ptsecurity-mosaic-button.umd.js.map +1 -1
- package/bundles/ptsecurity-mosaic-card.umd.js +11 -13
- package/bundles/ptsecurity-mosaic-card.umd.js.map +1 -1
- package/bundles/ptsecurity-mosaic-checkbox.umd.js +14 -16
- package/bundles/ptsecurity-mosaic-checkbox.umd.js.map +1 -1
- package/bundles/ptsecurity-mosaic-core.umd.js +259 -172
- package/bundles/ptsecurity-mosaic-core.umd.js.map +1 -1
- package/bundles/ptsecurity-mosaic-datepicker.umd.js +47 -48
- package/bundles/ptsecurity-mosaic-datepicker.umd.js.map +1 -1
- package/bundles/ptsecurity-mosaic-design-tokens.umd.js +231 -26
- package/bundles/ptsecurity-mosaic-design-tokens.umd.js.map +1 -1
- package/bundles/ptsecurity-mosaic-divider.umd.js +11 -13
- package/bundles/ptsecurity-mosaic-divider.umd.js.map +1 -1
- package/bundles/ptsecurity-mosaic-dropdown.umd.js +67 -59
- package/bundles/ptsecurity-mosaic-dropdown.umd.js.map +1 -1
- package/bundles/ptsecurity-mosaic-form-field.umd.js +737 -738
- package/bundles/ptsecurity-mosaic-form-field.umd.js.map +1 -1
- package/bundles/ptsecurity-mosaic-icon.umd.js +14 -16
- package/bundles/ptsecurity-mosaic-icon.umd.js.map +1 -1
- package/bundles/ptsecurity-mosaic-input.umd.js +45 -33
- package/bundles/ptsecurity-mosaic-input.umd.js.map +1 -1
- package/bundles/ptsecurity-mosaic-link.umd.js +11 -13
- package/bundles/ptsecurity-mosaic-link.umd.js.map +1 -1
- package/bundles/ptsecurity-mosaic-list.umd.js +177 -89
- package/bundles/ptsecurity-mosaic-list.umd.js.map +1 -1
- package/bundles/ptsecurity-mosaic-modal.umd.js +52 -44
- package/bundles/ptsecurity-mosaic-modal.umd.js.map +1 -1
- package/bundles/ptsecurity-mosaic-navbar.umd.js +46 -43
- package/bundles/ptsecurity-mosaic-navbar.umd.js.map +1 -1
- package/bundles/ptsecurity-mosaic-popover.umd.js +215 -34
- package/bundles/ptsecurity-mosaic-popover.umd.js.map +1 -1
- package/bundles/ptsecurity-mosaic-progress-bar.umd.js +12 -14
- package/bundles/ptsecurity-mosaic-progress-bar.umd.js.map +1 -1
- package/bundles/ptsecurity-mosaic-progress-spinner.umd.js +12 -14
- package/bundles/ptsecurity-mosaic-progress-spinner.umd.js.map +1 -1
- package/bundles/ptsecurity-mosaic-radio.umd.js +14 -16
- package/bundles/ptsecurity-mosaic-radio.umd.js.map +1 -1
- package/bundles/ptsecurity-mosaic-select.umd.js +22 -24
- package/bundles/ptsecurity-mosaic-select.umd.js.map +1 -1
- package/bundles/ptsecurity-mosaic-sidebar.umd.js +17 -19
- package/bundles/ptsecurity-mosaic-sidebar.umd.js.map +1 -1
- package/bundles/ptsecurity-mosaic-sidepanel.umd.js +62 -58
- package/bundles/ptsecurity-mosaic-sidepanel.umd.js.map +1 -1
- package/bundles/ptsecurity-mosaic-splitter.umd.js +31 -21
- package/bundles/ptsecurity-mosaic-splitter.umd.js.map +1 -1
- package/bundles/ptsecurity-mosaic-table.umd.js +11 -13
- package/bundles/ptsecurity-mosaic-table.umd.js.map +1 -1
- package/bundles/ptsecurity-mosaic-tabs.umd.js +150 -74
- package/bundles/ptsecurity-mosaic-tabs.umd.js.map +1 -1
- package/bundles/ptsecurity-mosaic-tags.umd.js +28 -29
- package/bundles/ptsecurity-mosaic-tags.umd.js.map +1 -1
- package/bundles/ptsecurity-mosaic-textarea.umd.js +12 -14
- package/bundles/ptsecurity-mosaic-textarea.umd.js.map +1 -1
- package/bundles/ptsecurity-mosaic-timepicker.umd.js +16 -17
- package/bundles/ptsecurity-mosaic-timepicker.umd.js.map +1 -1
- package/bundles/ptsecurity-mosaic-toggle.umd.js +11 -13
- package/bundles/ptsecurity-mosaic-toggle.umd.js.map +1 -1
- package/bundles/ptsecurity-mosaic-tooltip.umd.js +72 -23
- package/bundles/ptsecurity-mosaic-tooltip.umd.js.map +1 -1
- package/bundles/ptsecurity-mosaic-tree-select.umd.js +24 -29
- package/bundles/ptsecurity-mosaic-tree-select.umd.js.map +1 -1
- package/bundles/ptsecurity-mosaic-tree.umd.js +1018 -261
- package/bundles/ptsecurity-mosaic-tree.umd.js.map +1 -1
- package/bundles/ptsecurity-mosaic.umd.js +2 -2
- package/core/option/action.d.ts +42 -0
- package/core/option/index.d.ts +1 -0
- package/core/option/option-module.d.ts +4 -3
- package/core/pop-up/pop-up-trigger.d.ts +9 -12
- package/design-tokens/style-dictionary/build.js +6 -0
- package/design-tokens/style-dictionary/configs/index.js +2 -1
- package/design-tokens/tokens/components/badge.json5 +177 -7
- package/design-tokens/tokens/components/list.json5 +0 -4
- package/design-tokens/tokens/components/tree.json5 +3 -3
- package/design-tokens/tokens/properties/globals.json5 +1 -1
- package/design-tokens/tokens/properties/typography.json5 +16 -0
- package/design-tokens/tokens.d.ts +115 -13
- package/dropdown/dropdown-item.component.d.ts +1 -0
- package/dropdown/dropdown-trigger.directive.d.ts +3 -8
- package/dropdown/dropdown.component.d.ts +1 -0
- package/esm2015/autocomplete/autocomplete-origin.directive.js +4 -4
- package/esm2015/autocomplete/autocomplete-trigger.directive.js +4 -4
- package/esm2015/autocomplete/autocomplete.component.js +4 -4
- package/esm2015/autocomplete/autocomplete.module.js +5 -5
- package/esm2015/button/button.component.js +10 -10
- package/esm2015/button/button.module.js +5 -5
- package/esm2015/button-toggle/button-toggle.component.js +7 -7
- package/esm2015/button-toggle/button-toggle.module.js +5 -5
- package/esm2015/card/card.component.js +4 -4
- package/esm2015/card/card.module.js +5 -5
- package/esm2015/checkbox/checkbox-module.js +5 -5
- package/esm2015/checkbox/checkbox-required-validator.js +4 -4
- package/esm2015/checkbox/checkbox.js +4 -4
- package/esm2015/core/common-behaviors/common-module.js +5 -5
- package/esm2015/core/error/error-options.js +7 -7
- package/esm2015/core/formatters/date/formatter.js +6 -5
- package/esm2015/core/formatters/index.js +5 -5
- package/esm2015/core/formatters/number/formatter.js +5 -5
- package/esm2015/core/forms/forms-module.js +5 -5
- package/esm2015/core/forms/forms.directive.js +7 -7
- package/esm2015/core/highlight/highlight.pipe.js +4 -4
- package/esm2015/core/highlight/index.js +5 -5
- package/esm2015/core/line/line.js +8 -8
- package/esm2015/core/option/action.js +131 -0
- package/esm2015/core/option/index.js +2 -1
- package/esm2015/core/option/optgroup.js +4 -4
- package/esm2015/core/option/option-module.js +8 -7
- package/esm2015/core/option/option.js +4 -4
- package/esm2015/core/pop-up/pop-up-trigger.js +32 -64
- package/esm2015/core/pop-up/pop-up.js +4 -4
- package/esm2015/core/selection/pseudo-checkbox/pseudo-checkbox.js +4 -4
- package/esm2015/core/selection/pseudo-checkbox/pseudo-checkbox.module.js +5 -5
- package/esm2015/core/services/measure-scrollbar.service.js +4 -4
- package/esm2015/datepicker/calendar-body.component.js +4 -4
- package/esm2015/datepicker/calendar.component.js +7 -7
- package/esm2015/datepicker/datepicker-input.directive.js +6 -5
- package/esm2015/datepicker/datepicker-intl.js +4 -4
- package/esm2015/datepicker/datepicker-module.js +5 -5
- package/esm2015/datepicker/datepicker-toggle.component.js +7 -7
- package/esm2015/datepicker/datepicker.component.js +7 -7
- package/esm2015/datepicker/month-view.component.js +4 -4
- package/esm2015/datepicker/multi-year-view.component.js +4 -4
- package/esm2015/datepicker/year-view.component.js +4 -4
- package/esm2015/design-tokens/tokens.js +116 -14
- package/esm2015/divider/divider.component.js +4 -4
- package/esm2015/divider/divider.module.js +5 -5
- package/esm2015/dropdown/dropdown-content.directive.js +4 -4
- package/esm2015/dropdown/dropdown-item.component.js +11 -4
- package/esm2015/dropdown/dropdown-trigger.directive.js +39 -39
- package/esm2015/dropdown/dropdown.component.js +9 -5
- package/esm2015/dropdown/dropdown.module.js +5 -5
- package/esm2015/form-field/cleaner.js +9 -5
- package/esm2015/form-field/form-field.js +7 -7
- package/esm2015/form-field/form-field.module.js +5 -5
- package/esm2015/form-field/hint.js +4 -4
- package/esm2015/form-field/prefix.js +4 -4
- package/esm2015/form-field/stepper.js +4 -4
- package/esm2015/form-field/suffix.js +4 -4
- package/esm2015/icon/icon.component.js +7 -7
- package/esm2015/icon/icon.module.js +5 -5
- package/esm2015/input/input-number-validators.js +28 -14
- package/esm2015/input/input-number.js +4 -4
- package/esm2015/input/input.js +7 -7
- package/esm2015/input/input.module.js +5 -5
- package/esm2015/link/link.component.js +4 -4
- package/esm2015/link/link.module.js +5 -5
- package/esm2015/list/list-selection.component.js +155 -66
- package/esm2015/list/list.component.js +7 -7
- package/esm2015/list/list.module.js +5 -5
- package/esm2015/modal/css-unit.pipe.js +4 -4
- package/esm2015/modal/modal-control.service.js +4 -4
- package/esm2015/modal/modal.component.js +6 -4
- package/esm2015/modal/modal.directive.js +13 -13
- package/esm2015/modal/modal.module.js +9 -7
- package/esm2015/modal/modal.service.js +16 -9
- package/esm2015/navbar/navbar-item.component.js +21 -21
- package/esm2015/navbar/navbar.component.js +7 -7
- package/esm2015/navbar/navbar.module.js +5 -5
- package/esm2015/navbar/vertical-navbar.component.js +14 -9
- package/esm2015/popover/popover-confirm.component.js +116 -0
- package/esm2015/popover/popover.component.js +63 -20
- package/esm2015/popover/popover.module.js +13 -10
- package/esm2015/popover/public-api.js +2 -1
- package/esm2015/progress-bar/progress-bar.component.js +4 -4
- package/esm2015/progress-bar/progress-bar.module.js +5 -5
- package/esm2015/progress-spinner/progress-spinner.component.js +4 -4
- package/esm2015/progress-spinner/progress-spinner.module.js +5 -5
- package/esm2015/radio/radio.component.js +7 -7
- package/esm2015/radio/radio.module.js +5 -5
- package/esm2015/select/select.component.js +14 -14
- package/esm2015/select/select.module.js +5 -5
- package/esm2015/sidebar/sidebar.component.js +10 -10
- package/esm2015/sidebar/sidebar.module.js +5 -5
- package/esm2015/sidepanel/sidepanel-container.component.js +14 -13
- package/esm2015/sidepanel/sidepanel-directives.js +22 -18
- package/esm2015/sidepanel/sidepanel.module.js +12 -8
- package/esm2015/sidepanel/sidepanel.service.js +6 -5
- package/esm2015/splitter/splitter.component.js +24 -13
- package/esm2015/splitter/splitter.module.js +5 -5
- package/esm2015/table/table.component.js +4 -4
- package/esm2015/table/table.module.js +5 -5
- package/esm2015/tabs/paginated-tab-header.js +5 -5
- package/esm2015/tabs/tab-body.component.js +7 -7
- package/esm2015/tabs/tab-content.directive.js +4 -4
- package/esm2015/tabs/tab-group.component.js +56 -26
- package/esm2015/tabs/tab-header.component.js +4 -4
- package/esm2015/tabs/tab-label-wrapper.directive.js +21 -6
- package/esm2015/tabs/tab-label.directive.js +4 -4
- package/esm2015/tabs/tab-nav-bar/tab-nav-bar.js +7 -7
- package/esm2015/tabs/tab.component.js +36 -13
- package/esm2015/tabs/tabs.module.js +5 -5
- package/esm2015/tags/tag-input.js +4 -4
- package/esm2015/tags/tag-list.component.js +4 -4
- package/esm2015/tags/tag.component.js +14 -13
- package/esm2015/tags/tag.module.js +5 -5
- package/esm2015/textarea/textarea.component.js +4 -4
- package/esm2015/textarea/textarea.module.js +5 -5
- package/esm2015/timepicker/timepicker.directive.js +9 -8
- package/esm2015/timepicker/timepicker.module.js +5 -5
- package/esm2015/toggle/toggle.component.js +4 -4
- package/esm2015/toggle/toggle.module.js +5 -5
- package/esm2015/tooltip/tooltip.component.js +55 -16
- package/esm2015/tooltip/tooltip.module.js +5 -5
- package/esm2015/tree/control/base-tree-control.js +60 -0
- package/esm2015/tree/control/flat-tree-control.js +123 -0
- package/esm2015/tree/control/nested-tree-control.js +41 -0
- package/esm2015/tree/control/tree-control.js +2 -0
- package/esm2015/tree/data-source/flat-data-source.js +1 -1
- package/esm2015/tree/node.js +31 -0
- package/esm2015/tree/outlet.js +15 -0
- package/esm2015/tree/padding.directive.js +90 -23
- package/esm2015/tree/public-api.js +9 -2
- package/esm2015/tree/toggle.js +46 -52
- package/esm2015/tree/tree-base.js +243 -0
- package/esm2015/tree/tree-errors.js +36 -0
- package/esm2015/tree/tree-option.component.js +75 -32
- package/esm2015/tree/tree-selection.component.js +122 -73
- package/esm2015/tree/tree.js +23 -0
- package/esm2015/tree/tree.module.js +24 -13
- package/esm2015/tree-select/tree-select.component.js +11 -12
- package/esm2015/tree-select/tree-select.module.js +5 -9
- package/fesm2015/ptsecurity-mosaic-autocomplete.js +13 -13
- package/fesm2015/ptsecurity-mosaic-autocomplete.js.map +1 -1
- package/fesm2015/ptsecurity-mosaic-button-toggle.js +10 -10
- package/fesm2015/ptsecurity-mosaic-button-toggle.js.map +1 -1
- package/fesm2015/ptsecurity-mosaic-button.js +13 -13
- package/fesm2015/ptsecurity-mosaic-button.js.map +1 -1
- package/fesm2015/ptsecurity-mosaic-card.js +7 -7
- package/fesm2015/ptsecurity-mosaic-card.js.map +1 -1
- package/fesm2015/ptsecurity-mosaic-checkbox.js +10 -10
- package/fesm2015/ptsecurity-mosaic-checkbox.js.map +1 -1
- package/fesm2015/ptsecurity-mosaic-core.js +231 -140
- package/fesm2015/ptsecurity-mosaic-core.js.map +1 -1
- package/fesm2015/ptsecurity-mosaic-datepicker.js +42 -41
- package/fesm2015/ptsecurity-mosaic-datepicker.js.map +1 -1
- package/fesm2015/ptsecurity-mosaic-design-tokens.js +116 -14
- package/fesm2015/ptsecurity-mosaic-design-tokens.js.map +1 -1
- package/fesm2015/ptsecurity-mosaic-divider.js +7 -7
- package/fesm2015/ptsecurity-mosaic-divider.js.map +1 -1
- package/fesm2015/ptsecurity-mosaic-dropdown.js +63 -52
- package/fesm2015/ptsecurity-mosaic-dropdown.js.map +1 -1
- package/fesm2015/ptsecurity-mosaic-form-field.js +30 -27
- package/fesm2015/ptsecurity-mosaic-form-field.js.map +1 -1
- package/fesm2015/ptsecurity-mosaic-icon.js +10 -10
- package/fesm2015/ptsecurity-mosaic-icon.js.map +1 -1
- package/fesm2015/ptsecurity-mosaic-input.js +40 -26
- package/fesm2015/ptsecurity-mosaic-input.js.map +1 -1
- package/fesm2015/ptsecurity-mosaic-link.js +7 -7
- package/fesm2015/ptsecurity-mosaic-link.js.map +1 -1
- package/fesm2015/ptsecurity-mosaic-list.js +164 -76
- package/fesm2015/ptsecurity-mosaic-list.js.map +1 -1
- package/fesm2015/ptsecurity-mosaic-modal.js +46 -35
- package/fesm2015/ptsecurity-mosaic-modal.js.map +1 -1
- package/fesm2015/ptsecurity-mosaic-navbar.js +43 -38
- package/fesm2015/ptsecurity-mosaic-navbar.js.map +1 -1
- package/fesm2015/ptsecurity-mosaic-popover.js +179 -30
- package/fesm2015/ptsecurity-mosaic-popover.js.map +1 -1
- package/fesm2015/ptsecurity-mosaic-progress-bar.js +7 -7
- package/fesm2015/ptsecurity-mosaic-progress-bar.js.map +1 -1
- package/fesm2015/ptsecurity-mosaic-progress-spinner.js +7 -7
- package/fesm2015/ptsecurity-mosaic-progress-spinner.js.map +1 -1
- package/fesm2015/ptsecurity-mosaic-radio.js +10 -10
- package/fesm2015/ptsecurity-mosaic-radio.js.map +1 -1
- package/fesm2015/ptsecurity-mosaic-select.js +17 -17
- package/fesm2015/ptsecurity-mosaic-select.js.map +1 -1
- package/fesm2015/ptsecurity-mosaic-sidebar.js +13 -13
- package/fesm2015/ptsecurity-mosaic-sidebar.js.map +1 -1
- package/fesm2015/ptsecurity-mosaic-sidepanel.js +50 -41
- package/fesm2015/ptsecurity-mosaic-sidepanel.js.map +1 -1
- package/fesm2015/ptsecurity-mosaic-splitter.js +27 -16
- package/fesm2015/ptsecurity-mosaic-splitter.js.map +1 -1
- package/fesm2015/ptsecurity-mosaic-table.js +7 -7
- package/fesm2015/ptsecurity-mosaic-table.js.map +1 -1
- package/fesm2015/ptsecurity-mosaic-tabs.js +240 -174
- package/fesm2015/ptsecurity-mosaic-tabs.js.map +1 -1
- package/fesm2015/ptsecurity-mosaic-tags.js +23 -22
- package/fesm2015/ptsecurity-mosaic-tags.js.map +1 -1
- package/fesm2015/ptsecurity-mosaic-textarea.js +7 -7
- package/fesm2015/ptsecurity-mosaic-textarea.js.map +1 -1
- package/fesm2015/ptsecurity-mosaic-timepicker.js +12 -11
- package/fesm2015/ptsecurity-mosaic-timepicker.js.map +1 -1
- package/fesm2015/ptsecurity-mosaic-toggle.js +7 -7
- package/fesm2015/ptsecurity-mosaic-toggle.js.map +1 -1
- package/fesm2015/ptsecurity-mosaic-tooltip.js +57 -18
- package/fesm2015/ptsecurity-mosaic-tooltip.js.map +1 -1
- package/fesm2015/ptsecurity-mosaic-tree-select.js +14 -18
- package/fesm2015/ptsecurity-mosaic-tree-select.js.map +1 -1
- package/fesm2015/ptsecurity-mosaic-tree.js +874 -190
- package/fesm2015/ptsecurity-mosaic-tree.js.map +1 -1
- package/form-field/cleaner.d.ts +2 -0
- package/input/input-number-validators.d.ts +2 -2
- package/list/list-selection.component.d.ts +28 -6
- package/modal/modal.component.d.ts +2 -0
- package/modal/modal.module.d.ts +1 -1
- package/package.json +5 -5
- package/popover/popover-confirm.component.d.ts +33 -0
- package/popover/popover.component.d.ts +14 -4
- package/popover/popover.module.d.ts +6 -3
- package/popover/public-api.d.ts +1 -0
- package/prebuilt-themes/dark-theme.css +1 -1
- package/prebuilt-themes/default-theme.css +1 -1
- package/prebuilt-visual/default-visual.css +1 -1
- package/select/select.component.d.ts +2 -7
- package/sidepanel/sidepanel-directives.d.ts +2 -0
- package/sidepanel/sidepanel.module.d.ts +2 -1
- package/splitter/splitter.component.d.ts +6 -3
- package/tabs/tab-group.component.d.ts +11 -4
- package/tabs/tab-label-wrapper.directive.d.ts +7 -1
- package/tabs/tab.component.d.ts +10 -4
- package/tooltip/tooltip.component.d.ts +12 -3
- package/tree/control/base-tree-control.d.ts +40 -0
- package/tree/control/flat-tree-control.d.ts +48 -0
- package/tree/control/nested-tree-control.d.ts +19 -0
- package/tree/control/tree-control.d.ts +44 -0
- package/tree/data-source/flat-data-source.d.ts +2 -1
- package/tree/node.d.ts +34 -0
- package/tree/outlet.d.ts +9 -0
- package/tree/padding.directive.d.ts +35 -7
- package/tree/public-api.d.ts +8 -1
- package/tree/toggle.d.ts +17 -17
- package/tree/tree-base.d.ts +97 -0
- package/tree/tree-errors.d.ts +25 -0
- package/tree/tree-option.component.d.ts +13 -5
- package/tree/tree-selection.component.d.ts +32 -13
- package/tree/tree.d.ts +6 -0
- package/tree/tree.module.d.ts +10 -8
- package/tree-select/tree-select.component.d.ts +2 -7
- package/tree-select/tree-select.module.d.ts +5 -6
- package/esm2015/tree/node.directive.js +0 -19
- package/tree/node.directive.d.ts +0 -7
@@ -1,48 +1,377 @@
|
|
1
|
-
import * as i2 from '@angular/common';
|
1
|
+
import * as i2$1 from '@angular/common';
|
2
2
|
import { CommonModule } from '@angular/common';
|
3
3
|
import * as i0 from '@angular/core';
|
4
|
-
import { Directive, Input,
|
5
|
-
import * as i1 from '@ptsecurity/
|
6
|
-
import {
|
7
|
-
import * as
|
8
|
-
import {
|
9
|
-
import {
|
10
|
-
import {
|
11
|
-
import {
|
12
|
-
import {
|
4
|
+
import { Directive, Input, ViewChild, ContentChildren, forwardRef, Inject, Optional, Component, ViewEncapsulation, ChangeDetectionStrategy, InjectionToken, EventEmitter, ContentChild, Output, QueryList, Attribute, NgModule } from '@angular/core';
|
5
|
+
import * as i1 from '@ptsecurity/mosaic/core';
|
6
|
+
import { mixinDisabled, MC_OPTION_ACTION_PARENT, McOptionActionComponent, MultipleMode, getMcSelectNonArrayValueError, McPseudoCheckboxModule } from '@ptsecurity/mosaic/core';
|
7
|
+
import * as i2 from '@angular/cdk/bidi';
|
8
|
+
import { coerceNumberProperty, coerceBooleanProperty } from '@angular/cdk/coercion';
|
9
|
+
import { TreeSizePaddingLeft } from '@ptsecurity/mosaic/design-tokens';
|
10
|
+
import { BehaviorSubject, Subject, Observable, of, merge } from 'rxjs';
|
11
|
+
import { takeUntil, map, take, delay } from 'rxjs/operators';
|
12
|
+
import { TAB, hasModifierKey, SPACE, LEFT_ARROW, RIGHT_ARROW, isVerticalMovement, isSelectAll, isCopy, DOWN_ARROW, UP_ARROW, ENTER, HOME, END, PAGE_UP, PAGE_DOWN } from '@ptsecurity/cdk/keycodes';
|
13
|
+
import { McDropdownTrigger } from '@ptsecurity/mosaic/dropdown';
|
14
|
+
import { McTooltipTrigger } from '@ptsecurity/mosaic/tooltip';
|
15
|
+
import * as i1$1 from '@angular/cdk/clipboard';
|
13
16
|
import { SelectionModel, DataSource } from '@angular/cdk/collections';
|
14
17
|
import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
15
18
|
import { FocusKeyManager } from '@ptsecurity/cdk/a11y';
|
16
19
|
|
17
|
-
|
20
|
+
/** Context provided to the tree node component. */
|
21
|
+
class McTreeNodeOutletContext {
|
22
|
+
constructor(data) {
|
23
|
+
this.$implicit = data;
|
24
|
+
}
|
25
|
+
}
|
26
|
+
/**
|
27
|
+
* Data node definition for the McTree.
|
28
|
+
* Captures the node's template and a when predicate that describes when this node should be used.
|
29
|
+
*/
|
30
|
+
class McTreeNodeDef {
|
31
|
+
/** @docs-private */
|
32
|
+
constructor(template) {
|
33
|
+
this.template = template;
|
34
|
+
}
|
18
35
|
}
|
19
|
-
/** @nocollapse */ McTreeNodeDef.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
20
|
-
/** @nocollapse */ McTreeNodeDef.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.
|
21
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
36
|
+
/** @nocollapse */ McTreeNodeDef.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McTreeNodeDef, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
|
37
|
+
/** @nocollapse */ McTreeNodeDef.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.13", type: McTreeNodeDef, selector: "[mcTreeNodeDef]", inputs: { when: ["mcTreeNodeDefWhen", "when"], data: ["mcTreeNode", "data"] }, ngImport: i0 });
|
38
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McTreeNodeDef, decorators: [{
|
22
39
|
type: Directive,
|
23
40
|
args: [{
|
24
41
|
selector: '[mcTreeNodeDef]',
|
25
|
-
inputs: ['when: mcTreeNodeDefWhen']
|
26
|
-
providers: [{ provide: CdkTreeNodeDef, useExisting: McTreeNodeDef }]
|
42
|
+
inputs: ['when: mcTreeNodeDefWhen']
|
27
43
|
}]
|
28
|
-
}], propDecorators: { data: [{
|
44
|
+
}], ctorParameters: function () { return [{ type: i0.TemplateRef }]; }, propDecorators: { data: [{
|
29
45
|
type: Input,
|
30
46
|
args: ['mcTreeNode']
|
31
47
|
}] } });
|
32
48
|
|
33
|
-
class
|
34
|
-
constructor() {
|
35
|
-
|
36
|
-
this.
|
37
|
-
|
49
|
+
class McTreeNodeOutlet {
|
50
|
+
constructor(viewContainer, changeDetectorRef) {
|
51
|
+
this.viewContainer = viewContainer;
|
52
|
+
this.changeDetectorRef = changeDetectorRef;
|
53
|
+
}
|
54
|
+
}
|
55
|
+
/** @nocollapse */ McTreeNodeOutlet.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McTreeNodeOutlet, deps: [{ token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
|
56
|
+
/** @nocollapse */ McTreeNodeOutlet.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.13", type: McTreeNodeOutlet, selector: "[mcTreeNodeOutlet]", ngImport: i0 });
|
57
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McTreeNodeOutlet, decorators: [{
|
58
|
+
type: Directive,
|
59
|
+
args: [{ selector: '[mcTreeNodeOutlet]' }]
|
60
|
+
}], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.ChangeDetectorRef }]; } });
|
61
|
+
|
62
|
+
/**
|
63
|
+
* Returns an error to be thrown when there is no usable data.
|
64
|
+
* @docs-private
|
65
|
+
*/
|
66
|
+
function getTreeNoValidDataSourceError() {
|
67
|
+
return Error(`A valid data source must be provided.`);
|
68
|
+
}
|
69
|
+
/**
|
70
|
+
* Returns an error to be thrown when there are multiple nodes that are missing a when function.
|
71
|
+
* @docs-private
|
72
|
+
*/
|
73
|
+
function getTreeMultipleDefaultNodeDefsError() {
|
74
|
+
return Error(`There can only be one default row without a when predicate function.`);
|
75
|
+
}
|
76
|
+
/**
|
77
|
+
* Returns an error to be thrown when there are no matching node defs for a particular set of data.
|
78
|
+
* @docs-private
|
79
|
+
*/
|
80
|
+
function getTreeMissingMatchingNodeDefError() {
|
81
|
+
return Error(`Could not find a matching node definition for the provided node data.`);
|
82
|
+
}
|
83
|
+
/**
|
84
|
+
* Returns an error to be thrown when there are tree control.
|
85
|
+
* @docs-private
|
86
|
+
*/
|
87
|
+
function getTreeControlMissingError() {
|
88
|
+
return Error(`Could not find a tree control for the tree.`);
|
89
|
+
}
|
90
|
+
/**
|
91
|
+
* Returns an error to be thrown when tree control did not implement functions for flat/nested node.
|
92
|
+
* @docs-private
|
93
|
+
*/
|
94
|
+
function getTreeControlFunctionsMissingError() {
|
95
|
+
return Error(`Could not find functions for nested/flat tree in tree control.`);
|
96
|
+
}
|
97
|
+
|
98
|
+
class McTreeBase {
|
99
|
+
constructor(differs, changeDetectorRef) {
|
100
|
+
this.differs = differs;
|
101
|
+
this.changeDetectorRef = changeDetectorRef;
|
102
|
+
// TODO(tinayuangao): Setup a listener for scrolling, emit the calculated view to viewChange.
|
103
|
+
// Remove the MAX_VALUE in viewChange
|
104
|
+
/**
|
105
|
+
* Stream containing the latest information on what rows are being displayed on screen.
|
106
|
+
* Can be used by the data source to as a heuristic of what data should be provided.
|
107
|
+
*/
|
108
|
+
this.viewChange = new BehaviorSubject({ start: 0, end: Number.MAX_VALUE });
|
109
|
+
/** Subject that emits when the component has been destroyed. */
|
110
|
+
this.onDestroy = new Subject();
|
111
|
+
/** Level of nodes */
|
112
|
+
this.levels = new Map();
|
113
|
+
}
|
114
|
+
/**
|
115
|
+
* Provides a stream containing the latest data array to render. Influenced by the tree's
|
116
|
+
* stream of view window (what dataNodes are currently on screen).
|
117
|
+
* Data source can be an observable of data array, or a dara array to render.
|
118
|
+
*/
|
119
|
+
get dataSource() {
|
120
|
+
return this._dataSource;
|
121
|
+
}
|
122
|
+
set dataSource(dataSource) {
|
123
|
+
if (this._dataSource !== dataSource) {
|
124
|
+
this.switchDataSource(dataSource);
|
125
|
+
}
|
126
|
+
}
|
127
|
+
ngOnInit() {
|
128
|
+
this.dataDiffer = this.differs.find([]).create(this.trackBy);
|
129
|
+
if (!this.treeControl) {
|
130
|
+
throw getTreeControlMissingError();
|
131
|
+
}
|
132
|
+
}
|
133
|
+
ngOnDestroy() {
|
134
|
+
this.nodeOutlet.viewContainer.clear();
|
135
|
+
this.onDestroy.next();
|
136
|
+
this.onDestroy.complete();
|
137
|
+
// tslint:disable-next-line:no-unbound-method
|
138
|
+
if (this._dataSource && typeof this.dataSource.disconnect === 'function') {
|
139
|
+
this.dataSource.disconnect(this);
|
140
|
+
}
|
141
|
+
if (this.dataSubscription) {
|
142
|
+
this.dataSubscription.unsubscribe();
|
143
|
+
this.dataSubscription = null;
|
144
|
+
}
|
145
|
+
}
|
146
|
+
ngAfterContentChecked() {
|
147
|
+
const defaultNodeDefs = this.nodeDefs.filter((def) => !def.when);
|
148
|
+
if (defaultNodeDefs.length > 1) {
|
149
|
+
throw getTreeMultipleDefaultNodeDefsError();
|
150
|
+
}
|
151
|
+
this.defaultNodeDef = defaultNodeDefs[0];
|
152
|
+
if (this.dataSource && this.nodeDefs && !this.dataSubscription) {
|
153
|
+
this.observeRenderChanges();
|
154
|
+
}
|
155
|
+
}
|
156
|
+
/** Check for changes made in the data and render each change (node added/removed/moved). */
|
157
|
+
renderNodeChanges(data, dataDiffer = this.dataDiffer, viewContainer = this.nodeOutlet.viewContainer, parentData) {
|
158
|
+
const changes = dataDiffer.diff(data);
|
159
|
+
if (!changes) {
|
160
|
+
return;
|
161
|
+
}
|
162
|
+
changes.forEachOperation((item, adjustedPreviousIndex, currentIndex) => {
|
163
|
+
if (item.previousIndex == null) {
|
164
|
+
this.insertNode(data[currentIndex], currentIndex, viewContainer, parentData);
|
165
|
+
}
|
166
|
+
else if (currentIndex == null) {
|
167
|
+
viewContainer.remove(adjustedPreviousIndex);
|
168
|
+
this.levels.delete(item.item);
|
169
|
+
}
|
170
|
+
else {
|
171
|
+
const view = viewContainer.get(adjustedPreviousIndex);
|
172
|
+
viewContainer.move(view, currentIndex);
|
173
|
+
}
|
174
|
+
});
|
175
|
+
this.changeDetectorRef.detectChanges();
|
176
|
+
}
|
177
|
+
/**
|
178
|
+
* Finds the matching node definition that should be used for this node data. If there is only
|
179
|
+
* one node definition, it is returned. Otherwise, find the node definition that has a when
|
180
|
+
* predicate that returns true with the data. If none return true, return the default node
|
181
|
+
* definition.
|
182
|
+
*/
|
183
|
+
getNodeDef(data, i) {
|
184
|
+
if (this.nodeDefs.length === 1) {
|
185
|
+
return this.nodeDefs.first;
|
186
|
+
}
|
187
|
+
const nodeDef = this.nodeDefs.find((def) => def.when && def.when(i, data)) || this.defaultNodeDef;
|
188
|
+
if (!nodeDef) {
|
189
|
+
throw getTreeMissingMatchingNodeDefError();
|
190
|
+
}
|
191
|
+
return nodeDef;
|
192
|
+
}
|
193
|
+
/**
|
194
|
+
* Create the embedded view for the data node template and place it in the correct index location
|
195
|
+
* within the data node view container.
|
196
|
+
*/
|
197
|
+
insertNode(nodeData, index, viewContainer, parentData) {
|
198
|
+
const node = this.getNodeDef(nodeData, index);
|
199
|
+
// Node context that will be provided to created embedded view
|
200
|
+
const context = new McTreeNodeOutletContext(nodeData);
|
201
|
+
// If the tree is flat tree, then use the `getLevel` function in flat tree control
|
202
|
+
// Otherwise, use the level of parent node.
|
203
|
+
if (this.treeControl.getLevel) {
|
204
|
+
context.level = this.treeControl.getLevel(nodeData);
|
205
|
+
/* tslint:disable-next-line:no-typeof-undefined */
|
206
|
+
}
|
207
|
+
else if (typeof parentData !== 'undefined' && this.levels.has(parentData)) {
|
208
|
+
context.level = this.levels.get(parentData) + 1;
|
209
|
+
}
|
210
|
+
else {
|
211
|
+
context.level = 0;
|
212
|
+
}
|
213
|
+
this.levels.set(nodeData, context.level);
|
214
|
+
// Use default tree nodeOutlet, or nested node's nodeOutlet
|
215
|
+
const container = viewContainer ? viewContainer : this.nodeOutlet.viewContainer;
|
216
|
+
container.createEmbeddedView(node.template, context, index);
|
217
|
+
// Set the data to just created `McTreeNode`.
|
218
|
+
// The `McTreeNode` created from `createEmbeddedView` will be saved in static variable
|
219
|
+
// `mostRecentTreeNode`. We get it from static variable and pass the node data to it.
|
220
|
+
if (McTreeNode.mostRecentTreeNode) {
|
221
|
+
McTreeNode.mostRecentTreeNode.data = nodeData;
|
222
|
+
}
|
223
|
+
}
|
224
|
+
/** Set up a subscription for the data provided by the data source. */
|
225
|
+
observeRenderChanges() {
|
226
|
+
let dataStream;
|
227
|
+
// Cannot use `instanceof DataSource` since the data source could be a literal with
|
228
|
+
// `connect` function and may not extends DataSource.
|
229
|
+
// tslint:disable-next-line:no-unbound-method
|
230
|
+
if (typeof this._dataSource.connect === 'function') {
|
231
|
+
dataStream = this._dataSource.connect(this);
|
232
|
+
}
|
233
|
+
else if (this._dataSource instanceof Observable) {
|
234
|
+
dataStream = this._dataSource;
|
235
|
+
}
|
236
|
+
else if (Array.isArray(this._dataSource)) {
|
237
|
+
dataStream = of(this._dataSource);
|
238
|
+
}
|
239
|
+
if (dataStream) {
|
240
|
+
this.dataSubscription = dataStream
|
241
|
+
.pipe(takeUntil(this.onDestroy))
|
242
|
+
.subscribe((data) => this.renderNodeChanges(data));
|
243
|
+
}
|
244
|
+
else {
|
245
|
+
throw getTreeNoValidDataSourceError();
|
246
|
+
}
|
247
|
+
}
|
248
|
+
/**
|
249
|
+
* Switch to the provided data source by resetting the data and unsubscribing from the current
|
250
|
+
* render change subscription if one exists. If the data source is null, interpret this by
|
251
|
+
* clearing the node outlet. Otherwise start listening for new data.
|
252
|
+
*/
|
253
|
+
switchDataSource(dataSource) {
|
254
|
+
// tslint:disable-next-line:no-unbound-method
|
255
|
+
if (this._dataSource && typeof this._dataSource.disconnect === 'function') {
|
256
|
+
this.dataSource.disconnect(this);
|
257
|
+
}
|
258
|
+
if (this.dataSubscription) {
|
259
|
+
this.dataSubscription.unsubscribe();
|
260
|
+
this.dataSubscription = null;
|
261
|
+
}
|
262
|
+
// Remove the all dataNodes if there is now no data source
|
263
|
+
if (!dataSource) {
|
264
|
+
this.nodeOutlet.viewContainer.clear();
|
265
|
+
}
|
266
|
+
this._dataSource = dataSource;
|
267
|
+
if (this.nodeDefs) {
|
268
|
+
this.observeRenderChanges();
|
269
|
+
}
|
270
|
+
}
|
271
|
+
}
|
272
|
+
/** @nocollapse */ McTreeBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McTreeBase, deps: [{ token: i0.IterableDiffers }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
|
273
|
+
/** @nocollapse */ McTreeBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.13", type: McTreeBase, inputs: { treeControl: "treeControl", trackBy: "trackBy", dataSource: "dataSource" }, queries: [{ propertyName: "nodeDefs", predicate: McTreeNodeDef }], viewQueries: [{ propertyName: "nodeOutlet", first: true, predicate: McTreeNodeOutlet, descendants: true, static: true }], ngImport: i0 });
|
274
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McTreeBase, decorators: [{
|
275
|
+
type: Directive
|
276
|
+
}], ctorParameters: function () { return [{ type: i0.IterableDiffers }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { treeControl: [{
|
277
|
+
type: Input
|
278
|
+
}], trackBy: [{
|
279
|
+
type: Input
|
280
|
+
}], nodeOutlet: [{
|
281
|
+
type: ViewChild,
|
282
|
+
args: [McTreeNodeOutlet, { static: true }]
|
283
|
+
}], nodeDefs: [{
|
284
|
+
type: ContentChildren,
|
285
|
+
args: [McTreeNodeDef]
|
286
|
+
}], dataSource: [{
|
287
|
+
type: Input
|
288
|
+
}] } });
|
289
|
+
class McTreeNode {
|
290
|
+
constructor(elementRef, tree) {
|
291
|
+
this.elementRef = elementRef;
|
292
|
+
this.tree = tree;
|
293
|
+
this.destroyed = new Subject();
|
294
|
+
McTreeNode.mostRecentTreeNode = this;
|
295
|
+
}
|
296
|
+
get data() {
|
297
|
+
return this._data;
|
298
|
+
}
|
299
|
+
set data(value) {
|
300
|
+
this._data = value;
|
301
|
+
}
|
302
|
+
get isExpanded() {
|
303
|
+
return this.tree.treeControl.isExpanded(this.data);
|
304
|
+
}
|
305
|
+
get level() {
|
306
|
+
return this.tree.treeControl.getLevel ? this.tree.treeControl.getLevel(this._data) : 0;
|
307
|
+
}
|
308
|
+
ngOnDestroy() {
|
309
|
+
this.destroyed.next();
|
310
|
+
this.destroyed.complete();
|
311
|
+
}
|
312
|
+
focus() {
|
313
|
+
this.elementRef.nativeElement.focus();
|
314
|
+
}
|
315
|
+
}
|
316
|
+
/**
|
317
|
+
* The most recently created `McTreeNode`. We save it in static variable so we can retrieve it
|
318
|
+
* in `McTree` and set the data to it.
|
319
|
+
*/
|
320
|
+
McTreeNode.mostRecentTreeNode = null;
|
321
|
+
/** @nocollapse */ McTreeNode.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McTreeNode, deps: [{ token: i0.ElementRef }, { token: forwardRef(() => McTreeBase) }], target: i0.ɵɵFactoryTarget.Directive });
|
322
|
+
/** @nocollapse */ McTreeNode.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.13", type: McTreeNode, selector: "mc-tree-node", exportAs: ["mcTreeNode"], ngImport: i0 });
|
323
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McTreeNode, decorators: [{
|
324
|
+
type: Directive,
|
325
|
+
args: [{
|
326
|
+
selector: 'mc-tree-node',
|
327
|
+
exportAs: 'mcTreeNode'
|
328
|
+
}]
|
329
|
+
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: McTreeBase, decorators: [{
|
330
|
+
type: Inject,
|
331
|
+
args: [forwardRef(() => McTreeBase)]
|
332
|
+
}] }]; } });
|
333
|
+
|
334
|
+
/** Regex used to split a string on its CSS units. */
|
335
|
+
const cssUnitPattern = /([A-Za-z%]+)$/;
|
336
|
+
class McTreeNodePadding {
|
337
|
+
constructor(treeNode, tree, renderer, element, dir) {
|
338
|
+
var _a, _b;
|
339
|
+
this.treeNode = treeNode;
|
340
|
+
this.tree = tree;
|
341
|
+
this.renderer = renderer;
|
342
|
+
this.element = element;
|
343
|
+
this.dir = dir;
|
344
|
+
this._indent = 20;
|
345
|
+
/** CSS units used for the indentation value. */
|
346
|
+
this.indentUnits = 'px';
|
347
|
+
this.baseLeftPadding = parseInt(TreeSizePaddingLeft);
|
348
|
+
this.iconWidth = 24;
|
349
|
+
this.destroyed = new Subject();
|
350
|
+
(_b = (_a = this.dir) === null || _a === void 0 ? void 0 : _a.change) === null || _b === void 0 ? void 0 : _b.pipe(takeUntil(this.destroyed)).subscribe(() => this.setPadding());
|
351
|
+
}
|
352
|
+
get level() {
|
353
|
+
return this._level;
|
354
|
+
}
|
355
|
+
set level(value) {
|
356
|
+
this.setLevelInput(value);
|
357
|
+
}
|
358
|
+
get indent() {
|
359
|
+
return this._indent;
|
360
|
+
}
|
361
|
+
set indent(indent) {
|
362
|
+
this.setIndentInput(indent);
|
38
363
|
}
|
39
|
-
get level() { return this._level; }
|
40
|
-
set level(value) { this.setLevelInput(value); }
|
41
|
-
get indent() { return this._indent; }
|
42
|
-
set indent(indent) { this.setIndentInput(indent); }
|
43
364
|
get leftPadding() {
|
44
365
|
return (this.withIcon ? 0 : this.iconWidth) + this.baseLeftPadding;
|
45
366
|
}
|
367
|
+
ngOnInit() {
|
368
|
+
this.withIcon = this.tree.treeControl.isExpandable(this.treeNode.data);
|
369
|
+
this.setPadding();
|
370
|
+
}
|
371
|
+
ngOnDestroy() {
|
372
|
+
this.destroyed.next();
|
373
|
+
this.destroyed.complete();
|
374
|
+
}
|
46
375
|
paddingIndent() {
|
47
376
|
const nodeLevel = (this.treeNode.data && this.tree.treeControl.getLevel)
|
48
377
|
? this.tree.treeControl.getLevel(this.treeNode.data)
|
@@ -50,32 +379,69 @@ class McTreeNodePadding extends CdkTreeNodePadding {
|
|
50
379
|
const level = this.level || nodeLevel;
|
51
380
|
return level > 0 ? `${(level * this._indent) + this.leftPadding}px` : `${this.leftPadding}px`;
|
52
381
|
}
|
53
|
-
|
54
|
-
|
382
|
+
/**
|
383
|
+
* This has been extracted to a util because of TS 4 and VE.
|
384
|
+
* View Engine doesn't support property rename inheritance.
|
385
|
+
* TS 4.0 doesn't allow properties to override accessors or vice-versa.
|
386
|
+
* @docs-private
|
387
|
+
*/
|
388
|
+
setLevelInput(value) {
|
389
|
+
// Set to null as the fallback value so that _setPadding can fall back to the node level if the
|
390
|
+
// consumer set the directive as `mcTreeNodePadding=""`. We still want to take this value if
|
391
|
+
// they set 0 explicitly.
|
392
|
+
this._level = coerceNumberProperty(value, null);
|
393
|
+
this.setPadding();
|
394
|
+
}
|
395
|
+
/**
|
396
|
+
* This has been extracted to a util because of TS 4 and VE.
|
397
|
+
* View Engine doesn't support property rename inheritance.
|
398
|
+
* TS 4.0 doesn't allow properties to override accessors or vice-versa.
|
399
|
+
* @docs-private
|
400
|
+
*/
|
401
|
+
setIndentInput(indent) {
|
402
|
+
let value = indent;
|
403
|
+
let units = 'px';
|
404
|
+
if (typeof indent === 'string') {
|
405
|
+
const parts = indent.split(cssUnitPattern);
|
406
|
+
value = parts[0];
|
407
|
+
units = parts[1] || units;
|
408
|
+
}
|
409
|
+
this.indentUnits = units;
|
410
|
+
this._indent = coerceNumberProperty(value);
|
55
411
|
this.setPadding();
|
56
412
|
}
|
413
|
+
setPadding() {
|
414
|
+
var _a;
|
415
|
+
const padding = this.paddingIndent();
|
416
|
+
const paddingProp = ((_a = this.dir) === null || _a === void 0 ? void 0 : _a.value) === 'rtl' ? 'paddingRight' : 'paddingLeft';
|
417
|
+
this.renderer.setStyle(this.element.nativeElement, paddingProp, padding);
|
418
|
+
}
|
57
419
|
}
|
58
|
-
/** @nocollapse */ McTreeNodePadding.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
59
|
-
/** @nocollapse */ McTreeNodePadding.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.
|
60
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
420
|
+
/** @nocollapse */ McTreeNodePadding.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McTreeNodePadding, deps: [{ token: McTreeNode }, { token: McTreeBase }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i2.Directionality, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
|
421
|
+
/** @nocollapse */ McTreeNodePadding.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.13", type: McTreeNodePadding, selector: "[mcTreeNodePadding]", inputs: { indent: ["mcTreeNodePaddingIndent", "indent"] }, exportAs: ["mcTreeNodePadding"], ngImport: i0 });
|
422
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McTreeNodePadding, decorators: [{
|
61
423
|
type: Directive,
|
62
424
|
args: [{
|
63
425
|
selector: '[mcTreeNodePadding]',
|
64
|
-
|
426
|
+
exportAs: 'mcTreeNodePadding'
|
65
427
|
}]
|
66
|
-
}],
|
67
|
-
|
68
|
-
|
69
|
-
}], indent: [{
|
428
|
+
}], ctorParameters: function () { return [{ type: McTreeNode }, { type: McTreeBase }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i2.Directionality, decorators: [{
|
429
|
+
type: Optional
|
430
|
+
}] }]; }, propDecorators: { indent: [{
|
70
431
|
type: Input,
|
71
432
|
args: ['mcTreeNodePaddingIndent']
|
72
433
|
}] } });
|
73
434
|
|
74
|
-
class
|
435
|
+
class McTreeNodeToggleBase {
|
436
|
+
}
|
437
|
+
// tslint:disable-next-line:naming-convention
|
438
|
+
const McTreeNodeToggleMixinBase = mixinDisabled(McTreeNodeToggleBase);
|
439
|
+
/** @docs-private */
|
440
|
+
class McTreeNodeToggleBaseDirective extends McTreeNodeToggleMixinBase {
|
75
441
|
constructor(tree, treeNode) {
|
442
|
+
super();
|
76
443
|
this.tree = tree;
|
77
444
|
this.treeNode = treeNode;
|
78
|
-
this.disabled = false;
|
79
445
|
this._recursive = false;
|
80
446
|
this.tree.treeControl.filterValue
|
81
447
|
.pipe(map((value) => (value === null || value === void 0 ? void 0 : value.length) > 0))
|
@@ -85,81 +451,87 @@ class McTreeNodeToggleComponent {
|
|
85
451
|
return this._recursive;
|
86
452
|
}
|
87
453
|
set recursive(value) {
|
88
|
-
this._recursive = value;
|
454
|
+
this._recursive = coerceBooleanProperty(value);
|
89
455
|
}
|
90
456
|
get iconState() {
|
91
|
-
return this.
|
457
|
+
return this.tree.treeControl.isExpanded(this.node);
|
92
458
|
}
|
93
459
|
toggle(event) {
|
460
|
+
if (this.disabled) {
|
461
|
+
return;
|
462
|
+
}
|
94
463
|
this.recursive
|
95
464
|
? this.tree.treeControl.toggleDescendants(this.treeNode.data)
|
96
465
|
: this.tree.treeControl.toggle(this.treeNode.data);
|
97
466
|
event.stopPropagation();
|
98
467
|
}
|
99
468
|
}
|
100
|
-
/** @nocollapse */
|
101
|
-
/** @nocollapse */
|
102
|
-
|
103
|
-
|
104
|
-
|
469
|
+
/** @nocollapse */ McTreeNodeToggleBaseDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McTreeNodeToggleBaseDirective, deps: [{ token: McTreeBase }, { token: McTreeNode }], target: i0.ɵɵFactoryTarget.Directive });
|
470
|
+
/** @nocollapse */ McTreeNodeToggleBaseDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.13", type: McTreeNodeToggleBaseDirective, inputs: { node: "node", recursive: ["mcTreeNodeToggleRecursive", "recursive"] }, usesInheritance: true, ngImport: i0 });
|
471
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McTreeNodeToggleBaseDirective, decorators: [{
|
472
|
+
type: Directive
|
473
|
+
}], ctorParameters: function () { return [{ type: McTreeBase }, { type: McTreeNode }]; }, propDecorators: { node: [{
|
474
|
+
type: Input
|
475
|
+
}], recursive: [{
|
476
|
+
type: Input,
|
477
|
+
args: ['mcTreeNodeToggleRecursive']
|
478
|
+
}] } });
|
479
|
+
class McTreeNodeToggleComponent extends McTreeNodeToggleBaseDirective {
|
480
|
+
}
|
481
|
+
/** @nocollapse */ McTreeNodeToggleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McTreeNodeToggleComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
482
|
+
/** @nocollapse */ McTreeNodeToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: McTreeNodeToggleComponent, selector: "mc-tree-node-toggle", inputs: { disabled: "disabled" }, host: { listeners: { "click": "toggle($event)" }, properties: { "class.mc-opened": "iconState", "attr.disabled": "disabled || null" }, classAttribute: "mc-tree-node-toggle" }, exportAs: ["mcTreeNodeToggle"], usesInheritance: true, ngImport: i0, template: `<i class="mc mc-icon mc-angle-down-S_16"></i>`, isInline: true, styles: [".mc-tree-node-toggle{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:24px;height:100%;cursor:pointer}.mc-tree-node-toggle .mc-icon{transform:rotate(-90deg)}.mc-tree-node-toggle.mc-opened .mc-icon{transform:rotate(0)}.mc-tree-node-toggle[disabled]{cursor:default}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
483
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McTreeNodeToggleComponent, decorators: [{
|
105
484
|
type: Component,
|
106
485
|
args: [{
|
107
486
|
selector: 'mc-tree-node-toggle',
|
108
|
-
|
109
|
-
|
110
|
-
|
487
|
+
exportAs: 'mcTreeNodeToggle',
|
488
|
+
template: `<i class="mc mc-icon mc-angle-down-S_16"></i>`,
|
489
|
+
styleUrls: ['./toggle.scss'],
|
111
490
|
host: {
|
112
491
|
class: 'mc-tree-node-toggle',
|
113
492
|
'[class.mc-opened]': 'iconState',
|
114
493
|
'[attr.disabled]': 'disabled || null',
|
115
494
|
'(click)': 'toggle($event)'
|
116
495
|
},
|
117
|
-
|
496
|
+
inputs: ['disabled'],
|
497
|
+
encapsulation: ViewEncapsulation.None,
|
498
|
+
changeDetection: ChangeDetectionStrategy.OnPush
|
118
499
|
}]
|
119
|
-
}]
|
120
|
-
|
121
|
-
}], recursive: [{
|
122
|
-
type: Input,
|
123
|
-
args: ['cdkTreeNodeToggleRecursive']
|
124
|
-
}] } });
|
125
|
-
class McTreeNodeToggleDirective {
|
126
|
-
constructor(tree, treeNode) {
|
127
|
-
this.tree = tree;
|
128
|
-
this.treeNode = treeNode;
|
129
|
-
this.disabled = false;
|
130
|
-
this._recursive = false;
|
131
|
-
this.tree.treeControl.filterValue
|
132
|
-
.pipe(map((value) => value.length > 0))
|
133
|
-
.subscribe((state) => this.disabled = state);
|
134
|
-
}
|
135
|
-
get recursive() {
|
136
|
-
return this._recursive;
|
137
|
-
}
|
138
|
-
set recursive(value) {
|
139
|
-
this._recursive = value;
|
140
|
-
}
|
141
|
-
toggle(event) {
|
142
|
-
this.recursive
|
143
|
-
? this.tree.treeControl.toggleDescendants(this.treeNode.data)
|
144
|
-
: this.tree.treeControl.toggle(this.treeNode.data);
|
145
|
-
event.stopPropagation();
|
146
|
-
}
|
500
|
+
}] });
|
501
|
+
class McTreeNodeToggleDirective extends McTreeNodeToggleBaseDirective {
|
147
502
|
}
|
148
|
-
/** @nocollapse */ McTreeNodeToggleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
149
|
-
/** @nocollapse */ McTreeNodeToggleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.
|
150
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
503
|
+
/** @nocollapse */ McTreeNodeToggleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McTreeNodeToggleDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
|
504
|
+
/** @nocollapse */ McTreeNodeToggleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.13", type: McTreeNodeToggleDirective, selector: "[mcTreeNodeToggle]", host: { listeners: { "click": "toggle($event)" }, properties: { "attr.disabled": "disabled || null" } }, exportAs: ["mcTreeNodeToggle"], usesInheritance: true, ngImport: i0 });
|
505
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McTreeNodeToggleDirective, decorators: [{
|
151
506
|
type: Directive,
|
152
507
|
args: [{
|
153
508
|
selector: '[mcTreeNodeToggle]',
|
509
|
+
exportAs: 'mcTreeNodeToggle',
|
154
510
|
host: {
|
155
511
|
'[attr.disabled]': 'disabled || null',
|
156
512
|
'(click)': 'toggle($event)'
|
157
513
|
}
|
158
514
|
}]
|
159
|
-
}]
|
160
|
-
|
161
|
-
|
162
|
-
|
515
|
+
}] });
|
516
|
+
|
517
|
+
class McTree extends McTreeBase {
|
518
|
+
}
|
519
|
+
/** @nocollapse */ McTree.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McTree, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
520
|
+
/** @nocollapse */ McTree.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: McTree, selector: "mc-tree", host: { classAttribute: "mc-tree" }, exportAs: ["mcTree"], usesInheritance: true, ngImport: i0, template: `<ng-container mcTreeNodeOutlet></ng-container>`, isInline: true, styles: [".mc-tree{display:block}\n"], directives: [{ type: McTreeNodeOutlet, selector: "[mcTreeNodeOutlet]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
521
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McTree, decorators: [{
|
522
|
+
type: Component,
|
523
|
+
args: [{
|
524
|
+
selector: 'mc-tree',
|
525
|
+
exportAs: 'mcTree',
|
526
|
+
template: `<ng-container mcTreeNodeOutlet></ng-container>`,
|
527
|
+
styleUrls: ['./tree.scss'],
|
528
|
+
host: {
|
529
|
+
class: 'mc-tree'
|
530
|
+
},
|
531
|
+
encapsulation: ViewEncapsulation.None,
|
532
|
+
changeDetection: ChangeDetectionStrategy.OnPush
|
533
|
+
}]
|
534
|
+
}] });
|
163
535
|
|
164
536
|
/**
|
165
537
|
* Injection token used to provide the parent component to options.
|
@@ -172,7 +544,7 @@ class McTreeOptionChange {
|
|
172
544
|
}
|
173
545
|
}
|
174
546
|
let uniqueIdCounter = 0;
|
175
|
-
class McTreeOption extends
|
547
|
+
class McTreeOption extends McTreeNode {
|
176
548
|
constructor(elementRef, changeDetectorRef, ngZone, tree) {
|
177
549
|
super(elementRef, tree);
|
178
550
|
this.changeDetectorRef = changeDetectorRef;
|
@@ -193,7 +565,7 @@ class McTreeOption extends CdkTreeNode {
|
|
193
565
|
this._value = value;
|
194
566
|
}
|
195
567
|
get disabled() {
|
196
|
-
return this._disabled ||
|
568
|
+
return this._disabled || this.tree.disabled;
|
197
569
|
}
|
198
570
|
set disabled(value) {
|
199
571
|
const newValue = coerceBooleanProperty(value);
|
@@ -219,13 +591,14 @@ class McTreeOption extends CdkTreeNode {
|
|
219
591
|
get id() {
|
220
592
|
return this._id;
|
221
593
|
}
|
222
|
-
get multiple() {
|
223
|
-
return this.tree.multiple;
|
224
|
-
}
|
225
594
|
get viewValue() {
|
226
595
|
// TODO: Add input property alternative for node envs.
|
227
596
|
return (this.getHostElement().textContent || '').trim();
|
228
597
|
}
|
598
|
+
get isExpandable() {
|
599
|
+
var _a;
|
600
|
+
return !((_a = this.toggleElement) === null || _a === void 0 ? void 0 : _a.disabled) && this.tree.treeControl.isExpandable(this.data);
|
601
|
+
}
|
229
602
|
ngAfterContentInit() {
|
230
603
|
this.value = this.tree.treeControl.getValue(this.data);
|
231
604
|
}
|
@@ -246,10 +619,11 @@ class McTreeOption extends CdkTreeNode {
|
|
246
619
|
this.changeDetectorRef.markForCheck();
|
247
620
|
}
|
248
621
|
focus(focusOrigin) {
|
622
|
+
var _a;
|
249
623
|
if (focusOrigin === 'program') {
|
250
624
|
return;
|
251
625
|
}
|
252
|
-
if (this.disabled || this.hasFocus) {
|
626
|
+
if (this.disabled || this.hasFocus || ((_a = this.actionButton) === null || _a === void 0 ? void 0 : _a.hasFocus)) {
|
253
627
|
return;
|
254
628
|
}
|
255
629
|
this.elementRef.nativeElement.focus();
|
@@ -269,7 +643,11 @@ class McTreeOption extends CdkTreeNode {
|
|
269
643
|
.pipe(take(1))
|
270
644
|
.subscribe(() => {
|
271
645
|
this.ngZone.run(() => {
|
646
|
+
var _a;
|
272
647
|
this.hasFocus = false;
|
648
|
+
if ((_a = this.actionButton) === null || _a === void 0 ? void 0 : _a.hasFocus) {
|
649
|
+
return;
|
650
|
+
}
|
273
651
|
this.onBlur.next({ option: this });
|
274
652
|
});
|
275
653
|
});
|
@@ -282,26 +660,38 @@ class McTreeOption extends CdkTreeNode {
|
|
282
660
|
return 0;
|
283
661
|
}
|
284
662
|
select() {
|
285
|
-
if (
|
286
|
-
|
287
|
-
this.changeDetectorRef.markForCheck();
|
288
|
-
this.emitSelectionChangeEvent();
|
663
|
+
if (this._selected) {
|
664
|
+
return;
|
289
665
|
}
|
666
|
+
this._selected = true;
|
667
|
+
this.changeDetectorRef.markForCheck();
|
668
|
+
this.emitSelectionChangeEvent();
|
290
669
|
}
|
291
670
|
deselect() {
|
292
|
-
if (this._selected) {
|
293
|
-
|
294
|
-
|
671
|
+
if (!this._selected) {
|
672
|
+
return;
|
673
|
+
}
|
674
|
+
this._selected = false;
|
675
|
+
this.changeDetectorRef.markForCheck();
|
676
|
+
}
|
677
|
+
onKeydown($event) {
|
678
|
+
if (!this.actionButton) {
|
679
|
+
return;
|
680
|
+
}
|
681
|
+
if ($event.keyCode === TAB && !$event.shiftKey && !this.actionButton.hasFocus) {
|
682
|
+
this.actionButton.focus();
|
683
|
+
$event.preventDefault();
|
295
684
|
}
|
296
685
|
}
|
297
686
|
selectViaInteraction($event) {
|
298
|
-
if (
|
299
|
-
|
300
|
-
this.emitSelectionChangeEvent(true);
|
301
|
-
const shiftKey = $event ? hasModifierKey($event, 'shiftKey') : false;
|
302
|
-
const ctrlKey = $event ? hasModifierKey($event, 'ctrlKey') : false;
|
303
|
-
this.tree.setSelectedOptionsByClick(this, shiftKey, ctrlKey);
|
687
|
+
if (this.disabled) {
|
688
|
+
return;
|
304
689
|
}
|
690
|
+
this.changeDetectorRef.markForCheck();
|
691
|
+
this.emitSelectionChangeEvent(true);
|
692
|
+
const shiftKey = $event ? hasModifierKey($event, 'shiftKey') : false;
|
693
|
+
const ctrlKey = $event ? hasModifierKey($event, 'ctrlKey') : false;
|
694
|
+
this.tree.setSelectedOptionsByClick(this, shiftKey, ctrlKey);
|
305
695
|
}
|
306
696
|
emitSelectionChangeEvent(isUserInput = false) {
|
307
697
|
this.onSelectionChange.emit(new McTreeOptionChange(this, isUserInput));
|
@@ -313,33 +703,54 @@ class McTreeOption extends CdkTreeNode {
|
|
313
703
|
this.changeDetectorRef.markForCheck();
|
314
704
|
}
|
315
705
|
}
|
316
|
-
/** @nocollapse */ McTreeOption.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
317
|
-
/** @nocollapse */ McTreeOption.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
318
|
-
|
706
|
+
/** @nocollapse */ McTreeOption.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McTreeOption, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: MC_TREE_OPTION_PARENT_COMPONENT }], target: i0.ɵɵFactoryTarget.Component });
|
707
|
+
/** @nocollapse */ McTreeOption.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: McTreeOption, selector: "mc-tree-option", inputs: { disabled: "disabled", showCheckbox: "showCheckbox" }, outputs: { onSelectionChange: "onSelectionChange" }, host: { listeners: { "focusin": "focus()", "blur": "blur()", "click": "selectViaInteraction($event)", "keydown": "onKeydown($event)" }, properties: { "class.mc-selected": "selected", "class.mc-focused": "hasFocus", "class.mc-action-button-focused": "actionButton?.active", "attr.id": "id", "attr.tabindex": "-1", "attr.disabled": "disabled || null" }, classAttribute: "mc-tree-option" }, providers: [
|
708
|
+
{ provide: McTreeNode, useExisting: McTreeOption },
|
709
|
+
{ provide: MC_OPTION_ACTION_PARENT, useExisting: McTreeOption }
|
710
|
+
], queries: [{ propertyName: "toggleElement", first: true, predicate: ["mcTreeNodeToggle"], descendants: true }, { propertyName: "actionButton", first: true, predicate: McOptionActionComponent, descendants: true }, { propertyName: "tooltipTrigger", first: true, predicate: McTooltipTrigger, descendants: true }, { propertyName: "dropdownTrigger", first: true, predicate: McDropdownTrigger, descendants: true }], exportAs: ["mcTreeOption"], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"mc-tree-node-toggle\"></ng-content>\n\n<mc-pseudo-checkbox\n *ngIf=\"showCheckbox\"\n [state]=\"selected ? 'checked' : 'unchecked'\"\n [disabled]=\"disabled\">\n</mc-pseudo-checkbox>\n\n<ng-content select=\"mc-checkbox\"></ng-content>\n\n<ng-content select=\"[mc-icon]\"></ng-content>\n\n<span class=\"mc-option-text mc-no-select\"><ng-content></ng-content></span>\n\n<ng-content select=\"mc-option-action\"></ng-content>\n\n<div class=\"mc-option-overlay\"></div>\n", styles: [".mc-tree-option{box-sizing:border-box;display:flex;align-items:center;height:32px;height:var(--mc-tree-size-node-height, 32px);word-wrap:break-word;border:2px solid transparent}.mc-tree-option .mc-option-text{display:inline-block;flex-grow:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-right:16px;margin-right:var(--mc-tree-size-padding-right, 16px)}.mc-tree-option>.mc-icon{margin-right:8px;cursor:pointer}.mc-tree-option:focus{outline:none}.mc-tree-option:not([disabled]){cursor:pointer}.mc-tree-option>.mc-pseudo-checkbox,.mc-tree-option>.mc-checkbox{margin-right:8px}.mc-tree-option .mc-option-action{display:none}.mc-tree-option:not([disabled]):hover .mc-option-action,.mc-tree-option:not([disabled]).mc-focused .mc-option-action,.mc-tree-option:not([disabled]).mc-action-button-focused .mc-option-action{display:flex}\n"], components: [{ type: i1.McPseudoCheckbox, selector: "mc-pseudo-checkbox", inputs: ["state", "disabled"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
711
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McTreeOption, decorators: [{
|
319
712
|
type: Component,
|
320
713
|
args: [{
|
321
714
|
selector: 'mc-tree-option',
|
322
715
|
exportAs: 'mcTreeOption',
|
323
716
|
templateUrl: './tree-option.html',
|
717
|
+
styleUrls: ['./tree-option.scss'],
|
324
718
|
host: {
|
325
|
-
'[attr.id]': 'id',
|
326
|
-
'[attr.tabindex]': '-1',
|
327
|
-
'[attr.disabled]': 'disabled || null',
|
328
719
|
class: 'mc-tree-option',
|
329
720
|
'[class.mc-selected]': 'selected',
|
330
721
|
'[class.mc-focused]': 'hasFocus',
|
722
|
+
'[class.mc-action-button-focused]': 'actionButton?.active',
|
723
|
+
'[attr.id]': 'id',
|
724
|
+
'[attr.tabindex]': '-1',
|
725
|
+
'[attr.disabled]': 'disabled || null',
|
331
726
|
'(focusin)': 'focus()',
|
332
727
|
'(blur)': 'blur()',
|
333
|
-
'(click)': 'selectViaInteraction($event)'
|
728
|
+
'(click)': 'selectViaInteraction($event)',
|
729
|
+
'(keydown)': 'onKeydown($event)'
|
334
730
|
},
|
335
731
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
336
732
|
encapsulation: ViewEncapsulation.None,
|
337
|
-
providers: [
|
733
|
+
providers: [
|
734
|
+
{ provide: McTreeNode, useExisting: McTreeOption },
|
735
|
+
{ provide: MC_OPTION_ACTION_PARENT, useExisting: McTreeOption }
|
736
|
+
]
|
338
737
|
}]
|
339
738
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: undefined, decorators: [{
|
340
739
|
type: Inject,
|
341
740
|
args: [MC_TREE_OPTION_PARENT_COMPONENT]
|
342
|
-
}] }]; }, propDecorators: {
|
741
|
+
}] }]; }, propDecorators: { toggleElement: [{
|
742
|
+
type: ContentChild,
|
743
|
+
args: ['mcTreeNodeToggle']
|
744
|
+
}], actionButton: [{
|
745
|
+
type: ContentChild,
|
746
|
+
args: [McOptionActionComponent]
|
747
|
+
}], tooltipTrigger: [{
|
748
|
+
type: ContentChild,
|
749
|
+
args: [McTooltipTrigger]
|
750
|
+
}], dropdownTrigger: [{
|
751
|
+
type: ContentChild,
|
752
|
+
args: [McDropdownTrigger]
|
753
|
+
}], disabled: [{
|
343
754
|
type: Input
|
344
755
|
}], showCheckbox: [{
|
345
756
|
type: Input
|
@@ -347,12 +758,204 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImpor
|
|
347
758
|
type: Output
|
348
759
|
}] } });
|
349
760
|
|
761
|
+
/** Base tree control. It has basic toggle/expand/collapse operations on a single data node. */
|
762
|
+
/* tslint:disable-next-line:naming-convention */
|
763
|
+
class BaseTreeControl {
|
764
|
+
constructor() {
|
765
|
+
/** A selection model with multi-selection to track expansion status. */
|
766
|
+
this.expansionModel = new SelectionModel(true);
|
767
|
+
this.filterModel = new SelectionModel(true);
|
768
|
+
this.filterValue = new BehaviorSubject('');
|
769
|
+
}
|
770
|
+
/** Toggles one single data node's expanded/collapsed state. */
|
771
|
+
toggle(dataNode) {
|
772
|
+
if (this.filterValue.value) {
|
773
|
+
return;
|
774
|
+
}
|
775
|
+
this.expansionModel.toggle(dataNode);
|
776
|
+
}
|
777
|
+
/** Expands one single data node. */
|
778
|
+
expand(dataNode) {
|
779
|
+
if (this.filterValue.value) {
|
780
|
+
return;
|
781
|
+
}
|
782
|
+
this.expansionModel.select(dataNode);
|
783
|
+
}
|
784
|
+
/** Collapses one single data node. */
|
785
|
+
collapse(dataNode) {
|
786
|
+
if (this.filterValue.value) {
|
787
|
+
return;
|
788
|
+
}
|
789
|
+
this.expansionModel.deselect(dataNode);
|
790
|
+
}
|
791
|
+
/** Whether a given data node is expanded or not. Returns true if the data node is expanded. */
|
792
|
+
isExpanded(dataNode) {
|
793
|
+
return this.expansionModel.isSelected(dataNode);
|
794
|
+
}
|
795
|
+
/** Toggles a subtree rooted at `node` recursively. */
|
796
|
+
toggleDescendants(dataNode) {
|
797
|
+
this.expansionModel.isSelected(dataNode)
|
798
|
+
? this.collapseDescendants(dataNode)
|
799
|
+
: this.expandDescendants(dataNode);
|
800
|
+
}
|
801
|
+
/** Collapse all dataNodes in the tree. */
|
802
|
+
collapseAll() {
|
803
|
+
this.expansionModel.clear();
|
804
|
+
}
|
805
|
+
/** Expands a subtree rooted at given data node recursively. */
|
806
|
+
expandDescendants(dataNode) {
|
807
|
+
const toBeProcessed = [dataNode];
|
808
|
+
toBeProcessed.push(...this.getDescendants(dataNode));
|
809
|
+
this.expansionModel.select(...toBeProcessed);
|
810
|
+
}
|
811
|
+
/** Collapses a subtree rooted at given data node recursively. */
|
812
|
+
collapseDescendants(dataNode) {
|
813
|
+
const toBeProcessed = [dataNode];
|
814
|
+
toBeProcessed.push(...this.getDescendants(dataNode));
|
815
|
+
this.expansionModel.deselect(...toBeProcessed);
|
816
|
+
}
|
817
|
+
}
|
818
|
+
|
819
|
+
function defaultCompareValues(firstValue, secondValue) {
|
820
|
+
return firstValue === secondValue;
|
821
|
+
}
|
822
|
+
function defaultCompareViewValues(firstViewValue, secondViewValue) {
|
823
|
+
return RegExp(secondViewValue, 'gi').test(firstViewValue);
|
824
|
+
}
|
825
|
+
/** Flat tree control. Able to expand/collapse a subtree recursively for flattened tree. */
|
826
|
+
class FlatTreeControl extends BaseTreeControl {
|
827
|
+
/** Construct with flat tree data node functions getLevel, isExpandable, getValue and getViewValue. */
|
828
|
+
constructor(getLevel, isExpandable,
|
829
|
+
/** getValue will be used to determine if the tree contains value or not. Used in method hasValue */
|
830
|
+
getValue,
|
831
|
+
/** getViewValue will be used for filter nodes. Returned value will be first argument in filterNodesFunction */
|
832
|
+
getViewValue,
|
833
|
+
/** compareValues will be used to comparing values. */
|
834
|
+
compareValues = defaultCompareValues,
|
835
|
+
/** compareValues will be used to comparing values. */
|
836
|
+
compareViewValues = defaultCompareViewValues) {
|
837
|
+
super();
|
838
|
+
this.getLevel = getLevel;
|
839
|
+
this.isExpandable = isExpandable;
|
840
|
+
this.getValue = getValue;
|
841
|
+
this.getViewValue = getViewValue;
|
842
|
+
this.compareValues = compareValues;
|
843
|
+
this.compareViewValues = compareViewValues;
|
844
|
+
}
|
845
|
+
/**
|
846
|
+
* Gets a list of the data node's subtree of descendent data nodes.
|
847
|
+
*
|
848
|
+
* To make this working, the `dataNodes` of the TreeControl must be flattened tree nodes
|
849
|
+
* with correct levels.
|
850
|
+
*/
|
851
|
+
getDescendants(dataNode) {
|
852
|
+
const startIndex = this.dataNodes.indexOf(dataNode);
|
853
|
+
const results = [];
|
854
|
+
// Goes through flattened tree nodes in the `dataNodes` array, and get all descendants.
|
855
|
+
// The level of descendants of a tree node must be greater than the level of the given
|
856
|
+
// tree node.
|
857
|
+
// If we reach a node whose level is equal to the level of the tree node, we hit a sibling.
|
858
|
+
// If we reach a node whose level is greater than the level of the tree node, we hit a
|
859
|
+
// sibling of an ancestor.
|
860
|
+
for (let i = startIndex + 1; i < this.dataNodes.length && this.getLevel(dataNode) < this.getLevel(this.dataNodes[i]); i++) {
|
861
|
+
results.push(this.dataNodes[i]);
|
862
|
+
}
|
863
|
+
return results;
|
864
|
+
}
|
865
|
+
/**
|
866
|
+
* Expands all data nodes in the tree.
|
867
|
+
*
|
868
|
+
* To make this working, the `dataNodes` variable of the TreeControl must be set to all flattened
|
869
|
+
* data nodes of the tree.
|
870
|
+
*/
|
871
|
+
expandAll() {
|
872
|
+
this.expansionModel.select(...this.dataNodes);
|
873
|
+
}
|
874
|
+
getParents(node, result) {
|
875
|
+
if (node.parent) {
|
876
|
+
result.unshift(node.parent);
|
877
|
+
return this.getParents(node.parent, result);
|
878
|
+
}
|
879
|
+
else {
|
880
|
+
return result;
|
881
|
+
}
|
882
|
+
}
|
883
|
+
hasValue(value) {
|
884
|
+
return this.dataNodes.find((node) => this.compareValues(this.getValue(node), value));
|
885
|
+
}
|
886
|
+
filterNodes(value) {
|
887
|
+
this.saveExpansionState();
|
888
|
+
this.filterModel.clear();
|
889
|
+
this.expansionModel.clear();
|
890
|
+
const filteredNodes = this.dataNodes
|
891
|
+
.filter((node) => this.compareViewValues(this.getViewValue(node), value));
|
892
|
+
const filteredNodesWithTheirParents = new Set();
|
893
|
+
filteredNodes.forEach((filteredNode) => {
|
894
|
+
this.getParents(filteredNode, [])
|
895
|
+
.forEach((node) => {
|
896
|
+
filteredNodesWithTheirParents.add(node);
|
897
|
+
this.expandDataNode(node);
|
898
|
+
});
|
899
|
+
filteredNodesWithTheirParents.add(filteredNode);
|
900
|
+
this.expandDataNode(filteredNode);
|
901
|
+
if (this.isExpandable(filteredNode)) {
|
902
|
+
const childNodeLevel = this.getLevel(filteredNode) + 1;
|
903
|
+
this.getDescendants(filteredNode)
|
904
|
+
.filter((childNode) => this.getLevel(childNode) === childNodeLevel)
|
905
|
+
.filter((childNode) => !this.isExpandable(childNode) || !this.hasFilteredDescendant(childNode, filteredNodes))
|
906
|
+
.forEach((childNode) => {
|
907
|
+
filteredNodesWithTheirParents.add(childNode);
|
908
|
+
this.expandDataNode(childNode);
|
909
|
+
});
|
910
|
+
}
|
911
|
+
});
|
912
|
+
this.filterModel.select(...Array.from(filteredNodesWithTheirParents));
|
913
|
+
this.filterValue.next(value);
|
914
|
+
this.restoreExpansionState();
|
915
|
+
}
|
916
|
+
expandDataNode(dataNode) {
|
917
|
+
if (this.isExpandable(dataNode)) {
|
918
|
+
this.expansionModel.select(dataNode);
|
919
|
+
}
|
920
|
+
}
|
921
|
+
saveExpansionState() {
|
922
|
+
if (this.filterValue.value === '') {
|
923
|
+
this.expandedItemsBeforeFiltration = this.expansionModel.selected;
|
924
|
+
}
|
925
|
+
}
|
926
|
+
restoreExpansionState() {
|
927
|
+
if (this.filterValue.value === '') {
|
928
|
+
this.expansionModel.clear();
|
929
|
+
this.expansionModel.select(...this.expandedItemsBeforeFiltration);
|
930
|
+
}
|
931
|
+
}
|
932
|
+
hasFilteredDescendant(dataNode, filteredNodes) {
|
933
|
+
const filteredViewValues = filteredNodes
|
934
|
+
.map((node) => this.getViewValue(node));
|
935
|
+
return this.getDescendants(dataNode)
|
936
|
+
.filter((node) => filteredViewValues.includes(this.getViewValue(node)))
|
937
|
+
.length > 0;
|
938
|
+
}
|
939
|
+
}
|
940
|
+
|
350
941
|
/* tslint:disable:no-empty */
|
351
942
|
const MC_SELECTION_TREE_VALUE_ACCESSOR = {
|
352
943
|
provide: NG_VALUE_ACCESSOR,
|
353
944
|
useExisting: forwardRef(() => McTreeSelection),
|
354
945
|
multi: true
|
355
946
|
};
|
947
|
+
class McTreeSelectAllEvent {
|
948
|
+
constructor(source, options) {
|
949
|
+
this.source = source;
|
950
|
+
this.options = options;
|
951
|
+
}
|
952
|
+
}
|
953
|
+
class McTreeCopyEvent {
|
954
|
+
constructor(source, option) {
|
955
|
+
this.source = source;
|
956
|
+
this.option = option;
|
957
|
+
}
|
958
|
+
}
|
356
959
|
class McTreeNavigationChange {
|
357
960
|
constructor(source, option) {
|
358
961
|
this.source = source;
|
@@ -365,16 +968,19 @@ class McTreeSelectionChange {
|
|
365
968
|
this.option = option;
|
366
969
|
}
|
367
970
|
}
|
368
|
-
class McTreeSelection extends
|
369
|
-
constructor(elementRef, differs, changeDetectorRef, multiple) {
|
971
|
+
class McTreeSelection extends McTreeBase {
|
972
|
+
constructor(elementRef, differs, changeDetectorRef, multiple, clipboard) {
|
370
973
|
super(differs, changeDetectorRef);
|
371
974
|
this.elementRef = elementRef;
|
975
|
+
this.clipboard = clipboard;
|
372
976
|
this.renderedOptions = new QueryList();
|
373
977
|
this.resetFocusedItemOnBlur = true;
|
374
|
-
this.navigationChange = new EventEmitter();
|
375
|
-
this.selectionChange = new EventEmitter();
|
376
978
|
this.multipleMode = null;
|
377
979
|
this.userTabIndex = null;
|
980
|
+
this.navigationChange = new EventEmitter();
|
981
|
+
this.selectionChange = new EventEmitter();
|
982
|
+
this.onSelectAll = new EventEmitter();
|
983
|
+
this.onCopy = new EventEmitter();
|
378
984
|
this.sortedNodes = [];
|
379
985
|
this._autoSelect = true;
|
380
986
|
this._noUnselectLast = true;
|
@@ -395,6 +1001,7 @@ class McTreeSelection extends CdkTree {
|
|
395
1001
|
});
|
396
1002
|
this.renderedOptions.reset(orderedOptions);
|
397
1003
|
this.renderedOptions.notifyOnChanges();
|
1004
|
+
this.updateScrollSize();
|
398
1005
|
};
|
399
1006
|
if (multiple === MultipleMode.CHECKBOX || multiple === MultipleMode.KEYBOARD) {
|
400
1007
|
this.multipleMode = multiple;
|
@@ -500,7 +1107,9 @@ class McTreeSelection extends CdkTree {
|
|
500
1107
|
if (this.renderedOptions.length === 0 || this.isFocusReceivedFromNestedOption($event)) {
|
501
1108
|
return;
|
502
1109
|
}
|
1110
|
+
this.keyManager.setFocusOrigin('keyboard');
|
503
1111
|
this.keyManager.setFirstItemActive();
|
1112
|
+
this.keyManager.setFocusOrigin('program');
|
504
1113
|
}
|
505
1114
|
blur() {
|
506
1115
|
if (!this.hasFocusedOption() && this.resetFocusedItemOnBlur) {
|
@@ -510,51 +1119,54 @@ class McTreeSelection extends CdkTree {
|
|
510
1119
|
this.changeDetectorRef.markForCheck();
|
511
1120
|
}
|
512
1121
|
onKeyDown(event) {
|
1122
|
+
var _a, _b;
|
513
1123
|
this.keyManager.setFocusOrigin('keyboard');
|
514
1124
|
// tslint:disable-next-line: deprecation
|
515
1125
|
const keyCode = event.keyCode;
|
516
|
-
|
517
|
-
|
518
|
-
|
519
|
-
|
520
|
-
|
521
|
-
|
522
|
-
|
523
|
-
|
524
|
-
|
525
|
-
|
526
|
-
|
527
|
-
|
528
|
-
|
529
|
-
|
530
|
-
|
531
|
-
|
532
|
-
|
533
|
-
|
534
|
-
|
535
|
-
|
536
|
-
|
537
|
-
|
538
|
-
|
539
|
-
|
540
|
-
|
541
|
-
|
542
|
-
|
543
|
-
|
544
|
-
|
545
|
-
|
546
|
-
|
547
|
-
|
548
|
-
|
549
|
-
|
550
|
-
|
551
|
-
|
552
|
-
|
553
|
-
|
554
|
-
|
555
|
-
|
556
|
-
|
557
|
-
|
1126
|
+
if ([SPACE, LEFT_ARROW, RIGHT_ARROW].includes(keyCode) || isVerticalMovement(event)) {
|
1127
|
+
event.preventDefault();
|
1128
|
+
}
|
1129
|
+
if (this.multiple && isSelectAll(event)) {
|
1130
|
+
this.selectAllOptions();
|
1131
|
+
return;
|
1132
|
+
}
|
1133
|
+
else if (isCopy(event)) {
|
1134
|
+
this.copyActiveOption();
|
1135
|
+
return;
|
1136
|
+
}
|
1137
|
+
else if (keyCode === TAB) {
|
1138
|
+
this.keyManager.tabOut.next();
|
1139
|
+
return;
|
1140
|
+
}
|
1141
|
+
else if (keyCode === LEFT_ARROW && ((_a = this.keyManager.activeItem) === null || _a === void 0 ? void 0 : _a.isExpandable)) {
|
1142
|
+
this.treeControl.collapse(this.keyManager.activeItem.data);
|
1143
|
+
return;
|
1144
|
+
}
|
1145
|
+
else if (keyCode === RIGHT_ARROW && ((_b = this.keyManager.activeItem) === null || _b === void 0 ? void 0 : _b.isExpandable)) {
|
1146
|
+
this.treeControl.expand(this.keyManager.activeItem.data);
|
1147
|
+
return;
|
1148
|
+
}
|
1149
|
+
else if (keyCode === DOWN_ARROW) {
|
1150
|
+
this.keyManager.setNextItemActive();
|
1151
|
+
}
|
1152
|
+
else if (keyCode === UP_ARROW) {
|
1153
|
+
this.keyManager.setPreviousItemActive();
|
1154
|
+
}
|
1155
|
+
else if ([SPACE, ENTER].includes(keyCode)) {
|
1156
|
+
this.toggleFocusedOption();
|
1157
|
+
return;
|
1158
|
+
}
|
1159
|
+
else if (keyCode === HOME) {
|
1160
|
+
this.keyManager.setFirstItemActive();
|
1161
|
+
}
|
1162
|
+
else if (keyCode === END) {
|
1163
|
+
this.keyManager.setLastItemActive();
|
1164
|
+
}
|
1165
|
+
else if (keyCode === PAGE_UP) {
|
1166
|
+
this.keyManager.setPreviousPageItemActive();
|
1167
|
+
}
|
1168
|
+
else if (keyCode === PAGE_DOWN) {
|
1169
|
+
this.keyManager.setNextPageItemActive();
|
558
1170
|
}
|
559
1171
|
if (this.keyManager.activeItem) {
|
560
1172
|
this.setSelectedOptionsByKey(this.keyManager.activeItem, hasModifierKey(event, 'shiftKey'), hasModifierKey(event, 'ctrlKey'));
|
@@ -639,25 +1251,29 @@ class McTreeSelection extends CdkTree {
|
|
639
1251
|
renderNodeChanges(data, dataDiffer = this.dataDiffer, viewContainer = this.nodeOutlet.viewContainer, parentData) {
|
640
1252
|
super.renderNodeChanges(data, dataDiffer, viewContainer, parentData);
|
641
1253
|
this.sortedNodes = this.getSortedNodes(viewContainer);
|
642
|
-
this.updateScrollSize();
|
643
1254
|
this.nodeOutlet.changeDetectorRef.detectChanges();
|
644
1255
|
}
|
645
|
-
getHeight() {
|
646
|
-
const clientRects = this.elementRef.nativeElement.getClientRects();
|
647
|
-
if (clientRects.length) {
|
648
|
-
return clientRects[0].height;
|
649
|
-
}
|
650
|
-
return 0;
|
651
|
-
}
|
652
|
-
getItemHeight() {
|
653
|
-
return this.renderedOptions.first ? this.renderedOptions.first.getHeight() : 0;
|
654
|
-
}
|
655
1256
|
emitNavigationEvent(option) {
|
656
1257
|
this.navigationChange.emit(new McTreeNavigationChange(this, option));
|
657
1258
|
}
|
658
1259
|
emitChangeEvent(option) {
|
659
1260
|
this.selectionChange.emit(new McTreeNavigationChange(this, option));
|
660
1261
|
}
|
1262
|
+
selectAllOptions() {
|
1263
|
+
const optionsToSelect = this.renderedOptions
|
1264
|
+
.filter((option) => !option.disabled);
|
1265
|
+
optionsToSelect
|
1266
|
+
.forEach((option) => option.setSelected(true));
|
1267
|
+
this.onSelectAll.emit(new McTreeSelectAllEvent(this, optionsToSelect));
|
1268
|
+
}
|
1269
|
+
copyActiveOption() {
|
1270
|
+
if (this.onCopy.observers.length) {
|
1271
|
+
this.onCopy.emit(new McTreeCopyEvent(this, this.keyManager.activeItem));
|
1272
|
+
}
|
1273
|
+
else {
|
1274
|
+
this.onCopyDefaultHandler();
|
1275
|
+
}
|
1276
|
+
}
|
661
1277
|
writeValue(value) {
|
662
1278
|
if (this.multiple && value && !Array.isArray(value)) {
|
663
1279
|
throw getMcSelectNonArrayValueError();
|
@@ -692,6 +1308,20 @@ class McTreeSelection extends CdkTree {
|
|
692
1308
|
getSelectedValues() {
|
693
1309
|
return this.selectionModel.selected.map((selected) => this.treeControl.getValue(selected));
|
694
1310
|
}
|
1311
|
+
getItemHeight() {
|
1312
|
+
return this.renderedOptions.first ? this.renderedOptions.first.getHeight() : 0;
|
1313
|
+
}
|
1314
|
+
onCopyDefaultHandler() {
|
1315
|
+
var _a;
|
1316
|
+
(_a = this.clipboard) === null || _a === void 0 ? void 0 : _a.copy(this.keyManager.activeItem.value);
|
1317
|
+
}
|
1318
|
+
getHeight() {
|
1319
|
+
const clientRects = this.elementRef.nativeElement.getClientRects();
|
1320
|
+
if (clientRects.length) {
|
1321
|
+
return clientRects[0].height;
|
1322
|
+
}
|
1323
|
+
return 0;
|
1324
|
+
}
|
695
1325
|
updateTabIndex() {
|
696
1326
|
this._tabIndex = this.renderedOptions.length === 0 ? -1 : 0;
|
697
1327
|
}
|
@@ -770,19 +1400,19 @@ class McTreeSelection extends CdkTree {
|
|
770
1400
|
return $event.relatedTarget.classList.contains('mc-tree-option');
|
771
1401
|
}
|
772
1402
|
}
|
773
|
-
/** @nocollapse */ McTreeSelection.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
774
|
-
/** @nocollapse */ McTreeSelection.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
1403
|
+
/** @nocollapse */ McTreeSelection.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McTreeSelection, deps: [{ token: i0.ElementRef }, { token: i0.IterableDiffers }, { token: i0.ChangeDetectorRef }, { token: 'multiple', attribute: true }, { token: i1$1.Clipboard, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
1404
|
+
/** @nocollapse */ McTreeSelection.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: McTreeSelection, selector: "mc-tree-selection", inputs: { treeControl: "treeControl", autoSelect: "autoSelect", noUnselectLast: "noUnselectLast", disabled: "disabled", tabIndex: "tabIndex" }, outputs: { navigationChange: "navigationChange", selectionChange: "selectionChange", onSelectAll: "onSelectAll", onCopy: "onCopy" }, host: { listeners: { "blur": "blur()", "focus": "focus($event)", "keydown": "onKeyDown($event)", "window:resize": "updateScrollSize()" }, properties: { "attr.tabindex": "tabIndex", "attr.disabled": "disabled || null" }, classAttribute: "mc-tree-selection" }, providers: [
|
775
1405
|
MC_SELECTION_TREE_VALUE_ACCESSOR,
|
776
1406
|
{ provide: MC_TREE_OPTION_PARENT_COMPONENT, useExisting: McTreeSelection },
|
777
|
-
{ provide:
|
778
|
-
], queries: [{ propertyName: "unorderedOptions", predicate: McTreeOption }], viewQueries: [{ propertyName: "nodeOutlet", first: true, predicate:
|
779
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
1407
|
+
{ provide: McTreeBase, useExisting: McTreeSelection }
|
1408
|
+
], queries: [{ propertyName: "unorderedOptions", predicate: McTreeOption }], viewQueries: [{ propertyName: "nodeOutlet", first: true, predicate: McTreeNodeOutlet, descendants: true, static: true }], exportAs: ["mcTreeSelection"], usesInheritance: true, ngImport: i0, template: '<ng-container mcTreeNodeOutlet></ng-container>', isInline: true, styles: [".mc-tree-selection{display:block}\n"], directives: [{ type: McTreeNodeOutlet, selector: "[mcTreeNodeOutlet]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
1409
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McTreeSelection, decorators: [{
|
780
1410
|
type: Component,
|
781
1411
|
args: [{
|
782
1412
|
selector: 'mc-tree-selection',
|
783
1413
|
exportAs: 'mcTreeSelection',
|
784
|
-
template: '<ng-container
|
785
|
-
styleUrls: ['./tree.scss'],
|
1414
|
+
template: '<ng-container mcTreeNodeOutlet></ng-container>',
|
1415
|
+
styleUrls: ['./tree-selection.scss'],
|
786
1416
|
host: {
|
787
1417
|
class: 'mc-tree-selection',
|
788
1418
|
'[attr.tabindex]': 'tabIndex',
|
@@ -797,15 +1427,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImpor
|
|
797
1427
|
providers: [
|
798
1428
|
MC_SELECTION_TREE_VALUE_ACCESSOR,
|
799
1429
|
{ provide: MC_TREE_OPTION_PARENT_COMPONENT, useExisting: McTreeSelection },
|
800
|
-
{ provide:
|
1430
|
+
{ provide: McTreeBase, useExisting: McTreeSelection }
|
801
1431
|
]
|
802
1432
|
}]
|
803
|
-
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.IterableDiffers }, { type: i0.ChangeDetectorRef }, { type: i1
|
1433
|
+
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.IterableDiffers }, { type: i0.ChangeDetectorRef }, { type: i1.MultipleMode, decorators: [{
|
804
1434
|
type: Attribute,
|
805
1435
|
args: ['multiple']
|
1436
|
+
}] }, { type: i1$1.Clipboard, decorators: [{
|
1437
|
+
type: Optional
|
806
1438
|
}] }]; }, propDecorators: { nodeOutlet: [{
|
807
1439
|
type: ViewChild,
|
808
|
-
args: [
|
1440
|
+
args: [McTreeNodeOutlet, { static: true }]
|
809
1441
|
}], unorderedOptions: [{
|
810
1442
|
type: ContentChildren,
|
811
1443
|
args: [McTreeOption]
|
@@ -815,6 +1447,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImpor
|
|
815
1447
|
type: Output
|
816
1448
|
}], selectionChange: [{
|
817
1449
|
type: Output
|
1450
|
+
}], onSelectAll: [{
|
1451
|
+
type: Output
|
1452
|
+
}], onCopy: [{
|
1453
|
+
type: Output
|
818
1454
|
}], autoSelect: [{
|
819
1455
|
type: Input
|
820
1456
|
}], noUnselectLast: [{
|
@@ -826,37 +1462,85 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImpor
|
|
826
1462
|
}] } });
|
827
1463
|
|
828
1464
|
const MC_TREE_DIRECTIVES = [
|
829
|
-
|
830
|
-
McTreeOption,
|
1465
|
+
McTreeNodeOutlet,
|
831
1466
|
McTreeNodeDef,
|
1467
|
+
McTreeNode,
|
832
1468
|
McTreeNodePadding,
|
1469
|
+
McTree,
|
1470
|
+
McTreeSelection,
|
1471
|
+
McTreeOption,
|
833
1472
|
McTreeNodeToggleComponent,
|
834
1473
|
McTreeNodeToggleDirective
|
835
1474
|
];
|
836
1475
|
class McTreeModule {
|
837
1476
|
}
|
838
|
-
/** @nocollapse */ McTreeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
839
|
-
/** @nocollapse */ McTreeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.
|
840
|
-
McTreeOption,
|
1477
|
+
/** @nocollapse */ McTreeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McTreeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
1478
|
+
/** @nocollapse */ McTreeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McTreeModule, declarations: [McTreeNodeOutlet,
|
841
1479
|
McTreeNodeDef,
|
1480
|
+
McTreeNode,
|
842
1481
|
McTreeNodePadding,
|
843
|
-
|
844
|
-
|
1482
|
+
McTree,
|
1483
|
+
McTreeSelection,
|
845
1484
|
McTreeOption,
|
1485
|
+
McTreeNodeToggleComponent,
|
1486
|
+
McTreeNodeToggleDirective], imports: [CommonModule, McPseudoCheckboxModule], exports: [McTreeNodeOutlet,
|
846
1487
|
McTreeNodeDef,
|
1488
|
+
McTreeNode,
|
847
1489
|
McTreeNodePadding,
|
1490
|
+
McTree,
|
1491
|
+
McTreeSelection,
|
1492
|
+
McTreeOption,
|
848
1493
|
McTreeNodeToggleComponent,
|
849
1494
|
McTreeNodeToggleDirective] });
|
850
|
-
/** @nocollapse */ McTreeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.
|
851
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
1495
|
+
/** @nocollapse */ McTreeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McTreeModule, imports: [[CommonModule, McPseudoCheckboxModule]] });
|
1496
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McTreeModule, decorators: [{
|
852
1497
|
type: NgModule,
|
853
1498
|
args: [{
|
854
|
-
imports: [CommonModule,
|
1499
|
+
imports: [CommonModule, McPseudoCheckboxModule],
|
855
1500
|
exports: MC_TREE_DIRECTIVES,
|
856
1501
|
declarations: MC_TREE_DIRECTIVES
|
857
1502
|
}]
|
858
1503
|
}] });
|
859
1504
|
|
1505
|
+
/** Nested tree control. Able to expand/collapse a subtree recursively for NestedNode type. */
|
1506
|
+
class NestedTreeControl extends BaseTreeControl {
|
1507
|
+
/** Construct with nested tree function getChildren. */
|
1508
|
+
constructor(getChildren) {
|
1509
|
+
super();
|
1510
|
+
this.getChildren = getChildren;
|
1511
|
+
}
|
1512
|
+
/**
|
1513
|
+
* Expands all dataNodes in the tree.
|
1514
|
+
*
|
1515
|
+
* To make this working, the `dataNodes` variable of the TreeControl must be set to all root level
|
1516
|
+
* data nodes of the tree.
|
1517
|
+
*/
|
1518
|
+
expandAll() {
|
1519
|
+
this.expansionModel.clear();
|
1520
|
+
const allNodes = this.dataNodes.reduce((accumulator, dataNode) => [...accumulator, ...this.getDescendants(dataNode), dataNode], []);
|
1521
|
+
this.expansionModel.select(...allNodes);
|
1522
|
+
}
|
1523
|
+
/** Gets a list of descendant dataNodes of a subtree rooted at given data node recursively. */
|
1524
|
+
getDescendants(dataNode) {
|
1525
|
+
const descendants = [];
|
1526
|
+
this._getDescendants(descendants, dataNode);
|
1527
|
+
return descendants.splice(1);
|
1528
|
+
}
|
1529
|
+
/** A helper function to get descendants recursively. */
|
1530
|
+
// todo нужно придумать другое название и понять в чем отличие между getDescendants и _getDescendants
|
1531
|
+
/* tslint:disable-next-line:naming-convention */
|
1532
|
+
_getDescendants(descendants, dataNode) {
|
1533
|
+
descendants.push(dataNode);
|
1534
|
+
this.getChildren(dataNode)
|
1535
|
+
.pipe(take(1))
|
1536
|
+
.subscribe((children) => {
|
1537
|
+
if (children && children.length > 0) {
|
1538
|
+
children.forEach((child) => this._getDescendants(descendants, child));
|
1539
|
+
}
|
1540
|
+
});
|
1541
|
+
}
|
1542
|
+
}
|
1543
|
+
|
860
1544
|
/**
|
861
1545
|
* Tree flattener to convert a normal type of node to node with children & level information.
|
862
1546
|
* Transform nested nodes of type `T` to flattened nodes of type `F`.
|
@@ -1047,5 +1731,5 @@ class McTreeNestedDataSource extends DataSource {
|
|
1047
1731
|
* Generated bundle index. Do not edit.
|
1048
1732
|
*/
|
1049
1733
|
|
1050
|
-
export { MC_SELECTION_TREE_VALUE_ACCESSOR, MC_TREE_OPTION_PARENT_COMPONENT, McTreeFlatDataSource, McTreeFlattener, McTreeModule, McTreeNavigationChange, McTreeNestedDataSource, McTreeNodeDef, McTreeNodePadding, McTreeNodeToggleComponent, McTreeNodeToggleDirective, McTreeOption, McTreeOptionChange, McTreeSelection, McTreeSelectionChange };
|
1734
|
+
export { BaseTreeControl, FlatTreeControl, MC_SELECTION_TREE_VALUE_ACCESSOR, MC_TREE_OPTION_PARENT_COMPONENT, McTree, McTreeBase, McTreeCopyEvent, McTreeFlatDataSource, McTreeFlattener, McTreeModule, McTreeNavigationChange, McTreeNestedDataSource, McTreeNode, McTreeNodeDef, McTreeNodeOutlet, McTreeNodeOutletContext, McTreeNodePadding, McTreeNodeToggleBase, McTreeNodeToggleBaseDirective, McTreeNodeToggleComponent, McTreeNodeToggleDirective, McTreeNodeToggleMixinBase, McTreeOption, McTreeOptionChange, McTreeSelectAllEvent, McTreeSelection, McTreeSelectionChange, NestedTreeControl, defaultCompareValues, defaultCompareViewValues };
|
1051
1735
|
//# sourceMappingURL=ptsecurity-mosaic-tree.js.map
|