@rt-tools/ui-kit-v2 0.19.0 → 0.20.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/rt-tools-ui-kit-v2-ai-run-status.mjs +2 -2
- package/fesm2022/rt-tools-ui-kit-v2-ai-run-status.mjs.map +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-core.mjs +19 -1
- package/fesm2022/rt-tools-ui-kit-v2-core.mjs.map +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-data-table.mjs +14 -2
- package/fesm2022/rt-tools-ui-kit-v2-data-table.mjs.map +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-dynamic-selector.mjs +129 -18
- package/fesm2022/rt-tools-ui-kit-v2-dynamic-selector.mjs.map +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-empty-state.mjs +2 -2
- package/fesm2022/rt-tools-ui-kit-v2-empty-state.mjs.map +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-icon.mjs +14 -8
- package/fesm2022/rt-tools-ui-kit-v2-icon.mjs.map +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-input-number.mjs +4 -3
- package/fesm2022/rt-tools-ui-kit-v2-input-number.mjs.map +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-input.mjs +4 -3
- package/fesm2022/rt-tools-ui-kit-v2-input.mjs.map +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-rich-editor.mjs +9 -4
- package/fesm2022/rt-tools-ui-kit-v2-rich-editor.mjs.map +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-select.mjs +15 -1
- package/fesm2022/rt-tools-ui-kit-v2-select.mjs.map +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-thread-list.mjs +15 -9
- package/fesm2022/rt-tools-ui-kit-v2-thread-list.mjs.map +1 -1
- package/package.json +1 -1
- package/rt-tools-ui-kit-v2-0.20.0.tgz +0 -0
- package/src/lib/components/ai-run-status/CONTEXT.md +6 -1
- package/src/lib/components/ai-run-status/rt-ai-run-status.component.scss +41 -2
- package/src/lib/components/data-table/CONTEXT.md +5 -0
- package/src/lib/components/dynamic-selector/CONTEXT.md +24 -3
- package/src/lib/components/dynamic-selector/dynamic-input/rt-dynamic-input.component.scss +4 -5
- package/src/lib/components/dynamic-selector/list/rt-dynamic-selector-list.component.scss +50 -6
- package/src/lib/components/dynamic-selector/popup/rt-dynamic-selector-popup-options.scss +108 -0
- package/src/lib/components/dynamic-selector/popup/rt-dynamic-selector-popup.component.scss +28 -23
- package/src/lib/components/dynamic-selector/rt-dynamic-selector.component.scss +4 -5
- package/src/lib/components/empty-state/CONTEXT.md +3 -1
- package/src/lib/components/empty-state/rt-empty-state.component.scss +9 -5
- package/src/lib/components/input/rt-input.component.scss +17 -0
- package/src/lib/components/input-number/rt-input-number.component.scss +15 -0
- package/src/lib/components/select/CONTEXT.md +2 -2
- package/src/lib/components/thread-list/CONTEXT.md +3 -1
- package/src/rich-editor/lib/components/ai-chat/CONTEXT.md +2 -0
- package/types/rt-tools-ui-kit-v2-core.d.ts +70 -5
- package/types/rt-tools-ui-kit-v2-data-table.d.ts +7 -0
- package/types/rt-tools-ui-kit-v2-dynamic-selector.d.ts +45 -3
- package/types/rt-tools-ui-kit-v2-icon.d.ts +3 -1
- package/types/rt-tools-ui-kit-v2-rich-editor.d.ts +4 -2
- package/types/rt-tools-ui-kit-v2-select.d.ts +6 -0
- package/types/rt-tools-ui-kit-v2-thread-list.d.ts +13 -8
- package/rt-tools-ui-kit-v2-0.19.0.tgz +0 -0
|
@@ -103,7 +103,7 @@ class RtDynamicSelectorListComponent {
|
|
|
103
103
|
this.editedIndex.set(null);
|
|
104
104
|
}
|
|
105
105
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtDynamicSelectorListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
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:
|
|
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);--rt-dynamic-selector-list-actions-gap-default: var(--rt-space-2xs);--rt-dynamic-selector-list-controls-gap-default: var(--rt-space-2xs);--rt-dynamic-selector-list-controls-divider-width-default: 0;--rt-dynamic-selector-list-controls-divider-color-default: var(--rt-color-border-default);--rt-dynamic-selector-list-row-padding-end-default: var(--rt-space-2xs);--rt-dynamic-selector-list-actions-offset-default: var(--rt-space-2xs);--rt-dynamic-selector-list-actions-padding-end-default: 0;--rt-dynamic-selector-list-handle-padding-start-default: 0;--rt-dynamic-selector-list-handle-padding-end-default: var(--rt-space-2xs);--rt-dynamic-selector-list-title-gap-default: var(--rt-space-sm);display:flex;flex-direction:column;gap:var(--rt-dynamic-selector-list-actions-offset, var(--rt-dynamic-selector-list-actions-offset-default))}.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-dynamic-selector-list-row-padding-end, var(--rt-dynamic-selector-list-row-padding-end-default)) 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;margin-inline-end:calc(var(--rt-dynamic-selector-list-title-gap, var(--rt-dynamic-selector-list-title-gap-default)) - var(--rt-space-sm));padding-inline:var(--rt-dynamic-selector-list-handle-padding-start, var(--rt-dynamic-selector-list-handle-padding-start-default)) var(--rt-dynamic-selector-list-handle-padding-end, var(--rt-dynamic-selector-list-handle-padding-end-default))}.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-dynamic-selector-list-controls-gap, var(--rt-dynamic-selector-list-controls-gap-default))}.rt-dynamic-selector-list__controls>:not(:last-child){border-inline-end:var(--rt-dynamic-selector-list-controls-divider-width, var(--rt-dynamic-selector-list-controls-divider-width-default)) solid var(--rt-dynamic-selector-list-controls-divider-color, var(--rt-dynamic-selector-list-controls-divider-color-default))}.rt-dynamic-selector-list__actions{display:flex;align-items:center;gap:var(--rt-dynamic-selector-list-actions-gap, var(--rt-dynamic-selector-list-actions-gap-default));padding-inline-end:var(--rt-dynamic-selector-list-actions-padding-end, var(--rt-dynamic-selector-list-actions-padding-end-default))}.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);--rt-dynamic-selector-list-actions-gap-default: var(--rt-space-2xs);--rt-dynamic-selector-list-controls-gap-default: var(--rt-space-2xs);--rt-dynamic-selector-list-controls-divider-width-default: 0;--rt-dynamic-selector-list-controls-divider-color-default: var(--rt-color-border-default);--rt-dynamic-selector-list-row-padding-end-default: var(--rt-space-2xs);--rt-dynamic-selector-list-actions-offset-default: var(--rt-space-2xs);--rt-dynamic-selector-list-actions-padding-end-default: 0;--rt-dynamic-selector-list-handle-padding-start-default: 0;--rt-dynamic-selector-list-handle-padding-end-default: var(--rt-space-2xs);--rt-dynamic-selector-list-title-gap-default: var(--rt-space-sm);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-dynamic-selector-list-row-padding-end, 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:
|
|
107
107
|
// Angular
|
|
108
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:
|
|
109
109
|
// CDK
|
|
@@ -128,7 +128,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
|
|
|
128
128
|
RtIconButtonComponent,
|
|
129
129
|
RtInputComponent,
|
|
130
130
|
RtTooltipDirective,
|
|
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"] }]
|
|
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);--rt-dynamic-selector-list-actions-gap-default: var(--rt-space-2xs);--rt-dynamic-selector-list-controls-gap-default: var(--rt-space-2xs);--rt-dynamic-selector-list-controls-divider-width-default: 0;--rt-dynamic-selector-list-controls-divider-color-default: var(--rt-color-border-default);--rt-dynamic-selector-list-row-padding-end-default: var(--rt-space-2xs);--rt-dynamic-selector-list-actions-offset-default: var(--rt-space-2xs);--rt-dynamic-selector-list-actions-padding-end-default: 0;--rt-dynamic-selector-list-handle-padding-start-default: 0;--rt-dynamic-selector-list-handle-padding-end-default: var(--rt-space-2xs);--rt-dynamic-selector-list-title-gap-default: var(--rt-space-sm);display:flex;flex-direction:column;gap:var(--rt-dynamic-selector-list-actions-offset, var(--rt-dynamic-selector-list-actions-offset-default))}.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-dynamic-selector-list-row-padding-end, var(--rt-dynamic-selector-list-row-padding-end-default)) 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;margin-inline-end:calc(var(--rt-dynamic-selector-list-title-gap, var(--rt-dynamic-selector-list-title-gap-default)) - var(--rt-space-sm));padding-inline:var(--rt-dynamic-selector-list-handle-padding-start, var(--rt-dynamic-selector-list-handle-padding-start-default)) var(--rt-dynamic-selector-list-handle-padding-end, var(--rt-dynamic-selector-list-handle-padding-end-default))}.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-dynamic-selector-list-controls-gap, var(--rt-dynamic-selector-list-controls-gap-default))}.rt-dynamic-selector-list__controls>:not(:last-child){border-inline-end:var(--rt-dynamic-selector-list-controls-divider-width, var(--rt-dynamic-selector-list-controls-divider-width-default)) solid var(--rt-dynamic-selector-list-controls-divider-color, var(--rt-dynamic-selector-list-controls-divider-color-default))}.rt-dynamic-selector-list__actions{display:flex;align-items:center;gap:var(--rt-dynamic-selector-list-actions-gap, var(--rt-dynamic-selector-list-actions-gap-default));padding-inline-end:var(--rt-dynamic-selector-list-actions-padding-end, var(--rt-dynamic-selector-list-actions-padding-end-default))}.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);--rt-dynamic-selector-list-actions-gap-default: var(--rt-space-2xs);--rt-dynamic-selector-list-controls-gap-default: var(--rt-space-2xs);--rt-dynamic-selector-list-controls-divider-width-default: 0;--rt-dynamic-selector-list-controls-divider-color-default: var(--rt-color-border-default);--rt-dynamic-selector-list-row-padding-end-default: var(--rt-space-2xs);--rt-dynamic-selector-list-actions-offset-default: var(--rt-space-2xs);--rt-dynamic-selector-list-actions-padding-end-default: 0;--rt-dynamic-selector-list-handle-padding-start-default: 0;--rt-dynamic-selector-list-handle-padding-end-default: var(--rt-space-2xs);--rt-dynamic-selector-list-title-gap-default: var(--rt-space-sm);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-dynamic-selector-list-row-padding-end, 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
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"] }] } });
|
|
133
133
|
|
|
134
134
|
/**
|
|
@@ -192,6 +192,35 @@ function dynamicSelectorMatches(label, query) {
|
|
|
192
192
|
const text = label.toLowerCase();
|
|
193
193
|
return words.every((word) => text.includes(word));
|
|
194
194
|
}
|
|
195
|
+
/**
|
|
196
|
+
* Подпись, разрезанная по словам запроса: совпавшие куски помечены. Слова ищутся так же, как при
|
|
197
|
+
* отборе, — без учёта регистра и везде, где встречаются; пересёкшиеся совпадения сливаются в один
|
|
198
|
+
* кусок. Подпись, длина которой меняется от смены регистра, остаётся одним куском без отметки.
|
|
199
|
+
*/
|
|
200
|
+
function dynamicMatchParts(label, query) {
|
|
201
|
+
const words = query.toLowerCase().trim().split(/\s+/).filter(Boolean);
|
|
202
|
+
const text = label.toLowerCase();
|
|
203
|
+
if (words.length === 0 || label === '' || text.length !== label.length) {
|
|
204
|
+
return [{ text: label, matched: false }];
|
|
205
|
+
}
|
|
206
|
+
const marks = Array.from({ length: label.length }, () => false);
|
|
207
|
+
for (const word of words) {
|
|
208
|
+
let from = text.indexOf(word);
|
|
209
|
+
while (from !== -1) {
|
|
210
|
+
marks.fill(true, from, from + word.length);
|
|
211
|
+
from = text.indexOf(word, from + 1);
|
|
212
|
+
}
|
|
213
|
+
}
|
|
214
|
+
const parts = [];
|
|
215
|
+
let start = 0;
|
|
216
|
+
for (let index = 1; index <= label.length; index++) {
|
|
217
|
+
if (index === label.length || marks[index] !== marks[start]) {
|
|
218
|
+
parts.push({ text: label.slice(start, index), matched: marks[start] });
|
|
219
|
+
start = index;
|
|
220
|
+
}
|
|
221
|
+
}
|
|
222
|
+
return parts;
|
|
223
|
+
}
|
|
195
224
|
/**
|
|
196
225
|
* Пункты, которые можно выбрать: без уже выбранных, без пунктов без подписи и, если запрос есть,
|
|
197
226
|
* только совпавшие. Порядок — функция сортировки приложения, а без неё — по алфавиту подписи.
|
|
@@ -292,6 +321,19 @@ function dynamicPopupRows(offered, found, ticked, keyOf, query) {
|
|
|
292
321
|
.filter((item) => item !== undefined);
|
|
293
322
|
return { ticked: tickedRows, found: found.filter((item) => !ticked.includes(keyOf(item))) };
|
|
294
323
|
}
|
|
324
|
+
/**
|
|
325
|
+
* Подпись в заданном регистре. «title» ставит заглавную в начало каждого слова, а остальные буквы
|
|
326
|
+
* слова строчными: «SUBMIT FORM» и «submit form» обе становятся «Submit Form».
|
|
327
|
+
*/
|
|
328
|
+
function dynamicLabelCase(label, labelCase) {
|
|
329
|
+
if (labelCase === 'upper') {
|
|
330
|
+
return label.toLocaleUpperCase();
|
|
331
|
+
}
|
|
332
|
+
if (labelCase === 'title') {
|
|
333
|
+
return label.replace(/\S+/g, (word) => word.charAt(0).toLocaleUpperCase() + word.slice(1).toLocaleLowerCase());
|
|
334
|
+
}
|
|
335
|
+
return label;
|
|
336
|
+
}
|
|
295
337
|
|
|
296
338
|
const BEM_BLOCK$2 = 'rt-dynamic-input';
|
|
297
339
|
/**
|
|
@@ -496,7 +538,7 @@ class RtDynamicInputComponent extends RtFormControlBase {
|
|
|
496
538
|
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: [
|
|
497
539
|
// Алиас базового токена — для contentChild(RtFormControlBase) в rt-field.
|
|
498
540
|
{ provide: RtFormControlBase, useExisting: forwardRef(() => RtDynamicInputComponent) },
|
|
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
|
|
541
|
+
], 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 <!-- \u041F\u043E\u0434 \u043F\u0440\u0438\u0433\u043B\u0430\u0448\u0435\u043D\u0438\u0435\u043C \u043F\u0443\u0441\u0442\u043E\u0439 \u0441\u043F\u0438\u0441\u043E\u043A \u043D\u0435 \u0440\u0438\u0441\u0443\u0435\u0442\u0441\u044F: \u0443\u0437\u0435\u043B \u043D\u0443\u043B\u0435\u0432\u043E\u0439 \u0432\u044B\u0441\u043E\u0442\u044B \u0441\u0434\u0432\u0438\u0433\u0430\u043B \u0431\u044B \u043F\u0440\u0438\u0433\u043B\u0430\u0448\u0435\u043D\u0438\u0435 \u0437\u0430\u0437\u043E\u0440\u043E\u043C. -->\n @if (rows().length > 0 || !isInvitationShown()) {\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\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{min-width:0}}\n"], dependencies: [{ kind: "ngmodule", type:
|
|
500
542
|
// Angular
|
|
501
543
|
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:
|
|
502
544
|
// standalone components / directives
|
|
@@ -518,7 +560,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
|
|
|
518
560
|
], providers: [
|
|
519
561
|
// Алиас базового токена — для contentChild(RtFormControlBase) в rt-field.
|
|
520
562
|
{ provide: RtFormControlBase, useExisting: forwardRef(() => RtDynamicInputComponent) },
|
|
521
|
-
], host: { class: BEM_BLOCK$2 }, template: "<ng-container rtBlock=\"rt-dynamic-input\">\n <rt-dynamic-selector-list\n
|
|
563
|
+
], host: { class: BEM_BLOCK$2 }, template: "<ng-container rtBlock=\"rt-dynamic-input\">\n <!-- \u041F\u043E\u0434 \u043F\u0440\u0438\u0433\u043B\u0430\u0448\u0435\u043D\u0438\u0435\u043C \u043F\u0443\u0441\u0442\u043E\u0439 \u0441\u043F\u0438\u0441\u043E\u043A \u043D\u0435 \u0440\u0438\u0441\u0443\u0435\u0442\u0441\u044F: \u0443\u0437\u0435\u043B \u043D\u0443\u043B\u0435\u0432\u043E\u0439 \u0432\u044B\u0441\u043E\u0442\u044B \u0441\u0434\u0432\u0438\u0433\u0430\u043B \u0431\u044B \u043F\u0440\u0438\u0433\u043B\u0430\u0448\u0435\u043D\u0438\u0435 \u0437\u0430\u0437\u043E\u0440\u043E\u043C. -->\n @if (rows().length > 0 || !isInvitationShown()) {\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\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{min-width:0}}\n"] }]
|
|
522
564
|
}], 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"] }] } });
|
|
523
565
|
|
|
524
566
|
const BEM_BLOCK$1 = 'rt-dynamic-selector-popup';
|
|
@@ -532,8 +574,10 @@ const RT_DYNAMIC_SELECTOR_SEARCH_DEBOUNCE = 500;
|
|
|
532
574
|
class RtDynamicSelectorPopupComponent {
|
|
533
575
|
constructor() {
|
|
534
576
|
this.#destroyRef = inject(DestroyRef);
|
|
577
|
+
this.#injector = inject(Injector);
|
|
535
578
|
this.#searchSource = new Subject();
|
|
536
579
|
this.searchLabel = rtKitLabel('dynamicSelectorSearch');
|
|
580
|
+
this.searchField = viewChild('searchField', { ...(ngDevMode ? { debugName: "searchField" } : /* istanbul ignore next */ {}), read: ElementRef });
|
|
537
581
|
this.selectAllLabel = rtKitLabel('uiSelectAll');
|
|
538
582
|
this.multiLabel = rtKitLabel('dynamicSelectorMulti');
|
|
539
583
|
this.multiHintLabel = rtKitLabel('dynamicSelectorMultiHint');
|
|
@@ -542,10 +586,16 @@ class RtDynamicSelectorPopupComponent {
|
|
|
542
586
|
this.emptyText = computed(() => this.emptyResultsText() || this.noResultsLabel(), /* @ts-ignore */
|
|
543
587
|
...(ngDevMode ? [{ debugName: "emptyText" }] : /* istanbul ignore next */ []));
|
|
544
588
|
this.cancelLabel = rtKitLabel('uiCancel');
|
|
545
|
-
this.
|
|
589
|
+
this.applyKitLabel = rtKitLabel('dynamicSelectorApply');
|
|
590
|
+
/** Подпись кнопки применения: своя у приложения, иначе словарь кита, — в заданном регистре. */
|
|
591
|
+
this.applyText = computed(() => dynamicLabelCase(this.applyLabel() || this.applyKitLabel(), this.applyLabelCase()), /* @ts-ignore */
|
|
592
|
+
...(ngDevMode ? [{ debugName: "applyText" }] : /* istanbul ignore next */ []));
|
|
546
593
|
/** Отмеченные ключи — ещё не применённые. */
|
|
547
594
|
this.ticked = signal([], /* @ts-ignore */
|
|
548
595
|
...(ngDevMode ? [{ debugName: "ticked" }] : /* istanbul ignore next */ []));
|
|
596
|
+
/** Отметки на минуту последней смены запроса: только они стоят над разделителем, отмеченное потом — на месте. */
|
|
597
|
+
this.raised = signal([], /* @ts-ignore */
|
|
598
|
+
...(ngDevMode ? [{ debugName: "raised" }] : /* istanbul ignore next */ []));
|
|
549
599
|
this.query = signal('', /* @ts-ignore */
|
|
550
600
|
...(ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []));
|
|
551
601
|
/** Выбор нескольких включён: без него простое нажатие оставляет одну отметку. */
|
|
@@ -563,7 +613,7 @@ class RtDynamicSelectorPopupComponent {
|
|
|
563
613
|
});
|
|
564
614
|
}, /* @ts-ignore */
|
|
565
615
|
...(ngDevMode ? [{ debugName: "found" }] : /* istanbul ignore next */ []));
|
|
566
|
-
this.rows = computed(() => dynamicPopupRows(this.entities(), this.found(), this.
|
|
616
|
+
this.rows = computed(() => dynamicPopupRows(this.entities(), this.found(), this.raised(), (item) => this.#keyOf(item), this.query()), /* @ts-ignore */
|
|
567
617
|
...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
|
|
568
618
|
this.visibleKeys = computed(() => [...this.rows().ticked, ...this.rows().found].map((item) => this.#keyOf(item)), /* @ts-ignore */
|
|
569
619
|
...(ngDevMode ? [{ debugName: "visibleKeys" }] : /* istanbul ignore next */ []));
|
|
@@ -572,10 +622,14 @@ class RtDynamicSelectorPopupComponent {
|
|
|
572
622
|
const ticked = this.ticked();
|
|
573
623
|
const lastPinned = this.lastPinnedKey();
|
|
574
624
|
const { ticked: above, found } = this.rows();
|
|
625
|
+
const highlight = this.highlightSearch();
|
|
626
|
+
const query = this.query();
|
|
627
|
+
const labelOf = (item) => dynamicSelectorLabel(item, (entity) => this.#labelOf(entity)) ?? '';
|
|
575
628
|
const toRow = (item, separated) => ({
|
|
576
629
|
entity: item,
|
|
577
630
|
key: this.#keyOf(item),
|
|
578
|
-
label:
|
|
631
|
+
label: labelOf(item),
|
|
632
|
+
parts: highlight ? dynamicMatchParts(labelOf(item), query) : [{ text: labelOf(item), matched: false }],
|
|
579
633
|
ticked: ticked.includes(this.#keyOf(item)),
|
|
580
634
|
separated,
|
|
581
635
|
});
|
|
@@ -585,6 +639,9 @@ class RtDynamicSelectorPopupComponent {
|
|
|
585
639
|
];
|
|
586
640
|
}, /* @ts-ignore */
|
|
587
641
|
...(ngDevMode ? [{ debugName: "rowItems" }] : /* istanbul ignore next */ []));
|
|
642
|
+
/** Подпись выбора одной записи рисует окно, а не кнопка: без переноса и при подсветке поиска. */
|
|
643
|
+
this.ownLabel = computed(() => !this.titleWrap() || this.highlightSearch(), /* @ts-ignore */
|
|
644
|
+
...(ngDevMode ? [{ debugName: "ownLabel" }] : /* istanbul ignore next */ []));
|
|
588
645
|
this.hasRows = computed(() => this.visibleKeys().length > 0, /* @ts-ignore */
|
|
589
646
|
...(ngDevMode ? [{ debugName: "hasRows" }] : /* istanbul ignore next */ []));
|
|
590
647
|
this.selectAllState = computed(() => dynamicSelectAllState(this.visibleKeys(), this.ticked()), /* @ts-ignore */
|
|
@@ -608,6 +665,9 @@ class RtDynamicSelectorPopupComponent {
|
|
|
608
665
|
...(ngDevMode ? [{ debugName: "keyExp" }] : /* istanbul ignore next */ []));
|
|
609
666
|
this.displayExp = input.required(/* @ts-ignore */
|
|
610
667
|
...(ngDevMode ? [{ debugName: "displayExp" }] : /* istanbul ignore next */ []));
|
|
668
|
+
/** Подпись записи для строки, пункта окна и поиска; не задана — поле `displayExp`. */
|
|
669
|
+
this.displayWith = input(null, /* @ts-ignore */
|
|
670
|
+
...(ngDevMode ? [{ debugName: "displayWith" }] : /* istanbul ignore next */ []));
|
|
611
671
|
this.mode = input('multi', /* @ts-ignore */
|
|
612
672
|
...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
|
|
613
673
|
this.multiToggleShown = input(false, { ...(ngDevMode ? { debugName: "multiToggleShown" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
@@ -628,9 +688,24 @@ class RtDynamicSelectorPopupComponent {
|
|
|
628
688
|
/** Вид поля поиска — тот же вход, что у поля кита. */
|
|
629
689
|
this.searchAppearance = input('outline', /* @ts-ignore */
|
|
630
690
|
...(ngDevMode ? [{ debugName: "searchAppearance" }] : /* istanbul ignore next */ []));
|
|
691
|
+
/** Шаг скругления поля поиска; null — скругление самого поля. */
|
|
692
|
+
this.searchRadius = input(null, /* @ts-ignore */
|
|
693
|
+
...(ngDevMode ? [{ debugName: "searchRadius" }] : /* istanbul ignore next */ []));
|
|
631
694
|
/** Подпись пустого результата поиска; пустая строка оставляет подпись кита. */
|
|
632
695
|
this.emptyResultsText = input('', /* @ts-ignore */
|
|
633
696
|
...(ngDevMode ? [{ debugName: "emptyResultsText" }] : /* istanbul ignore next */ []));
|
|
697
|
+
/** Подпись кнопки применения; пустая строка оставляет подпись кита. */
|
|
698
|
+
this.applyLabel = input('', /* @ts-ignore */
|
|
699
|
+
...(ngDevMode ? [{ debugName: "applyLabel" }] : /* istanbul ignore next */ []));
|
|
700
|
+
/** Регистр подписи кнопки применения; `none` оставляет её как есть. */
|
|
701
|
+
this.applyLabelCase = input('none', /* @ts-ignore */
|
|
702
|
+
...(ngDevMode ? [{ debugName: "applyLabelCase" }] : /* istanbul ignore next */ []));
|
|
703
|
+
/** Поле поиска получает фокус при открытии окна; по умолчанию фокус остаётся там, где был. */
|
|
704
|
+
this.autofocusSearch = input(false, { ...(ngDevMode ? { debugName: "autofocusSearch" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
705
|
+
/** Подпись пункта переносится; `false` ведёт её одной строкой с многоточием и подсказкой при обрезке. */
|
|
706
|
+
this.titleWrap = input(true, { ...(ngDevMode ? { debugName: "titleWrap" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
707
|
+
/** Символы подписи пункта, совпавшие со словами поиска, выделены. */
|
|
708
|
+
this.highlightSearch = input(false, { ...(ngDevMode ? { debugName: "highlightSearch" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
634
709
|
/** Применённые ключи в порядке отметок. */
|
|
635
710
|
this.applied = output();
|
|
636
711
|
this.cancelled = output();
|
|
@@ -641,6 +716,7 @@ class RtDynamicSelectorPopupComponent {
|
|
|
641
716
|
this.temporaryChoiceChange = output();
|
|
642
717
|
}
|
|
643
718
|
#destroyRef;
|
|
719
|
+
#injector;
|
|
644
720
|
#searchSource;
|
|
645
721
|
ngOnInit() {
|
|
646
722
|
// Выбор живёт в шаблоне и создаётся заново при каждом открытии: запрос начинается с входа.
|
|
@@ -649,9 +725,15 @@ class RtDynamicSelectorPopupComponent {
|
|
|
649
725
|
this.#searchSource
|
|
650
726
|
.pipe(debounceTime(RT_DYNAMIC_SELECTOR_SEARCH_DEBOUNCE), takeUntilDestroyed(this.#destroyRef))
|
|
651
727
|
.subscribe((query) => this.searchChange.emit(query));
|
|
728
|
+
if (this.autofocusSearch()) {
|
|
729
|
+
afterNextRender(() => this.searchField()?.nativeElement.querySelector('input')?.focus({ preventScroll: true }), {
|
|
730
|
+
injector: this.#injector,
|
|
731
|
+
});
|
|
732
|
+
}
|
|
652
733
|
}
|
|
653
734
|
onQueryChange(value) {
|
|
654
735
|
const query = value ?? '';
|
|
736
|
+
this.raised.set([...this.ticked()]);
|
|
655
737
|
this.query.set(query);
|
|
656
738
|
this.temporaryChoiceChange.emit(this.#tickedEntities());
|
|
657
739
|
if (!this.localSearch()) {
|
|
@@ -693,12 +775,13 @@ class RtDynamicSelectorPopupComponent {
|
|
|
693
775
|
}
|
|
694
776
|
/** Подпись записи — по имени поля, которое назвал вызывающий. */
|
|
695
777
|
#labelOf(item) {
|
|
696
|
-
|
|
778
|
+
const displayWith = this.displayWith();
|
|
779
|
+
return displayWith === null ? item[this.displayExp()] : displayWith(item);
|
|
697
780
|
}
|
|
698
781
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtDynamicSelectorPopupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
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:
|
|
782
|
+
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 }, displayWith: { classPropertyName: "displayWith", publicName: "displayWith", isSignal: true, isRequired: false, 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 }, searchRadius: { classPropertyName: "searchRadius", publicName: "searchRadius", isSignal: true, isRequired: false, transformFunction: null }, emptyResultsText: { classPropertyName: "emptyResultsText", publicName: "emptyResultsText", isSignal: true, isRequired: false, transformFunction: null }, applyLabel: { classPropertyName: "applyLabel", publicName: "applyLabel", isSignal: true, isRequired: false, transformFunction: null }, applyLabelCase: { classPropertyName: "applyLabelCase", publicName: "applyLabelCase", isSignal: true, isRequired: false, transformFunction: null }, autofocusSearch: { classPropertyName: "autofocusSearch", publicName: "autofocusSearch", isSignal: true, isRequired: false, transformFunction: null }, titleWrap: { classPropertyName: "titleWrap", publicName: "titleWrap", isSignal: true, isRequired: false, transformFunction: null }, highlightSearch: { classPropertyName: "highlightSearch", publicName: "highlightSearch", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { applied: "applied", cancelled: "cancelled", searchChange: "searchChange", loadMore: "loadMore", temporaryChoiceChange: "temporaryChoiceChange" }, host: { classAttribute: "rt-dynamic-selector-popup" }, viewQueries: [{ propertyName: "searchField", first: true, predicate: ["searchField"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<ng-container rtBlock=\"rt-dynamic-selector-popup\">\n <div rtElem=\"head\">\n <rt-input\n #searchField\n rtElem=\"search\"\n qa-dataid=\"dynamic-selector-search\"\n iconLeft=\"search\"\n [appearance]=\"searchAppearance()\"\n [radius]=\"searchRadius()\"\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, nowrap: !titleWrap(), own: isSingle() && ownLabel() }\">\n @if (isSingle()) {\n <!-- \u0411\u0435\u0437 \u043F\u0435\u0440\u0435\u043D\u043E\u0441\u0430 \u0438 \u043F\u0440\u0438 \u043F\u043E\u0434\u0441\u0432\u0435\u0442\u043A\u0435 \u043F\u043E\u0438\u0441\u043A\u0430 \u043F\u043E\u0434\u043F\u0438\u0441\u044C \u0440\u0438\u0441\u0443\u0435\u0442 \u043E\u043A\u043D\u043E \u0440\u044F\u0434\u043E\u043C \u0441 \u043A\u043D\u043E\u043F\u043A\u043E\u0439: \u043F\u043E\u0434\u0441\u043A\u0430\u0437\u043A\u0430\n \u043C\u0435\u0440\u044F\u0435\u0442 \u043E\u0431\u0440\u0435\u0437\u043A\u0443 \u0441\u0432\u043E\u0435\u0433\u043E \u0443\u0437\u043B\u0430, \u0430 \u043F\u043E\u0434\u043F\u0438\u0441\u044C \u0432\u043D\u0443\u0442\u0440\u0438 \u043A\u043D\u043E\u043F\u043A\u0438 \u043E\u043A\u043D\u0443 \u043D\u0435\u0434\u043E\u0441\u0442\u0443\u043F\u043D\u0430. -->\n <rt-radio-button\n rtElem=\"option\"\n qa-dataid=\"dynamic-selector-option\"\n [value]=\"row.key\"\n [checked]=\"row.ticked\"\n [label]=\"ownLabel() ? '' : row.label\"\n [ariaLabel]=\"ownLabel() ? row.label : null\"\n [rtMod]=\"{ fixed: ownLabel() }\"\n (checkedChange)=\"onRadioChange(row.entity)\" />\n @if (ownLabel()) {\n <!-- \u0424\u043E\u043A\u0443\u0441 \u0438 \u043A\u043B\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u0430 \u043E\u0441\u0442\u0430\u044E\u0442\u0441\u044F \u043D\u0430 \u043A\u043D\u043E\u043F\u043A\u0435: \u043E\u043D\u0430 \u043D\u0430\u0437\u0432\u0430\u043D\u0430 \u044D\u0442\u043E\u0439 \u0436\u0435 \u043F\u043E\u0434\u043F\u0438\u0441\u044C\u044E, \u0430 \u043F\u043E\u0434\u043F\u0438\u0441\u044C \u0434\u0430\u0451\u0442 \u043D\u0430\u0436\u0430\u0442\u044C \u043C\u044B\u0448\u044C\u044E, \u043A\u0430\u043A label. -->\n <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n <span\n rtElem=\"option-label\"\n qa-dataid=\"dynamic-selector-option-label\"\n rtTooltipWhenTruncated\n [rtTooltip]=\"titleWrap() ? '' : row.label\"\n (click)=\"onRadioChange(row.entity)\">\n <ng-container *ngTemplateOutlet=\"labelParts; context: { $implicit: row.parts }\" />\n </span>\n }\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 <span\n rtElem=\"option-label\"\n qa-dataid=\"dynamic-selector-option-label\"\n rtTooltipWhenTruncated\n [rtTooltip]=\"titleWrap() ? '' : row.label\">\n <ng-container *ngTemplateOutlet=\"labelParts; context: { $implicit: row.parts }\" />\n </span>\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]=\"applyText()\"\n [attr.aria-label]=\"applyText()\"\n [disabled]=\"isApplyDisabled()\"\n (click)=\"onApply()\"></button>\n </div>\n </div>\n\n <!-- \u041A\u0443\u0441\u043A\u0438 \u043F\u043E\u0434\u043F\u0438\u0441\u0438 \u0441\u0442\u043E\u044F\u0442 \u0431\u0435\u0437 \u043F\u0440\u043E\u0431\u0435\u043B\u043E\u0432 \u043C\u0435\u0436\u0434\u0443 \u0441\u043E\u0431\u043E\u0439: \u043F\u0440\u043E\u0431\u0435\u043B \u0432 \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0435 \u0440\u0430\u0437\u043E\u0440\u0432\u0430\u043B \u0431\u044B \u0441\u043B\u043E\u0432\u043E \u043D\u0430 \u043F\u043E\u0434\u0441\u0432\u0435\u0447\u0435\u043D\u043D\u043E\u0439 \u0433\u0440\u0430\u043D\u0438\u0446\u0435. -->\n <!-- prettier-ignore -->\n <ng-template #labelParts let-parts>@for (part of parts; track $index) {@if (part.matched) {<mark rtElem=\"match\">{{ part.text }}</mark>} @else {{{ part.text }}}}</ng-template>\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);--rt-dynamic-selector-popup-highlight-color-default: var(--rt-color-text-primary);--rt-dynamic-selector-popup-highlight-weight-default: var(--rt-font-weight-semibold);--rt-dynamic-selector-popup-highlight-bg-default: transparent;--rt-dynamic-selector-popup-highlight-radius-default: 0;--rt-dynamic-selector-popup-option-line-height-default: normal;--rt-dynamic-selector-popup-option-min-height-default: 0;--rt-dynamic-selector-popup-empty-gap-default: calc(var(--rt-space-xs) + var(--rt-space-sm));--rt-dynamic-selector-popup-foot-padding-default: var(--rt-space-sm) var(--rt-dynamic-selector-popup-padding, var(--rt-dynamic-selector-popup-padding-default)) 0;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 .rt-dynamic-selector-popup__multi-hint-icon{display:none}}.rt-dynamic-selector-popup__select-all{min-width:0}.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__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__icon-wrap{margin-bottom:calc(var(--rt-dynamic-selector-popup-empty-gap, var(--rt-dynamic-selector-popup-empty-gap-default)) - var(--rt-space-sm))}.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;padding:var(--rt-dynamic-selector-popup-foot-padding, var(--rt-dynamic-selector-popup-foot-padding-default));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)}.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", "@charset \"UTF-8\";@layer rt-kit.components{.rt-dynamic-selector-popup__row{display:flex;min-height:var(--rt-dynamic-selector-popup-option-min-height, var(--rt-dynamic-selector-popup-option-min-height-default));box-sizing:border-box;flex-direction:column;justify-content:center;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__option-label{overflow-wrap:anywhere}.rt-dynamic-selector-popup__option-label,.rt-dynamic-selector-popup__option .rt-checkbox__label,.rt-dynamic-selector-popup__option .rt-radio-button__label{line-height:var(--rt-dynamic-selector-popup-option-line-height, var(--rt-dynamic-selector-popup-option-line-height-default))}.rt-dynamic-selector-popup__row--nowrap{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--rt-space-sm)}.rt-dynamic-selector-popup__row--nowrap .rt-dynamic-selector-popup__option{min-width:0;max-width:100%}.rt-dynamic-selector-popup__row--own{display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start;gap:var(--rt-space-sm)}.rt-dynamic-selector-popup__option--fixed{flex:0 0 auto}.rt-dynamic-selector-popup__row--own .rt-dynamic-selector-popup__option-label{min-width:0;flex:1 1 auto;color:var(--rt-color-text-primary);cursor:pointer;font-size:var(--rt-text-sm);-webkit-user-select:none;user-select:none}.rt-dynamic-selector-popup__match{border-radius:var(--rt-dynamic-selector-popup-highlight-radius, var(--rt-dynamic-selector-popup-highlight-radius-default));background:var(--rt-dynamic-selector-popup-highlight-bg, var(--rt-dynamic-selector-popup-highlight-bg-default));color:var(--rt-dynamic-selector-popup-highlight-color, var(--rt-dynamic-selector-popup-highlight-color-default));font-weight:var(--rt-dynamic-selector-popup-highlight-weight, var(--rt-dynamic-selector-popup-highlight-weight-default))}.rt-dynamic-selector-popup__row--nowrap .rt-dynamic-selector-popup__option .rt-checkbox{max-width:100%}.rt-dynamic-selector-popup__row--nowrap .rt-dynamic-selector-popup__option .rt-checkbox__label{overflow:hidden;min-width:0}.rt-dynamic-selector-popup__row--nowrap .rt-dynamic-selector-popup__option-label{display:block;overflow:hidden;min-width:0;flex:1 1 auto;font-size:var(--rt-text-sm);text-overflow:ellipsis;white-space:nowrap}}\n"], dependencies: [{ kind: "ngmodule", type:
|
|
700
783
|
// Angular
|
|
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:
|
|
784
|
+
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: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type:
|
|
702
785
|
// standalone components / directives
|
|
703
786
|
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 }); }
|
|
704
787
|
}
|
|
@@ -707,6 +790,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
|
|
|
707
790
|
args: [{ selector: 'rt-dynamic-selector-popup', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
|
|
708
791
|
// Angular
|
|
709
792
|
FormsModule,
|
|
793
|
+
NgTemplateOutlet,
|
|
710
794
|
RouterLink,
|
|
711
795
|
// standalone components / directives
|
|
712
796
|
BlockDirective,
|
|
@@ -722,8 +806,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
|
|
|
722
806
|
RtSpinnerComponent,
|
|
723
807
|
RtToggleSwitchComponent,
|
|
724
808
|
RtTooltipDirective,
|
|
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"] }] } });
|
|
809
|
+
], host: { class: BEM_BLOCK$1 }, template: "<ng-container rtBlock=\"rt-dynamic-selector-popup\">\n <div rtElem=\"head\">\n <rt-input\n #searchField\n rtElem=\"search\"\n qa-dataid=\"dynamic-selector-search\"\n iconLeft=\"search\"\n [appearance]=\"searchAppearance()\"\n [radius]=\"searchRadius()\"\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, nowrap: !titleWrap(), own: isSingle() && ownLabel() }\">\n @if (isSingle()) {\n <!-- \u0411\u0435\u0437 \u043F\u0435\u0440\u0435\u043D\u043E\u0441\u0430 \u0438 \u043F\u0440\u0438 \u043F\u043E\u0434\u0441\u0432\u0435\u0442\u043A\u0435 \u043F\u043E\u0438\u0441\u043A\u0430 \u043F\u043E\u0434\u043F\u0438\u0441\u044C \u0440\u0438\u0441\u0443\u0435\u0442 \u043E\u043A\u043D\u043E \u0440\u044F\u0434\u043E\u043C \u0441 \u043A\u043D\u043E\u043F\u043A\u043E\u0439: \u043F\u043E\u0434\u0441\u043A\u0430\u0437\u043A\u0430\n \u043C\u0435\u0440\u044F\u0435\u0442 \u043E\u0431\u0440\u0435\u0437\u043A\u0443 \u0441\u0432\u043E\u0435\u0433\u043E \u0443\u0437\u043B\u0430, \u0430 \u043F\u043E\u0434\u043F\u0438\u0441\u044C \u0432\u043D\u0443\u0442\u0440\u0438 \u043A\u043D\u043E\u043F\u043A\u0438 \u043E\u043A\u043D\u0443 \u043D\u0435\u0434\u043E\u0441\u0442\u0443\u043F\u043D\u0430. -->\n <rt-radio-button\n rtElem=\"option\"\n qa-dataid=\"dynamic-selector-option\"\n [value]=\"row.key\"\n [checked]=\"row.ticked\"\n [label]=\"ownLabel() ? '' : row.label\"\n [ariaLabel]=\"ownLabel() ? row.label : null\"\n [rtMod]=\"{ fixed: ownLabel() }\"\n (checkedChange)=\"onRadioChange(row.entity)\" />\n @if (ownLabel()) {\n <!-- \u0424\u043E\u043A\u0443\u0441 \u0438 \u043A\u043B\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u0430 \u043E\u0441\u0442\u0430\u044E\u0442\u0441\u044F \u043D\u0430 \u043A\u043D\u043E\u043F\u043A\u0435: \u043E\u043D\u0430 \u043D\u0430\u0437\u0432\u0430\u043D\u0430 \u044D\u0442\u043E\u0439 \u0436\u0435 \u043F\u043E\u0434\u043F\u0438\u0441\u044C\u044E, \u0430 \u043F\u043E\u0434\u043F\u0438\u0441\u044C \u0434\u0430\u0451\u0442 \u043D\u0430\u0436\u0430\u0442\u044C \u043C\u044B\u0448\u044C\u044E, \u043A\u0430\u043A label. -->\n <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n <span\n rtElem=\"option-label\"\n qa-dataid=\"dynamic-selector-option-label\"\n rtTooltipWhenTruncated\n [rtTooltip]=\"titleWrap() ? '' : row.label\"\n (click)=\"onRadioChange(row.entity)\">\n <ng-container *ngTemplateOutlet=\"labelParts; context: { $implicit: row.parts }\" />\n </span>\n }\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 <span\n rtElem=\"option-label\"\n qa-dataid=\"dynamic-selector-option-label\"\n rtTooltipWhenTruncated\n [rtTooltip]=\"titleWrap() ? '' : row.label\">\n <ng-container *ngTemplateOutlet=\"labelParts; context: { $implicit: row.parts }\" />\n </span>\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]=\"applyText()\"\n [attr.aria-label]=\"applyText()\"\n [disabled]=\"isApplyDisabled()\"\n (click)=\"onApply()\"></button>\n </div>\n </div>\n\n <!-- \u041A\u0443\u0441\u043A\u0438 \u043F\u043E\u0434\u043F\u0438\u0441\u0438 \u0441\u0442\u043E\u044F\u0442 \u0431\u0435\u0437 \u043F\u0440\u043E\u0431\u0435\u043B\u043E\u0432 \u043C\u0435\u0436\u0434\u0443 \u0441\u043E\u0431\u043E\u0439: \u043F\u0440\u043E\u0431\u0435\u043B \u0432 \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0435 \u0440\u0430\u0437\u043E\u0440\u0432\u0430\u043B \u0431\u044B \u0441\u043B\u043E\u0432\u043E \u043D\u0430 \u043F\u043E\u0434\u0441\u0432\u0435\u0447\u0435\u043D\u043D\u043E\u0439 \u0433\u0440\u0430\u043D\u0438\u0446\u0435. -->\n <!-- prettier-ignore -->\n <ng-template #labelParts let-parts>@for (part of parts; track $index) {@if (part.matched) {<mark rtElem=\"match\">{{ part.text }}</mark>} @else {{{ part.text }}}}</ng-template>\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);--rt-dynamic-selector-popup-highlight-color-default: var(--rt-color-text-primary);--rt-dynamic-selector-popup-highlight-weight-default: var(--rt-font-weight-semibold);--rt-dynamic-selector-popup-highlight-bg-default: transparent;--rt-dynamic-selector-popup-highlight-radius-default: 0;--rt-dynamic-selector-popup-option-line-height-default: normal;--rt-dynamic-selector-popup-option-min-height-default: 0;--rt-dynamic-selector-popup-empty-gap-default: calc(var(--rt-space-xs) + var(--rt-space-sm));--rt-dynamic-selector-popup-foot-padding-default: var(--rt-space-sm) var(--rt-dynamic-selector-popup-padding, var(--rt-dynamic-selector-popup-padding-default)) 0;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 .rt-dynamic-selector-popup__multi-hint-icon{display:none}}.rt-dynamic-selector-popup__select-all{min-width:0}.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__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__icon-wrap{margin-bottom:calc(var(--rt-dynamic-selector-popup-empty-gap, var(--rt-dynamic-selector-popup-empty-gap-default)) - var(--rt-space-sm))}.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;padding:var(--rt-dynamic-selector-popup-foot-padding, var(--rt-dynamic-selector-popup-foot-padding-default));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)}.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", "@charset \"UTF-8\";@layer rt-kit.components{.rt-dynamic-selector-popup__row{display:flex;min-height:var(--rt-dynamic-selector-popup-option-min-height, var(--rt-dynamic-selector-popup-option-min-height-default));box-sizing:border-box;flex-direction:column;justify-content:center;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__option-label{overflow-wrap:anywhere}.rt-dynamic-selector-popup__option-label,.rt-dynamic-selector-popup__option .rt-checkbox__label,.rt-dynamic-selector-popup__option .rt-radio-button__label{line-height:var(--rt-dynamic-selector-popup-option-line-height, var(--rt-dynamic-selector-popup-option-line-height-default))}.rt-dynamic-selector-popup__row--nowrap{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--rt-space-sm)}.rt-dynamic-selector-popup__row--nowrap .rt-dynamic-selector-popup__option{min-width:0;max-width:100%}.rt-dynamic-selector-popup__row--own{display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start;gap:var(--rt-space-sm)}.rt-dynamic-selector-popup__option--fixed{flex:0 0 auto}.rt-dynamic-selector-popup__row--own .rt-dynamic-selector-popup__option-label{min-width:0;flex:1 1 auto;color:var(--rt-color-text-primary);cursor:pointer;font-size:var(--rt-text-sm);-webkit-user-select:none;user-select:none}.rt-dynamic-selector-popup__match{border-radius:var(--rt-dynamic-selector-popup-highlight-radius, var(--rt-dynamic-selector-popup-highlight-radius-default));background:var(--rt-dynamic-selector-popup-highlight-bg, var(--rt-dynamic-selector-popup-highlight-bg-default));color:var(--rt-dynamic-selector-popup-highlight-color, var(--rt-dynamic-selector-popup-highlight-color-default));font-weight:var(--rt-dynamic-selector-popup-highlight-weight, var(--rt-dynamic-selector-popup-highlight-weight-default))}.rt-dynamic-selector-popup__row--nowrap .rt-dynamic-selector-popup__option .rt-checkbox{max-width:100%}.rt-dynamic-selector-popup__row--nowrap .rt-dynamic-selector-popup__option .rt-checkbox__label{overflow:hidden;min-width:0}.rt-dynamic-selector-popup__row--nowrap .rt-dynamic-selector-popup__option-label{display:block;overflow:hidden;min-width:0;flex:1 1 auto;font-size:var(--rt-text-sm);text-overflow:ellipsis;white-space:nowrap}}\n"] }]
|
|
810
|
+
}], propDecorators: { searchField: [{ type: i0.ViewChild, args: ['searchField', { ...{ read: ElementRef }, 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 }] }], displayWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayWith", required: false }] }], 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 }] }], searchRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchRadius", required: false }] }], emptyResultsText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyResultsText", required: false }] }], applyLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "applyLabel", required: false }] }], applyLabelCase: [{ type: i0.Input, args: [{ isSignal: true, alias: "applyLabelCase", required: false }] }], autofocusSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocusSearch", required: false }] }], titleWrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleWrap", required: false }] }], highlightSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlightSearch", 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"] }] } });
|
|
727
811
|
|
|
728
812
|
const BEM_BLOCK = 'rt-dynamic-selector';
|
|
729
813
|
/**
|
|
@@ -745,6 +829,11 @@ class RtDynamicSelectorComponent extends RtFormControlBase {
|
|
|
745
829
|
#clearIconDefault;
|
|
746
830
|
#titleWrapDefault;
|
|
747
831
|
#searchAppearanceDefault;
|
|
832
|
+
#searchRadiusDefault;
|
|
833
|
+
#highlightSearchDefault;
|
|
834
|
+
#applyLabelDefault;
|
|
835
|
+
#applyLabelCaseDefault;
|
|
836
|
+
#autofocusSearchDefault;
|
|
748
837
|
#emptyResultsTextDefault;
|
|
749
838
|
constructor() {
|
|
750
839
|
super();
|
|
@@ -757,6 +846,11 @@ class RtDynamicSelectorComponent extends RtFormControlBase {
|
|
|
757
846
|
this.#clearIconDefault = rtKitDefault('dynamicSelector', (it) => it.clearIcon, 'close');
|
|
758
847
|
this.#titleWrapDefault = rtKitDefault('dynamicSelector', (it) => it.titleWrap, true);
|
|
759
848
|
this.#searchAppearanceDefault = rtKitDefault('dynamicSelector', (it) => it.searchAppearance, 'outline');
|
|
849
|
+
this.#searchRadiusDefault = rtKitDefault('dynamicSelector', (it) => it.searchRadius, null);
|
|
850
|
+
this.#highlightSearchDefault = rtKitDefault('dynamicSelector', (it) => it.highlightSearch, false);
|
|
851
|
+
this.#applyLabelDefault = rtKitDefault('dynamicSelector', (it) => it.applyLabel, '');
|
|
852
|
+
this.#applyLabelCaseDefault = rtKitDefault('dynamicSelector', (it) => it.applyLabelCase, 'none');
|
|
853
|
+
this.#autofocusSearchDefault = rtKitDefault('dynamicSelector', (it) => it.autofocusSearch, false);
|
|
760
854
|
this.#emptyResultsTextDefault = rtKitDefault('dynamicSelector', (it) => it.emptyResultsText, '');
|
|
761
855
|
this.addLabel = rtKitLabel('dynamicSelectorAdd');
|
|
762
856
|
this.nothingToChooseLabel = rtKitLabel('dynamicSelectorNothingToChoose');
|
|
@@ -813,6 +907,9 @@ class RtDynamicSelectorComponent extends RtFormControlBase {
|
|
|
813
907
|
...(ngDevMode ? [{ debugName: "keyExp" }] : /* istanbul ignore next */ []));
|
|
814
908
|
this.displayExp = input.required(/* @ts-ignore */
|
|
815
909
|
...(ngDevMode ? [{ debugName: "displayExp" }] : /* istanbul ignore next */ []));
|
|
910
|
+
/** Подпись записи для строки, пункта окна и поиска; не задана — поле `displayExp`. */
|
|
911
|
+
this.displayWith = input(null, /* @ts-ignore */
|
|
912
|
+
...(ngDevMode ? [{ debugName: "displayWith" }] : /* istanbul ignore next */ []));
|
|
816
913
|
this.mode = input('multi', /* @ts-ignore */
|
|
817
914
|
...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
|
|
818
915
|
/** Название кнопки добавления; пустое — «Add» из словаря кита. */
|
|
@@ -864,9 +961,22 @@ class RtDynamicSelectorComponent extends RtFormControlBase {
|
|
|
864
961
|
/** Вид поля поиска в окне выбора. */
|
|
865
962
|
this.searchAppearance = input(this.#searchAppearanceDefault, /* @ts-ignore */
|
|
866
963
|
...(ngDevMode ? [{ debugName: "searchAppearance" }] : /* istanbul ignore next */ []));
|
|
964
|
+
/** Шаг скругления поля поиска в окне выбора; null — скругление самого поля. */
|
|
965
|
+
this.searchRadius = input(this.#searchRadiusDefault, /* @ts-ignore */
|
|
966
|
+
...(ngDevMode ? [{ debugName: "searchRadius" }] : /* istanbul ignore next */ []));
|
|
967
|
+
/** Символы подписи пункта окна выбора, совпавшие со словами поиска, выделены. */
|
|
968
|
+
this.highlightSearch = input(this.#highlightSearchDefault, { ...(ngDevMode ? { debugName: "highlightSearch" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
867
969
|
/** Подпись пустого результата поиска; пустая строка оставляет подпись кита. */
|
|
868
970
|
this.emptyResultsText = input(this.#emptyResultsTextDefault, /* @ts-ignore */
|
|
869
971
|
...(ngDevMode ? [{ debugName: "emptyResultsText" }] : /* istanbul ignore next */ []));
|
|
972
|
+
/** Подпись кнопки применения в окне выбора; пустая строка оставляет подпись кита. */
|
|
973
|
+
this.applyLabel = input(this.#applyLabelDefault, /* @ts-ignore */
|
|
974
|
+
...(ngDevMode ? [{ debugName: "applyLabel" }] : /* istanbul ignore next */ []));
|
|
975
|
+
/** Регистр подписи кнопки применения; `none` оставляет её как есть. */
|
|
976
|
+
this.applyLabelCase = input(this.#applyLabelCaseDefault, /* @ts-ignore */
|
|
977
|
+
...(ngDevMode ? [{ debugName: "applyLabelCase" }] : /* istanbul ignore next */ []));
|
|
978
|
+
/** Поле поиска получает фокус при открытии окна выбора. */
|
|
979
|
+
this.autofocusSearch = input(this.#autofocusSearchDefault, { ...(ngDevMode ? { debugName: "autofocusSearch" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
870
980
|
this.multiToggleShown = input(false, { ...(ngDevMode ? { debugName: "multiToggleShown" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
871
981
|
this.selectAllShown = input(true, { ...(ngDevMode ? { debugName: "selectAllShown" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
872
982
|
this.localSearch = input(true, { ...(ngDevMode ? { debugName: "localSearch" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
@@ -1001,15 +1111,16 @@ class RtDynamicSelectorComponent extends RtFormControlBase {
|
|
|
1001
1111
|
}
|
|
1002
1112
|
/** Подпись записи — по имени поля, которое назвал вызывающий. */
|
|
1003
1113
|
#labelOf(item) {
|
|
1004
|
-
|
|
1114
|
+
const displayWith = this.displayWith();
|
|
1115
|
+
return displayWith === null ? item[this.displayExp()] : displayWith(item);
|
|
1005
1116
|
}
|
|
1006
1117
|
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: [
|
|
1118
|
+
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 }, displayWith: { classPropertyName: "displayWith", publicName: "displayWith", isSignal: true, isRequired: false, 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 }, searchRadius: { classPropertyName: "searchRadius", publicName: "searchRadius", isSignal: true, isRequired: false, transformFunction: null }, highlightSearch: { classPropertyName: "highlightSearch", publicName: "highlightSearch", isSignal: true, isRequired: false, transformFunction: null }, emptyResultsText: { classPropertyName: "emptyResultsText", publicName: "emptyResultsText", isSignal: true, isRequired: false, transformFunction: null }, applyLabel: { classPropertyName: "applyLabel", publicName: "applyLabel", isSignal: true, isRequired: false, transformFunction: null }, applyLabelCase: { classPropertyName: "applyLabelCase", publicName: "applyLabelCase", isSignal: true, isRequired: false, transformFunction: null }, autofocusSearch: { classPropertyName: "autofocusSearch", publicName: "autofocusSearch", 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: [
|
|
1008
1119
|
// Алиас базового токена — для contentChild(RtFormControlBase) в rt-field.
|
|
1009
1120
|
{ provide: RtFormControlBase, useExisting: forwardRef(() => RtDynamicSelectorComponent) },
|
|
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
|
|
1121
|
+
], 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 <!-- \u041F\u043E\u0434 \u043F\u0440\u0438\u0433\u043B\u0430\u0448\u0435\u043D\u0438\u0435\u043C \u043F\u0443\u0441\u0442\u043E\u0439 \u0441\u043F\u0438\u0441\u043E\u043A \u043D\u0435 \u0440\u0438\u0441\u0443\u0435\u0442\u0441\u044F: \u0443\u0437\u0435\u043B \u043D\u0443\u043B\u0435\u0432\u043E\u0439 \u0432\u044B\u0441\u043E\u0442\u044B \u0441\u0434\u0432\u0438\u0433\u0430\u043B \u0431\u044B \u043F\u0440\u0438\u0433\u043B\u0430\u0448\u0435\u043D\u0438\u0435 \u0437\u0430\u0437\u043E\u0440\u043E\u043C. -->\n @if (rows().length > 0 || !invitation()) {\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\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 [displayWith]=\"displayWith()\"\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 [searchRadius]=\"searchRadius()\"\n [emptyResultsText]=\"emptyResultsText()\"\n [titleWrap]=\"titleWrap()\"\n [highlightSearch]=\"highlightSearch()\"\n [applyLabel]=\"applyLabel()\"\n [applyLabelCase]=\"applyLabelCase()\"\n [autofocusSearch]=\"autofocusSearch()\"\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{min-width:0}}\n"], dependencies: [{ kind: "directive", type:
|
|
1011
1122
|
// standalone components / directives
|
|
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 }); }
|
|
1123
|
+
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", "displayWith", "mode", "multiToggleShown", "selectAllShown", "localSearch", "lazyLoad", "loading", "fetching", "pinnedKeys", "navigateTitle", "navigateLink", "searchTerm", "searchAppearance", "searchRadius", "emptyResultsText", "applyLabel", "applyLabelCase", "autofocusSearch", "titleWrap", "highlightSearch"], 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 }); }
|
|
1013
1124
|
}
|
|
1014
1125
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtDynamicSelectorComponent, decorators: [{
|
|
1015
1126
|
type: Component,
|
|
@@ -1025,8 +1136,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
|
|
|
1025
1136
|
], providers: [
|
|
1026
1137
|
// Алиас базового токена — для contentChild(RtFormControlBase) в rt-field.
|
|
1027
1138
|
{ provide: RtFormControlBase, useExisting: forwardRef(() => RtDynamicSelectorComponent) },
|
|
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
|
|
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"] }] } });
|
|
1139
|
+
], 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 <!-- \u041F\u043E\u0434 \u043F\u0440\u0438\u0433\u043B\u0430\u0448\u0435\u043D\u0438\u0435\u043C \u043F\u0443\u0441\u0442\u043E\u0439 \u0441\u043F\u0438\u0441\u043E\u043A \u043D\u0435 \u0440\u0438\u0441\u0443\u0435\u0442\u0441\u044F: \u0443\u0437\u0435\u043B \u043D\u0443\u043B\u0435\u0432\u043E\u0439 \u0432\u044B\u0441\u043E\u0442\u044B \u0441\u0434\u0432\u0438\u0433\u0430\u043B \u0431\u044B \u043F\u0440\u0438\u0433\u043B\u0430\u0448\u0435\u043D\u0438\u0435 \u0437\u0430\u0437\u043E\u0440\u043E\u043C. -->\n @if (rows().length > 0 || !invitation()) {\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\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 [displayWith]=\"displayWith()\"\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 [searchRadius]=\"searchRadius()\"\n [emptyResultsText]=\"emptyResultsText()\"\n [titleWrap]=\"titleWrap()\"\n [highlightSearch]=\"highlightSearch()\"\n [applyLabel]=\"applyLabel()\"\n [applyLabelCase]=\"applyLabelCase()\"\n [autofocusSearch]=\"autofocusSearch()\"\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{min-width:0}}\n"] }]
|
|
1140
|
+
}], 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 }] }], displayWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayWith", required: false }] }], 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 }] }], searchRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchRadius", required: false }] }], highlightSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlightSearch", required: false }] }], emptyResultsText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyResultsText", required: false }] }], applyLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "applyLabel", required: false }] }], applyLabelCase: [{ type: i0.Input, args: [{ isSignal: true, alias: "applyLabelCase", required: false }] }], autofocusSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocusSearch", 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"] }] } });
|
|
1030
1141
|
|
|
1031
1142
|
/**
|
|
1032
1143
|
* Generated bundle index. Do not edit.
|