@i-cell/ids-angular 0.1.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/README.md +24 -0
- package/accordion/accordion-animations.d.ts +1 -0
- package/accordion/accordion-defaults.d.ts +18 -0
- package/accordion/accordion-item/accordion-item.component.d.ts +27 -0
- package/accordion/accordion.component.d.ts +29 -0
- package/accordion/index.d.ts +5 -0
- package/accordion/public-api.d.ts +5 -0
- package/accordion/types/accordion-appearance.type.d.ts +5 -0
- package/avatar/avatar-defaults.d.ts +12 -0
- package/avatar/avatar-image.directive.d.ts +5 -0
- package/avatar/avatar.component.d.ts +28 -0
- package/avatar/index.d.ts +5 -0
- package/avatar/public-api.d.ts +6 -0
- package/avatar/tokens/avatar-parent.d.ts +6 -0
- package/avatar/types/avatar-type.type.d.ts +6 -0
- package/avatar/types/avatar-variant.type.d.ts +8 -0
- package/button/button-defaults.d.ts +11 -0
- package/button/button-group-defaults.d.ts +7 -0
- package/button/button-group.component.d.ts +11 -0
- package/button/button.component.d.ts +23 -0
- package/button/index.d.ts +5 -0
- package/button/public-api.d.ts +7 -0
- package/button/tokens/button-parent.d.ts +6 -0
- package/button/types/button-appearance.type.d.ts +6 -0
- package/button/types/button-variant.type.d.ts +14 -0
- package/card/card-body.directive.d.ts +6 -0
- package/card/card-defaults.d.ts +12 -0
- package/card/card-footer.directive.d.ts +6 -0
- package/card/card-header.component.d.ts +6 -0
- package/card/card-media.directive.d.ts +7 -0
- package/card/card-section-base.directive.d.ts +9 -0
- package/card/card-subtitle.directive.d.ts +5 -0
- package/card/card-title.directive.d.ts +5 -0
- package/card/card.component.d.ts +21 -0
- package/card/index.d.ts +5 -0
- package/card/public-api.d.ts +10 -0
- package/card/types/card-appearances.type.d.ts +6 -0
- package/card/types/card-variant.type.d.ts +13 -0
- package/checkbox/checkbox-defaults.d.ts +9 -0
- package/checkbox/checkbox-group-defaults.d.ts +9 -0
- package/checkbox/checkbox-group.component.d.ts +28 -0
- package/checkbox/checkbox.component.d.ts +68 -0
- package/checkbox/index.d.ts +5 -0
- package/checkbox/public-api.d.ts +7 -0
- package/checkbox/types/checkbox-events.class.d.ts +6 -0
- package/checkbox/types/checkbox-group-child.d.ts +7 -0
- package/checkbox/types/checkbox-parent.d.ts +8 -0
- package/checkbox/types/checkbox-state.type.d.ts +6 -0
- package/checkbox/types/checkbox-variant.type.d.ts +6 -0
- package/chip/chip-defaults.d.ts +12 -0
- package/chip/chip-group-defaults.d.ts +9 -0
- package/chip/chip-group.component.d.ts +14 -0
- package/chip/chip.component.d.ts +35 -0
- package/chip/index.d.ts +5 -0
- package/chip/public-api.d.ts +7 -0
- package/chip/types/chip-appearance.type.d.ts +5 -0
- package/chip/types/chip-events.type.d.ts +4 -0
- package/chip/types/chip-variant.type.d.ts +8 -0
- package/core/base-classes/component-base.d.ts +13 -0
- package/core/base-classes/directive-base.d.ts +16 -0
- package/core/directives/detect-scrollable.directive.d.ts +11 -0
- package/core/index.d.ts +5 -0
- package/core/pipes/sentence-case.pipe.d.ts +7 -0
- package/core/public-api.d.ts +17 -0
- package/core/services/resize-observer.service.d.ts +13 -0
- package/core/types/orientation.type.d.ts +5 -0
- package/core/types/position.type.d.ts +39 -0
- package/core/types/size-collection.type.d.ts +5 -0
- package/core/types/size.type.d.ts +7 -0
- package/core/utils/class-prefix.d.ts +2 -0
- package/core/utils/class.d.ts +2 -0
- package/core/utils/coercion.d.ts +6 -0
- package/core/utils/compare.d.ts +1 -0
- package/core/utils/date.d.ts +1 -0
- package/core/utils/even-odd.d.ts +2 -0
- package/core/utils/fallback-value.d.ts +1 -0
- package/core/utils/string.d.ts +1 -0
- package/dialog/custom-dialog-base.d.ts +15 -0
- package/dialog/dialog-defaults.d.ts +9 -0
- package/dialog/dialog-header.directive.d.ts +7 -0
- package/dialog/dialog.component.d.ts +22 -0
- package/dialog/dialog.service.d.ts +17 -0
- package/dialog/index.d.ts +5 -0
- package/dialog/public-api.d.ts +5 -0
- package/divider/divider-defaults.d.ts +12 -0
- package/divider/divider.component.d.ts +18 -0
- package/divider/index.d.ts +5 -0
- package/divider/public-api.d.ts +3 -0
- package/divider/types/divider-variant.type.d.ts +13 -0
- package/fesm2022/i-cell-ids-angular-accordion.mjs +223 -0
- package/fesm2022/i-cell-ids-angular-accordion.mjs.map +1 -0
- package/fesm2022/i-cell-ids-angular-avatar.mjs +125 -0
- package/fesm2022/i-cell-ids-angular-avatar.mjs.map +1 -0
- package/fesm2022/i-cell-ids-angular-button.mjs +117 -0
- package/fesm2022/i-cell-ids-angular-button.mjs.map +1 -0
- package/fesm2022/i-cell-ids-angular-card.mjs +222 -0
- package/fesm2022/i-cell-ids-angular-card.mjs.map +1 -0
- package/fesm2022/i-cell-ids-angular-checkbox.mjs +346 -0
- package/fesm2022/i-cell-ids-angular-checkbox.mjs.map +1 -0
- package/fesm2022/i-cell-ids-angular-chip.mjs +166 -0
- package/fesm2022/i-cell-ids-angular-chip.mjs.map +1 -0
- package/fesm2022/i-cell-ids-angular-core.mjs +266 -0
- package/fesm2022/i-cell-ids-angular-core.mjs.map +1 -0
- package/fesm2022/i-cell-ids-angular-dialog.mjs +157 -0
- package/fesm2022/i-cell-ids-angular-dialog.mjs.map +1 -0
- package/fesm2022/i-cell-ids-angular-divider.mjs +76 -0
- package/fesm2022/i-cell-ids-angular-divider.mjs.map +1 -0
- package/fesm2022/i-cell-ids-angular-forms.mjs +871 -0
- package/fesm2022/i-cell-ids-angular-forms.mjs.map +1 -0
- package/fesm2022/i-cell-ids-angular-icon-button.mjs +81 -0
- package/fesm2022/i-cell-ids-angular-icon-button.mjs.map +1 -0
- package/fesm2022/i-cell-ids-angular-icon.mjs +149 -0
- package/fesm2022/i-cell-ids-angular-icon.mjs.map +1 -0
- package/fesm2022/i-cell-ids-angular-menu.mjs +108 -0
- package/fesm2022/i-cell-ids-angular-menu.mjs.map +1 -0
- package/fesm2022/i-cell-ids-angular-notification.mjs +167 -0
- package/fesm2022/i-cell-ids-angular-notification.mjs.map +1 -0
- package/fesm2022/i-cell-ids-angular-overlay-panel.mjs +72 -0
- package/fesm2022/i-cell-ids-angular-overlay-panel.mjs.map +1 -0
- package/fesm2022/i-cell-ids-angular-paginator.mjs +319 -0
- package/fesm2022/i-cell-ids-angular-paginator.mjs.map +1 -0
- package/fesm2022/i-cell-ids-angular-radio.mjs +312 -0
- package/fesm2022/i-cell-ids-angular-radio.mjs.map +1 -0
- package/fesm2022/i-cell-ids-angular-segmented-control-toggle.mjs +264 -0
- package/fesm2022/i-cell-ids-angular-segmented-control-toggle.mjs.map +1 -0
- package/fesm2022/i-cell-ids-angular-segmented-control.mjs +283 -0
- package/fesm2022/i-cell-ids-angular-segmented-control.mjs.map +1 -0
- package/fesm2022/i-cell-ids-angular-select.mjs +550 -0
- package/fesm2022/i-cell-ids-angular-select.mjs.map +1 -0
- package/fesm2022/i-cell-ids-angular-snackbar.mjs +440 -0
- package/fesm2022/i-cell-ids-angular-snackbar.mjs.map +1 -0
- package/fesm2022/i-cell-ids-angular-switch.mjs +181 -0
- package/fesm2022/i-cell-ids-angular-switch.mjs.map +1 -0
- package/fesm2022/i-cell-ids-angular-tab.mjs +141 -0
- package/fesm2022/i-cell-ids-angular-tab.mjs.map +1 -0
- package/fesm2022/i-cell-ids-angular-table.mjs +663 -0
- package/fesm2022/i-cell-ids-angular-table.mjs.map +1 -0
- package/fesm2022/i-cell-ids-angular-tag.mjs +116 -0
- package/fesm2022/i-cell-ids-angular-tag.mjs.map +1 -0
- package/fesm2022/i-cell-ids-angular-tooltip.mjs +587 -0
- package/fesm2022/i-cell-ids-angular-tooltip.mjs.map +1 -0
- package/fesm2022/i-cell-ids-angular.mjs +9 -0
- package/fesm2022/i-cell-ids-angular.mjs.map +1 -0
- package/forms/common/error/error-state.d.ts +23 -0
- package/forms/common/success/success-state.d.ts +23 -0
- package/forms/components/fieldset/fieldset-defaults.d.ts +9 -0
- package/forms/components/fieldset/fieldset-message.directive.d.ts +5 -0
- package/forms/components/fieldset/fieldset-row/fieldset-row.component.d.ts +8 -0
- package/forms/components/fieldset/fieldset.component.d.ts +16 -0
- package/forms/components/form-field/form-field-control.d.ts +21 -0
- package/forms/components/form-field/form-field-defaults.d.ts +9 -0
- package/forms/components/form-field/form-field.component.d.ts +41 -0
- package/forms/components/form-field/tokens/form-field-control.d.ts +3 -0
- package/forms/components/form-field/types/form-field-variant.type.d.ts +5 -0
- package/forms/components/input/input-defaults.d.ts +9 -0
- package/forms/components/input/input.directive.d.ts +55 -0
- package/forms/components/input/types/input.type.d.ts +1 -0
- package/forms/components/message/error-message/error-message.component.d.ts +15 -0
- package/forms/components/message/hint-message/hint-message.component.d.ts +10 -0
- package/forms/components/message/message-defaults.d.ts +9 -0
- package/forms/components/message/success-message/success-message.component.d.ts +11 -0
- package/forms/components/message/types/message-parent-form-field.d.ts +9 -0
- package/forms/components/message/types/message-variant.type.d.ts +6 -0
- package/forms/components/message/types/message.type.d.ts +6 -0
- package/forms/components/option/option-group.component.d.ts +13 -0
- package/forms/components/option/option.component.d.ts +47 -0
- package/forms/components/option/tokens/option-group.d.ts +3 -0
- package/forms/components/option/tokens/option-parent.d.ts +11 -0
- package/forms/components/option/types/option-events.class.d.ts +7 -0
- package/forms/components/pseudo-checkbox/pseudo-checkbox.component.d.ts +14 -0
- package/forms/components/pseudo-checkbox/tokens/pseudo-checkbox-parent.d.ts +7 -0
- package/forms/components/pseudo-checkbox/types/pseudo-checkbox-state.type.d.ts +6 -0
- package/forms/directives/form-field-action.directive.d.ts +5 -0
- package/forms/directives/label.directive.d.ts +5 -0
- package/forms/directives/message-prefix.directive.d.ts +5 -0
- package/forms/directives/message-suffix.directive.d.ts +5 -0
- package/forms/directives/message.directive.d.ts +17 -0
- package/forms/directives/prefix.directive.d.ts +7 -0
- package/forms/directives/suffix.directive.d.ts +7 -0
- package/forms/index.d.ts +5 -0
- package/forms/public-api.d.ts +35 -0
- package/forms/validators.d.ts +9 -0
- package/icon/icon-defaults.d.ts +11 -0
- package/icon/icon.component.d.ts +32 -0
- package/icon/index.d.ts +5 -0
- package/icon/public-api.d.ts +5 -0
- package/icon/tokens/icon-parent.d.ts +6 -0
- package/icon/types/icon-source.type.d.ts +5 -0
- package/icon/types/icon-variant.type.d.ts +12 -0
- package/icon-button/icon-button-defaults.d.ts +11 -0
- package/icon-button/icon-button.component.d.ts +22 -0
- package/icon-button/index.d.ts +5 -0
- package/icon-button/public-api.d.ts +5 -0
- package/icon-button/tokens/icon-button-parent.d.ts +9 -0
- package/icon-button/types/icon-button-appearance.type.d.ts +6 -0
- package/icon-button/types/icon-button-variant.type.d.ts +13 -0
- package/index.d.ts +5 -0
- package/menu/action-menu/action-menu-trigger.directive.d.ts +12 -0
- package/menu/index.d.ts +5 -0
- package/menu/menu-item/menu-item-defaults.d.ts +11 -0
- package/menu/menu-item/menu-item.component.d.ts +23 -0
- package/menu/menu-item/types/menu-item-appearance.type.d.ts +5 -0
- package/menu/menu-item/types/menu-item-variant.type.d.ts +4 -0
- package/menu/public-api.d.ts +5 -0
- package/notification/index.d.ts +5 -0
- package/notification/notification-action-button.directive.d.ts +5 -0
- package/notification/notification-defaults.d.ts +15 -0
- package/notification/notification.component.d.ts +34 -0
- package/notification/public-api.d.ts +5 -0
- package/notification/types/notification-appearance.type.d.ts +5 -0
- package/notification/types/notification-variant.type.d.ts +10 -0
- package/overlay-panel/index.d.ts +5 -0
- package/overlay-panel/overlay-panel-defaults.d.ts +11 -0
- package/overlay-panel/overlay-panel.component.d.ts +18 -0
- package/overlay-panel/public-api.d.ts +4 -0
- package/overlay-panel/types/overlay-panel-appearance.type.d.ts +6 -0
- package/overlay-panel/types/overlay-panel-variant.type.d.ts +5 -0
- package/package.json +153 -0
- package/paginator/index.d.ts +5 -0
- package/paginator/paginator-defaults.d.ts +22 -0
- package/paginator/paginator-intl.d.ts +24 -0
- package/paginator/paginator.component.d.ts +67 -0
- package/paginator/public-api.d.ts +5 -0
- package/paginator/types/paginator-appearance.type.d.ts +4 -0
- package/paginator/types/paginator-events.class.d.ts +6 -0
- package/paginator/types/paginator-variant.type.d.ts +7 -0
- package/public-api.d.ts +2 -0
- package/radio/index.d.ts +5 -0
- package/radio/public-api.d.ts +5 -0
- package/radio/radio-defaults.d.ts +11 -0
- package/radio/radio-group.directive.d.ts +46 -0
- package/radio/radio.component.d.ts +30 -0
- package/radio/types/radio-events.class.d.ts +6 -0
- package/radio/types/radio-variant.type.d.ts +6 -0
- package/segmented-control/index.d.ts +5 -0
- package/segmented-control/public-api.d.ts +6 -0
- package/segmented-control/segmented-control-defaults.d.ts +11 -0
- package/segmented-control/segmented-control-item.component.d.ts +33 -0
- package/segmented-control/segmented-control.directive.d.ts +42 -0
- package/segmented-control/types/segmented-control-appearance.type.d.ts +4 -0
- package/segmented-control/types/segmented-control-item-change.class.d.ts +7 -0
- package/segmented-control/types/segmented-control-variant.type.d.ts +6 -0
- package/segmented-control-toggle/index.d.ts +5 -0
- package/segmented-control-toggle/public-api.d.ts +6 -0
- package/segmented-control-toggle/segmented-control-toggle-defaults.d.ts +12 -0
- package/segmented-control-toggle/segmented-control-toggle-item.component.d.ts +32 -0
- package/segmented-control-toggle/segmented-control-toggle.directive.d.ts +43 -0
- package/segmented-control-toggle/types/segmented-control-toggle-appearance.type.d.ts +5 -0
- package/segmented-control-toggle/types/segmented-control-toggle-item-change.class.d.ts +6 -0
- package/segmented-control-toggle/types/segmented-control-toggle-variant.type.d.ts +11 -0
- package/select/index.d.ts +5 -0
- package/select/public-api.d.ts +3 -0
- package/select/select-defaults.d.ts +9 -0
- package/select/select-positions.d.ts +2 -0
- package/select/select-trigger.directive.d.ts +5 -0
- package/select/select.component.d.ts +102 -0
- package/snackbar/animations.d.ts +2 -0
- package/snackbar/index.d.ts +5 -0
- package/snackbar/public-api.d.ts +7 -0
- package/snackbar/services/snackbar.service.d.ts +28 -0
- package/snackbar/snackbar-defaults.d.ts +16 -0
- package/snackbar/snackbar-group.component.d.ts +25 -0
- package/snackbar/snackbar-position-strategies.d.ts +4 -0
- package/snackbar/snackbar.component.d.ts +51 -0
- package/snackbar/types/snackbar-data.type.d.ts +15 -0
- package/snackbar/types/snackbar-inner-data.type.d.ts +4 -0
- package/snackbar/types/snackbar-position.type.d.ts +9 -0
- package/snackbar/types/snackbar-variant.type.d.ts +8 -0
- package/switch/index.d.ts +5 -0
- package/switch/public-api.d.ts +5 -0
- package/switch/switch-animations.d.ts +2 -0
- package/switch/switch-defaults.d.ts +13 -0
- package/switch/switch-group.component.d.ts +14 -0
- package/switch/switch.component.d.ts +45 -0
- package/switch/types/switch-positions.type.d.ts +10 -0
- package/switch/types/switch-variant.type.d.ts +6 -0
- package/tab/index.d.ts +5 -0
- package/tab/public-api.d.ts +6 -0
- package/tab/tab-group-defaults.d.ts +15 -0
- package/tab/tab-group.component.d.ts +29 -0
- package/tab/tab.component.d.ts +18 -0
- package/tab/types/tab-group-position.type.d.ts +6 -0
- package/tab/types/tab-group-variant.type.d.ts +6 -0
- package/tab/types/tab-indicator-position.type.d.ts +7 -0
- package/table/components/cell-content/cell-content.component.d.ts +25 -0
- package/table/datasource/server-side-datasource.d.ts +37 -0
- package/table/directives/cell-renderer.d.ts +13 -0
- package/table/directives/cell-template.d.ts +8 -0
- package/table/directives/row-info-holder.d.ts +9 -0
- package/table/index.d.ts +5 -0
- package/table/public-api.d.ts +18 -0
- package/table/table-defaults.d.ts +22 -0
- package/table/table-intl.d.ts +25 -0
- package/table/table.component.d.ts +142 -0
- package/table/types/pagination-params.d.ts +9 -0
- package/table/types/request-factory.d.ts +5 -0
- package/table/types/request-pagination-data.d.ts +6 -0
- package/table/types/response-data.d.ts +5 -0
- package/table/types/table-appearance.type.d.ts +6 -0
- package/table/types/table-cell-click-event.d.ts +6 -0
- package/table/types/table-column-def.d.ts +97 -0
- package/table/types/table-row-click-event.d.ts +4 -0
- package/table/types/table-row-keydown-event.d.ts +4 -0
- package/table/types/table-sort-direction.d.ts +6 -0
- package/table/types/table-sort-info.d.ts +6 -0
- package/table/types/table-variant.type.d.ts +6 -0
- package/tag/index.d.ts +5 -0
- package/tag/public-api.d.ts +6 -0
- package/tag/tag-defaults.d.ts +11 -0
- package/tag/tag-group-defaults.d.ts +9 -0
- package/tag/tag-group.component.d.ts +13 -0
- package/tag/tag.component.d.ts +23 -0
- package/tag/types/tag-appearance.type.d.ts +5 -0
- package/tag/types/tag-variant.type.d.ts +13 -0
- package/tooltip/index.d.ts +5 -0
- package/tooltip/public-api.d.ts +5 -0
- package/tooltip/tooltip-defaults.d.ts +18 -0
- package/tooltip/tooltip-position-strategies.d.ts +3 -0
- package/tooltip/tooltip.component.d.ts +31 -0
- package/tooltip/tooltip.directive.d.ts +60 -0
- package/tooltip/types/tooltip-position.type.d.ts +11 -0
- package/tooltip/types/tooltip-variant.type.d.ts +5 -0
- package/tooltip/types/tooltip.type.d.ts +2 -0
- package/tooltip/utils/tooltip-converters.d.ts +3 -0
|
@@ -0,0 +1,587 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { InjectionToken, input, computed, Component, ViewEncapsulation, ChangeDetectionStrategy, inject, NgZone, ElementRef, ViewContainerRef, signal, effect, Directive } from '@angular/core';
|
|
3
|
+
import { IdsSize, ComponentBase, DirectiveBaseWithDefaults, coerceStringAttribute } from '@i-cell/ids-angular/core';
|
|
4
|
+
import { Subject } from 'rxjs';
|
|
5
|
+
import { FocusMonitor } from '@angular/cdk/a11y';
|
|
6
|
+
import { hasModifierKey } from '@angular/cdk/keycodes';
|
|
7
|
+
import { Overlay } from '@angular/cdk/overlay';
|
|
8
|
+
import { normalizePassiveListenerOptions, Platform } from '@angular/cdk/platform';
|
|
9
|
+
import { ComponentPortal } from '@angular/cdk/portal';
|
|
10
|
+
import { ScrollDispatcher } from '@angular/cdk/scrolling';
|
|
11
|
+
import { DOCUMENT } from '@angular/common';
|
|
12
|
+
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
13
|
+
|
|
14
|
+
const IdsTooltipPosition = {
|
|
15
|
+
NORTH: 'north',
|
|
16
|
+
NORTHEAST: 'northeast',
|
|
17
|
+
EAST: 'east',
|
|
18
|
+
SOUTHEAST: 'southeast',
|
|
19
|
+
SOUTH: 'south',
|
|
20
|
+
SOUTHWEST: 'southwest',
|
|
21
|
+
WEST: 'west',
|
|
22
|
+
NORTHWEST: 'northwest',
|
|
23
|
+
};
|
|
24
|
+
|
|
25
|
+
const IdsTooltipVariant = {
|
|
26
|
+
LIGHT: 'light',
|
|
27
|
+
DARK: 'dark',
|
|
28
|
+
};
|
|
29
|
+
|
|
30
|
+
const DEFAULT_SHOW_DELAY = 1_000;
|
|
31
|
+
const DEFAULT_HIDE_DELAY = 1_000;
|
|
32
|
+
const DEFAULT_VIEWPORT_MARGIN = 8;
|
|
33
|
+
const DEFAULT_LONGPRESS_DELAY = 500;
|
|
34
|
+
const DEFAULT_TOUCHEND_HIDE_DELAY = 1500;
|
|
35
|
+
const DEFAULT_SCROLL_DEBOUNCE_TIME = 20;
|
|
36
|
+
const IDS_TOOLTIP_DEFAULT_CONFIG = new InjectionToken('IDS_TOOLTIP_DEFAULT_CONFIG', {
|
|
37
|
+
providedIn: 'root',
|
|
38
|
+
factory: IDS_TOOLTIP_DEFAULT_CONFIG_FACTORY,
|
|
39
|
+
});
|
|
40
|
+
function IDS_TOOLTIP_DEFAULT_CONFIG_FACTORY() {
|
|
41
|
+
return {
|
|
42
|
+
position: IdsTooltipPosition.NORTH,
|
|
43
|
+
size: IdsSize.COMPACT,
|
|
44
|
+
variant: IdsTooltipVariant.DARK,
|
|
45
|
+
showPointer: true,
|
|
46
|
+
showDelay: DEFAULT_SHOW_DELAY,
|
|
47
|
+
hideDelay: DEFAULT_HIDE_DELAY,
|
|
48
|
+
touchLongPressShowDelay: DEFAULT_LONGPRESS_DELAY,
|
|
49
|
+
viewPortMargin: DEFAULT_VIEWPORT_MARGIN,
|
|
50
|
+
touchendHideDelay: DEFAULT_TOUCHEND_HIDE_DELAY,
|
|
51
|
+
scrollDebounceTime: DEFAULT_SCROLL_DEBOUNCE_TIME,
|
|
52
|
+
};
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
function setTooltipFlexibleConnectedPositionStrategy(connectedTo, tooltipPosition) {
|
|
56
|
+
switch (tooltipPosition) {
|
|
57
|
+
case IdsTooltipPosition.NORTH:
|
|
58
|
+
return connectedTo.withPositions([
|
|
59
|
+
connectedPosition.north,
|
|
60
|
+
connectedPosition.northwest,
|
|
61
|
+
connectedPosition.northeast,
|
|
62
|
+
connectedPosition.south,
|
|
63
|
+
connectedPosition.southwest,
|
|
64
|
+
connectedPosition.southeast,
|
|
65
|
+
]);
|
|
66
|
+
case IdsTooltipPosition.NORTHEAST:
|
|
67
|
+
return connectedTo.withPositions([
|
|
68
|
+
connectedPosition.northeast,
|
|
69
|
+
connectedPosition.southeast,
|
|
70
|
+
connectedPosition.northwest,
|
|
71
|
+
connectedPosition.southwest,
|
|
72
|
+
]);
|
|
73
|
+
case IdsTooltipPosition.EAST:
|
|
74
|
+
return connectedTo.withPositions([
|
|
75
|
+
connectedPosition.east,
|
|
76
|
+
connectedPosition.northeast,
|
|
77
|
+
connectedPosition.southeast,
|
|
78
|
+
connectedPosition.west,
|
|
79
|
+
connectedPosition.northwest,
|
|
80
|
+
connectedPosition.southwest,
|
|
81
|
+
]);
|
|
82
|
+
case IdsTooltipPosition.SOUTHEAST:
|
|
83
|
+
return connectedTo.withPositions([
|
|
84
|
+
connectedPosition.southeast,
|
|
85
|
+
connectedPosition.southwest,
|
|
86
|
+
connectedPosition.northeast,
|
|
87
|
+
connectedPosition.northwest,
|
|
88
|
+
]);
|
|
89
|
+
case IdsTooltipPosition.SOUTH:
|
|
90
|
+
return connectedTo.withPositions([
|
|
91
|
+
connectedPosition.south,
|
|
92
|
+
connectedPosition.southwest,
|
|
93
|
+
connectedPosition.southeast,
|
|
94
|
+
connectedPosition.north,
|
|
95
|
+
connectedPosition.northwest,
|
|
96
|
+
connectedPosition.northeast,
|
|
97
|
+
]);
|
|
98
|
+
case IdsTooltipPosition.SOUTHWEST:
|
|
99
|
+
return connectedTo.withPositions([
|
|
100
|
+
connectedPosition.southwest,
|
|
101
|
+
connectedPosition.northwest,
|
|
102
|
+
connectedPosition.southeast,
|
|
103
|
+
connectedPosition.northeast,
|
|
104
|
+
]);
|
|
105
|
+
case IdsTooltipPosition.WEST:
|
|
106
|
+
return connectedTo.withPositions([
|
|
107
|
+
connectedPosition.west,
|
|
108
|
+
connectedPosition.northwest,
|
|
109
|
+
connectedPosition.southwest,
|
|
110
|
+
connectedPosition.east,
|
|
111
|
+
connectedPosition.northeast,
|
|
112
|
+
connectedPosition.southeast,
|
|
113
|
+
]);
|
|
114
|
+
case IdsTooltipPosition.NORTHWEST:
|
|
115
|
+
return connectedTo.withPositions([
|
|
116
|
+
connectedPosition.northwest,
|
|
117
|
+
connectedPosition.southwest,
|
|
118
|
+
connectedPosition.northeast,
|
|
119
|
+
connectedPosition.southeast,
|
|
120
|
+
]);
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
const connectedPosition = {
|
|
124
|
+
north: {
|
|
125
|
+
originX: 'center',
|
|
126
|
+
originY: 'top',
|
|
127
|
+
overlayX: 'center',
|
|
128
|
+
overlayY: 'bottom',
|
|
129
|
+
},
|
|
130
|
+
northeast: {
|
|
131
|
+
originX: 'end',
|
|
132
|
+
originY: 'top',
|
|
133
|
+
overlayX: 'start',
|
|
134
|
+
overlayY: 'bottom',
|
|
135
|
+
},
|
|
136
|
+
east: {
|
|
137
|
+
originX: 'end',
|
|
138
|
+
originY: 'center',
|
|
139
|
+
overlayX: 'start',
|
|
140
|
+
overlayY: 'center',
|
|
141
|
+
},
|
|
142
|
+
southeast: {
|
|
143
|
+
originX: 'end',
|
|
144
|
+
originY: 'bottom',
|
|
145
|
+
overlayX: 'start',
|
|
146
|
+
overlayY: 'top',
|
|
147
|
+
},
|
|
148
|
+
south: {
|
|
149
|
+
originX: 'center',
|
|
150
|
+
originY: 'bottom',
|
|
151
|
+
overlayX: 'center',
|
|
152
|
+
overlayY: 'top',
|
|
153
|
+
},
|
|
154
|
+
southwest: {
|
|
155
|
+
originX: 'start',
|
|
156
|
+
originY: 'bottom',
|
|
157
|
+
overlayX: 'end',
|
|
158
|
+
overlayY: 'top',
|
|
159
|
+
},
|
|
160
|
+
west: {
|
|
161
|
+
originX: 'start',
|
|
162
|
+
originY: 'center',
|
|
163
|
+
overlayX: 'end',
|
|
164
|
+
overlayY: 'center',
|
|
165
|
+
},
|
|
166
|
+
northwest: {
|
|
167
|
+
originX: 'start',
|
|
168
|
+
originY: 'top',
|
|
169
|
+
overlayX: 'end',
|
|
170
|
+
overlayY: 'bottom',
|
|
171
|
+
},
|
|
172
|
+
};
|
|
173
|
+
|
|
174
|
+
class IdsTooltipComponent extends ComponentBase {
|
|
175
|
+
constructor() {
|
|
176
|
+
super(...arguments);
|
|
177
|
+
this._onHide = new Subject();
|
|
178
|
+
this.message = input();
|
|
179
|
+
this.position = input();
|
|
180
|
+
this.size = input();
|
|
181
|
+
this.variant = input();
|
|
182
|
+
this.textAlign = input();
|
|
183
|
+
this.mouseLeaveHideDelay = input(0);
|
|
184
|
+
this.tooltipClass = input();
|
|
185
|
+
this.showPointer = input();
|
|
186
|
+
this._hostClasses = computed(() => this._getHostClasses([
|
|
187
|
+
this.size(),
|
|
188
|
+
this.variant(),
|
|
189
|
+
[
|
|
190
|
+
'position',
|
|
191
|
+
this.position(),
|
|
192
|
+
],
|
|
193
|
+
[
|
|
194
|
+
'text-align',
|
|
195
|
+
this.textAlign(),
|
|
196
|
+
],
|
|
197
|
+
this.showPointer() ? 'pointered' : null,
|
|
198
|
+
]));
|
|
199
|
+
}
|
|
200
|
+
get _hostName() {
|
|
201
|
+
return 'tooltip';
|
|
202
|
+
}
|
|
203
|
+
get isHideTimerTicking() {
|
|
204
|
+
return Boolean(this._hideTimeout);
|
|
205
|
+
}
|
|
206
|
+
hide(delay) {
|
|
207
|
+
this._hideTimeout = setTimeout(() => {
|
|
208
|
+
this._hideTimeout = undefined;
|
|
209
|
+
this._onHide.next();
|
|
210
|
+
}, delay);
|
|
211
|
+
}
|
|
212
|
+
afterHidden() {
|
|
213
|
+
return this._onHide;
|
|
214
|
+
}
|
|
215
|
+
abortHide() {
|
|
216
|
+
clearTimeout(this._hideTimeout);
|
|
217
|
+
this._hideTimeout = undefined;
|
|
218
|
+
}
|
|
219
|
+
_handleMouseEnter() {
|
|
220
|
+
if (this._hideTimeout) {
|
|
221
|
+
this.abortHide();
|
|
222
|
+
}
|
|
223
|
+
}
|
|
224
|
+
_handleMouseLeave({ relatedTarget }) {
|
|
225
|
+
if (!relatedTarget || !this.triggerElement?.contains(relatedTarget)) {
|
|
226
|
+
this.hide(this.mouseLeaveHideDelay());
|
|
227
|
+
}
|
|
228
|
+
}
|
|
229
|
+
ngOnDestroy() {
|
|
230
|
+
this._onHide.complete();
|
|
231
|
+
}
|
|
232
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsTooltipComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
233
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.2", type: IdsTooltipComponent, isStandalone: true, selector: "ids-tooltip", inputs: { message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, textAlign: { classPropertyName: "textAlign", publicName: "textAlign", isSignal: true, isRequired: false, transformFunction: null }, mouseLeaveHideDelay: { classPropertyName: "mouseLeaveHideDelay", publicName: "mouseLeaveHideDelay", isSignal: true, isRequired: false, transformFunction: null }, tooltipClass: { classPropertyName: "tooltipClass", publicName: "tooltipClass", isSignal: true, isRequired: false, transformFunction: null }, showPointer: { classPropertyName: "showPointer", publicName: "showPointer", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "aria-hidden": "true" }, listeners: { "mouseenter": "_handleMouseEnter()", "mouseleave": "_handleMouseLeave($event)" }, properties: { "class": "tooltipClass()" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"ids-tooltip__content\">\n <span>{{ message() }}</span>\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
234
|
+
}
|
|
235
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsTooltipComponent, decorators: [{
|
|
236
|
+
type: Component,
|
|
237
|
+
args: [{ selector: 'ids-tooltip', imports: [], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
238
|
+
'(mouseenter)': '_handleMouseEnter()',
|
|
239
|
+
'(mouseleave)': '_handleMouseLeave($event)',
|
|
240
|
+
'aria-hidden': 'true',
|
|
241
|
+
'[class]': 'tooltipClass()',
|
|
242
|
+
}, template: "<div class=\"ids-tooltip__content\">\n <span>{{ message() }}</span>\n</div>\n" }]
|
|
243
|
+
}] });
|
|
244
|
+
|
|
245
|
+
function connectedPositionPairToTooltipPosition(positionPair) {
|
|
246
|
+
const { originX, originY, overlayX, overlayY } = positionPair;
|
|
247
|
+
if (originX === 'center' &&
|
|
248
|
+
originY === 'top' &&
|
|
249
|
+
overlayX === 'center' &&
|
|
250
|
+
overlayY === 'bottom') {
|
|
251
|
+
return IdsTooltipPosition.NORTH;
|
|
252
|
+
}
|
|
253
|
+
if (originX === 'end' &&
|
|
254
|
+
originY === 'top' &&
|
|
255
|
+
overlayX === 'start' &&
|
|
256
|
+
overlayY === 'bottom') {
|
|
257
|
+
return IdsTooltipPosition.NORTHEAST;
|
|
258
|
+
}
|
|
259
|
+
if (originX === 'end' &&
|
|
260
|
+
originY === 'center' &&
|
|
261
|
+
overlayX === 'start' &&
|
|
262
|
+
overlayY === 'center') {
|
|
263
|
+
return IdsTooltipPosition.EAST;
|
|
264
|
+
}
|
|
265
|
+
if (originX === 'end' &&
|
|
266
|
+
originY === 'bottom' &&
|
|
267
|
+
overlayX === 'start' &&
|
|
268
|
+
overlayY === 'top') {
|
|
269
|
+
return IdsTooltipPosition.SOUTHEAST;
|
|
270
|
+
}
|
|
271
|
+
if (originX === 'center' &&
|
|
272
|
+
originY === 'bottom' &&
|
|
273
|
+
overlayX === 'center' &&
|
|
274
|
+
overlayY === 'top') {
|
|
275
|
+
return IdsTooltipPosition.SOUTH;
|
|
276
|
+
}
|
|
277
|
+
if (originX === 'start' &&
|
|
278
|
+
originY === 'bottom' &&
|
|
279
|
+
overlayX === 'end' &&
|
|
280
|
+
overlayY === 'top') {
|
|
281
|
+
return IdsTooltipPosition.SOUTHWEST;
|
|
282
|
+
}
|
|
283
|
+
if (originX === 'start' &&
|
|
284
|
+
originY === 'center' &&
|
|
285
|
+
overlayX === 'end' &&
|
|
286
|
+
overlayY === 'center') {
|
|
287
|
+
return IdsTooltipPosition.WEST;
|
|
288
|
+
}
|
|
289
|
+
if (originX === 'start' &&
|
|
290
|
+
originY === 'top' &&
|
|
291
|
+
overlayX === 'end' &&
|
|
292
|
+
overlayY === 'bottom') {
|
|
293
|
+
return IdsTooltipPosition.NORTHWEST;
|
|
294
|
+
}
|
|
295
|
+
return IdsTooltipPosition.EAST;
|
|
296
|
+
}
|
|
297
|
+
|
|
298
|
+
const defaultConfig = IDS_TOOLTIP_DEFAULT_CONFIG_FACTORY();
|
|
299
|
+
const passiveListenerOptions = normalizePassiveListenerOptions({ passive: true });
|
|
300
|
+
class IdsTooltipDirective extends DirectiveBaseWithDefaults {
|
|
301
|
+
constructor() {
|
|
302
|
+
super(...arguments);
|
|
303
|
+
this._focusMonitor = inject(FocusMonitor);
|
|
304
|
+
this._platform = inject(Platform);
|
|
305
|
+
this._ngZone = inject(NgZone);
|
|
306
|
+
this._elementRef = inject((ElementRef));
|
|
307
|
+
this._viewContainerRef = inject(ViewContainerRef);
|
|
308
|
+
this._scrollDispatcher = inject(ScrollDispatcher);
|
|
309
|
+
this._overlay = inject(Overlay);
|
|
310
|
+
this._document = inject(DOCUMENT);
|
|
311
|
+
this._defaultConfig = this._getDefaultConfig(defaultConfig, IDS_TOOLTIP_DEFAULT_CONFIG);
|
|
312
|
+
this._passiveListeners = [];
|
|
313
|
+
this._overlayRef = null;
|
|
314
|
+
this._tooltipInstance = null;
|
|
315
|
+
this._pointerExitEventsInitialized = false;
|
|
316
|
+
this._viewportMargin = this._defaultConfig.viewPortMargin;
|
|
317
|
+
this._currentPosition = signal(null);
|
|
318
|
+
this.message = input('', { alias: 'idsTooltip', transform: coerceStringAttribute });
|
|
319
|
+
this.position = input(this._defaultConfig.position, { alias: 'idsTooltipPosition' });
|
|
320
|
+
this.size = input(this._defaultConfig.size, { alias: 'idsTooltipSize' });
|
|
321
|
+
this.variant = input(this._defaultConfig.variant, { alias: 'idsTooltipVariant' });
|
|
322
|
+
this.showDelay = input(this._defaultConfig.showDelay, { alias: 'idsTooltipShowDelay' });
|
|
323
|
+
this.hideDelay = input(this._defaultConfig.hideDelay, { alias: 'idsTooltipHideDelay' });
|
|
324
|
+
this.disabled = input(false, { alias: 'idsTooltipDisabled' });
|
|
325
|
+
this.touchGestures = input('auto', { alias: 'idsTooltipTouchGestures' });
|
|
326
|
+
this.textAlign = input('auto', { alias: 'idsTooltipTextAlign' });
|
|
327
|
+
this.tooltipClass = input(undefined, { alias: 'idsTooltipClass' });
|
|
328
|
+
this.showPointer = input(this._defaultConfig.showPointer, { alias: 'idsTooltipShowPointer' });
|
|
329
|
+
this._hostClasses = computed(() => this._getHostClasses([]));
|
|
330
|
+
this._tooltipClassEffect = effect(() => {
|
|
331
|
+
this._setTooltipInputs(this.message(), this._currentPosition() ?? this.position(), this.size(), this.variant(), this.textAlign(), this.hideDelay(), this.tooltipClass(), this.showPointer());
|
|
332
|
+
});
|
|
333
|
+
}
|
|
334
|
+
get _hostName() {
|
|
335
|
+
return 'tooltip-trigger';
|
|
336
|
+
}
|
|
337
|
+
ngAfterViewInit() {
|
|
338
|
+
this._setupPointerEnterEventsIfNeeded();
|
|
339
|
+
this._focusMonitor
|
|
340
|
+
.monitor(this._elementRef)
|
|
341
|
+
.pipe(takeUntilDestroyed(this._destroyRef))
|
|
342
|
+
.subscribe((origin) => {
|
|
343
|
+
if (!origin) {
|
|
344
|
+
this._ngZone.run(() => this.hide(0));
|
|
345
|
+
}
|
|
346
|
+
else if (origin === 'keyboard') {
|
|
347
|
+
this._ngZone.run(() => this.show());
|
|
348
|
+
}
|
|
349
|
+
});
|
|
350
|
+
}
|
|
351
|
+
show() {
|
|
352
|
+
if (this.disabled() || !this.message() || this._tooltipInstance) {
|
|
353
|
+
this._tooltipInstance?.abortHide();
|
|
354
|
+
return;
|
|
355
|
+
}
|
|
356
|
+
const overlayRef = this._createOverlay();
|
|
357
|
+
this._portal =
|
|
358
|
+
this._portal || new ComponentPortal(IdsTooltipComponent, this._viewContainerRef);
|
|
359
|
+
this._componentRef = overlayRef.attach(this._portal);
|
|
360
|
+
this._tooltipInstance = this._componentRef.instance;
|
|
361
|
+
const instance = this._tooltipInstance;
|
|
362
|
+
instance.triggerElement = this._elementRef.nativeElement;
|
|
363
|
+
this._setTooltipInputs(this.message(), this._currentPosition() ?? this.position(), this.size(), this.variant(), this.textAlign(), this.hideDelay(), this.tooltipClass(), this.showPointer());
|
|
364
|
+
instance
|
|
365
|
+
.afterHidden()
|
|
366
|
+
.pipe(takeUntilDestroyed(this._destroyRef))
|
|
367
|
+
.subscribe(() => {
|
|
368
|
+
this._detach();
|
|
369
|
+
});
|
|
370
|
+
}
|
|
371
|
+
hide(delay = this.hideDelay()) {
|
|
372
|
+
if (this._showTimeout) {
|
|
373
|
+
clearTimeout(this._showTimeout);
|
|
374
|
+
this._showTimeout = undefined;
|
|
375
|
+
return;
|
|
376
|
+
}
|
|
377
|
+
const instance = this._tooltipInstance;
|
|
378
|
+
if (instance?.isHideTimerTicking) {
|
|
379
|
+
return;
|
|
380
|
+
}
|
|
381
|
+
if (instance) {
|
|
382
|
+
instance.hide(delay);
|
|
383
|
+
}
|
|
384
|
+
}
|
|
385
|
+
toggle() {
|
|
386
|
+
this._tooltipInstance ? this.hide() : this.show();
|
|
387
|
+
}
|
|
388
|
+
_createOverlay() {
|
|
389
|
+
if (this._overlayRef) {
|
|
390
|
+
this._detach();
|
|
391
|
+
}
|
|
392
|
+
const scrollableAncestors = this._scrollDispatcher.getAncestorScrollContainers(this._elementRef);
|
|
393
|
+
const strategy = this._overlay
|
|
394
|
+
.position()
|
|
395
|
+
.flexibleConnectedTo(this._elementRef)
|
|
396
|
+
.withFlexibleDimensions(false)
|
|
397
|
+
.withViewportMargin(this._viewportMargin)
|
|
398
|
+
.withScrollableContainers(scrollableAncestors);
|
|
399
|
+
strategy.positionChanges.pipe(takeUntilDestroyed(this._destroyRef)).subscribe((change) => {
|
|
400
|
+
this._updateCurrentPositionClass(change.connectionPair);
|
|
401
|
+
if (change.scrollableViewProperties.isOverlayClipped && this._tooltipInstance) {
|
|
402
|
+
this._ngZone.run(() => this.hide(0));
|
|
403
|
+
}
|
|
404
|
+
});
|
|
405
|
+
this._overlayRef = this._overlay.create({
|
|
406
|
+
positionStrategy: strategy,
|
|
407
|
+
panelClass: 'ids-tooltip-panel',
|
|
408
|
+
scrollStrategy: this._overlay.scrollStrategies.reposition({ scrollThrottle: this._defaultConfig.scrollDebounceTime }),
|
|
409
|
+
});
|
|
410
|
+
this._updatePosition(this._overlayRef);
|
|
411
|
+
this._overlayRef
|
|
412
|
+
.detachments()
|
|
413
|
+
.pipe(takeUntilDestroyed(this._destroyRef))
|
|
414
|
+
.subscribe(() => this._detach());
|
|
415
|
+
this._overlayRef
|
|
416
|
+
.outsidePointerEvents()
|
|
417
|
+
.pipe(takeUntilDestroyed(this._destroyRef))
|
|
418
|
+
.subscribe(() => this._tooltipInstance?.hide(0));
|
|
419
|
+
this._overlayRef
|
|
420
|
+
.keydownEvents()
|
|
421
|
+
.pipe(takeUntilDestroyed(this._destroyRef))
|
|
422
|
+
.subscribe((event) => {
|
|
423
|
+
if (this._tooltipInstance && event.key === 'Escape' && !hasModifierKey(event)) {
|
|
424
|
+
event.preventDefault();
|
|
425
|
+
event.stopPropagation();
|
|
426
|
+
this._ngZone.run(() => this.hide(0));
|
|
427
|
+
}
|
|
428
|
+
});
|
|
429
|
+
return this._overlayRef;
|
|
430
|
+
}
|
|
431
|
+
_detach() {
|
|
432
|
+
if (this._overlayRef && this._overlayRef.hasAttached()) {
|
|
433
|
+
this._overlayRef.detach();
|
|
434
|
+
}
|
|
435
|
+
this._componentRef?.destroy();
|
|
436
|
+
this._tooltipInstance = null;
|
|
437
|
+
}
|
|
438
|
+
_updatePosition(overlayRef) {
|
|
439
|
+
const position = overlayRef.getConfig().positionStrategy;
|
|
440
|
+
setTooltipFlexibleConnectedPositionStrategy(position, this.position());
|
|
441
|
+
}
|
|
442
|
+
_updateCurrentPositionClass(connectionPair) {
|
|
443
|
+
const newPosition = connectedPositionPairToTooltipPosition(connectionPair);
|
|
444
|
+
if (newPosition !== this._currentPosition()) {
|
|
445
|
+
const overlayRef = this._overlayRef;
|
|
446
|
+
if (overlayRef) {
|
|
447
|
+
const positionClassPrefix = 'is-tooltip-panel-position-';
|
|
448
|
+
overlayRef.removePanelClass(positionClassPrefix + this._currentPosition());
|
|
449
|
+
overlayRef.addPanelClass(positionClassPrefix + newPosition);
|
|
450
|
+
}
|
|
451
|
+
this._currentPosition.set(newPosition);
|
|
452
|
+
}
|
|
453
|
+
}
|
|
454
|
+
_setTooltipInputs(message, position, size, variant, textAlign, hideDelay, tooltipClass, showPointer) {
|
|
455
|
+
if (this._tooltipInstance) {
|
|
456
|
+
this._componentRef?.setInput('message', message);
|
|
457
|
+
this._componentRef?.setInput('position', position);
|
|
458
|
+
this._componentRef?.setInput('size', size);
|
|
459
|
+
this._componentRef?.setInput('variant', variant);
|
|
460
|
+
this._componentRef?.setInput('textAlign', textAlign);
|
|
461
|
+
this._componentRef?.setInput('mouseLeaveHideDelay', hideDelay);
|
|
462
|
+
this._componentRef?.setInput('tooltipClass', tooltipClass);
|
|
463
|
+
this._componentRef?.setInput('showPointer', showPointer);
|
|
464
|
+
}
|
|
465
|
+
}
|
|
466
|
+
_setupPointerEnterEventsIfNeeded() {
|
|
467
|
+
if (this.disabled() || !this.message() || this._passiveListeners.length) {
|
|
468
|
+
return;
|
|
469
|
+
}
|
|
470
|
+
if (this._platformSupportsMouseEvents()) {
|
|
471
|
+
this._passiveListeners.push([
|
|
472
|
+
'mouseenter',
|
|
473
|
+
() => {
|
|
474
|
+
this._setupPointerExitEventsIfNeeded();
|
|
475
|
+
this._showTimeout = setTimeout(() => {
|
|
476
|
+
this._showTimeout = undefined;
|
|
477
|
+
this.show();
|
|
478
|
+
}, this.showDelay());
|
|
479
|
+
},
|
|
480
|
+
]);
|
|
481
|
+
}
|
|
482
|
+
else if (this.touchGestures() !== 'off') {
|
|
483
|
+
this._disableNativeGesturesIfNecessary();
|
|
484
|
+
this._passiveListeners.push([
|
|
485
|
+
'touchstart',
|
|
486
|
+
() => {
|
|
487
|
+
this._setupPointerExitEventsIfNeeded();
|
|
488
|
+
clearTimeout(this._touchstartTimeout);
|
|
489
|
+
this._touchstartTimeout = setTimeout(() => this.show(), this._defaultConfig.touchLongPressShowDelay);
|
|
490
|
+
},
|
|
491
|
+
]);
|
|
492
|
+
}
|
|
493
|
+
this._addListeners(this._passiveListeners);
|
|
494
|
+
}
|
|
495
|
+
_wheelListener(event) {
|
|
496
|
+
if (this._tooltipInstance) {
|
|
497
|
+
const elementUnderPointer = this._document.elementFromPoint(event.clientX, event.clientY);
|
|
498
|
+
const element = this._elementRef.nativeElement;
|
|
499
|
+
if (elementUnderPointer !== element && !element.contains(elementUnderPointer)) {
|
|
500
|
+
this.hide();
|
|
501
|
+
}
|
|
502
|
+
}
|
|
503
|
+
}
|
|
504
|
+
_setupPointerExitEventsIfNeeded() {
|
|
505
|
+
if (this._pointerExitEventsInitialized) {
|
|
506
|
+
return;
|
|
507
|
+
}
|
|
508
|
+
this._pointerExitEventsInitialized = true;
|
|
509
|
+
const exitListeners = [];
|
|
510
|
+
if (this._platformSupportsMouseEvents()) {
|
|
511
|
+
exitListeners.push([
|
|
512
|
+
'mouseleave',
|
|
513
|
+
() => {
|
|
514
|
+
this.hide();
|
|
515
|
+
},
|
|
516
|
+
], [
|
|
517
|
+
'wheel',
|
|
518
|
+
(event) => {
|
|
519
|
+
this._wheelListener(event);
|
|
520
|
+
},
|
|
521
|
+
]);
|
|
522
|
+
}
|
|
523
|
+
else if (this.touchGestures() !== 'off') {
|
|
524
|
+
this._disableNativeGesturesIfNecessary();
|
|
525
|
+
const touchendListener = () => {
|
|
526
|
+
clearTimeout(this._touchstartTimeout);
|
|
527
|
+
this.hide(this._defaultConfig.touchendHideDelay);
|
|
528
|
+
};
|
|
529
|
+
exitListeners.push([
|
|
530
|
+
'touchend',
|
|
531
|
+
touchendListener,
|
|
532
|
+
], [
|
|
533
|
+
'touchcancel',
|
|
534
|
+
touchendListener,
|
|
535
|
+
]);
|
|
536
|
+
}
|
|
537
|
+
this._addListeners(exitListeners);
|
|
538
|
+
this._passiveListeners.push(...exitListeners);
|
|
539
|
+
}
|
|
540
|
+
_addListeners(listeners) {
|
|
541
|
+
listeners.forEach(([event, listener,]) => {
|
|
542
|
+
this._elementRef.nativeElement.addEventListener(event, listener, passiveListenerOptions);
|
|
543
|
+
});
|
|
544
|
+
}
|
|
545
|
+
_disableNativeGesturesIfNecessary() {
|
|
546
|
+
const gestures = this.touchGestures();
|
|
547
|
+
if (gestures !== 'off') {
|
|
548
|
+
const element = this._elementRef.nativeElement;
|
|
549
|
+
const style = element.style;
|
|
550
|
+
if (gestures === 'on' || (element.nodeName !== 'INPUT' && element.nodeName !== 'TEXTAREA')) {
|
|
551
|
+
style.userSelect = 'none';
|
|
552
|
+
}
|
|
553
|
+
style.touchAction = 'none';
|
|
554
|
+
}
|
|
555
|
+
}
|
|
556
|
+
_platformSupportsMouseEvents() {
|
|
557
|
+
return !this._platform.IOS && !this._platform.ANDROID;
|
|
558
|
+
}
|
|
559
|
+
ngOnDestroy() {
|
|
560
|
+
const nativeElement = this._elementRef.nativeElement;
|
|
561
|
+
clearTimeout(this._touchstartTimeout);
|
|
562
|
+
if (this._componentRef) {
|
|
563
|
+
this._tooltipInstance = null;
|
|
564
|
+
}
|
|
565
|
+
this._passiveListeners.forEach(([event, listener,]) => {
|
|
566
|
+
nativeElement.removeEventListener(event, listener, passiveListenerOptions);
|
|
567
|
+
});
|
|
568
|
+
this._passiveListeners.length = 0;
|
|
569
|
+
this._focusMonitor.stopMonitoring(nativeElement);
|
|
570
|
+
}
|
|
571
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsTooltipDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
|
|
572
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.1.2", type: IdsTooltipDirective, isStandalone: true, selector: "[idsTooltip]", inputs: { message: { classPropertyName: "message", publicName: "idsTooltip", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "idsTooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "idsTooltipSize", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "idsTooltipVariant", isSignal: true, isRequired: false, transformFunction: null }, showDelay: { classPropertyName: "showDelay", publicName: "idsTooltipShowDelay", isSignal: true, isRequired: false, transformFunction: null }, hideDelay: { classPropertyName: "hideDelay", publicName: "idsTooltipHideDelay", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "idsTooltipDisabled", isSignal: true, isRequired: false, transformFunction: null }, touchGestures: { classPropertyName: "touchGestures", publicName: "idsTooltipTouchGestures", isSignal: true, isRequired: false, transformFunction: null }, textAlign: { classPropertyName: "textAlign", publicName: "idsTooltipTextAlign", isSignal: true, isRequired: false, transformFunction: null }, tooltipClass: { classPropertyName: "tooltipClass", publicName: "idsTooltipClass", isSignal: true, isRequired: false, transformFunction: null }, showPointer: { classPropertyName: "showPointer", publicName: "idsTooltipShowPointer", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
|
|
573
|
+
}
|
|
574
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsTooltipDirective, decorators: [{
|
|
575
|
+
type: Directive,
|
|
576
|
+
args: [{
|
|
577
|
+
selector: '[idsTooltip]',
|
|
578
|
+
standalone: true,
|
|
579
|
+
}]
|
|
580
|
+
}] });
|
|
581
|
+
|
|
582
|
+
/**
|
|
583
|
+
* Generated bundle index. Do not edit.
|
|
584
|
+
*/
|
|
585
|
+
|
|
586
|
+
export { IDS_TOOLTIP_DEFAULT_CONFIG, IDS_TOOLTIP_DEFAULT_CONFIG_FACTORY, IdsTooltipDirective, IdsTooltipPosition, IdsTooltipVariant };
|
|
587
|
+
//# sourceMappingURL=i-cell-ids-angular-tooltip.mjs.map
|