ng-primitives 0.35.0 → 0.36.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/a11y/visually-hidden/visually-hidden-state.d.ts +1 -1
- package/accordion/accordion/accordion-state.d.ts +1 -1
- package/accordion/accordion-item/accordion-item-state.d.ts +1 -1
- package/avatar/avatar/avatar-state.d.ts +1 -1
- package/button/button/button-state.d.ts +1 -1
- package/checkbox/checkbox/checkbox-state.d.ts +1 -1
- package/date-picker/date-picker/date-picker-state.d.ts +1 -1
- package/dialog/dialog/dialog-state.d.ts +1 -1
- package/fesm2022/ng-primitives-file-upload.mjs +6 -4
- package/fesm2022/ng-primitives-file-upload.mjs.map +1 -1
- package/fesm2022/ng-primitives-internal.mjs +73 -50
- package/fesm2022/ng-primitives-internal.mjs.map +1 -1
- package/fesm2022/ng-primitives-popover.mjs +95 -59
- package/fesm2022/ng-primitives-popover.mjs.map +1 -1
- package/fesm2022/ng-primitives-radio.mjs +4 -0
- package/fesm2022/ng-primitives-radio.mjs.map +1 -1
- package/fesm2022/ng-primitives-state.mjs +10 -3
- package/fesm2022/ng-primitives-state.mjs.map +1 -1
- package/fesm2022/ng-primitives-tabs.mjs +17 -22
- package/fesm2022/ng-primitives-tabs.mjs.map +1 -1
- package/fesm2022/ng-primitives-tooltip.mjs +94 -43
- package/fesm2022/ng-primitives-tooltip.mjs.map +1 -1
- package/fesm2022/ng-primitives-utils.mjs +18 -0
- package/fesm2022/ng-primitives-utils.mjs.map +1 -1
- package/file-upload/file-dropzone/file-dropzone-state.d.ts +2 -2
- package/file-upload/file-dropzone/file-dropzone.d.ts +3 -2
- package/file-upload/file-upload/file-upload-state.d.ts +2 -2
- package/file-upload/file-upload/file-upload.d.ts +3 -2
- package/form-field/form-control/form-control-state.d.ts +1 -1
- package/form-field/form-field/form-field-state.d.ts +1 -1
- package/input/input/input-state.d.ts +1 -1
- package/internal/exit-animation/exit-animation-manager.d.ts +17 -0
- package/internal/exit-animation/exit-animation.d.ts +4 -17
- package/internal/index.d.ts +2 -1
- package/listbox/listbox/listbox-state.d.ts +2 -2
- package/package.json +5 -5
- package/pagination/pagination/pagination-state.d.ts +1 -1
- package/popover/index.d.ts +1 -0
- package/popover/popover/popover-token.d.ts +10 -0
- package/popover/popover/popover.d.ts +3 -2
- package/popover/popover-trigger/popover-trigger-state.d.ts +5 -3
- package/popover/popover-trigger/popover-trigger.d.ts +26 -18
- package/progress/progress/progress-state.d.ts +1 -1
- package/radio/radio-group/radio-group-state.d.ts +1 -1
- package/radio/radio-item/radio-item-state.d.ts +1 -1
- package/roving-focus/roving-focus-group/roving-focus-group-state.d.ts +1 -1
- package/schematics/ng-generate/schema.d.ts +3 -1
- package/schematics/ng-generate/schema.json +3 -1
- package/schematics/ng-generate/templates/toolbar/toolbar-button.__fileSuffix@dasherize__.ts.template +58 -0
- package/schematics/ng-generate/templates/toolbar/toolbar.__fileSuffix@dasherize__.ts.template +29 -0
- package/schematics/ng-generate/templates/tooltip/tooltip-trigger.__fileSuffix@dasherize__.ts.template +35 -0
- package/schematics/ng-generate/templates/tooltip/tooltip.__fileSuffix@dasherize__.ts.template +60 -0
- package/search/search/search-state.d.ts +1 -1
- package/select/select/select-state.d.ts +1 -1
- package/slider/slider/slider-state.d.ts +1 -1
- package/state/index.d.ts +7 -1
- package/switch/switch/switch-state.d.ts +1 -1
- package/tabs/index.d.ts +1 -2
- package/tabs/tab-button/tab-button.d.ts +2 -2
- package/tabs/tabset/tabset-state.d.ts +1 -1
- package/textarea/textarea/textarea-state.d.ts +1 -1
- package/toggle/toggle/toggle-state.d.ts +1 -1
- package/toggle-group/toggle-group/toggle-group-state.d.ts +1 -1
- package/toggle-group/toggle-group-item/toggle-group-item-state.d.ts +1 -1
- package/tooltip/index.d.ts +1 -0
- package/tooltip/tooltip/tooltip-token.d.ts +10 -0
- package/tooltip/tooltip/tooltip.d.ts +2 -1
- package/tooltip/tooltip-trigger/tooltip-trigger-state.d.ts +3 -3
- package/tooltip/tooltip-trigger/tooltip-trigger.d.ts +39 -18
- package/tabs/tabset/tabset-token.d.ts +0 -11
|
@@ -7,7 +7,7 @@ export declare const NgpRadioGroupStateToken: import("@angular/core").InjectionT
|
|
|
7
7
|
/**
|
|
8
8
|
* Provides the RadioGroup state.
|
|
9
9
|
*/
|
|
10
|
-
export declare const provideRadioGroupState: () => import("@angular/core").FactoryProvider;
|
|
10
|
+
export declare const provideRadioGroupState: (options?: import("ng-primitives/state").CreateStateProviderOptions) => import("@angular/core").FactoryProvider;
|
|
11
11
|
/**
|
|
12
12
|
* Injects the RadioGroup state.
|
|
13
13
|
*/
|
|
@@ -7,7 +7,7 @@ export declare const NgpRadioItemStateToken: import("@angular/core").InjectionTo
|
|
|
7
7
|
/**
|
|
8
8
|
* Provides the RadioItem state.
|
|
9
9
|
*/
|
|
10
|
-
export declare const provideRadioItemState: () => import("@angular/core").FactoryProvider;
|
|
10
|
+
export declare const provideRadioItemState: (options?: import("ng-primitives/state").CreateStateProviderOptions) => import("@angular/core").FactoryProvider;
|
|
11
11
|
/**
|
|
12
12
|
* Injects the RadioItem state.
|
|
13
13
|
*/
|
|
@@ -6,7 +6,7 @@ export declare const NgpRovingFocusGroupStateToken: import("@angular/core").Inje
|
|
|
6
6
|
/**
|
|
7
7
|
* Provides the RovingFocusGroup state.
|
|
8
8
|
*/
|
|
9
|
-
export declare const provideRovingFocusGroupState: () => import("@angular/core").FactoryProvider;
|
|
9
|
+
export declare const provideRovingFocusGroupState: (options?: import("ng-primitives/state").CreateStateProviderOptions) => import("@angular/core").FactoryProvider;
|
|
10
10
|
/**
|
|
11
11
|
* Injects the RovingFocusGroup state.
|
|
12
12
|
*/
|
|
@@ -22,7 +22,9 @@ export interface AngularPrimitivesComponentSchema {
|
|
|
22
22
|
| 'dialog'
|
|
23
23
|
| 'file-upload'
|
|
24
24
|
| 'search'
|
|
25
|
-
| 'toast'
|
|
25
|
+
| 'toast'
|
|
26
|
+
| 'toolbar'
|
|
27
|
+
| 'tooltip';
|
|
26
28
|
|
|
27
29
|
/**
|
|
28
30
|
* The path where the component files should be created, relative to the current workspace.
|
package/schematics/ng-generate/templates/toolbar/toolbar-button.__fileSuffix@dasherize__.ts.template
ADDED
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
import { Component } from '@angular/core';
|
|
2
|
+
import { NgpButton } from 'ng-primitives/button';
|
|
3
|
+
import { NgpRovingFocusItem } from 'ng-primitives/roving-focus';
|
|
4
|
+
|
|
5
|
+
@Component({
|
|
6
|
+
selector: 'button[<%= prefix %>-toolbar-button]',
|
|
7
|
+
hostDirectives: [
|
|
8
|
+
{ directive: NgpButton, inputs: ['disabled'] },
|
|
9
|
+
{
|
|
10
|
+
directive: NgpRovingFocusItem,
|
|
11
|
+
inputs: ['ngpRovingFocusItemDisabled:disabled'],
|
|
12
|
+
},
|
|
13
|
+
],
|
|
14
|
+
host: {
|
|
15
|
+
type: 'button',
|
|
16
|
+
},
|
|
17
|
+
template: `
|
|
18
|
+
<ng-content />
|
|
19
|
+
`,
|
|
20
|
+
styles: `
|
|
21
|
+
/* These styles rely on CSS variables that can be imported from ng-primitives/example-theme/index.css in your global styles */
|
|
22
|
+
|
|
23
|
+
:host {
|
|
24
|
+
display: flex;
|
|
25
|
+
width: 2rem;
|
|
26
|
+
height: 2rem;
|
|
27
|
+
align-items: center;
|
|
28
|
+
justify-content: center;
|
|
29
|
+
border-radius: 0.25rem;
|
|
30
|
+
border: 1px solid transparent;
|
|
31
|
+
background: transparent;
|
|
32
|
+
outline: none;
|
|
33
|
+
transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
34
|
+
box-sizing: border-box;
|
|
35
|
+
color: var(--ngp-text-primary);
|
|
36
|
+
cursor: pointer;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
:host[data-hover] {
|
|
40
|
+
background-color: var(--ngp-background-hover);
|
|
41
|
+
border-color: var(--ngp-border);
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
:host[data-focus-visible] {
|
|
45
|
+
outline: 2px solid var(--ngp-focus-ring);
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
:host[data-press] {
|
|
49
|
+
background-color: var(--ngp-background-active);
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
:host[data-selected] {
|
|
53
|
+
background-color: var(--ngp-background-inverse);
|
|
54
|
+
color: var(--ngp-text-inverse);
|
|
55
|
+
}
|
|
56
|
+
`,
|
|
57
|
+
})
|
|
58
|
+
export class ToolbarButton<%= componentSuffix %> {}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { Component } from '@angular/core';
|
|
2
|
+
import { NgpToolbar } from 'ng-primitives/toolbar';
|
|
3
|
+
|
|
4
|
+
@Component({
|
|
5
|
+
selector: '<%= prefix %>-toolbar',
|
|
6
|
+
hostDirectives: [{ directive: NgpToolbar, inputs: ['ngpToolbarOrientation:orientation'] }],
|
|
7
|
+
template: `
|
|
8
|
+
<ng-content />
|
|
9
|
+
`,
|
|
10
|
+
styles: `
|
|
11
|
+
/* These styles rely on CSS variables that can be imported from ng-primitives/example-theme/index.css in your global styles */
|
|
12
|
+
|
|
13
|
+
:host {
|
|
14
|
+
display: flex;
|
|
15
|
+
column-gap: 0.25rem;
|
|
16
|
+
align-items: center;
|
|
17
|
+
border-radius: 0.375rem;
|
|
18
|
+
background-color: var(--ngp-background);
|
|
19
|
+
box-shadow: var(--ngp-button-shadow);
|
|
20
|
+
padding: 0.25rem;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
:host[data-orientation='vertical'] {
|
|
24
|
+
flex-direction: column;
|
|
25
|
+
row-gap: 0.25rem;
|
|
26
|
+
}
|
|
27
|
+
`,
|
|
28
|
+
})
|
|
29
|
+
export class Toolbar<%= componentSuffix %> {}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import { Directive, input } from '@angular/core';
|
|
2
|
+
import { injectTooltipTriggerState, NgpTooltipTrigger } from 'ng-primitives/tooltip';
|
|
3
|
+
import { Tooltip } from './tooltip';
|
|
4
|
+
|
|
5
|
+
@Directive({
|
|
6
|
+
selector: '[appTooltipTrigger]',
|
|
7
|
+
hostDirectives: [
|
|
8
|
+
{
|
|
9
|
+
directive: NgpTooltipTrigger,
|
|
10
|
+
inputs: [
|
|
11
|
+
'ngpTooltipTriggerPlacement:appTooltipTriggerPlacement',
|
|
12
|
+
'ngpTooltipTriggerDisabled:appTooltipTriggerDisabled',
|
|
13
|
+
'ngpTooltipTriggerOffset:appTooltipTriggerOffset',
|
|
14
|
+
'ngpTooltipTriggerShowDelay:appTooltipTriggerShowDelay',
|
|
15
|
+
'ngpTooltipTriggerHideDelay:appTooltipTriggerHideDelay',
|
|
16
|
+
'ngpTooltipTriggerFlip:appTooltipTriggerFlip',
|
|
17
|
+
'ngpTooltipTriggerContainer:appTooltipTriggerContainer',
|
|
18
|
+
'ngpTooltipTriggerContext:appTooltipTrigger',
|
|
19
|
+
],
|
|
20
|
+
},
|
|
21
|
+
],
|
|
22
|
+
})
|
|
23
|
+
export class TooltipTrigger {
|
|
24
|
+
/** Access the tooltip trigger */
|
|
25
|
+
private readonly tooltipTrigger = injectTooltipTriggerState();
|
|
26
|
+
|
|
27
|
+
/** Define the content of the tooltip */
|
|
28
|
+
readonly content = input.required<string>({
|
|
29
|
+
alias: 'appTooltipTrigger',
|
|
30
|
+
});
|
|
31
|
+
|
|
32
|
+
constructor() {
|
|
33
|
+
this.tooltipTrigger().tooltip.set(Tooltip);
|
|
34
|
+
}
|
|
35
|
+
}
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
import { Component } from '@angular/core';
|
|
2
|
+
import { injectTooltipContext, NgpTooltip } from 'ng-primitives/tooltip';
|
|
3
|
+
|
|
4
|
+
@Component({
|
|
5
|
+
selector: '<%= prefix %>-tooltip',
|
|
6
|
+
hostDirectives: [NgpTooltip],
|
|
7
|
+
template: `
|
|
8
|
+
{{ content }}
|
|
9
|
+
`,
|
|
10
|
+
styles: `
|
|
11
|
+
/* These styles rely on CSS variables that can be imported from ng-primitives/example-theme/index.css in your global styles */
|
|
12
|
+
|
|
13
|
+
:host {
|
|
14
|
+
position: absolute;
|
|
15
|
+
max-width: 16rem;
|
|
16
|
+
border-radius: 0.5rem;
|
|
17
|
+
background-color: var(--ngp-background-inverse);
|
|
18
|
+
padding: 0.5rem 0.75rem;
|
|
19
|
+
border: none;
|
|
20
|
+
font-size: 0.75rem;
|
|
21
|
+
font-weight: 500;
|
|
22
|
+
color: var(--ngp-text-inverse);
|
|
23
|
+
transform-origin: var(--ngp-tooltip-transform-origin);
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
:host[data-enter] {
|
|
27
|
+
animation: tooltip-show 200ms ease-in-out;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
:host[data-exit] {
|
|
31
|
+
animation: tooltip-hide 200ms ease-in-out;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
@keyframes tooltip-show {
|
|
35
|
+
0% {
|
|
36
|
+
opacity: 0;
|
|
37
|
+
transform: scale(0.9);
|
|
38
|
+
}
|
|
39
|
+
100% {
|
|
40
|
+
opacity: 1;
|
|
41
|
+
transform: scale(1);
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
@keyframes tooltip-hide {
|
|
46
|
+
0% {
|
|
47
|
+
opacity: 1;
|
|
48
|
+
transform: scale(1);
|
|
49
|
+
}
|
|
50
|
+
100% {
|
|
51
|
+
opacity: 0;
|
|
52
|
+
transform: scale(0.9);
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
`,
|
|
56
|
+
})
|
|
57
|
+
export class Tooltip<%= componentSuffix %> {
|
|
58
|
+
/** Access the tooltip context where the content is stored. */
|
|
59
|
+
protected readonly content = injectTooltipContext<string>();
|
|
60
|
+
}
|
|
@@ -6,7 +6,7 @@ export declare const NgpSearchStateToken: import("@angular/core").InjectionToken
|
|
|
6
6
|
/**
|
|
7
7
|
* Provides the Search state.
|
|
8
8
|
*/
|
|
9
|
-
export declare const provideSearchState: () => import("@angular/core").FactoryProvider;
|
|
9
|
+
export declare const provideSearchState: (options?: import("ng-primitives/state").CreateStateProviderOptions) => import("@angular/core").FactoryProvider;
|
|
10
10
|
/**
|
|
11
11
|
* Injects the Search state.
|
|
12
12
|
*/
|
|
@@ -6,7 +6,7 @@ export declare const NgpSelectStateToken: import("@angular/core").InjectionToken
|
|
|
6
6
|
/**
|
|
7
7
|
* Provides the Select state.
|
|
8
8
|
*/
|
|
9
|
-
export declare const provideSelectState: () => import("@angular/core").FactoryProvider;
|
|
9
|
+
export declare const provideSelectState: (options?: import("ng-primitives/state").CreateStateProviderOptions) => import("@angular/core").FactoryProvider;
|
|
10
10
|
/**
|
|
11
11
|
* Injects the Select state.
|
|
12
12
|
*/
|
|
@@ -6,7 +6,7 @@ export declare const NgpSliderStateToken: import("@angular/core").InjectionToken
|
|
|
6
6
|
/**
|
|
7
7
|
* Provides the Slider state.
|
|
8
8
|
*/
|
|
9
|
-
export declare const provideSliderState: () => import("@angular/core").FactoryProvider;
|
|
9
|
+
export declare const provideSliderState: (options?: import("ng-primitives/state").CreateStateProviderOptions) => import("@angular/core").FactoryProvider;
|
|
10
10
|
/**
|
|
11
11
|
* Injects the Slider state.
|
|
12
12
|
*/
|
package/state/index.d.ts
CHANGED
|
@@ -19,13 +19,19 @@ export type InjectedState<T> = Signal<State<T>>;
|
|
|
19
19
|
* @param description The description of the token
|
|
20
20
|
*/
|
|
21
21
|
export declare function createStateToken<T>(description: string): InjectionToken<T>;
|
|
22
|
+
export interface CreateStateProviderOptions {
|
|
23
|
+
/**
|
|
24
|
+
* Whether we should check for the state in the parent injector.
|
|
25
|
+
*/
|
|
26
|
+
inherit?: boolean;
|
|
27
|
+
}
|
|
22
28
|
/**
|
|
23
29
|
* Create a new provider for the state. It first tries to inject the state from the parent injector,
|
|
24
30
|
* as this allows for the state to be hoisted to a higher level in the component tree. This can
|
|
25
31
|
* be useful to avoid issues where the injector can't be shared in some cases when ng-content is used.
|
|
26
32
|
* @param token The token for the state
|
|
27
33
|
*/
|
|
28
|
-
export declare function createStateProvider<T>(token: ProviderToken<T>): () => FactoryProvider;
|
|
34
|
+
export declare function createStateProvider<T>(token: ProviderToken<T>): (options?: CreateStateProviderOptions) => FactoryProvider;
|
|
29
35
|
type CreateStateInjectorOptions = {
|
|
30
36
|
/**
|
|
31
37
|
* Whether the state may not be immediately available. This can happen when the child is instantiated before the parent.
|
|
@@ -6,7 +6,7 @@ export declare const NgpSwitchStateToken: import("@angular/core").InjectionToken
|
|
|
6
6
|
/**
|
|
7
7
|
* Provides the Switch state.
|
|
8
8
|
*/
|
|
9
|
-
export declare const provideSwitchState: () => import("@angular/core").FactoryProvider;
|
|
9
|
+
export declare const provideSwitchState: (options?: import("ng-primitives/state").CreateStateProviderOptions) => import("@angular/core").FactoryProvider;
|
|
10
10
|
/**
|
|
11
11
|
* Injects the Switch state.
|
|
12
12
|
*/
|
package/tabs/index.d.ts
CHANGED
|
@@ -2,7 +2,6 @@ export { NgpTabsConfig, provideTabsConfig } from './config/tabs-config';
|
|
|
2
2
|
export { NgpTabButton } from './tab-button/tab-button';
|
|
3
3
|
export { NgpTabList } from './tab-list/tab-list';
|
|
4
4
|
export { NgpTabPanel } from './tab-panel/tab-panel';
|
|
5
|
-
export {
|
|
5
|
+
export { injectTabPanel, NgpTabPanelToken } from './tab-panel/tab-panel-token';
|
|
6
6
|
export { NgpTabset } from './tabset/tabset';
|
|
7
7
|
export { injectTabsetState, provideTabsetState } from './tabset/tabset-state';
|
|
8
|
-
export { NgpTabsetToken, injectTabset } from './tabset/tabset-token';
|
|
@@ -3,7 +3,6 @@ import { OnInit } from '@angular/core';
|
|
|
3
3
|
import { NgpRovingFocusItem } from 'ng-primitives/roving-focus';
|
|
4
4
|
import * as i0 from "@angular/core";
|
|
5
5
|
import * as i1 from "ng-primitives/roving-focus";
|
|
6
|
-
import * as i2 from "ng-primitives/interactions";
|
|
7
6
|
/**
|
|
8
7
|
* Apply the `ngpTabButton` directive to an element within a tab list to represent a tab button. This directive should be applied to a button element.
|
|
9
8
|
*/
|
|
@@ -73,6 +72,7 @@ export declare class NgpTabButton implements OnInit {
|
|
|
73
72
|
* Whether the tab is active
|
|
74
73
|
*/
|
|
75
74
|
readonly active: import("@angular/core").Signal<boolean>;
|
|
75
|
+
constructor();
|
|
76
76
|
ngOnInit(): void;
|
|
77
77
|
/**
|
|
78
78
|
* Select the tab this trigger controls
|
|
@@ -83,5 +83,5 @@ export declare class NgpTabButton implements OnInit {
|
|
|
83
83
|
*/
|
|
84
84
|
protected activateOnFocus(): void;
|
|
85
85
|
static ɵfac: i0.ɵɵFactoryDeclaration<NgpTabButton, never>;
|
|
86
|
-
static ɵdir: i0.ɵɵDirectiveDeclaration<NgpTabButton, "[ngpTabButton]", ["ngpTabButton"], { "value": { "alias": "ngpTabButtonValue"; "required": false; "isSignal": true; }; "disabled": { "alias": "ngpTabButtonDisabled"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1.NgpRovingFocusItem; inputs: {}; outputs: {}; }
|
|
86
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<NgpTabButton, "[ngpTabButton]", ["ngpTabButton"], { "value": { "alias": "ngpTabButtonValue"; "required": false; "isSignal": true; }; "disabled": { "alias": "ngpTabButtonDisabled"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1.NgpRovingFocusItem; inputs: {}; outputs: {}; }]>;
|
|
87
87
|
}
|
|
@@ -6,7 +6,7 @@ export declare const NgpTabsetStateToken: import("@angular/core").InjectionToken
|
|
|
6
6
|
/**
|
|
7
7
|
* Provides the Tabset state.
|
|
8
8
|
*/
|
|
9
|
-
export declare const provideTabsetState: () => import("@angular/core").FactoryProvider;
|
|
9
|
+
export declare const provideTabsetState: (options?: import("ng-primitives/state").CreateStateProviderOptions) => import("@angular/core").FactoryProvider;
|
|
10
10
|
/**
|
|
11
11
|
* Injects the Tabset state.
|
|
12
12
|
*/
|
|
@@ -6,7 +6,7 @@ export declare const NgpTextareaStateToken: import("@angular/core").InjectionTok
|
|
|
6
6
|
/**
|
|
7
7
|
* Provides the Textarea state.
|
|
8
8
|
*/
|
|
9
|
-
export declare const provideTextareaState: () => import("@angular/core").FactoryProvider;
|
|
9
|
+
export declare const provideTextareaState: (options?: import("ng-primitives/state").CreateStateProviderOptions) => import("@angular/core").FactoryProvider;
|
|
10
10
|
/**
|
|
11
11
|
* Injects the Textarea state.
|
|
12
12
|
*/
|
|
@@ -6,7 +6,7 @@ export declare const NgpToggleStateToken: import("@angular/core").InjectionToken
|
|
|
6
6
|
/**
|
|
7
7
|
* Provides the Toggle state.
|
|
8
8
|
*/
|
|
9
|
-
export declare const provideToggleState: () => import("@angular/core").FactoryProvider;
|
|
9
|
+
export declare const provideToggleState: (options?: import("ng-primitives/state").CreateStateProviderOptions) => import("@angular/core").FactoryProvider;
|
|
10
10
|
/**
|
|
11
11
|
* Injects the Toggle state.
|
|
12
12
|
*/
|
|
@@ -6,7 +6,7 @@ export declare const NgpToggleGroupStateToken: import("@angular/core").Injection
|
|
|
6
6
|
/**
|
|
7
7
|
* Provides the ToggleGroup state.
|
|
8
8
|
*/
|
|
9
|
-
export declare const provideToggleGroupState: () => import("@angular/core").FactoryProvider;
|
|
9
|
+
export declare const provideToggleGroupState: (options?: import("ng-primitives/state").CreateStateProviderOptions) => import("@angular/core").FactoryProvider;
|
|
10
10
|
/**
|
|
11
11
|
* Injects the ToggleGroup state.
|
|
12
12
|
*/
|
|
@@ -6,7 +6,7 @@ export declare const NgpToggleGroupItemStateToken: import("@angular/core").Injec
|
|
|
6
6
|
/**
|
|
7
7
|
* Provides the ToggleGroupItem state.
|
|
8
8
|
*/
|
|
9
|
-
export declare const provideToggleGroupItemState: () => import("@angular/core").FactoryProvider;
|
|
9
|
+
export declare const provideToggleGroupItemState: (options?: import("ng-primitives/state").CreateStateProviderOptions) => import("@angular/core").FactoryProvider;
|
|
10
10
|
/**
|
|
11
11
|
* Injects the ToggleGroupItem state.
|
|
12
12
|
*/
|
package/tooltip/index.d.ts
CHANGED
|
@@ -2,3 +2,4 @@ export { NgpTooltipConfig, provideTooltipConfig } from './config/tooltip-config'
|
|
|
2
2
|
export { NgpTooltipTrigger } from './tooltip-trigger/tooltip-trigger';
|
|
3
3
|
export { injectTooltipTriggerState, provideTooltipTriggerState, } from './tooltip-trigger/tooltip-trigger-state';
|
|
4
4
|
export { NgpTooltip } from './tooltip/tooltip';
|
|
5
|
+
export { injectTooltipContext, NgpTooltipContextToken, provideTooltipContext, } from './tooltip/tooltip-token';
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { InjectionToken, ValueProvider } from '@angular/core';
|
|
2
|
+
export declare const NgpTooltipContextToken: InjectionToken<unknown>;
|
|
3
|
+
/**
|
|
4
|
+
* Inject the Tooltip context
|
|
5
|
+
*/
|
|
6
|
+
export declare function injectTooltipContext<T>(): T;
|
|
7
|
+
/**
|
|
8
|
+
* Provide the Tooltip directive instance
|
|
9
|
+
*/
|
|
10
|
+
export declare function provideTooltipContext<T>(context: T): ValueProvider;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { OnInit } from '@angular/core';
|
|
2
2
|
import * as i0 from "@angular/core";
|
|
3
|
+
import * as i1 from "ng-primitives/internal";
|
|
3
4
|
/**
|
|
4
5
|
* Apply the `ngpTooltip` directive to an element that represents the tooltip. This typically would be a `div` inside an `ng-template`.
|
|
5
6
|
*/
|
|
@@ -30,5 +31,5 @@ export declare class NgpTooltip implements OnInit {
|
|
|
30
31
|
protected readonly transformOrigin: import("@angular/core").Signal<string>;
|
|
31
32
|
ngOnInit(): void;
|
|
32
33
|
static ɵfac: i0.ɵɵFactoryDeclaration<NgpTooltip, never>;
|
|
33
|
-
static ɵdir: i0.ɵɵDirectiveDeclaration<NgpTooltip, "[ngpTooltip]", ["ngpTooltip"], {}, {}, never, never, true,
|
|
34
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<NgpTooltip, "[ngpTooltip]", ["ngpTooltip"], {}, {}, never, never, true, [{ directive: typeof i1.NgpExitAnimation; inputs: {}; outputs: {}; }]>;
|
|
34
35
|
}
|
|
@@ -4,15 +4,15 @@ import type { NgpTooltipTrigger } from './tooltip-trigger';
|
|
|
4
4
|
/**
|
|
5
5
|
* The state token for the TooltipTrigger primitive.
|
|
6
6
|
*/
|
|
7
|
-
export declare const NgpTooltipTriggerStateToken: import("@angular/core").InjectionToken<NgpTooltipTrigger
|
|
7
|
+
export declare const NgpTooltipTriggerStateToken: import("@angular/core").InjectionToken<NgpTooltipTrigger<unknown>>;
|
|
8
8
|
/**
|
|
9
9
|
* Provides the TooltipTrigger state.
|
|
10
10
|
*/
|
|
11
|
-
export declare const provideTooltipTriggerState: () => import("@angular/core").FactoryProvider;
|
|
11
|
+
export declare const provideTooltipTriggerState: (options?: import("ng-primitives/state").CreateStateProviderOptions) => import("@angular/core").FactoryProvider;
|
|
12
12
|
/**
|
|
13
13
|
* Injects the TooltipTrigger state.
|
|
14
14
|
*/
|
|
15
|
-
export declare const injectTooltipTriggerState: () => Signal<State<NgpTooltipTrigger
|
|
15
|
+
export declare const injectTooltipTriggerState: <T>() => Signal<State<NgpTooltipTrigger<T>>>;
|
|
16
16
|
/**
|
|
17
17
|
* The TooltipTrigger state registration function.
|
|
18
18
|
*/
|
|
@@ -1,11 +1,15 @@
|
|
|
1
1
|
import { BooleanInput, NumberInput } from '@angular/cdk/coercion';
|
|
2
|
-
import { OnDestroy, TemplateRef } from '@angular/core';
|
|
2
|
+
import { ComponentRef, EmbeddedViewRef, OnDestroy, TemplateRef, Type } from '@angular/core';
|
|
3
3
|
import { Placement } from '@floating-ui/dom';
|
|
4
4
|
import * as i0 from "@angular/core";
|
|
5
5
|
/**
|
|
6
6
|
* Apply the `ngpTooltipTrigger` directive to an element that triggers the tooltip to show.
|
|
7
7
|
*/
|
|
8
|
-
export declare class NgpTooltipTrigger implements OnDestroy {
|
|
8
|
+
export declare class NgpTooltipTrigger<T = null> implements OnDestroy {
|
|
9
|
+
/**
|
|
10
|
+
* Access the exit animation manager.
|
|
11
|
+
*/
|
|
12
|
+
private readonly exitAnimationManager;
|
|
9
13
|
/**
|
|
10
14
|
* Access the trigger element
|
|
11
15
|
*/
|
|
@@ -33,16 +37,7 @@ export declare class NgpTooltipTrigger implements OnDestroy {
|
|
|
33
37
|
/**
|
|
34
38
|
* Access the tooltip template ref.
|
|
35
39
|
*/
|
|
36
|
-
readonly tooltip: import("@angular/core").InputSignal<
|
|
37
|
-
/**
|
|
38
|
-
* The open state of the tooltip.
|
|
39
|
-
* @default false
|
|
40
|
-
*/
|
|
41
|
-
readonly open: import("@angular/core").InputSignalWithTransform<boolean, BooleanInput>;
|
|
42
|
-
/**
|
|
43
|
-
* Emit an event when the tooltip is opened or closed.
|
|
44
|
-
*/
|
|
45
|
-
readonly openChange: import("@angular/core").OutputEmitterRef<boolean>;
|
|
40
|
+
readonly tooltip: import("@angular/core").InputSignal<NgpTooltipContent<T> | null>;
|
|
46
41
|
/**
|
|
47
42
|
* Define if the trigger should be disabled.
|
|
48
43
|
* @default false
|
|
@@ -78,10 +73,15 @@ export declare class NgpTooltipTrigger implements OnDestroy {
|
|
|
78
73
|
* @default document.body
|
|
79
74
|
*/
|
|
80
75
|
readonly container: import("@angular/core").InputSignal<HTMLElement | null>;
|
|
76
|
+
/**
|
|
77
|
+
* Provide context to the tooltip.
|
|
78
|
+
* @default null
|
|
79
|
+
*/
|
|
80
|
+
readonly context: import("@angular/core").InputSignal<T | null>;
|
|
81
81
|
/**
|
|
82
82
|
* Store the tooltip view ref.
|
|
83
83
|
*/
|
|
84
|
-
|
|
84
|
+
protected viewRef: ComponentRef<unknown> | EmbeddedViewRef<T> | null;
|
|
85
85
|
/**
|
|
86
86
|
* Derive the tooltip middleware from the provided configuration.
|
|
87
87
|
*/
|
|
@@ -103,17 +103,38 @@ export declare class NgpTooltipTrigger implements OnDestroy {
|
|
|
103
103
|
* Store the trigger width.
|
|
104
104
|
*/
|
|
105
105
|
readonly width: import("@angular/core").WritableSignal<number | null>;
|
|
106
|
+
/**
|
|
107
|
+
* @internal
|
|
108
|
+
* The timeout to open the tooltip.
|
|
109
|
+
*/
|
|
110
|
+
private openTimeout?;
|
|
111
|
+
/**
|
|
112
|
+
* @internal
|
|
113
|
+
* The timeout to close the tooltip.
|
|
114
|
+
*/
|
|
115
|
+
private closeTimeout?;
|
|
106
116
|
/**
|
|
107
117
|
* Store the state of the tooltip.
|
|
108
118
|
* @internal
|
|
109
119
|
*/
|
|
110
|
-
readonly state: import("ng-primitives/state").CreatedState<NgpTooltipTrigger
|
|
120
|
+
readonly state: import("ng-primitives/state").CreatedState<NgpTooltipTrigger<T>>;
|
|
111
121
|
constructor();
|
|
112
122
|
ngOnDestroy(): void;
|
|
113
|
-
|
|
114
|
-
|
|
123
|
+
/**
|
|
124
|
+
* Show the tooltip.
|
|
125
|
+
*/
|
|
126
|
+
show(): void;
|
|
127
|
+
/**
|
|
128
|
+
* Hide the tooltip.
|
|
129
|
+
*/
|
|
130
|
+
hide(): void;
|
|
115
131
|
private createTooltip;
|
|
116
132
|
private destroyTooltip;
|
|
117
|
-
static ɵfac: i0.ɵɵFactoryDeclaration<NgpTooltipTrigger
|
|
118
|
-
static ɵdir: i0.ɵɵDirectiveDeclaration<NgpTooltipTrigger
|
|
133
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<NgpTooltipTrigger<any>, never>;
|
|
134
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<NgpTooltipTrigger<any>, "[ngpTooltipTrigger]", ["ngpTooltipTrigger"], { "tooltip": { "alias": "ngpTooltipTrigger"; "required": false; "isSignal": true; }; "disabled": { "alias": "ngpTooltipTriggerDisabled"; "required": false; "isSignal": true; }; "placement": { "alias": "ngpTooltipTriggerPlacement"; "required": false; "isSignal": true; }; "offset": { "alias": "ngpTooltipTriggerOffset"; "required": false; "isSignal": true; }; "showDelay": { "alias": "ngpTooltipTriggerShowDelay"; "required": false; "isSignal": true; }; "hideDelay": { "alias": "ngpTooltipTriggerHideDelay"; "required": false; "isSignal": true; }; "flip": { "alias": "ngpTooltipTriggerFlip"; "required": false; "isSignal": true; }; "container": { "alias": "ngpTooltipTriggerContainer"; "required": false; "isSignal": true; }; "context": { "alias": "ngpTooltipTriggerContext"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
119
135
|
}
|
|
136
|
+
type NgpTooltipTemplateContext<T> = {
|
|
137
|
+
$implicit: T;
|
|
138
|
+
};
|
|
139
|
+
type NgpTooltipContent<T> = TemplateRef<NgpTooltipTemplateContext<T>> | Type<unknown>;
|
|
140
|
+
export {};
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import { ExistingProvider, InjectionToken, Type } from '@angular/core';
|
|
2
|
-
import type { NgpTabset } from './tabset';
|
|
3
|
-
export declare const NgpTabsetToken: InjectionToken<NgpTabset>;
|
|
4
|
-
/**
|
|
5
|
-
* Inject the Tabset directive instance
|
|
6
|
-
*/
|
|
7
|
-
export declare function injectTabset(): NgpTabset;
|
|
8
|
-
/**
|
|
9
|
-
* Provide the Tabset directive instance
|
|
10
|
-
*/
|
|
11
|
-
export declare function provideTabset(type: Type<NgpTabset>): ExistingProvider;
|