@rt-tools/ui-kit 0.0.14 → 0.0.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rt-tools/ui-kit",
-  "version": "0.0.14",
+  "version": "0.0.16",
   "license": "Apache-2.0",
   "author": "Yauheni Krumin",
   "type": "module",
@@ -8,12 +8,12 @@
     "tslib": "^2.8.0",
     "@rt-tools/core": "^0.0.3",
     "@rt-tools/store": "^0.0.4",
-    "@rt-tools/utils": "^0.0.5"
+    "@rt-tools/utils": "^0.0.6"
   },
   "peerDependencies": {
     "@rt-tools/core": "^0.0.3",
     "@rt-tools/store": "^0.0.4",
-    "@rt-tools/utils": "^0.0.5",
+    "@rt-tools/utils": "^0.0.6",
     "@angular/animations": "^21.0.0",
     "@angular/cdk": "^21.0.0",
     "@angular/common": "^21.0.0",

package/src/lib/ui-kit/dynamic-selectors/strories/component/selector/test-selector.component.scss

@@ -19,4 +19,26 @@
         top: 1rem;
         left: 1rem;
     }
+
+    .custom-title {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.5rem;
+        font-size: 0.875rem;
+
+        &__icon {
+            font-size: 1.125rem;
+            width: 1.125rem;
+            height: 1.125rem;
+        }
+
+        &__id {
+            color: var(--mat-sys-primary, rgb(103 80 164));
+            font-weight: 600;
+        }
+
+        &__name {
+            font-style: italic;
+        }
+    }
 }

package/types/rt-tools-ui-kit.d.ts

@@ -1152,6 +1152,11 @@ declare class RtuiDynamicSelectorAdditionalControlDirective {
     static ɵfac: i0.ɵɵFactoryDeclaration<RtuiDynamicSelectorAdditionalControlDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<RtuiDynamicSelectorAdditionalControlDirective, "[rtuiDynamicSelectorAdditionalControlDirective]", never, {}, {}, never, never, true, never>;
 }
+/** Directive for custom item title template, projected from rtui-dynamic-selector down to selected-list */
+declare class RtuiDynamicSelectorItemTitleProjectionDirective {
+    static ɵfac: i0.ɵɵFactoryDeclaration<RtuiDynamicSelectorItemTitleProjectionDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<RtuiDynamicSelectorItemTitleProjectionDirective, "[rtuiDynamicSelectorItemTitleProjectionDirective]", never, {}, {}, never, never, true, never>;
+}
 declare class RtuiDynamicSelectorComponent<ENTITY extends Record<string, unknown>, KEY extends Extract<keyof ENTITY, string>> extends RtuiDynamicSelectorsDirective implements ControlValueAccessor, Validator, OnInit {
     #private;
     /** Config for overlay selector */
@@ -1225,6 +1230,10 @@ declare class RtuiDynamicSelectorComponent<ENTITY extends Record<string, unknown
     readonly additionalControlTpl: Signal<Nullable<TemplateRef<{
         $implicit: ENTITY;
     }>>>;
+    /** Custom item title template */
+    readonly itemTitleTpl: Signal<Nullable<TemplateRef<{
+        $implicit: ENTITY;
+    }>>>;
     ngOnInit(): void;
     writeValue(value: Array<ENTITY[KEY]>): void;
     registerOnChange(fn: (value: Array<ENTITY[KEY]>) => void): void;
@@ -1252,7 +1261,7 @@ declare class RtuiDynamicSelectorComponent<ENTITY extends Record<string, unknown
     /** Proceed move items in list */
     onDrop(event: CdkDragDrop<ENTITY[]>): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<RtuiDynamicSelectorComponent<any, any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<RtuiDynamicSelectorComponent<any, any>, "rtui-dynamic-selector", never, { "keyExp": { "alias": "keyExp"; "required": true; "isSignal": true; }; "displayExp": { "alias": "displayExp"; "required": true; "isSignal": true; }; "entities": { "alias": "entities"; "required": true; "isSignal": true; }; "navigateButtonTitle": { "alias": "navigateButtonTitle"; "required": false; "isSignal": true; }; "navigateLink": { "alias": "navigateLink"; "required": false; "isSignal": true; }; "readonlyEntitiesKeys": { "alias": "readonlyEntitiesKeys"; "required": false; "isSignal": true; }; "chosenEntities": { "alias": "chosenEntities"; "required": false; "isSignal": true; }; "isSelectionAvailable": { "alias": "isSelectionAvailable"; "required": false; "isSignal": true; }; "isPlaceholderShown": { "alias": "isPlaceholderShown"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "pending": { "alias": "pending"; "required": false; "isSignal": true; }; "fetching": { "alias": "fetching"; "required": false; "isSignal": true; }; "isLazyLoad": { "alias": "isLazyLoad"; "required": false; "isSignal": true; }; "isLocalSearch": { "alias": "isLocalSearch"; "required": false; "isSignal": true; }; "isMultiToggleShown": { "alias": "isMultiToggleShown"; "required": false; "isSignal": true; }; "isSelectAllButtonShown": { "alias": "isSelectAllButtonShown"; "required": false; "isSignal": true; }; "isOpenPopupButtonShown": { "alias": "isOpenPopupButtonShown"; "required": false; "isSignal": true; }; "searchTerm": { "alias": "searchTerm"; "required": false; "isSignal": true; }; "additionalControlChanged": { "alias": "additionalControlChanged"; "required": false; "isSignal": true; }; "sortFn": { "alias": "sortFn"; "required": false; "isSignal": true; }; }, { "chosenEntities": "chosenEntitiesChange"; "searchAction": "searchAction"; "scrollAction": "scrollAction"; "temporarySelectAction": "temporarySelectAction"; "resetAction": "resetAction"; "selectionChangeAction": "selectionChangeAction"; }, ["additionalControlTpl"], never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<RtuiDynamicSelectorComponent<any, any>, "rtui-dynamic-selector", never, { "keyExp": { "alias": "keyExp"; "required": true; "isSignal": true; }; "displayExp": { "alias": "displayExp"; "required": true; "isSignal": true; }; "entities": { "alias": "entities"; "required": true; "isSignal": true; }; "navigateButtonTitle": { "alias": "navigateButtonTitle"; "required": false; "isSignal": true; }; "navigateLink": { "alias": "navigateLink"; "required": false; "isSignal": true; }; "readonlyEntitiesKeys": { "alias": "readonlyEntitiesKeys"; "required": false; "isSignal": true; }; "chosenEntities": { "alias": "chosenEntities"; "required": false; "isSignal": true; }; "isSelectionAvailable": { "alias": "isSelectionAvailable"; "required": false; "isSignal": true; }; "isPlaceholderShown": { "alias": "isPlaceholderShown"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "pending": { "alias": "pending"; "required": false; "isSignal": true; }; "fetching": { "alias": "fetching"; "required": false; "isSignal": true; }; "isLazyLoad": { "alias": "isLazyLoad"; "required": false; "isSignal": true; }; "isLocalSearch": { "alias": "isLocalSearch"; "required": false; "isSignal": true; }; "isMultiToggleShown": { "alias": "isMultiToggleShown"; "required": false; "isSignal": true; }; "isSelectAllButtonShown": { "alias": "isSelectAllButtonShown"; "required": false; "isSignal": true; }; "isOpenPopupButtonShown": { "alias": "isOpenPopupButtonShown"; "required": false; "isSignal": true; }; "searchTerm": { "alias": "searchTerm"; "required": false; "isSignal": true; }; "additionalControlChanged": { "alias": "additionalControlChanged"; "required": false; "isSignal": true; }; "sortFn": { "alias": "sortFn"; "required": false; "isSignal": true; }; }, { "chosenEntities": "chosenEntitiesChange"; "searchAction": "searchAction"; "scrollAction": "scrollAction"; "temporarySelectAction": "temporarySelectAction"; "resetAction": "resetAction"; "selectionChangeAction": "selectionChangeAction"; }, ["additionalControlTpl", "itemTitleTpl"], never, true, never>;
 }
 
 interface FormModel {
@@ -1438,6 +1447,11 @@ declare class RtuiDynamicSelectorItemAdditionalControlDirective {
     static ɵfac: i0.ɵɵFactoryDeclaration<RtuiDynamicSelectorItemAdditionalControlDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<RtuiDynamicSelectorItemAdditionalControlDirective, "[rtuiDynamicSelectorItemAdditionalControlDirective]", never, {}, {}, never, never, true, never>;
 }
+/** Directive for custom item title template */
+declare class RtuiDynamicSelectorItemTitleDirective {
+    static ɵfac: i0.ɵɵFactoryDeclaration<RtuiDynamicSelectorItemTitleDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<RtuiDynamicSelectorItemTitleDirective, "[rtuiDynamicSelectorItemTitleDirective]", never, {}, {}, never, never, true, never>;
+}
 declare class RtuiDynamicSelectorSelectedListComponent<ENTITY extends Record<string, unknown>, KEY extends Extract<keyof ENTITY, string>> {
     protected readonly editedItemIndex: WritableSignal<Nullable<number>>;
     readonly inputRef: Signal<Nullable<MatInput>>;
@@ -1473,12 +1487,16 @@ declare class RtuiDynamicSelectorSelectedListComponent<ENTITY extends Record<str
     readonly additionalControlTpl: Signal<Nullable<TemplateRef<{
         $implicit: ENTITY;
     }>>>;
+    /** Custom item title template */
+    readonly itemTitleTpl: Signal<Nullable<TemplateRef<{
+        $implicit: ENTITY;
+    }>>>;
     protected onDelete(value: ENTITY[KEY]): void;
     protected onDrop(event: CdkDragDrop<ENTITY[]>): void;
     protected changeValue(prev: ENTITY[KEY]): void;
     protected setEditModState(index: Nullable<number>): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<RtuiDynamicSelectorSelectedListComponent<any, any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<RtuiDynamicSelectorSelectedListComponent<any, any>, "rtui-dynamic-selector-selected-list", never, { "isMobile": { "alias": "isMobile"; "required": true; "isSignal": true; }; "keyExp": { "alias": "keyExp"; "required": true; "isSignal": true; }; "displayExp": { "alias": "displayExp"; "required": true; "isSignal": true; }; "selectedEntities": { "alias": "selectedEntities"; "required": true; "isSignal": true; }; "readonlyEntitiesKeys": { "alias": "readonlyEntitiesKeys"; "required": false; "isSignal": true; }; "isListDraggable": { "alias": "isListDraggable"; "required": false; "isSignal": true; }; "useNameBreaking": { "alias": "useNameBreaking"; "required": false; "isSignal": true; }; "useTitleCase": { "alias": "useTitleCase"; "required": false; "isSignal": true; }; "isDeleteButtonShown": { "alias": "isDeleteButtonShown"; "required": false; "isSignal": true; }; "isItemsEditable": { "alias": "isItemsEditable"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; }, { "deleteFromSelectedAction": "deleteFromSelectedAction"; "dropAction": "dropAction"; "changeValueAction": "changeValueAction"; }, ["additionalControlTpl"], never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<RtuiDynamicSelectorSelectedListComponent<any, any>, "rtui-dynamic-selector-selected-list", never, { "isMobile": { "alias": "isMobile"; "required": true; "isSignal": true; }; "keyExp": { "alias": "keyExp"; "required": true; "isSignal": true; }; "displayExp": { "alias": "displayExp"; "required": true; "isSignal": true; }; "selectedEntities": { "alias": "selectedEntities"; "required": true; "isSignal": true; }; "readonlyEntitiesKeys": { "alias": "readonlyEntitiesKeys"; "required": false; "isSignal": true; }; "isListDraggable": { "alias": "isListDraggable"; "required": false; "isSignal": true; }; "useNameBreaking": { "alias": "useNameBreaking"; "required": false; "isSignal": true; }; "useTitleCase": { "alias": "useTitleCase"; "required": false; "isSignal": true; }; "isDeleteButtonShown": { "alias": "isDeleteButtonShown"; "required": false; "isSignal": true; }; "isItemsEditable": { "alias": "isItemsEditable"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; }, { "deleteFromSelectedAction": "deleteFromSelectedAction"; "dropAction": "dropAction"; "changeValueAction": "changeValueAction"; }, ["additionalControlTpl", "itemTitleTpl"], never, true, never>;
 }
 
 type IImageUploadFormat = 'png' | 'jpeg' | 'webp';
@@ -1572,5 +1590,5 @@ declare class RtActionBarService {
     static ɵprov: i0.ɵɵInjectableDeclaration<RtActionBarService>;
 }
 
-export { ASIDE_BUTTONS_ENUM, ASIDE_REF, AsideRef, BUTTON_APPEARANCE, BUTTON_COLOR, BUTTON_SIZE, DEFAULT_PAGE_MODEL, DEFAULT_PAGE_SIZE, IAside, IModal, INFO_BADGE_SIZE_ENUM, INFO_BADGE_TYPE_ENUM, IRtActionBar, IRtSnackBar, ISideMenu, ITable, MODAL_WINDOW_SIZE_ENUM, RTUI_TABLE_COMPONENT_TOKEN, RTUI_TABLE_STOP_ROW_CLICK_ATTRIBUTE, RtActionBarService, RtAsideService, RtDynamicListSelectorsDirective, RtModalService, RtPopoverDirective, RtSnackBarService, RtTableConfigService, RtTableSelectorsDirective, RtuiActionBarComponent, RtuiActionBarContainerComponent, RtuiAsideContainerComponent, RtuiAsideContainerHeaderDirective, RtuiButtonComponent, RtuiClearButtonComponent, RtuiCustomTableCellsDirective, RtuiDynamicInputAdditionalControlDirective, RtuiDynamicInputComponent, RtuiDynamicListComponent, RtuiDynamicListCustomTableCellsDirective, RtuiDynamicListRowActionsDirective, RtuiDynamicListRowAdditionalActionsDirective, RtuiDynamicListToolbarActionsDirective, RtuiDynamicListToolbarSelectorsDirective, RtuiDynamicSelectorAdditionalControlDirective, RtuiDynamicSelectorComponent, RtuiDynamicSelectorItemAdditionalControlDirective, RtuiDynamicSelectorListActionsComponent, RtuiDynamicSelectorPlaceholderComponent, RtuiDynamicSelectorSelectedListComponent, RtuiFileUploadComponent, RtuiHeaderCenterDirective, RtuiHeaderComponent, RtuiHeaderLeftDirective, RtuiHeaderRightDirective, RtuiImageUploadComponent, RtuiInfoBadgeComponent, RtuiModalComponent, RtuiMultiButtonComponent, RtuiMultiSelectorPopupComponent, RtuiPaginationComponent, RtuiRoundIconButtonComponent, RtuiScrollableContainerComponent, RtuiScrollableContainerContentDirective, RtuiScrollableContainerFooterDirective, RtuiScrollableContainerHeaderDirective, RtuiSideMenuComponent, RtuiSideMenuFooterDirective, RtuiSideMenuHeaderDirective, RtuiSnackBarComponent, RtuiSpinnerComponent, RtuiStopTableRowClickDirective, RtuiTableAdditionalRowActionsDirective, RtuiTableComponent, RtuiTableRowActionsDirective, RtuiTableRowClickDirective, RtuiToggleComponent, RtuiToolbarCenterDirective, RtuiToolbarComponent, RtuiToolbarLeftDirective, RtuiToolbarRightDirective, TABLE_COLUMN_FILTER_TYPES_ENUM, TABLE_COLUMN_TYPES_ENUM, TEXT_CELL_COLOR_ENUM, TOGGLE_SIZE_TYPE_ENUM, darkenHexColor, ddServices, getColorBasedOnBackground, progressDecreaseAnimation, progressIncreaseAnimation, provideRtUi };
+export { ASIDE_BUTTONS_ENUM, ASIDE_REF, AsideRef, BUTTON_APPEARANCE, BUTTON_COLOR, BUTTON_SIZE, DEFAULT_PAGE_MODEL, DEFAULT_PAGE_SIZE, IAside, IModal, INFO_BADGE_SIZE_ENUM, INFO_BADGE_TYPE_ENUM, IRtActionBar, IRtSnackBar, ISideMenu, ITable, MODAL_WINDOW_SIZE_ENUM, RTUI_TABLE_COMPONENT_TOKEN, RTUI_TABLE_STOP_ROW_CLICK_ATTRIBUTE, RtActionBarService, RtAsideService, RtDynamicListSelectorsDirective, RtModalService, RtPopoverDirective, RtSnackBarService, RtTableConfigService, RtTableSelectorsDirective, RtuiActionBarComponent, RtuiActionBarContainerComponent, RtuiAsideContainerComponent, RtuiAsideContainerHeaderDirective, RtuiButtonComponent, RtuiClearButtonComponent, RtuiCustomTableCellsDirective, RtuiDynamicInputAdditionalControlDirective, RtuiDynamicInputComponent, RtuiDynamicListComponent, RtuiDynamicListCustomTableCellsDirective, RtuiDynamicListRowActionsDirective, RtuiDynamicListRowAdditionalActionsDirective, RtuiDynamicListToolbarActionsDirective, RtuiDynamicListToolbarSelectorsDirective, RtuiDynamicSelectorAdditionalControlDirective, RtuiDynamicSelectorComponent, RtuiDynamicSelectorItemAdditionalControlDirective, RtuiDynamicSelectorItemTitleDirective, RtuiDynamicSelectorItemTitleProjectionDirective, RtuiDynamicSelectorListActionsComponent, RtuiDynamicSelectorPlaceholderComponent, RtuiDynamicSelectorSelectedListComponent, RtuiFileUploadComponent, RtuiHeaderCenterDirective, RtuiHeaderComponent, RtuiHeaderLeftDirective, RtuiHeaderRightDirective, RtuiImageUploadComponent, RtuiInfoBadgeComponent, RtuiModalComponent, RtuiMultiButtonComponent, RtuiMultiSelectorPopupComponent, RtuiPaginationComponent, RtuiRoundIconButtonComponent, RtuiScrollableContainerComponent, RtuiScrollableContainerContentDirective, RtuiScrollableContainerFooterDirective, RtuiScrollableContainerHeaderDirective, RtuiSideMenuComponent, RtuiSideMenuFooterDirective, RtuiSideMenuHeaderDirective, RtuiSnackBarComponent, RtuiSpinnerComponent, RtuiStopTableRowClickDirective, RtuiTableAdditionalRowActionsDirective, RtuiTableComponent, RtuiTableRowActionsDirective, RtuiTableRowClickDirective, RtuiToggleComponent, RtuiToolbarCenterDirective, RtuiToolbarComponent, RtuiToolbarLeftDirective, RtuiToolbarRightDirective, TABLE_COLUMN_FILTER_TYPES_ENUM, TABLE_COLUMN_TYPES_ENUM, TEXT_CELL_COLOR_ENUM, TOGGLE_SIZE_TYPE_ENUM, darkenHexColor, ddServices, getColorBasedOnBackground, progressDecreaseAnimation, progressIncreaseAnimation, provideRtUi };
 export type { AsideButtonsType, AsidePositions, ButtonAppearanceType, ButtonColorType, ButtonSizeType, IImageUploadFormat, IInfoBadgeSizeType, IRtuiTable, Icon, IconSideType, InfoBadgeType, MenuItemTrigger, ModalWindowSizeType, NameValueType, Select, ToggleSizeType };