@nstudio/ui-collectionview 4.0.70

package/LICENSE

@@ -0,0 +1,201 @@
+                                Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "{}"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright (c) 2015-2019 Progress Software Corporation
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

package/README.md

@@ -0,0 +1,396 @@
+All credits to [farfromrefug](https://github.com/farfromrefug) for `@nativescript-community/ui-collectionview`.
+
+This customizes the community plugin to support:
+- Adjusting cell behavior for more custom layouts
+- Improved Angular support
+
+<p align="center">
+  <b>Allows you to easily add a collection view (grid list view) to your projects. Supports vertical and horizontal modes, templating, and more.</b></br>
+  <sub><sub>
+</p>
+
+<br />
+
+
+| <img src="https://github.com/nativescript-community/ui-collectionview/raw/master/images/demo-ios.gif" height="500" /> | <img src="https://github.com/nativescript-community/ui-collectionview/raw/master/images/demo-android.gif" height="500" /> |
+| --- | ----------- |
+| iOS Demo | Android Demo |
+
+
+[](#table-of-contents)
+
+## Table of Contents
+
+- [Table of Contents](#table-of-contents)
+- [Installation](#installation)
+- [API](#api)
+  - [Events](#events)
+  - [Properties](#properties)
+  - [Methods](#methods)
+- [Usage](#usage)
+  - [Simple Example](#simple-example)
+  - [Templates Example](#templates-example)
+- [Usage in Angular](#usage-in-angular)
+  - [Simple Example](#simple-example-1)
+  - [Templates Example](#templates-example-1)
+- [Usage in Vue](#usage-in-vue)
+  - [Simple Example](#simple-example-2)
+- [Usage in Svelte](#usage-in-svelte)
+  - [Simple Example](#simple-example-3)
+- [Usage in React](#usage-in-react)
+  - [Simple Example](#simple-example-4)
+- [Questions](#questions)
+
+
+[](#installation)
+
+## Installation
+Run the following command from the root of your project:
+
+`npm install @nstudio/ui-collectionview`
+
+
+[](#api)
+
+## API
+
+### Events
+
+| Property            | Description                                                                  |
+| ------------------- | ---------------------------------------------------------------------------- |
+| itemLoading         | Triggered when generating an item in the CollectionView.                     |
+| itemTap             | Triggered when the user taps on an item in the CollectionView.               |
+| loadMoreItems       | Triggered when the generated items reached the end of the items property.    |
+| scroll              | Triggered on collectionview scroll.                                          |
+| scrollEnd           | Triggered on collectionview scroll end.    |
+| itemReorderStarting       | Triggered when a reorder is starting. Changing the `returnValue` of the event data allows you to cancel it    |
+| itemReorderStarted       | Triggered when a reorder started.    |
+| itemReordered       | Triggered when a reorder finished.    |
+| dataPopulated       | Triggered when a refresh has been called.    |
+
+
+
+### Properties
+
+| Property      | Type                                             | Description                                             |
+| ------------- | ------------------------------------------------ | ------------------------------------------------------- |
+| ios           | [UICollectionView](https://tinyurl.com/y4ugbfgc) | Gets the native iOS view that represents the user interface for this component. Valid only when running on iOS.    |
+| android       | [android.support.v7.widget.RecyclerView](https://tinyurl.com/lvqebpq) | Gets the native android widget that represents the user interface for this component. Valid only when running on Android OS.    |
+| items         | `array` or `ItemsSource`  | Gets or sets the items collection of the CollectionView. The items property can be set to an array or an object defining length and getItem(index) method.    |
+| itemTemplate  | `string`  | Gets or sets the item template of the CollectionView.    |
+| rowHeight     | `PercentLength`  | Gets or sets the height for every row in the CollectionView.    |
+| colWidth      | `PercentLength`  | Gets or sets the width for every column in the CollectionView.    |
+| spanSize      | `function` | Triggered when an item is loaded. Returns the number of columns that the element should occupy taking into account `colWidth` when the device is vertical and `rowHeight` when horizontal. Parameters: (item, index: number).    |
+| scrollOffset  | `number` | Gets the current scroll. |
+| orientation  | `vertical` or `horizontal` | Sets the orientation of the CollectionView. Defaults to `vertical`. |
+
+### Methods
+
+| Name                                                   | Return | Description                                                                                                            |
+| ------------------------------------------------------ | ------ | ---------------------------------------------------------------------------------------------------------------------- |
+| refresh()                                              | `void` | Forces the CollectionView to reload all its items.                                                                     |
+| refreshVisibleItem()                                   | `void` | Forces CollectionView to reload visible items. |
+| scrollToIndex(index: number, animated: boolean = true) | `void` | Scrolls the CollectionView to the item with the given index. This can be either animated or not. Defaults to animated. |
+| isItemAtIndexVisible(index: number)                    | `boolean` | Returns a boolean indicating whether the item is visible. |
+
+
+[](#usage)
+
+## Usage
+You need to add `xmlns:gv="@nstudio/ui-collectionview"` to your page tag, and then simply use `<gv:CollectionView/>` in order to add the widget to your page. Use `<gv:Gridview.itemTemplate/>` to specify the template for each cell:
+
+### Simple Example
+
+Create a simple array of objects in your JS/TS file.
+
+```typescript
+const items = [
+    { index: 0, name: 'TURQUOISE', color: '#1abc9c' },
+    { index: 1, name: 'EMERALD', color: '#2ecc71' },
+    { index: 2, name: 'PETER RIVER', color: '#3498db' },
+    { index: 3, name: 'AMETHYST', color: '#9b59b6' },
+    { index: 4, name: 'WET ASPHALT', color: '#34495e' },
+    { index: 5, name: 'GREEN SEA', color: '#16a085' },
+    { index: 6, name: 'NEPHRITIS', color: '#27ae60' },
+    { index: 7, name: 'BELIZE HOLE', color: '#2980b9' },
+    { index: 8, name: 'WISTERIA', color: '#8e44ad' },
+    { index: 9, name: 'MIDNIGHT BLUE', color: '#2c3e50' }
+];
+```
+
+```xml
+<!-- test-page.xml -->
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:gv="@nstudio/ui-collectionview" loaded="pageLoaded">
+    <GridLayout>
+        <gv:CollectionView items="items" colWidth="50%" rowHeight="100">
+            <gv:CollectionView.itemTemplate>
+                <Label text="value" verticalAlignment="center"/>
+            </gv:CollectionView.itemTemplate>
+        </gv:CollectionView>
+    </GridLayout>
+</Page>
+```
+
+### Templates Example
+You can also have multiple templates the same way you add them in the builtin `ListView` control:
+```xml
+<gv:CollectionView id="gv" row="0" class="cssClass" items="items" 
+                colWidth="colWidth" rowHeight="rowHeight" itemTemplateSelector="templateSelector"
+                itemTap="gridViewItemTap" itemLoading="gridViewItemLoading" loadMoreItems="gridViewLoadMoreItems">
+    <gv:CollectionView.itemTemplates>
+        <template key="odd">
+            <GridLayout backgroundColor="#33ffff" style="margin: 10 10 0 0">
+                <Label text="value" verticalAlignment="center"/>
+            </GridLayout>
+        </template>
+
+        <template key="even">
+            <GridLayout backgroundColor="#33ffff" rows="auto, auto" style="margin: 10 10 0 0">
+                <Label row="0" text="value" verticalAlignment="center"/>
+                <Label row="1" text="value" verticalAlignment="center"/>
+            </GridLayout>
+        </template>
+    </gv:CollectionView.itemTemplates>
+</gv:CollectionView>
+```
+```ts
+export function templateSelector(item: any, index: number, items: any) {
+    return index % 2 === 0 ? "even" : "odd";
+}
+```
+
+
+[](#usage-in-angular)
+
+## Usage in Angular
+
+Import the module into your project.
+
+```typescript
+import { CollectionViewModule } from '@nstudio/ui-collectionview/angular';
+
+@NgModule({
+    imports: [
+        CollectionViewModule,
+    ],
+})
+```
+### Simple Example
+
+Create a simple array of objects in your Typescript file.
+
+```typescript
+items = [
+    { index: 0, name: 'TURQUOISE', color: '#1abc9c' },
+    { index: 1, name: 'EMERALD', color: '#2ecc71' },
+    { index: 2, name: 'PETER RIVER', color: '#3498db' },
+    { index: 3, name: 'AMETHYST', color: '#9b59b6' },
+    { index: 4, name: 'WET ASPHALT', color: '#34495e' },
+    { index: 5, name: 'GREEN SEA', color: '#16a085' },
+    { index: 6, name: 'NEPHRITIS', color: '#27ae60' },
+    { index: 7, name: 'BELIZE HOLE', color: '#2980b9' },
+    { index: 8, name: 'WISTERIA', color: '#8e44ad' },
+    { index: 9, name: 'MIDNIGHT BLUE', color: '#2c3e50' }
+];
+```
+
+Add the following to your component HTML.
+```xml
+<CollectionView [items]="items" colWidth="50%" rowHeight="100">
+    <ng-template let-item="item">
+        <Label [text]="item.name"></Label>
+    </ng-template>
+</CollectionView>
+```
+
+### Templates Example
+If you want to use multiple item templates, you can do that very similarly to how you do it for the builtin `ListView` control. The only difference is that due to current limitations instead of using the `nsTemplateKey` directive you need to use the `cvTemplateKey` directive that comes from the CollectionView. (In a future version, once the framework allows it this will be changed and you will be able to use the same directive for the `CollectionView` as well)
+```html
+<CollectionView row="1" [items]="items" colWidth="33%" rowHeight="100" [itemTemplateSelector]="templateSelector">
+    <ng-template cvTemplateKey="Defender" let-item="item" let-odd="odd">
+        <StackLayout [nsRouterLink]="['/item', item.id]" borderColor="blue" borderWidth="2" borderRadius="5" verticalAlignment="stretch" class="list-group-item" [class.odd]="odd">
+        <Label verticalAlignment="center" [text]="item.name" class="list-group-item-text" textWrap="true"></Label>
+        </StackLayout>
+    </ng-template>
+
+    <ng-template cvTemplateKey="Goalkeeper" let-item="item" let-odd="odd">
+        <StackLayout [nsRouterLink]="['/item', item.id]" borderColor="black" borderWidth="2" borderRadius="5" verticalAlignment="stretch" class="list-group-item" [class.odd]="odd">
+        <Label verticalAlignment="center" [text]="item.name" class="list-group-item-text" textWrap="true"></Label>
+        </StackLayout>
+    </ng-template>
+
+    <ng-template cvTemplateKey="Midfielder" let-item="item" let-odd="odd">
+        <StackLayout [nsRouterLink]="['/item', item.id]" borderColor="yellow" borderWidth="2" borderRadius="5" verticalAlignment="stretch" class="list-group-item" [class.odd]="odd">
+        <Label verticalAlignment="center" [text]="item.name" class="list-group-item-text" textWrap="true"></Label>
+        </StackLayout>
+    </ng-template>
+
+    <ng-template cvTemplateKey="Forward" let-item="item" let-odd="odd">
+        <StackLayout [nsRouterLink]="['/item', item.id]" borderColor="red" borderWidth="2" borderRadius="5" verticalAlignment="stretch" class="list-group-item" [class.odd]="odd">
+        <Label verticalAlignment="center" [text]="item.name" class="list-group-item-text" textWrap="true"></Label>
+        </StackLayout>
+    </ng-template>
+</CollectionView>
+```
+
+For a more complete example, look in the `demo-ng` directory.
+
+
+[](#usage-in-vue)
+
+## Usage in Vue
+
+Register the plugin in your `app.ts`.
+
+```typescript
+import CollectionView from '@nstudio/ui-collectionview/vue';
+Vue.use(CollectionView);
+```
+
+### Simple Example
+In your component, add the following to make a simple array of objects.
+
+```typescript
+export default {
+    // ...
+    data() {
+        const items = [
+            { index: 0, name: 'TURQUOISE', color: '#1abc9c' },
+            { index: 1, name: 'EMERALD', color: '#2ecc71' },
+            { index: 2, name: 'PETER RIVER', color: '#3498db' },
+            { index: 3, name: 'AMETHYST', color: '#9b59b6' },
+            { index: 4, name: 'WET ASPHALT', color: '#34495e' },
+            { index: 5, name: 'GREEN SEA', color: '#16a085' },
+            { index: 6, name: 'NEPHRITIS', color: '#27ae60' },
+            { index: 7, name: 'BELIZE HOLE', color: '#2980b9' },
+            { index: 8, name: 'WISTERIA', color: '#8e44ad' },
+            { index: 9, name: 'MIDNIGHT BLUE', color: '#2c3e50' }
+        ];
+        return {
+            itemList: items
+        };
+    },
+    // ...
+};
+```
+
+Then add the following XML to your component.
+
+```xml
+<CollectionView
+    :items="itemList"
+    colWidth="50%"
+    rowHeight="100"
+>
+    <v-template>
+        <Label :text="item.name"></Label>
+    </v-template>
+</CollectionView>
+```
+
+For a more complete example, look in the `demo-vue` directory.
+
+
+[](#usage-in-svelte)
+
+## Usage in Svelte
+
+Register the plugin in your `app.ts`.
+
+```typescript
+import CollectionViewElement from '@nstudio/ui-collectionview/svelte';
+CollectionViewElement.register();
+```
+
+### Simple Example
+
+In you component, add the following to import Svelte `Templates` and to create a simple array of objects.
+
+```typescript
+import { Template } from 'svelte-native/components';
+
+const items = [
+    { index: 0, name: 'TURQUOISE', color: '#1abc9c' },
+    { index: 1, name: 'EMERALD', color: '#2ecc71' },
+    { index: 2, name: 'PETER RIVER', color: '#3498db' },
+    { index: 3, name: 'AMETHYST', color: '#9b59b6' },
+    { index: 4, name: 'WET ASPHALT', color: '#34495e' },
+    { index: 5, name: 'GREEN SEA', color: '#16a085' },
+    { index: 6, name: 'NEPHRITIS', color: '#27ae60' },
+    { index: 7, name: 'BELIZE HOLE', color: '#2980b9' },
+    { index: 8, name: 'WISTERIA', color: '#8e44ad' },
+    { index: 9, name: 'MIDNIGHT BLUE', color: '#2c3e50' }
+];
+```
+
+Then add the following XML to your component:
+
+```xml
+<collectionView 
+    {items} 
+    colWidth="50%"
+    rowHeight="100"
+>
+    <Template let:item>
+        <label text="{item.name}" />
+    </Template>
+</collectionView>
+```
+
+For a more complete example, look in the `demo-svelte` directory.
+
+
+[](#usage-in-react)
+
+## Usage in React
+
+Register the plugin in your `app.ts`.
+
+```typescript
+import { registerCollectionView } from '@nstudio/ui-collectionview/react';
+registerCollectionView();
+```
+
+### Simple Example
+
+In your component, add the following code to create a simple list.
+
+```tsx
+import { CollectionView } from '@nstudio/ui-collectionview/react';
+
+const items = [
+    { index: 0, name: 'TURQUOISE', color: '#1abc9c' },
+    { index: 1, name: 'EMERALD', color: '#2ecc71' },
+    { index: 2, name: 'PETER RIVER', color: '#3498db' },
+    { index: 3, name: 'AMETHYST', color: '#9b59b6' },
+    { index: 4, name: 'WET ASPHALT', color: '#34495e' },
+    { index: 5, name: 'GREEN SEA', color: '#16a085' },
+    { index: 6, name: 'NEPHRITIS', color: '#27ae60' },
+    { index: 7, name: 'BELIZE HOLE', color: '#2980b9' },
+    { index: 8, name: 'WISTERIA', color: '#8e44ad' },
+    { index: 9, name: 'MIDNIGHT BLUE', color: '#2c3e50' }
+];
+
+interface Item {
+    index: number;
+    name: string;
+    color: string;
+}
+
+const cellFactory = (item: Item) => (
+    <label text={item.name} />
+);
+
+export function First() {
+    return (
+        <CollectionView items={items} colWidth="50%" rowHeight="100" cellFactory={cellFactory} width="100%" height="100%" />
+    );
+}
+```
+
+
+[](#questions)
+
+## Questions
+
+If you have any questions/issues/comments please feel free to create an issue or start a conversation in the [NativeScript Community Discord](https://nativescript.org/discord).

package/angular/collectionview.component.d.ts

@@ -0,0 +1,82 @@
+import { AfterContentInit, ComponentRef, DoCheck, ElementRef, EmbeddedViewRef, EventEmitter, IterableDiffers, NgZone, OnDestroy, TemplateRef, ViewContainerRef } from '@angular/core';
+import { CollectionViewItemEventData } from '@nstudio/ui-collectionview';
+import { DetachedLoader, NativeScriptRendererFactory } from '@nativescript/angular';
+import { View } from '@nativescript/core';
+import * as i0 from "@angular/core";
+export declare class ItemContext {
+    $implicit?: any;
+    item?: any;
+    index?: number;
+    even?: boolean;
+    odd?: boolean;
+    constructor($implicit?: any, item?: any, index?: number, even?: boolean, odd?: boolean);
+}
+export interface SetupItemViewArgs {
+    view: EmbeddedViewRef<any>;
+    data: any;
+    index: number;
+    context: ItemContext;
+}
+export declare class CollectionViewComponent implements DoCheck, OnDestroy, AfterContentInit {
+    private _elementRef;
+    private _iterableDiffers;
+    private _renderer;
+    private _ngZone;
+    get nativeElement(): any;
+    get listView(): any;
+    loader: ViewContainerRef;
+    setupItemView: EventEmitter<SetupItemViewArgs>;
+    itemTemplateQuery: TemplateRef<ItemContext>;
+    autoReuseViews: boolean;
+    detachedLoaderFactory(): ComponentRef<DetachedLoader>;
+    get itemTemplate(): any;
+    set itemTemplate(value: any);
+    get items(): any;
+    set items(value: any);
+    private _collectionView;
+    private _items;
+    private _differ;
+    private _itemTemplate;
+    private _templateMap;
+    private _loaders;
+    constructor(_elementRef: ElementRef, _iterableDiffers: IterableDiffers, _renderer: NativeScriptRendererFactory, _ngZone: NgZone);
+    private itemViewLoader;
+    ngAfterContentInit(): void;
+    ngOnDestroy(): void;
+    ngDoCheck(): void;
+    registerTemplate(key: string, template: TemplateRef<ItemContext>): void;
+    onItemLoading(args: CollectionViewItemEventData): void;
+    onItemRecyclingInternal(args: any): void;
+    onItemDisposingInternal(args: any): void;
+    setupViewRef(view: EmbeddedViewRef<ItemContext>, data: any, index: number): void;
+    protected getItemTemplateViewFactory(template: TemplateRef<ItemContext>): () => View;
+    viewPool: Map<TemplateRef<ItemContext>, {
+        scrapSize: number;
+        scrapHead: Set<EmbeddedViewRef<ItemContext>>;
+    }>;
+    private storeViewRef;
+    viewToTemplate: WeakMap<EmbeddedViewRef<any>, TemplateRef<any>>;
+    viewToLoader: WeakMap<EmbeddedViewRef<any>, ComponentRef<DetachedLoader>>;
+    private getOrCreate;
+    private getView;
+    private getViewPool;
+    private setItemTemplates;
+    private detectChangesOnChild;
+    private refresh;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CollectionViewComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CollectionViewComponent, "CollectionView", never, { "autoReuseViews": "autoReuseViews"; "itemTemplate": "itemTemplate"; "items": "items"; }, { "setupItemView": "setupItemView"; }, ["itemTemplateQuery"], never, false, never>;
+}
+export interface ComponentView {
+    rootNodes: any[];
+    destroy(): void;
+}
+export declare type RootLocator = (nodes: any[], nestLevel: number) => View;
+export declare function getItemViewRoot(viewRef: ComponentView, rootLocator?: RootLocator): View;
+export declare class TemplateKeyDirective {
+    private templateRef;
+    private collectionView;
+    constructor(templateRef: TemplateRef<any>, collectionView: CollectionViewComponent);
+    set cvTemplateKey(value: any);
+    static ɵfac: i0.ɵɵFactoryDeclaration<TemplateKeyDirective, [null, { host: true; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TemplateKeyDirective, "[cvTemplateKey]", never, { "cvTemplateKey": "cvTemplateKey"; }, {}, never, never, false, never>;
+}