fix(sortablejs): Make union types work

By default, conditional types are distributive when given a union type
[1]. However, we don’t actually use anywhere the fact that arrays are
homogeneous, and on the other hand distributive typing forbids
heterogeneous arrays, like an array that contains values and sub-arrays.
Adding square brackets allows heterogeneous arrays without disallowing
homogeneous ones (since `A[]|B[]` is a subtype of `(A|B)[]`).

Add an example demonstrating this – this example doesn’t compile without
my modification, but it does compile with the modification (so it also
functions as a regression test).

[1] https://www.typescriptlang.org/docs/handbook/2/conditional-types.html#distributive-conditional-types

Author: jtotht

packages/demo/src/app/sortablejs/examples/union-example/union-example.component.html

@@ -0,0 +1,20 @@
+<h3 class="h4">Button group</h3>
+
+<div class="btn-group"
+    [nxtSortablejs]="elems">
+    <button type="button"
+        class="btn btn-secondary"
+        *ngFor="let elem of elems">
+        <ng-container *ngIf="!isArray(elem)">{{ elem }}</ng-container>
+        <ul *ngIf="isArray(elem)"
+            class="list-unstyled m-0">
+            <li *ngFor="let num of elem">{{num}}</li>
+        </ul>
+    </button>
+</div>
+
+<h3 class="h4">The actual model</h3>
+
+<app-code-block [code]="elems | json"
+    [languages]="['json']"
+    [copy]="false"></app-code-block>

packages/demo/src/app/sortablejs/examples/union-example/union-example.component.ts

@@ -0,0 +1,15 @@
+import { Component, ViewEncapsulation } from '@angular/core'
+
+@Component({
+    selector: 'app-union-example',
+    templateUrl: './union-example.component.html',
+    encapsulation: ViewEncapsulation.Emulated
+})
+export class UnionExampleComponent {
+    readonly elems = [
+        1,
+        2,
+        [3, 4],
+    ]
+    readonly isArray = Array.isArray
+}

packages/demo/src/app/sortablejs/sortablejs.module.ts

@@ -11,6 +11,7 @@ import { MetaModule } from '../meta/meta.module'
 import { OutputsTableComponent } from '../outputs-table/outputs-table.component'
 import { BasicExampleComponent } from './examples/basic-example/basic-example.component'
 import { ComplexExampleComponent } from './examples/complex-example/complex-example.component'
+import { UnionExampleComponent } from './examples/union-example/union-example.component'
 import { DisabledOptionsComponent } from './examples/disabled-options/disabled-options.component'
 import { EventsComponent } from './examples/events/events.component'
 import { FormArrayComponent } from './examples/form-array/form-array.component'
@@ -32,6 +33,7 @@ import { AppSortablejsComponent } from './sortablejs/sortablejs.component'
         TransferListsComponent,
         ItemCloneComponent,
         ComplexExampleComponent,
+        UnionExampleComponent,
         GettingStartedComponent
     ],
     imports: [

packages/demo/src/app/sortablejs/sortablejs/sortablejs.component.ts

@@ -57,6 +57,12 @@ export class AppSortablejsComponent extends WaitLoad implements OnInit {
             name: 'Complex example',
             description: 'Each list can have different options and restrictions.',
             include: ['html', 'ts']
+        },
+        {
+            path: 'union-example',
+            name: 'Union example',
+            description: 'The list items can be of different types (the element type can be a union type).',
+            include: ['html', 'ts']
         }
     )
         .map(p => Promise.all([

packages/sortablejs/src/lib/sortablejs.directive.ts

@@ -20,7 +20,7 @@ import { GLOBALS } from './globals'
 import { SortablejsBindings } from './sortablejs-bindings'
 import { SortablejsService } from './sortablejs.service'
 
-export type SortableData<T> = T extends AbstractControl ? (FormArray<T> | T[]) : T[]
+export type SortableData<T> = [T] extends [AbstractControl] ? (FormArray<T> | T[]) : T[]
 export type CloneFunction<T> = (item: T) => T
 
 /** @internal */