@leanix/components 0.4.853 → 0.4.855
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-ui5.mjs +9 -9
- package/fesm2022/leanix-components-ui5.mjs.map +1 -1
- package/fesm2022/leanix-components.mjs +483 -485
- package/fesm2022/leanix-components.mjs.map +1 -1
- package/index.d.ts +5283 -134
- package/package.json +10 -10
- package/ui5/index.d.ts +88 -8
- package/lib/core-ui/components/avatar/avatar.component.d.ts +0 -45
- package/lib/core-ui/components/avatar/avatar.helpers.d.ts +0 -8
- package/lib/core-ui/components/avatar/avatar.model.d.ts +0 -38
- package/lib/core-ui/components/avatar-group/avatar-group.component.d.ts +0 -75
- package/lib/core-ui/components/badge/badge.component.d.ts +0 -27
- package/lib/core-ui/components/banner/banner.component.d.ts +0 -40
- package/lib/core-ui/components/banner/banner.models.d.ts +0 -14
- package/lib/core-ui/components/button/button.component.d.ts +0 -87
- package/lib/core-ui/components/button-group/button-group.component.d.ts +0 -34
- package/lib/core-ui/components/card/card.component.d.ts +0 -26
- package/lib/core-ui/components/collapsible/collapsible.component.d.ts +0 -56
- package/lib/core-ui/components/counter/counter.component.d.ts +0 -32
- package/lib/core-ui/components/ellipsis/ellipsis.component.d.ts +0 -64
- package/lib/core-ui/components/empty-state/empty-state.component.d.ts +0 -83
- package/lib/core-ui/components/page-header/page-header.component.d.ts +0 -85
- package/lib/core-ui/components/skeleton/skeleton.component.d.ts +0 -40
- package/lib/core-ui/components/spinner/spinner.component.d.ts +0 -30
- package/lib/core-ui/components/stepper/stepper.component.d.ts +0 -76
- package/lib/core-ui/components/table/table-header/table-header.component.d.ts +0 -55
- package/lib/core-ui/components/table/table.component.d.ts +0 -83
- package/lib/core-ui/components/tokenizer/token/token.component.d.ts +0 -26
- package/lib/core-ui/components/tokenizer/tokenizer-overflow-popover/tokenizer-overflow-popover.component.d.ts +0 -57
- package/lib/core-ui/components/tokenizer/tokenizer.component.d.ts +0 -97
- package/lib/core-ui/core-ui.constants.d.ts +0 -16
- package/lib/core-ui/core-ui.module.d.ts +0 -72
- package/lib/core-ui/directives/after-view-init.directive.d.ts +0 -19
- package/lib/core-ui/directives/autoclose-group.service.d.ts +0 -12
- package/lib/core-ui/directives/autoclose.directive.d.ts +0 -26
- package/lib/core-ui/directives/autofocus.directive.d.ts +0 -13
- package/lib/core-ui/functions/core-css.helpers.d.ts +0 -10
- package/lib/core-ui/functions/highlight-text.function.d.ts +0 -29
- package/lib/core-ui/icon/fa-to-sap-icon.pipe.d.ts +0 -23
- package/lib/core-ui/icon/icon-map.d.ts +0 -13
- package/lib/core-ui/linkify/linkify.pipe.d.ts +0 -59
- package/lib/core-ui/linkify/unlinkify.pipe.d.ts +0 -20
- package/lib/core-ui/pipes/br.pipe.d.ts +0 -9
- package/lib/core-ui/pipes/contrast-color.pipe.d.ts +0 -7
- package/lib/core-ui/pipes/custom-date.pipe.d.ts +0 -28
- package/lib/core-ui/pipes/display-avatars.pipe.d.ts +0 -12
- package/lib/core-ui/pipes/highlight-range.pipe.d.ts +0 -9
- package/lib/core-ui/pipes/highlight-term.pipe.d.ts +0 -23
- package/lib/core-ui/pipes/lx-is-uuid.pipe.d.ts +0 -7
- package/lib/core-ui/pipes/lx-time-ago.pipe.d.ts +0 -8
- package/lib/core-ui/pipes/lx-translate.pipe.d.ts +0 -17
- package/lib/core-ui/pipes/markdown.pipe.d.ts +0 -14
- package/lib/core-ui/pipes/nbsp.pipe.d.ts +0 -7
- package/lib/core-ui/pipes/sort.pipe.d.ts +0 -13
- package/lib/core-ui/pipes/translation-after.pipe.d.ts +0 -17
- package/lib/core-ui/pipes/translation-before.pipe.d.ts +0 -32
- package/lib/core-ui/pipes/translation-between.pipe.d.ts +0 -37
- package/lib/core-ui/pipes/unescape-curly-braces.pipe.d.ts +0 -7
- package/lib/core-ui/services/resize-observer.service.d.ts +0 -33
- package/lib/core-ui/tooltip/to-cdk-position.function.d.ts +0 -3
- package/lib/core-ui/tooltip/tooltip-position.interface.d.ts +0 -6
- package/lib/core-ui/tooltip/tooltip.component.d.ts +0 -39
- package/lib/core-ui/tooltip/tooltip.directive.d.ts +0 -38
- package/lib/forms-ui/components/basic-dropdown/basic-dropdown.component.d.ts +0 -127
- package/lib/forms-ui/components/basic-dropdown-item/basic-dropdown-item.component.d.ts +0 -53
- package/lib/forms-ui/components/breadcrumb/breadcrumb.component.d.ts +0 -48
- package/lib/forms-ui/components/cdk-options-dropdown/cdk-options-dropdown.component.d.ts +0 -73
- package/lib/forms-ui/components/cdk-options-sub-dropdown/cdk-options-sub-dropdown.component.d.ts +0 -49
- package/lib/forms-ui/components/currency/currency-input.component.d.ts +0 -113
- package/lib/forms-ui/components/currency/currency-symbol-map.constant.d.ts +0 -3
- package/lib/forms-ui/components/currency/currency-symbol.component.d.ts +0 -27
- package/lib/forms-ui/components/date-input/date-input.component.d.ts +0 -259
- package/lib/forms-ui/components/date-picker-ui/date-formatter.d.ts +0 -4
- package/lib/forms-ui/components/date-picker-ui/datepicker-inner.component.d.ts +0 -113
- package/lib/forms-ui/components/date-picker-ui/datepicker-ui.module.d.ts +0 -9
- package/lib/forms-ui/components/date-picker-ui/datepicker.component.d.ts +0 -81
- package/lib/forms-ui/components/date-picker-ui/datepicker.config.d.ts +0 -22
- package/lib/forms-ui/components/date-picker-ui/daypicker.component.d.ts +0 -23
- package/lib/forms-ui/components/date-picker-ui/isBs3.d.ts +0 -1
- package/lib/forms-ui/components/date-picker-ui/monthpicker.component.d.ts +0 -20
- package/lib/forms-ui/components/date-picker-ui/yearpicker.component.d.ts +0 -20
- package/lib/forms-ui/components/drag-and-drop-list/constants.d.ts +0 -4
- package/lib/forms-ui/components/drag-and-drop-list/drag-and-drop-list-item/drag-and-drop-list-item.component.d.ts +0 -68
- package/lib/forms-ui/components/drag-and-drop-list/drag-and-drop-list.component.d.ts +0 -104
- package/lib/forms-ui/components/drag-and-drop-list/drag-and-drop-list.module.d.ts +0 -13
- package/lib/forms-ui/components/drag-and-drop-list/keyboard-sortable-item/keyboard-sortable-item.directive.d.ts +0 -38
- package/lib/forms-ui/components/drag-and-drop-list/keyboard-sortable-list/keyboard-sortable-list.directive.d.ts +0 -14
- package/lib/forms-ui/components/error-message/error-message.component.d.ts +0 -23
- package/lib/forms-ui/components/form-error/form-error.component.d.ts +0 -36
- package/lib/forms-ui/components/input/input.component.d.ts +0 -42
- package/lib/forms-ui/components/keyboard-select.directive.d.ts +0 -47
- package/lib/forms-ui/components/multi-select/multi-select-selection/multi-select-selection.component.d.ts +0 -41
- package/lib/forms-ui/components/multi-select/multi-select.component.d.ts +0 -172
- package/lib/forms-ui/components/option/option.component.d.ts +0 -81
- package/lib/forms-ui/components/option-group/option-group.component.d.ts +0 -36
- package/lib/forms-ui/components/option-group-dropdown/option-group-dropdown.component.d.ts +0 -113
- package/lib/forms-ui/components/options-dropdown/options-dropdown.component.d.ts +0 -149
- package/lib/forms-ui/components/options-sub-dropdown/options-sub-dropdown.component.d.ts +0 -48
- package/lib/forms-ui/components/picker/picker-trigger.directive.d.ts +0 -19
- package/lib/forms-ui/components/picker/picker.component.d.ts +0 -99
- package/lib/forms-ui/components/picker-option/picker-option.component.d.ts +0 -78
- package/lib/forms-ui/components/pill-item/pill-item.component.d.ts +0 -38
- package/lib/forms-ui/components/pill-list/pill-list.component.d.ts +0 -88
- package/lib/forms-ui/components/responsive-input/responsive-input.component.d.ts +0 -51
- package/lib/forms-ui/components/rich-text-editor/components/rich-text-editor/rich-text-editor.component.d.ts +0 -34
- package/lib/forms-ui/components/rich-text-editor/components/rich-text-editor-toolbar/rich-text-editor-toolbar.component.d.ts +0 -49
- package/lib/forms-ui/components/rich-text-editor/directives/focus-editor.directive.d.ts +0 -8
- package/lib/forms-ui/components/rich-text-editor/directives/tiptap-editor.directive.d.ts +0 -23
- package/lib/forms-ui/components/rich-text-editor/extensions/highlight-term/highlight-term-state.plugin.d.ts +0 -8
- package/lib/forms-ui/components/rich-text-editor/extensions/highlight-term/highlight-term.directive.d.ts +0 -8
- package/lib/forms-ui/components/rich-text-editor/extensions/highlight-term/highlight-term.extension.d.ts +0 -9
- package/lib/forms-ui/components/rich-text-editor/extensions/highlight-term/highlight-term.plugin.d.ts +0 -5
- package/lib/forms-ui/components/rich-text-editor/extensions/link/components/link-modal/link-modal.component.d.ts +0 -33
- package/lib/forms-ui/components/rich-text-editor/extensions/link/link.extension.d.ts +0 -8
- package/lib/forms-ui/components/rich-text-editor/extensions/link/link.plugin.d.ts +0 -10
- package/lib/forms-ui/components/rich-text-editor/extensions/link/url-validator.directive.d.ts +0 -7
- package/lib/forms-ui/components/rich-text-editor/extensions/table/index.d.ts +0 -2
- package/lib/forms-ui/components/rich-text-editor/extensions/table/table-bubble-menu/table-bubble-menu.component.d.ts +0 -30
- package/lib/forms-ui/components/rich-text-editor/extensions/table/table-extensions.d.ts +0 -4
- package/lib/forms-ui/components/rich-text-editor/extensions/table/utils.d.ts +0 -28
- package/lib/forms-ui/components/rich-text-editor/extensions/tracking/tracking.directive.d.ts +0 -8
- package/lib/forms-ui/components/rich-text-editor/extensions/tracking/tracking.extension.d.ts +0 -10
- package/lib/forms-ui/components/rich-text-editor/extensions/tracking/tracking.plugin.d.ts +0 -4
- package/lib/forms-ui/components/rich-text-editor/extensions/truncate/index.d.ts +0 -2
- package/lib/forms-ui/components/rich-text-editor/extensions/truncate/truncate-button.component.d.ts +0 -22
- package/lib/forms-ui/components/rich-text-editor/extensions/truncate/truncate.directive.d.ts +0 -9
- package/lib/forms-ui/components/rich-text-editor/extensions/truncate/truncate.extension.d.ts +0 -6
- package/lib/forms-ui/components/rich-text-editor/extensions/truncate/truncate.plugin.d.ts +0 -10
- package/lib/forms-ui/components/rich-text-editor/ngx-tiptap/AngularRenderer.d.ts +0 -12
- package/lib/forms-ui/components/rich-text-editor/ngx-tiptap/NodeViewRenderer.d.ts +0 -18
- package/lib/forms-ui/components/rich-text-editor/ngx-tiptap/editor.directive.d.ts +0 -24
- package/lib/forms-ui/components/rich-text-editor/ngx-tiptap/node-view.component.d.ts +0 -27
- package/lib/forms-ui/components/rich-text-editor/pipes/extension-enabled.pipe.d.ts +0 -8
- package/lib/forms-ui/components/rich-text-editor/pipes/remove-markdown.pipe.d.ts +0 -14
- package/lib/forms-ui/components/rich-text-editor/utils/extensions-builder.d.ts +0 -13
- package/lib/forms-ui/components/rich-text-editor/utils/features.d.ts +0 -3
- package/lib/forms-ui/components/single-select/single-select.component.d.ts +0 -120
- package/lib/forms-ui/components/sorting-dropdown/sorting-dropdown.component.d.ts +0 -47
- package/lib/forms-ui/components/sorting-dropdown-trigger/sorting-dropdown-trigger.component.d.ts +0 -28
- package/lib/forms-ui/components/switch/switch.component.d.ts +0 -57
- package/lib/forms-ui/directives/contenteditable.directive.d.ts +0 -28
- package/lib/forms-ui/directives/form-error.directive.d.ts +0 -41
- package/lib/forms-ui/directives/form-submit.directive.d.ts +0 -12
- package/lib/forms-ui/directives/keyboard-action-source.directive.d.ts +0 -16
- package/lib/forms-ui/directives/mark-invalid.directive.d.ts +0 -15
- package/lib/forms-ui/directives/max-length-counter.directive.d.ts +0 -25
- package/lib/forms-ui/directives/select-dropdown.directive.d.ts +0 -23
- package/lib/forms-ui/directives/selectable-item.directive.d.ts +0 -14
- package/lib/forms-ui/directives/selected-option.directive.d.ts +0 -18
- package/lib/forms-ui/forms-ui.module.d.ts +0 -74
- package/lib/forms-ui/helpers/key-codes.constants.d.ts +0 -11
- package/lib/forms-ui/helpers/keyboard-navigation.helpers.d.ts +0 -12
- package/lib/forms-ui/models/base-select.directive.d.ts +0 -75
- package/lib/forms-ui/models/dropdown-item.interface.d.ts +0 -5
- package/lib/forms-ui/models/single-select-padding.interface.d.ts +0 -1
- package/lib/forms-ui/models/sorting.interface.d.ts +0 -5
- package/lib/forms-ui/pipes/filter-selection.pipe.d.ts +0 -7
- package/lib/forms-ui/pipes/filter-term.pipe.d.ts +0 -10
- package/lib/forms-ui/pipes/format-number.pipe.d.ts +0 -23
- package/lib/forms-ui/validators/date-in-foreseeable-future.validator.d.ts +0 -11
- package/lib/forms-ui/validators/string-not-in-array.validator.d.ts +0 -7
- package/lib/modal-ui/components/modal/modal.component.d.ts +0 -119
- package/lib/modal-ui/components/modal-footer/modal-footer.component.d.ts +0 -25
- package/lib/modal-ui/components/modal-header/modal-header.component.d.ts +0 -29
- package/lib/modal-ui/directives/modal-content.directive.d.ts +0 -5
- package/lib/modal-ui/modal.constants.d.ts +0 -17
- package/lib/popover-ui/components/popover/popover.component.d.ts +0 -116
- package/lib/popover-ui/directives/popover-click.directive.d.ts +0 -23
- package/lib/popover-ui/directives/popover-content.directive.d.ts +0 -8
- package/lib/popover-ui/directives/popover-hover.directive.d.ts +0 -38
- package/lib/shared/date-helpers.d.ts +0 -16
- package/lib/shared/html-helpers.function.d.ts +0 -2
- package/lib/shared/json.helpers.d.ts +0 -7
- package/lib/shared/misc-helpers.d.ts +0 -8
- package/lib/shared/observe.d.ts +0 -8
- package/lib/shared/storybook.helpers.d.ts +0 -12
- package/lib/tab-ui/components/tab/tab.component.d.ts +0 -120
- package/lib/tab-ui/components/tab-group/tab-group-key-codes.enum.d.ts +0 -10
- package/lib/tab-ui/components/tab-group/tab-group.component.d.ts +0 -73
- package/ui5/components/breadcrumbs-item.component.d.ts +0 -22
- package/ui5/components/breadcrumbs.component.d.ts +0 -29
- package/ui5/icons/register-icons.d.ts +0 -4
- package/ui5/ui5.provider.d.ts +0 -15
- package/ui5/utils/get-outer-html-with-shadow-dom.d.ts +0 -15
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import { OnInit } from '@angular/core';
|
|
2
|
-
import { DatePickerInnerComponent } from './datepicker-inner.component';
|
|
3
|
-
import * as i0 from "@angular/core";
|
|
4
|
-
/**
|
|
5
|
-
* Month selection view for the datepicker.
|
|
6
|
-
*
|
|
7
|
-
* Displays a grid of months for selecting a month within a year.
|
|
8
|
-
* Used internally by DatePickerInnerComponent.
|
|
9
|
-
*/
|
|
10
|
-
export declare class MonthPickerComponent implements OnInit {
|
|
11
|
-
title: string;
|
|
12
|
-
rows: any[];
|
|
13
|
-
datePicker: DatePickerInnerComponent;
|
|
14
|
-
maxMode: string;
|
|
15
|
-
constructor(datePicker: DatePickerInnerComponent);
|
|
16
|
-
get isBs4(): boolean;
|
|
17
|
-
ngOnInit(): void;
|
|
18
|
-
static ɵfac: i0.ɵɵFactoryDeclaration<MonthPickerComponent, never>;
|
|
19
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<MonthPickerComponent, "monthpicker", never, {}, {}, never, never, true, never>;
|
|
20
|
-
}
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import { OnInit } from '@angular/core';
|
|
2
|
-
import { DatePickerInnerComponent } from './datepicker-inner.component';
|
|
3
|
-
import * as i0 from "@angular/core";
|
|
4
|
-
/**
|
|
5
|
-
* Year selection view for the datepicker.
|
|
6
|
-
*
|
|
7
|
-
* Displays a grid of years for selecting a year within a range.
|
|
8
|
-
* Used internally by DatePickerInnerComponent.
|
|
9
|
-
*/
|
|
10
|
-
export declare class YearPickerComponent implements OnInit {
|
|
11
|
-
datePicker: DatePickerInnerComponent;
|
|
12
|
-
title: string;
|
|
13
|
-
rows: any[];
|
|
14
|
-
constructor(datePicker: DatePickerInnerComponent);
|
|
15
|
-
get isBs4(): boolean;
|
|
16
|
-
ngOnInit(): void;
|
|
17
|
-
protected getStartingYear(year: number): number;
|
|
18
|
-
static ɵfac: i0.ɵɵFactoryDeclaration<YearPickerComponent, never>;
|
|
19
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<YearPickerComponent, "yearpicker", never, {}, {}, never, never, true, never>;
|
|
20
|
-
}
|
|
@@ -1,68 +0,0 @@
|
|
|
1
|
-
import { ElementRef, EventEmitter, TemplateRef } from '@angular/core';
|
|
2
|
-
import * as i0 from "@angular/core";
|
|
3
|
-
export interface DragAndDropListAction {
|
|
4
|
-
/**
|
|
5
|
-
* The id of the action item, must be unique
|
|
6
|
-
*/
|
|
7
|
-
id: string;
|
|
8
|
-
/**
|
|
9
|
-
* The label of the action item
|
|
10
|
-
*/
|
|
11
|
-
label: string;
|
|
12
|
-
/**
|
|
13
|
-
* The SAP icon rendered inside the action button
|
|
14
|
-
*/
|
|
15
|
-
icon: string;
|
|
16
|
-
/**
|
|
17
|
-
* Whether the action button should only be shown if the item receives focus or is being hovered
|
|
18
|
-
*/
|
|
19
|
-
showOnlyOnHover?: boolean;
|
|
20
|
-
}
|
|
21
|
-
export interface DragAndDropListActionEvent {
|
|
22
|
-
actionId: string;
|
|
23
|
-
item: string;
|
|
24
|
-
}
|
|
25
|
-
/**
|
|
26
|
-
* Individual item within a drag-and-drop list.
|
|
27
|
-
*
|
|
28
|
-
* Supports custom templates and optional action buttons.
|
|
29
|
-
*
|
|
30
|
-
* ### Projection slots
|
|
31
|
-
* - `customTemplate`: Custom template for the item content. If not provided, displays the item string with a drag handle.
|
|
32
|
-
*
|
|
33
|
-
* ### Example
|
|
34
|
-
* @example
|
|
35
|
-
* ```html
|
|
36
|
-
* <lx-drag-and-drop-list-item
|
|
37
|
-
* [item]="'Task 1'"
|
|
38
|
-
* [draggable]="true"
|
|
39
|
-
* [actions]="[{ id: 'delete', label: 'Delete', icon: 'delete', showOnlyOnHover: true }]"
|
|
40
|
-
* (action)="handleAction($event)"
|
|
41
|
-
* ></lx-drag-and-drop-list-item>
|
|
42
|
-
* ```
|
|
43
|
-
*/
|
|
44
|
-
export declare class DragAndDropListItemComponent {
|
|
45
|
-
private element;
|
|
46
|
-
readonly NAME = "DragAndDropListItemComponent";
|
|
47
|
-
/** The string representation of the item, used as the default display text. */
|
|
48
|
-
item: string;
|
|
49
|
-
/**
|
|
50
|
-
* Whether the item can be dragged.
|
|
51
|
-
* @default true
|
|
52
|
-
*/
|
|
53
|
-
draggable: boolean;
|
|
54
|
-
/**
|
|
55
|
-
* An array of DragAndDropListActions.
|
|
56
|
-
* When defined, the drag handle is shown at the start of an item and action buttons are rendered at the right end.
|
|
57
|
-
*/
|
|
58
|
-
actions?: DragAndDropListAction[];
|
|
59
|
-
/** Emitted when an action button is clicked. */
|
|
60
|
-
action: EventEmitter<DragAndDropListActionEvent>;
|
|
61
|
-
get draggingDisabled(): boolean;
|
|
62
|
-
get hasCustomTemplate(): boolean;
|
|
63
|
-
customTemplateRef: TemplateRef<any> | null;
|
|
64
|
-
constructor(element: ElementRef);
|
|
65
|
-
focus(): void;
|
|
66
|
-
static ɵfac: i0.ɵɵFactoryDeclaration<DragAndDropListItemComponent, never>;
|
|
67
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<DragAndDropListItemComponent, "lx-drag-and-drop-list-item", never, { "item": { "alias": "item"; "required": false; }; "draggable": { "alias": "draggable"; "required": false; }; "actions": { "alias": "actions"; "required": false; }; }, { "action": "action"; }, ["customTemplateRef"], never, true, never>;
|
|
68
|
-
}
|
|
@@ -1,104 +0,0 @@
|
|
|
1
|
-
import { CdkDragDrop } from '@angular/cdk/drag-drop';
|
|
2
|
-
import { AfterContentInit, AfterViewInit, EventEmitter } from '@angular/core';
|
|
3
|
-
import { Observable } from 'rxjs';
|
|
4
|
-
import { DragAndDropListActionEvent, DragAndDropListItemComponent } from './drag-and-drop-list-item/drag-and-drop-list-item.component';
|
|
5
|
-
import { KeyboardSortableItemDirective } from './keyboard-sortable-item/keyboard-sortable-item.directive';
|
|
6
|
-
import * as i0 from "@angular/core";
|
|
7
|
-
export interface DragAndDropListMoveEvent {
|
|
8
|
-
item: string;
|
|
9
|
-
index: number;
|
|
10
|
-
}
|
|
11
|
-
export interface DragAndDropListMoveIndexEvent {
|
|
12
|
-
index: number;
|
|
13
|
-
previous: number;
|
|
14
|
-
}
|
|
15
|
-
/**
|
|
16
|
-
* Sortable list with drag-and-drop and keyboard navigation support.
|
|
17
|
-
*
|
|
18
|
-
* Items can be reordered via mouse drag or keyboard controls (Arrow keys, Space).
|
|
19
|
-
*
|
|
20
|
-
* ### Example
|
|
21
|
-
* @example
|
|
22
|
-
* ```html
|
|
23
|
-
* <lx-drag-and-drop-list
|
|
24
|
-
* [label]="'My Tasks'"
|
|
25
|
-
* (moveToIndex)="handleReorder($event)"
|
|
26
|
-
* >
|
|
27
|
-
* @for (task of tasks; track $index) {
|
|
28
|
-
* <lx-drag-and-drop-list-item
|
|
29
|
-
* [item]="task.name"
|
|
30
|
-
* [draggable]="true"
|
|
31
|
-
* />
|
|
32
|
-
* }
|
|
33
|
-
* </lx-drag-and-drop-list>
|
|
34
|
-
* ```
|
|
35
|
-
*/
|
|
36
|
-
export declare class DragAndDropListComponent implements AfterContentInit, AfterViewInit {
|
|
37
|
-
/** @internal */
|
|
38
|
-
readonly NAME = "DragAndDropListComponent";
|
|
39
|
-
/** @internal */
|
|
40
|
-
items$: Observable<DragAndDropListItemComponent[]>;
|
|
41
|
-
/** @internal */
|
|
42
|
-
keyboardSortableItems$: Observable<KeyboardSortableItemDirective[]>;
|
|
43
|
-
/** A label for describing this list. */
|
|
44
|
-
label?: string | undefined;
|
|
45
|
-
/**
|
|
46
|
-
* Override the global label font weight.
|
|
47
|
-
* @default 700
|
|
48
|
-
*/
|
|
49
|
-
labelFontWeight?: number;
|
|
50
|
-
/**
|
|
51
|
-
* Color theme of the list items.
|
|
52
|
-
* @default 'light'
|
|
53
|
-
*/
|
|
54
|
-
color?: 'light' | 'dark';
|
|
55
|
-
/**
|
|
56
|
-
* Font size of the list items.
|
|
57
|
-
* @default 'normal'
|
|
58
|
-
*/
|
|
59
|
-
fontSize?: 'normal' | 'big';
|
|
60
|
-
/**
|
|
61
|
-
* Emitted when an item is moved, providing the new and previous index.
|
|
62
|
-
* Use this when you need index-based reordering.
|
|
63
|
-
*/
|
|
64
|
-
moveToIndex: EventEmitter<DragAndDropListMoveIndexEvent>;
|
|
65
|
-
/**
|
|
66
|
-
* Emitted when an item is moved, providing the item data and new index.
|
|
67
|
-
*/
|
|
68
|
-
moveItem: EventEmitter<DragAndDropListMoveEvent>;
|
|
69
|
-
/** @internal */
|
|
70
|
-
private _items;
|
|
71
|
-
/** @internal */
|
|
72
|
-
private _keyboardSortableItems;
|
|
73
|
-
/**
|
|
74
|
-
* TODO: extract state about keyboard sorting into KeyboardSortableListDirective
|
|
75
|
-
* @internal
|
|
76
|
-
*/
|
|
77
|
-
isSortingByKeyboard: boolean;
|
|
78
|
-
/** @internal */
|
|
79
|
-
keyboardItemBeingSorted: string | undefined;
|
|
80
|
-
/** @internal */
|
|
81
|
-
allItemsData: string[];
|
|
82
|
-
/** @internal */
|
|
83
|
-
allItemsData$: Observable<string[]>;
|
|
84
|
-
ngAfterContentInit(): void;
|
|
85
|
-
ngAfterViewInit(): void;
|
|
86
|
-
/** @internal */
|
|
87
|
-
emitContentChildAction(action: DragAndDropListActionEvent): void;
|
|
88
|
-
/**
|
|
89
|
-
* From the Angular cdk drag and drop documentation:
|
|
90
|
-
* Note that this will not update your data model;
|
|
91
|
-
* you can listen to the cdkDropListDropped event to update the data model
|
|
92
|
-
* once the user finishes dragging.
|
|
93
|
-
* https://material.angular.io/cdk/drag-drop/overview
|
|
94
|
-
*
|
|
95
|
-
* You're supposed to update the data in the parent and pass the new items as input.
|
|
96
|
-
* @internal
|
|
97
|
-
*/
|
|
98
|
-
drop(event: CdkDragDrop<DragAndDropListItemComponent[] | null, string[]>): void;
|
|
99
|
-
/** @internal */
|
|
100
|
-
dropToIndexAfterArrowKey(item: any, previousIndex: number, currentIndex: number): void;
|
|
101
|
-
private sortItems;
|
|
102
|
-
static ɵfac: i0.ɵɵFactoryDeclaration<DragAndDropListComponent, never>;
|
|
103
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<DragAndDropListComponent, "lx-drag-and-drop-list", never, { "label": { "alias": "label"; "required": false; }; "labelFontWeight": { "alias": "labelFontWeight"; "required": false; }; "color": { "alias": "color"; "required": false; }; "fontSize": { "alias": "fontSize"; "required": false; }; }, { "moveToIndex": "moveToIndex"; "moveItem": "moveItem"; }, ["_items"], never, true, never>;
|
|
104
|
-
}
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import * as i0 from "@angular/core";
|
|
2
|
-
import * as i1 from "@angular/common";
|
|
3
|
-
import * as i2 from "@angular/cdk/drag-drop";
|
|
4
|
-
import * as i3 from "@ngx-translate/core";
|
|
5
|
-
import * as i4 from "./keyboard-sortable-item/keyboard-sortable-item.directive";
|
|
6
|
-
import * as i5 from "./keyboard-sortable-list/keyboard-sortable-list.directive";
|
|
7
|
-
import * as i6 from "./drag-and-drop-list.component";
|
|
8
|
-
import * as i7 from "./drag-and-drop-list-item/drag-and-drop-list-item.component";
|
|
9
|
-
export declare class LxDragAndDropListModule {
|
|
10
|
-
static ɵfac: i0.ɵɵFactoryDeclaration<LxDragAndDropListModule, never>;
|
|
11
|
-
static ɵmod: i0.ɵɵNgModuleDeclaration<LxDragAndDropListModule, never, [typeof i1.CommonModule, typeof i2.DragDropModule, typeof i3.TranslateModule, typeof i4.KeyboardSortableItemDirective, typeof i5.KeyboardSortableListDirective, typeof i6.DragAndDropListComponent, typeof i7.DragAndDropListItemComponent], [typeof i6.DragAndDropListComponent, typeof i7.DragAndDropListItemComponent]>;
|
|
12
|
-
static ɵinj: i0.ɵɵInjectorDeclaration<LxDragAndDropListModule>;
|
|
13
|
-
}
|
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
import { AriaDescriber } from '@angular/cdk/a11y';
|
|
2
|
-
import { CdkDrag } from '@angular/cdk/drag-drop';
|
|
3
|
-
import { Overlay, OverlayPositionBuilder } from '@angular/cdk/overlay';
|
|
4
|
-
import { ElementRef, EventEmitter, OnChanges } from '@angular/core';
|
|
5
|
-
import { Observable } from 'rxjs';
|
|
6
|
-
import { TooltipDirective } from '../../../../core-ui/tooltip/tooltip.directive';
|
|
7
|
-
import * as i0 from "@angular/core";
|
|
8
|
-
export declare class KeyboardSortableItemDirective implements OnChanges {
|
|
9
|
-
private draggableItem;
|
|
10
|
-
private overlayPositionBuilder;
|
|
11
|
-
private element;
|
|
12
|
-
private overlay;
|
|
13
|
-
private ariaDescriber;
|
|
14
|
-
allItemsData: string[] | null;
|
|
15
|
-
itemData: string;
|
|
16
|
-
isSortingByKeyboard: boolean;
|
|
17
|
-
itemBeingSorted?: string;
|
|
18
|
-
readonly isSortingByKeyboardChange: EventEmitter<boolean>;
|
|
19
|
-
readonly itemBeingSortedChange: EventEmitter<string | undefined>;
|
|
20
|
-
sortItemsWithKeyboard: EventEmitter<{
|
|
21
|
-
previousIndex: number;
|
|
22
|
-
currentIndex: number;
|
|
23
|
-
}>;
|
|
24
|
-
focusWithKeyboard: Observable<KeyboardSortableItemDirective>;
|
|
25
|
-
tooltipDirective: TooltipDirective;
|
|
26
|
-
isBeingSorted: boolean;
|
|
27
|
-
get isSortable(): boolean;
|
|
28
|
-
private preventBlur;
|
|
29
|
-
private focusWithKeyboardReplaySubject$;
|
|
30
|
-
constructor(draggableItem: CdkDrag, overlayPositionBuilder: OverlayPositionBuilder, element: ElementRef<HTMLElement>, overlay: Overlay, ariaDescriber: AriaDescriber);
|
|
31
|
-
ngOnChanges(): void;
|
|
32
|
-
focusViaKeyboard(): void;
|
|
33
|
-
enterSortingModeEnabledByKeyboard($event: KeyboardEvent): void;
|
|
34
|
-
leaveSortingModeEnabledByKeyboard($event: KeyboardEvent | FocusEvent): void;
|
|
35
|
-
sort($event: KeyboardEvent): void;
|
|
36
|
-
static ɵfac: i0.ɵɵFactoryDeclaration<KeyboardSortableItemDirective, never>;
|
|
37
|
-
static ɵdir: i0.ɵɵDirectiveDeclaration<KeyboardSortableItemDirective, "[lxKeyboardSortableItem]", never, { "allItemsData": { "alias": "lxKeyboardSortableItem"; "required": false; }; "itemData": { "alias": "lxKeyboardItemData"; "required": false; }; "isSortingByKeyboard": { "alias": "isSortingByKeyboard"; "required": false; }; "itemBeingSorted": { "alias": "lxKeyboardItemBeingSorted"; "required": false; }; }, { "isSortingByKeyboardChange": "isSortingByKeyboardChange"; "itemBeingSortedChange": "lxKeyboardItemBeingSortedChange"; "sortItemsWithKeyboard": "sortItemsWithKeyboard"; "focusWithKeyboard": "focusWithKeyboard"; }, never, never, true, never>;
|
|
38
|
-
}
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import { AfterViewInit } from '@angular/core';
|
|
2
|
-
import { TranslateService } from '@ngx-translate/core';
|
|
3
|
-
import { KeyboardSortableItemDirective } from '../keyboard-sortable-item/keyboard-sortable-item.directive';
|
|
4
|
-
import * as i0 from "@angular/core";
|
|
5
|
-
export declare class KeyboardSortableListDirective implements AfterViewInit {
|
|
6
|
-
private translateService;
|
|
7
|
-
private keyboardSortableItems$;
|
|
8
|
-
keyboardSortableItems: KeyboardSortableItemDirective[] | null;
|
|
9
|
-
constructor(translateService: TranslateService);
|
|
10
|
-
ngAfterViewInit(): void;
|
|
11
|
-
private setupControlsTooltipToBeShownOnFirstFocusedItem;
|
|
12
|
-
static ɵfac: i0.ɵɵFactoryDeclaration<KeyboardSortableListDirective, never>;
|
|
13
|
-
static ɵdir: i0.ɵɵDirectiveDeclaration<KeyboardSortableListDirective, "[lxKeyboardSortableList]", never, { "keyboardSortableItems": { "alias": "keyboardSortableItems"; "required": false; }; }, {}, never, never, true, never>;
|
|
14
|
-
}
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
import * as i0 from "@angular/core";
|
|
2
|
-
/**
|
|
3
|
-
* Displays form validation error messages.
|
|
4
|
-
*
|
|
5
|
-
* Shows either projected content or a programmatically set error message.
|
|
6
|
-
*
|
|
7
|
-
* ### Projection slots
|
|
8
|
-
* - Default slot: Static error message text. Hidden but captured for display.
|
|
9
|
-
*
|
|
10
|
-
* ### Example
|
|
11
|
-
* @example
|
|
12
|
-
* ```html
|
|
13
|
-
* <lx-error-message>This field is required</lx-error-message>
|
|
14
|
-
* ```
|
|
15
|
-
*/
|
|
16
|
-
export declare class ErrorMessageComponent {
|
|
17
|
-
/** Signal for setting error message programmatically. */
|
|
18
|
-
readonly dynamicErrorMessage: import("@angular/core").WritableSignal<string>;
|
|
19
|
-
private readonly wrapper;
|
|
20
|
-
protected computedErrorMessage: import("@angular/core").Signal<string>;
|
|
21
|
-
static ɵfac: i0.ɵɵFactoryDeclaration<ErrorMessageComponent, never>;
|
|
22
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<ErrorMessageComponent, "lx-error-message", never, {}, {}, never, ["*"], true, never>;
|
|
23
|
-
}
|
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
import { OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
|
|
2
|
-
import { UntypedFormGroup } from '@angular/forms';
|
|
3
|
-
import * as i0 from "@angular/core";
|
|
4
|
-
/**
|
|
5
|
-
* Displays translated form validation errors for a specific form control.
|
|
6
|
-
*
|
|
7
|
-
* Automatically updates when form errors change.
|
|
8
|
-
*
|
|
9
|
-
* ### Example
|
|
10
|
-
* @example
|
|
11
|
-
* ```html
|
|
12
|
-
* <lx-form-error
|
|
13
|
-
* [form]="myFormGroup"
|
|
14
|
-
* [controlName]="'email'"
|
|
15
|
-
* [namespace]="'USER_FORM'"
|
|
16
|
-
* ></lx-form-error>
|
|
17
|
-
* ```
|
|
18
|
-
*/
|
|
19
|
-
export declare class FormErrorComponent implements OnInit, OnChanges, OnDestroy {
|
|
20
|
-
/** Translation namespace prefix for error messages (e.g., 'USER_FORM'). */
|
|
21
|
-
namespace: string;
|
|
22
|
-
/** The FormGroup containing the control to validate. */
|
|
23
|
-
form: UntypedFormGroup;
|
|
24
|
-
/** The name of the form control to display errors for. */
|
|
25
|
-
controlName: string;
|
|
26
|
-
/** @internal */
|
|
27
|
-
translationKeys: string[];
|
|
28
|
-
private formSubscription;
|
|
29
|
-
ngOnInit(): void;
|
|
30
|
-
ngOnChanges(_changes: SimpleChanges): void;
|
|
31
|
-
ngOnDestroy(): void;
|
|
32
|
-
/** @internal */
|
|
33
|
-
getTranslationKeys(): string[];
|
|
34
|
-
static ɵfac: i0.ɵɵFactoryDeclaration<FormErrorComponent, never>;
|
|
35
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<FormErrorComponent, "lx-form-error", never, { "namespace": { "alias": "namespace"; "required": false; }; "form": { "alias": "form"; "required": false; }; "controlName": { "alias": "controlName"; "required": false; }; }, {}, never, never, true, never>;
|
|
36
|
-
}
|
|
@@ -1,42 +0,0 @@
|
|
|
1
|
-
import { OnDestroy, OnInit } from '@angular/core';
|
|
2
|
-
import { NgControl } from '@angular/forms';
|
|
3
|
-
import * as i0 from "@angular/core";
|
|
4
|
-
/**
|
|
5
|
-
* A directive applied to native `<input>` elements to provide consistent styling and automatic error state handling.
|
|
6
|
-
* Integrates with Angular's `NgControl` to automatically apply error and disabled classes based on form control state.
|
|
7
|
-
* The directive listens to form control status changes and updates the visual state accordingly.
|
|
8
|
-
*
|
|
9
|
-
* ### Example
|
|
10
|
-
* @example
|
|
11
|
-
* ```html
|
|
12
|
-
* <input lx-input type="text" [formControl]="nameControl" />
|
|
13
|
-
* ```
|
|
14
|
-
*
|
|
15
|
-
* ### Example
|
|
16
|
-
* @example
|
|
17
|
-
* ```html
|
|
18
|
-
* <input lx-input type="email" [error]="true" [disabled]="false" />
|
|
19
|
-
* ```
|
|
20
|
-
*/
|
|
21
|
-
export declare class InputComponent implements OnInit, OnDestroy {
|
|
22
|
-
ngControl?: NgControl | undefined;
|
|
23
|
-
/**
|
|
24
|
-
* Whether to display the input in an error state (applies 'error' CSS class).
|
|
25
|
-
* Automatically updated when used with `NgControl` based on validation state.
|
|
26
|
-
* @default false
|
|
27
|
-
*/
|
|
28
|
-
error: boolean;
|
|
29
|
-
/**
|
|
30
|
-
* Whether the input is disabled (applies 'disabled' CSS class).
|
|
31
|
-
* Automatically updated when used with `NgControl` based on control state.
|
|
32
|
-
* @default false
|
|
33
|
-
*/
|
|
34
|
-
disabled: boolean;
|
|
35
|
-
private destroyed$;
|
|
36
|
-
constructor(ngControl?: NgControl | undefined);
|
|
37
|
-
ngOnInit(): void;
|
|
38
|
-
private updateStatus;
|
|
39
|
-
ngOnDestroy(): void;
|
|
40
|
-
static ɵfac: i0.ɵɵFactoryDeclaration<InputComponent, [{ optional: true; }]>;
|
|
41
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<InputComponent, "input[lx-input]", never, { "error": { "alias": "error"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, never, never, true, never>;
|
|
42
|
-
}
|
|
@@ -1,47 +0,0 @@
|
|
|
1
|
-
import { AfterViewInit, ElementRef, EventEmitter, OnDestroy, QueryList } from '@angular/core';
|
|
2
|
-
import { Observable, ReplaySubject, Subject } from 'rxjs';
|
|
3
|
-
import { DropdownItem } from '../models/dropdown-item.interface';
|
|
4
|
-
import * as i0 from "@angular/core";
|
|
5
|
-
export declare enum KeyboardSelectAction {
|
|
6
|
-
PREV = "PREV",
|
|
7
|
-
NEXT = "NEXT",
|
|
8
|
-
FIRST = "FIRST",
|
|
9
|
-
LAST = "LAST",
|
|
10
|
-
LEFT = "LEFT",
|
|
11
|
-
RIGHT = "RIGHT",
|
|
12
|
-
EXECUTE = "EXECUTE",
|
|
13
|
-
UNSELECT = "UNSELECT",
|
|
14
|
-
CLOSE = "CLOSE"
|
|
15
|
-
}
|
|
16
|
-
export declare class KeyboardSelectDirective implements OnDestroy, AfterViewInit {
|
|
17
|
-
/** @internal */
|
|
18
|
-
cdkOverlayOpenState: ReplaySubject<boolean>;
|
|
19
|
-
/** @internal */
|
|
20
|
-
cdkOverlayOpen$: Observable<boolean>;
|
|
21
|
-
/** @internal */
|
|
22
|
-
overlayPositioning: boolean;
|
|
23
|
-
keyboardSelectAction: Observable<KeyboardSelectAction | null>;
|
|
24
|
-
selectedItemIndexChange: EventEmitter<number>;
|
|
25
|
-
/** @internal */
|
|
26
|
-
_items: QueryList<DropdownItem>;
|
|
27
|
-
/** @internal */
|
|
28
|
-
keyboardSelectContainer: ElementRef<HTMLElement>;
|
|
29
|
-
/** @internal */
|
|
30
|
-
readonly destroyed$: Subject<void>;
|
|
31
|
-
/** @internal */
|
|
32
|
-
get selectedItem$(): Observable<any>;
|
|
33
|
-
private readonly selectedItemIndex$;
|
|
34
|
-
private readonly selectedItemSubject$;
|
|
35
|
-
/** @internal */
|
|
36
|
-
select(index: number): void;
|
|
37
|
-
ngAfterViewInit(): void;
|
|
38
|
-
/** @internal */
|
|
39
|
-
isItemSelected(item: HTMLElement, selectedItem: ElementRef<HTMLElement>): boolean;
|
|
40
|
-
private adaptSelectedIndexBasedOnKeyboardSelectAction;
|
|
41
|
-
private prev;
|
|
42
|
-
private next;
|
|
43
|
-
private last;
|
|
44
|
-
ngOnDestroy(): void;
|
|
45
|
-
static ɵfac: i0.ɵɵFactoryDeclaration<KeyboardSelectDirective, never>;
|
|
46
|
-
static ɵdir: i0.ɵɵDirectiveDeclaration<KeyboardSelectDirective, never, never, { "keyboardSelectAction": { "alias": "keyboardSelectAction"; "required": false; }; }, { "selectedItemIndexChange": "selectedItemIndexChange"; }, never, never, true, never>;
|
|
47
|
-
}
|
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
import { EventEmitter, TemplateRef } from '@angular/core';
|
|
2
|
-
import { KeyboardSelectDirective } from '../../keyboard-select.directive';
|
|
3
|
-
import * as i0 from "@angular/core";
|
|
4
|
-
/**
|
|
5
|
-
* Displays selected items in a multi-select component.
|
|
6
|
-
*
|
|
7
|
-
* Items can be rendered as tokens or custom templates.
|
|
8
|
-
*
|
|
9
|
-
* ### Projection slots
|
|
10
|
-
* - `innerSelectionTemplate`: Custom template for rendering each selected item.
|
|
11
|
-
*
|
|
12
|
-
* ### Example
|
|
13
|
-
* @example
|
|
14
|
-
* ```html
|
|
15
|
-
* <lx-multi-select-selection
|
|
16
|
-
* [selection]="selectedItems"
|
|
17
|
-
* [tokenize]="true"
|
|
18
|
-
* (removeItem)="handleRemove($event)"
|
|
19
|
-
* >
|
|
20
|
-
* <ng-template #innerSelectionTemplate let-item>
|
|
21
|
-
* {{ item.name }}
|
|
22
|
-
* </ng-template>
|
|
23
|
-
* </lx-multi-select-selection>
|
|
24
|
-
* ```
|
|
25
|
-
*/
|
|
26
|
-
export declare class MultiSelectSelectionComponent extends KeyboardSelectDirective {
|
|
27
|
-
/**
|
|
28
|
-
* Array of selected items to display.
|
|
29
|
-
*/
|
|
30
|
-
selection: import("@angular/core").InputSignal<any[] | null | undefined>;
|
|
31
|
-
/**
|
|
32
|
-
* Whether to render items as tokens (pills).
|
|
33
|
-
* @default true
|
|
34
|
-
*/
|
|
35
|
-
tokenize: import("@angular/core").InputSignal<boolean>;
|
|
36
|
-
/** Emitted when an item is clicked for removal. */
|
|
37
|
-
removeItem: EventEmitter<unknown>;
|
|
38
|
-
selectionTemplate: TemplateRef<any> | null;
|
|
39
|
-
static ɵfac: i0.ɵɵFactoryDeclaration<MultiSelectSelectionComponent, never>;
|
|
40
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<MultiSelectSelectionComponent, "lx-multi-select-selection", never, { "selection": { "alias": "selection"; "required": false; "isSignal": true; }; "tokenize": { "alias": "tokenize"; "required": false; "isSignal": true; }; }, { "removeItem": "removeItem"; }, ["selectionTemplate"], never, true, never>;
|
|
41
|
-
}
|
|
@@ -1,172 +0,0 @@
|
|
|
1
|
-
import { AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, TemplateRef } from '@angular/core';
|
|
2
|
-
import { ControlValueAccessor } from '@angular/forms';
|
|
3
|
-
import { Subject } from 'rxjs';
|
|
4
|
-
import { BaseSelectDirective, EventSet } from '../../models/base-select.directive';
|
|
5
|
-
import { KeyboardSelectAction } from '../keyboard-select.directive';
|
|
6
|
-
import { ResponsiveInputComponent } from '../responsive-input/responsive-input.component';
|
|
7
|
-
import * as i0 from "@angular/core";
|
|
8
|
-
export type MultiSelectSize = 'default' | 'small' | 'large' | 'select2';
|
|
9
|
-
export type MultiSelectRemoveItemEvent = {
|
|
10
|
-
item: any;
|
|
11
|
-
/**
|
|
12
|
-
* Is true when the item was not removed by pressing backspace on the keyboard rather than clicking the 'x'.
|
|
13
|
-
*/
|
|
14
|
-
isMouse: boolean;
|
|
15
|
-
};
|
|
16
|
-
/**
|
|
17
|
-
* A dropdown component for selecting multiple values from a list of options.
|
|
18
|
-
* Implements `ControlValueAccessor` for seamless integration with Angular reactive forms.
|
|
19
|
-
* Supports keyboard navigation, custom templates, and various sizing options.
|
|
20
|
-
*
|
|
21
|
-
* ### Projection slots
|
|
22
|
-
* - `.pills`: Contains the pill list for selected items (`lx-pill-list`).
|
|
23
|
-
* The pill list shows removable pills for each selected item.
|
|
24
|
-
* Use `lx-pill-item` inside a `#pillTemplate` for custom pill rendering.
|
|
25
|
-
* - `.dropdownComponent`: Contains the dropdown (`lx-basic-dropdown`)
|
|
26
|
-
*
|
|
27
|
-
* Alternatively, use `lxSelectDropdown` directive on `<ng-template>` for the dropdown,
|
|
28
|
-
* and `#selectionTemplate` on `<ng-template>` for tokenized selection display.
|
|
29
|
-
*
|
|
30
|
-
* ### Example — with pill list and basic dropdown
|
|
31
|
-
* @example
|
|
32
|
-
* ```html
|
|
33
|
-
* <lx-multi-select
|
|
34
|
-
* #multiSelect
|
|
35
|
-
* [(selection)]="selectedItems"
|
|
36
|
-
* (query)="searchTerm = $event">
|
|
37
|
-
* <lx-pill-list
|
|
38
|
-
* class="pills"
|
|
39
|
-
* [keyboardSelectAction]="multiSelect.selectionKeyboardSelectAction$"
|
|
40
|
-
* [pills]="selectedItems"
|
|
41
|
-
* labelKey="name"
|
|
42
|
-
* itemKey="id"
|
|
43
|
-
* (remove)="multiSelect.removeItem($event)">
|
|
44
|
-
* </lx-pill-list>
|
|
45
|
-
* <lx-basic-dropdown
|
|
46
|
-
* class="dropdownComponent"
|
|
47
|
-
* [keyboardSelectAction]="multiSelect.optionsKeyboardSelectAction$"
|
|
48
|
-
* [options]="options | lxFilterBySelection: selectedItems | lxFilterByTerm: { term: searchTerm }"
|
|
49
|
-
* labelKey="name"
|
|
50
|
-
* (onItemSelected)="multiSelect.addItemToSelection($event)">
|
|
51
|
-
* </lx-basic-dropdown>
|
|
52
|
-
* </lx-multi-select>
|
|
53
|
-
* ```
|
|
54
|
-
*
|
|
55
|
-
* ### Example — with custom pill template
|
|
56
|
-
* @example
|
|
57
|
-
* ```html
|
|
58
|
-
* <lx-multi-select #multiSelect [(selection)]="selectedItems">
|
|
59
|
-
* <lx-pill-list
|
|
60
|
-
* class="pills"
|
|
61
|
-
* [keyboardSelectAction]="multiSelect.selectionKeyboardSelectAction$"
|
|
62
|
-
* [pills]="selectedItems"
|
|
63
|
-
* itemKey="id"
|
|
64
|
-
* (remove)="multiSelect.removeItem($event)">
|
|
65
|
-
* <ng-template #pillTemplate let-pill>
|
|
66
|
-
* <lx-pill-item [label]="pill.name" [item]="pill" [class.readOnly]="pill.readOnly" />
|
|
67
|
-
* </ng-template>
|
|
68
|
-
* </lx-pill-list>
|
|
69
|
-
* <!-- dropdown omitted for brevity -->
|
|
70
|
-
* </lx-multi-select>
|
|
71
|
-
* ```
|
|
72
|
-
*/
|
|
73
|
-
export declare class MultiSelectComponent extends BaseSelectDirective implements AfterViewInit, ControlValueAccessor {
|
|
74
|
-
private cd;
|
|
75
|
-
/** @internal */
|
|
76
|
-
static isStillPossibleMoveToLeft(eventSet: EventSet): boolean;
|
|
77
|
-
/** @internal */
|
|
78
|
-
static isMovingfromZeroToRight(eventSet: EventSet): boolean;
|
|
79
|
-
/** @internal */
|
|
80
|
-
static calculateNewCursorPostionOnKeyboardNavigation(cursorPosition: number, keyCode: number): number;
|
|
81
|
-
/** @internal */
|
|
82
|
-
static getKeyboardSelectAction(cursorPosition: number, keyCode: number): KeyboardSelectAction | null;
|
|
83
|
-
/**
|
|
84
|
-
* Whether to visually mark the input as invalid.
|
|
85
|
-
*/
|
|
86
|
-
markInvalid: boolean;
|
|
87
|
-
/**
|
|
88
|
-
* Array of currently selected items.
|
|
89
|
-
*/
|
|
90
|
-
selection?: any[] | null;
|
|
91
|
-
/**
|
|
92
|
-
* Visual size variant of the multi-select component.
|
|
93
|
-
* @default 'default'
|
|
94
|
-
*/
|
|
95
|
-
size: MultiSelectSize;
|
|
96
|
-
/**
|
|
97
|
-
* Optional ID attribute for the input element.
|
|
98
|
-
*/
|
|
99
|
-
inputId?: string;
|
|
100
|
-
/**
|
|
101
|
-
* Whether pressing Tab should close the dropdown.
|
|
102
|
-
* @default true
|
|
103
|
-
*/
|
|
104
|
-
closeDropdownOnTab: boolean;
|
|
105
|
-
/**
|
|
106
|
-
* Event emitted when the selection changes.
|
|
107
|
-
*/
|
|
108
|
-
selectionChange: EventEmitter<any[]>;
|
|
109
|
-
/**
|
|
110
|
-
* Event emitted when the input loses focus.
|
|
111
|
-
*/
|
|
112
|
-
blur: EventEmitter<void>;
|
|
113
|
-
/** @internal */
|
|
114
|
-
explicitDropdown?: TemplateRef<any>;
|
|
115
|
-
/** @internal */
|
|
116
|
-
selectionTemplate?: TemplateRef<any>;
|
|
117
|
-
/** @internal */
|
|
118
|
-
queryInput: ResponsiveInputComponent;
|
|
119
|
-
/** @internal */
|
|
120
|
-
implicitDropdown: TemplateRef<any>;
|
|
121
|
-
/** @internal */
|
|
122
|
-
selectionElement?: ElementRef<HTMLElement>;
|
|
123
|
-
/** @internal */
|
|
124
|
-
toggleElement?: ElementRef<HTMLElement>;
|
|
125
|
-
/** @internal */
|
|
126
|
-
get dropdownTmpl(): TemplateRef<any>;
|
|
127
|
-
/** @internal */
|
|
128
|
-
readonly destroyed$: Subject<void>;
|
|
129
|
-
/** @internal */
|
|
130
|
-
isInputFocusedViaTab: boolean;
|
|
131
|
-
/** @internal */
|
|
132
|
-
canTokenize: boolean;
|
|
133
|
-
/** @internal */
|
|
134
|
-
get tokenize(): boolean;
|
|
135
|
-
constructor(cd: ChangeDetectorRef);
|
|
136
|
-
/** @internal */
|
|
137
|
-
resetInput(): void;
|
|
138
|
-
/** @internal */
|
|
139
|
-
focus(): void;
|
|
140
|
-
/** @internal */
|
|
141
|
-
focusAndOpen(): void;
|
|
142
|
-
/** @internal */
|
|
143
|
-
onFocus(): void;
|
|
144
|
-
/** @internal */
|
|
145
|
-
onBlur(): void;
|
|
146
|
-
ngAfterViewInit(): void;
|
|
147
|
-
/**
|
|
148
|
-
* Adds the given option to the selection and, by default, resets the input field.
|
|
149
|
-
* @param option The option to add to the selection.
|
|
150
|
-
* @param keepSearchQueryAndScrollPosition If true, the search query and scroll position of the dropdown will be kept, unless there are no options left.
|
|
151
|
-
* @internal
|
|
152
|
-
*/
|
|
153
|
-
addItemToSelection(option: any, keepSearchQueryAndScrollPosition?: boolean): void;
|
|
154
|
-
/** @internal */
|
|
155
|
-
removeItem(optionToRemove: MultiSelectRemoveItemEvent): void;
|
|
156
|
-
/** @internal */
|
|
157
|
-
propagateChange(_value: any[]): void;
|
|
158
|
-
/** @internal */
|
|
159
|
-
writeValue(value: any[]): void;
|
|
160
|
-
/** @internal */
|
|
161
|
-
registerOnChange(fn: any): void;
|
|
162
|
-
/** @internal */
|
|
163
|
-
registerOnTouched(_fn: any): void;
|
|
164
|
-
/** @internal */
|
|
165
|
-
setDisabledState(isDisabled: boolean): void;
|
|
166
|
-
/** @internal */
|
|
167
|
-
focusedViaTab(): void;
|
|
168
|
-
private onSelectionChange;
|
|
169
|
-
private scrollToEndOfSelection;
|
|
170
|
-
static ɵfac: i0.ɵɵFactoryDeclaration<MultiSelectComponent, never>;
|
|
171
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<MultiSelectComponent, "lx-multi-select", never, { "markInvalid": { "alias": "markInvalid"; "required": false; }; "selection": { "alias": "selection"; "required": false; }; "size": { "alias": "size"; "required": false; }; "inputId": { "alias": "inputId"; "required": false; }; "closeDropdownOnTab": { "alias": "closeDropdownOnTab"; "required": false; }; }, { "selectionChange": "selectionChange"; "blur": "blur"; }, ["explicitDropdown", "selectionTemplate"], [".pills", ".dropdownComponent"], true, never>;
|
|
172
|
-
}
|