@rt-tools/ui-kit-v2 0.18.0 → 0.19.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +3 -2
- package/fesm2022/rt-tools-ui-kit-v2-accordion.mjs +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-accordion.mjs.map +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-action-bar.mjs +14 -8
- package/fesm2022/rt-tools-ui-kit-v2-action-bar.mjs.map +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-ai-run-status.mjs +97 -0
- package/fesm2022/rt-tools-ui-kit-v2-ai-run-status.mjs.map +1 -0
- package/fesm2022/rt-tools-ui-kit-v2-aside.mjs +10 -3
- package/fesm2022/rt-tools-ui-kit-v2-aside.mjs.map +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-autocomplete.mjs +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-autocomplete.mjs.map +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-bar-list.mjs +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-bar-list.mjs.map +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-checkbox.mjs +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-checkbox.mjs.map +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-copy-value.mjs +81 -0
- package/fesm2022/rt-tools-ui-kit-v2-copy-value.mjs.map +1 -0
- package/fesm2022/rt-tools-ui-kit-v2-core.mjs +99 -1
- package/fesm2022/rt-tools-ui-kit-v2-core.mjs.map +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-data-list.mjs +5 -5
- package/fesm2022/rt-tools-ui-kit-v2-data-list.mjs.map +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-data-table.mjs +16 -4
- package/fesm2022/rt-tools-ui-kit-v2-data-table.mjs.map +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-download-link.mjs +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-download-link.mjs.map +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-dynamic-selector.mjs +124 -25
- package/fesm2022/rt-tools-ui-kit-v2-dynamic-selector.mjs.map +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-empty-state.mjs +3 -3
- package/fesm2022/rt-tools-ui-kit-v2-empty-state.mjs.map +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-expansion-panel.mjs +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-expansion-panel.mjs.map +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-field.mjs +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-field.mjs.map +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-file-card.mjs +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-file-card.mjs.map +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-icon-button.mjs +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-icon-button.mjs.map +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-icon.mjs +64 -27
- package/fesm2022/rt-tools-ui-kit-v2-icon.mjs.map +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-input-number.mjs +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-input-number.mjs.map +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-input.mjs +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-input.mjs.map +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-menu.mjs +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-menu.mjs.map +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-message.mjs +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-message.mjs.map +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-multiselect.mjs +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-multiselect.mjs.map +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-notifications-bell.mjs +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-notifications-bell.mjs.map +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-page-header.mjs +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-page-header.mjs.map +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-prompt-suggestion.mjs +46 -0
- package/fesm2022/rt-tools-ui-kit-v2-prompt-suggestion.mjs.map +1 -0
- package/fesm2022/rt-tools-ui-kit-v2-rich-editor.mjs +336 -12
- package/fesm2022/rt-tools-ui-kit-v2-rich-editor.mjs.map +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-scroll-area.mjs +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-scroll-area.mjs.map +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-section-nav.mjs +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-section-nav.mjs.map +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-select.mjs +16 -2
- package/fesm2022/rt-tools-ui-kit-v2-select.mjs.map +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-side-menu.mjs +3 -3
- package/fesm2022/rt-tools-ui-kit-v2-side-menu.mjs.map +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-stat-tile.mjs +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-stat-tile.mjs.map +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-table.mjs +2 -2
- package/fesm2022/rt-tools-ui-kit-v2-table.mjs.map +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-tabs.mjs +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-tabs.mjs.map +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-tag.mjs +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-tag.mjs.map +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-thread-list.mjs +31 -5
- package/fesm2022/rt-tools-ui-kit-v2-thread-list.mjs.map +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-toast.mjs +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-toast.mjs.map +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-toggle-button-group.mjs +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-toggle-button-group.mjs.map +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-toggle-switch.mjs +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-toggle-switch.mjs.map +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-toolbar.mjs +2 -2
- package/fesm2022/rt-tools-ui-kit-v2-toolbar.mjs.map +1 -1
- package/fesm2022/rt-tools-ui-kit-v2.mjs +3 -0
- package/fesm2022/rt-tools-ui-kit-v2.mjs.map +1 -1
- package/package.json +13 -1
- package/rt-tools-ui-kit-v2-0.19.1.tgz +0 -0
- package/src/assets/icons/sparkle.svg +9 -0
- package/src/assets/icons/thumb-down.svg +10 -0
- package/src/assets/icons/thumb-up.svg +9 -0
- package/src/assets/icons/trash-x.svg +7 -0
- package/src/assets/icons-material/sparkle.fill.svg +5 -0
- package/src/assets/icons-material/sparkle.svg +5 -0
- package/src/assets/icons-material/thumb-down.fill.svg +5 -0
- package/src/assets/icons-material/thumb-down.svg +5 -0
- package/src/assets/icons-material/thumb-up.fill.svg +5 -0
- package/src/assets/icons-material/thumb-up.svg +5 -0
- package/src/assets/icons-material/trash-x.fill.svg +5 -0
- package/src/assets/icons-material/trash-x.svg +5 -0
- package/src/lib/components/action-bar/CONTEXT.md +8 -2
- package/src/lib/components/action-bar/rt-action-bar-holder.component.scss +10 -7
- package/src/lib/components/action-bar/rt-action-bar.component.scss +82 -34
- package/src/lib/components/ai-run-status/CONTEXT.md +41 -0
- package/src/lib/components/ai-run-status/rt-ai-run-status.component.scss +158 -0
- package/src/lib/components/aside/CONTEXT.md +1 -0
- package/src/lib/components/aside/header/rt-aside-header.component.scss +27 -11
- package/src/lib/components/copy-value/CONTEXT.md +31 -0
- package/src/lib/components/copy-value/rt-copy-value.component.scss +39 -0
- package/src/lib/components/data-list/settings/rt-data-list-settings-aside.component.scss +5 -5
- package/src/lib/components/data-table/CONTEXT.md +5 -0
- package/src/lib/components/dynamic-selector/CONTEXT.md +18 -0
- package/src/lib/components/dynamic-selector/list/rt-dynamic-selector-list.component.scss +29 -1
- package/src/lib/components/dynamic-selector/popup/rt-dynamic-selector-popup.component.scss +84 -25
- package/src/lib/components/empty-state/CONTEXT.md +2 -1
- package/src/lib/components/empty-state/rt-empty-state.component.scss +4 -2
- package/src/lib/components/icon/CONTEXT.md +16 -12
- package/src/lib/components/icon/rt-icon.component.scss +13 -3
- package/src/lib/components/prompt-suggestion/CONTEXT.md +29 -0
- package/src/lib/components/prompt-suggestion/rt-prompt-suggestion.component.scss +58 -0
- package/src/lib/components/select/CONTEXT.md +2 -2
- package/src/lib/components/thread-list/CONTEXT.md +4 -0
- package/src/lib/components/thread-list/rt-thread-list.component.scss +29 -0
- package/src/lib/components/toolbar/CONTEXT.md +4 -0
- package/src/lib/components/toolbar/rt-toolbar.component.scss +7 -0
- package/src/rich-editor/lib/components/ai-chat/CONTEXT.md +58 -0
- package/src/rich-editor/lib/components/ai-chat/answer/rt-ai-chat-answer.component.scss +12 -0
- package/src/rich-editor/lib/components/ai-chat/rt-ai-chat.component.scss +222 -0
- package/src/rich-editor/lib/components/rich-editor/rt-rich-editor.component.scss +3 -0
- package/src/styles/_scrollbar.scss +9 -0
- package/styles/tokens.css +3 -0
- package/types/rt-tools-ui-kit-v2-action-bar.d.ts +11 -2
- package/types/rt-tools-ui-kit-v2-ai-run-status.d.ts +49 -0
- package/types/rt-tools-ui-kit-v2-aside.d.ts +9 -1
- package/types/rt-tools-ui-kit-v2-copy-value.d.ts +29 -0
- package/types/rt-tools-ui-kit-v2-core.d.ts +94 -54
- package/types/rt-tools-ui-kit-v2-data-table.d.ts +7 -0
- package/types/rt-tools-ui-kit-v2-dynamic-selector.d.ts +44 -5
- package/types/rt-tools-ui-kit-v2-icon.d.ts +12 -4
- package/types/rt-tools-ui-kit-v2-prompt-suggestion.d.ts +21 -0
- package/types/rt-tools-ui-kit-v2-rich-editor.d.ts +186 -2
- package/types/rt-tools-ui-kit-v2-select.d.ts +6 -0
- package/types/rt-tools-ui-kit-v2-thread-list.d.ts +15 -2
- package/types/rt-tools-ui-kit-v2.d.ts +3 -0
- package/rt-tools-ui-kit-v2-0.18.0.tgz +0 -0
|
@@ -3,16 +3,17 @@ import { inject, signal, input, booleanAttribute, output, ViewEncapsulation, Cha
|
|
|
3
3
|
import * as i1 from '@angular/forms';
|
|
4
4
|
import { FormsModule } from '@angular/forms';
|
|
5
5
|
import { BlockDirective, ElemDirective, ModDirective } from '@rt-tools/core';
|
|
6
|
-
import { BreakpointsService, rtKitLabel, RtInfiniteScrollDirective } from '@rt-tools/ui-kit-v2/core';
|
|
6
|
+
import { BreakpointsService, rtKitLabel, rtKitDefault, RtInfiniteScrollDirective } from '@rt-tools/ui-kit-v2/core';
|
|
7
7
|
import { RtButtonDirective } from '@rt-tools/ui-kit-v2/button';
|
|
8
8
|
import { RtEmptyStateComponent } from '@rt-tools/ui-kit-v2/empty-state';
|
|
9
9
|
import { RtFormControlBase } from '@rt-tools/ui-kit-v2/form-control';
|
|
10
|
+
import { RtFieldComponent } from '@rt-tools/ui-kit-v2/field';
|
|
10
11
|
import { RtInputComponent } from '@rt-tools/ui-kit-v2/input';
|
|
11
12
|
import { CdkDrag, CdkDragHandle, CdkDropList } from '@angular/cdk/drag-drop';
|
|
12
13
|
import { NgTemplateOutlet } from '@angular/common';
|
|
13
14
|
import { RtIconButtonComponent } from '@rt-tools/ui-kit-v2/icon-button';
|
|
14
15
|
import { RtTooltipDirective } from '@rt-tools/ui-kit-v2/tooltip';
|
|
15
|
-
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
16
|
+
import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
|
|
16
17
|
import { RouterLink } from '@angular/router';
|
|
17
18
|
import { Subject, debounceTime } from 'rxjs';
|
|
18
19
|
import { RtCheckboxComponent } from '@rt-tools/ui-kit-v2/checkbox';
|
|
@@ -62,6 +63,11 @@ class RtDynamicSelectorListComponent {
|
|
|
62
63
|
/** Шаг скругления кнопок-иконок списка; по умолчанию они круглые. */
|
|
63
64
|
this.buttonRadius = input('full', /* @ts-ignore */
|
|
64
65
|
...(ngDevMode ? [{ debugName: "buttonRadius" }] : /* istanbul ignore next */ []));
|
|
66
|
+
/** Значок кнопки «Очистить список»; по умолчанию крестик. */
|
|
67
|
+
this.clearIcon = input('close', /* @ts-ignore */
|
|
68
|
+
...(ngDevMode ? [{ debugName: "clearIcon" }] : /* istanbul ignore next */ []));
|
|
69
|
+
/** Название строки переносится; `false` ведёт его одной строкой с многоточием и подсказкой при обрезке. */
|
|
70
|
+
this.titleWrap = input(true, { ...(ngDevMode ? { debugName: "titleWrap" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
65
71
|
this.titleTpl = input(null, /* @ts-ignore */
|
|
66
72
|
...(ngDevMode ? [{ debugName: "titleTpl" }] : /* istanbul ignore next */ []));
|
|
67
73
|
this.controlsTpl = input(null, /* @ts-ignore */
|
|
@@ -97,13 +103,13 @@ class RtDynamicSelectorListComponent {
|
|
|
97
103
|
this.editedIndex.set(null);
|
|
98
104
|
}
|
|
99
105
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtDynamicSelectorListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
100
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtDynamicSelectorListComponent, isStandalone: true, selector: "rt-dynamic-selector-list", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, actionsShown: { classPropertyName: "actionsShown", publicName: "actionsShown", isSignal: true, isRequired: false, transformFunction: null }, resetClearShown: { classPropertyName: "resetClearShown", publicName: "resetClearShown", isSignal: true, isRequired: false, transformFunction: null }, removeShown: { classPropertyName: "removeShown", publicName: "removeShown", isSignal: true, isRequired: false, transformFunction: null }, resetDisabled: { classPropertyName: "resetDisabled", publicName: "resetDisabled", isSignal: true, isRequired: false, transformFunction: null }, clearDisabled: { classPropertyName: "clearDisabled", publicName: "clearDisabled", isSignal: true, isRequired: false, transformFunction: null }, buttonRadius: { classPropertyName: "buttonRadius", publicName: "buttonRadius", isSignal: true, isRequired: false, transformFunction: null }, titleTpl: { classPropertyName: "titleTpl", publicName: "titleTpl", isSignal: true, isRequired: false, transformFunction: null }, controlsTpl: { classPropertyName: "controlsTpl", publicName: "controlsTpl", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removed: "removed", moved: "moved", edited: "edited", resetClicked: "resetClicked", cleared: "cleared" }, host: { classAttribute: "rt-dynamic-selector-list" }, ngImport: i0, template: "<ng-container rtBlock=\"rt-dynamic-selector-list\">\n @if (rows().length > 0) {\n <div rtElem=\"rows\" cdkDropList qa-dataid=\"dynamic-selector-rows\" (cdkDropListDropped)=\"onDrop($event)\">\n @for (row of rows(); track row.key; let index = $index) {\n <div\n rtElem=\"row\"\n cdkDrag\n qa-dataid=\"dynamic-selector-row\"\n [rtMod]=\"{ locked: row.locked }\"\n [cdkDragDisabled]=\"!draggable() || disabled()\">\n @if (draggable()) {\n <span rtElem=\"handle\">\n <rt-icon-button\n cdkDragHandle\n qa-dataid=\"dynamic-selector-drag\"\n icon=\"arrows\"\n size=\"sm\"\n [radius]=\"buttonRadius()\"\n [ariaLabel]=\"dragLabel()\"\n [tooltip]=\"isNarrow() ? '' : dragLabel()\"\n [disabled]=\"disabled()\" />\n </span>\n }\n\n @if (editedIndex() === index) {\n <rt-input\n rtElem=\"field\"\n qa-dataid=\"dynamic-selector-edit-field\"\n [ngModel]=\"draft()\"\n (ngModelChange)=\"draft.set($event ?? '')\"\n (keydown.enter)=\"onEditApply(row)\" />\n } @else if (titleTpl(); as tpl) {\n <div rtElem=\"title\">\n <ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ $implicit: row.item }\" />\n </div>\n } @else {\n <span rtElem=\"title\">{{ row.label }}</span>\n }\n\n <div rtElem=\"controls\">\n @if (controlsTpl(); as tpl) {\n <ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ $implicit: row.item }\" />\n }\n\n @if (editable()) {\n @if (editedIndex() === index) {\n <rt-icon-button\n qa-dataid=\"dynamic-selector-edit-cancel\"\n icon=\"undo\"\n size=\"sm\"\n [radius]=\"buttonRadius()\"\n [ariaLabel]=\"cancelLabel()\"\n [tooltip]=\"isNarrow() ? '' : cancelLabel()\"\n (clicked)=\"onEditCancel()\" />\n <rt-icon-button\n qa-dataid=\"dynamic-selector-edit-apply\"\n icon=\"check\"\n size=\"sm\"\n [radius]=\"buttonRadius()\"\n [ariaLabel]=\"applyLabel()\"\n [tooltip]=\"isNarrow() ? '' : applyLabel()\"\n (clicked)=\"onEditApply(row)\" />\n } @else {\n <rt-icon-button\n qa-dataid=\"dynamic-selector-edit\"\n icon=\"pencil\"\n size=\"sm\"\n [radius]=\"buttonRadius()\"\n [ariaLabel]=\"editLabel()\"\n [tooltip]=\"isNarrow() ? '' : editLabel()\"\n [disabled]=\"disabled()\"\n (clicked)=\"onEditStart(index, row)\" />\n }\n }\n\n @if (removeShown()) {\n <rt-icon-button\n qa-dataid=\"dynamic-selector-remove\"\n icon=\"trash\"\n size=\"sm\"\n [radius]=\"buttonRadius()\"\n [iconColor]=\"row.locked || disabled() ? 'muted' : 'danger'\"\n [ariaLabel]=\"removeLabel()\"\n [tooltip]=\"isNarrow() ? '' : removeLabel()\"\n [disabled]=\"row.locked || disabled()\"\n (clicked)=\"onRemove(row)\" />\n }\n </div>\n </div>\n }\n </div>\n }\n\n @if (actionsShown()) {\n <div rtElem=\"actions\">\n <div rtElem=\"add\">\n <ng-content />\n </div>\n\n @if (resetClearShown()) {\n <rt-icon-button\n qa-dataid=\"dynamic-selector-reset\"\n icon=\"refresh\"\n size=\"sm\"\n [radius]=\"buttonRadius()\"\n [iconColor]=\"resetDisabled() || disabled() ? 'muted' : 'current'\"\n [ariaLabel]=\"resetLabel()\"\n [tooltip]=\"isNarrow() ? '' : resetLabel()\"\n [disabled]=\"resetDisabled() || disabled()\"\n (clicked)=\"resetClicked.emit()\" />\n <rt-icon-button\n qa-dataid=\"dynamic-selector-clear\"\n icon=\"close\"\n size=\"sm\"\n [radius]=\"buttonRadius()\"\n [iconColor]=\"clearDisabled() || disabled() ? 'muted' : 'danger'\"\n [ariaLabel]=\"clearLabel()\"\n [tooltip]=\"isNarrow() ? '' : clearLabel()\"\n [disabled]=\"clearDisabled() || disabled()\"\n (clicked)=\"cleared.emit()\" />\n }\n </div>\n }\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-dynamic-selector-list{--rt-dynamic-selector-list-row-bg: var(--rt-color-action-primary-subtle);--rt-dynamic-selector-list-row-radius: var(--rt-radius-sm);--rt-dynamic-selector-list-divider-width: var(--rt-border-width-thin);--rt-dynamic-selector-list-drag-shadow: var(--rt-shadow-md);--rt-dynamic-selector-list-drag-duration: var(--rt-duration-base);display:flex;flex-direction:column;gap:var(--rt-space-2xs)}.rt-dynamic-selector-list__rows{display:flex;flex-direction:column;gap:var(--rt-space-sm)}.rt-dynamic-selector-list__row{display:flex;min-height:var(--rt-control-height-lg);box-sizing:border-box;align-items:center;padding:var(--rt-space-2xs) var(--rt-space-2xs) var(--rt-space-2xs) var(--rt-space-sm);border-radius:var(--rt-dynamic-selector-list-row-radius);background:var(--rt-dynamic-selector-list-row-bg);color:var(--rt-color-text-primary);gap:var(--rt-space-sm)}.rt-dynamic-selector-list__handle{border-right:var(--rt-dynamic-selector-list-divider-width) solid var(--rt-color-border-default);cursor:grab;padding-inline-end:var(--rt-space-2xs)}.rt-dynamic-selector-list__title{min-width:0;flex:1 1 auto;font-size:var(--rt-text-md);overflow-wrap:anywhere}.rt-dynamic-selector-list__field{min-width:0;flex:1 1 auto}.rt-dynamic-selector-list__controls{display:flex;flex:0 0 auto;align-items:center;gap:var(--rt-space-2xs)}.rt-dynamic-selector-list__actions{display:flex;align-items:center;gap:var(--rt-space-2xs)}.rt-dynamic-selector-list__add{display:flex;min-width:0;flex:1 1 auto;align-items:center}.rt-dynamic-selector-list__row.cdk-drag-preview{--rt-dynamic-selector-list-row-bg: var(--rt-color-action-primary-subtle);--rt-dynamic-selector-list-row-radius: var(--rt-radius-sm);--rt-dynamic-selector-list-divider-width: var(--rt-border-width-thin);--rt-dynamic-selector-list-drag-shadow: var(--rt-shadow-md);box-shadow:var(--rt-dynamic-selector-list-drag-shadow)}.rt-dynamic-selector-list__row.cdk-drag-placeholder{opacity:0}.rt-dynamic-selector-list__row.cdk-drag-animating,.rt-dynamic-selector-list__rows.cdk-drop-list-dragging .rt-dynamic-selector-list__row:not(.cdk-drag-placeholder){transition:transform var(--rt-dynamic-selector-list-drag-duration) ease-out}}.rt-dynamic-selector-list__row.cdk-drag-preview{padding:var(--rt-space-2xs) var(--rt-space-2xs) var(--rt-space-2xs) var(--rt-space-sm);background-color:var(--rt-color-bg-surface);background-image:linear-gradient(var(--rt-dynamic-selector-list-row-bg),var(--rt-dynamic-selector-list-row-bg));color:var(--rt-color-text-primary)}\n"], dependencies: [{ kind: "ngmodule", type:
|
|
106
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtDynamicSelectorListComponent, isStandalone: true, selector: "rt-dynamic-selector-list", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, actionsShown: { classPropertyName: "actionsShown", publicName: "actionsShown", isSignal: true, isRequired: false, transformFunction: null }, resetClearShown: { classPropertyName: "resetClearShown", publicName: "resetClearShown", isSignal: true, isRequired: false, transformFunction: null }, removeShown: { classPropertyName: "removeShown", publicName: "removeShown", isSignal: true, isRequired: false, transformFunction: null }, resetDisabled: { classPropertyName: "resetDisabled", publicName: "resetDisabled", isSignal: true, isRequired: false, transformFunction: null }, clearDisabled: { classPropertyName: "clearDisabled", publicName: "clearDisabled", isSignal: true, isRequired: false, transformFunction: null }, buttonRadius: { classPropertyName: "buttonRadius", publicName: "buttonRadius", isSignal: true, isRequired: false, transformFunction: null }, clearIcon: { classPropertyName: "clearIcon", publicName: "clearIcon", isSignal: true, isRequired: false, transformFunction: null }, titleWrap: { classPropertyName: "titleWrap", publicName: "titleWrap", isSignal: true, isRequired: false, transformFunction: null }, titleTpl: { classPropertyName: "titleTpl", publicName: "titleTpl", isSignal: true, isRequired: false, transformFunction: null }, controlsTpl: { classPropertyName: "controlsTpl", publicName: "controlsTpl", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removed: "removed", moved: "moved", edited: "edited", resetClicked: "resetClicked", cleared: "cleared" }, host: { classAttribute: "rt-dynamic-selector-list" }, ngImport: i0, template: "<ng-container rtBlock=\"rt-dynamic-selector-list\">\n @if (rows().length > 0) {\n <div rtElem=\"rows\" cdkDropList qa-dataid=\"dynamic-selector-rows\" (cdkDropListDropped)=\"onDrop($event)\">\n @for (row of rows(); track row.key; let index = $index) {\n <div\n rtElem=\"row\"\n cdkDrag\n qa-dataid=\"dynamic-selector-row\"\n [rtMod]=\"{ locked: row.locked }\"\n [cdkDragDisabled]=\"!draggable() || disabled()\">\n @if (draggable()) {\n <span rtElem=\"handle\">\n <rt-icon-button\n cdkDragHandle\n qa-dataid=\"dynamic-selector-drag\"\n icon=\"arrows\"\n size=\"sm\"\n [radius]=\"buttonRadius()\"\n [ariaLabel]=\"dragLabel()\"\n [tooltip]=\"isNarrow() ? '' : dragLabel()\"\n [disabled]=\"disabled()\" />\n </span>\n }\n\n @if (editedIndex() === index) {\n <rt-input\n rtElem=\"field\"\n qa-dataid=\"dynamic-selector-edit-field\"\n [ngModel]=\"draft()\"\n (ngModelChange)=\"draft.set($event ?? '')\"\n (keydown.enter)=\"onEditApply(row)\" />\n } @else if (titleTpl(); as tpl) {\n <div rtElem=\"title\">\n <ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ $implicit: row.item }\" />\n </div>\n } @else {\n <span\n rtElem=\"title\"\n rtTooltipWhenTruncated\n [rtMod]=\"{ nowrap: !titleWrap() }\"\n [rtTooltip]=\"titleWrap() ? '' : row.label\">\n {{ row.label }}\n </span>\n }\n\n <div rtElem=\"controls\">\n @if (controlsTpl(); as tpl) {\n <ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ $implicit: row.item }\" />\n }\n\n @if (editable()) {\n @if (editedIndex() === index) {\n <rt-icon-button\n qa-dataid=\"dynamic-selector-edit-cancel\"\n icon=\"undo\"\n size=\"sm\"\n [radius]=\"buttonRadius()\"\n [ariaLabel]=\"cancelLabel()\"\n [tooltip]=\"isNarrow() ? '' : cancelLabel()\"\n (clicked)=\"onEditCancel()\" />\n <rt-icon-button\n qa-dataid=\"dynamic-selector-edit-apply\"\n icon=\"check\"\n size=\"sm\"\n [radius]=\"buttonRadius()\"\n [ariaLabel]=\"applyLabel()\"\n [tooltip]=\"isNarrow() ? '' : applyLabel()\"\n (clicked)=\"onEditApply(row)\" />\n } @else {\n <rt-icon-button\n qa-dataid=\"dynamic-selector-edit\"\n icon=\"pencil\"\n size=\"sm\"\n [radius]=\"buttonRadius()\"\n [ariaLabel]=\"editLabel()\"\n [tooltip]=\"isNarrow() ? '' : editLabel()\"\n [disabled]=\"disabled()\"\n (clicked)=\"onEditStart(index, row)\" />\n }\n }\n\n @if (removeShown()) {\n <rt-icon-button\n qa-dataid=\"dynamic-selector-remove\"\n icon=\"trash\"\n size=\"sm\"\n [radius]=\"buttonRadius()\"\n [iconColor]=\"row.locked || disabled() ? 'muted' : 'danger'\"\n [ariaLabel]=\"removeLabel()\"\n [tooltip]=\"isNarrow() ? '' : removeLabel()\"\n [disabled]=\"row.locked || disabled()\"\n (clicked)=\"onRemove(row)\" />\n }\n </div>\n </div>\n }\n </div>\n }\n\n @if (actionsShown()) {\n <div rtElem=\"actions\">\n <div rtElem=\"add\">\n <ng-content />\n </div>\n\n @if (resetClearShown()) {\n <rt-icon-button\n rtElem=\"reset\"\n qa-dataid=\"dynamic-selector-reset\"\n icon=\"refresh\"\n size=\"sm\"\n [radius]=\"buttonRadius()\"\n [iconColor]=\"resetDisabled() || disabled() ? 'muted' : 'current'\"\n [ariaLabel]=\"resetLabel()\"\n [tooltip]=\"isNarrow() ? '' : resetLabel()\"\n [disabled]=\"resetDisabled() || disabled()\"\n (clicked)=\"resetClicked.emit()\" />\n <rt-icon-button\n rtElem=\"clear\"\n qa-dataid=\"dynamic-selector-clear\"\n size=\"sm\"\n [icon]=\"clearIcon()\"\n [radius]=\"buttonRadius()\"\n [iconColor]=\"clearDisabled() || disabled() ? 'muted' : 'danger'\"\n [ariaLabel]=\"clearLabel()\"\n [tooltip]=\"isNarrow() ? '' : clearLabel()\"\n [disabled]=\"clearDisabled() || disabled()\"\n (clicked)=\"cleared.emit()\" />\n }\n </div>\n }\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-dynamic-selector-list{--rt-dynamic-selector-list-row-bg: var(--rt-color-action-primary-subtle);--rt-dynamic-selector-list-row-radius: var(--rt-radius-sm);--rt-dynamic-selector-list-divider-width: var(--rt-border-width-thin);--rt-dynamic-selector-list-drag-shadow: var(--rt-shadow-md);--rt-dynamic-selector-list-drag-duration: var(--rt-duration-base);--rt-dynamic-selector-list-row-padding-x: var(--rt-space-sm);--rt-dynamic-selector-list-add-font-weight: var(--rt-font-weight-medium);--rt-dynamic-selector-list-add-indent: 0;--rt-dynamic-selector-list-reset-color: var(--rt-color-text-primary);display:flex;flex-direction:column;gap:var(--rt-space-2xs)}.rt-dynamic-selector-list__rows{display:flex;flex-direction:column;gap:var(--rt-space-sm)}.rt-dynamic-selector-list__row{display:flex;min-height:var(--rt-control-height-lg);box-sizing:border-box;align-items:center;padding:var(--rt-space-2xs) var(--rt-space-2xs) var(--rt-space-2xs) var(--rt-dynamic-selector-list-row-padding-x);border-radius:var(--rt-dynamic-selector-list-row-radius);background:var(--rt-dynamic-selector-list-row-bg);color:var(--rt-color-text-primary);gap:var(--rt-space-sm)}.rt-dynamic-selector-list__handle{border-right:var(--rt-dynamic-selector-list-divider-width) solid var(--rt-color-border-default);cursor:grab;padding-inline-end:var(--rt-space-2xs)}.rt-dynamic-selector-list__title{min-width:0;flex:1 1 auto;font-size:var(--rt-text-md);overflow-wrap:anywhere}.rt-dynamic-selector-list__title--nowrap{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rt-dynamic-selector-list__field{min-width:0;flex:1 1 auto}.rt-dynamic-selector-list__controls{display:flex;flex:0 0 auto;align-items:center;gap:var(--rt-space-2xs)}.rt-dynamic-selector-list__actions{display:flex;align-items:center;gap:var(--rt-space-2xs)}.rt-dynamic-selector-list__add{display:flex;min-width:0;flex:1 1 auto;align-items:center;padding-inline-start:var(--rt-dynamic-selector-list-add-indent)}.rt-dynamic-selector-list__add .rt-button{color:var(--rt-dynamic-selector-list-add-color, var(--rt-btn-color));font-weight:var(--rt-dynamic-selector-list-add-font-weight)}.rt-dynamic-selector-list__reset.rt-icon-button{--rt-icon-button-color: var(--rt-dynamic-selector-list-reset-color)}.rt-dynamic-selector-list__clear{flex:none}.rt-dynamic-selector-list__row.cdk-drag-preview{--rt-dynamic-selector-list-row-bg: var(--rt-color-action-primary-subtle);--rt-dynamic-selector-list-row-radius: var(--rt-radius-sm);--rt-dynamic-selector-list-divider-width: var(--rt-border-width-thin);--rt-dynamic-selector-list-drag-shadow: var(--rt-shadow-md);box-shadow:var(--rt-dynamic-selector-list-drag-shadow)}.rt-dynamic-selector-list__row.cdk-drag-placeholder{opacity:0}.rt-dynamic-selector-list__row.cdk-drag-animating,.rt-dynamic-selector-list__rows.cdk-drop-list-dragging .rt-dynamic-selector-list__row:not(.cdk-drag-placeholder){transition:transform var(--rt-dynamic-selector-list-drag-duration) ease-out}}.rt-dynamic-selector-list__row.cdk-drag-preview{padding:var(--rt-space-2xs) var(--rt-space-2xs) var(--rt-space-2xs) var(--rt-space-sm);background-color:var(--rt-color-bg-surface);background-image:linear-gradient(var(--rt-dynamic-selector-list-row-bg),var(--rt-dynamic-selector-list-row-bg));color:var(--rt-color-text-primary)}\n"], dependencies: [{ kind: "ngmodule", type:
|
|
101
107
|
// Angular
|
|
102
108
|
FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type:
|
|
103
109
|
// CDK
|
|
104
110
|
CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type:
|
|
105
111
|
// standalone components / directives
|
|
106
|
-
BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }, { kind: "component", type: RtIconButtonComponent, selector: "rt-icon-button", inputs: ["icon", "glyph", "ariaLabel", "variant", "iconColor", "iconFill", "size", "iconSize", "type", "tooltip", "tabIndex", "loading", "disabled", "active", "indicator"], outputs: ["clicked"] }, { kind: "component", type: RtInputComponent, selector: "rt-input", inputs: ["appearance", "type", "placeholder", "iconLeft", "iconRight", "passwordToggle", "autocomplete"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
112
|
+
BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }, { kind: "component", type: RtIconButtonComponent, selector: "rt-icon-button", inputs: ["icon", "glyph", "ariaLabel", "variant", "iconColor", "iconFill", "size", "iconSize", "type", "tooltip", "tabIndex", "loading", "disabled", "active", "indicator"], outputs: ["clicked"] }, { kind: "component", type: RtInputComponent, selector: "rt-input", inputs: ["appearance", "type", "placeholder", "iconLeft", "iconRight", "passwordToggle", "autocomplete"] }, { kind: "directive", type: RtTooltipDirective, selector: "[rtTooltip]", inputs: ["rtTooltip", "rtTooltipPlacement", "rtTooltipWhenTruncated"], exportAs: ["rtTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
107
113
|
}
|
|
108
114
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtDynamicSelectorListComponent, decorators: [{
|
|
109
115
|
type: Component,
|
|
@@ -122,8 +128,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
|
|
|
122
128
|
RtIconButtonComponent,
|
|
123
129
|
RtInputComponent,
|
|
124
130
|
RtTooltipDirective,
|
|
125
|
-
], host: { class: BEM_BLOCK$3 }, template: "<ng-container rtBlock=\"rt-dynamic-selector-list\">\n @if (rows().length > 0) {\n <div rtElem=\"rows\" cdkDropList qa-dataid=\"dynamic-selector-rows\" (cdkDropListDropped)=\"onDrop($event)\">\n @for (row of rows(); track row.key; let index = $index) {\n <div\n rtElem=\"row\"\n cdkDrag\n qa-dataid=\"dynamic-selector-row\"\n [rtMod]=\"{ locked: row.locked }\"\n [cdkDragDisabled]=\"!draggable() || disabled()\">\n @if (draggable()) {\n <span rtElem=\"handle\">\n <rt-icon-button\n cdkDragHandle\n qa-dataid=\"dynamic-selector-drag\"\n icon=\"arrows\"\n size=\"sm\"\n [radius]=\"buttonRadius()\"\n [ariaLabel]=\"dragLabel()\"\n [tooltip]=\"isNarrow() ? '' : dragLabel()\"\n [disabled]=\"disabled()\" />\n </span>\n }\n\n @if (editedIndex() === index) {\n <rt-input\n rtElem=\"field\"\n qa-dataid=\"dynamic-selector-edit-field\"\n [ngModel]=\"draft()\"\n (ngModelChange)=\"draft.set($event ?? '')\"\n (keydown.enter)=\"onEditApply(row)\" />\n } @else if (titleTpl(); as tpl) {\n <div rtElem=\"title\">\n <ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ $implicit: row.item }\" />\n </div>\n } @else {\n <span
|
|
126
|
-
}], propDecorators: { rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], draggable: [{ type: i0.Input, args: [{ isSignal: true, alias: "draggable", required: false }] }], editable: [{ type: i0.Input, args: [{ isSignal: true, alias: "editable", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], actionsShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionsShown", required: false }] }], resetClearShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "resetClearShown", required: false }] }], removeShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeShown", required: false }] }], resetDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "resetDisabled", required: false }] }], clearDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearDisabled", required: false }] }], buttonRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonRadius", required: false }] }], titleTpl: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleTpl", required: false }] }], controlsTpl: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlsTpl", required: false }] }], removed: [{ type: i0.Output, args: ["removed"] }], moved: [{ type: i0.Output, args: ["moved"] }], edited: [{ type: i0.Output, args: ["edited"] }], resetClicked: [{ type: i0.Output, args: ["resetClicked"] }], cleared: [{ type: i0.Output, args: ["cleared"] }] } });
|
|
131
|
+
], host: { class: BEM_BLOCK$3 }, template: "<ng-container rtBlock=\"rt-dynamic-selector-list\">\n @if (rows().length > 0) {\n <div rtElem=\"rows\" cdkDropList qa-dataid=\"dynamic-selector-rows\" (cdkDropListDropped)=\"onDrop($event)\">\n @for (row of rows(); track row.key; let index = $index) {\n <div\n rtElem=\"row\"\n cdkDrag\n qa-dataid=\"dynamic-selector-row\"\n [rtMod]=\"{ locked: row.locked }\"\n [cdkDragDisabled]=\"!draggable() || disabled()\">\n @if (draggable()) {\n <span rtElem=\"handle\">\n <rt-icon-button\n cdkDragHandle\n qa-dataid=\"dynamic-selector-drag\"\n icon=\"arrows\"\n size=\"sm\"\n [radius]=\"buttonRadius()\"\n [ariaLabel]=\"dragLabel()\"\n [tooltip]=\"isNarrow() ? '' : dragLabel()\"\n [disabled]=\"disabled()\" />\n </span>\n }\n\n @if (editedIndex() === index) {\n <rt-input\n rtElem=\"field\"\n qa-dataid=\"dynamic-selector-edit-field\"\n [ngModel]=\"draft()\"\n (ngModelChange)=\"draft.set($event ?? '')\"\n (keydown.enter)=\"onEditApply(row)\" />\n } @else if (titleTpl(); as tpl) {\n <div rtElem=\"title\">\n <ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ $implicit: row.item }\" />\n </div>\n } @else {\n <span\n rtElem=\"title\"\n rtTooltipWhenTruncated\n [rtMod]=\"{ nowrap: !titleWrap() }\"\n [rtTooltip]=\"titleWrap() ? '' : row.label\">\n {{ row.label }}\n </span>\n }\n\n <div rtElem=\"controls\">\n @if (controlsTpl(); as tpl) {\n <ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ $implicit: row.item }\" />\n }\n\n @if (editable()) {\n @if (editedIndex() === index) {\n <rt-icon-button\n qa-dataid=\"dynamic-selector-edit-cancel\"\n icon=\"undo\"\n size=\"sm\"\n [radius]=\"buttonRadius()\"\n [ariaLabel]=\"cancelLabel()\"\n [tooltip]=\"isNarrow() ? '' : cancelLabel()\"\n (clicked)=\"onEditCancel()\" />\n <rt-icon-button\n qa-dataid=\"dynamic-selector-edit-apply\"\n icon=\"check\"\n size=\"sm\"\n [radius]=\"buttonRadius()\"\n [ariaLabel]=\"applyLabel()\"\n [tooltip]=\"isNarrow() ? '' : applyLabel()\"\n (clicked)=\"onEditApply(row)\" />\n } @else {\n <rt-icon-button\n qa-dataid=\"dynamic-selector-edit\"\n icon=\"pencil\"\n size=\"sm\"\n [radius]=\"buttonRadius()\"\n [ariaLabel]=\"editLabel()\"\n [tooltip]=\"isNarrow() ? '' : editLabel()\"\n [disabled]=\"disabled()\"\n (clicked)=\"onEditStart(index, row)\" />\n }\n }\n\n @if (removeShown()) {\n <rt-icon-button\n qa-dataid=\"dynamic-selector-remove\"\n icon=\"trash\"\n size=\"sm\"\n [radius]=\"buttonRadius()\"\n [iconColor]=\"row.locked || disabled() ? 'muted' : 'danger'\"\n [ariaLabel]=\"removeLabel()\"\n [tooltip]=\"isNarrow() ? '' : removeLabel()\"\n [disabled]=\"row.locked || disabled()\"\n (clicked)=\"onRemove(row)\" />\n }\n </div>\n </div>\n }\n </div>\n }\n\n @if (actionsShown()) {\n <div rtElem=\"actions\">\n <div rtElem=\"add\">\n <ng-content />\n </div>\n\n @if (resetClearShown()) {\n <rt-icon-button\n rtElem=\"reset\"\n qa-dataid=\"dynamic-selector-reset\"\n icon=\"refresh\"\n size=\"sm\"\n [radius]=\"buttonRadius()\"\n [iconColor]=\"resetDisabled() || disabled() ? 'muted' : 'current'\"\n [ariaLabel]=\"resetLabel()\"\n [tooltip]=\"isNarrow() ? '' : resetLabel()\"\n [disabled]=\"resetDisabled() || disabled()\"\n (clicked)=\"resetClicked.emit()\" />\n <rt-icon-button\n rtElem=\"clear\"\n qa-dataid=\"dynamic-selector-clear\"\n size=\"sm\"\n [icon]=\"clearIcon()\"\n [radius]=\"buttonRadius()\"\n [iconColor]=\"clearDisabled() || disabled() ? 'muted' : 'danger'\"\n [ariaLabel]=\"clearLabel()\"\n [tooltip]=\"isNarrow() ? '' : clearLabel()\"\n [disabled]=\"clearDisabled() || disabled()\"\n (clicked)=\"cleared.emit()\" />\n }\n </div>\n }\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-dynamic-selector-list{--rt-dynamic-selector-list-row-bg: var(--rt-color-action-primary-subtle);--rt-dynamic-selector-list-row-radius: var(--rt-radius-sm);--rt-dynamic-selector-list-divider-width: var(--rt-border-width-thin);--rt-dynamic-selector-list-drag-shadow: var(--rt-shadow-md);--rt-dynamic-selector-list-drag-duration: var(--rt-duration-base);--rt-dynamic-selector-list-row-padding-x: var(--rt-space-sm);--rt-dynamic-selector-list-add-font-weight: var(--rt-font-weight-medium);--rt-dynamic-selector-list-add-indent: 0;--rt-dynamic-selector-list-reset-color: var(--rt-color-text-primary);display:flex;flex-direction:column;gap:var(--rt-space-2xs)}.rt-dynamic-selector-list__rows{display:flex;flex-direction:column;gap:var(--rt-space-sm)}.rt-dynamic-selector-list__row{display:flex;min-height:var(--rt-control-height-lg);box-sizing:border-box;align-items:center;padding:var(--rt-space-2xs) var(--rt-space-2xs) var(--rt-space-2xs) var(--rt-dynamic-selector-list-row-padding-x);border-radius:var(--rt-dynamic-selector-list-row-radius);background:var(--rt-dynamic-selector-list-row-bg);color:var(--rt-color-text-primary);gap:var(--rt-space-sm)}.rt-dynamic-selector-list__handle{border-right:var(--rt-dynamic-selector-list-divider-width) solid var(--rt-color-border-default);cursor:grab;padding-inline-end:var(--rt-space-2xs)}.rt-dynamic-selector-list__title{min-width:0;flex:1 1 auto;font-size:var(--rt-text-md);overflow-wrap:anywhere}.rt-dynamic-selector-list__title--nowrap{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rt-dynamic-selector-list__field{min-width:0;flex:1 1 auto}.rt-dynamic-selector-list__controls{display:flex;flex:0 0 auto;align-items:center;gap:var(--rt-space-2xs)}.rt-dynamic-selector-list__actions{display:flex;align-items:center;gap:var(--rt-space-2xs)}.rt-dynamic-selector-list__add{display:flex;min-width:0;flex:1 1 auto;align-items:center;padding-inline-start:var(--rt-dynamic-selector-list-add-indent)}.rt-dynamic-selector-list__add .rt-button{color:var(--rt-dynamic-selector-list-add-color, var(--rt-btn-color));font-weight:var(--rt-dynamic-selector-list-add-font-weight)}.rt-dynamic-selector-list__reset.rt-icon-button{--rt-icon-button-color: var(--rt-dynamic-selector-list-reset-color)}.rt-dynamic-selector-list__clear{flex:none}.rt-dynamic-selector-list__row.cdk-drag-preview{--rt-dynamic-selector-list-row-bg: var(--rt-color-action-primary-subtle);--rt-dynamic-selector-list-row-radius: var(--rt-radius-sm);--rt-dynamic-selector-list-divider-width: var(--rt-border-width-thin);--rt-dynamic-selector-list-drag-shadow: var(--rt-shadow-md);box-shadow:var(--rt-dynamic-selector-list-drag-shadow)}.rt-dynamic-selector-list__row.cdk-drag-placeholder{opacity:0}.rt-dynamic-selector-list__row.cdk-drag-animating,.rt-dynamic-selector-list__rows.cdk-drop-list-dragging .rt-dynamic-selector-list__row:not(.cdk-drag-placeholder){transition:transform var(--rt-dynamic-selector-list-drag-duration) ease-out}}.rt-dynamic-selector-list__row.cdk-drag-preview{padding:var(--rt-space-2xs) var(--rt-space-2xs) var(--rt-space-2xs) var(--rt-space-sm);background-color:var(--rt-color-bg-surface);background-image:linear-gradient(var(--rt-dynamic-selector-list-row-bg),var(--rt-dynamic-selector-list-row-bg));color:var(--rt-color-text-primary)}\n"] }]
|
|
132
|
+
}], propDecorators: { rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], draggable: [{ type: i0.Input, args: [{ isSignal: true, alias: "draggable", required: false }] }], editable: [{ type: i0.Input, args: [{ isSignal: true, alias: "editable", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], actionsShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionsShown", required: false }] }], resetClearShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "resetClearShown", required: false }] }], removeShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeShown", required: false }] }], resetDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "resetDisabled", required: false }] }], clearDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearDisabled", required: false }] }], buttonRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonRadius", required: false }] }], clearIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearIcon", required: false }] }], titleWrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleWrap", required: false }] }], titleTpl: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleTpl", required: false }] }], controlsTpl: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlsTpl", required: false }] }], removed: [{ type: i0.Output, args: ["removed"] }], moved: [{ type: i0.Output, args: ["moved"] }], edited: [{ type: i0.Output, args: ["edited"] }], resetClicked: [{ type: i0.Output, args: ["resetClicked"] }], cleared: [{ type: i0.Output, args: ["cleared"] }] } });
|
|
127
133
|
|
|
128
134
|
/**
|
|
129
135
|
* Маркеры частей строки списка выбранного — своим файлом, как у соседних семей.
|
|
@@ -305,6 +311,11 @@ class RtDynamicInputComponent extends RtFormControlBase {
|
|
|
305
311
|
/** Последнее значение, записанное формой: к нему возвращает сброс. */
|
|
306
312
|
this.#initial = signal([], /* @ts-ignore */
|
|
307
313
|
...(ngDevMode ? [{ debugName: "#initial" }] : /* istanbul ignore next */ []));
|
|
314
|
+
/* Умолчания входов считаются из настроек кита при объявлении: вход в разметке перебивает их. */
|
|
315
|
+
this.#invitationButtonIconDefault = rtKitDefault('dynamicSelector', (it) => it.invitationButtonIcon, null);
|
|
316
|
+
this.#invitationButtonAppearanceDefault = rtKitDefault('dynamicSelector', (it) => it.invitationButtonAppearance, 'outlined');
|
|
317
|
+
this.#clearIconDefault = rtKitDefault('dynamicSelector', (it) => it.clearIcon, 'close');
|
|
318
|
+
this.#titleWrapDefault = rtKitDefault('dynamicSelector', (it) => it.titleWrap, true);
|
|
308
319
|
this.addLabel = rtKitLabel('dynamicSelectorAdd');
|
|
309
320
|
this.placeholderLabel = rtKitLabel('dynamicInputPlaceholder');
|
|
310
321
|
this.field = viewChild('field', { ...(ngDevMode ? { debugName: "field" } : /* istanbul ignore next */ {}), read: ElementRef });
|
|
@@ -364,8 +375,28 @@ class RtDynamicInputComponent extends RtFormControlBase {
|
|
|
364
375
|
this.invitation = input(false, { ...(ngDevMode ? { debugName: "invitation" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
365
376
|
this.invitationIcon = input(null, /* @ts-ignore */
|
|
366
377
|
...(ngDevMode ? [{ debugName: "invitationIcon" }] : /* istanbul ignore next */ []));
|
|
378
|
+
/** Имя Material вместо `invitationIcon` — уходит во вход `glyph` заглушки приглашения. */
|
|
379
|
+
this.invitationGlyph = input(null, /* @ts-ignore */
|
|
380
|
+
...(ngDevMode ? [{ debugName: "invitationGlyph" }] : /* istanbul ignore next */ []));
|
|
367
381
|
this.invitationDescription = input('', /* @ts-ignore */
|
|
368
382
|
...(ngDevMode ? [{ debugName: "invitationDescription" }] : /* istanbul ignore next */ []));
|
|
383
|
+
/** Значок кнопки приглашения; null — кнопка без значка. */
|
|
384
|
+
this.invitationButtonIcon = input(this.#invitationButtonIconDefault, /* @ts-ignore */
|
|
385
|
+
...(ngDevMode ? [{ debugName: "invitationButtonIcon" }] : /* istanbul ignore next */ []));
|
|
386
|
+
/** Вид кнопки приглашения — тот же набор, что у кнопки кита. */
|
|
387
|
+
this.invitationButtonAppearance = input(this.#invitationButtonAppearanceDefault, /* @ts-ignore */
|
|
388
|
+
...(ngDevMode ? [{ debugName: "invitationButtonAppearance" }] : /* istanbul ignore next */ []));
|
|
389
|
+
/** Значок кнопки «Очистить список». */
|
|
390
|
+
this.clearIcon = input(this.#clearIconDefault, /* @ts-ignore */
|
|
391
|
+
...(ngDevMode ? [{ debugName: "clearIcon" }] : /* istanbul ignore next */ []));
|
|
392
|
+
/** Название строки переносится; `false` ведёт его одной строкой с многоточием и подсказкой при обрезке. */
|
|
393
|
+
this.titleWrap = input(this.#titleWrapDefault, { ...(ngDevMode ? { debugName: "titleWrap" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
394
|
+
/** Вид поля, в которое вводят новую строку. */
|
|
395
|
+
this.fieldAppearance = input('outline', /* @ts-ignore */
|
|
396
|
+
...(ngDevMode ? [{ debugName: "fieldAppearance" }] : /* istanbul ignore next */ []));
|
|
397
|
+
/** Подпись поля новой строки; пустая — поле без подписи, как раньше. */
|
|
398
|
+
this.fieldLabel = input('', /* @ts-ignore */
|
|
399
|
+
...(ngDevMode ? [{ debugName: "fieldLabel" }] : /* istanbul ignore next */ []));
|
|
369
400
|
/** Корзина строк; без неё строки убирает только очистка или сам вызывающий. */
|
|
370
401
|
this.removeShown = input(true, { ...(ngDevMode ? { debugName: "removeShown" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
371
402
|
/** Сброс и очистка под списком: `false` их убирает, кнопка добавления остаётся. */
|
|
@@ -383,6 +414,11 @@ class RtDynamicInputComponent extends RtFormControlBase {
|
|
|
383
414
|
#injector;
|
|
384
415
|
/** Последнее значение, записанное формой: к нему возвращает сброс. */
|
|
385
416
|
#initial;
|
|
417
|
+
/* Умолчания входов считаются из настроек кита при объявлении: вход в разметке перебивает их. */
|
|
418
|
+
#invitationButtonIconDefault;
|
|
419
|
+
#invitationButtonAppearanceDefault;
|
|
420
|
+
#clearIconDefault;
|
|
421
|
+
#titleWrapDefault;
|
|
386
422
|
/** Записанное формой становится и списком, и значением для сброса; пустой массив список опустошает. */
|
|
387
423
|
writeValue(value) {
|
|
388
424
|
super.writeValue(value === null ? null : [...value]);
|
|
@@ -457,14 +493,14 @@ class RtDynamicInputComponent extends RtFormControlBase {
|
|
|
457
493
|
this.emitChange(values);
|
|
458
494
|
}
|
|
459
495
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtDynamicInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
460
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtDynamicInputComponent, isStandalone: true, selector: "rt-dynamic-input", inputs: { buttonTitle: { classPropertyName: "buttonTitle", publicName: "buttonTitle", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, readonlyKeys: { classPropertyName: "readonlyKeys", publicName: "readonlyKeys", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, buttonRadius: { classPropertyName: "buttonRadius", publicName: "buttonRadius", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, invitation: { classPropertyName: "invitation", publicName: "invitation", isSignal: true, isRequired: false, transformFunction: null }, invitationIcon: { classPropertyName: "invitationIcon", publicName: "invitationIcon", isSignal: true, isRequired: false, transformFunction: null }, invitationDescription: { classPropertyName: "invitationDescription", publicName: "invitationDescription", isSignal: true, isRequired: false, transformFunction: null }, removeShown: { classPropertyName: "removeShown", publicName: "removeShown", isSignal: true, isRequired: false, transformFunction: null }, listActionsShown: { classPropertyName: "listActionsShown", publicName: "listActionsShown", isSignal: true, isRequired: false, transformFunction: null }, extraChanged: { classPropertyName: "extraChanged", publicName: "extraChanged", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { listReset: "listReset", listCleared: "listCleared" }, host: { classAttribute: "rt-dynamic-input" }, providers: [
|
|
496
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtDynamicInputComponent, isStandalone: true, selector: "rt-dynamic-input", inputs: { buttonTitle: { classPropertyName: "buttonTitle", publicName: "buttonTitle", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, readonlyKeys: { classPropertyName: "readonlyKeys", publicName: "readonlyKeys", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, buttonRadius: { classPropertyName: "buttonRadius", publicName: "buttonRadius", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, invitation: { classPropertyName: "invitation", publicName: "invitation", isSignal: true, isRequired: false, transformFunction: null }, invitationIcon: { classPropertyName: "invitationIcon", publicName: "invitationIcon", isSignal: true, isRequired: false, transformFunction: null }, invitationGlyph: { classPropertyName: "invitationGlyph", publicName: "invitationGlyph", isSignal: true, isRequired: false, transformFunction: null }, invitationDescription: { classPropertyName: "invitationDescription", publicName: "invitationDescription", isSignal: true, isRequired: false, transformFunction: null }, invitationButtonIcon: { classPropertyName: "invitationButtonIcon", publicName: "invitationButtonIcon", isSignal: true, isRequired: false, transformFunction: null }, invitationButtonAppearance: { classPropertyName: "invitationButtonAppearance", publicName: "invitationButtonAppearance", isSignal: true, isRequired: false, transformFunction: null }, clearIcon: { classPropertyName: "clearIcon", publicName: "clearIcon", isSignal: true, isRequired: false, transformFunction: null }, titleWrap: { classPropertyName: "titleWrap", publicName: "titleWrap", isSignal: true, isRequired: false, transformFunction: null }, fieldAppearance: { classPropertyName: "fieldAppearance", publicName: "fieldAppearance", isSignal: true, isRequired: false, transformFunction: null }, fieldLabel: { classPropertyName: "fieldLabel", publicName: "fieldLabel", isSignal: true, isRequired: false, transformFunction: null }, removeShown: { classPropertyName: "removeShown", publicName: "removeShown", isSignal: true, isRequired: false, transformFunction: null }, listActionsShown: { classPropertyName: "listActionsShown", publicName: "listActionsShown", isSignal: true, isRequired: false, transformFunction: null }, extraChanged: { classPropertyName: "extraChanged", publicName: "extraChanged", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { listReset: "listReset", listCleared: "listCleared" }, host: { classAttribute: "rt-dynamic-input" }, providers: [
|
|
461
497
|
// Алиас базового токена — для contentChild(RtFormControlBase) в rt-field.
|
|
462
498
|
{ provide: RtFormControlBase, useExisting: forwardRef(() => RtDynamicInputComponent) },
|
|
463
|
-
], queries: [{ propertyName: "rowControls", first: true, predicate: RtDynamicSelectorRowControlsDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "field", first: true, predicate: ["field"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-container rtBlock=\"rt-dynamic-input\">\n <rt-dynamic-selector-list\n [rows]=\"rows()\"\n [draggable]=\"draggable()\"\n [buttonRadius]=\"buttonRadius()\"\n [editable]=\"editable()\"\n [disabled]=\"isDisabled()\"\n [actionsShown]=\"!isInvitationShown()\"\n [resetClearShown]=\"listActionsShown()\"\n [removeShown]=\"removeShown()\"\n [resetDisabled]=\"isResetDisabled()\"\n [clearDisabled]=\"isClearDisabled()\"\n [controlsTpl]=\"controlsTpl()\"\n (removed)=\"onRemoved($event)\"\n (moved)=\"onMoved($event)\"\n (edited)=\"onEdited($event)\"\n (resetClicked)=\"onReset()\"\n (cleared)=\"onCleared()\">\n @if (isAddShown()) {\n <button\n rtButton\n appearance=\"text\"\n type=\"button\"\n qa-dataid=\"dynamic-input-add\"\n [label]=\"addTitle()\"\n [attr.aria-label]=\"addTitle()\"\n [disabled]=\"isDisabled()\"\n (click)=\"onAdd()\"></button>\n }\n </rt-dynamic-selector-list>\n\n @if (isFieldShown()) {\n <rt-input\n
|
|
499
|
+
], queries: [{ propertyName: "rowControls", first: true, predicate: RtDynamicSelectorRowControlsDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "field", first: true, predicate: ["field"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-container rtBlock=\"rt-dynamic-input\">\n <rt-dynamic-selector-list\n [rows]=\"rows()\"\n [draggable]=\"draggable()\"\n [buttonRadius]=\"buttonRadius()\"\n [clearIcon]=\"clearIcon()\"\n [titleWrap]=\"titleWrap()\"\n [editable]=\"editable()\"\n [disabled]=\"isDisabled()\"\n [actionsShown]=\"!isInvitationShown()\"\n [resetClearShown]=\"listActionsShown()\"\n [removeShown]=\"removeShown()\"\n [resetDisabled]=\"isResetDisabled()\"\n [clearDisabled]=\"isClearDisabled()\"\n [controlsTpl]=\"controlsTpl()\"\n (removed)=\"onRemoved($event)\"\n (moved)=\"onMoved($event)\"\n (edited)=\"onEdited($event)\"\n (resetClicked)=\"onReset()\"\n (cleared)=\"onCleared()\">\n @if (isAddShown()) {\n <button\n rtButton\n appearance=\"text\"\n type=\"button\"\n qa-dataid=\"dynamic-input-add\"\n [label]=\"addTitle()\"\n [attr.aria-label]=\"addTitle()\"\n [disabled]=\"isDisabled()\"\n (click)=\"onAdd()\"></button>\n }\n </rt-dynamic-selector-list>\n\n @if (isFieldShown()) {\n <!-- \u041F\u043E\u0434\u043F\u0438\u0441\u044C \u043F\u043E\u043B\u044F \u0440\u0438\u0441\u0443\u0435\u0442 rt-field: \u0443 rt-input \u0441\u0432\u043E\u0435\u0439 \u043D\u0435\u0442. \u041E\u0431\u0451\u0440\u0442\u043A\u0430 \u0441\u0442\u043E\u0438\u0442 \u0442\u043E\u043B\u044C\u043A\u043E \u043F\u0440\u0438 \u043F\u043E\u0434\u043F\u0438\u0441\u0438 \u2014\n \u043F\u0443\u0441\u0442\u0430\u044F \u0434\u043E\u0431\u0430\u0432\u0438\u043B\u0430 \u0431\u044B \u0437\u0430\u0437\u043E\u0440 \u043F\u043E\u0434 \u043F\u043E\u043B\u0435\u043C \u0438 \u0441\u0434\u0432\u0438\u043D\u0443\u043B\u0430 \u043F\u0440\u0435\u0436\u043D\u0438\u0439 \u0432\u0438\u0434. -->\n @if (fieldLabel(); as label) {\n <rt-field qa-dataid=\"dynamic-input-field-label\" [label]=\"label\">\n <rt-input\n #field\n rtElem=\"field\"\n qa-dataid=\"dynamic-input-field\"\n [appearance]=\"fieldAppearance()\"\n [controlId]=\"effectiveControlId()\"\n [placeholder]=\"fieldPlaceholder()\"\n [ngModel]=\"draft()\"\n (ngModelChange)=\"draft.set($event ?? '')\"\n (keydown.enter)=\"onCommit()\"\n (focusout)=\"onCommit()\" />\n </rt-field>\n } @else {\n <rt-input\n #field\n rtElem=\"field\"\n qa-dataid=\"dynamic-input-field\"\n [appearance]=\"fieldAppearance()\"\n [controlId]=\"effectiveControlId()\"\n [placeholder]=\"fieldPlaceholder()\"\n [ngModel]=\"draft()\"\n (ngModelChange)=\"draft.set($event ?? '')\"\n (keydown.enter)=\"onCommit()\"\n (focusout)=\"onCommit()\" />\n }\n }\n\n @if (isInvitationShown()) {\n <rt-empty-state\n rtElem=\"invitation\"\n qa-dataid=\"dynamic-input-invitation\"\n [icon]=\"invitationIcon()\"\n [glyph]=\"invitationGlyph()\"\n [description]=\"invitationDescription()\">\n <button\n rtButton\n type=\"button\"\n qa-dataid=\"dynamic-input-invitation-add\"\n [appearance]=\"invitationButtonAppearance()\"\n [icon]=\"invitationButtonIcon()\"\n [label]=\"addTitle()\"\n [attr.aria-label]=\"addTitle()\"\n [disabled]=\"isDisabled()\"\n (click)=\"onAdd()\"></button>\n </rt-empty-state>\n }\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-dynamic-input{display:flex;width:100%;flex-direction:column;gap:var(--rt-space-sm)}.rt-dynamic-input__field,.rt-dynamic-input__invitation{display:block}}\n"], dependencies: [{ kind: "ngmodule", type:
|
|
464
500
|
// Angular
|
|
465
501
|
FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type:
|
|
466
502
|
// standalone components / directives
|
|
467
|
-
BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: RtButtonDirective, selector: "button[rtButton], a[rtButton]", inputs: ["label", "icon", "iconPos", "theme", "appearance", "size", "loading", "loadingIcon", "loadingLabel", "pressed"] }, { kind: "component", type: RtDynamicSelectorListComponent, selector: "rt-dynamic-selector-list", inputs: ["rows", "draggable", "editable", "disabled", "actionsShown", "resetClearShown", "removeShown", "resetDisabled", "clearDisabled", "buttonRadius", "titleTpl", "controlsTpl"], outputs: ["removed", "moved", "edited", "resetClicked", "cleared"] }, { kind: "component", type: RtEmptyStateComponent, selector: "rt-empty-state", inputs: ["icon", "glyph", "title", "description", "framed"] }, { kind: "component", type: RtInputComponent, selector: "rt-input", inputs: ["appearance", "type", "placeholder", "iconLeft", "iconRight", "passwordToggle", "autocomplete"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
503
|
+
BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: RtButtonDirective, selector: "button[rtButton], a[rtButton]", inputs: ["label", "icon", "iconPos", "theme", "appearance", "size", "loading", "loadingIcon", "loadingLabel", "pressed"] }, { kind: "component", type: RtDynamicSelectorListComponent, selector: "rt-dynamic-selector-list", inputs: ["rows", "draggable", "editable", "disabled", "actionsShown", "resetClearShown", "removeShown", "resetDisabled", "clearDisabled", "buttonRadius", "clearIcon", "titleWrap", "titleTpl", "controlsTpl"], outputs: ["removed", "moved", "edited", "resetClicked", "cleared"] }, { kind: "component", type: RtEmptyStateComponent, selector: "rt-empty-state", inputs: ["icon", "glyph", "title", "description", "framed"] }, { kind: "component", type: RtFieldComponent, selector: "rt-field", inputs: ["label", "hint", "help", "readonly", "loading", "required", "hideRequiredMark", "reserveHintSpace", "errors"] }, { kind: "component", type: RtInputComponent, selector: "rt-input", inputs: ["appearance", "type", "placeholder", "iconLeft", "iconRight", "passwordToggle", "autocomplete"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
468
504
|
}
|
|
469
505
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtDynamicInputComponent, decorators: [{
|
|
470
506
|
type: Component,
|
|
@@ -477,12 +513,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
|
|
|
477
513
|
RtButtonDirective,
|
|
478
514
|
RtDynamicSelectorListComponent,
|
|
479
515
|
RtEmptyStateComponent,
|
|
516
|
+
RtFieldComponent,
|
|
480
517
|
RtInputComponent,
|
|
481
518
|
], providers: [
|
|
482
519
|
// Алиас базового токена — для contentChild(RtFormControlBase) в rt-field.
|
|
483
520
|
{ provide: RtFormControlBase, useExisting: forwardRef(() => RtDynamicInputComponent) },
|
|
484
|
-
], host: { class: BEM_BLOCK$2 }, template: "<ng-container rtBlock=\"rt-dynamic-input\">\n <rt-dynamic-selector-list\n [rows]=\"rows()\"\n [draggable]=\"draggable()\"\n [buttonRadius]=\"buttonRadius()\"\n [editable]=\"editable()\"\n [disabled]=\"isDisabled()\"\n [actionsShown]=\"!isInvitationShown()\"\n [resetClearShown]=\"listActionsShown()\"\n [removeShown]=\"removeShown()\"\n [resetDisabled]=\"isResetDisabled()\"\n [clearDisabled]=\"isClearDisabled()\"\n [controlsTpl]=\"controlsTpl()\"\n (removed)=\"onRemoved($event)\"\n (moved)=\"onMoved($event)\"\n (edited)=\"onEdited($event)\"\n (resetClicked)=\"onReset()\"\n (cleared)=\"onCleared()\">\n @if (isAddShown()) {\n <button\n rtButton\n appearance=\"text\"\n type=\"button\"\n qa-dataid=\"dynamic-input-add\"\n [label]=\"addTitle()\"\n [attr.aria-label]=\"addTitle()\"\n [disabled]=\"isDisabled()\"\n (click)=\"onAdd()\"></button>\n }\n </rt-dynamic-selector-list>\n\n @if (isFieldShown()) {\n <rt-input\n
|
|
485
|
-
}], propDecorators: { field: [{ type: i0.ViewChild, args: ['field', { ...{ read: ElementRef }, isSignal: true }] }], rowControls: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtDynamicSelectorRowControlsDirective), { isSignal: true }] }], buttonTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonTitle", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], readonlyKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonlyKeys", required: false }] }], draggable: [{ type: i0.Input, args: [{ isSignal: true, alias: "draggable", required: false }] }], buttonRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonRadius", required: false }] }], editable: [{ type: i0.Input, args: [{ isSignal: true, alias: "editable", required: false }] }], invitation: [{ type: i0.Input, args: [{ isSignal: true, alias: "invitation", required: false }] }], invitationIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "invitationIcon", required: false }] }], invitationDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "invitationDescription", required: false }] }], removeShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeShown", required: false }] }], listActionsShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "listActionsShown", required: false }] }], extraChanged: [{ type: i0.Input, args: [{ isSignal: true, alias: "extraChanged", required: false }] }], listReset: [{ type: i0.Output, args: ["listReset"] }], listCleared: [{ type: i0.Output, args: ["listCleared"] }] } });
|
|
521
|
+
], host: { class: BEM_BLOCK$2 }, template: "<ng-container rtBlock=\"rt-dynamic-input\">\n <rt-dynamic-selector-list\n [rows]=\"rows()\"\n [draggable]=\"draggable()\"\n [buttonRadius]=\"buttonRadius()\"\n [clearIcon]=\"clearIcon()\"\n [titleWrap]=\"titleWrap()\"\n [editable]=\"editable()\"\n [disabled]=\"isDisabled()\"\n [actionsShown]=\"!isInvitationShown()\"\n [resetClearShown]=\"listActionsShown()\"\n [removeShown]=\"removeShown()\"\n [resetDisabled]=\"isResetDisabled()\"\n [clearDisabled]=\"isClearDisabled()\"\n [controlsTpl]=\"controlsTpl()\"\n (removed)=\"onRemoved($event)\"\n (moved)=\"onMoved($event)\"\n (edited)=\"onEdited($event)\"\n (resetClicked)=\"onReset()\"\n (cleared)=\"onCleared()\">\n @if (isAddShown()) {\n <button\n rtButton\n appearance=\"text\"\n type=\"button\"\n qa-dataid=\"dynamic-input-add\"\n [label]=\"addTitle()\"\n [attr.aria-label]=\"addTitle()\"\n [disabled]=\"isDisabled()\"\n (click)=\"onAdd()\"></button>\n }\n </rt-dynamic-selector-list>\n\n @if (isFieldShown()) {\n <!-- \u041F\u043E\u0434\u043F\u0438\u0441\u044C \u043F\u043E\u043B\u044F \u0440\u0438\u0441\u0443\u0435\u0442 rt-field: \u0443 rt-input \u0441\u0432\u043E\u0435\u0439 \u043D\u0435\u0442. \u041E\u0431\u0451\u0440\u0442\u043A\u0430 \u0441\u0442\u043E\u0438\u0442 \u0442\u043E\u043B\u044C\u043A\u043E \u043F\u0440\u0438 \u043F\u043E\u0434\u043F\u0438\u0441\u0438 \u2014\n \u043F\u0443\u0441\u0442\u0430\u044F \u0434\u043E\u0431\u0430\u0432\u0438\u043B\u0430 \u0431\u044B \u0437\u0430\u0437\u043E\u0440 \u043F\u043E\u0434 \u043F\u043E\u043B\u0435\u043C \u0438 \u0441\u0434\u0432\u0438\u043D\u0443\u043B\u0430 \u043F\u0440\u0435\u0436\u043D\u0438\u0439 \u0432\u0438\u0434. -->\n @if (fieldLabel(); as label) {\n <rt-field qa-dataid=\"dynamic-input-field-label\" [label]=\"label\">\n <rt-input\n #field\n rtElem=\"field\"\n qa-dataid=\"dynamic-input-field\"\n [appearance]=\"fieldAppearance()\"\n [controlId]=\"effectiveControlId()\"\n [placeholder]=\"fieldPlaceholder()\"\n [ngModel]=\"draft()\"\n (ngModelChange)=\"draft.set($event ?? '')\"\n (keydown.enter)=\"onCommit()\"\n (focusout)=\"onCommit()\" />\n </rt-field>\n } @else {\n <rt-input\n #field\n rtElem=\"field\"\n qa-dataid=\"dynamic-input-field\"\n [appearance]=\"fieldAppearance()\"\n [controlId]=\"effectiveControlId()\"\n [placeholder]=\"fieldPlaceholder()\"\n [ngModel]=\"draft()\"\n (ngModelChange)=\"draft.set($event ?? '')\"\n (keydown.enter)=\"onCommit()\"\n (focusout)=\"onCommit()\" />\n }\n }\n\n @if (isInvitationShown()) {\n <rt-empty-state\n rtElem=\"invitation\"\n qa-dataid=\"dynamic-input-invitation\"\n [icon]=\"invitationIcon()\"\n [glyph]=\"invitationGlyph()\"\n [description]=\"invitationDescription()\">\n <button\n rtButton\n type=\"button\"\n qa-dataid=\"dynamic-input-invitation-add\"\n [appearance]=\"invitationButtonAppearance()\"\n [icon]=\"invitationButtonIcon()\"\n [label]=\"addTitle()\"\n [attr.aria-label]=\"addTitle()\"\n [disabled]=\"isDisabled()\"\n (click)=\"onAdd()\"></button>\n </rt-empty-state>\n }\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-dynamic-input{display:flex;width:100%;flex-direction:column;gap:var(--rt-space-sm)}.rt-dynamic-input__field,.rt-dynamic-input__invitation{display:block}}\n"] }]
|
|
522
|
+
}], propDecorators: { field: [{ type: i0.ViewChild, args: ['field', { ...{ read: ElementRef }, isSignal: true }] }], rowControls: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtDynamicSelectorRowControlsDirective), { isSignal: true }] }], buttonTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonTitle", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], readonlyKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonlyKeys", required: false }] }], draggable: [{ type: i0.Input, args: [{ isSignal: true, alias: "draggable", required: false }] }], buttonRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonRadius", required: false }] }], editable: [{ type: i0.Input, args: [{ isSignal: true, alias: "editable", required: false }] }], invitation: [{ type: i0.Input, args: [{ isSignal: true, alias: "invitation", required: false }] }], invitationIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "invitationIcon", required: false }] }], invitationGlyph: [{ type: i0.Input, args: [{ isSignal: true, alias: "invitationGlyph", required: false }] }], invitationDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "invitationDescription", required: false }] }], invitationButtonIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "invitationButtonIcon", required: false }] }], invitationButtonAppearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "invitationButtonAppearance", required: false }] }], clearIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearIcon", required: false }] }], titleWrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleWrap", required: false }] }], fieldAppearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldAppearance", required: false }] }], fieldLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldLabel", required: false }] }], removeShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeShown", required: false }] }], listActionsShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "listActionsShown", required: false }] }], extraChanged: [{ type: i0.Input, args: [{ isSignal: true, alias: "extraChanged", required: false }] }], listReset: [{ type: i0.Output, args: ["listReset"] }], listCleared: [{ type: i0.Output, args: ["listCleared"] }] } });
|
|
486
523
|
|
|
487
524
|
const BEM_BLOCK$1 = 'rt-dynamic-selector-popup';
|
|
488
525
|
/** Сколько ждёт поиск на сервере после последней нажатой клавиши. */
|
|
@@ -501,6 +538,9 @@ class RtDynamicSelectorPopupComponent {
|
|
|
501
538
|
this.multiLabel = rtKitLabel('dynamicSelectorMulti');
|
|
502
539
|
this.multiHintLabel = rtKitLabel('dynamicSelectorMultiHint');
|
|
503
540
|
this.noResultsLabel = rtKitLabel('dynamicSelectorNoResults');
|
|
541
|
+
/** Подпись пустого результата: своя у приложения, иначе словарь кита. */
|
|
542
|
+
this.emptyText = computed(() => this.emptyResultsText() || this.noResultsLabel(), /* @ts-ignore */
|
|
543
|
+
...(ngDevMode ? [{ debugName: "emptyText" }] : /* istanbul ignore next */ []));
|
|
504
544
|
this.cancelLabel = rtKitLabel('uiCancel');
|
|
505
545
|
this.applyLabel = rtKitLabel('dynamicSelectorApply');
|
|
506
546
|
/** Отмеченные ключи — ещё не применённые. */
|
|
@@ -585,6 +625,12 @@ class RtDynamicSelectorPopupComponent {
|
|
|
585
625
|
/** Запрос, с которым выбор открывается; событием поиска он не уходит — вызывающий его знает. */
|
|
586
626
|
this.searchTerm = input('', /* @ts-ignore */
|
|
587
627
|
...(ngDevMode ? [{ debugName: "searchTerm" }] : /* istanbul ignore next */ []));
|
|
628
|
+
/** Вид поля поиска — тот же вход, что у поля кита. */
|
|
629
|
+
this.searchAppearance = input('outline', /* @ts-ignore */
|
|
630
|
+
...(ngDevMode ? [{ debugName: "searchAppearance" }] : /* istanbul ignore next */ []));
|
|
631
|
+
/** Подпись пустого результата поиска; пустая строка оставляет подпись кита. */
|
|
632
|
+
this.emptyResultsText = input('', /* @ts-ignore */
|
|
633
|
+
...(ngDevMode ? [{ debugName: "emptyResultsText" }] : /* istanbul ignore next */ []));
|
|
588
634
|
/** Применённые ключи в порядке отметок. */
|
|
589
635
|
this.applied = output();
|
|
590
636
|
this.cancelled = output();
|
|
@@ -650,11 +696,11 @@ class RtDynamicSelectorPopupComponent {
|
|
|
650
696
|
return item[this.displayExp()];
|
|
651
697
|
}
|
|
652
698
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtDynamicSelectorPopupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
653
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtDynamicSelectorPopupComponent, isStandalone: true, selector: "rt-dynamic-selector-popup", inputs: { entities: { classPropertyName: "entities", publicName: "entities", isSignal: true, isRequired: false, transformFunction: null }, keyExp: { classPropertyName: "keyExp", publicName: "keyExp", isSignal: true, isRequired: true, transformFunction: null }, displayExp: { classPropertyName: "displayExp", publicName: "displayExp", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, multiToggleShown: { classPropertyName: "multiToggleShown", publicName: "multiToggleShown", isSignal: true, isRequired: false, transformFunction: null }, selectAllShown: { classPropertyName: "selectAllShown", publicName: "selectAllShown", isSignal: true, isRequired: false, transformFunction: null }, localSearch: { classPropertyName: "localSearch", publicName: "localSearch", isSignal: true, isRequired: false, transformFunction: null }, lazyLoad: { classPropertyName: "lazyLoad", publicName: "lazyLoad", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, fetching: { classPropertyName: "fetching", publicName: "fetching", isSignal: true, isRequired: false, transformFunction: null }, pinnedKeys: { classPropertyName: "pinnedKeys", publicName: "pinnedKeys", isSignal: true, isRequired: false, transformFunction: null }, navigateTitle: { classPropertyName: "navigateTitle", publicName: "navigateTitle", isSignal: true, isRequired: false, transformFunction: null }, navigateLink: { classPropertyName: "navigateLink", publicName: "navigateLink", isSignal: true, isRequired: false, transformFunction: null }, searchTerm: { classPropertyName: "searchTerm", publicName: "searchTerm", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { applied: "applied", cancelled: "cancelled", searchChange: "searchChange", loadMore: "loadMore", temporaryChoiceChange: "temporaryChoiceChange" }, host: { classAttribute: "rt-dynamic-selector-popup" }, ngImport: i0, template: "<ng-container rtBlock=\"rt-dynamic-selector-popup\">\n <div rtElem=\"head\">\n <rt-input\n rtElem=\"search\"\n qa-dataid=\"dynamic-selector-search\"\n iconLeft=\"search\"\n [placeholder]=\"searchLabel()\"\n [ngModel]=\"query()\"\n (ngModelChange)=\"onQueryChange($event)\" />\n\n @if (isMultiToggleVisible() || isSelectAllShown()) {\n <div rtElem=\"controls\">\n @if (isMultiToggleVisible()) {\n <div rtElem=\"multi\">\n <rt-toggle-switch\n qa-dataid=\"dynamic-selector-multi\"\n [ariaLabel]=\"multiLabel()\"\n [ngModel]=\"isMultiOn()\"\n [ngModelOptions]=\"{ standalone: true }\"\n (ngModelChange)=\"onMultiToggle($event)\" />\n <span rtElem=\"multi-label\">{{ multiLabel() }}</span>\n <rt-icon rtElem=\"multi-hint-icon\" name=\"info-circle\" size=\"sm\" [rtTooltip]=\"multiHintLabel()\" />\n <span rtElem=\"multi-hint\">{{ multiHintLabel() }}</span>\n </div>\n }\n\n @if (isSelectAllShown()) {\n <rt-checkbox\n rtElem=\"select-all\"\n qa-dataid=\"dynamic-selector-select-all\"\n [indeterminate]=\"selectAllState() === 'some'\"\n [ngModel]=\"selectAllState() === 'all'\"\n [ngModelOptions]=\"{ standalone: true }\"\n (ngModelChange)=\"onSelectAll($event)\">\n {{ selectAllLabel() }}\n </rt-checkbox>\n }\n </div>\n }\n </div>\n\n @if (loading()) {\n <div rtElem=\"state\" qa-dataid=\"dynamic-selector-loading\">\n <rt-spinner [diameter]=\"24\" />\n </div>\n } @else if (hasRows()) {\n <div rtElem=\"list\" qa-dataid=\"dynamic-selector-options\">\n @for (row of rowItems(); track row.key) {\n <div rtElem=\"row\" [rtMod]=\"{ separated: row.separated }\">\n @if (isSingle()) {\n <rt-radio-button\n rtElem=\"option\"\n qa-dataid=\"dynamic-selector-option\"\n [value]=\"row.key\"\n [checked]=\"row.ticked\"\n [label]=\"row.label\"\n (checkedChange)=\"onRadioChange(row.entity)\" />\n } @else {\n <rt-checkbox\n rtElem=\"option\"\n qa-dataid=\"dynamic-selector-option\"\n [ngModel]=\"row.ticked\"\n [ngModelOptions]=\"{ standalone: true }\"\n (click)=\"onRowClick($event, row.entity)\">\n {{ row.label }}\n </rt-checkbox>\n }\n </div>\n }\n\n <div rtElem=\"sentinel\" rtInfiniteScroll [disabled]=\"!lazyLoad() || fetching()\" (loadMore)=\"loadMore.emit()\"></div>\n\n @if (fetching()) {\n <div rtElem=\"fetching\" qa-dataid=\"dynamic-selector-fetching\">\n <rt-spinner [diameter]=\"20\" />\n </div>\n }\n </div>\n } @else {\n <rt-empty-state rtElem=\"empty\" qa-dataid=\"dynamic-selector-no-results\" icon=\"search\" [title]=\"noResultsLabel()\" />\n }\n\n <div rtElem=\"foot\" [rtMod]=\"{ nav: isNavShown() }\">\n @if (isNavShown()) {\n <a rtElem=\"nav\" qa-dataid=\"dynamic-selector-nav\" [routerLink]=\"navigateLink()\" [rtTooltip]=\"navigateTitle()\">\n {{ navigateTitle() }}\n </a>\n }\n\n <div rtElem=\"actions\">\n <button\n rtButton\n appearance=\"text\"\n type=\"button\"\n qa-dataid=\"dynamic-selector-cancel\"\n [label]=\"cancelLabel()\"\n [attr.aria-label]=\"cancelLabel()\"\n (click)=\"onCancel()\"></button>\n <button\n rtButton\n type=\"button\"\n qa-dataid=\"dynamic-selector-apply\"\n [label]=\"applyLabel()\"\n [attr.aria-label]=\"applyLabel()\"\n [disabled]=\"isApplyDisabled()\"\n (click)=\"onApply()\"></button>\n </div>\n </div>\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-dynamic-selector-popup{--rt-dynamic-selector-popup-width: calc(var(--rt-size-40) * 2);--rt-dynamic-selector-popup-max-height: calc(var(--rt-size-100) + var(--rt-size-20));--rt-dynamic-selector-popup-radius: var(--rt-radius-md);--rt-dynamic-selector-popup-border-width: var(--rt-border-width-thin);--rt-dynamic-selector-popup-shadow: var(--rt-shadow-lg);display:flex;width:var(--rt-dynamic-selector-popup-width);max-width:calc(100vw - var(--rt-space-md) * 2);max-height:var(--rt-dynamic-selector-popup-max-height);box-sizing:border-box;flex-direction:column;border:var(--rt-dynamic-selector-popup-border-width) solid var(--rt-color-border-subtle);border-radius:var(--rt-dynamic-selector-popup-radius);background:var(--rt-color-bg-surface);box-shadow:var(--rt-dynamic-selector-popup-shadow);color:var(--rt-color-text-primary);gap:var(--rt-space-sm);padding-block:var(--rt-space-md)}.rt-dynamic-selector-popup__head{display:flex;flex-direction:column;gap:var(--rt-space-sm);padding-inline:var(--rt-space-md)}.rt-dynamic-selector-popup__search{display:block}.rt-dynamic-selector-popup__controls{display:flex;flex-direction:column;border-bottom:var(--rt-dynamic-selector-popup-border-width) solid var(--rt-color-border-subtle);gap:var(--rt-space-sm);padding-block-end:var(--rt-space-sm)}.rt-dynamic-selector-popup__multi{display:flex;flex-wrap:wrap;align-items:center;gap:var(--rt-space-2xs) var(--rt-space-sm)}.rt-dynamic-selector-popup__multi-label{font-size:var(--rt-text-sm)}.rt-dynamic-selector-popup__multi-hint-icon{color:var(--rt-color-text-muted)}.rt-dynamic-selector-popup__multi-hint{display:none;flex-basis:100%;color:var(--rt-color-text-muted);font-size:var(--rt-text-xs)}@media(width<=1080px){.rt-dynamic-selector-popup__multi-hint{display:block}.rt-dynamic-selector-popup__multi-hint-icon{display:none}}.rt-dynamic-selector-popup__select-all{display:block}.rt-dynamic-selector-popup__state{display:flex;align-items:center;justify-content:center;padding:var(--rt-space-md)}.rt-dynamic-selector-popup__list{display:flex;min-height:0;flex:1 1 auto;flex-direction:column;overflow-y:auto;padding-inline:var(--rt-space-md)}.rt-dynamic-selector-popup__row{display:block;padding-block:var(--rt-space-sm)}.rt-dynamic-selector-popup__row--separated{border-bottom:var(--rt-dynamic-selector-popup-border-width) solid var(--rt-color-border-subtle);margin-block-end:var(--rt-space-2xs);padding-block-end:var(--rt-space-sm)}.rt-dynamic-selector-popup__option{display:block;overflow-wrap:anywhere}.rt-dynamic-selector-popup__sentinel{min-height:var(--rt-size-1)}.rt-dynamic-selector-popup__fetching{display:flex;justify-content:center;padding-block:var(--rt-space-sm)}.rt-dynamic-selector-popup__empty{display:block;padding-inline:var(--rt-space-md)}.rt-dynamic-selector-popup__foot{display:flex;align-items:center;justify-content:flex-end;border-top:var(--rt-dynamic-selector-popup-border-width) solid var(--rt-color-border-subtle);gap:var(--rt-space-sm);padding-block-start:var(--rt-space-sm);padding-inline:var(--rt-space-md)}.rt-dynamic-selector-popup__foot--nav{justify-content:space-between}.rt-dynamic-selector-popup__nav{overflow:hidden;min-width:0;color:var(--rt-color-text-link);font-size:var(--rt-text-sm);text-overflow:ellipsis;white-space:nowrap}.rt-dynamic-selector-popup__nav:hover{color:var(--rt-color-text-link-hover)}.rt-dynamic-selector-popup__actions{display:flex;flex:0 0 auto;gap:var(--rt-space-sm)}}\n"], dependencies: [{ kind: "ngmodule", type:
|
|
699
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtDynamicSelectorPopupComponent, isStandalone: true, selector: "rt-dynamic-selector-popup", inputs: { entities: { classPropertyName: "entities", publicName: "entities", isSignal: true, isRequired: false, transformFunction: null }, keyExp: { classPropertyName: "keyExp", publicName: "keyExp", isSignal: true, isRequired: true, transformFunction: null }, displayExp: { classPropertyName: "displayExp", publicName: "displayExp", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, multiToggleShown: { classPropertyName: "multiToggleShown", publicName: "multiToggleShown", isSignal: true, isRequired: false, transformFunction: null }, selectAllShown: { classPropertyName: "selectAllShown", publicName: "selectAllShown", isSignal: true, isRequired: false, transformFunction: null }, localSearch: { classPropertyName: "localSearch", publicName: "localSearch", isSignal: true, isRequired: false, transformFunction: null }, lazyLoad: { classPropertyName: "lazyLoad", publicName: "lazyLoad", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, fetching: { classPropertyName: "fetching", publicName: "fetching", isSignal: true, isRequired: false, transformFunction: null }, pinnedKeys: { classPropertyName: "pinnedKeys", publicName: "pinnedKeys", isSignal: true, isRequired: false, transformFunction: null }, navigateTitle: { classPropertyName: "navigateTitle", publicName: "navigateTitle", isSignal: true, isRequired: false, transformFunction: null }, navigateLink: { classPropertyName: "navigateLink", publicName: "navigateLink", isSignal: true, isRequired: false, transformFunction: null }, searchTerm: { classPropertyName: "searchTerm", publicName: "searchTerm", isSignal: true, isRequired: false, transformFunction: null }, searchAppearance: { classPropertyName: "searchAppearance", publicName: "searchAppearance", isSignal: true, isRequired: false, transformFunction: null }, emptyResultsText: { classPropertyName: "emptyResultsText", publicName: "emptyResultsText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { applied: "applied", cancelled: "cancelled", searchChange: "searchChange", loadMore: "loadMore", temporaryChoiceChange: "temporaryChoiceChange" }, host: { classAttribute: "rt-dynamic-selector-popup" }, ngImport: i0, template: "<ng-container rtBlock=\"rt-dynamic-selector-popup\">\n <div rtElem=\"head\">\n <rt-input\n rtElem=\"search\"\n qa-dataid=\"dynamic-selector-search\"\n iconLeft=\"search\"\n [appearance]=\"searchAppearance()\"\n [placeholder]=\"searchLabel()\"\n [ngModel]=\"query()\"\n (ngModelChange)=\"onQueryChange($event)\" />\n\n @if (isMultiToggleVisible() || isSelectAllShown()) {\n <div rtElem=\"controls\">\n @if (isMultiToggleVisible()) {\n <div rtElem=\"multi\">\n <rt-toggle-switch\n qa-dataid=\"dynamic-selector-multi\"\n [ariaLabel]=\"multiLabel()\"\n [ngModel]=\"isMultiOn()\"\n [ngModelOptions]=\"{ standalone: true }\"\n (ngModelChange)=\"onMultiToggle($event)\" />\n <span rtElem=\"multi-label\">{{ multiLabel() }}</span>\n <rt-icon rtElem=\"multi-hint-icon\" name=\"info-circle\" size=\"sm\" [rtTooltip]=\"multiHintLabel()\" />\n <span rtElem=\"multi-hint\">{{ multiHintLabel() }}</span>\n </div>\n }\n\n @if (isSelectAllShown()) {\n <rt-checkbox\n rtElem=\"select-all\"\n qa-dataid=\"dynamic-selector-select-all\"\n [indeterminate]=\"selectAllState() === 'some'\"\n [ngModel]=\"selectAllState() === 'all'\"\n [ngModelOptions]=\"{ standalone: true }\"\n (ngModelChange)=\"onSelectAll($event)\">\n {{ selectAllLabel() }}\n </rt-checkbox>\n }\n </div>\n }\n </div>\n\n @if (loading()) {\n <div rtElem=\"state\" qa-dataid=\"dynamic-selector-loading\">\n <rt-spinner [diameter]=\"24\" />\n </div>\n } @else if (hasRows()) {\n <div rtElem=\"list\" qa-dataid=\"dynamic-selector-options\">\n @for (row of rowItems(); track row.key) {\n <div rtElem=\"row\" [rtMod]=\"{ separated: row.separated }\">\n @if (isSingle()) {\n <rt-radio-button\n rtElem=\"option\"\n qa-dataid=\"dynamic-selector-option\"\n [value]=\"row.key\"\n [checked]=\"row.ticked\"\n [label]=\"row.label\"\n (checkedChange)=\"onRadioChange(row.entity)\" />\n } @else {\n <rt-checkbox\n rtElem=\"option\"\n qa-dataid=\"dynamic-selector-option\"\n [ngModel]=\"row.ticked\"\n [ngModelOptions]=\"{ standalone: true }\"\n (click)=\"onRowClick($event, row.entity)\">\n {{ row.label }}\n </rt-checkbox>\n }\n </div>\n }\n\n <div rtElem=\"sentinel\" rtInfiniteScroll [disabled]=\"!lazyLoad() || fetching()\" (loadMore)=\"loadMore.emit()\"></div>\n\n @if (fetching()) {\n <div rtElem=\"fetching\" qa-dataid=\"dynamic-selector-fetching\">\n <rt-spinner [diameter]=\"20\" />\n </div>\n }\n </div>\n } @else {\n <rt-empty-state rtElem=\"empty\" qa-dataid=\"dynamic-selector-no-results\" icon=\"search\" [title]=\"emptyText()\" />\n }\n\n <div rtElem=\"foot\" [rtMod]=\"{ nav: isNavShown() }\">\n @if (isNavShown()) {\n <a rtElem=\"nav\" qa-dataid=\"dynamic-selector-nav\" [routerLink]=\"navigateLink()\" [rtTooltip]=\"navigateTitle()\">\n {{ navigateTitle() }}\n </a>\n }\n\n <div rtElem=\"actions\">\n <button\n rtButton\n appearance=\"text\"\n type=\"button\"\n qa-dataid=\"dynamic-selector-cancel\"\n [label]=\"cancelLabel()\"\n [attr.aria-label]=\"cancelLabel()\"\n (click)=\"onCancel()\"></button>\n <button\n rtButton\n type=\"button\"\n qa-dataid=\"dynamic-selector-apply\"\n [label]=\"applyLabel()\"\n [attr.aria-label]=\"applyLabel()\"\n [disabled]=\"isApplyDisabled()\"\n (click)=\"onApply()\"></button>\n </div>\n </div>\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-dynamic-selector-popup{--rt-dynamic-selector-popup-width-default: calc(var(--rt-size-40) * 2);--rt-dynamic-selector-popup-max-height-default: calc(var(--rt-size-100) + var(--rt-size-20));--rt-dynamic-selector-popup-radius-default: var(--rt-radius-md);--rt-dynamic-selector-popup-border-width-default: var(--rt-border-width-thin);--rt-dynamic-selector-popup-shadow-default: var(--rt-shadow-lg);--rt-dynamic-selector-popup-bg-default: var(--rt-color-bg-surface);--rt-dynamic-selector-popup-min-height-default: 0;--rt-dynamic-selector-popup-padding-default: var(--rt-space-md);--rt-dynamic-selector-popup-foot-border-width-default: var( --rt-dynamic-selector-popup-border-width, var(--rt-dynamic-selector-popup-border-width-default) );--rt-dynamic-selector-popup-nav-color-default: var(--rt-color-text-link);--rt-dynamic-selector-popup-button-height-default: var(--rt-control-height-md);--rt-dynamic-selector-popup-button-font-size-default: .95rem;--rt-dynamic-selector-popup-empty-icon-size-default: var(--rt-size-8);--rt-dynamic-selector-popup-empty-icon-wrap-bg-default: var(--rt-color-bg-subtle);--rt-dynamic-selector-popup-empty-text-size-default: var(--rt-text-md);--rt-dynamic-selector-popup-empty-text-weight-default: var(--rt-font-weight-medium);--rt-dynamic-selector-popup-empty-text-color-default: var(--rt-color-text-primary);display:flex;width:var(--rt-dynamic-selector-popup-width, var(--rt-dynamic-selector-popup-width-default));max-width:calc(100vw - var(--rt-space-md) * 2);min-height:var(--rt-dynamic-selector-popup-min-height, var(--rt-dynamic-selector-popup-min-height-default));max-height:var(--rt-dynamic-selector-popup-max-height, var(--rt-dynamic-selector-popup-max-height-default));box-sizing:border-box;flex-direction:column;border:var(--rt-dynamic-selector-popup-border-width, var(--rt-dynamic-selector-popup-border-width-default)) solid var(--rt-color-border-subtle);border-radius:var(--rt-dynamic-selector-popup-radius, var(--rt-dynamic-selector-popup-radius-default));background:var(--rt-dynamic-selector-popup-bg, var(--rt-dynamic-selector-popup-bg-default));box-shadow:var(--rt-dynamic-selector-popup-shadow, var(--rt-dynamic-selector-popup-shadow-default));color:var(--rt-color-text-primary);gap:var(--rt-space-sm);padding-block:var(--rt-dynamic-selector-popup-padding, var(--rt-dynamic-selector-popup-padding-default))}.rt-dynamic-selector-popup__head{display:flex;flex-direction:column;gap:var(--rt-space-sm);padding-inline:var(--rt-dynamic-selector-popup-padding, var(--rt-dynamic-selector-popup-padding-default))}.rt-dynamic-selector-popup__controls{display:flex;flex-direction:column;border-bottom:var(--rt-dynamic-selector-popup-border-width, var(--rt-dynamic-selector-popup-border-width-default)) solid var(--rt-color-border-subtle);gap:var(--rt-space-sm);padding-block-end:var(--rt-space-sm)}.rt-dynamic-selector-popup__multi{display:flex;flex-wrap:wrap;align-items:center;gap:var(--rt-space-2xs) var(--rt-space-sm)}.rt-dynamic-selector-popup__multi-label{font-size:var(--rt-text-sm)}.rt-dynamic-selector-popup__multi-hint-icon{color:var(--rt-color-text-muted)}.rt-dynamic-selector-popup__multi-hint{display:none;flex-basis:100%;color:var(--rt-color-text-muted);font-size:var(--rt-text-xs)}@media(width<=1080px){.rt-dynamic-selector-popup__multi-hint{display:block}.rt-dynamic-selector-popup__multi-hint-icon{display:none}}.rt-dynamic-selector-popup__select-all{display:block}.rt-dynamic-selector-popup__state{display:flex;flex:1 1 auto;align-items:center;justify-content:center;padding:var(--rt-space-md)}.rt-dynamic-selector-popup__list{display:flex;min-height:0;flex:1 1 auto;flex-direction:column;overflow-y:auto;padding-inline:var(--rt-dynamic-selector-popup-padding, var(--rt-dynamic-selector-popup-padding-default))}.rt-dynamic-selector-popup__row{display:block;padding-block:var(--rt-space-sm)}.rt-dynamic-selector-popup__row--separated{border-bottom:var(--rt-dynamic-selector-popup-border-width, var(--rt-dynamic-selector-popup-border-width-default)) solid var(--rt-color-border-subtle);margin-block-end:var(--rt-space-2xs);padding-block-end:var(--rt-space-sm)}.rt-dynamic-selector-popup__option{display:block;overflow-wrap:anywhere}.rt-dynamic-selector-popup__sentinel{min-height:var(--rt-size-1)}.rt-dynamic-selector-popup__fetching{display:flex;justify-content:center;padding-block:var(--rt-space-sm)}.rt-dynamic-selector-popup__empty{flex:1 1 auto;padding-inline:var(--rt-dynamic-selector-popup-padding, var(--rt-dynamic-selector-popup-padding-default))}.rt-dynamic-selector-popup__empty.rt-empty-state{--rt-empty-state-icon-size: var( --rt-dynamic-selector-popup-empty-icon-size, var(--rt-dynamic-selector-popup-empty-icon-size-default) );--rt-empty-state-icon-wrap-bg: var( --rt-dynamic-selector-popup-empty-icon-wrap-bg, var(--rt-dynamic-selector-popup-empty-icon-wrap-bg-default) );--rt-empty-state-title-size: var( --rt-dynamic-selector-popup-empty-text-size, var(--rt-dynamic-selector-popup-empty-text-size-default) );--rt-empty-state-title-weight: var( --rt-dynamic-selector-popup-empty-text-weight, var(--rt-dynamic-selector-popup-empty-text-weight-default) );--rt-empty-state-title-color: var( --rt-dynamic-selector-popup-empty-text-color, var(--rt-dynamic-selector-popup-empty-text-color-default) )}.rt-dynamic-selector-popup__foot{display:flex;align-items:center;justify-content:flex-end;border-top:var(--rt-dynamic-selector-popup-foot-border-width, var(--rt-dynamic-selector-popup-foot-border-width-default)) solid var(--rt-color-border-subtle);gap:var(--rt-space-sm);padding-block-start:var(--rt-space-sm);padding-inline:var(--rt-dynamic-selector-popup-padding, var(--rt-dynamic-selector-popup-padding-default))}.rt-dynamic-selector-popup__foot--nav{justify-content:space-between}.rt-dynamic-selector-popup__nav{overflow:hidden;min-width:0;color:var(--rt-dynamic-selector-popup-nav-color, var(--rt-dynamic-selector-popup-nav-color-default));font-size:var(--rt-text-sm);text-overflow:ellipsis;white-space:nowrap}.rt-dynamic-selector-popup__nav:hover{color:var(--rt-color-text-link-hover)}.rt-dynamic-selector-popup__actions{display:flex;flex:0 0 auto;gap:var(--rt-space-sm)}.rt-dynamic-selector-popup__actions .rt-button{--rt-btn-height: var(--rt-dynamic-selector-popup-button-height, var(--rt-dynamic-selector-popup-button-height-default));--rt-btn-font-size: var( --rt-dynamic-selector-popup-button-font-size, var(--rt-dynamic-selector-popup-button-font-size-default) )}}\n"], dependencies: [{ kind: "ngmodule", type:
|
|
654
700
|
// Angular
|
|
655
701
|
FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type:
|
|
656
702
|
// standalone components / directives
|
|
657
|
-
BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }, { kind: "directive", type: RtButtonDirective, selector: "button[rtButton], a[rtButton]", inputs: ["label", "icon", "iconPos", "theme", "appearance", "size", "loading", "loadingIcon", "loadingLabel", "pressed"] }, { kind: "component", type: RtCheckboxComponent, selector: "rt-checkbox", inputs: ["inputId", "ariaLabel", "disabled", "indeterminate"] }, { kind: "component", type: RtEmptyStateComponent, selector: "rt-empty-state", inputs: ["icon", "glyph", "title", "description", "framed"] }, { kind: "component", type: RtIconComponent, selector: "rt-icon", inputs: ["name", "glyph", "size", "color", "fill", "spin", "rotate"] }, { kind: "directive", type: RtInfiniteScrollDirective, selector: "[rtInfiniteScroll]", inputs: ["disabled", "rootMargin"], outputs: ["loadMore"] }, { kind: "component", type: RtInputComponent, selector: "rt-input", inputs: ["appearance", "type", "placeholder", "iconLeft", "iconRight", "passwordToggle", "autocomplete"] }, { kind: "component", type: RtRadioButtonComponent, selector: "rt-radio-button", inputs: ["value", "checked", "disabled", "card", "label", "description", "ariaLabel"], outputs: ["clickAction", "checkedChange"] }, { kind: "component", type: RtSpinnerComponent, selector: "rt-spinner", inputs: ["diameter", "color", "appearance", "overlay", "backdrop", "plate"] }, { kind: "component", type: RtToggleSwitchComponent, selector: "rt-toggle-switch", inputs: ["inputId", "ariaLabel", "label", "size", "iconOff", "iconOn", "disabled"] }, { kind: "directive", type: RtTooltipDirective, selector: "[rtTooltip]", inputs: ["rtTooltip", "rtTooltipPlacement", "rtTooltipWhenTruncated"], exportAs: ["rtTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
703
|
+
BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }, { kind: "directive", type: RtButtonDirective, selector: "button[rtButton], a[rtButton]", inputs: ["label", "icon", "iconPos", "theme", "appearance", "size", "loading", "loadingIcon", "loadingLabel", "pressed"] }, { kind: "component", type: RtCheckboxComponent, selector: "rt-checkbox", inputs: ["inputId", "ariaLabel", "disabled", "indeterminate"] }, { kind: "component", type: RtEmptyStateComponent, selector: "rt-empty-state", inputs: ["icon", "glyph", "title", "description", "framed"] }, { kind: "component", type: RtIconComponent, selector: "rt-icon", inputs: ["name", "glyph", "glyphStrategy", "size", "color", "fill", "spin", "rotate"] }, { kind: "directive", type: RtInfiniteScrollDirective, selector: "[rtInfiniteScroll]", inputs: ["disabled", "rootMargin"], outputs: ["loadMore"] }, { kind: "component", type: RtInputComponent, selector: "rt-input", inputs: ["appearance", "type", "placeholder", "iconLeft", "iconRight", "passwordToggle", "autocomplete"] }, { kind: "component", type: RtRadioButtonComponent, selector: "rt-radio-button", inputs: ["value", "checked", "disabled", "card", "label", "description", "ariaLabel"], outputs: ["clickAction", "checkedChange"] }, { kind: "component", type: RtSpinnerComponent, selector: "rt-spinner", inputs: ["diameter", "color", "appearance", "overlay", "backdrop", "plate"] }, { kind: "component", type: RtToggleSwitchComponent, selector: "rt-toggle-switch", inputs: ["inputId", "ariaLabel", "label", "size", "iconOff", "iconOn", "disabled"] }, { kind: "directive", type: RtTooltipDirective, selector: "[rtTooltip]", inputs: ["rtTooltip", "rtTooltipPlacement", "rtTooltipWhenTruncated"], exportAs: ["rtTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
658
704
|
}
|
|
659
705
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtDynamicSelectorPopupComponent, decorators: [{
|
|
660
706
|
type: Component,
|
|
@@ -676,8 +722,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
|
|
|
676
722
|
RtSpinnerComponent,
|
|
677
723
|
RtToggleSwitchComponent,
|
|
678
724
|
RtTooltipDirective,
|
|
679
|
-
], host: { class: BEM_BLOCK$1 }, template: "<ng-container rtBlock=\"rt-dynamic-selector-popup\">\n <div rtElem=\"head\">\n <rt-input\n rtElem=\"search\"\n qa-dataid=\"dynamic-selector-search\"\n iconLeft=\"search\"\n [placeholder]=\"searchLabel()\"\n [ngModel]=\"query()\"\n (ngModelChange)=\"onQueryChange($event)\" />\n\n @if (isMultiToggleVisible() || isSelectAllShown()) {\n <div rtElem=\"controls\">\n @if (isMultiToggleVisible()) {\n <div rtElem=\"multi\">\n <rt-toggle-switch\n qa-dataid=\"dynamic-selector-multi\"\n [ariaLabel]=\"multiLabel()\"\n [ngModel]=\"isMultiOn()\"\n [ngModelOptions]=\"{ standalone: true }\"\n (ngModelChange)=\"onMultiToggle($event)\" />\n <span rtElem=\"multi-label\">{{ multiLabel() }}</span>\n <rt-icon rtElem=\"multi-hint-icon\" name=\"info-circle\" size=\"sm\" [rtTooltip]=\"multiHintLabel()\" />\n <span rtElem=\"multi-hint\">{{ multiHintLabel() }}</span>\n </div>\n }\n\n @if (isSelectAllShown()) {\n <rt-checkbox\n rtElem=\"select-all\"\n qa-dataid=\"dynamic-selector-select-all\"\n [indeterminate]=\"selectAllState() === 'some'\"\n [ngModel]=\"selectAllState() === 'all'\"\n [ngModelOptions]=\"{ standalone: true }\"\n (ngModelChange)=\"onSelectAll($event)\">\n {{ selectAllLabel() }}\n </rt-checkbox>\n }\n </div>\n }\n </div>\n\n @if (loading()) {\n <div rtElem=\"state\" qa-dataid=\"dynamic-selector-loading\">\n <rt-spinner [diameter]=\"24\" />\n </div>\n } @else if (hasRows()) {\n <div rtElem=\"list\" qa-dataid=\"dynamic-selector-options\">\n @for (row of rowItems(); track row.key) {\n <div rtElem=\"row\" [rtMod]=\"{ separated: row.separated }\">\n @if (isSingle()) {\n <rt-radio-button\n rtElem=\"option\"\n qa-dataid=\"dynamic-selector-option\"\n [value]=\"row.key\"\n [checked]=\"row.ticked\"\n [label]=\"row.label\"\n (checkedChange)=\"onRadioChange(row.entity)\" />\n } @else {\n <rt-checkbox\n rtElem=\"option\"\n qa-dataid=\"dynamic-selector-option\"\n [ngModel]=\"row.ticked\"\n [ngModelOptions]=\"{ standalone: true }\"\n (click)=\"onRowClick($event, row.entity)\">\n {{ row.label }}\n </rt-checkbox>\n }\n </div>\n }\n\n <div rtElem=\"sentinel\" rtInfiniteScroll [disabled]=\"!lazyLoad() || fetching()\" (loadMore)=\"loadMore.emit()\"></div>\n\n @if (fetching()) {\n <div rtElem=\"fetching\" qa-dataid=\"dynamic-selector-fetching\">\n <rt-spinner [diameter]=\"20\" />\n </div>\n }\n </div>\n } @else {\n <rt-empty-state rtElem=\"empty\" qa-dataid=\"dynamic-selector-no-results\" icon=\"search\" [title]=\"noResultsLabel()\" />\n }\n\n <div rtElem=\"foot\" [rtMod]=\"{ nav: isNavShown() }\">\n @if (isNavShown()) {\n <a rtElem=\"nav\" qa-dataid=\"dynamic-selector-nav\" [routerLink]=\"navigateLink()\" [rtTooltip]=\"navigateTitle()\">\n {{ navigateTitle() }}\n </a>\n }\n\n <div rtElem=\"actions\">\n <button\n rtButton\n appearance=\"text\"\n type=\"button\"\n qa-dataid=\"dynamic-selector-cancel\"\n [label]=\"cancelLabel()\"\n [attr.aria-label]=\"cancelLabel()\"\n (click)=\"onCancel()\"></button>\n <button\n rtButton\n type=\"button\"\n qa-dataid=\"dynamic-selector-apply\"\n [label]=\"applyLabel()\"\n [attr.aria-label]=\"applyLabel()\"\n [disabled]=\"isApplyDisabled()\"\n (click)=\"onApply()\"></button>\n </div>\n </div>\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-dynamic-selector-popup{--rt-dynamic-selector-popup-width: calc(var(--rt-size-40) * 2);--rt-dynamic-selector-popup-max-height: calc(var(--rt-size-100) + var(--rt-size-20));--rt-dynamic-selector-popup-radius: var(--rt-radius-md);--rt-dynamic-selector-popup-border-width: var(--rt-border-width-thin);--rt-dynamic-selector-popup-shadow: var(--rt-shadow-lg);display:flex;width:var(--rt-dynamic-selector-popup-width);max-width:calc(100vw - var(--rt-space-md) * 2);max-height:var(--rt-dynamic-selector-popup-max-height);box-sizing:border-box;flex-direction:column;border:var(--rt-dynamic-selector-popup-border-width) solid var(--rt-color-border-subtle);border-radius:var(--rt-dynamic-selector-popup-radius);background:var(--rt-color-bg-surface);box-shadow:var(--rt-dynamic-selector-popup-shadow);color:var(--rt-color-text-primary);gap:var(--rt-space-sm);padding-block:var(--rt-space-md)}.rt-dynamic-selector-popup__head{display:flex;flex-direction:column;gap:var(--rt-space-sm);padding-inline:var(--rt-space-md)}.rt-dynamic-selector-popup__search{display:block}.rt-dynamic-selector-popup__controls{display:flex;flex-direction:column;border-bottom:var(--rt-dynamic-selector-popup-border-width) solid var(--rt-color-border-subtle);gap:var(--rt-space-sm);padding-block-end:var(--rt-space-sm)}.rt-dynamic-selector-popup__multi{display:flex;flex-wrap:wrap;align-items:center;gap:var(--rt-space-2xs) var(--rt-space-sm)}.rt-dynamic-selector-popup__multi-label{font-size:var(--rt-text-sm)}.rt-dynamic-selector-popup__multi-hint-icon{color:var(--rt-color-text-muted)}.rt-dynamic-selector-popup__multi-hint{display:none;flex-basis:100%;color:var(--rt-color-text-muted);font-size:var(--rt-text-xs)}@media(width<=1080px){.rt-dynamic-selector-popup__multi-hint{display:block}.rt-dynamic-selector-popup__multi-hint-icon{display:none}}.rt-dynamic-selector-popup__select-all{display:block}.rt-dynamic-selector-popup__state{display:flex;align-items:center;justify-content:center;padding:var(--rt-space-md)}.rt-dynamic-selector-popup__list{display:flex;min-height:0;flex:1 1 auto;flex-direction:column;overflow-y:auto;padding-inline:var(--rt-space-md)}.rt-dynamic-selector-popup__row{display:block;padding-block:var(--rt-space-sm)}.rt-dynamic-selector-popup__row--separated{border-bottom:var(--rt-dynamic-selector-popup-border-width) solid var(--rt-color-border-subtle);margin-block-end:var(--rt-space-2xs);padding-block-end:var(--rt-space-sm)}.rt-dynamic-selector-popup__option{display:block;overflow-wrap:anywhere}.rt-dynamic-selector-popup__sentinel{min-height:var(--rt-size-1)}.rt-dynamic-selector-popup__fetching{display:flex;justify-content:center;padding-block:var(--rt-space-sm)}.rt-dynamic-selector-popup__empty{display:block;padding-inline:var(--rt-space-md)}.rt-dynamic-selector-popup__foot{display:flex;align-items:center;justify-content:flex-end;border-top:var(--rt-dynamic-selector-popup-border-width) solid var(--rt-color-border-subtle);gap:var(--rt-space-sm);padding-block-start:var(--rt-space-sm);padding-inline:var(--rt-space-md)}.rt-dynamic-selector-popup__foot--nav{justify-content:space-between}.rt-dynamic-selector-popup__nav{overflow:hidden;min-width:0;color:var(--rt-color-text-link);font-size:var(--rt-text-sm);text-overflow:ellipsis;white-space:nowrap}.rt-dynamic-selector-popup__nav:hover{color:var(--rt-color-text-link-hover)}.rt-dynamic-selector-popup__actions{display:flex;flex:0 0 auto;gap:var(--rt-space-sm)}}\n"] }]
|
|
680
|
-
}], propDecorators: { entities: [{ type: i0.Input, args: [{ isSignal: true, alias: "entities", required: false }] }], keyExp: [{ type: i0.Input, args: [{ isSignal: true, alias: "keyExp", required: true }] }], displayExp: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayExp", required: true }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], multiToggleShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiToggleShown", required: false }] }], selectAllShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAllShown", required: false }] }], localSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "localSearch", required: false }] }], lazyLoad: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazyLoad", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], fetching: [{ type: i0.Input, args: [{ isSignal: true, alias: "fetching", required: false }] }], pinnedKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "pinnedKeys", required: false }] }], navigateTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigateTitle", required: false }] }], navigateLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigateLink", required: false }] }], searchTerm: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchTerm", required: false }] }], applied: [{ type: i0.Output, args: ["applied"] }], cancelled: [{ type: i0.Output, args: ["cancelled"] }], searchChange: [{ type: i0.Output, args: ["searchChange"] }], loadMore: [{ type: i0.Output, args: ["loadMore"] }], temporaryChoiceChange: [{ type: i0.Output, args: ["temporaryChoiceChange"] }] } });
|
|
725
|
+
], host: { class: BEM_BLOCK$1 }, template: "<ng-container rtBlock=\"rt-dynamic-selector-popup\">\n <div rtElem=\"head\">\n <rt-input\n rtElem=\"search\"\n qa-dataid=\"dynamic-selector-search\"\n iconLeft=\"search\"\n [appearance]=\"searchAppearance()\"\n [placeholder]=\"searchLabel()\"\n [ngModel]=\"query()\"\n (ngModelChange)=\"onQueryChange($event)\" />\n\n @if (isMultiToggleVisible() || isSelectAllShown()) {\n <div rtElem=\"controls\">\n @if (isMultiToggleVisible()) {\n <div rtElem=\"multi\">\n <rt-toggle-switch\n qa-dataid=\"dynamic-selector-multi\"\n [ariaLabel]=\"multiLabel()\"\n [ngModel]=\"isMultiOn()\"\n [ngModelOptions]=\"{ standalone: true }\"\n (ngModelChange)=\"onMultiToggle($event)\" />\n <span rtElem=\"multi-label\">{{ multiLabel() }}</span>\n <rt-icon rtElem=\"multi-hint-icon\" name=\"info-circle\" size=\"sm\" [rtTooltip]=\"multiHintLabel()\" />\n <span rtElem=\"multi-hint\">{{ multiHintLabel() }}</span>\n </div>\n }\n\n @if (isSelectAllShown()) {\n <rt-checkbox\n rtElem=\"select-all\"\n qa-dataid=\"dynamic-selector-select-all\"\n [indeterminate]=\"selectAllState() === 'some'\"\n [ngModel]=\"selectAllState() === 'all'\"\n [ngModelOptions]=\"{ standalone: true }\"\n (ngModelChange)=\"onSelectAll($event)\">\n {{ selectAllLabel() }}\n </rt-checkbox>\n }\n </div>\n }\n </div>\n\n @if (loading()) {\n <div rtElem=\"state\" qa-dataid=\"dynamic-selector-loading\">\n <rt-spinner [diameter]=\"24\" />\n </div>\n } @else if (hasRows()) {\n <div rtElem=\"list\" qa-dataid=\"dynamic-selector-options\">\n @for (row of rowItems(); track row.key) {\n <div rtElem=\"row\" [rtMod]=\"{ separated: row.separated }\">\n @if (isSingle()) {\n <rt-radio-button\n rtElem=\"option\"\n qa-dataid=\"dynamic-selector-option\"\n [value]=\"row.key\"\n [checked]=\"row.ticked\"\n [label]=\"row.label\"\n (checkedChange)=\"onRadioChange(row.entity)\" />\n } @else {\n <rt-checkbox\n rtElem=\"option\"\n qa-dataid=\"dynamic-selector-option\"\n [ngModel]=\"row.ticked\"\n [ngModelOptions]=\"{ standalone: true }\"\n (click)=\"onRowClick($event, row.entity)\">\n {{ row.label }}\n </rt-checkbox>\n }\n </div>\n }\n\n <div rtElem=\"sentinel\" rtInfiniteScroll [disabled]=\"!lazyLoad() || fetching()\" (loadMore)=\"loadMore.emit()\"></div>\n\n @if (fetching()) {\n <div rtElem=\"fetching\" qa-dataid=\"dynamic-selector-fetching\">\n <rt-spinner [diameter]=\"20\" />\n </div>\n }\n </div>\n } @else {\n <rt-empty-state rtElem=\"empty\" qa-dataid=\"dynamic-selector-no-results\" icon=\"search\" [title]=\"emptyText()\" />\n }\n\n <div rtElem=\"foot\" [rtMod]=\"{ nav: isNavShown() }\">\n @if (isNavShown()) {\n <a rtElem=\"nav\" qa-dataid=\"dynamic-selector-nav\" [routerLink]=\"navigateLink()\" [rtTooltip]=\"navigateTitle()\">\n {{ navigateTitle() }}\n </a>\n }\n\n <div rtElem=\"actions\">\n <button\n rtButton\n appearance=\"text\"\n type=\"button\"\n qa-dataid=\"dynamic-selector-cancel\"\n [label]=\"cancelLabel()\"\n [attr.aria-label]=\"cancelLabel()\"\n (click)=\"onCancel()\"></button>\n <button\n rtButton\n type=\"button\"\n qa-dataid=\"dynamic-selector-apply\"\n [label]=\"applyLabel()\"\n [attr.aria-label]=\"applyLabel()\"\n [disabled]=\"isApplyDisabled()\"\n (click)=\"onApply()\"></button>\n </div>\n </div>\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-dynamic-selector-popup{--rt-dynamic-selector-popup-width-default: calc(var(--rt-size-40) * 2);--rt-dynamic-selector-popup-max-height-default: calc(var(--rt-size-100) + var(--rt-size-20));--rt-dynamic-selector-popup-radius-default: var(--rt-radius-md);--rt-dynamic-selector-popup-border-width-default: var(--rt-border-width-thin);--rt-dynamic-selector-popup-shadow-default: var(--rt-shadow-lg);--rt-dynamic-selector-popup-bg-default: var(--rt-color-bg-surface);--rt-dynamic-selector-popup-min-height-default: 0;--rt-dynamic-selector-popup-padding-default: var(--rt-space-md);--rt-dynamic-selector-popup-foot-border-width-default: var( --rt-dynamic-selector-popup-border-width, var(--rt-dynamic-selector-popup-border-width-default) );--rt-dynamic-selector-popup-nav-color-default: var(--rt-color-text-link);--rt-dynamic-selector-popup-button-height-default: var(--rt-control-height-md);--rt-dynamic-selector-popup-button-font-size-default: .95rem;--rt-dynamic-selector-popup-empty-icon-size-default: var(--rt-size-8);--rt-dynamic-selector-popup-empty-icon-wrap-bg-default: var(--rt-color-bg-subtle);--rt-dynamic-selector-popup-empty-text-size-default: var(--rt-text-md);--rt-dynamic-selector-popup-empty-text-weight-default: var(--rt-font-weight-medium);--rt-dynamic-selector-popup-empty-text-color-default: var(--rt-color-text-primary);display:flex;width:var(--rt-dynamic-selector-popup-width, var(--rt-dynamic-selector-popup-width-default));max-width:calc(100vw - var(--rt-space-md) * 2);min-height:var(--rt-dynamic-selector-popup-min-height, var(--rt-dynamic-selector-popup-min-height-default));max-height:var(--rt-dynamic-selector-popup-max-height, var(--rt-dynamic-selector-popup-max-height-default));box-sizing:border-box;flex-direction:column;border:var(--rt-dynamic-selector-popup-border-width, var(--rt-dynamic-selector-popup-border-width-default)) solid var(--rt-color-border-subtle);border-radius:var(--rt-dynamic-selector-popup-radius, var(--rt-dynamic-selector-popup-radius-default));background:var(--rt-dynamic-selector-popup-bg, var(--rt-dynamic-selector-popup-bg-default));box-shadow:var(--rt-dynamic-selector-popup-shadow, var(--rt-dynamic-selector-popup-shadow-default));color:var(--rt-color-text-primary);gap:var(--rt-space-sm);padding-block:var(--rt-dynamic-selector-popup-padding, var(--rt-dynamic-selector-popup-padding-default))}.rt-dynamic-selector-popup__head{display:flex;flex-direction:column;gap:var(--rt-space-sm);padding-inline:var(--rt-dynamic-selector-popup-padding, var(--rt-dynamic-selector-popup-padding-default))}.rt-dynamic-selector-popup__controls{display:flex;flex-direction:column;border-bottom:var(--rt-dynamic-selector-popup-border-width, var(--rt-dynamic-selector-popup-border-width-default)) solid var(--rt-color-border-subtle);gap:var(--rt-space-sm);padding-block-end:var(--rt-space-sm)}.rt-dynamic-selector-popup__multi{display:flex;flex-wrap:wrap;align-items:center;gap:var(--rt-space-2xs) var(--rt-space-sm)}.rt-dynamic-selector-popup__multi-label{font-size:var(--rt-text-sm)}.rt-dynamic-selector-popup__multi-hint-icon{color:var(--rt-color-text-muted)}.rt-dynamic-selector-popup__multi-hint{display:none;flex-basis:100%;color:var(--rt-color-text-muted);font-size:var(--rt-text-xs)}@media(width<=1080px){.rt-dynamic-selector-popup__multi-hint{display:block}.rt-dynamic-selector-popup__multi-hint-icon{display:none}}.rt-dynamic-selector-popup__select-all{display:block}.rt-dynamic-selector-popup__state{display:flex;flex:1 1 auto;align-items:center;justify-content:center;padding:var(--rt-space-md)}.rt-dynamic-selector-popup__list{display:flex;min-height:0;flex:1 1 auto;flex-direction:column;overflow-y:auto;padding-inline:var(--rt-dynamic-selector-popup-padding, var(--rt-dynamic-selector-popup-padding-default))}.rt-dynamic-selector-popup__row{display:block;padding-block:var(--rt-space-sm)}.rt-dynamic-selector-popup__row--separated{border-bottom:var(--rt-dynamic-selector-popup-border-width, var(--rt-dynamic-selector-popup-border-width-default)) solid var(--rt-color-border-subtle);margin-block-end:var(--rt-space-2xs);padding-block-end:var(--rt-space-sm)}.rt-dynamic-selector-popup__option{display:block;overflow-wrap:anywhere}.rt-dynamic-selector-popup__sentinel{min-height:var(--rt-size-1)}.rt-dynamic-selector-popup__fetching{display:flex;justify-content:center;padding-block:var(--rt-space-sm)}.rt-dynamic-selector-popup__empty{flex:1 1 auto;padding-inline:var(--rt-dynamic-selector-popup-padding, var(--rt-dynamic-selector-popup-padding-default))}.rt-dynamic-selector-popup__empty.rt-empty-state{--rt-empty-state-icon-size: var( --rt-dynamic-selector-popup-empty-icon-size, var(--rt-dynamic-selector-popup-empty-icon-size-default) );--rt-empty-state-icon-wrap-bg: var( --rt-dynamic-selector-popup-empty-icon-wrap-bg, var(--rt-dynamic-selector-popup-empty-icon-wrap-bg-default) );--rt-empty-state-title-size: var( --rt-dynamic-selector-popup-empty-text-size, var(--rt-dynamic-selector-popup-empty-text-size-default) );--rt-empty-state-title-weight: var( --rt-dynamic-selector-popup-empty-text-weight, var(--rt-dynamic-selector-popup-empty-text-weight-default) );--rt-empty-state-title-color: var( --rt-dynamic-selector-popup-empty-text-color, var(--rt-dynamic-selector-popup-empty-text-color-default) )}.rt-dynamic-selector-popup__foot{display:flex;align-items:center;justify-content:flex-end;border-top:var(--rt-dynamic-selector-popup-foot-border-width, var(--rt-dynamic-selector-popup-foot-border-width-default)) solid var(--rt-color-border-subtle);gap:var(--rt-space-sm);padding-block-start:var(--rt-space-sm);padding-inline:var(--rt-dynamic-selector-popup-padding, var(--rt-dynamic-selector-popup-padding-default))}.rt-dynamic-selector-popup__foot--nav{justify-content:space-between}.rt-dynamic-selector-popup__nav{overflow:hidden;min-width:0;color:var(--rt-dynamic-selector-popup-nav-color, var(--rt-dynamic-selector-popup-nav-color-default));font-size:var(--rt-text-sm);text-overflow:ellipsis;white-space:nowrap}.rt-dynamic-selector-popup__nav:hover{color:var(--rt-color-text-link-hover)}.rt-dynamic-selector-popup__actions{display:flex;flex:0 0 auto;gap:var(--rt-space-sm)}.rt-dynamic-selector-popup__actions .rt-button{--rt-btn-height: var(--rt-dynamic-selector-popup-button-height, var(--rt-dynamic-selector-popup-button-height-default));--rt-btn-font-size: var( --rt-dynamic-selector-popup-button-font-size, var(--rt-dynamic-selector-popup-button-font-size-default) )}}\n"] }]
|
|
726
|
+
}], propDecorators: { entities: [{ type: i0.Input, args: [{ isSignal: true, alias: "entities", required: false }] }], keyExp: [{ type: i0.Input, args: [{ isSignal: true, alias: "keyExp", required: true }] }], displayExp: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayExp", required: true }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], multiToggleShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiToggleShown", required: false }] }], selectAllShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAllShown", required: false }] }], localSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "localSearch", required: false }] }], lazyLoad: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazyLoad", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], fetching: [{ type: i0.Input, args: [{ isSignal: true, alias: "fetching", required: false }] }], pinnedKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "pinnedKeys", required: false }] }], navigateTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigateTitle", required: false }] }], navigateLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigateLink", required: false }] }], searchTerm: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchTerm", required: false }] }], searchAppearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchAppearance", required: false }] }], emptyResultsText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyResultsText", required: false }] }], applied: [{ type: i0.Output, args: ["applied"] }], cancelled: [{ type: i0.Output, args: ["cancelled"] }], searchChange: [{ type: i0.Output, args: ["searchChange"] }], loadMore: [{ type: i0.Output, args: ["loadMore"] }], temporaryChoiceChange: [{ type: i0.Output, args: ["temporaryChoiceChange"] }] } });
|
|
681
727
|
|
|
682
728
|
const BEM_BLOCK = 'rt-dynamic-selector';
|
|
683
729
|
/**
|
|
@@ -691,11 +737,27 @@ const BEM_BLOCK = 'rt-dynamic-selector';
|
|
|
691
737
|
* ```
|
|
692
738
|
*/
|
|
693
739
|
class RtDynamicSelectorComponent extends RtFormControlBase {
|
|
740
|
+
/** Последнее значение, записанное формой: к нему возвращает сброс. */
|
|
741
|
+
#initial;
|
|
742
|
+
/* Умолчания входов считаются из настроек кита при объявлении: вход в разметке перебивает их. */
|
|
743
|
+
#invitationButtonIconDefault;
|
|
744
|
+
#invitationButtonAppearanceDefault;
|
|
745
|
+
#clearIconDefault;
|
|
746
|
+
#titleWrapDefault;
|
|
747
|
+
#searchAppearanceDefault;
|
|
748
|
+
#emptyResultsTextDefault;
|
|
694
749
|
constructor() {
|
|
695
|
-
super(
|
|
750
|
+
super();
|
|
696
751
|
/** Последнее значение, записанное формой: к нему возвращает сброс. */
|
|
697
752
|
this.#initial = signal([], /* @ts-ignore */
|
|
698
753
|
...(ngDevMode ? [{ debugName: "#initial" }] : /* istanbul ignore next */ []));
|
|
754
|
+
/* Умолчания входов считаются из настроек кита при объявлении: вход в разметке перебивает их. */
|
|
755
|
+
this.#invitationButtonIconDefault = rtKitDefault('dynamicSelector', (it) => it.invitationButtonIcon, null);
|
|
756
|
+
this.#invitationButtonAppearanceDefault = rtKitDefault('dynamicSelector', (it) => it.invitationButtonAppearance, 'outlined');
|
|
757
|
+
this.#clearIconDefault = rtKitDefault('dynamicSelector', (it) => it.clearIcon, 'close');
|
|
758
|
+
this.#titleWrapDefault = rtKitDefault('dynamicSelector', (it) => it.titleWrap, true);
|
|
759
|
+
this.#searchAppearanceDefault = rtKitDefault('dynamicSelector', (it) => it.searchAppearance, 'outline');
|
|
760
|
+
this.#emptyResultsTextDefault = rtKitDefault('dynamicSelector', (it) => it.emptyResultsText, '');
|
|
699
761
|
this.addLabel = rtKitLabel('dynamicSelectorAdd');
|
|
700
762
|
this.nothingToChooseLabel = rtKitLabel('dynamicSelectorNothingToChoose');
|
|
701
763
|
/** Всплывающий выбор открывается от нажатой кнопки добавления: у полосы и у приглашения — свой. */
|
|
@@ -783,8 +845,28 @@ class RtDynamicSelectorComponent extends RtFormControlBase {
|
|
|
783
845
|
this.invitation = input(false, { ...(ngDevMode ? { debugName: "invitation" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
784
846
|
this.invitationIcon = input(null, /* @ts-ignore */
|
|
785
847
|
...(ngDevMode ? [{ debugName: "invitationIcon" }] : /* istanbul ignore next */ []));
|
|
848
|
+
/** Имя Material вместо `invitationIcon` — уходит во вход `glyph` заглушки приглашения. */
|
|
849
|
+
this.invitationGlyph = input(null, /* @ts-ignore */
|
|
850
|
+
...(ngDevMode ? [{ debugName: "invitationGlyph" }] : /* istanbul ignore next */ []));
|
|
786
851
|
this.invitationDescription = input('', /* @ts-ignore */
|
|
787
852
|
...(ngDevMode ? [{ debugName: "invitationDescription" }] : /* istanbul ignore next */ []));
|
|
853
|
+
/** Значок кнопки приглашения; null — кнопка без значка. */
|
|
854
|
+
this.invitationButtonIcon = input(this.#invitationButtonIconDefault, /* @ts-ignore */
|
|
855
|
+
...(ngDevMode ? [{ debugName: "invitationButtonIcon" }] : /* istanbul ignore next */ []));
|
|
856
|
+
/** Вид кнопки приглашения — тот же набор, что у кнопки кита. */
|
|
857
|
+
this.invitationButtonAppearance = input(this.#invitationButtonAppearanceDefault, /* @ts-ignore */
|
|
858
|
+
...(ngDevMode ? [{ debugName: "invitationButtonAppearance" }] : /* istanbul ignore next */ []));
|
|
859
|
+
/** Значок кнопки «Очистить список». */
|
|
860
|
+
this.clearIcon = input(this.#clearIconDefault, /* @ts-ignore */
|
|
861
|
+
...(ngDevMode ? [{ debugName: "clearIcon" }] : /* istanbul ignore next */ []));
|
|
862
|
+
/** Название строки переносится; `false` ведёт его одной строкой с многоточием и подсказкой при обрезке. */
|
|
863
|
+
this.titleWrap = input(this.#titleWrapDefault, { ...(ngDevMode ? { debugName: "titleWrap" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
864
|
+
/** Вид поля поиска в окне выбора. */
|
|
865
|
+
this.searchAppearance = input(this.#searchAppearanceDefault, /* @ts-ignore */
|
|
866
|
+
...(ngDevMode ? [{ debugName: "searchAppearance" }] : /* istanbul ignore next */ []));
|
|
867
|
+
/** Подпись пустого результата поиска; пустая строка оставляет подпись кита. */
|
|
868
|
+
this.emptyResultsText = input(this.#emptyResultsTextDefault, /* @ts-ignore */
|
|
869
|
+
...(ngDevMode ? [{ debugName: "emptyResultsText" }] : /* istanbul ignore next */ []));
|
|
788
870
|
this.multiToggleShown = input(false, { ...(ngDevMode ? { debugName: "multiToggleShown" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
789
871
|
this.selectAllShown = input(true, { ...(ngDevMode ? { debugName: "selectAllShown" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
790
872
|
this.localSearch = input(true, { ...(ngDevMode ? { debugName: "localSearch" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
@@ -815,9 +897,11 @@ class RtDynamicSelectorComponent extends RtFormControlBase {
|
|
|
815
897
|
.map((row) => row.label)
|
|
816
898
|
.join(', '), /* @ts-ignore */
|
|
817
899
|
...(ngDevMode ? [{ debugName: "displayText" }] : /* istanbul ignore next */ []));
|
|
900
|
+
// Вход chosenEntities задаёт выбранное, как запись формы; эхо выбора, вернувшееся от родителя, его не трогает.
|
|
901
|
+
toObservable(this.chosenEntities)
|
|
902
|
+
.pipe(takeUntilDestroyed())
|
|
903
|
+
.subscribe((list) => this.#takeChosen(list));
|
|
818
904
|
}
|
|
819
|
-
/** Последнее значение, записанное формой: к нему возвращает сброс. */
|
|
820
|
-
#initial;
|
|
821
905
|
/** Записанное формой становится и списком, и значением для сброса; пустой массив список опустошает. */
|
|
822
906
|
writeValue(value) {
|
|
823
907
|
super.writeValue(value === null ? null : [...value]);
|
|
@@ -891,9 +975,24 @@ class RtDynamicSelectorComponent extends RtFormControlBase {
|
|
|
891
975
|
this.chosenEntities.set(entities);
|
|
892
976
|
this.selectionChange.emit(entities);
|
|
893
977
|
}
|
|
978
|
+
/**
|
|
979
|
+
* Непустой список с другими ключами становится и значением, и исходным для сброса. Список с теми
|
|
980
|
+
* же ключами — эхо `selectionChange` от родителя: исходный он не трогает, иначе сброс не включился бы.
|
|
981
|
+
*/
|
|
982
|
+
#takeChosen(list) {
|
|
983
|
+
const keys = list.map((item) => this.#keyOf(item));
|
|
984
|
+
const shown = this.#entitiesOf(this.value()).map((item) => this.#keyOf(item));
|
|
985
|
+
if (keys.length === 0 || sameDynamicKeys(keys, shown)) {
|
|
986
|
+
return;
|
|
987
|
+
}
|
|
988
|
+
this.value.set(keys);
|
|
989
|
+
this.#initial.set([...keys]);
|
|
990
|
+
}
|
|
991
|
+
/** Запись ищется среди предложенных, а затем среди пришедших входом `chosenEntities`. */
|
|
894
992
|
#entitiesOf(keys) {
|
|
993
|
+
const known = [...this.entities(), ...this.chosenEntities()];
|
|
895
994
|
return keys
|
|
896
|
-
.map((key) =>
|
|
995
|
+
.map((key) => known.find((item) => this.#keyOf(item) === key))
|
|
897
996
|
.filter((item) => item !== undefined);
|
|
898
997
|
}
|
|
899
998
|
/** Ключ записи — по имени поля, которое назвал вызывающий. */
|
|
@@ -904,13 +1003,13 @@ class RtDynamicSelectorComponent extends RtFormControlBase {
|
|
|
904
1003
|
#labelOf(item) {
|
|
905
1004
|
return item[this.displayExp()];
|
|
906
1005
|
}
|
|
907
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtDynamicSelectorComponent, deps:
|
|
908
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtDynamicSelectorComponent, isStandalone: true, selector: "rt-dynamic-selector", inputs: { entities: { classPropertyName: "entities", publicName: "entities", isSignal: true, isRequired: false, transformFunction: null }, keyExp: { classPropertyName: "keyExp", publicName: "keyExp", isSignal: true, isRequired: true, transformFunction: null }, displayExp: { classPropertyName: "displayExp", publicName: "displayExp", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, buttonTitle: { classPropertyName: "buttonTitle", publicName: "buttonTitle", isSignal: true, isRequired: false, transformFunction: null }, addShown: { classPropertyName: "addShown", publicName: "addShown", isSignal: true, isRequired: false, transformFunction: null }, removeShown: { classPropertyName: "removeShown", publicName: "removeShown", isSignal: true, isRequired: false, transformFunction: null }, listActionsShown: { classPropertyName: "listActionsShown", publicName: "listActionsShown", isSignal: true, isRequired: false, transformFunction: null }, extraChanged: { classPropertyName: "extraChanged", publicName: "extraChanged", isSignal: true, isRequired: false, transformFunction: null }, searchTerm: { classPropertyName: "searchTerm", publicName: "searchTerm", isSignal: true, isRequired: false, transformFunction: null }, readonlyKeys: { classPropertyName: "readonlyKeys", publicName: "readonlyKeys", isSignal: true, isRequired: false, transformFunction: null }, pinnedKeys: { classPropertyName: "pinnedKeys", publicName: "pinnedKeys", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, buttonRadius: { classPropertyName: "buttonRadius", publicName: "buttonRadius", isSignal: true, isRequired: false, transformFunction: null }, invitation: { classPropertyName: "invitation", publicName: "invitation", isSignal: true, isRequired: false, transformFunction: null }, invitationIcon: { classPropertyName: "invitationIcon", publicName: "invitationIcon", isSignal: true, isRequired: false, transformFunction: null }, invitationDescription: { classPropertyName: "invitationDescription", publicName: "invitationDescription", isSignal: true, isRequired: false, transformFunction: null }, multiToggleShown: { classPropertyName: "multiToggleShown", publicName: "multiToggleShown", isSignal: true, isRequired: false, transformFunction: null }, selectAllShown: { classPropertyName: "selectAllShown", publicName: "selectAllShown", isSignal: true, isRequired: false, transformFunction: null }, localSearch: { classPropertyName: "localSearch", publicName: "localSearch", isSignal: true, isRequired: false, transformFunction: null }, lazyLoad: { classPropertyName: "lazyLoad", publicName: "lazyLoad", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, fetching: { classPropertyName: "fetching", publicName: "fetching", isSignal: true, isRequired: false, transformFunction: null }, navigateTitle: { classPropertyName: "navigateTitle", publicName: "navigateTitle", isSignal: true, isRequired: false, transformFunction: null }, navigateLink: { classPropertyName: "navigateLink", publicName: "navigateLink", isSignal: true, isRequired: false, transformFunction: null }, sortFn: { classPropertyName: "sortFn", publicName: "sortFn", isSignal: true, isRequired: false, transformFunction: null }, chosenEntities: { classPropertyName: "chosenEntities", publicName: "chosenEntities", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { chosenEntities: "chosenEntitiesChange", selectionChange: "selectionChange", listReset: "listReset", listCleared: "listCleared", popupOpenChange: "popupOpenChange", searchChange: "searchChange", loadMore: "loadMore", temporaryChoiceChange: "temporaryChoiceChange" }, host: { classAttribute: "rt-dynamic-selector" }, providers: [
|
|
1006
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtDynamicSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1007
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtDynamicSelectorComponent, isStandalone: true, selector: "rt-dynamic-selector", inputs: { entities: { classPropertyName: "entities", publicName: "entities", isSignal: true, isRequired: false, transformFunction: null }, keyExp: { classPropertyName: "keyExp", publicName: "keyExp", isSignal: true, isRequired: true, transformFunction: null }, displayExp: { classPropertyName: "displayExp", publicName: "displayExp", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, buttonTitle: { classPropertyName: "buttonTitle", publicName: "buttonTitle", isSignal: true, isRequired: false, transformFunction: null }, addShown: { classPropertyName: "addShown", publicName: "addShown", isSignal: true, isRequired: false, transformFunction: null }, removeShown: { classPropertyName: "removeShown", publicName: "removeShown", isSignal: true, isRequired: false, transformFunction: null }, listActionsShown: { classPropertyName: "listActionsShown", publicName: "listActionsShown", isSignal: true, isRequired: false, transformFunction: null }, extraChanged: { classPropertyName: "extraChanged", publicName: "extraChanged", isSignal: true, isRequired: false, transformFunction: null }, searchTerm: { classPropertyName: "searchTerm", publicName: "searchTerm", isSignal: true, isRequired: false, transformFunction: null }, readonlyKeys: { classPropertyName: "readonlyKeys", publicName: "readonlyKeys", isSignal: true, isRequired: false, transformFunction: null }, pinnedKeys: { classPropertyName: "pinnedKeys", publicName: "pinnedKeys", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, buttonRadius: { classPropertyName: "buttonRadius", publicName: "buttonRadius", isSignal: true, isRequired: false, transformFunction: null }, invitation: { classPropertyName: "invitation", publicName: "invitation", isSignal: true, isRequired: false, transformFunction: null }, invitationIcon: { classPropertyName: "invitationIcon", publicName: "invitationIcon", isSignal: true, isRequired: false, transformFunction: null }, invitationGlyph: { classPropertyName: "invitationGlyph", publicName: "invitationGlyph", isSignal: true, isRequired: false, transformFunction: null }, invitationDescription: { classPropertyName: "invitationDescription", publicName: "invitationDescription", isSignal: true, isRequired: false, transformFunction: null }, invitationButtonIcon: { classPropertyName: "invitationButtonIcon", publicName: "invitationButtonIcon", isSignal: true, isRequired: false, transformFunction: null }, invitationButtonAppearance: { classPropertyName: "invitationButtonAppearance", publicName: "invitationButtonAppearance", isSignal: true, isRequired: false, transformFunction: null }, clearIcon: { classPropertyName: "clearIcon", publicName: "clearIcon", isSignal: true, isRequired: false, transformFunction: null }, titleWrap: { classPropertyName: "titleWrap", publicName: "titleWrap", isSignal: true, isRequired: false, transformFunction: null }, searchAppearance: { classPropertyName: "searchAppearance", publicName: "searchAppearance", isSignal: true, isRequired: false, transformFunction: null }, emptyResultsText: { classPropertyName: "emptyResultsText", publicName: "emptyResultsText", isSignal: true, isRequired: false, transformFunction: null }, multiToggleShown: { classPropertyName: "multiToggleShown", publicName: "multiToggleShown", isSignal: true, isRequired: false, transformFunction: null }, selectAllShown: { classPropertyName: "selectAllShown", publicName: "selectAllShown", isSignal: true, isRequired: false, transformFunction: null }, localSearch: { classPropertyName: "localSearch", publicName: "localSearch", isSignal: true, isRequired: false, transformFunction: null }, lazyLoad: { classPropertyName: "lazyLoad", publicName: "lazyLoad", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, fetching: { classPropertyName: "fetching", publicName: "fetching", isSignal: true, isRequired: false, transformFunction: null }, navigateTitle: { classPropertyName: "navigateTitle", publicName: "navigateTitle", isSignal: true, isRequired: false, transformFunction: null }, navigateLink: { classPropertyName: "navigateLink", publicName: "navigateLink", isSignal: true, isRequired: false, transformFunction: null }, sortFn: { classPropertyName: "sortFn", publicName: "sortFn", isSignal: true, isRequired: false, transformFunction: null }, chosenEntities: { classPropertyName: "chosenEntities", publicName: "chosenEntities", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { chosenEntities: "chosenEntitiesChange", selectionChange: "selectionChange", listReset: "listReset", listCleared: "listCleared", popupOpenChange: "popupOpenChange", searchChange: "searchChange", loadMore: "loadMore", temporaryChoiceChange: "temporaryChoiceChange" }, host: { classAttribute: "rt-dynamic-selector" }, providers: [
|
|
909
1008
|
// Алиас базового токена — для contentChild(RtFormControlBase) в rt-field.
|
|
910
1009
|
{ provide: RtFormControlBase, useExisting: forwardRef(() => RtDynamicSelectorComponent) },
|
|
911
|
-
], queries: [{ propertyName: "rowTitle", first: true, predicate: RtDynamicSelectorRowTitleDirective, descendants: true, isSignal: true }, { propertyName: "rowControls", first: true, predicate: RtDynamicSelectorRowControlsDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "popovers", predicate: RtPopoverDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-container rtBlock=\"rt-dynamic-selector\">\n @if (isNothingToChoose()) {\n <rt-empty-state rtElem=\"nothing\" qa-dataid=\"dynamic-selector-nothing\" icon=\"warning\" [title]=\"nothingToChooseLabel()\" />\n } @else {\n <div rtElem=\"content\">\n <rt-dynamic-selector-list\n [rows]=\"rows()\"\n [draggable]=\"draggable()\"\n [buttonRadius]=\"buttonRadius()\"\n [disabled]=\"isDisabled()\"\n [actionsShown]=\"!invitation()\"\n [resetClearShown]=\"listActionsShown()\"\n [removeShown]=\"removeShown()\"\n [resetDisabled]=\"isResetDisabled()\"\n [clearDisabled]=\"isClearDisabled()\"\n [titleTpl]=\"titleTpl()\"\n [controlsTpl]=\"controlsTpl()\"\n (removed)=\"onRemoved($event)\"\n (moved)=\"onMoved($event)\"\n (resetClicked)=\"onReset()\"\n (cleared)=\"onCleared()\">\n @if (isAddShown()) {\n <button\n rtButton\n theme=\"secondary\"\n appearance=\"text\"\n type=\"button\"\n qa-dataid=\"dynamic-selector-add\"\n rtPopoverTrigger=\"manual\"\n #addPopover=\"rtPopover\"\n [rtPopover]=\"popupTpl\"\n [rtPopoverDisabled]=\"isDisabled()\"\n [label]=\"addTitle()\"\n [attr.aria-label]=\"addTitle()\"\n [disabled]=\"isDisabled()\"\n (rtPopoverOpened)=\"onOpened()\"\n (rtPopoverClosed)=\"onClosed()\"\n (click)=\"onAdd(addPopover)\"></button>\n }\n </rt-dynamic-selector-list>\n\n @if (invitation()) {\n <rt-empty-state\n rtElem=\"invitation\"\n qa-dataid=\"dynamic-selector-invitation\"\n [icon]=\"invitationIcon()\"\n [description]=\"invitationDescription()\">\n @if (hasOffer()) {\n <button\n rtButton\n
|
|
1010
|
+
], queries: [{ propertyName: "rowTitle", first: true, predicate: RtDynamicSelectorRowTitleDirective, descendants: true, isSignal: true }, { propertyName: "rowControls", first: true, predicate: RtDynamicSelectorRowControlsDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "popovers", predicate: RtPopoverDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-container rtBlock=\"rt-dynamic-selector\">\n @if (isNothingToChoose()) {\n <rt-empty-state rtElem=\"nothing\" qa-dataid=\"dynamic-selector-nothing\" icon=\"warning\" [title]=\"nothingToChooseLabel()\" />\n } @else {\n <div rtElem=\"content\">\n <rt-dynamic-selector-list\n [rows]=\"rows()\"\n [draggable]=\"draggable()\"\n [buttonRadius]=\"buttonRadius()\"\n [clearIcon]=\"clearIcon()\"\n [titleWrap]=\"titleWrap()\"\n [disabled]=\"isDisabled()\"\n [actionsShown]=\"!invitation()\"\n [resetClearShown]=\"listActionsShown()\"\n [removeShown]=\"removeShown()\"\n [resetDisabled]=\"isResetDisabled()\"\n [clearDisabled]=\"isClearDisabled()\"\n [titleTpl]=\"titleTpl()\"\n [controlsTpl]=\"controlsTpl()\"\n (removed)=\"onRemoved($event)\"\n (moved)=\"onMoved($event)\"\n (resetClicked)=\"onReset()\"\n (cleared)=\"onCleared()\">\n @if (isAddShown()) {\n <button\n rtButton\n theme=\"secondary\"\n appearance=\"text\"\n type=\"button\"\n qa-dataid=\"dynamic-selector-add\"\n rtPopoverTrigger=\"manual\"\n #addPopover=\"rtPopover\"\n [rtPopover]=\"popupTpl\"\n [rtPopoverDisabled]=\"isDisabled()\"\n [label]=\"addTitle()\"\n [attr.aria-label]=\"addTitle()\"\n [disabled]=\"isDisabled()\"\n (rtPopoverOpened)=\"onOpened()\"\n (rtPopoverClosed)=\"onClosed()\"\n (click)=\"onAdd(addPopover)\"></button>\n }\n </rt-dynamic-selector-list>\n\n @if (invitation()) {\n <rt-empty-state\n rtElem=\"invitation\"\n qa-dataid=\"dynamic-selector-invitation\"\n [icon]=\"invitationIcon()\"\n [glyph]=\"invitationGlyph()\"\n [description]=\"invitationDescription()\">\n @if (hasOffer()) {\n <button\n rtButton\n type=\"button\"\n qa-dataid=\"dynamic-selector-invitation-add\"\n rtPopoverTrigger=\"manual\"\n #invitationPopover=\"rtPopover\"\n [appearance]=\"invitationButtonAppearance()\"\n [icon]=\"invitationButtonIcon()\"\n [rtPopover]=\"popupTpl\"\n [rtPopoverDisabled]=\"isDisabled()\"\n [label]=\"addTitle()\"\n [attr.aria-label]=\"addTitle()\"\n [disabled]=\"isDisabled()\"\n (rtPopoverOpened)=\"onOpened()\"\n (rtPopoverClosed)=\"onClosed()\"\n (click)=\"onAdd(invitationPopover)\"></button>\n }\n </rt-empty-state>\n }\n </div>\n }\n\n <ng-template #popupTpl>\n <rt-dynamic-selector-popup\n [entities]=\"offered()\"\n [keyExp]=\"keyExp()\"\n [displayExp]=\"displayExp()\"\n [mode]=\"mode()\"\n [multiToggleShown]=\"multiToggleShown()\"\n [selectAllShown]=\"selectAllShown()\"\n [localSearch]=\"localSearch()\"\n [lazyLoad]=\"lazyLoad()\"\n [loading]=\"loading()\"\n [fetching]=\"fetching()\"\n [pinnedKeys]=\"pinnedKeys()\"\n [navigateTitle]=\"navigateTitle()\"\n [navigateLink]=\"navigateLink()\"\n [searchTerm]=\"searchTerm()\"\n [searchAppearance]=\"searchAppearance()\"\n [emptyResultsText]=\"emptyResultsText()\"\n (applied)=\"onApplied($event)\"\n (cancelled)=\"onCancelled()\"\n (searchChange)=\"searchChange.emit($event)\"\n (loadMore)=\"loadMore.emit()\"\n (temporaryChoiceChange)=\"temporaryChoiceChange.emit($event)\" />\n </ng-template>\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-dynamic-selector{display:block;width:100%}.rt-dynamic-selector__content{display:flex;flex-direction:column;gap:var(--rt-space-sm)}.rt-dynamic-selector__invitation,.rt-dynamic-selector__nothing{display:block}}\n"], dependencies: [{ kind: "directive", type:
|
|
912
1011
|
// standalone components / directives
|
|
913
|
-
BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: RtButtonDirective, selector: "button[rtButton], a[rtButton]", inputs: ["label", "icon", "iconPos", "theme", "appearance", "size", "loading", "loadingIcon", "loadingLabel", "pressed"] }, { kind: "component", type: RtDynamicSelectorListComponent, selector: "rt-dynamic-selector-list", inputs: ["rows", "draggable", "editable", "disabled", "actionsShown", "resetClearShown", "removeShown", "resetDisabled", "clearDisabled", "buttonRadius", "titleTpl", "controlsTpl"], outputs: ["removed", "moved", "edited", "resetClicked", "cleared"] }, { kind: "component", type: RtDynamicSelectorPopupComponent, selector: "rt-dynamic-selector-popup", inputs: ["entities", "keyExp", "displayExp", "mode", "multiToggleShown", "selectAllShown", "localSearch", "lazyLoad", "loading", "fetching", "pinnedKeys", "navigateTitle", "navigateLink", "searchTerm"], outputs: ["applied", "cancelled", "searchChange", "loadMore", "temporaryChoiceChange"] }, { kind: "component", type: RtEmptyStateComponent, selector: "rt-empty-state", inputs: ["icon", "glyph", "title", "description", "framed"] }, { kind: "directive", type: RtPopoverDirective, selector: "[rtPopover]", inputs: ["rtPopover", "rtPopoverTrigger", "rtPopoverWidth", "rtPopoverAlign", "rtPopoverFitViewport", "rtPopoverContext", "rtPopoverPanelClass", "rtPopoverDisabled", "rtPopoverOffsetY", "rtPopoverOffsetX"], outputs: ["rtPopoverOpened", "rtPopoverClosed"], exportAs: ["rtPopover"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1012
|
+
BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: RtButtonDirective, selector: "button[rtButton], a[rtButton]", inputs: ["label", "icon", "iconPos", "theme", "appearance", "size", "loading", "loadingIcon", "loadingLabel", "pressed"] }, { kind: "component", type: RtDynamicSelectorListComponent, selector: "rt-dynamic-selector-list", inputs: ["rows", "draggable", "editable", "disabled", "actionsShown", "resetClearShown", "removeShown", "resetDisabled", "clearDisabled", "buttonRadius", "clearIcon", "titleWrap", "titleTpl", "controlsTpl"], outputs: ["removed", "moved", "edited", "resetClicked", "cleared"] }, { kind: "component", type: RtDynamicSelectorPopupComponent, selector: "rt-dynamic-selector-popup", inputs: ["entities", "keyExp", "displayExp", "mode", "multiToggleShown", "selectAllShown", "localSearch", "lazyLoad", "loading", "fetching", "pinnedKeys", "navigateTitle", "navigateLink", "searchTerm", "searchAppearance", "emptyResultsText"], outputs: ["applied", "cancelled", "searchChange", "loadMore", "temporaryChoiceChange"] }, { kind: "component", type: RtEmptyStateComponent, selector: "rt-empty-state", inputs: ["icon", "glyph", "title", "description", "framed"] }, { kind: "directive", type: RtPopoverDirective, selector: "[rtPopover]", inputs: ["rtPopover", "rtPopoverTrigger", "rtPopoverWidth", "rtPopoverAlign", "rtPopoverFitViewport", "rtPopoverContext", "rtPopoverPanelClass", "rtPopoverDisabled", "rtPopoverOffsetY", "rtPopoverOffsetX"], outputs: ["rtPopoverOpened", "rtPopoverClosed"], exportAs: ["rtPopover"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
914
1013
|
}
|
|
915
1014
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtDynamicSelectorComponent, decorators: [{
|
|
916
1015
|
type: Component,
|
|
@@ -926,8 +1025,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
|
|
|
926
1025
|
], providers: [
|
|
927
1026
|
// Алиас базового токена — для contentChild(RtFormControlBase) в rt-field.
|
|
928
1027
|
{ provide: RtFormControlBase, useExisting: forwardRef(() => RtDynamicSelectorComponent) },
|
|
929
|
-
], host: { class: BEM_BLOCK }, template: "<ng-container rtBlock=\"rt-dynamic-selector\">\n @if (isNothingToChoose()) {\n <rt-empty-state rtElem=\"nothing\" qa-dataid=\"dynamic-selector-nothing\" icon=\"warning\" [title]=\"nothingToChooseLabel()\" />\n } @else {\n <div rtElem=\"content\">\n <rt-dynamic-selector-list\n [rows]=\"rows()\"\n [draggable]=\"draggable()\"\n [buttonRadius]=\"buttonRadius()\"\n [disabled]=\"isDisabled()\"\n [actionsShown]=\"!invitation()\"\n [resetClearShown]=\"listActionsShown()\"\n [removeShown]=\"removeShown()\"\n [resetDisabled]=\"isResetDisabled()\"\n [clearDisabled]=\"isClearDisabled()\"\n [titleTpl]=\"titleTpl()\"\n [controlsTpl]=\"controlsTpl()\"\n (removed)=\"onRemoved($event)\"\n (moved)=\"onMoved($event)\"\n (resetClicked)=\"onReset()\"\n (cleared)=\"onCleared()\">\n @if (isAddShown()) {\n <button\n rtButton\n theme=\"secondary\"\n appearance=\"text\"\n type=\"button\"\n qa-dataid=\"dynamic-selector-add\"\n rtPopoverTrigger=\"manual\"\n #addPopover=\"rtPopover\"\n [rtPopover]=\"popupTpl\"\n [rtPopoverDisabled]=\"isDisabled()\"\n [label]=\"addTitle()\"\n [attr.aria-label]=\"addTitle()\"\n [disabled]=\"isDisabled()\"\n (rtPopoverOpened)=\"onOpened()\"\n (rtPopoverClosed)=\"onClosed()\"\n (click)=\"onAdd(addPopover)\"></button>\n }\n </rt-dynamic-selector-list>\n\n @if (invitation()) {\n <rt-empty-state\n rtElem=\"invitation\"\n qa-dataid=\"dynamic-selector-invitation\"\n [icon]=\"invitationIcon()\"\n [description]=\"invitationDescription()\">\n @if (hasOffer()) {\n <button\n rtButton\n
|
|
930
|
-
}], propDecorators: { popovers: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => RtPopoverDirective), { isSignal: true }] }], rowTitle: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtDynamicSelectorRowTitleDirective), { isSignal: true }] }], rowControls: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtDynamicSelectorRowControlsDirective), { isSignal: true }] }], entities: [{ type: i0.Input, args: [{ isSignal: true, alias: "entities", required: false }] }], keyExp: [{ type: i0.Input, args: [{ isSignal: true, alias: "keyExp", required: true }] }], displayExp: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayExp", required: true }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], buttonTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonTitle", required: false }] }], addShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "addShown", required: false }] }], removeShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeShown", required: false }] }], listActionsShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "listActionsShown", required: false }] }], extraChanged: [{ type: i0.Input, args: [{ isSignal: true, alias: "extraChanged", required: false }] }], searchTerm: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchTerm", required: false }] }], readonlyKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonlyKeys", required: false }] }], pinnedKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "pinnedKeys", required: false }] }], draggable: [{ type: i0.Input, args: [{ isSignal: true, alias: "draggable", required: false }] }], buttonRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonRadius", required: false }] }], invitation: [{ type: i0.Input, args: [{ isSignal: true, alias: "invitation", required: false }] }], invitationIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "invitationIcon", required: false }] }], invitationDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "invitationDescription", required: false }] }], multiToggleShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiToggleShown", required: false }] }], selectAllShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAllShown", required: false }] }], localSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "localSearch", required: false }] }], lazyLoad: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazyLoad", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], fetching: [{ type: i0.Input, args: [{ isSignal: true, alias: "fetching", required: false }] }], navigateTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigateTitle", required: false }] }], navigateLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigateLink", required: false }] }], sortFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortFn", required: false }] }], chosenEntities: [{ type: i0.Input, args: [{ isSignal: true, alias: "chosenEntities", required: false }] }, { type: i0.Output, args: ["chosenEntitiesChange"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], listReset: [{ type: i0.Output, args: ["listReset"] }], listCleared: [{ type: i0.Output, args: ["listCleared"] }], popupOpenChange: [{ type: i0.Output, args: ["popupOpenChange"] }], searchChange: [{ type: i0.Output, args: ["searchChange"] }], loadMore: [{ type: i0.Output, args: ["loadMore"] }], temporaryChoiceChange: [{ type: i0.Output, args: ["temporaryChoiceChange"] }] } });
|
|
1028
|
+
], host: { class: BEM_BLOCK }, template: "<ng-container rtBlock=\"rt-dynamic-selector\">\n @if (isNothingToChoose()) {\n <rt-empty-state rtElem=\"nothing\" qa-dataid=\"dynamic-selector-nothing\" icon=\"warning\" [title]=\"nothingToChooseLabel()\" />\n } @else {\n <div rtElem=\"content\">\n <rt-dynamic-selector-list\n [rows]=\"rows()\"\n [draggable]=\"draggable()\"\n [buttonRadius]=\"buttonRadius()\"\n [clearIcon]=\"clearIcon()\"\n [titleWrap]=\"titleWrap()\"\n [disabled]=\"isDisabled()\"\n [actionsShown]=\"!invitation()\"\n [resetClearShown]=\"listActionsShown()\"\n [removeShown]=\"removeShown()\"\n [resetDisabled]=\"isResetDisabled()\"\n [clearDisabled]=\"isClearDisabled()\"\n [titleTpl]=\"titleTpl()\"\n [controlsTpl]=\"controlsTpl()\"\n (removed)=\"onRemoved($event)\"\n (moved)=\"onMoved($event)\"\n (resetClicked)=\"onReset()\"\n (cleared)=\"onCleared()\">\n @if (isAddShown()) {\n <button\n rtButton\n theme=\"secondary\"\n appearance=\"text\"\n type=\"button\"\n qa-dataid=\"dynamic-selector-add\"\n rtPopoverTrigger=\"manual\"\n #addPopover=\"rtPopover\"\n [rtPopover]=\"popupTpl\"\n [rtPopoverDisabled]=\"isDisabled()\"\n [label]=\"addTitle()\"\n [attr.aria-label]=\"addTitle()\"\n [disabled]=\"isDisabled()\"\n (rtPopoverOpened)=\"onOpened()\"\n (rtPopoverClosed)=\"onClosed()\"\n (click)=\"onAdd(addPopover)\"></button>\n }\n </rt-dynamic-selector-list>\n\n @if (invitation()) {\n <rt-empty-state\n rtElem=\"invitation\"\n qa-dataid=\"dynamic-selector-invitation\"\n [icon]=\"invitationIcon()\"\n [glyph]=\"invitationGlyph()\"\n [description]=\"invitationDescription()\">\n @if (hasOffer()) {\n <button\n rtButton\n type=\"button\"\n qa-dataid=\"dynamic-selector-invitation-add\"\n rtPopoverTrigger=\"manual\"\n #invitationPopover=\"rtPopover\"\n [appearance]=\"invitationButtonAppearance()\"\n [icon]=\"invitationButtonIcon()\"\n [rtPopover]=\"popupTpl\"\n [rtPopoverDisabled]=\"isDisabled()\"\n [label]=\"addTitle()\"\n [attr.aria-label]=\"addTitle()\"\n [disabled]=\"isDisabled()\"\n (rtPopoverOpened)=\"onOpened()\"\n (rtPopoverClosed)=\"onClosed()\"\n (click)=\"onAdd(invitationPopover)\"></button>\n }\n </rt-empty-state>\n }\n </div>\n }\n\n <ng-template #popupTpl>\n <rt-dynamic-selector-popup\n [entities]=\"offered()\"\n [keyExp]=\"keyExp()\"\n [displayExp]=\"displayExp()\"\n [mode]=\"mode()\"\n [multiToggleShown]=\"multiToggleShown()\"\n [selectAllShown]=\"selectAllShown()\"\n [localSearch]=\"localSearch()\"\n [lazyLoad]=\"lazyLoad()\"\n [loading]=\"loading()\"\n [fetching]=\"fetching()\"\n [pinnedKeys]=\"pinnedKeys()\"\n [navigateTitle]=\"navigateTitle()\"\n [navigateLink]=\"navigateLink()\"\n [searchTerm]=\"searchTerm()\"\n [searchAppearance]=\"searchAppearance()\"\n [emptyResultsText]=\"emptyResultsText()\"\n (applied)=\"onApplied($event)\"\n (cancelled)=\"onCancelled()\"\n (searchChange)=\"searchChange.emit($event)\"\n (loadMore)=\"loadMore.emit()\"\n (temporaryChoiceChange)=\"temporaryChoiceChange.emit($event)\" />\n </ng-template>\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-dynamic-selector{display:block;width:100%}.rt-dynamic-selector__content{display:flex;flex-direction:column;gap:var(--rt-space-sm)}.rt-dynamic-selector__invitation,.rt-dynamic-selector__nothing{display:block}}\n"] }]
|
|
1029
|
+
}], ctorParameters: () => [], propDecorators: { popovers: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => RtPopoverDirective), { isSignal: true }] }], rowTitle: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtDynamicSelectorRowTitleDirective), { isSignal: true }] }], rowControls: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtDynamicSelectorRowControlsDirective), { isSignal: true }] }], entities: [{ type: i0.Input, args: [{ isSignal: true, alias: "entities", required: false }] }], keyExp: [{ type: i0.Input, args: [{ isSignal: true, alias: "keyExp", required: true }] }], displayExp: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayExp", required: true }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], buttonTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonTitle", required: false }] }], addShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "addShown", required: false }] }], removeShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeShown", required: false }] }], listActionsShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "listActionsShown", required: false }] }], extraChanged: [{ type: i0.Input, args: [{ isSignal: true, alias: "extraChanged", required: false }] }], searchTerm: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchTerm", required: false }] }], readonlyKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonlyKeys", required: false }] }], pinnedKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "pinnedKeys", required: false }] }], draggable: [{ type: i0.Input, args: [{ isSignal: true, alias: "draggable", required: false }] }], buttonRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonRadius", required: false }] }], invitation: [{ type: i0.Input, args: [{ isSignal: true, alias: "invitation", required: false }] }], invitationIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "invitationIcon", required: false }] }], invitationGlyph: [{ type: i0.Input, args: [{ isSignal: true, alias: "invitationGlyph", required: false }] }], invitationDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "invitationDescription", required: false }] }], invitationButtonIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "invitationButtonIcon", required: false }] }], invitationButtonAppearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "invitationButtonAppearance", required: false }] }], clearIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearIcon", required: false }] }], titleWrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleWrap", required: false }] }], searchAppearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchAppearance", required: false }] }], emptyResultsText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyResultsText", required: false }] }], multiToggleShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiToggleShown", required: false }] }], selectAllShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAllShown", required: false }] }], localSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "localSearch", required: false }] }], lazyLoad: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazyLoad", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], fetching: [{ type: i0.Input, args: [{ isSignal: true, alias: "fetching", required: false }] }], navigateTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigateTitle", required: false }] }], navigateLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigateLink", required: false }] }], sortFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortFn", required: false }] }], chosenEntities: [{ type: i0.Input, args: [{ isSignal: true, alias: "chosenEntities", required: false }] }, { type: i0.Output, args: ["chosenEntitiesChange"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], listReset: [{ type: i0.Output, args: ["listReset"] }], listCleared: [{ type: i0.Output, args: ["listCleared"] }], popupOpenChange: [{ type: i0.Output, args: ["popupOpenChange"] }], searchChange: [{ type: i0.Output, args: ["searchChange"] }], loadMore: [{ type: i0.Output, args: ["loadMore"] }], temporaryChoiceChange: [{ type: i0.Output, args: ["temporaryChoiceChange"] }] } });
|
|
931
1030
|
|
|
932
1031
|
/**
|
|
933
1032
|
* Generated bundle index. Do not edit.
|