@fundamental-ngx/core 0.33.4-rc.6 → 0.33.4

package/utils/fesm2020/fundamental-ngx-core-utils.mjs

@@ -2605,6 +2605,119 @@ class DynamicComponentContainer {
     }
 }
 
+/**
+ * Utility type, that allows to track and select ranges of elements while using multi-selection.
+ *
+ * @usage
+ * Imagine we have a simple list of checkboxes:
+ * ```html
+ * <input
+ *  #checkboxInput
+ *  *ngFor="let o of options; let idx = index"
+ *  type="checkbox"
+ *  [checked]="selectionModel.checked(o)"
+ *  (click)="toggle(idx, $event)"
+ *  >
+ * ```
+ * With the given layout the logic should be as follows:
+ * ```typescript
+ * export class YourComponent {
+ *  options = ['a', 'b', 'c'];
+ *  readonly selectionModel = new SelectionModel(true);
+ *
+ *  private readonly _rangeSelector = new RangeSelector();
+ *
+ *
+ *  toggle(idx: number, event: PointerEvent): void {
+ *      // getting the toggled value of the checkbox
+ *      const toggledSelection = event.target.value;
+ *
+ *      // registering the selection of current checkbox
+ *      this._rangeSelector.onRangeElementToggled(idx, event);
+ *
+ *      // Apply value to each element in range.
+ *      // If checkbox was toggled without shift pressed or without previously selected one,
+ *      // this method will select only it.
+ *      this._rangeSelector.applyValueToEachInRange(idx => {
+ *          if (toggledSelection) {
+ *              this.selectionModel.select(options[idx]);
+ *          } else {
+ *              this.selectionModel.deselect(options[idx]);
+ *          }
+ *      });
+ *  }
+ * }
+ * ```
+ */
+class RangeSelector {
+    constructor() {
+        /** @hidden */
+        this._previousSelectedIndex = null;
+    }
+    /**
+     * Last registered selection state (either multiple or single).
+     * Is updated on each `onRangeElementClicked` invokation. Will be `null` initially or once `reset()` is called.
+     */
+    get lastRangeSelectionState() {
+        return this._state ? { ...this._state } : null;
+    }
+    /**
+     * The method that should be used to register each checkbox toggle.
+     * Accepts two arguments: `index` and `event`. If none provided, will reset existing state.
+     * Otherwise will register current index as last checked.
+     *
+     * If toggling was done with "shift" pressed and there's a previously registered index, will register a range selection.
+     * At the same time if checkbox was toggled without shift pressed or without previously selected one, this method will select only it.
+     *
+     * After calling this method it's recommended to use `applyValueToEachInRange` to actually toggle each checkbox in range.
+     *
+     * See usage example on this class itself.
+     */
+    onRangeElementToggled(index, event) {
+        if (this._isNonNegativeInteger(this._previousSelectedIndex) &&
+            this._isNonNegativeInteger(index) &&
+            event?.shiftKey) {
+            this._state = {
+                isRangeSelection: true,
+                from: Math.min(this._previousSelectedIndex, index),
+                to: Math.max(this._previousSelectedIndex, index)
+            };
+            this._previousSelectedIndex = index;
+        }
+        else if (this._isNonNegativeInteger(index)) {
+            this._state = { isRangeSelection: false, from: index, to: index };
+            this._previousSelectedIndex = index;
+        }
+        else {
+            this.reset();
+        }
+        return this.lastRangeSelectionState;
+    }
+    /**
+     * Allows to apply selection to each item in selection range.
+     * Accepts a function to apply selection to each item by registered index.
+     *
+     * See usage example on this class itself.
+     */
+    applyValueToEachInRange(selectionMethod) {
+        const state = this.lastRangeSelectionState;
+        if (this._isNonNegativeInteger(state?.from) && this._isNonNegativeInteger(state.to)) {
+            for (let index = state.from; index <= state.to; index++) {
+                selectionMethod(index);
+            }
+        }
+    }
+    /** Resets selection state. Useful when the list of selectable items is changed (e.g. by filtering, sorting, page change) */
+    reset() {
+        this._state = null;
+        this._previousSelectedIndex = null;
+    }
+    /** @hidden */
+    _isNonNegativeInteger(num) {
+        return Number.isInteger(num) && num >= 0;
+    }
+}
+
 var ContentDensityEnum;
 (function (ContentDensityEnum) {
     ContentDensityEnum["COMPACT"] = "compact";
@@ -2989,5 +3102,5 @@ function applyMixins(derivedCtor, baseCtors) {
  * Generated bundle index. Do not edit.
  */
 
-export { ANY_LANGUAGE_LETTERS_GROUP_REGEX, ANY_LANGUAGE_LETTERS_REGEX, AbstractFdNgxClass, AutoCompleteDirective, AutoCompleteModule, ContentDensityEnum, ContentDensityService, DECIMAL_NUMBER_UNICODE_GROUP_REGEX, DECIMAL_NUMBER_UNICODE_RANGE, DECIMAL_NUMBER_UNICODE_REGEX, DEFAULT_CONTENT_DENSITY, DefaultTruncateCharCount, DisplayFnPipe, DndItemDirective, DndKeyboardGroupDirective, DndKeyboardItemDirective, DndListDirective, DragAndDropModule, DynamicComponentContainer, DynamicComponentInjector, DynamicComponentService, ELEMENT_REF_EXCEPTION, FocusKeyManagerHelpersModule, FocusKeyManagerItemDirective, FocusKeyManagerListDirective, FocusTrapService, INVALID_DATE_ERROR, InitialFocusDirective, InitialFocusModule, IsCompactDensityPipe, KeyUtil, KeyboardSupportService, LETTERS_UNICODE_RANGE, LIST_ITEM_COMPONENT, LineClampDirective, LineClampModule, LineClampTargetDirective, ListGroupPipe, MOBILE_CONFIG_ERROR, OVERFLOW_PRIORITY_SCORE, OnlyDigitsDirective, OnlyDigitsModule, OverflowListDirective, OverflowListItemDirective, OverflowListModule, PipeModule, RTL_LANGUAGE, ResizeDirective, ResizeHandleDirective, ResizeModule, RtlService, SafePipe, SearchHighlightPipe, THEME_SWITCHER_ROUTER_MISSING_ERROR, TemplateDirective, TemplateModule, ThemesService, TruncateDirective, TruncateModule, TwoDigitsPipe, UtilsModule, ValueByPathPipe, applyCssClass, applyCssStyle, applyMixins, getElementCapacity, getElementWidth, getRandomColorAccent, intersectionObservable, isCompactDensity, isValidContentDensity, parserFileSize, pxToNum, resizeObservable, scrollTop, toNativeElement, uuidv4 };
+export { ANY_LANGUAGE_LETTERS_GROUP_REGEX, ANY_LANGUAGE_LETTERS_REGEX, AbstractFdNgxClass, AutoCompleteDirective, AutoCompleteModule, ContentDensityEnum, ContentDensityService, DECIMAL_NUMBER_UNICODE_GROUP_REGEX, DECIMAL_NUMBER_UNICODE_RANGE, DECIMAL_NUMBER_UNICODE_REGEX, DEFAULT_CONTENT_DENSITY, DefaultTruncateCharCount, DisplayFnPipe, DndItemDirective, DndKeyboardGroupDirective, DndKeyboardItemDirective, DndListDirective, DragAndDropModule, DynamicComponentContainer, DynamicComponentInjector, DynamicComponentService, ELEMENT_REF_EXCEPTION, FocusKeyManagerHelpersModule, FocusKeyManagerItemDirective, FocusKeyManagerListDirective, FocusTrapService, INVALID_DATE_ERROR, InitialFocusDirective, InitialFocusModule, IsCompactDensityPipe, KeyUtil, KeyboardSupportService, LETTERS_UNICODE_RANGE, LIST_ITEM_COMPONENT, LineClampDirective, LineClampModule, LineClampTargetDirective, ListGroupPipe, MOBILE_CONFIG_ERROR, OVERFLOW_PRIORITY_SCORE, OnlyDigitsDirective, OnlyDigitsModule, OverflowListDirective, OverflowListItemDirective, OverflowListModule, PipeModule, RTL_LANGUAGE, RangeSelector, ResizeDirective, ResizeHandleDirective, ResizeModule, RtlService, SafePipe, SearchHighlightPipe, THEME_SWITCHER_ROUTER_MISSING_ERROR, TemplateDirective, TemplateModule, ThemesService, TruncateDirective, TruncateModule, TwoDigitsPipe, UtilsModule, ValueByPathPipe, applyCssClass, applyCssStyle, applyMixins, getElementCapacity, getElementWidth, getRandomColorAccent, intersectionObservable, isCompactDensity, isValidContentDensity, parserFileSize, pxToNum, resizeObservable, scrollTop, toNativeElement, uuidv4 };
 //# sourceMappingURL=fundamental-ngx-core-utils.mjs.map