@sebgroup/green-angular 3.5.2 → 3.6.1

package/fesm2020/sebgroup-green-angular.mjs

@@ -15,6 +15,8 @@ import * as i1$2 from '@angular/router';
 import { RouterModule } from '@angular/router';
 import { Subject, fromEvent, interval } from 'rxjs';
 import { takeUntil, throttle } from 'rxjs/operators';
+import * as i2$1 from '@angular/cdk/drag-drop';
+import { moveItemInArray, transferArrayItem, DragDropModule } from '@angular/cdk/drag-drop';
 import * as i1$3 from '@angular/platform-browser';
 
 class NggAccordionListItemComponent {
@@ -989,10 +991,10 @@ class NggModalComponent {
     }
 }
 NggModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggModalComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.ConfigurableFocusTrapFactory }], target: i0.ɵɵFactoryTarget.Component });
-NggModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NggModalComponent, selector: "ngg-modal", inputs: { modalType: "modalType", header: "header", confirmLabel: "confirmLabel", dismissLabel: "dismissLabel", size: "size", hideHeader: "hideHeader", hideFooter: "hideFooter", trapFocus: "trapFocus", isOpen: "isOpen" }, outputs: { isOpenChange: "isOpenChange", closed: "closed", confirm: "confirm", dismiss: "dismiss" }, host: { properties: { "class.open": "this.open" } }, queries: [{ propertyName: "modalHeaderContent", first: true, predicate: NggModalHeaderDirective, descendants: true }, { propertyName: "modalFooterContent", first: true, predicate: NggModalFooterDirective, descendants: true }], viewQueries: [{ propertyName: "backdropRef", first: true, predicate: ["backdrop"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"isOpen\" [ngSwitch]=\"modalType\">\n  <div class=\"gds-dialog-wrapper\">\n    <aside\n      data-testid=\"modal\"\n      *ngSwitchCase=\"'slideout'\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      [class.small]=\"size === 'sm'\"\n      [class.medium]=\"size === 'md'\"\n      [class.large]=\"size === 'lg'\"\n      [class.entered]=\"isOpen\"\n    >\n      <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n    </aside>\n    <main\n      data-testid=\"modal\"\n      *ngSwitchCase=\"'takeover'\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      [class.entered]=\"isOpen\"\n    >\n      <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n    </main>\n    <section\n      data-testid=\"modal\"\n      *ngSwitchDefault\n      role=\"dialog\"\n      aria-modal=\"true\"\n      [class.small]=\"size === 'sm'\"\n      [class.medium]=\"size === 'md'\"\n      [class.large]=\"size === 'lg'\"\n      [class.entered]=\"isOpen\"\n    >\n      <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n    </section>\n    <ng-template #contentTemplate>\n      <ng-container *ngIf=\"!hideHeader\">\n        <header\n          *ngIf=\"!modalHeaderContent; else headerContentTemplate\"\n          ngg-modal-header\n          data-testid=\"modal-header\"\n          [header]=\"header\"\n          (closed)=\"this.handleCloseClick($event)\"\n        ></header>\n      </ng-container>\n      <div ngg-modal-body data-testid=\"modal-body\" class=\"body\">\n        <ng-container *ngTemplateOutlet=\"bodyContentTemplate\"></ng-container>\n      </div>\n      <ng-container *ngIf=\"!hideFooter && (dismissLabel || confirmLabel)\">\n        <footer\n          *ngIf=\"!modalFooterContent; else footerContentTemplate\"\n          ngg-modal-footer\n          data-testid=\"modal-footer\"\n          [dismissLabel]=\"dismissLabel\"\n          [confirmLabel]=\"confirmLabel\"\n          (dismiss)=\"this.handleDismiss($event)\"\n          (confirm)=\"this.handleConfirm($event)\"\n        ></footer>\n      </ng-container>\n    </ng-template>\n    <ng-template #headerContentTemplate>\n      <header data-testid=\"modal-header\">\n        <ng-content select=\"[nggModalHeader]\"></ng-content>\n      </header>\n    </ng-template>\n    <ng-template #bodyContentTemplate>\n      <ng-content></ng-content>\n    </ng-template>\n    <ng-template #footerContentTemplate>\n      <footer data-testid=\"modal-footer\">\n        <ng-content select=\"[nggModalFooter]\"></ng-content>\n      </footer>\n    </ng-template>\n    <div\n      #backdrop\n      data-testid=\"modal-backdrop\"\n      class=\"backdrop entered\"\n      (click)=\"this.handleBackdropClick($event)\"\n      [attr.aria-hidden]=\"true\"\n    ></div>\n  </div>\n</ng-container>\n", styles: [":host.open{height:100vh;left:0;overflow:hidden;position:fixed;top:0;width:100%;z-index:var(--sg-z-index-modal)}:host.open>section[role=dialog]{left:50%;top:50%;transform:translate(-50%,-50%)}.body::-webkit-scrollbar{background-color:#f8f8f8;height:10px;width:10px}.body::-webkit-scrollbar-thumb{background-color:#cecece}.body::-webkit-scrollbar-track{background-color:#f8f8f8;box-shadow:inset 0 0 10px #00000040}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(function () { return i1.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(function () { return i1.NgTemplateOutlet; }), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(function () { return i1.NgSwitch; }), selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i0.forwardRef(function () { return i1.NgSwitchCase; }), selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i0.forwardRef(function () { return i1.NgSwitchDefault; }), selector: "[ngSwitchDefault]" }, { kind: "component", type: i0.forwardRef(function () { return NggModalHeaderComponent; }), selector: "[ngg-modal-header]", inputs: ["header"], outputs: ["closed"] }, { kind: "component", type: i0.forwardRef(function () { return NggModalBodyComponent; }), selector: "[ngg-modal-body]" }, { kind: "component", type: i0.forwardRef(function () { return NggModalFooterComponent; }), selector: "[ngg-modal-footer]", inputs: ["dismissLabel", "confirmLabel"], outputs: ["dismiss", "confirm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+NggModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NggModalComponent, selector: "ngg-modal", inputs: { modalType: "modalType", header: "header", confirmLabel: "confirmLabel", dismissLabel: "dismissLabel", size: "size", hideHeader: "hideHeader", hideFooter: "hideFooter", trapFocus: "trapFocus", isOpen: "isOpen" }, outputs: { isOpenChange: "isOpenChange", closed: "closed", confirm: "confirm", dismiss: "dismiss" }, host: { properties: { "class.open": "this.open" } }, queries: [{ propertyName: "modalHeaderContent", first: true, predicate: NggModalHeaderDirective, descendants: true }, { propertyName: "modalFooterContent", first: true, predicate: NggModalFooterDirective, descendants: true }], viewQueries: [{ propertyName: "backdropRef", first: true, predicate: ["backdrop"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"isOpen\" [ngSwitch]=\"modalType\">\n  <div class=\"gds-dialog-wrapper\">\n    <aside\n      data-testid=\"modal\"\n      *ngSwitchCase=\"'slideout'\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      [class.small]=\"size === 'sm'\"\n      [class.gds-slide-out--768]=\"size === 'md'\"\n      [class.gds-slide-out--960]=\"size === 'lg'\"\n      [class.entered]=\"isOpen\"\n    >\n      <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n    </aside>\n    <main\n      data-testid=\"modal\"\n      *ngSwitchCase=\"'takeover'\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      [class.entered]=\"isOpen\"\n    >\n      <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n    </main>\n    <section\n      data-testid=\"modal\"\n      *ngSwitchDefault\n      role=\"dialog\"\n      aria-modal=\"true\"\n      [class.small]=\"size === 'sm'\"\n      [class.medium]=\"size === 'md'\"\n      [class.large]=\"size === 'lg'\"\n      [class.entered]=\"isOpen\"\n    >\n      <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n    </section>\n    <ng-template #contentTemplate>\n      <ng-container *ngIf=\"!hideHeader\">\n        <header\n          *ngIf=\"!modalHeaderContent; else headerContentTemplate\"\n          ngg-modal-header\n          data-testid=\"modal-header\"\n          [header]=\"header\"\n          (closed)=\"this.handleCloseClick($event)\"\n        ></header>\n      </ng-container>\n      <div ngg-modal-body data-testid=\"modal-body\" class=\"body\">\n        <ng-container *ngTemplateOutlet=\"bodyContentTemplate\"></ng-container>\n      </div>\n      <ng-container *ngIf=\"!hideFooter && (dismissLabel || confirmLabel)\">\n        <footer\n          *ngIf=\"!modalFooterContent; else footerContentTemplate\"\n          ngg-modal-footer\n          data-testid=\"modal-footer\"\n          [dismissLabel]=\"dismissLabel\"\n          [confirmLabel]=\"confirmLabel\"\n          (dismiss)=\"this.handleDismiss($event)\"\n          (confirm)=\"this.handleConfirm($event)\"\n        ></footer>\n      </ng-container>\n    </ng-template>\n    <ng-template #headerContentTemplate>\n      <header data-testid=\"modal-header\">\n        <ng-content select=\"[nggModalHeader]\"></ng-content>\n      </header>\n    </ng-template>\n    <ng-template #bodyContentTemplate>\n      <ng-content></ng-content>\n    </ng-template>\n    <ng-template #footerContentTemplate>\n      <footer data-testid=\"modal-footer\">\n        <ng-content select=\"[nggModalFooter]\"></ng-content>\n      </footer>\n    </ng-template>\n    <div\n      #backdrop\n      data-testid=\"modal-backdrop\"\n      class=\"backdrop entered\"\n      (click)=\"this.handleBackdropClick($event)\"\n      [attr.aria-hidden]=\"true\"\n    ></div>\n  </div>\n</ng-container>\n", styles: [":host.open{height:100vh;left:0;overflow:hidden;position:fixed;top:0;width:100%;z-index:var(--sg-z-index-modal)}:host.open>section[role=dialog]{left:50%;top:50%;transform:translate(-50%,-50%)}.body::-webkit-scrollbar{background-color:#f8f8f8;height:10px;width:10px}.body::-webkit-scrollbar-thumb{background-color:#cecece}.body::-webkit-scrollbar-track{background-color:#f8f8f8;box-shadow:inset 0 0 10px #00000040}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(function () { return i1.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(function () { return i1.NgTemplateOutlet; }), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(function () { return i1.NgSwitch; }), selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i0.forwardRef(function () { return i1.NgSwitchCase; }), selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i0.forwardRef(function () { return i1.NgSwitchDefault; }), selector: "[ngSwitchDefault]" }, { kind: "component", type: i0.forwardRef(function () { return NggModalHeaderComponent; }), selector: "[ngg-modal-header]", inputs: ["header"], outputs: ["closed"] }, { kind: "component", type: i0.forwardRef(function () { return NggModalBodyComponent; }), selector: "[ngg-modal-body]" }, { kind: "component", type: i0.forwardRef(function () { return NggModalFooterComponent; }), selector: "[ngg-modal-footer]", inputs: ["dismissLabel", "confirmLabel"], outputs: ["dismiss", "confirm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngg-modal', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"isOpen\" [ngSwitch]=\"modalType\">\n  <div class=\"gds-dialog-wrapper\">\n    <aside\n      data-testid=\"modal\"\n      *ngSwitchCase=\"'slideout'\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      [class.small]=\"size === 'sm'\"\n      [class.medium]=\"size === 'md'\"\n      [class.large]=\"size === 'lg'\"\n      [class.entered]=\"isOpen\"\n    >\n      <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n    </aside>\n    <main\n      data-testid=\"modal\"\n      *ngSwitchCase=\"'takeover'\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      [class.entered]=\"isOpen\"\n    >\n      <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n    </main>\n    <section\n      data-testid=\"modal\"\n      *ngSwitchDefault\n      role=\"dialog\"\n      aria-modal=\"true\"\n      [class.small]=\"size === 'sm'\"\n      [class.medium]=\"size === 'md'\"\n      [class.large]=\"size === 'lg'\"\n      [class.entered]=\"isOpen\"\n    >\n      <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n    </section>\n    <ng-template #contentTemplate>\n      <ng-container *ngIf=\"!hideHeader\">\n        <header\n          *ngIf=\"!modalHeaderContent; else headerContentTemplate\"\n          ngg-modal-header\n          data-testid=\"modal-header\"\n          [header]=\"header\"\n          (closed)=\"this.handleCloseClick($event)\"\n        ></header>\n      </ng-container>\n      <div ngg-modal-body data-testid=\"modal-body\" class=\"body\">\n        <ng-container *ngTemplateOutlet=\"bodyContentTemplate\"></ng-container>\n      </div>\n      <ng-container *ngIf=\"!hideFooter && (dismissLabel || confirmLabel)\">\n        <footer\n          *ngIf=\"!modalFooterContent; else footerContentTemplate\"\n          ngg-modal-footer\n          data-testid=\"modal-footer\"\n          [dismissLabel]=\"dismissLabel\"\n          [confirmLabel]=\"confirmLabel\"\n          (dismiss)=\"this.handleDismiss($event)\"\n          (confirm)=\"this.handleConfirm($event)\"\n        ></footer>\n      </ng-container>\n    </ng-template>\n    <ng-template #headerContentTemplate>\n      <header data-testid=\"modal-header\">\n        <ng-content select=\"[nggModalHeader]\"></ng-content>\n      </header>\n    </ng-template>\n    <ng-template #bodyContentTemplate>\n      <ng-content></ng-content>\n    </ng-template>\n    <ng-template #footerContentTemplate>\n      <footer data-testid=\"modal-footer\">\n        <ng-content select=\"[nggModalFooter]\"></ng-content>\n      </footer>\n    </ng-template>\n    <div\n      #backdrop\n      data-testid=\"modal-backdrop\"\n      class=\"backdrop entered\"\n      (click)=\"this.handleBackdropClick($event)\"\n      [attr.aria-hidden]=\"true\"\n    ></div>\n  </div>\n</ng-container>\n", styles: [":host.open{height:100vh;left:0;overflow:hidden;position:fixed;top:0;width:100%;z-index:var(--sg-z-index-modal)}:host.open>section[role=dialog]{left:50%;top:50%;transform:translate(-50%,-50%)}.body::-webkit-scrollbar{background-color:#f8f8f8;height:10px;width:10px}.body::-webkit-scrollbar-thumb{background-color:#cecece}.body::-webkit-scrollbar-track{background-color:#f8f8f8;box-shadow:inset 0 0 10px #00000040}\n"] }]
+            args: [{ selector: 'ngg-modal', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"isOpen\" [ngSwitch]=\"modalType\">\n  <div class=\"gds-dialog-wrapper\">\n    <aside\n      data-testid=\"modal\"\n      *ngSwitchCase=\"'slideout'\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      [class.small]=\"size === 'sm'\"\n      [class.gds-slide-out--768]=\"size === 'md'\"\n      [class.gds-slide-out--960]=\"size === 'lg'\"\n      [class.entered]=\"isOpen\"\n    >\n      <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n    </aside>\n    <main\n      data-testid=\"modal\"\n      *ngSwitchCase=\"'takeover'\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      [class.entered]=\"isOpen\"\n    >\n      <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n    </main>\n    <section\n      data-testid=\"modal\"\n      *ngSwitchDefault\n      role=\"dialog\"\n      aria-modal=\"true\"\n      [class.small]=\"size === 'sm'\"\n      [class.medium]=\"size === 'md'\"\n      [class.large]=\"size === 'lg'\"\n      [class.entered]=\"isOpen\"\n    >\n      <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n    </section>\n    <ng-template #contentTemplate>\n      <ng-container *ngIf=\"!hideHeader\">\n        <header\n          *ngIf=\"!modalHeaderContent; else headerContentTemplate\"\n          ngg-modal-header\n          data-testid=\"modal-header\"\n          [header]=\"header\"\n          (closed)=\"this.handleCloseClick($event)\"\n        ></header>\n      </ng-container>\n      <div ngg-modal-body data-testid=\"modal-body\" class=\"body\">\n        <ng-container *ngTemplateOutlet=\"bodyContentTemplate\"></ng-container>\n      </div>\n      <ng-container *ngIf=\"!hideFooter && (dismissLabel || confirmLabel)\">\n        <footer\n          *ngIf=\"!modalFooterContent; else footerContentTemplate\"\n          ngg-modal-footer\n          data-testid=\"modal-footer\"\n          [dismissLabel]=\"dismissLabel\"\n          [confirmLabel]=\"confirmLabel\"\n          (dismiss)=\"this.handleDismiss($event)\"\n          (confirm)=\"this.handleConfirm($event)\"\n        ></footer>\n      </ng-container>\n    </ng-template>\n    <ng-template #headerContentTemplate>\n      <header data-testid=\"modal-header\">\n        <ng-content select=\"[nggModalHeader]\"></ng-content>\n      </header>\n    </ng-template>\n    <ng-template #bodyContentTemplate>\n      <ng-content></ng-content>\n    </ng-template>\n    <ng-template #footerContentTemplate>\n      <footer data-testid=\"modal-footer\">\n        <ng-content select=\"[nggModalFooter]\"></ng-content>\n      </footer>\n    </ng-template>\n    <div\n      #backdrop\n      data-testid=\"modal-backdrop\"\n      class=\"backdrop entered\"\n      (click)=\"this.handleBackdropClick($event)\"\n      [attr.aria-hidden]=\"true\"\n    ></div>\n  </div>\n</ng-container>\n", styles: [":host.open{height:100vh;left:0;overflow:hidden;position:fixed;top:0;width:100%;z-index:var(--sg-z-index-modal)}:host.open>section[role=dialog]{left:50%;top:50%;transform:translate(-50%,-50%)}.body::-webkit-scrollbar{background-color:#f8f8f8;height:10px;width:10px}.body::-webkit-scrollbar-thumb{background-color:#cecece}.body::-webkit-scrollbar-track{background-color:#f8f8f8;box-shadow:inset 0 0 10px #00000040}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$1.ConfigurableFocusTrapFactory }]; }, propDecorators: { modalType: [{
                 type: Input
             }], header: [{
@@ -1447,6 +1449,196 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 }]
         }] });
 
+class NggSortableListComponent {
+    constructor() {
+        this.groups = [];
+        this.shouldDisplayCheckboxes = false;
+        this.isReadOnly = false;
+        this.isDraggable = true;
+        this.description = '';
+        this.suffixTemplate = null;
+        this.itemSelectionChanged = new EventEmitter();
+        this.itemOrderChanged = new EventEmitter();
+        this.focusedIndex = { 0: 0 };
+    }
+    /**
+     * Toggles the selection of a checklist item and updates its position in the list.
+     *
+     * @param item - The checklist item to update.
+     */
+    toggleSelection(item) {
+        item.selected = !item.selected;
+        this.emitCheckListItem(item);
+    }
+    /**
+     * Handles the onDragDrop event.
+     *
+     * @param event - The drag and drop event.
+     */
+    onDragDrop(event) {
+        if (event.previousContainer === event.container) {
+            moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
+        }
+        else {
+            transferArrayItem(event.previousContainer.data, event.container.data, event.previousIndex, event.currentIndex);
+        }
+        this.emitItemOrderChanged([Number(event.previousContainer.id), event.previousIndex], [Number(event.container.id), event.currentIndex]);
+    }
+    /**
+     * Handles moving items up or down using the alt + arrow up or alt + arrow down keys.
+     *
+     * @param groupIndex - The index of the group.
+     * @param currentItemIndex - The current index of the item.
+     * @param newItemIndex - The new index of the item.
+     */
+    onAltArrowKeydown(groupIndex, currentItemIndex, newItemIndex, event) {
+        event.preventDefault();
+        let newIndex = newItemIndex;
+        let newGroupIndex = groupIndex;
+        let transfer = false;
+        if (newIndex > this.groups[groupIndex].items.length - 1) {
+            newIndex = 0;
+            newGroupIndex = groupIndex + 1;
+            transfer = true;
+            this.focusedIndex[groupIndex] = this.groups[groupIndex].items.length - 2;
+        }
+        else if (newIndex < 0) {
+            newGroupIndex = groupIndex - 1;
+            newIndex = this.groups[newGroupIndex].items.length;
+            transfer = true;
+            this.focusedIndex[groupIndex] = 0;
+        }
+        if (transfer) {
+            transferArrayItem(this.groups[groupIndex].items, this.groups[newGroupIndex].items, currentItemIndex, newIndex);
+        }
+        else {
+            moveItemInArray(this.groups[groupIndex].items, currentItemIndex, newIndex);
+        }
+        this.emitItemOrderChanged([groupIndex, currentItemIndex], [newGroupIndex, newIndex]);
+        setTimeout(() => {
+            this.focusItem(newGroupIndex, newIndex);
+        });
+    }
+    /**
+     * Handles focus by arrow keydown event.
+     *
+     * @param groupIndex - The index of the group.
+     * @param itemIndex - The index of the item.
+     * @param event - The keyboard event.
+     */
+    onArrowKeydown(groupIndex, itemIndex, event) {
+        event.preventDefault();
+        setTimeout(() => {
+            let gi = groupIndex;
+            if (itemIndex > this.groups[groupIndex].items.length - 1) {
+                gi = groupIndex + 1;
+                itemIndex = 0;
+            }
+            if (itemIndex < 0) {
+                gi = groupIndex - 1;
+                if (gi < 0) {
+                    return;
+                }
+                itemIndex = this.groups[gi].items.length - 1;
+            }
+            this.focusItem(gi, itemIndex);
+        });
+    }
+    /**
+     * Emits the item order changed event.
+     *
+     * @param previousIndex - The previous index of the item.
+     * @param currentIndex - The current index of the item.
+     */
+    emitItemOrderChanged(previousIndex, currentIndex) {
+        this.itemOrderChanged.emit({
+            previousIndex,
+            currentIndex,
+            groups: [...this.groups],
+        });
+    }
+    /**
+     * Emits the selected checklist item through an event.
+     *
+     * @param item - The checklist item to emit.
+     */
+    emitCheckListItem(item) {
+        this.itemSelectionChanged.emit({ changedItem: item, groups: this.groups });
+    }
+    /**
+     * Focuses on a specific item in the sortable list.
+     *
+     * @param groupIndex - The index of the group.
+     * @param itemIndex - The index of the item.
+     */
+    focusItem(groupIndex, itemIndex) {
+        const groupElements = this.sortableListGroups.nativeElement.querySelectorAll('.item-list-group');
+        if (groupElements && groupElements.length > groupIndex) {
+            const itemElements = groupElements[groupIndex].querySelectorAll('.item');
+            if (itemElements && itemElements.length > itemIndex) {
+                if (this.shouldDisplayCheckboxes) {
+                    itemElements[itemIndex].querySelector('input').focus();
+                }
+                else {
+                    itemElements[itemIndex].focus();
+                }
+                this.focusedIndex[groupIndex] = itemIndex;
+            }
+        }
+    }
+    /**
+     * Checks if an item has focus.
+     *
+     * @param groupIndex - The index of the group.
+     * @param itemIndex - The index of the item.
+     */
+    itemHasFocus(groupIndex, itemIndex) {
+        if (!this.focusedIndex[groupIndex]) {
+            this.focusedIndex[groupIndex] = 0;
+        }
+        return this.focusedIndex[groupIndex] === itemIndex;
+    }
+}
+NggSortableListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggSortableListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+NggSortableListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NggSortableListComponent, selector: "ngg-sortable-list", inputs: { groups: "groups", shouldDisplayCheckboxes: "shouldDisplayCheckboxes", isReadOnly: "isReadOnly", isDraggable: "isDraggable", description: "description", suffixTemplate: "suffixTemplate" }, outputs: { itemSelectionChanged: "itemSelectionChanged", itemOrderChanged: "itemOrderChanged" }, viewQueries: [{ propertyName: "sortableListGroups", first: true, predicate: ["sortableListGroups"], descendants: true }], ngImport: i0, template: "<div class=\"item-list\">\n  <ng-container>\n    <p class=\"item-list-header\">\n      <span class=\"item-list-header-title\">{{ description }}</span>\n    </p>\n    <div #sortableListGroups cdkDropListGroup>\n      <div\n        *ngFor=\"let group of groups; let g_i = index\"\n        class=\"item-list-group\"\n        [class.drag-enabled]=\"isDraggable && !isReadOnly\"\n        role=\"list\"\n        cdkDropList\n        [cdkDropListData]=\"group.items\"\n        [id]=\"g_i.toString()\"\n        (cdkDropListDropped)=\"onDragDrop($event)\"\n      >\n        <p\n          *ngIf=\"group.title && group.title.length > 0\"\n          class=\"item-list-header\"\n        >\n          <span class=\"item-list-header-title\">{{ group.title }}</span>\n        </p>\n        <p\n          *ngIf=\"group.description && group.description.length > 0\"\n          class=\"item-list-header-description\"\n        >\n          {{ group.description }}\n        </p>\n        <div\n          *ngFor=\"let checklistItem of group.items; let i = index\"\n          [cdkDragDisabled]=\"!isDraggable || isReadOnly\"\n          [cdkDragData]=\"checklistItem\"\n          cdkDrag\n          cdkDragLockAxis=\"y\"\n          class=\"item-box\"\n          role=\"listitem\"\n        >\n          <div *cdkDragPlaceholder class=\"item-custom-placeholder\"></div>\n          <label\n            (keydown.alt.arrowDown)=\"onAltArrowKeydown(g_i, i, i + 1, $event)\"\n            (keydown.alt.arrowUp)=\"onAltArrowKeydown(g_i, i, i - 1, $event)\"\n            (keydown.arrowDown)=\"onArrowKeydown(g_i, i + 1, $event)\"\n            (keydown.arrowUp)=\"onArrowKeydown(g_i, i - 1, $event)\"\n            class=\"form-control item-control align-items-center item\"\n            [tabindex]=\"shouldDisplayCheckboxes ? '-1' : '0'\"\n          >\n            <div class=\"form-control\">\n              <input\n                (change)=\"toggleSelection(checklistItem)\"\n                [checked]=\"checklistItem.selected\"\n                [disabled]=\"isReadOnly\"\n                [type]=\"shouldDisplayCheckboxes ? 'checkbox' : 'hidden'\"\n              />\n              <div class=\"item-box-title\">\n                <span name=\"agendaItemName\"\n                  >{{ checklistItem.name }}\n                  <span\n                    *ngIf=\"checklistItem.hasCustomSuffix\"\n                    class=\"item-list-suffix\"\n                  >\n                    <ng-container\n                      *ngTemplateOutlet=\"\n                        suffixTemplate;\n                        context: { $implicit: checklistItem }\n                      \"\n                      class=\"user-icon\"\n                    >\n                    </ng-container>\n                  </span>\n                </span>\n                <br />\n                <span *ngIf=\"!!checklistItem.description\">\n                  <span class=\"item-list-suffix\" name=\"agendaItemToolTip\">\n                    {{ checklistItem.description }}\n                  </span>\n                  <br />\n                </span>\n              </div>\n              <i></i>\n            </div>\n            <div *ngIf=\"isDraggable && !isReadOnly\" class=\"item-grip-icon\">\n              <i class=\"sg-icon sg-icon-grip-vertical text-primary\"></i>\n            </div>\n          </label>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n</div>\n", styles: [".item-list{width:100%;display:block}label.item{padding:0!important}.item-box{background-color:var(--sg-card-background);color:var(--text-primary-color);display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;font-size:14px;margin:5px 0;border:1px solid var(--border-color);border-radius:4px}.form-control{line-height:20px;font-size:16px;font-weight:500}.item-list-header{display:flex;flex-direction:row;justify-content:space-between;margin-bottom:1rem}.item-list-header-title{font-weight:600;font-size:1rem;line-height:1.25rem;font-style:normal}.item-list-header-subtitle{font-size:.75rem;color:var(--text-primary-color);display:flex;justify-content:center;align-content:center}.item-list-suffix{font-weight:400;font-size:.85rem}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.item-grip-icon{font-weight:400;padding:.75rem 1rem .75rem 0rem}.cdk-drop-list.cdk-drop-list-dragging{cursor:grabbing!important;pointer-events:all!important}.item-custom-placeholder.cdk-drag-placeholder{pointer-events:all!important}.cdk-drop-list.drag-enabled:not(.cdk-drag-placeholder) label{cursor:grab}.cdk-drop-list label:focus-visible{outline-color:#333;outline-offset:4px}.item-list.cdk-drop-list-dragging .item-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1);pointer-events:all!important}.item-custom-placeholder{border:dotted 1px #999;min-height:44px;transition:transform .25s cubic-bezier(0,0,.2,1);border-radius:4px;margin:5px 0;padding:12px 12px 12px 16px}.user-icon{margin-right:.5rem}.item-control{width:100%;display:flex;flex-direction:row;justify-content:space-between}.form-control.item-layout{display:flex;justify-content:space-between}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2$1.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: i2$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i2$1.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggSortableListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngg-sortable-list', template: "<div class=\"item-list\">\n  <ng-container>\n    <p class=\"item-list-header\">\n      <span class=\"item-list-header-title\">{{ description }}</span>\n    </p>\n    <div #sortableListGroups cdkDropListGroup>\n      <div\n        *ngFor=\"let group of groups; let g_i = index\"\n        class=\"item-list-group\"\n        [class.drag-enabled]=\"isDraggable && !isReadOnly\"\n        role=\"list\"\n        cdkDropList\n        [cdkDropListData]=\"group.items\"\n        [id]=\"g_i.toString()\"\n        (cdkDropListDropped)=\"onDragDrop($event)\"\n      >\n        <p\n          *ngIf=\"group.title && group.title.length > 0\"\n          class=\"item-list-header\"\n        >\n          <span class=\"item-list-header-title\">{{ group.title }}</span>\n        </p>\n        <p\n          *ngIf=\"group.description && group.description.length > 0\"\n          class=\"item-list-header-description\"\n        >\n          {{ group.description }}\n        </p>\n        <div\n          *ngFor=\"let checklistItem of group.items; let i = index\"\n          [cdkDragDisabled]=\"!isDraggable || isReadOnly\"\n          [cdkDragData]=\"checklistItem\"\n          cdkDrag\n          cdkDragLockAxis=\"y\"\n          class=\"item-box\"\n          role=\"listitem\"\n        >\n          <div *cdkDragPlaceholder class=\"item-custom-placeholder\"></div>\n          <label\n            (keydown.alt.arrowDown)=\"onAltArrowKeydown(g_i, i, i + 1, $event)\"\n            (keydown.alt.arrowUp)=\"onAltArrowKeydown(g_i, i, i - 1, $event)\"\n            (keydown.arrowDown)=\"onArrowKeydown(g_i, i + 1, $event)\"\n            (keydown.arrowUp)=\"onArrowKeydown(g_i, i - 1, $event)\"\n            class=\"form-control item-control align-items-center item\"\n            [tabindex]=\"shouldDisplayCheckboxes ? '-1' : '0'\"\n          >\n            <div class=\"form-control\">\n              <input\n                (change)=\"toggleSelection(checklistItem)\"\n                [checked]=\"checklistItem.selected\"\n                [disabled]=\"isReadOnly\"\n                [type]=\"shouldDisplayCheckboxes ? 'checkbox' : 'hidden'\"\n              />\n              <div class=\"item-box-title\">\n                <span name=\"agendaItemName\"\n                  >{{ checklistItem.name }}\n                  <span\n                    *ngIf=\"checklistItem.hasCustomSuffix\"\n                    class=\"item-list-suffix\"\n                  >\n                    <ng-container\n                      *ngTemplateOutlet=\"\n                        suffixTemplate;\n                        context: { $implicit: checklistItem }\n                      \"\n                      class=\"user-icon\"\n                    >\n                    </ng-container>\n                  </span>\n                </span>\n                <br />\n                <span *ngIf=\"!!checklistItem.description\">\n                  <span class=\"item-list-suffix\" name=\"agendaItemToolTip\">\n                    {{ checklistItem.description }}\n                  </span>\n                  <br />\n                </span>\n              </div>\n              <i></i>\n            </div>\n            <div *ngIf=\"isDraggable && !isReadOnly\" class=\"item-grip-icon\">\n              <i class=\"sg-icon sg-icon-grip-vertical text-primary\"></i>\n            </div>\n          </label>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n</div>\n", styles: [".item-list{width:100%;display:block}label.item{padding:0!important}.item-box{background-color:var(--sg-card-background);color:var(--text-primary-color);display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;font-size:14px;margin:5px 0;border:1px solid var(--border-color);border-radius:4px}.form-control{line-height:20px;font-size:16px;font-weight:500}.item-list-header{display:flex;flex-direction:row;justify-content:space-between;margin-bottom:1rem}.item-list-header-title{font-weight:600;font-size:1rem;line-height:1.25rem;font-style:normal}.item-list-header-subtitle{font-size:.75rem;color:var(--text-primary-color);display:flex;justify-content:center;align-content:center}.item-list-suffix{font-weight:400;font-size:.85rem}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.item-grip-icon{font-weight:400;padding:.75rem 1rem .75rem 0rem}.cdk-drop-list.cdk-drop-list-dragging{cursor:grabbing!important;pointer-events:all!important}.item-custom-placeholder.cdk-drag-placeholder{pointer-events:all!important}.cdk-drop-list.drag-enabled:not(.cdk-drag-placeholder) label{cursor:grab}.cdk-drop-list label:focus-visible{outline-color:#333;outline-offset:4px}.item-list.cdk-drop-list-dragging .item-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1);pointer-events:all!important}.item-custom-placeholder{border:dotted 1px #999;min-height:44px;transition:transform .25s cubic-bezier(0,0,.2,1);border-radius:4px;margin:5px 0;padding:12px 12px 12px 16px}.user-icon{margin-right:.5rem}.item-control{width:100%;display:flex;flex-direction:row;justify-content:space-between}.form-control.item-layout{display:flex;justify-content:space-between}\n"] }]
+        }], propDecorators: { groups: [{
+                type: Input
+            }], shouldDisplayCheckboxes: [{
+                type: Input
+            }], isReadOnly: [{
+                type: Input
+            }], isDraggable: [{
+                type: Input
+            }], description: [{
+                type: Input
+            }], suffixTemplate: [{
+                type: Input
+            }], itemSelectionChanged: [{
+                type: Output
+            }], itemOrderChanged: [{
+                type: Output
+            }], sortableListGroups: [{
+                type: ViewChild,
+                args: ['sortableListGroups']
+            }] } });
+
+class NggSortableListModule {
+}
+NggSortableListModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggSortableListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NggSortableListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: NggSortableListModule, declarations: [NggSortableListComponent], imports: [CommonModule, FormsModule, DragDropModule], exports: [NggSortableListComponent] });
+NggSortableListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggSortableListModule, imports: [CommonModule, FormsModule, DragDropModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggSortableListModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, FormsModule, DragDropModule],
+                    exports: [NggSortableListComponent],
+                    declarations: [NggSortableListComponent],
+                }]
+        }] });
+
 class SlidingUnderlineDirective {
     constructor(element) {
         this.element = element;
@@ -1720,7 +1912,8 @@ NggModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.
         NggContextMenuModule,
         NggInPageWizardModule,
         NggCellTableModule,
-        NggSharedModule] });
+        NggSharedModule,
+        NggSortableListModule] });
 NggModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggModule, imports: [CommonModule, NggAccordionModule,
         NggBadgeModule,
         NggButtonModule,
@@ -1733,7 +1926,8 @@ NggModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.
         NggContextMenuModule,
         NggInPageWizardModule,
         NggCellTableModule,
-        NggSharedModule] });
+        NggSharedModule,
+        NggSortableListModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggModule, decorators: [{
             type: NgModule,
             args: [{
@@ -1753,6 +1947,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                         NggInPageWizardModule,
                         NggCellTableModule,
                         NggSharedModule,
+                        NggSortableListModule,
                     ],
                 }]
         }] });
@@ -1946,5 +2141,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { NggAccordionComponent, NggAccordionListItemComponent, NggAccordionModule, NggBadgeComponent, NggBadgeModule, NggButtonComponent, NggButtonModule, NggCellTableComponent, NggCellTableModule, NggContextMenuComponent, NggContextMenuModule, NggCoreElementDirective, NggCoreWrapperModule, NggDatepickerComponent, NggDatepickerModule, NggDropdownButtonDirective, NggDropdownComponent, NggDropdownModule, NggDropdownOptionDirective, NggInPageWizardModule, NggInPageWizardStepCardComponent, NggModalBodyComponent, NggModalComponent, NggModalFooterComponent, NggModalFooterDirective, NggModalHeaderComponent, NggModalHeaderDirective, NggModalModule, NggModule, NggOnScrollDirective, NggPaginationComponent, NggPaginationModule, NggProgressCircleComponent, NggProgressCircleModule, NggSegmentedControlComponent, NggSegmentedControlModule, NggSharedModule, NggSliderComponent, NggSliderModule, ON_SCROLL_TOKEN, dateValidator };
+export { NggAccordionComponent, NggAccordionListItemComponent, NggAccordionModule, NggBadgeComponent, NggBadgeModule, NggButtonComponent, NggButtonModule, NggCellTableComponent, NggCellTableModule, NggContextMenuComponent, NggContextMenuModule, NggCoreElementDirective, NggCoreWrapperModule, NggDatepickerComponent, NggDatepickerModule, NggDropdownButtonDirective, NggDropdownComponent, NggDropdownModule, NggDropdownOptionDirective, NggInPageWizardModule, NggInPageWizardStepCardComponent, NggModalBodyComponent, NggModalComponent, NggModalFooterComponent, NggModalFooterDirective, NggModalHeaderComponent, NggModalHeaderDirective, NggModalModule, NggModule, NggOnScrollDirective, NggPaginationComponent, NggPaginationModule, NggProgressCircleComponent, NggProgressCircleModule, NggSegmentedControlComponent, NggSegmentedControlModule, NggSharedModule, NggSliderComponent, NggSliderModule, NggSortableListComponent, NggSortableListModule, ON_SCROLL_TOKEN, dateValidator };
 //# sourceMappingURL=sebgroup-green-angular.mjs.map