@radix-ng/primitives 0.24.0 → 0.26.0
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/avatar/src/avatar-fallback.directive.d.ts +1 -1
- package/compodoc/documentation.json +14105 -11035
- package/core/index.d.ts +3 -2
- package/core/src/positioning/constants.d.ts +3 -0
- package/core/src/positioning/types.d.ts +42 -0
- package/{popover/src/popover.utils.d.ts → core/src/positioning/utils.d.ts} +4 -4
- package/dialog/src/dialog-trigger.directive.d.ts +12 -0
- package/fesm2022/radix-ng-primitives-accordion.mjs +19 -19
- package/fesm2022/radix-ng-primitives-accordion.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-alert-dialog.mjs +22 -22
- package/fesm2022/radix-ng-primitives-alert-dialog.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-aspect-ratio.mjs +3 -3
- package/fesm2022/radix-ng-primitives-aspect-ratio.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-avatar.mjs +17 -17
- package/fesm2022/radix-ng-primitives-avatar.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-checkbox.mjs +16 -16
- package/fesm2022/radix-ng-primitives-checkbox.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-collapsible.mjs +9 -9
- package/fesm2022/radix-ng-primitives-collapsible.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-context-menu.mjs +34 -34
- package/fesm2022/radix-ng-primitives-context-menu.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-core.mjs +224 -236
- package/fesm2022/radix-ng-primitives-core.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-dialog.mjs +31 -26
- package/fesm2022/radix-ng-primitives-dialog.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-dropdown-menu.mjs +34 -34
- package/fesm2022/radix-ng-primitives-dropdown-menu.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-label.mjs +3 -3
- package/fesm2022/radix-ng-primitives-label.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-menu.mjs +22 -22
- package/fesm2022/radix-ng-primitives-menu.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-menubar.mjs +31 -31
- package/fesm2022/radix-ng-primitives-menubar.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-popover.mjs +75 -277
- package/fesm2022/radix-ng-primitives-popover.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-progress.mjs +10 -10
- package/fesm2022/radix-ng-primitives-progress.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-radio.mjs +12 -12
- package/fesm2022/radix-ng-primitives-radio.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-roving-focus.mjs +6 -6
- package/fesm2022/radix-ng-primitives-roving-focus.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-select.mjs +34 -35
- package/fesm2022/radix-ng-primitives-select.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-separator.mjs +3 -3
- package/fesm2022/radix-ng-primitives-separator.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-slider.mjs +31 -34
- package/fesm2022/radix-ng-primitives-slider.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-switch.mjs +18 -15
- package/fesm2022/radix-ng-primitives-switch.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-tabs.mjs +16 -16
- package/fesm2022/radix-ng-primitives-tabs.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-toggle-group.mjs +9 -9
- package/fesm2022/radix-ng-primitives-toggle-group.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-toggle.mjs +6 -6
- package/fesm2022/radix-ng-primitives-toggle.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-tooltip.mjs +1023 -511
- package/fesm2022/radix-ng-primitives-tooltip.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-visually-hidden.mjs +9 -9
- package/fesm2022/radix-ng-primitives-visually-hidden.mjs.map +1 -1
- package/package.json +3 -57
- package/popover/index.d.ts +0 -1
- package/popover/src/popover-arrow.directive.d.ts +6 -6
- package/popover/src/popover-content.directive.d.ts +9 -8
- package/popover/src/popover-root.directive.d.ts +9 -8
- package/popover/src/popover.types.d.ts +0 -31
- package/popover/src/utils/cdk-event.service.d.ts +1 -0
- package/switch/src/switch-root.directive.d.ts +4 -1
- package/tooltip/README.md +2 -0
- package/tooltip/index.d.ts +9 -6
- package/tooltip/src/tooltip-anchor.directive.d.ts +28 -0
- package/tooltip/src/tooltip-anchor.token.d.ts +3 -0
- package/tooltip/src/tooltip-arrow.directive.d.ts +23 -8
- package/tooltip/src/tooltip-close.directive.d.ts +18 -0
- package/tooltip/src/tooltip-close.token.d.ts +3 -0
- package/tooltip/src/tooltip-content-attributes.component.d.ts +17 -0
- package/tooltip/src/tooltip-content-attributes.token.d.ts +3 -0
- package/tooltip/src/tooltip-content.directive.d.ts +88 -20
- package/tooltip/src/tooltip-root.directive.d.ts +122 -57
- package/tooltip/src/tooltip-root.inject.d.ts +3 -0
- package/tooltip/src/tooltip-trigger.directive.d.ts +11 -11
- package/tooltip/src/tooltip.types.d.ts +16 -16
- package/tooltip/src/utils/cdk-event.service.d.ts +30 -0
- package/tooltip/src/utils/constants.d.ts +1 -0
- package/tooltip/src/utils/types.d.ts +7 -0
- package/core/src/control-value-accessor/index.d.ts +0 -75
- package/core/src/create-inject-context/assert-injector.d.ts +0 -51
- package/core/src/create-inject-context/index.d.ts +0 -68
- package/core/src/types.d.ts +0 -23
- package/esm2022/accordion/index.mjs +0 -40
- package/esm2022/accordion/radix-ng-primitives-accordion.mjs +0 -5
- package/esm2022/accordion/src/accordion-content.directive.mjs +0 -42
- package/esm2022/accordion/src/accordion-header.directive.mjs +0 -23
- package/esm2022/accordion/src/accordion-item.directive.mjs +0 -196
- package/esm2022/accordion/src/accordion-root.directive.mjs +0 -200
- package/esm2022/accordion/src/accordion-trigger.directive.mjs +0 -42
- package/esm2022/alert-dialog/index.mjs +0 -41
- package/esm2022/alert-dialog/radix-ng-primitives-alert-dialog.mjs +0 -5
- package/esm2022/alert-dialog/src/alert-dialog-cancel.directive.mjs +0 -24
- package/esm2022/alert-dialog/src/alert-dialog-content.directive.mjs +0 -34
- package/esm2022/alert-dialog/src/alert-dialog-root.directive.mjs +0 -24
- package/esm2022/alert-dialog/src/alert-dialog-title.directive.mjs +0 -14
- package/esm2022/alert-dialog/src/alert-dialog-trigger.directive.mjs +0 -24
- package/esm2022/alert-dialog/src/alert-dialog.service.mjs +0 -46
- package/esm2022/aspect-ratio/index.mjs +0 -2
- package/esm2022/aspect-ratio/radix-ng-primitives-aspect-ratio.mjs +0 -5
- package/esm2022/aspect-ratio/src/aspect-ratio.directive.mjs +0 -57
- package/esm2022/avatar/index.mjs +0 -31
- package/esm2022/avatar/radix-ng-primitives-avatar.mjs +0 -5
- package/esm2022/avatar/src/avatar-fallback.directive.mjs +0 -67
- package/esm2022/avatar/src/avatar-image.directive.mjs +0 -65
- package/esm2022/avatar/src/avatar-root.directive.mjs +0 -26
- package/esm2022/avatar/src/avatar.config.mjs +0 -17
- package/esm2022/checkbox/index.mjs +0 -36
- package/esm2022/checkbox/radix-ng-primitives-checkbox.mjs +0 -5
- package/esm2022/checkbox/src/checkbox-button.directive.mjs +0 -33
- package/esm2022/checkbox/src/checkbox-indicator.directive.mjs +0 -24
- package/esm2022/checkbox/src/checkbox-input.directive.mjs +0 -44
- package/esm2022/checkbox/src/checkbox.directive.mjs +0 -141
- package/esm2022/checkbox/src/checkbox.token.mjs +0 -6
- package/esm2022/collapsible/index.mjs +0 -4
- package/esm2022/collapsible/radix-ng-primitives-collapsible.mjs +0 -5
- package/esm2022/collapsible/src/collapsible-content.directive.mjs +0 -42
- package/esm2022/collapsible/src/collapsible-content.token.mjs +0 -3
- package/esm2022/collapsible/src/collapsible-root.directive.mjs +0 -127
- package/esm2022/collapsible/src/collapsible-trigger.directive.mjs +0 -49
- package/esm2022/context-menu/index.mjs +0 -65
- package/esm2022/context-menu/radix-ng-primitives-context-menu.mjs +0 -5
- package/esm2022/context-menu/src/context-menu-content.directive.mjs +0 -56
- package/esm2022/context-menu/src/context-menu-item-checkbox.directive.mjs +0 -39
- package/esm2022/context-menu/src/context-menu-item-indicator.directive.mjs +0 -22
- package/esm2022/context-menu/src/context-menu-item-radio-group.directive.mjs +0 -37
- package/esm2022/context-menu/src/context-menu-item-radio.directive.mjs +0 -67
- package/esm2022/context-menu/src/context-menu-item-selectable.mjs +0 -31
- package/esm2022/context-menu/src/context-menu-item.directive.mjs +0 -70
- package/esm2022/context-menu/src/context-menu-label.directive.mjs +0 -14
- package/esm2022/context-menu/src/context-menu-separator.directive.mjs +0 -21
- package/esm2022/context-menu/src/context-menu-trigger.directive.mjs +0 -92
- package/esm2022/core/index.mjs +0 -11
- package/esm2022/core/radix-ng-primitives-core.mjs +0 -5
- package/esm2022/core/src/accessor/provide-value-accessor.mjs +0 -19
- package/esm2022/core/src/auto-focus.directive.mjs +0 -80
- package/esm2022/core/src/control-value-accessor/index.mjs +0 -103
- package/esm2022/core/src/create-inject-context/assert-injector.mjs +0 -15
- package/esm2022/core/src/create-inject-context/index.mjs +0 -116
- package/esm2022/core/src/document.mjs +0 -6
- package/esm2022/core/src/id-generator.mjs +0 -43
- package/esm2022/core/src/inject-ng-control.mjs +0 -17
- package/esm2022/core/src/is-client.mjs +0 -6
- package/esm2022/core/src/is-inside-form.mjs +0 -7
- package/esm2022/core/src/types.mjs +0 -2
- package/esm2022/core/src/window.mjs +0 -15
- package/esm2022/dialog/index.mjs +0 -50
- package/esm2022/dialog/radix-ng-primitives-dialog.mjs +0 -5
- package/esm2022/dialog/src/dialog-close.directive.mjs +0 -25
- package/esm2022/dialog/src/dialog-content.directive.mjs +0 -46
- package/esm2022/dialog/src/dialog-description.directive.mjs +0 -14
- package/esm2022/dialog/src/dialog-dismiss.directive.mjs +0 -25
- package/esm2022/dialog/src/dialog-ref.mjs +0 -46
- package/esm2022/dialog/src/dialog-title.directive.mjs +0 -14
- package/esm2022/dialog/src/dialog-trigger.directive.mjs +0 -54
- package/esm2022/dialog/src/dialog.config.mjs +0 -6
- package/esm2022/dialog/src/dialog.injectors.mjs +0 -10
- package/esm2022/dialog/src/dialog.providers.mjs +0 -26
- package/esm2022/dialog/src/dialog.service.mjs +0 -96
- package/esm2022/dropdown-menu/index.mjs +0 -68
- package/esm2022/dropdown-menu/radix-ng-primitives-dropdown-menu.mjs +0 -5
- package/esm2022/dropdown-menu/src/dropdown-menu-content.directive.mjs +0 -56
- package/esm2022/dropdown-menu/src/dropdown-menu-item-checkbox.directive.mjs +0 -39
- package/esm2022/dropdown-menu/src/dropdown-menu-item-indicator.directive.mjs +0 -22
- package/esm2022/dropdown-menu/src/dropdown-menu-item-radio-group.directive.mjs +0 -37
- package/esm2022/dropdown-menu/src/dropdown-menu-item-radio.directive.mjs +0 -67
- package/esm2022/dropdown-menu/src/dropdown-menu-item-selectable.mjs +0 -31
- package/esm2022/dropdown-menu/src/dropdown-menu-item.directive.mjs +0 -73
- package/esm2022/dropdown-menu/src/dropdown-menu-label.directive.mjs +0 -14
- package/esm2022/dropdown-menu/src/dropdown-menu-separator.directive.mjs +0 -21
- package/esm2022/dropdown-menu/src/dropdown-menu-trigger.directive.mjs +0 -210
- package/esm2022/index.mjs +0 -2
- package/esm2022/label/index.mjs +0 -2
- package/esm2022/label/radix-ng-primitives-label.mjs +0 -5
- package/esm2022/label/src/label.directive.mjs +0 -57
- package/esm2022/menu/index.mjs +0 -45
- package/esm2022/menu/radix-ng-primitives-menu.mjs +0 -5
- package/esm2022/menu/src/menu-content.directive.mjs +0 -17
- package/esm2022/menu/src/menu-directive.mjs +0 -18
- package/esm2022/menu/src/menu-group.directive.mjs +0 -20
- package/esm2022/menu/src/menu-item.directive.mjs +0 -46
- package/esm2022/menu/src/menu-label.directive.mjs +0 -14
- package/esm2022/menu/src/menu-separator.directive.mjs +0 -21
- package/esm2022/menubar/index.mjs +0 -60
- package/esm2022/menubar/radix-ng-primitives-menubar.mjs +0 -5
- package/esm2022/menubar/src/menubar-content.directive.mjs +0 -17
- package/esm2022/menubar/src/menubar-item-checkbox.directive.mjs +0 -34
- package/esm2022/menubar/src/menubar-item-indicator.directive.mjs +0 -17
- package/esm2022/menubar/src/menubar-item-radio.directive.mjs +0 -35
- package/esm2022/menubar/src/menubar-item.directive.mjs +0 -20
- package/esm2022/menubar/src/menubar-radio-group.directive.mjs +0 -17
- package/esm2022/menubar/src/menubar-root.directive.mjs +0 -24
- package/esm2022/menubar/src/menubar-separator.directive.mjs +0 -17
- package/esm2022/menubar/src/menubar-trigger.directive.mjs +0 -45
- package/esm2022/popover/index.mjs +0 -51
- package/esm2022/popover/radix-ng-primitives-popover.mjs +0 -5
- package/esm2022/popover/src/popover-anchor.directive.mjs +0 -75
- package/esm2022/popover/src/popover-anchor.token.mjs +0 -3
- package/esm2022/popover/src/popover-arrow.directive.mjs +0 -117
- package/esm2022/popover/src/popover-arrow.token.mjs +0 -3
- package/esm2022/popover/src/popover-close.directive.mjs +0 -49
- package/esm2022/popover/src/popover-close.token.mjs +0 -3
- package/esm2022/popover/src/popover-content-attributes.component.mjs +0 -70
- package/esm2022/popover/src/popover-content-attributes.token.mjs +0 -3
- package/esm2022/popover/src/popover-content.directive.mjs +0 -270
- package/esm2022/popover/src/popover-root.directive.mjs +0 -320
- package/esm2022/popover/src/popover-root.inject.mjs +0 -7
- package/esm2022/popover/src/popover-trigger.directive.mjs +0 -41
- package/esm2022/popover/src/popover.constants.mjs +0 -90
- package/esm2022/popover/src/popover.types.mjs +0 -31
- package/esm2022/popover/src/popover.utils.mjs +0 -107
- package/esm2022/popover/src/utils/cdk-event.service.mjs +0 -153
- package/esm2022/popover/src/utils/constants.mjs +0 -2
- package/esm2022/popover/src/utils/types.mjs +0 -2
- package/esm2022/progress/index.mjs +0 -25
- package/esm2022/progress/radix-ng-primitives-progress.mjs +0 -5
- package/esm2022/progress/src/progress-indicator.directive.mjs +0 -33
- package/esm2022/progress/src/progress-root.directive.mjs +0 -132
- package/esm2022/radio/index.mjs +0 -5
- package/esm2022/radio/radix-ng-primitives-radio.mjs +0 -5
- package/esm2022/radio/src/radio-indicator.directive.mjs +0 -25
- package/esm2022/radio/src/radio-item-input.directive.mjs +0 -37
- package/esm2022/radio/src/radio-item.directive.mjs +0 -86
- package/esm2022/radio/src/radio-root.directive.mjs +0 -104
- package/esm2022/radio/src/radio-tokens.mjs +0 -3
- package/esm2022/radix-ng-primitives.mjs +0 -5
- package/esm2022/roving-focus/index.mjs +0 -3
- package/esm2022/roving-focus/radix-ng-primitives-roving-focus.mjs +0 -5
- package/esm2022/roving-focus/src/roving-focus-group.directive.mjs +0 -138
- package/esm2022/roving-focus/src/roving-focus-item.directive.mjs +0 -133
- package/esm2022/roving-focus/src/utils.mjs +0 -47
- package/esm2022/select/index.mjs +0 -65
- package/esm2022/select/radix-ng-primitives-select.mjs +0 -5
- package/esm2022/select/src/select-content.directive.mjs +0 -53
- package/esm2022/select/src/select-group.directive.mjs +0 -18
- package/esm2022/select/src/select-icon.directive.mjs +0 -18
- package/esm2022/select/src/select-item-indicator.directive.mjs +0 -23
- package/esm2022/select/src/select-item.directive.mjs +0 -122
- package/esm2022/select/src/select-label.directive.mjs +0 -15
- package/esm2022/select/src/select-separator.directive.mjs +0 -18
- package/esm2022/select/src/select-trigger.directive.mjs +0 -38
- package/esm2022/select/src/select-value.directive.mjs +0 -21
- package/esm2022/select/src/select.component.mjs +0 -234
- package/esm2022/separator/index.mjs +0 -2
- package/esm2022/separator/radix-ng-primitives-separator.mjs +0 -5
- package/esm2022/separator/src/separator.directive.mjs +0 -61
- package/esm2022/slider/index.mjs +0 -28
- package/esm2022/slider/radix-ng-primitives-slider.mjs +0 -5
- package/esm2022/slider/src/slider-horizontal.component.mjs +0 -117
- package/esm2022/slider/src/slider-impl.directive.mjs +0 -89
- package/esm2022/slider/src/slider-orientation-context.service.mjs +0 -27
- package/esm2022/slider/src/slider-range.component.mjs +0 -41
- package/esm2022/slider/src/slider-root.component.mjs +0 -210
- package/esm2022/slider/src/slider-thumb-impl.directive.mjs +0 -106
- package/esm2022/slider/src/slider-thumb.component.mjs +0 -22
- package/esm2022/slider/src/slider-track.component.mjs +0 -27
- package/esm2022/slider/src/slider-vertical.component.mjs +0 -117
- package/esm2022/slider/src/utils.mjs +0 -94
- package/esm2022/switch/index.mjs +0 -30
- package/esm2022/switch/radix-ng-primitives-switch.mjs +0 -5
- package/esm2022/switch/src/switch-input.directive.mjs +0 -44
- package/esm2022/switch/src/switch-root.directive.mjs +0 -145
- package/esm2022/switch/src/switch-thumb.directive.mjs +0 -26
- package/esm2022/tabs/index.mjs +0 -35
- package/esm2022/tabs/radix-ng-primitives-tabs.mjs +0 -5
- package/esm2022/tabs/src/tabs-content.directive.mjs +0 -35
- package/esm2022/tabs/src/tabs-list.directive.mjs +0 -26
- package/esm2022/tabs/src/tabs-root.directive.mjs +0 -57
- package/esm2022/tabs/src/tabs-trigger.directive.mjs +0 -78
- package/esm2022/tabs/src/utils.mjs +0 -7
- package/esm2022/toggle/index.mjs +0 -3
- package/esm2022/toggle/radix-ng-primitives-toggle.mjs +0 -5
- package/esm2022/toggle/src/toggle-visually-hidden-input.directive.mjs +0 -31
- package/esm2022/toggle/src/toggle.directive.mjs +0 -79
- package/esm2022/toggle-group/index.mjs +0 -6
- package/esm2022/toggle-group/radix-ng-primitives-toggle-group.mjs +0 -5
- package/esm2022/toggle-group/src/toggle-group-item.directive.mjs +0 -85
- package/esm2022/toggle-group/src/toggle-group-item.token.mjs +0 -3
- package/esm2022/toggle-group/src/toggle-group-multiple.directive.mjs +0 -185
- package/esm2022/toggle-group/src/toggle-group.directive.mjs +0 -179
- package/esm2022/toggle-group/src/toggle-group.token.mjs +0 -6
- package/esm2022/tooltip/index.mjs +0 -41
- package/esm2022/tooltip/radix-ng-primitives-tooltip.mjs +0 -5
- package/esm2022/tooltip/src/get-content-position.mjs +0 -31
- package/esm2022/tooltip/src/tooltip-arrow.directive.mjs +0 -92
- package/esm2022/tooltip/src/tooltip-arrow.token.mjs +0 -3
- package/esm2022/tooltip/src/tooltip-content-attributes.directive.mjs +0 -24
- package/esm2022/tooltip/src/tooltip-content.directive.mjs +0 -48
- package/esm2022/tooltip/src/tooltip-content.token.mjs +0 -3
- package/esm2022/tooltip/src/tooltip-root.directive.mjs +0 -288
- package/esm2022/tooltip/src/tooltip-trigger.directive.mjs +0 -70
- package/esm2022/tooltip/src/tooltip.config.mjs +0 -18
- package/esm2022/tooltip/src/tooltip.constants.mjs +0 -84
- package/esm2022/tooltip/src/tooltip.types.mjs +0 -14
- package/esm2022/visually-hidden/index.mjs +0 -4
- package/esm2022/visually-hidden/radix-ng-primitives-visually-hidden.mjs +0 -5
- package/esm2022/visually-hidden/src/visually-hidden-input-bubble.directive.mjs +0 -74
- package/esm2022/visually-hidden/src/visually-hidden-input.directive.mjs +0 -74
- package/esm2022/visually-hidden/src/visually-hidden.directive.mjs +0 -42
- package/popover/src/popover.constants.d.ts +0 -8
- package/tooltip/src/get-content-position.d.ts +0 -3
- package/tooltip/src/tooltip-content-attributes.directive.d.ts +0 -8
- package/tooltip/src/tooltip-content.token.d.ts +0 -3
- package/tooltip/src/tooltip.config.d.ts +0 -6
- package/tooltip/src/tooltip.constants.d.ts +0 -9
@@ -1,8 +1,8 @@
|
|
1
1
|
import * as i0 from '@angular/core';
|
2
|
-
import { InjectionToken, inject, TemplateRef, DestroyRef, computed, input, output, effect, untracked, SimpleChange, Directive, ElementRef, NgZone, Renderer2, isDevMode, VERSION, Injectable, makeEnvironmentProviders, signal,
|
2
|
+
import { InjectionToken, inject, TemplateRef, DestroyRef, computed, input, numberAttribute, booleanAttribute, output, effect, untracked, SimpleChange, Directive, ElementRef, NgZone, Renderer2, isDevMode, VERSION, Injectable, makeEnvironmentProviders, signal, contentChild, ViewContainerRef, afterNextRender, assertInInjectionContext, forwardRef, Component, ChangeDetectionStrategy, NgModule } from '@angular/core';
|
3
3
|
import * as i1 from '@angular/cdk/overlay';
|
4
4
|
import { Overlay, CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
|
5
|
-
import {
|
5
|
+
import { RdxPositionSide, RdxPositionAlign, RDX_POSITIONING_DEFAULTS, getContentPosition, getAllPossibleConnectedPositions, injectDocument, injectWindow, getArrowPositionParams, getSideAndAlignFromAllPossibleConnectedPositions } from '@radix-ng/primitives/core';
|
6
6
|
import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
|
7
7
|
import { filter, tap } from 'rxjs';
|
8
8
|
|
@@ -14,19 +14,6 @@ const RdxPopoverCloseToken = new InjectionToken('RdxPopoverCloseToken');
|
|
14
14
|
|
15
15
|
const RdxPopoverContentAttributesToken = new InjectionToken('RdxPopoverContentAttributesToken');
|
16
16
|
|
17
|
-
var RdxPopoverSide;
|
18
|
-
(function (RdxPopoverSide) {
|
19
|
-
RdxPopoverSide["Top"] = "top";
|
20
|
-
RdxPopoverSide["Right"] = "right";
|
21
|
-
RdxPopoverSide["Bottom"] = "bottom";
|
22
|
-
RdxPopoverSide["Left"] = "left";
|
23
|
-
})(RdxPopoverSide || (RdxPopoverSide = {}));
|
24
|
-
var RdxPopoverAlign;
|
25
|
-
(function (RdxPopoverAlign) {
|
26
|
-
RdxPopoverAlign["Start"] = "start";
|
27
|
-
RdxPopoverAlign["Center"] = "center";
|
28
|
-
RdxPopoverAlign["End"] = "end";
|
29
|
-
})(RdxPopoverAlign || (RdxPopoverAlign = {}));
|
30
17
|
var RdxPopoverState;
|
31
18
|
(function (RdxPopoverState) {
|
32
19
|
RdxPopoverState["OPEN"] = "open";
|
@@ -45,200 +32,6 @@ var RdxPopoverAnimationStatus;
|
|
45
32
|
RdxPopoverAnimationStatus["CLOSED_ENDED"] = "closed_ended";
|
46
33
|
})(RdxPopoverAnimationStatus || (RdxPopoverAnimationStatus = {}));
|
47
34
|
|
48
|
-
const POPOVER_POSITIONS = {
|
49
|
-
[RdxPopoverSide.Top]: {
|
50
|
-
[RdxPopoverAlign.Center]: {
|
51
|
-
originX: 'center',
|
52
|
-
originY: 'top',
|
53
|
-
overlayX: 'center',
|
54
|
-
overlayY: 'bottom'
|
55
|
-
},
|
56
|
-
[RdxPopoverAlign.Start]: {
|
57
|
-
originX: 'start',
|
58
|
-
originY: 'top',
|
59
|
-
overlayX: 'start',
|
60
|
-
overlayY: 'bottom'
|
61
|
-
},
|
62
|
-
[RdxPopoverAlign.End]: {
|
63
|
-
originX: 'end',
|
64
|
-
originY: 'top',
|
65
|
-
overlayX: 'end',
|
66
|
-
overlayY: 'bottom'
|
67
|
-
}
|
68
|
-
},
|
69
|
-
[RdxPopoverSide.Right]: {
|
70
|
-
[RdxPopoverAlign.Center]: {
|
71
|
-
originX: 'end',
|
72
|
-
originY: 'center',
|
73
|
-
overlayX: 'start',
|
74
|
-
overlayY: 'center'
|
75
|
-
},
|
76
|
-
[RdxPopoverAlign.Start]: {
|
77
|
-
originX: 'end',
|
78
|
-
originY: 'top',
|
79
|
-
overlayX: 'start',
|
80
|
-
overlayY: 'top'
|
81
|
-
},
|
82
|
-
[RdxPopoverAlign.End]: {
|
83
|
-
originX: 'end',
|
84
|
-
originY: 'bottom',
|
85
|
-
overlayX: 'start',
|
86
|
-
overlayY: 'bottom'
|
87
|
-
}
|
88
|
-
},
|
89
|
-
[RdxPopoverSide.Bottom]: {
|
90
|
-
[RdxPopoverAlign.Center]: {
|
91
|
-
originX: 'center',
|
92
|
-
originY: 'bottom',
|
93
|
-
overlayX: 'center',
|
94
|
-
overlayY: 'top'
|
95
|
-
},
|
96
|
-
[RdxPopoverAlign.Start]: {
|
97
|
-
originX: 'start',
|
98
|
-
originY: 'bottom',
|
99
|
-
overlayX: 'start',
|
100
|
-
overlayY: 'top'
|
101
|
-
},
|
102
|
-
[RdxPopoverAlign.End]: {
|
103
|
-
originX: 'end',
|
104
|
-
originY: 'bottom',
|
105
|
-
overlayX: 'end',
|
106
|
-
overlayY: 'top'
|
107
|
-
}
|
108
|
-
},
|
109
|
-
[RdxPopoverSide.Left]: {
|
110
|
-
[RdxPopoverAlign.Center]: {
|
111
|
-
originX: 'start',
|
112
|
-
originY: 'center',
|
113
|
-
overlayX: 'end',
|
114
|
-
overlayY: 'center'
|
115
|
-
},
|
116
|
-
[RdxPopoverAlign.Start]: {
|
117
|
-
originX: 'start',
|
118
|
-
originY: 'top',
|
119
|
-
overlayX: 'end',
|
120
|
-
overlayY: 'top'
|
121
|
-
},
|
122
|
-
[RdxPopoverAlign.End]: {
|
123
|
-
originX: 'start',
|
124
|
-
originY: 'bottom',
|
125
|
-
overlayX: 'end',
|
126
|
-
overlayY: 'bottom'
|
127
|
-
}
|
128
|
-
}
|
129
|
-
};
|
130
|
-
const DEFAULTS = {
|
131
|
-
offsets: {
|
132
|
-
side: 10,
|
133
|
-
align: 0
|
134
|
-
}
|
135
|
-
};
|
136
|
-
|
137
|
-
let allPossibleConnectedPositions;
|
138
|
-
function getAllPossibleConnectedPositions() {
|
139
|
-
if (!allPossibleConnectedPositions) {
|
140
|
-
allPossibleConnectedPositions = new Map();
|
141
|
-
}
|
142
|
-
if (allPossibleConnectedPositions.size < 1) {
|
143
|
-
Object.keys(POPOVER_POSITIONS).forEach((side) => {
|
144
|
-
Object.keys(POPOVER_POSITIONS[side] ?? {}).forEach((align) => {
|
145
|
-
allPossibleConnectedPositions.set(`${side}|${align}`, POPOVER_POSITIONS[side][align]);
|
146
|
-
});
|
147
|
-
});
|
148
|
-
}
|
149
|
-
return allPossibleConnectedPositions;
|
150
|
-
}
|
151
|
-
function getSideAndAlignFromAllPossibleConnectedPositions(position) {
|
152
|
-
const allPossibleConnectedPositions = getAllPossibleConnectedPositions();
|
153
|
-
let sideAndAlign;
|
154
|
-
allPossibleConnectedPositions.forEach((value, key) => {
|
155
|
-
if (position.originX === value.originX &&
|
156
|
-
position.originY === value.originY &&
|
157
|
-
position.overlayX === value.overlayX &&
|
158
|
-
position.overlayY === value.overlayY) {
|
159
|
-
const sideAndAlignArray = key.split('|');
|
160
|
-
sideAndAlign = {
|
161
|
-
side: sideAndAlignArray[0],
|
162
|
-
align: sideAndAlignArray[1]
|
163
|
-
};
|
164
|
-
}
|
165
|
-
});
|
166
|
-
if (!sideAndAlign) {
|
167
|
-
throw Error(`[RdxPopover] cannot infer both side and align from the given position (${JSON.stringify(position)})`);
|
168
|
-
}
|
169
|
-
return sideAndAlign;
|
170
|
-
}
|
171
|
-
function getContentPosition(sideAndAlignWithOffsets) {
|
172
|
-
const { side, align, sideOffset, alignOffset } = sideAndAlignWithOffsets;
|
173
|
-
const position = {
|
174
|
-
...(POPOVER_POSITIONS[side]?.[align] ?? POPOVER_POSITIONS[RdxPopoverSide.Top][RdxPopoverAlign.Center])
|
175
|
-
};
|
176
|
-
if (sideOffset || alignOffset) {
|
177
|
-
if ([RdxPopoverSide.Top, RdxPopoverSide.Bottom].includes(side)) {
|
178
|
-
if (sideOffset) {
|
179
|
-
position.offsetY = side === RdxPopoverSide.Top ? -sideOffset : sideOffset;
|
180
|
-
}
|
181
|
-
if (alignOffset) {
|
182
|
-
position.offsetX = alignOffset;
|
183
|
-
}
|
184
|
-
}
|
185
|
-
else {
|
186
|
-
if (sideOffset) {
|
187
|
-
position.offsetX = side === RdxPopoverSide.Left ? -sideOffset : sideOffset;
|
188
|
-
}
|
189
|
-
if (alignOffset) {
|
190
|
-
position.offsetY = alignOffset;
|
191
|
-
}
|
192
|
-
}
|
193
|
-
}
|
194
|
-
return position;
|
195
|
-
}
|
196
|
-
function getArrowPositionParams(sideAndAlign, arrowWidthAndHeight, triggerWidthAndHeight) {
|
197
|
-
const posParams = {
|
198
|
-
top: '',
|
199
|
-
left: '',
|
200
|
-
transform: ''
|
201
|
-
};
|
202
|
-
if ([RdxPopoverSide.Top, RdxPopoverSide.Bottom].includes(sideAndAlign.side)) {
|
203
|
-
if (sideAndAlign.side === RdxPopoverSide.Top) {
|
204
|
-
posParams.top = '100%';
|
205
|
-
}
|
206
|
-
else {
|
207
|
-
posParams.top = `-${arrowWidthAndHeight.height}px`;
|
208
|
-
posParams.transform = `rotate(180deg)`;
|
209
|
-
}
|
210
|
-
if (sideAndAlign.align === RdxPopoverAlign.Start) {
|
211
|
-
posParams.left = `${(triggerWidthAndHeight.width - arrowWidthAndHeight.width) / 2}px`;
|
212
|
-
}
|
213
|
-
else if (sideAndAlign.align === RdxPopoverAlign.Center) {
|
214
|
-
posParams.left = `calc(50% - ${arrowWidthAndHeight.width / 2}px)`;
|
215
|
-
}
|
216
|
-
else if (sideAndAlign.align === RdxPopoverAlign.End) {
|
217
|
-
posParams.left = `calc(100% - ${(triggerWidthAndHeight.width + arrowWidthAndHeight.width) / 2}px)`;
|
218
|
-
}
|
219
|
-
}
|
220
|
-
else if ([RdxPopoverSide.Left, RdxPopoverSide.Right].includes(sideAndAlign.side)) {
|
221
|
-
if (sideAndAlign.side === RdxPopoverSide.Left) {
|
222
|
-
posParams.left = `100%`;
|
223
|
-
posParams.transform = `rotate(-90deg) translate(0, -50%)`;
|
224
|
-
}
|
225
|
-
else {
|
226
|
-
posParams.left = `-${arrowWidthAndHeight.width}px`;
|
227
|
-
posParams.transform = `rotate(90deg) translate(0, -50%)`;
|
228
|
-
}
|
229
|
-
if (sideAndAlign.align === RdxPopoverAlign.Start) {
|
230
|
-
posParams.top = `${(triggerWidthAndHeight.height - arrowWidthAndHeight.height) / 2}px`;
|
231
|
-
}
|
232
|
-
else if (sideAndAlign.align === RdxPopoverAlign.Center) {
|
233
|
-
posParams.top = `calc(50% - ${arrowWidthAndHeight.height / 2}px)`;
|
234
|
-
}
|
235
|
-
else if (sideAndAlign.align === RdxPopoverAlign.End) {
|
236
|
-
posParams.top = `calc(100% - ${(triggerWidthAndHeight.height + arrowWidthAndHeight.height) / 2}px)`;
|
237
|
-
}
|
238
|
-
}
|
239
|
-
return posParams;
|
240
|
-
}
|
241
|
-
|
242
35
|
class RdxPopoverContentDirective {
|
243
36
|
constructor() {
|
244
37
|
/** @ignore */
|
@@ -257,31 +50,35 @@ class RdxPopoverContentDirective {
|
|
257
50
|
* @description The preferred side of the trigger to render against when open. Will be reversed when collisions occur and avoidCollisions is enabled.
|
258
51
|
* @default top
|
259
52
|
*/
|
260
|
-
this.side = input(
|
53
|
+
this.side = input(RdxPositionSide.Top);
|
261
54
|
/**
|
262
55
|
* @description The distance in pixels from the trigger.
|
263
56
|
* @default undefined
|
264
57
|
*/
|
265
|
-
this.sideOffset = input(
|
58
|
+
this.sideOffset = input(NaN, {
|
59
|
+
transform: numberAttribute
|
60
|
+
});
|
266
61
|
/**
|
267
62
|
* @description The preferred alignment against the trigger. May change when collisions occur.
|
268
63
|
* @default center
|
269
64
|
*/
|
270
|
-
this.align = input(
|
65
|
+
this.align = input(RdxPositionAlign.Center);
|
271
66
|
/**
|
272
67
|
* @description An offset in pixels from the "start" or "end" alignment options.
|
273
68
|
* @default undefined
|
274
69
|
*/
|
275
|
-
this.alignOffset = input(
|
70
|
+
this.alignOffset = input(NaN, {
|
71
|
+
transform: numberAttribute
|
72
|
+
});
|
276
73
|
/**
|
277
74
|
* @description Whether to add some alternate positions of the content.
|
278
75
|
* @default false
|
279
76
|
*/
|
280
|
-
this.alternatePositionsDisabled = input(false);
|
77
|
+
this.alternatePositionsDisabled = input(false, { transform: booleanAttribute });
|
281
78
|
/** @description Whether to prevent `onOverlayEscapeKeyDown` handler from calling. */
|
282
|
-
this.onOverlayEscapeKeyDownDisabled = input(false);
|
79
|
+
this.onOverlayEscapeKeyDownDisabled = input(false, { transform: booleanAttribute });
|
283
80
|
/** @description Whether to prevent `onOverlayOutsideClick` handler from calling. */
|
284
|
-
this.onOverlayOutsideClickDisabled = input(false);
|
81
|
+
this.onOverlayOutsideClickDisabled = input(false, { transform: booleanAttribute });
|
285
82
|
/**
|
286
83
|
* @description Event handler called when the escape key is down.
|
287
84
|
* It can be prevented by setting `onOverlayEscapeKeyDownDisabled` input to `true`.
|
@@ -428,10 +225,12 @@ class RdxPopoverContentDirective {
|
|
428
225
|
}
|
429
226
|
/** @ignore */
|
430
227
|
computePositions() {
|
431
|
-
const
|
228
|
+
const arrowHeight = this.popoverRoot.popoverArrowDirective()?.height() ?? 0;
|
432
229
|
const offsets = {
|
433
|
-
sideOffset: this.sideOffset()
|
434
|
-
|
230
|
+
sideOffset: isNaN(this.sideOffset())
|
231
|
+
? arrowHeight || RDX_POSITIONING_DEFAULTS.offsets.side
|
232
|
+
: this.sideOffset(),
|
233
|
+
alignOffset: isNaN(this.alignOffset()) ? RDX_POSITIONING_DEFAULTS.offsets.align : this.alignOffset()
|
435
234
|
};
|
436
235
|
const basePosition = getContentPosition({
|
437
236
|
side: this.side(),
|
@@ -485,14 +284,13 @@ class RdxPopoverContentDirective {
|
|
485
284
|
[input]: new SimpleChange(previousValue, currentValue, firstChange)
|
486
285
|
});
|
487
286
|
}
|
488
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
489
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "
|
287
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RdxPopoverContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
288
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.5", type: RdxPopoverContentDirective, isStandalone: true, selector: "[rdxPopoverContent]", inputs: { side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, sideOffset: { classPropertyName: "sideOffset", publicName: "sideOffset", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, alignOffset: { classPropertyName: "alignOffset", publicName: "alignOffset", isSignal: true, isRequired: false, transformFunction: null }, alternatePositionsDisabled: { classPropertyName: "alternatePositionsDisabled", publicName: "alternatePositionsDisabled", isSignal: true, isRequired: false, transformFunction: null }, onOverlayEscapeKeyDownDisabled: { classPropertyName: "onOverlayEscapeKeyDownDisabled", publicName: "onOverlayEscapeKeyDownDisabled", isSignal: true, isRequired: false, transformFunction: null }, onOverlayOutsideClickDisabled: { classPropertyName: "onOverlayOutsideClickDisabled", publicName: "onOverlayOutsideClickDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onOverlayEscapeKeyDown: "onOverlayEscapeKeyDown", onOverlayOutsideClick: "onOverlayOutsideClick", onOpen: "onOpen", onClosed: "onClosed" }, hostDirectives: [{ directive: i1.CdkConnectedOverlay }], ngImport: i0 }); }
|
490
289
|
}
|
491
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
290
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RdxPopoverContentDirective, decorators: [{
|
492
291
|
type: Directive,
|
493
292
|
args: [{
|
494
293
|
selector: '[rdxPopoverContent]',
|
495
|
-
standalone: true,
|
496
294
|
hostDirectives: [
|
497
295
|
CdkConnectedOverlay
|
498
296
|
]
|
@@ -514,14 +312,13 @@ class RdxPopoverTriggerDirective {
|
|
514
312
|
click() {
|
515
313
|
this.popoverRoot.handleToggle();
|
516
314
|
}
|
517
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
518
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
315
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RdxPopoverTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
316
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.5", type: RdxPopoverTriggerDirective, isStandalone: true, selector: "[rdxPopoverTrigger]", host: { attributes: { "type": "button" }, listeners: { "click": "click()" }, properties: { "attr.id": "name()", "attr.aria-haspopup": "\"dialog\"", "attr.aria-expanded": "popoverRoot.isOpen()", "attr.aria-controls": "popoverRoot.popoverContentDirective().name()", "attr.data-state": "popoverRoot.state()" } }, hostDirectives: [{ directive: i1.CdkOverlayOrigin }], ngImport: i0 }); }
|
519
317
|
}
|
520
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
318
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RdxPopoverTriggerDirective, decorators: [{
|
521
319
|
type: Directive,
|
522
320
|
args: [{
|
523
321
|
selector: '[rdxPopoverTrigger]',
|
524
|
-
standalone: true,
|
525
322
|
hostDirectives: [CdkOverlayOrigin],
|
526
323
|
host: {
|
527
324
|
type: 'button',
|
@@ -543,11 +340,12 @@ function eventTypeAsPrimitiveConfigKey(eventType) {
|
|
543
340
|
class RdxCdkEventService {
|
544
341
|
#clickDomRootEventCallbacks;
|
545
342
|
constructor() {
|
546
|
-
this.document =
|
343
|
+
this.document = injectDocument();
|
547
344
|
this.destroyRef = inject(DestroyRef);
|
548
345
|
this.ngZone = inject(NgZone);
|
549
346
|
this.renderer2 = inject(Renderer2);
|
550
|
-
this.
|
347
|
+
this.window = injectWindow();
|
348
|
+
this.onDestroyCallbacks = new Set([() => deleteRdxCdkEventServiceWindowKey(this.window)]);
|
551
349
|
this.#clickDomRootEventCallbacks = new Set();
|
552
350
|
this.#listenToClickDomRootEvent();
|
553
351
|
this.#registerOnDestroyCallbacks();
|
@@ -655,21 +453,22 @@ class RdxCdkEventService {
|
|
655
453
|
}
|
656
454
|
this.onDestroyCallbacks.add(destroyClickDomRootEventListener);
|
657
455
|
}
|
658
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
659
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
456
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RdxCdkEventService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
457
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RdxCdkEventService }); }
|
660
458
|
}
|
661
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
459
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RdxCdkEventService, decorators: [{
|
662
460
|
type: Injectable
|
663
461
|
}], ctorParameters: () => [] });
|
664
462
|
const RdxCdkEventServiceToken = new InjectionToken('RdxCdkEventServiceToken');
|
665
463
|
const existsErrorMessage = 'RdxCdkEventService should be provided only once!';
|
666
|
-
const deleteRdxCdkEventServiceWindowKey = () => {
|
464
|
+
const deleteRdxCdkEventServiceWindowKey = (window) => {
|
667
465
|
delete window[RdxCdkEventServiceWindowKey];
|
668
466
|
};
|
669
467
|
const getProvider = (throwWhenExists = true) => ({
|
670
468
|
provide: RdxCdkEventServiceToken,
|
671
469
|
useFactory: () => {
|
672
470
|
isDevMode() && console.log('providing RdxCdkEventService...');
|
471
|
+
const window = injectWindow();
|
673
472
|
if (window[RdxCdkEventServiceWindowKey]) {
|
674
473
|
if (throwWhenExists) {
|
675
474
|
throw Error(existsErrorMessage);
|
@@ -702,17 +501,17 @@ class RdxPopoverRootDirective {
|
|
702
501
|
* @description The open state of the popover when it is initially rendered. Use when you do not need to control its open state.
|
703
502
|
* @default false
|
704
503
|
*/
|
705
|
-
this.defaultOpen = input(false);
|
504
|
+
this.defaultOpen = input(false, { transform: booleanAttribute });
|
706
505
|
/**
|
707
506
|
* @description The controlled state of the popover. `open` input take precedence of `defaultOpen` input.
|
708
507
|
* @default undefined
|
709
508
|
*/
|
710
|
-
this.open = input(void 0);
|
509
|
+
this.open = input(void 0, { transform: booleanAttribute });
|
711
510
|
/**
|
712
511
|
* @description Whether to control the state of the popover from external. Use in conjunction with `open` input.
|
713
512
|
* @default undefined
|
714
513
|
*/
|
715
|
-
this.externalControl = input(void 0);
|
514
|
+
this.externalControl = input(void 0, { transform: booleanAttribute });
|
716
515
|
/**
|
717
516
|
* @description Whether to take into account CSS opening/closing animations.
|
718
517
|
* @default false
|
@@ -984,14 +783,13 @@ class RdxPopoverRootDirective {
|
|
984
783
|
});
|
985
784
|
});
|
986
785
|
}
|
987
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
988
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "
|
786
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RdxPopoverRootDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
787
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "19.0.5", type: RdxPopoverRootDirective, isStandalone: true, selector: "[rdxPopoverRoot]", inputs: { anchor: { classPropertyName: "anchor", publicName: "anchor", isSignal: true, isRequired: false, transformFunction: null }, defaultOpen: { classPropertyName: "defaultOpen", publicName: "defaultOpen", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, externalControl: { classPropertyName: "externalControl", publicName: "externalControl", isSignal: true, isRequired: false, transformFunction: null }, cssAnimation: { classPropertyName: "cssAnimation", publicName: "cssAnimation", isSignal: true, isRequired: false, transformFunction: null }, cssOpeningAnimation: { classPropertyName: "cssOpeningAnimation", publicName: "cssOpeningAnimation", isSignal: true, isRequired: false, transformFunction: null }, cssClosingAnimation: { classPropertyName: "cssClosingAnimation", publicName: "cssClosingAnimation", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "popoverContentDirective", first: true, predicate: RdxPopoverContentDirective, descendants: true, isSignal: true }, { propertyName: "popoverTriggerDirective", first: true, predicate: RdxPopoverTriggerDirective, descendants: true, isSignal: true }, { propertyName: "popoverArrowDirective", first: true, predicate: RdxPopoverArrowToken, descendants: true, isSignal: true }, { propertyName: "popoverCloseDirective", first: true, predicate: RdxPopoverCloseToken, descendants: true, isSignal: true }, { propertyName: "popoverContentAttributesComponent", first: true, predicate: RdxPopoverContentAttributesToken, descendants: true, isSignal: true }, { propertyName: "internalPopoverAnchorDirective", first: true, predicate: RdxPopoverAnchorToken, descendants: true, isSignal: true }], exportAs: ["rdxPopoverRoot"], ngImport: i0 }); }
|
989
788
|
}
|
990
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
789
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RdxPopoverRootDirective, decorators: [{
|
991
790
|
type: Directive,
|
992
791
|
args: [{
|
993
792
|
selector: '[rdxPopoverRoot]',
|
994
|
-
standalone: true,
|
995
793
|
exportAs: 'rdxPopoverRoot'
|
996
794
|
}]
|
997
795
|
}], ctorParameters: () => [] });
|
@@ -1014,7 +812,7 @@ class RdxPopoverAnchorDirective {
|
|
1014
812
|
/** @ignore */
|
1015
813
|
this.overlayOrigin = inject(CdkOverlayOrigin);
|
1016
814
|
/** @ignore */
|
1017
|
-
this.document =
|
815
|
+
this.document = injectDocument();
|
1018
816
|
/** @ignore */
|
1019
817
|
this.name = computed(() => `rdx-popover-external-anchor-${this.popoverRoot?.uniqueId()}`);
|
1020
818
|
}
|
@@ -1039,19 +837,18 @@ class RdxPopoverAnchorDirective {
|
|
1039
837
|
});
|
1040
838
|
this.popoverRoot?.popoverTriggerDirective().elementRef.nativeElement.dispatchEvent(clickEvent);
|
1041
839
|
}
|
1042
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
1043
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
840
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RdxPopoverAnchorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
841
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.5", type: RdxPopoverAnchorDirective, isStandalone: true, selector: "[rdxPopoverAnchor]", host: { attributes: { "type": "button" }, listeners: { "click": "click()" }, properties: { "attr.id": "name()", "attr.aria-haspopup": "\"dialog\"" } }, providers: [
|
1044
842
|
{
|
1045
843
|
provide: RdxPopoverAnchorToken,
|
1046
844
|
useExisting: forwardRef(() => RdxPopoverAnchorDirective)
|
1047
845
|
}
|
1048
846
|
], exportAs: ["rdxPopoverAnchor"], hostDirectives: [{ directive: i1.CdkOverlayOrigin }], ngImport: i0 }); }
|
1049
847
|
}
|
1050
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
848
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RdxPopoverAnchorDirective, decorators: [{
|
1051
849
|
type: Directive,
|
1052
850
|
args: [{
|
1053
851
|
selector: '[rdxPopoverAnchor]',
|
1054
|
-
standalone: true,
|
1055
852
|
exportAs: 'rdxPopoverAnchor',
|
1056
853
|
hostDirectives: [CdkOverlayOrigin],
|
1057
854
|
host: {
|
@@ -1081,12 +878,12 @@ class RdxPopoverArrowDirective {
|
|
1081
878
|
* @description The width of the arrow in pixels.
|
1082
879
|
* @default 10
|
1083
880
|
*/
|
1084
|
-
this.width = input(
|
881
|
+
this.width = input(RDX_POSITIONING_DEFAULTS.arrow.width, { transform: numberAttribute });
|
1085
882
|
/**
|
1086
883
|
* @description The height of the arrow in pixels.
|
1087
884
|
* @default 5
|
1088
885
|
*/
|
1089
|
-
this.height = input(
|
886
|
+
this.height = input(RDX_POSITIONING_DEFAULTS.arrow.height, { transform: numberAttribute });
|
1090
887
|
/** @ignore */
|
1091
888
|
this.arrowSvgElement = computed(() => {
|
1092
889
|
const width = this.width();
|
@@ -1105,30 +902,33 @@ class RdxPopoverArrowDirective {
|
|
1105
902
|
this.currentArrowSvgElement = signal(void 0);
|
1106
903
|
/** @ignore */
|
1107
904
|
this.position = toSignal(this.popoverRoot.popoverContentDirective().positionChange());
|
905
|
+
afterNextRender({
|
906
|
+
write: () => {
|
907
|
+
if (this.elementRef.nativeElement.parentElement) {
|
908
|
+
this.renderer.setStyle(this.elementRef.nativeElement.parentElement, 'position', 'relative');
|
909
|
+
}
|
910
|
+
this.renderer.setStyle(this.elementRef.nativeElement, 'position', 'absolute');
|
911
|
+
this.renderer.setStyle(this.elementRef.nativeElement, 'boxSizing', '');
|
912
|
+
this.renderer.setStyle(this.elementRef.nativeElement, 'fontSize', '0px');
|
913
|
+
}
|
914
|
+
});
|
1108
915
|
this.onArrowSvgElementChangeEffect();
|
1109
|
-
this.
|
916
|
+
this.onContentPositionAndArrowDimensionsChangeEffect();
|
1110
917
|
}
|
1111
918
|
/** @ignore */
|
1112
|
-
ngAfterViewInit() {
|
1113
|
-
if (this.elementRef.nativeElement.parentElement) {
|
1114
|
-
this.renderer.setStyle(this.elementRef.nativeElement.parentElement, 'position', 'relative');
|
1115
|
-
}
|
1116
|
-
this.renderer.setStyle(this.elementRef.nativeElement, 'position', 'absolute');
|
1117
|
-
this.renderer.setStyle(this.elementRef.nativeElement, 'boxSizing', '');
|
1118
|
-
this.renderer.setStyle(this.elementRef.nativeElement, 'fontSize', '0px');
|
1119
|
-
}
|
1120
919
|
setAnchorOrTriggerRect() {
|
1121
920
|
this.anchorOrTriggerRect = (this.popoverRoot.popoverAnchorDirective() ?? this.popoverRoot.popoverTriggerDirective()).elementRef.nativeElement.getBoundingClientRect();
|
1122
921
|
}
|
1123
922
|
/** @ignore */
|
1124
|
-
setPosition(position) {
|
923
|
+
setPosition(position, arrowDimensions) {
|
1125
924
|
this.setAnchorOrTriggerRect();
|
1126
|
-
const posParams = getArrowPositionParams(getSideAndAlignFromAllPossibleConnectedPositions(position.connectionPair), { width:
|
925
|
+
const posParams = getArrowPositionParams(getSideAndAlignFromAllPossibleConnectedPositions(position.connectionPair), { width: arrowDimensions.width, height: arrowDimensions.height }, { width: this.anchorOrTriggerRect.width, height: this.anchorOrTriggerRect.height });
|
1127
926
|
this.renderer.setStyle(this.elementRef.nativeElement, 'top', posParams.top);
|
1128
927
|
this.renderer.setStyle(this.elementRef.nativeElement, 'bottom', '');
|
1129
928
|
this.renderer.setStyle(this.elementRef.nativeElement, 'left', posParams.left);
|
1130
929
|
this.renderer.setStyle(this.elementRef.nativeElement, 'right', '');
|
1131
930
|
this.renderer.setStyle(this.elementRef.nativeElement, 'transform', posParams.transform);
|
931
|
+
this.renderer.setStyle(this.elementRef.nativeElement, 'transformOrigin', posParams.transformOrigin);
|
1132
932
|
}
|
1133
933
|
/** @ignore */
|
1134
934
|
onArrowSvgElementChangeEffect() {
|
@@ -1147,30 +947,30 @@ class RdxPopoverArrowDirective {
|
|
1147
947
|
});
|
1148
948
|
}
|
1149
949
|
/** @ignore */
|
1150
|
-
|
950
|
+
onContentPositionAndArrowDimensionsChangeEffect() {
|
1151
951
|
effect(() => {
|
1152
952
|
const position = this.position();
|
953
|
+
const arrowDimensions = { width: this.width(), height: this.height() };
|
1153
954
|
untracked(() => {
|
1154
955
|
if (!position) {
|
1155
956
|
return;
|
1156
957
|
}
|
1157
|
-
this.setPosition(position);
|
958
|
+
this.setPosition(position, arrowDimensions);
|
1158
959
|
});
|
1159
960
|
});
|
1160
961
|
}
|
1161
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
1162
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "
|
962
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RdxPopoverArrowDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
963
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.5", type: RdxPopoverArrowDirective, isStandalone: true, selector: "[rdxPopoverArrow]", inputs: { width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
|
1163
964
|
{
|
1164
965
|
provide: RdxPopoverArrowToken,
|
1165
966
|
useExisting: forwardRef(() => RdxPopoverArrowDirective)
|
1166
967
|
}
|
1167
968
|
], ngImport: i0 }); }
|
1168
969
|
}
|
1169
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
970
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RdxPopoverArrowDirective, decorators: [{
|
1170
971
|
type: Directive,
|
1171
972
|
args: [{
|
1172
973
|
selector: '[rdxPopoverArrow]',
|
1173
|
-
standalone: true,
|
1174
974
|
providers: [
|
1175
975
|
{
|
1176
976
|
provide: RdxPopoverArrowToken,
|
@@ -1199,19 +999,18 @@ class RdxPopoverCloseDirective {
|
|
1199
999
|
});
|
1200
1000
|
});
|
1201
1001
|
}
|
1202
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
1203
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
1002
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RdxPopoverCloseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
1003
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.5", type: RdxPopoverCloseDirective, isStandalone: true, selector: "[rdxPopoverClose]", host: { attributes: { "type": "button" }, listeners: { "click": "popoverRoot.handleClose()" } }, providers: [
|
1204
1004
|
{
|
1205
1005
|
provide: RdxPopoverCloseToken,
|
1206
1006
|
useExisting: forwardRef(() => RdxPopoverCloseDirective)
|
1207
1007
|
}
|
1208
1008
|
], ngImport: i0 }); }
|
1209
1009
|
}
|
1210
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
1010
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RdxPopoverCloseDirective, decorators: [{
|
1211
1011
|
type: Directive,
|
1212
1012
|
args: [{
|
1213
1013
|
selector: '[rdxPopoverClose]',
|
1214
|
-
standalone: true,
|
1215
1014
|
host: {
|
1216
1015
|
type: 'button',
|
1217
1016
|
'(click)': 'popoverRoot.handleClose()'
|
@@ -1252,8 +1051,8 @@ class RdxPopoverContentAttributesComponent {
|
|
1252
1051
|
((this.popoverRoot.cssOpeningAnimation() && this.popoverRoot.state() === RdxPopoverState.OPEN) ||
|
1253
1052
|
(this.popoverRoot.cssClosingAnimation() && this.popoverRoot.state() === RdxPopoverState.CLOSED)));
|
1254
1053
|
}
|
1255
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
1256
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
1054
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RdxPopoverContentAttributesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
1055
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: RdxPopoverContentAttributesComponent, isStandalone: true, selector: "[rdxPopoverContentAttributes]", host: { listeners: { "animationstart": "onAnimationStart($event)", "animationend": "onAnimationEnd($event)" }, properties: { "attr.role": "\"dialog\"", "attr.id": "name()", "attr.data-state": "popoverRoot.state()", "attr.data-side": "popoverRoot.popoverContentDirective().side()", "attr.data-align": "popoverRoot.popoverContentDirective().align()", "style": "disableAnimation() ? {animation: \"none !important\"} : null" } }, providers: [
|
1257
1056
|
{
|
1258
1057
|
provide: RdxPopoverContentAttributesToken,
|
1259
1058
|
useExisting: forwardRef(() => RdxPopoverContentAttributesComponent)
|
@@ -1262,11 +1061,10 @@ class RdxPopoverContentAttributesComponent {
|
|
1262
1061
|
<ng-content />
|
1263
1062
|
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
1264
1063
|
}
|
1265
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
1064
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RdxPopoverContentAttributesComponent, decorators: [{
|
1266
1065
|
type: Component,
|
1267
1066
|
args: [{
|
1268
1067
|
selector: '[rdxPopoverContentAttributes]',
|
1269
|
-
standalone: true,
|
1270
1068
|
template: `
|
1271
1069
|
<ng-content />
|
1272
1070
|
`,
|
@@ -1300,8 +1098,8 @@ const _imports = [
|
|
1300
1098
|
RdxPopoverContentAttributesComponent
|
1301
1099
|
];
|
1302
1100
|
class RdxPopoverModule {
|
1303
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
1304
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
1101
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RdxPopoverModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
1102
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.5", ngImport: i0, type: RdxPopoverModule, imports: [RdxPopoverArrowDirective,
|
1305
1103
|
RdxPopoverCloseDirective,
|
1306
1104
|
RdxPopoverContentDirective,
|
1307
1105
|
RdxPopoverTriggerDirective,
|
@@ -1314,9 +1112,9 @@ class RdxPopoverModule {
|
|
1314
1112
|
RdxPopoverRootDirective,
|
1315
1113
|
RdxPopoverAnchorDirective,
|
1316
1114
|
RdxPopoverContentAttributesComponent] }); }
|
1317
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
1115
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RdxPopoverModule }); }
|
1318
1116
|
}
|
1319
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
1117
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RdxPopoverModule, decorators: [{
|
1320
1118
|
type: NgModule,
|
1321
1119
|
args: [{
|
1322
1120
|
imports: [..._imports],
|
@@ -1328,5 +1126,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImpo
|
|
1328
1126
|
* Generated bundle index. Do not edit.
|
1329
1127
|
*/
|
1330
1128
|
|
1331
|
-
export {
|
1129
|
+
export { RdxPopoverAnchorDirective, RdxPopoverArrowDirective, RdxPopoverCloseDirective, RdxPopoverContentAttributesComponent, RdxPopoverContentDirective, RdxPopoverModule, RdxPopoverRootDirective, RdxPopoverTriggerDirective };
|
1332
1130
|
//# sourceMappingURL=radix-ng-primitives-popover.mjs.map
|