@recursyve/nice-ui-kit.v2 14.0.0-beta.108 → 14.0.0-beta.110

package/fesm2020/recursyve-nice-ui-kit.v2.mjs

@@ -5,7 +5,7 @@ import * as i0 from '@angular/core';
 import { Injectable, NgModule, EventEmitter, Component, ViewEncapsulation, ChangeDetectionStrategy, Input, Output, HostBinding, InjectionToken, Directive, HostListener, forwardRef, TemplateRef, Optional, Inject, ViewChild, ContentChild, ViewChildren, Self, Pipe, ElementRef, PLATFORM_ID, ContentChildren, SimpleChange, SkipSelf } from '@angular/core';
 import { plainToInstance } from 'class-transformer';
 import { map, filter, takeUntil, tap, take, debounceTime as debounceTime$1, delay, switchMap } from 'rxjs/operators';
-import { catchError, ReplaySubject, Subject, BehaviorSubject, mergeMap, from, isObservable, firstValueFrom, debounceTime, distinctUntilChanged, startWith, tap as tap$1, Observable, combineLatest, of, fromEvent, merge as merge$1 } from 'rxjs';
+import { catchError, ReplaySubject, Subject, BehaviorSubject, mergeMap, from, isObservable, firstValueFrom, debounceTime, distinctUntilChanged, startWith, tap as tap$1, Observable, combineLatest, of, fromEvent, merge as merge$1, pairwise } from 'rxjs';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import * as i2 from '@angular/common';
 import { CommonModule, DatePipe, CurrencyPipe, DOCUMENT, isPlatformServer } from '@angular/common';
@@ -15,6 +15,7 @@ import * as i4 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import * as i1$2 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormControl, Validators, ReactiveFormsModule, FormsModule, FormGroup } from '@angular/forms';
+import { LexoRank } from 'lexorank';
 import * as i4$1 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
 import * as i2$1 from '@angular/material/core';
@@ -65,6 +66,8 @@ import * as i1$e from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
 import * as i1$f from '@angular/material/snack-bar';
 import { MAT_SNACK_BAR_DATA, MatSnackBarModule } from '@angular/material/snack-bar';
+import * as i2$4 from '@angular/cdk/drag-drop';
+import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
 
 class NiceAnimationCurves {
 }
@@ -1454,6 +1457,33 @@ var KeyboardCodes;
     KeyboardCodes["Comma"] = "Comma";
 })(KeyboardCodes || (KeyboardCodes = {}));
 
+class LexoRankUtils {
+    static compareStringFn(previousRank, nextRank) {
+        if (!previousRank || !nextRank) {
+            return 0;
+        }
+        return LexoRank.parse(previousRank).compareTo(LexoRank.parse(nextRank));
+    }
+    static compareFn(previousRank, nextRank) {
+        return previousRank.compareTo(nextRank);
+    }
+    static getNewRank(afterRank, beforeRank) {
+        if (afterRank && beforeRank) {
+            if (LexoRank.parse(beforeRank).equals(LexoRank.parse(afterRank))) {
+                return LexoRank.parse(afterRank).genPrev().toString();
+            }
+            return LexoRank.parse(afterRank).between(LexoRank.parse(beforeRank)).toString();
+        }
+        if (afterRank) {
+            return LexoRank.parse(afterRank).genPrev().toString();
+        }
+        if (beforeRank) {
+            return LexoRank.parse(beforeRank).genNext().toString();
+        }
+        return LexoRank.middle().toString();
+    }
+}
+
 var ModalMode;
 (function (ModalMode) {
     ModalMode[ModalMode["Create"] = 0] = "Create";
@@ -10391,6 +10421,105 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImpor
                 }]
         }] });
 
+class NiceDraggableListDirective {
+    constructor(formArrayName, cdkDropList) {
+        this.formArrayName = formArrayName;
+        this.cdkDropList = cdkDropList;
+        this.rankProperty = "rank";
+        this.itemsUpdated = new EventEmitter();
+        this.itemRankUpdated = new EventEmitter();
+        this.sortedItems = [];
+        this.unsubscribeAll$ = new Subject();
+    }
+    ngOnInit() {
+        if (this.formArrayName) {
+            this.formArray = this.formArrayName.control;
+            this.formArray.valueChanges.pipe(takeUntil(this.unsubscribeAll$), startWith(this.formArray.getRawValue()), map(() => this.formArray.getRawValue()), pairwise()).subscribe(([previous, current]) => {
+                if (previous.length !== current.length) {
+                    this.sortItems(current);
+                }
+            });
+            this.sortItems(this.formArray.getRawValue());
+        }
+        this.cdkDropList.dropped.pipe(takeUntil(this.unsubscribeAll$)).subscribe((event) => this.drop(event));
+    }
+    ngOnDestroy() {
+        this.unsubscribeAll$.next();
+        this.unsubscribeAll$.complete();
+    }
+    ngOnChanges(changes) {
+        if ("items" in changes && this.items) {
+            this.sortItems(this.items);
+        }
+    }
+    drop(event) {
+        if (event.previousContainer === event.container) {
+            if (event.previousIndex === event.currentIndex) {
+                return;
+            }
+            event.item.data[this.rankProperty] = this.getNextRank(event);
+            this.sortItems(this.sortedItems);
+            this.itemsUpdated.next(this.sortedItems);
+            this.itemRankUpdated.next(event.item.data);
+            if (this.formArray) {
+                this.formArray.get([event.previousIndex, this.rankProperty])?.patchValue(event.item.data[this.rankProperty]);
+                moveItemInArray(this.formArray.controls, event.previousIndex, event.currentIndex);
+            }
+        }
+        else {
+            // TODO: Handle container change
+        }
+    }
+    sortItems(items) {
+        if (items.length && items.some((item) => !item[this.rankProperty])) {
+            throw new Error(`All items must have a ${this.rankProperty}`);
+        }
+        this.sortedItems = [...items]
+            .map(item => ({ ...item }))
+            .sort((itemA, itemB) => LexoRankUtils.compareStringFn(itemA[this.rankProperty], itemB[this.rankProperty]));
+        this.cdkDropList.data = this.sortedItems;
+    }
+    getNextRank(event) {
+        const fromIndex = event.previousIndex;
+        const toIndex = event.currentIndex;
+        const itemAfter = this.sortedItems[fromIndex > toIndex ? toIndex : toIndex + 1];
+        const itemBefore = this.sortedItems[fromIndex > toIndex ? toIndex - 1 : toIndex];
+        return LexoRankUtils.getNewRank(itemAfter?.[this.rankProperty], itemBefore?.[this.rankProperty]);
+    }
+}
+NiceDraggableListDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceDraggableListDirective, deps: [{ token: i1$2.FormArrayName, optional: true }, { token: i2$4.CdkDropList }], target: i0.ɵɵFactoryTarget.Directive });
+NiceDraggableListDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.3", type: NiceDraggableListDirective, selector: "[cdkDropList][niceDraggableList]", inputs: { items: "items", rankProperty: "rankProperty" }, outputs: { itemsUpdated: "itemsUpdated", itemRankUpdated: "itemRankUpdated" }, usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceDraggableListDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[cdkDropList][niceDraggableList]"
+                }]
+        }], ctorParameters: function () { return [{ type: i1$2.FormArrayName, decorators: [{
+                    type: Optional
+                }] }, { type: i2$4.CdkDropList }]; }, propDecorators: { items: [{
+                type: Input
+            }], rankProperty: [{
+                type: Input
+            }], itemsUpdated: [{
+                type: Output
+            }], itemRankUpdated: [{
+                type: Output
+            }] } });
+
+class NiceDraggableListModule {
+}
+NiceDraggableListModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceDraggableListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NiceDraggableListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.3", ngImport: i0, type: NiceDraggableListModule, declarations: [NiceDraggableListDirective], imports: [DragDropModule], exports: [NiceDraggableListDirective] });
+NiceDraggableListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceDraggableListModule, imports: [DragDropModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceDraggableListModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [DragDropModule],
+                    declarations: [NiceDraggableListDirective],
+                    exports: [NiceDraggableListDirective],
+                }]
+        }] });
+
 class NiceImageErrorPlaceholderDirective {
     constructor(elementRef, viewContainerRef) {
         this.elementRef = elementRef;
@@ -10716,5 +10845,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ArrayUtils, BooleanPipe, CapitalizeFirstLetterPipe, CarouselComponent, CaseUtils, CeilPipe, ChipListItemLabelDirective, ColorsUtils, DateUtils, DefaultExportBottomSheetService, EntriesPipe, ExportBottomSheetComponent, ExportBottomSheetService, FileUtils, FindByKeyPipe, FirstLetterPipe, FloorPipe, FontAwesomeUtils, FormDataUtils, HttpStatusCodes, ImgCropperConfig, ImgCropperError, ImgResolution, JoinPipe, KeyboardCodes, LinkPipe, LocalizedBooleanPipe, LocalizedCurrencyPipe, LocalizedDateOnlyPipe, LocalizedDatePipe, MinutesToTimePipe, ModalMode, NavigationHideItemResolver, NavigationHintResolver, NiceAlertComponent, NiceAlertModule, NiceAlertService, NiceApiException, NiceAssetsCarouselActiveContentDirective, NiceAssetsCarouselComponent, NiceAssetsCarouselModule, NiceAsyncTypeaheadComponent, NiceAsyncTypeaheadModule, NiceAsyncTypeaheadProvider, NiceAutofocusDirective, NiceAutofocusDirectiveModule, NiceAutogrowDirective, NiceAutogrowModule, NiceBaseForm, NiceBaseFormComponent, NiceBaseFormModule, NiceCardComponent, NiceCardModule, NiceCarouselModule, NiceChipAsyncTypeaheadDirective, NiceChipListDirective, NiceChipListDirectiveModule, NiceChipListItemsComponent, NiceClickStopPropagationDirective, NiceCollapsableComponent, NiceCollapsableModule, NiceConfigModule, NiceConfigService, NiceControlStatusDirective, NiceCropperAreaComponent, NiceDateRangePickerComponent, NiceDateRangePickerModule, NiceDrawerComponent, NiceDrawerModule, NiceDrawerService, NiceDropzoneDirective, NiceDropzoneModule, NiceExportBottomSheetModule, NiceFormErrorComponent, NiceFormErrorModule, NiceFormSubmitDirective, NiceHorizontalNavigationBasicItemComponent, NiceHorizontalNavigationBranchItemComponent, NiceHorizontalNavigationComponent, NiceHorizontalNavigationDividerItemComponent, NiceHorizontalNavigationSpacerItemComponent, NiceHorizontalStepperComponent, NiceHorizontalStepperModule, NiceHttpExceptionFactory, NiceImageCropperComponent, NiceImageCropperModule, NiceImageErrorPlaceholderDirective, NiceImageErrorPlaceholderDirectiveModule, NiceLayoutComponent, NiceLayoutModule, NiceLoadingDirective, NiceLoadingSpinnerComponent, NiceLoadingSpinnerModule, NiceLottieComponent, NiceLottieModule, NiceMaterialModule, NiceMaterialStyleDirective, NiceMediaWatcherModule, NiceMediaWatcherService, NiceModalOnClickDirective, NiceModalOpenerDirective, NiceModule, NiceNavigationComponent, NiceNavigationModule, NiceNavigationService, NicePipesModule, NicePreventCloseWindowDirective, NiceRoundedStyleDirective, NiceScrollResetDirective, NiceScrollResetModule, NiceScrollbarDirective, NiceScrollbarModule, NiceSearchBarComponent, NiceSearchBarModule, NiceSplashScreenModule, NiceSplashScreenService, NiceStepComponent, NiceStopPropagationModule, NiceSweetAlertComponent, NiceSweetAlertDirective, NiceSweetAlertModule, NiceSweetAlertService, NiceToastComponent, NiceToastModule, NiceToastService, NiceToggleButtonGroupModule, NiceTransformResponseInterceptor, NiceTypeaheadComponent, NiceTypeaheadModule, NiceTypeaheadNewValue, NiceUtilsModule, NiceUtilsService, NiceVerticalNavigationAsideItemComponent, NiceVerticalNavigationBasicItemComponent, NiceVerticalNavigationCollapsableItemComponent, NiceVerticalNavigationComponent, NiceVerticalNavigationDividerItemComponent, NiceVerticalNavigationGroupItemComponent, NiceVerticalNavigationSpacerItemComponent, NiceWindowDirectiveModule, NumberToOrdinalIndicatorPipe, NumberUtils, ObjectUtils, OptionsScrollDirective, PadPipe, PhonePipe, PictureModalComponent, PictureModalService, PostalCodePipe, PromiseUtils, QueryParamsUtils, RangePipe, RegexUtils, RoundPipe, SanitizeBypassPipe, SecondsToTimePipe, TRANSFORM_TYPE, ToggleButtonComponent, ToggleButtonGroupComponent, TrackByPropPipe, TypeUtils, UrlUtils, _HintComponentBase, _normalizeDegrees, isNotNullOrUndefined, isNullOrUndefined, mergeDeep, mixinNiceApi, niceAnimations, round };
+export { ArrayUtils, BooleanPipe, CapitalizeFirstLetterPipe, CarouselComponent, CaseUtils, CeilPipe, ChipListItemLabelDirective, ColorsUtils, DateUtils, DefaultExportBottomSheetService, EntriesPipe, ExportBottomSheetComponent, ExportBottomSheetService, FileUtils, FindByKeyPipe, FirstLetterPipe, FloorPipe, FontAwesomeUtils, FormDataUtils, HttpStatusCodes, ImgCropperConfig, ImgCropperError, ImgResolution, JoinPipe, KeyboardCodes, LexoRankUtils, LinkPipe, LocalizedBooleanPipe, LocalizedCurrencyPipe, LocalizedDateOnlyPipe, LocalizedDatePipe, MinutesToTimePipe, ModalMode, NavigationHideItemResolver, NavigationHintResolver, NiceAlertComponent, NiceAlertModule, NiceAlertService, NiceApiException, NiceAssetsCarouselActiveContentDirective, NiceAssetsCarouselComponent, NiceAssetsCarouselModule, NiceAsyncTypeaheadComponent, NiceAsyncTypeaheadModule, NiceAsyncTypeaheadProvider, NiceAutofocusDirective, NiceAutofocusDirectiveModule, NiceAutogrowDirective, NiceAutogrowModule, NiceBaseForm, NiceBaseFormComponent, NiceBaseFormModule, NiceCardComponent, NiceCardModule, NiceCarouselModule, NiceChipAsyncTypeaheadDirective, NiceChipListDirective, NiceChipListDirectiveModule, NiceChipListItemsComponent, NiceClickStopPropagationDirective, NiceCollapsableComponent, NiceCollapsableModule, NiceConfigModule, NiceConfigService, NiceControlStatusDirective, NiceCropperAreaComponent, NiceDateRangePickerComponent, NiceDateRangePickerModule, NiceDraggableListDirective, NiceDraggableListModule, NiceDrawerComponent, NiceDrawerModule, NiceDrawerService, NiceDropzoneDirective, NiceDropzoneModule, NiceExportBottomSheetModule, NiceFormErrorComponent, NiceFormErrorModule, NiceFormSubmitDirective, NiceHorizontalNavigationBasicItemComponent, NiceHorizontalNavigationBranchItemComponent, NiceHorizontalNavigationComponent, NiceHorizontalNavigationDividerItemComponent, NiceHorizontalNavigationSpacerItemComponent, NiceHorizontalStepperComponent, NiceHorizontalStepperModule, NiceHttpExceptionFactory, NiceImageCropperComponent, NiceImageCropperModule, NiceImageErrorPlaceholderDirective, NiceImageErrorPlaceholderDirectiveModule, NiceLayoutComponent, NiceLayoutModule, NiceLoadingDirective, NiceLoadingSpinnerComponent, NiceLoadingSpinnerModule, NiceLottieComponent, NiceLottieModule, NiceMaterialModule, NiceMaterialStyleDirective, NiceMediaWatcherModule, NiceMediaWatcherService, NiceModalOnClickDirective, NiceModalOpenerDirective, NiceModule, NiceNavigationComponent, NiceNavigationModule, NiceNavigationService, NicePipesModule, NicePreventCloseWindowDirective, NiceRoundedStyleDirective, NiceScrollResetDirective, NiceScrollResetModule, NiceScrollbarDirective, NiceScrollbarModule, NiceSearchBarComponent, NiceSearchBarModule, NiceSplashScreenModule, NiceSplashScreenService, NiceStepComponent, NiceStopPropagationModule, NiceSweetAlertComponent, NiceSweetAlertDirective, NiceSweetAlertModule, NiceSweetAlertService, NiceToastComponent, NiceToastModule, NiceToastService, NiceToggleButtonGroupModule, NiceTransformResponseInterceptor, NiceTypeaheadComponent, NiceTypeaheadModule, NiceTypeaheadNewValue, NiceUtilsModule, NiceUtilsService, NiceVerticalNavigationAsideItemComponent, NiceVerticalNavigationBasicItemComponent, NiceVerticalNavigationCollapsableItemComponent, NiceVerticalNavigationComponent, NiceVerticalNavigationDividerItemComponent, NiceVerticalNavigationGroupItemComponent, NiceVerticalNavigationSpacerItemComponent, NiceWindowDirectiveModule, NumberToOrdinalIndicatorPipe, NumberUtils, ObjectUtils, OptionsScrollDirective, PadPipe, PhonePipe, PictureModalComponent, PictureModalService, PostalCodePipe, PromiseUtils, QueryParamsUtils, RangePipe, RegexUtils, RoundPipe, SanitizeBypassPipe, SecondsToTimePipe, TRANSFORM_TYPE, ToggleButtonComponent, ToggleButtonGroupComponent, TrackByPropPipe, TypeUtils, UrlUtils, _HintComponentBase, _normalizeDegrees, isNotNullOrUndefined, isNullOrUndefined, mergeDeep, mixinNiceApi, niceAnimations, round };
 //# sourceMappingURL=recursyve-nice-ui-kit.v2.mjs.map