@leanix/components 0.4.818 → 0.4.819
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/fesm2022/leanix-components.mjs +1742 -123
- package/fesm2022/leanix-components.mjs.map +1 -1
- package/lib/core-ui/components/avatar/avatar.component.d.ts +27 -0
- package/lib/core-ui/components/avatar-group/avatar-group.component.d.ts +45 -0
- package/lib/core-ui/components/badge/badge.component.d.ts +10 -0
- package/lib/core-ui/components/banner/banner.component.d.ts +18 -0
- package/lib/core-ui/components/button/button.component.d.ts +22 -0
- package/lib/core-ui/components/button-group/button-group.component.d.ts +26 -0
- package/lib/core-ui/components/card/card.component.d.ts +16 -3
- package/lib/core-ui/components/collapsible/collapsible.component.d.ts +39 -0
- package/lib/core-ui/components/counter/counter.component.d.ts +20 -3
- package/lib/core-ui/components/ellipsis/ellipsis.component.d.ts +13 -0
- package/lib/core-ui/components/empty-state/empty-state.component.d.ts +38 -15
- package/lib/core-ui/components/page-header/page-header.component.d.ts +2 -1
- package/lib/core-ui/components/skeleton/skeleton.component.d.ts +16 -4
- package/lib/core-ui/components/spinner/spinner.component.d.ts +15 -0
- package/lib/core-ui/components/stepper/stepper.component.d.ts +23 -0
- package/lib/core-ui/components/table/table-header/table-header.component.d.ts +26 -5
- package/lib/core-ui/components/table/table.component.d.ts +25 -2
- package/lib/core-ui/components/tokenizer/token/token.component.d.ts +16 -0
- package/lib/core-ui/components/tokenizer/tokenizer-overflow-popover/tokenizer-overflow-popover.component.d.ts +38 -0
- package/lib/core-ui/components/tokenizer/tokenizer.component.d.ts +22 -5
- package/lib/core-ui/icon/fa-to-sap-icon.pipe.d.ts +2 -1
- package/lib/core-ui/tooltip/tooltip.component.d.ts +30 -0
- package/lib/forms-ui/components/basic-dropdown/basic-dropdown.component.d.ts +79 -0
- package/lib/forms-ui/components/basic-dropdown-item/basic-dropdown-item.component.d.ts +36 -0
- package/lib/forms-ui/components/breadcrumb/breadcrumb.component.d.ts +20 -2
- package/lib/forms-ui/components/cdk-options-dropdown/cdk-options-dropdown.component.d.ts +34 -0
- package/lib/forms-ui/components/cdk-options-sub-dropdown/cdk-options-sub-dropdown.component.d.ts +21 -0
- package/lib/forms-ui/components/currency/currency-input.component.d.ts +53 -0
- package/lib/forms-ui/components/currency/currency-symbol.component.d.ts +16 -0
- package/lib/forms-ui/components/date-input/date-input.component.d.ts +135 -33
- package/lib/forms-ui/components/date-picker-ui/datepicker-inner.component.d.ts +35 -0
- package/lib/forms-ui/components/date-picker-ui/daypicker.component.d.ts +6 -0
- package/lib/forms-ui/components/date-picker-ui/monthpicker.component.d.ts +6 -0
- package/lib/forms-ui/components/date-picker-ui/yearpicker.component.d.ts +6 -0
- package/lib/forms-ui/components/drag-and-drop-list/drag-and-drop-list-item/drag-and-drop-list-item.component.d.ts +27 -2
- package/lib/forms-ui/components/drag-and-drop-list/drag-and-drop-list.component.d.ts +37 -6
- package/lib/forms-ui/components/error-message/error-message.component.d.ts +15 -0
- package/lib/forms-ui/components/form-error/form-error.component.d.ts +18 -0
- package/lib/forms-ui/components/input/input.component.d.ts +27 -0
- package/lib/forms-ui/components/multi-select/multi-select-selection/multi-select-selection.component.d.ts +30 -0
- package/lib/forms-ui/components/multi-select/multi-select.component.d.ts +80 -0
- package/lib/forms-ui/components/option/option.component.d.ts +41 -0
- package/lib/forms-ui/components/option-group/option-group.component.d.ts +24 -2
- package/lib/forms-ui/components/option-group-dropdown/option-group-dropdown.component.d.ts +51 -4
- package/lib/forms-ui/components/options-dropdown/options-dropdown.component.d.ts +73 -0
- package/lib/forms-ui/components/options-sub-dropdown/options-sub-dropdown.component.d.ts +22 -0
- package/lib/forms-ui/components/picker/picker.component.d.ts +25 -17
- package/lib/forms-ui/components/picker-option/picker-option.component.d.ts +34 -5
- package/lib/forms-ui/components/pill-item/pill-item.component.d.ts +25 -0
- package/lib/forms-ui/components/pill-list/pill-list.component.d.ts +58 -2
- package/lib/forms-ui/components/responsive-input/responsive-input.component.d.ts +20 -0
- package/lib/forms-ui/components/rich-text-editor/components/rich-text-editor-toolbar/rich-text-editor-toolbar.component.d.ts +26 -0
- package/lib/forms-ui/components/rich-text-editor/extensions/link/components/link-modal/link-modal.component.d.ts +15 -0
- package/lib/forms-ui/components/rich-text-editor/extensions/table/table-bubble-menu/table-bubble-menu.component.d.ts +17 -0
- package/lib/forms-ui/components/rich-text-editor/ngx-tiptap/node-view.component.d.ts +14 -0
- package/lib/forms-ui/components/single-select/single-select.component.d.ts +39 -0
- package/lib/forms-ui/components/sorting-dropdown/sorting-dropdown.component.d.ts +24 -0
- package/lib/forms-ui/components/sorting-dropdown-trigger/sorting-dropdown-trigger.component.d.ts +20 -0
- package/lib/forms-ui/components/switch/switch.component.d.ts +37 -8
- package/lib/modal-ui/components/modal-footer/modal-footer.component.d.ts +19 -0
- package/lib/modal-ui/components/modal-header/modal-header.component.d.ts +22 -0
- package/lib/popover-ui/components/popover/popover.component.d.ts +15 -24
- package/lib/tab-ui/components/tab/tab.component.d.ts +66 -5
- package/lib/tab-ui/components/tab-group/tab-group.component.d.ts +29 -1
- package/package.json +1 -1
|
@@ -1,12 +1,32 @@
|
|
|
1
1
|
import { ElementRef, EventEmitter } from '@angular/core';
|
|
2
2
|
import { OptionGroupComponent } from '../option-group/option-group.component';
|
|
3
3
|
import * as i0 from "@angular/core";
|
|
4
|
+
/**
|
|
5
|
+
* Individual option used inside OptionsDropdownComponent, SingleSelectComponent, or MultiSelectComponent.
|
|
6
|
+
* Can be used standalone or grouped within an OptionGroupComponent for organized selections.
|
|
7
|
+
*/
|
|
4
8
|
export declare class OptionComponent {
|
|
5
9
|
private group;
|
|
6
10
|
elementRef: ElementRef<HTMLElement>;
|
|
11
|
+
/**
|
|
12
|
+
* Whether the option is currently selected.
|
|
13
|
+
* @default false
|
|
14
|
+
*/
|
|
7
15
|
selected: boolean;
|
|
16
|
+
/**
|
|
17
|
+
* Whether the option is currently highlighted (e.g., via keyboard navigation).
|
|
18
|
+
* @default false
|
|
19
|
+
*/
|
|
8
20
|
isHighlighted: boolean;
|
|
21
|
+
/**
|
|
22
|
+
* Whether the option is disabled and cannot be interacted with.
|
|
23
|
+
* @default false
|
|
24
|
+
*/
|
|
9
25
|
disabled: boolean;
|
|
26
|
+
/**
|
|
27
|
+
* The value associated with this option.
|
|
28
|
+
* Emitted when the option is selected.
|
|
29
|
+
*/
|
|
10
30
|
value: any;
|
|
11
31
|
/**
|
|
12
32
|
* Is true when option has a selection nature like sorting.
|
|
@@ -14,16 +34,37 @@ export declare class OptionComponent {
|
|
|
14
34
|
*
|
|
15
35
|
* Is false when option represents a one time action like printing.
|
|
16
36
|
* Cannot have selectedState when Option has dropdown
|
|
37
|
+
* @default true
|
|
17
38
|
*/
|
|
18
39
|
hasSelectedState: boolean;
|
|
19
40
|
/**
|
|
41
|
+
* The icon used to indicate selection state.
|
|
42
|
+
* @default 'check'
|
|
20
43
|
* @deprecated Use the default `'check'` value. The `'circle'` option is deprecated and will be removed in a future release.
|
|
21
44
|
*/
|
|
22
45
|
selectIcon: 'check' | 'circle';
|
|
46
|
+
/**
|
|
47
|
+
* Event emitted when the option is selected.
|
|
48
|
+
* Emits the option's value.
|
|
49
|
+
*/
|
|
23
50
|
select: EventEmitter<any>;
|
|
51
|
+
/**
|
|
52
|
+
* Event emitted when the option's highlight state changes.
|
|
53
|
+
* Emits a boolean indicating the new highlight state.
|
|
54
|
+
*/
|
|
24
55
|
highlight: EventEmitter<boolean>;
|
|
56
|
+
/**
|
|
57
|
+
* Event emitted when an already selected option is clicked.
|
|
58
|
+
*/
|
|
25
59
|
selectedClick: EventEmitter<any>;
|
|
60
|
+
/**
|
|
61
|
+
* Event emitted when a keyboard event occurs on the option.
|
|
62
|
+
* Emits the KeyboardEvent for parent handling.
|
|
63
|
+
*/
|
|
26
64
|
keyDownAction: EventEmitter<KeyboardEvent>;
|
|
65
|
+
/**
|
|
66
|
+
* Event emitted when the mouse enters the option area.
|
|
67
|
+
*/
|
|
27
68
|
mouseEnter: EventEmitter<number>;
|
|
28
69
|
option?: ElementRef<HTMLElement>;
|
|
29
70
|
hasSubdropdown: boolean;
|
|
@@ -1,12 +1,34 @@
|
|
|
1
1
|
import { EventEmitter } from '@angular/core';
|
|
2
2
|
import * as i0 from "@angular/core";
|
|
3
|
+
/**
|
|
4
|
+
* Groups options under a labeled section inside dropdowns.
|
|
5
|
+
* Used to organize related options within OptionsDropdownComponent, SingleSelectComponent, or MultiSelectComponent.
|
|
6
|
+
*
|
|
7
|
+
* ### Projection slots
|
|
8
|
+
* - Default slot: Option components (`lx-option`) to group together.
|
|
9
|
+
*
|
|
10
|
+
* ### Example
|
|
11
|
+
* @example
|
|
12
|
+
* ```html
|
|
13
|
+
* <lx-option-group label="Recent Items" [hasSelectedState]="true">
|
|
14
|
+
* <lx-option [value]="1">Item 1</lx-option>
|
|
15
|
+
* <lx-option [value]="2">Item 2</lx-option>
|
|
16
|
+
* </lx-option-group>
|
|
17
|
+
* ```
|
|
18
|
+
*/
|
|
3
19
|
export declare class OptionGroupComponent {
|
|
4
20
|
/**
|
|
5
|
-
*
|
|
6
|
-
*
|
|
21
|
+
* Whether option children have a selected state.
|
|
22
|
+
* When true, aligns the padding of the group label with the options.
|
|
23
|
+
* @default true
|
|
7
24
|
*/
|
|
8
25
|
hasSelectedState: boolean;
|
|
26
|
+
/** The label text displayed for the option group. */
|
|
9
27
|
label: string;
|
|
28
|
+
/**
|
|
29
|
+
* Event emitted when an option within the group is selected.
|
|
30
|
+
* Emits the selected option's value.
|
|
31
|
+
*/
|
|
10
32
|
select: EventEmitter<any>;
|
|
11
33
|
selectOption(value: any): void;
|
|
12
34
|
static ɵfac: i0.ɵɵFactoryDeclaration<OptionGroupComponent, never>;
|
|
@@ -14,27 +14,74 @@ export type SingleSelectOptionGroup<T = any> = {
|
|
|
14
14
|
options: (OptionGroupOption | T)[];
|
|
15
15
|
};
|
|
16
16
|
/**
|
|
17
|
-
*
|
|
18
|
-
*
|
|
19
|
-
*
|
|
17
|
+
* Dropdown component that displays options grouped by categories.
|
|
18
|
+
* Supports keyboard navigation, infinite scroll, custom templates, and creating new options.
|
|
19
|
+
* Used standalone or with SingleSelectComponent/MultiSelectComponent.
|
|
20
|
+
*
|
|
21
|
+
* ### Projection slots
|
|
22
|
+
* - `optionTemplate`: Template for custom option rendering (context: `$implicit`, `index`, `groupIndex`).
|
|
23
|
+
* - `noResultsOptionTemplateRef`: Template for custom "no results" message (context: `group`, `groupIndex`).
|
|
24
|
+
*
|
|
25
|
+
* ### Example
|
|
26
|
+
* @example
|
|
27
|
+
* ```html
|
|
28
|
+
* <lx-option-group-dropdown
|
|
29
|
+
* [optionGroups]="groups"
|
|
30
|
+
* [highlightTerm]="searchTerm"
|
|
31
|
+
* (onItemSelected)="handleSelection($event)">
|
|
32
|
+
* <ng-template #optionTemplate let-option>
|
|
33
|
+
* <span>{{ option.label }}</span>
|
|
34
|
+
* </ng-template>
|
|
35
|
+
* </lx-option-group-dropdown>
|
|
36
|
+
* ```
|
|
20
37
|
*/
|
|
21
38
|
export declare class OptionGroupDropdownComponent extends KeyboardSelectDirective {
|
|
22
39
|
/** @internal */
|
|
23
40
|
readonly NAME = "OptionGroupDropdownComponent";
|
|
41
|
+
/**
|
|
42
|
+
* Array of option groups to display in the dropdown.
|
|
43
|
+
* @default []
|
|
44
|
+
*/
|
|
24
45
|
optionGroups: SingleSelectOptionGroup[];
|
|
25
46
|
/**
|
|
26
|
-
*
|
|
47
|
+
* Label for the "create new option" entry.
|
|
48
|
+
* Typically the current input value from a parent select component.
|
|
27
49
|
*/
|
|
28
50
|
newOptionLabel?: string;
|
|
51
|
+
/** Term to highlight in option labels. */
|
|
29
52
|
highlightTerm?: string;
|
|
53
|
+
/**
|
|
54
|
+
* Whether to show a "create new option" entry at the top of the dropdown.
|
|
55
|
+
* @default false
|
|
56
|
+
*/
|
|
30
57
|
showCreateNewOption: boolean;
|
|
58
|
+
/**
|
|
59
|
+
* Property name to use as the label for each option.
|
|
60
|
+
* @default 'label'
|
|
61
|
+
*/
|
|
31
62
|
labelKey: string;
|
|
63
|
+
/**
|
|
64
|
+
* Whether the dropdown is in a loading state.
|
|
65
|
+
* @default false
|
|
66
|
+
*/
|
|
32
67
|
loading: boolean;
|
|
68
|
+
/** Property name to use for tracking options. */
|
|
33
69
|
trackByProperty?: string;
|
|
70
|
+
/**
|
|
71
|
+
* Whether to show "no results" message when a group has no options.
|
|
72
|
+
* @default false
|
|
73
|
+
*/
|
|
34
74
|
showNoResultsIfGroupIsEmpty: boolean;
|
|
75
|
+
/**
|
|
76
|
+
* Whether to use CDK overlay positioning for the dropdown.
|
|
77
|
+
* @default false
|
|
78
|
+
*/
|
|
35
79
|
overlayPositioning: boolean;
|
|
80
|
+
/** Event emitted when an option is selected. */
|
|
36
81
|
onItemSelected: EventEmitter<any>;
|
|
82
|
+
/** Event emitted when the dropdown container is scrolled (for infinite scroll). */
|
|
37
83
|
containerScrolled: EventEmitter<any>;
|
|
84
|
+
/** Event emitted when the user requests to create a new option. */
|
|
38
85
|
createNewOption: EventEmitter<string>;
|
|
39
86
|
/** @internal */
|
|
40
87
|
optionTemplateRef?: TemplateRef<any>;
|
|
@@ -4,19 +4,83 @@ import { Subject } from 'rxjs';
|
|
|
4
4
|
import { KeyboardActionSourceDirective } from '../../directives/keyboard-action-source.directive';
|
|
5
5
|
import { OptionComponent } from '../option/option.component';
|
|
6
6
|
import * as i0 from "@angular/core";
|
|
7
|
+
/**
|
|
8
|
+
* A dropdown component that displays a list of selectable options.
|
|
9
|
+
* The dropdown opens when triggered and provides keyboard navigation support for accessible option selection.
|
|
10
|
+
* It supports nested option groups and sub-dropdowns with full ARIA compliance.
|
|
11
|
+
*
|
|
12
|
+
* ### Projection slots
|
|
13
|
+
* - Default (trigger): The button or element that triggers the dropdown (must have `lxKeyboardActionSource` directive)
|
|
14
|
+
* - `lx-option`: Individual selectable options within the dropdown
|
|
15
|
+
* - `lx-option-group`: Optional groups of options with labels
|
|
16
|
+
*
|
|
17
|
+
* ### Example
|
|
18
|
+
* @example
|
|
19
|
+
* ```html
|
|
20
|
+
* <lx-options-dropdown [disabled]="disabled" [maxHeight]="maxHeight">
|
|
21
|
+
* <button lxKeyboardActionSource lx-button [disabled]="disabled" endIcon="slim-arrow-down">
|
|
22
|
+
* <span>{{ activeView?.label }}</span>
|
|
23
|
+
* </button>
|
|
24
|
+
* @for (viewGroup of viewGroups; track viewGroup.groupKey) {
|
|
25
|
+
* <lx-option-group [label]="'viewGroups.' + viewGroup.groupKey | translate">
|
|
26
|
+
* @for (view of viewGroup.views; track view.key) {
|
|
27
|
+
* <lx-option
|
|
28
|
+
* [selected]="view === activeView"
|
|
29
|
+
* (select)="applyView.emit(view.key)"
|
|
30
|
+
* >{{ view.label }}</lx-option>
|
|
31
|
+
* }
|
|
32
|
+
* </lx-option-group>
|
|
33
|
+
* }
|
|
34
|
+
* </lx-options-dropdown>
|
|
35
|
+
* ```
|
|
36
|
+
*/
|
|
7
37
|
export declare class OptionsDropdownComponent implements AfterViewInit, OnDestroy {
|
|
8
38
|
private changeDetection;
|
|
9
39
|
private readonly scrollStrategies;
|
|
10
40
|
private renderer;
|
|
11
41
|
/** @internal */
|
|
12
42
|
readonly NAME = "OptionsDropdownComponent";
|
|
43
|
+
/**
|
|
44
|
+
* The alignment of the dropdown relative to the trigger element.
|
|
45
|
+
* @default 'right'
|
|
46
|
+
*/
|
|
13
47
|
align: 'right' | 'left';
|
|
48
|
+
/**
|
|
49
|
+
* Whether the dropdown should close when the page is scrolled.
|
|
50
|
+
* @default false
|
|
51
|
+
*/
|
|
14
52
|
closeOnScroll: boolean;
|
|
53
|
+
/**
|
|
54
|
+
* Whether the dropdown is disabled and cannot be opened.
|
|
55
|
+
* @default false
|
|
56
|
+
*/
|
|
15
57
|
disabled: boolean;
|
|
58
|
+
/**
|
|
59
|
+
* The maximum height of the dropdown. Can be any valid CSS height value.
|
|
60
|
+
* @default 'none'
|
|
61
|
+
*/
|
|
16
62
|
maxHeight: string;
|
|
63
|
+
/**
|
|
64
|
+
* Whether the dropdown should close automatically when an option is selected.
|
|
65
|
+
* @default true
|
|
66
|
+
*/
|
|
17
67
|
closeOnSelect: boolean;
|
|
68
|
+
/**
|
|
69
|
+
* Whether to enable advanced overlay positioning using CDK overlay.
|
|
70
|
+
* Use when the dropdown is wider than its trigger or positioned near a viewport edge —
|
|
71
|
+
* enables CDK overlay positioning with automatic boundary detection to prevent off-screen clipping
|
|
72
|
+
* @default false
|
|
73
|
+
*/
|
|
18
74
|
overlayPositioning: boolean;
|
|
75
|
+
/**
|
|
76
|
+
* Additional CSS class to apply to the dropdown overlay.
|
|
77
|
+
* @default ''
|
|
78
|
+
*/
|
|
19
79
|
dropdownClass: string;
|
|
80
|
+
/**
|
|
81
|
+
* Whether the trigger container should use display flex instead of inline-block.
|
|
82
|
+
* @default false
|
|
83
|
+
*/
|
|
20
84
|
isFlexEnabledTriggerContainer: boolean;
|
|
21
85
|
/** @internal */
|
|
22
86
|
trigger: KeyboardActionSourceDirective;
|
|
@@ -25,8 +89,17 @@ export declare class OptionsDropdownComponent implements AfterViewInit, OnDestro
|
|
|
25
89
|
_options: QueryList<OptionComponent>;
|
|
26
90
|
/** @internal */
|
|
27
91
|
overlayScrollStrategy: ScrollStrategy;
|
|
92
|
+
/**
|
|
93
|
+
* Event emitted when the dropdown is opened.
|
|
94
|
+
*/
|
|
28
95
|
opened: EventEmitter<void>;
|
|
96
|
+
/**
|
|
97
|
+
* Event emitted when the dropdown is closed for any reason.
|
|
98
|
+
*/
|
|
29
99
|
closed: EventEmitter<void>;
|
|
100
|
+
/**
|
|
101
|
+
* Event emitted when the dropdown is closed without an option being selected (e.g., by pressing Escape or clicking outside).
|
|
102
|
+
*/
|
|
30
103
|
closedWithoutSelection: EventEmitter<void>;
|
|
31
104
|
/** @internal */
|
|
32
105
|
get displayStyle(): "inline-block" | "block";
|
|
@@ -2,9 +2,31 @@ import { AfterViewInit, ChangeDetectorRef, DestroyRef, OnDestroy, QueryList } fr
|
|
|
2
2
|
import { BehaviorSubject, Subject } from 'rxjs';
|
|
3
3
|
import { OptionComponent } from '../option/option.component';
|
|
4
4
|
import * as i0 from "@angular/core";
|
|
5
|
+
/**
|
|
6
|
+
* A nested sub-dropdown that appears next to a parent option.
|
|
7
|
+
* Opens on hover or keyboard navigation with debounced interactions.
|
|
8
|
+
* Automatically adjusts max height to fit viewport.
|
|
9
|
+
*
|
|
10
|
+
* ### Projection slots
|
|
11
|
+
* - Default slot: Nested dropdown options (`lx-option` components).
|
|
12
|
+
*
|
|
13
|
+
* ### Example
|
|
14
|
+
* @example
|
|
15
|
+
* ```html
|
|
16
|
+
* <lx-options-sub-dropdown [trigger]="parentOption" align="left">
|
|
17
|
+
* <lx-option [value]="1">Sub-option 1</lx-option>
|
|
18
|
+
* <lx-option [value]="2">Sub-option 2</lx-option>
|
|
19
|
+
* </lx-options-sub-dropdown>
|
|
20
|
+
* ```
|
|
21
|
+
*/
|
|
5
22
|
export declare class OptionsSubDropdownComponent implements AfterViewInit, OnDestroy {
|
|
6
23
|
private changeDetection;
|
|
24
|
+
/** The parent option component that triggers this sub-dropdown. */
|
|
7
25
|
trigger: OptionComponent;
|
|
26
|
+
/**
|
|
27
|
+
* Horizontal alignment of the sub-dropdown relative to the trigger option.
|
|
28
|
+
* @default 'right'
|
|
29
|
+
*/
|
|
8
30
|
align: 'right' | 'left';
|
|
9
31
|
options: QueryList<OptionComponent>;
|
|
10
32
|
hidden: boolean;
|
|
@@ -6,22 +6,26 @@ import { Subject } from 'rxjs';
|
|
|
6
6
|
import { PickerOptionComponent } from '../picker-option/picker-option.component';
|
|
7
7
|
import * as i0 from "@angular/core";
|
|
8
8
|
/**
|
|
9
|
-
*
|
|
10
|
-
*
|
|
11
|
-
* 1. A lxPickerTrigger, preferably a button element, which we use to open the dropdown on click or enter.
|
|
12
|
-
* 2. A list of `<li>` elements with an lx-picker-option attribute that own the option template as content children.
|
|
9
|
+
* A dropdown picker for selecting a value from a list of options.
|
|
10
|
+
* Supports keyboard navigation, `ControlValueAccessor` for reactive forms, and custom trigger elements.
|
|
13
11
|
*
|
|
14
|
-
*
|
|
12
|
+
* ### Projection slots
|
|
13
|
+
* - `lxPickerTrigger`: A button element used to open the dropdown on click or Enter
|
|
14
|
+
* - `li[lx-picker-option]`: List items representing selectable options
|
|
15
15
|
*
|
|
16
|
-
* Example
|
|
17
|
-
*
|
|
18
|
-
*
|
|
19
|
-
*
|
|
20
|
-
*
|
|
21
|
-
*
|
|
22
|
-
*
|
|
23
|
-
*
|
|
24
|
-
*
|
|
16
|
+
* ### Example
|
|
17
|
+
* @example
|
|
18
|
+
* ```html
|
|
19
|
+
* <lx-picker listBoxAriaLabel="Color picker">
|
|
20
|
+
* <button lxPickerTrigger lx-button mode="outline" size="large" [square]="true">
|
|
21
|
+
* {{ selection.label }}
|
|
22
|
+
* </button>
|
|
23
|
+
* @for (option of options; track option.id) {
|
|
24
|
+
* <li lx-picker-option [value]="option.value" [selected]="selection === option"
|
|
25
|
+
* (select)="selection = option" [optionId]="option.id">
|
|
26
|
+
* {{ option.label }}
|
|
27
|
+
* </li>
|
|
28
|
+
* }
|
|
25
29
|
* </lx-picker>
|
|
26
30
|
* ```
|
|
27
31
|
*/
|
|
@@ -30,14 +34,18 @@ export declare class PickerComponent implements AfterViewInit, ControlValueAcces
|
|
|
30
34
|
private cdRef;
|
|
31
35
|
/**
|
|
32
36
|
* A human-readable string value which identifies the listbox.
|
|
33
|
-
*
|
|
37
|
+
* Use this when there's no visible label. Otherwise use listBoxAriaLabelledBy.
|
|
34
38
|
*/
|
|
35
39
|
listBoxAriaLabel?: string;
|
|
36
40
|
/**
|
|
37
|
-
*
|
|
38
|
-
*
|
|
41
|
+
* ID of the visible element which labels the listbox.
|
|
42
|
+
* Use this when there's a visible label. Otherwise use listBoxAriaLabel.
|
|
39
43
|
*/
|
|
40
44
|
listBoxAriaLabelledBy?: string;
|
|
45
|
+
/**
|
|
46
|
+
* Direction the picker options dropdown opens.
|
|
47
|
+
* @default 'right'
|
|
48
|
+
*/
|
|
41
49
|
openDirection: 'left' | 'right';
|
|
42
50
|
/** @internal */
|
|
43
51
|
get activeDescendantsId(): string | undefined;
|
|
@@ -2,6 +2,28 @@ import { Highlightable } from '@angular/cdk/a11y';
|
|
|
2
2
|
import { ChangeDetectorRef, EventEmitter, OnInit } from '@angular/core';
|
|
3
3
|
import { TranslateService } from '@ngx-translate/core';
|
|
4
4
|
import * as i0 from "@angular/core";
|
|
5
|
+
/**
|
|
6
|
+
* Individual option within a picker dropdown.
|
|
7
|
+
*
|
|
8
|
+
* Must be a direct child of lx-picker.
|
|
9
|
+
*
|
|
10
|
+
* ### Projection slots
|
|
11
|
+
* - Default slot: Option content (text, icons, or custom elements). Hidden when `isClearOption` is true.
|
|
12
|
+
*
|
|
13
|
+
* ### Example
|
|
14
|
+
* @example
|
|
15
|
+
* ```html
|
|
16
|
+
* <lx-picker>
|
|
17
|
+
* <button lxPickerTrigger>Select</button>
|
|
18
|
+
* <li lx-picker-option [optionId]="'opt1'" [value]="'option1'" [ariaLabel]="'Option 1'">
|
|
19
|
+
* Option 1
|
|
20
|
+
* </li>
|
|
21
|
+
* <li lx-picker-option [optionId]="'opt2'" [value]="'option2'" [ariaLabel]="'Option 2'">
|
|
22
|
+
* Option 2
|
|
23
|
+
* </li>
|
|
24
|
+
* </lx-picker>
|
|
25
|
+
* ```
|
|
26
|
+
*/
|
|
5
27
|
export declare class PickerOptionComponent implements Highlightable, OnInit {
|
|
6
28
|
private cdRef;
|
|
7
29
|
private translateService;
|
|
@@ -12,18 +34,25 @@ export declare class PickerOptionComponent implements Highlightable, OnInit {
|
|
|
12
34
|
get titleValue(): string | undefined;
|
|
13
35
|
get id(): string;
|
|
14
36
|
/**
|
|
15
|
-
*
|
|
16
|
-
*
|
|
17
|
-
* button in the PickerComponent is adjusted to reflect the id attribute of the active option.
|
|
37
|
+
* Unique ID for the option. Must be unique within the picker.
|
|
38
|
+
* Used for aria-activedescendant tracking during keyboard navigation.
|
|
18
39
|
*/
|
|
19
40
|
optionId: string;
|
|
41
|
+
/** Accessible label for the option. */
|
|
20
42
|
ariaLabel?: string;
|
|
43
|
+
/** The value to emit when this option is selected. */
|
|
21
44
|
value: any;
|
|
45
|
+
/**
|
|
46
|
+
* Whether this option is currently selected.
|
|
47
|
+
* @default false
|
|
48
|
+
*/
|
|
22
49
|
selected: boolean;
|
|
23
|
-
isClearOption: boolean;
|
|
24
50
|
/**
|
|
25
|
-
*
|
|
51
|
+
* Whether this is a special "clear selection" option.
|
|
52
|
+
* @default false
|
|
26
53
|
*/
|
|
54
|
+
isClearOption: boolean;
|
|
55
|
+
/** Emitted when the option is selected. */
|
|
27
56
|
select: EventEmitter<any>;
|
|
28
57
|
/**
|
|
29
58
|
* This property is true, when the option was selected by mouse click or by the
|
|
@@ -1,11 +1,36 @@
|
|
|
1
1
|
import { EventEmitter } from '@angular/core';
|
|
2
2
|
import { MultiSelectRemoveItemEvent } from '../multi-select/multi-select.component';
|
|
3
3
|
import * as i0 from "@angular/core";
|
|
4
|
+
/**
|
|
5
|
+
* An individual pill/tag item with a remove button.
|
|
6
|
+
* Typically used within `lx-pill-list` to display selected items.
|
|
7
|
+
*
|
|
8
|
+
* ### Example
|
|
9
|
+
* @example
|
|
10
|
+
* ```html
|
|
11
|
+
* <lx-pill-item [item]="selectedItem"
|
|
12
|
+
* [label]="'Option A'"
|
|
13
|
+
* (remove)="onRemove($event)">
|
|
14
|
+
* </lx-pill-item>
|
|
15
|
+
* ```
|
|
16
|
+
*/
|
|
4
17
|
export declare class PillItemComponent {
|
|
5
18
|
readonly NAME = "PillItemComponent";
|
|
19
|
+
/**
|
|
20
|
+
* The data item associated with this pill.
|
|
21
|
+
*/
|
|
6
22
|
item: any;
|
|
23
|
+
/**
|
|
24
|
+
* The text label to display on the pill.
|
|
25
|
+
*/
|
|
7
26
|
label: string;
|
|
27
|
+
/**
|
|
28
|
+
* When set to true, disables the pill and prevents removal.
|
|
29
|
+
*/
|
|
8
30
|
disabled: boolean;
|
|
31
|
+
/**
|
|
32
|
+
* Event emitted when the pill is removed.
|
|
33
|
+
*/
|
|
9
34
|
remove: EventEmitter<MultiSelectRemoveItemEvent>;
|
|
10
35
|
removePill(item: any, isMouse?: boolean): void;
|
|
11
36
|
static ɵfac: i0.ɵɵFactoryDeclaration<PillItemComponent, never>;
|
|
@@ -3,15 +3,71 @@ import { KeyboardSelectDirective } from '../keyboard-select.directive';
|
|
|
3
3
|
import { MultiSelectRemoveItemEvent } from '../multi-select/multi-select.component';
|
|
4
4
|
import { PillItemComponent } from '../pill-item/pill-item.component';
|
|
5
5
|
import * as i0 from "@angular/core";
|
|
6
|
+
/**
|
|
7
|
+
* A container for displaying a list of removable pill/tag items.
|
|
8
|
+
* Commonly used inside `lx-multi-select` to show selected items.
|
|
9
|
+
*
|
|
10
|
+
* When used inside `lx-multi-select`, apply `class="pills"` for proper projection
|
|
11
|
+
* and wire up `[keyboardSelectAction]` for keyboard navigation.
|
|
12
|
+
*
|
|
13
|
+
* ### Projection slots
|
|
14
|
+
* - `#pillTemplate`: Optional custom template for rendering individual pills.
|
|
15
|
+
* Receives each pill as implicit context. Use when you need custom styling
|
|
16
|
+
* or attributes on individual pills.
|
|
17
|
+
*
|
|
18
|
+
* ### Example — Basic usage inside multi-select
|
|
19
|
+
* @example
|
|
20
|
+
* ```html
|
|
21
|
+
* <lx-pill-list
|
|
22
|
+
* class="pills"
|
|
23
|
+
* [keyboardSelectAction]="multiSelect.selectionKeyboardSelectAction$"
|
|
24
|
+
* [pills]="selectedItems"
|
|
25
|
+
* labelKey="name"
|
|
26
|
+
* itemKey="id"
|
|
27
|
+
* (remove)="multiSelect.removeItem($event)">
|
|
28
|
+
* </lx-pill-list>
|
|
29
|
+
* ```
|
|
30
|
+
*
|
|
31
|
+
* ### Example — Custom pill template
|
|
32
|
+
* @example
|
|
33
|
+
* ```html
|
|
34
|
+
* <lx-pill-list
|
|
35
|
+
* class="pills"
|
|
36
|
+
* [keyboardSelectAction]="multiSelect.selectionKeyboardSelectAction$"
|
|
37
|
+
* [pills]="selectedItems"
|
|
38
|
+
* itemKey="id"
|
|
39
|
+
* (remove)="multiSelect.removeItem($event)">
|
|
40
|
+
* <ng-template #pillTemplate let-pill>
|
|
41
|
+
* <lx-pill-item
|
|
42
|
+
* [label]="pill.name"
|
|
43
|
+
* [item]="pill"
|
|
44
|
+
* [class.readOnly]="pill.readOnly">
|
|
45
|
+
* </lx-pill-item>
|
|
46
|
+
* </ng-template>
|
|
47
|
+
* </lx-pill-list>
|
|
48
|
+
* ```
|
|
49
|
+
*/
|
|
6
50
|
export declare class PillListComponent extends KeyboardSelectDirective implements AfterViewInit {
|
|
51
|
+
/**
|
|
52
|
+
* Array of items to display as pills.
|
|
53
|
+
*/
|
|
7
54
|
pills: any[];
|
|
55
|
+
/**
|
|
56
|
+
* Property name to use as the pill label from each item object.
|
|
57
|
+
*/
|
|
8
58
|
labelKey?: string;
|
|
9
59
|
/**
|
|
10
|
-
*
|
|
11
|
-
*
|
|
60
|
+
* Property name to use as unique identifier for each item.
|
|
61
|
+
* Used in the trackBy function for better performance.
|
|
12
62
|
*/
|
|
13
63
|
itemKey?: string;
|
|
64
|
+
/**
|
|
65
|
+
* When set to true, disables removal of pills.
|
|
66
|
+
*/
|
|
14
67
|
disabled: boolean;
|
|
68
|
+
/**
|
|
69
|
+
* Event emitted when a pill is removed.
|
|
70
|
+
*/
|
|
15
71
|
remove: EventEmitter<MultiSelectRemoveItemEvent>;
|
|
16
72
|
/**
|
|
17
73
|
* If you provide an <ng-template #pillTemplate>, it will be used to render the individual pills inside of the lx-multi-select.
|
|
@@ -2,10 +2,30 @@ import { AfterViewInit, ElementRef, EventEmitter, OnDestroy } from '@angular/cor
|
|
|
2
2
|
import { ControlValueAccessor, UntypedFormControl } from '@angular/forms';
|
|
3
3
|
import { BehaviorSubject, Subject } from 'rxjs';
|
|
4
4
|
import * as i0 from "@angular/core";
|
|
5
|
+
/**
|
|
6
|
+
* Input that dynamically adjusts its width based on content length.
|
|
7
|
+
*
|
|
8
|
+
* Useful for inline editing or space-constrained layouts.
|
|
9
|
+
*
|
|
10
|
+
* ### Example
|
|
11
|
+
* @example
|
|
12
|
+
* ```html
|
|
13
|
+
* <lx-responsive-input
|
|
14
|
+
* [(ngModel)]="searchTerm"
|
|
15
|
+
* [inputId]="'search'"
|
|
16
|
+
* (focus)="onFocus()"
|
|
17
|
+
* (blur)="onBlur()"
|
|
18
|
+
* ></lx-responsive-input>
|
|
19
|
+
* ```
|
|
20
|
+
*/
|
|
5
21
|
export declare class ResponsiveInputComponent implements AfterViewInit, OnDestroy, ControlValueAccessor {
|
|
22
|
+
/** Optional ID attribute for the input element. */
|
|
6
23
|
inputId?: string;
|
|
24
|
+
/** Emitted when the input receives focus. */
|
|
7
25
|
focus: EventEmitter<void>;
|
|
26
|
+
/** Emitted when the input receives focus via Tab key. */
|
|
8
27
|
focusViaTab: EventEmitter<void>;
|
|
28
|
+
/** Emitted when the input loses focus. */
|
|
9
29
|
blur: EventEmitter<void>;
|
|
10
30
|
responsiveInput: ElementRef<HTMLInputElement>;
|
|
11
31
|
inputWidth: ElementRef<HTMLSpanElement>;
|
|
@@ -3,9 +3,35 @@ import { Editor } from '@tiptap/core';
|
|
|
3
3
|
import type { Level } from '@tiptap/extension-heading';
|
|
4
4
|
import { Transaction } from '@tiptap/pm/state';
|
|
5
5
|
import * as i0 from "@angular/core";
|
|
6
|
+
/**
|
|
7
|
+
* Toolbar component for the rich text editor providing formatting controls.
|
|
8
|
+
*
|
|
9
|
+
* Displays formatting buttons based on enabled Tiptap extensions, including text styles,
|
|
10
|
+
* bold/italic/underline, lists, alignment, links, code blocks, and table insertion.
|
|
11
|
+
* The toolbar visibility is controlled by the `isVisible` input and link modal state.
|
|
12
|
+
*
|
|
13
|
+
* ### Projection slots
|
|
14
|
+
* - `.diagram-btn`: Custom diagram button when `lxDiagram` extension is enabled
|
|
15
|
+
*
|
|
16
|
+
* ### Example
|
|
17
|
+
* @example
|
|
18
|
+
* ```html
|
|
19
|
+
* <lx-rich-text-editor-toolbar [editor]="editor" [isVisible]="true">
|
|
20
|
+
* <button class="diagram-btn" lx-button>Insert Diagram</button>
|
|
21
|
+
* </lx-rich-text-editor-toolbar>
|
|
22
|
+
* ```
|
|
23
|
+
*/
|
|
6
24
|
export declare class RichTextEditorToolbarComponent implements OnInit, OnDestroy {
|
|
7
25
|
NAME: string;
|
|
26
|
+
/**
|
|
27
|
+
* The Tiptap editor instance to control with this toolbar.
|
|
28
|
+
*/
|
|
8
29
|
editor: Editor;
|
|
30
|
+
/**
|
|
31
|
+
* Controls the visibility of the toolbar.
|
|
32
|
+
*
|
|
33
|
+
* @default true
|
|
34
|
+
*/
|
|
9
35
|
readonly isVisible: import("@angular/core").InputSignal<boolean>;
|
|
10
36
|
headingLevels: Level[];
|
|
11
37
|
private readonly isLinkModalOpen;
|
|
@@ -2,8 +2,23 @@ import { ChangeDetectorRef } from '@angular/core';
|
|
|
2
2
|
import { NgForm } from '@angular/forms';
|
|
3
3
|
import { Editor } from '@tiptap/core';
|
|
4
4
|
import * as i0 from "@angular/core";
|
|
5
|
+
/**
|
|
6
|
+
* Modal dialog for creating and editing hyperlinks in the rich text editor.
|
|
7
|
+
*
|
|
8
|
+
* Provides a form to input link text and URL with validation. Supports creating new links
|
|
9
|
+
* and editing existing ones. The modal state is managed by the link plugin.
|
|
10
|
+
*
|
|
11
|
+
* ### Example
|
|
12
|
+
* @example
|
|
13
|
+
* ```html
|
|
14
|
+
* <lx-link-modal [editor]="editor" />
|
|
15
|
+
* ```
|
|
16
|
+
*/
|
|
5
17
|
export declare class LinkModalComponent {
|
|
6
18
|
readonly NAME = "LinkModalComponent";
|
|
19
|
+
/**
|
|
20
|
+
* The Tiptap editor instance to insert or modify links in.
|
|
21
|
+
*/
|
|
7
22
|
editor: Editor;
|
|
8
23
|
readonly ngForm: import("@angular/core").Signal<NgForm>;
|
|
9
24
|
readonly cd: ChangeDetectorRef;
|