@nativescript-community/ui-pager 13.0.30 → 13.0.34

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (42) hide show
  1. package/CHANGELOG.md +35 -0
  2. package/README.md +186 -266
  3. package/angular/esm2020/index.mjs +54 -0
  4. package/angular/esm2020/nativescript-community-ui-pager-angular.mjs +2 -0
  5. package/angular/esm2020/pager-items-comp.mjs +304 -0
  6. package/angular/fesm2015/nativescript-community-ui-pager-angular.mjs +379 -0
  7. package/angular/fesm2015/nativescript-community-ui-pager-angular.mjs.map +1 -0
  8. package/angular/{fesm2015/nativescript-community-ui-pager-angular.js → fesm2020/nativescript-community-ui-pager-angular.mjs} +15 -24
  9. package/angular/fesm2020/nativescript-community-ui-pager-angular.mjs.map +1 -0
  10. package/angular/package.json +20 -6
  11. package/{pager.android.d.ts → index.android.d.ts} +3 -3
  12. package/{pager.android.js → index.android.js} +22 -33
  13. package/index.android.js.map +1 -0
  14. package/{pager.common.d.ts → index.common.d.ts} +2 -1
  15. package/{pager.common.js → index.common.js} +38 -43
  16. package/index.common.js.map +1 -0
  17. package/{pager.d.ts → index.d.ts} +2 -2
  18. package/{pager.ios.d.ts → index.ios.d.ts} +20 -18
  19. package/{pager.ios.js → index.ios.js} +177 -184
  20. package/index.ios.js.map +1 -0
  21. package/package.json +17 -4
  22. package/platforms/android/native-api-usage.json +7 -5
  23. package/react/index.d.ts +7 -7
  24. package/react/index.js +1 -1
  25. package/react/index.js.map +1 -1
  26. package/references.d.ts +1 -0
  27. package/svelte/index.d.ts +1 -1
  28. package/svelte/index.js +6 -6
  29. package/svelte/index.js.map +1 -1
  30. package/typings/objc!CHIPageControl.d.ts +197 -0
  31. package/vue/pager.js +15 -15
  32. package/vue/pager.js.map +1 -1
  33. package/.pnpm-debug.log +0 -1
  34. package/angular/bundles/nativescript-community-ui-pager-angular.umd.js +0 -753
  35. package/angular/bundles/nativescript-community-ui-pager-angular.umd.js.map +0 -1
  36. package/angular/esm2015/index.js +0 -55
  37. package/angular/esm2015/nativescript-community-ui-pager-angular.js +0 -2
  38. package/angular/esm2015/pager-items-comp.js +0 -312
  39. package/angular/fesm2015/nativescript-community-ui-pager-angular.js.map +0 -1
  40. package/pager.android.js.map +0 -1
  41. package/pager.common.js.map +0 -1
  42. package/pager.ios.js.map +0 -1
package/CHANGELOG.md CHANGED
@@ -3,6 +3,41 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [13.0.34](https://github.com/nativescript-community/ui-pager/compare/v13.0.33...v13.0.34) (2022-01-19)
7
+
8
+ **Note:** Version bump only for package @nativescript-community/ui-pager
9
+
10
+
11
+
12
+
13
+
14
+ ## [13.0.33](https://github.com/nativescript-community/ui-pager/compare/v13.0.32...v13.0.33) (2021-11-17)
15
+
16
+ **Note:** Version bump only for package @nativescript-community/ui-pager
17
+
18
+
19
+
20
+
21
+
22
+ ## [13.0.32](https://github.com/nativescript-community/ui-pager/compare/v13.0.31...v13.0.32) (2021-11-15)
23
+
24
+
25
+ ### Bug Fixes
26
+
27
+ * missing platforms directory ([44bff68](https://github.com/nativescript-community/ui-pager/commit/44bff68074855d14032201fe9198e1519ab22ca0))
28
+
29
+
30
+
31
+
32
+
33
+ ## [13.0.31](https://github.com/nativescript-community/ui-pager/compare/v13.0.30...v13.0.31) (2021-10-22)
34
+
35
+ **Note:** Version bump only for package @nativescript-community/ui-pager
36
+
37
+
38
+
39
+
40
+
6
41
  ## [13.0.30](https://github.com/nativescript-community/ui-pager/compare/v13.0.29...v13.0.30) (2021-09-29)
7
42
 
8
43
  **Note:** Version bump only for package @nativescript-community/ui-pager
package/README.md CHANGED
@@ -1,310 +1,230 @@
1
- [![npm](https://img.shields.io/npm/v/@nativescript-community/ui-pager.svg)](https://www.npmjs.com/package/@nativescript-community/ui-pager)
2
- [![npm](https://img.shields.io/npm/dt/@nativescript-community/ui-pager.svg?label=npm%20downloads)](https://www.npmjs.com/package/@nativescript-community/ui-pager)
1
+ <!-- ⚠️ This README has been generated from the file(s) "blueprint.md" ⚠️-->
2
+ <!-- !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
3
+ !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
4
+ !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
5
+ !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
6
+ !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
7
+ !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
8
+ !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
9
+ !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
10
+ !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
11
+ DO NOT EDIT THIS READEME DIRECTLY! Edit "bluesprint.md" instead.
12
+ !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
13
+ !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
14
+ !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
15
+ !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
16
+ !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
17
+ !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
18
+ !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
19
+ !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
20
+ !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->
21
+ <h1 align="center">@nativescript-community/ui-pager</h1>
22
+ <p align="center">
23
+ <a href="https://npmcharts.com/compare/@nativescript-community/ui-pager?minimal=true"><img alt="Downloads per month" src="https://img.shields.io/npm/dm/@nativescript-community/ui-pager.svg" height="20"/></a>
24
+ <a href="https://www.npmjs.com/package/@nativescript-community/ui-pager"><img alt="NPM Version" src="https://img.shields.io/npm/v/@nativescript-community/ui-pager.svg" height="20"/></a>
25
+ </p>
26
+
27
+ <p align="center">
28
+ <b>A NativeScript Pager / Carousel component that allows the user to swipe left and right through pages of data. </b></br>
29
+ <sub><sub>
30
+ </p>
31
+
32
+ <br />
33
+
34
+
35
+ | <img src="https://github.com/nativescript-community/ui-pager/raw/master/images/demo-ios.gif" height="500" /> | <img src="https://github.com/nativescript-community/ui-pager/raw/master/images/demo-android.gif" height="500" /> |
36
+ | --- | ----------- |
37
+ | iOS Demo | Android Demo |
38
+
39
+
40
+ [](#table-of-contents)
41
+
42
+ ## Table of Contents
43
+
44
+ * [Installation](#installation)
45
+ * [API](#api)
46
+ * [Properties](#properties)
47
+ * [Usage in Angular](#usage-in-angular)
48
+ * [Examples](#examples)
49
+ * [Usage in React](#usage-in-react)
50
+ * [Examples](#examples-1)
51
+ * [Usage in Svelte](#usage-in-svelte)
52
+ * [Examples](#examples-2)
53
+ * [Usage in Vue](#usage-in-vue)
54
+ * [Examples](#examples-3)
55
+ * [Demos and Development](#demos-and-development)
56
+ * [Setup](#setup)
57
+ * [Build](#build)
58
+ * [Demos](#demos)
59
+ * [Questions](#questions)
60
+
61
+
62
+ [](#installation)
63
+
64
+ ## Installation
65
+ Run the following command from the root of your project:
66
+
67
+ `ns plugin add @nativescript-community/ui-pager`
68
+
69
+
70
+ [](#api)
71
+
72
+ ## API
73
+
74
+ ### Properties
75
+
76
+ | Property | Type |
77
+ | - | - |
78
+ | items | `array` or `ItemsSource`
79
+ | selectedIndex | `number` |
80
+ | canGoRight | `boolean` |
81
+ | canGoLeft | `boolean` |
82
+ | spacing | `PercentLengthType` |
83
+ | peaking | `PercentLengthType` |
84
+ | perPage | `number` |
85
+ | indicator | `string` ('disable', 'none', 'worm', 'fill', 'swap', 'thin_worm', 'flat')|
86
+ | circularMode | `boolean` |
87
+ | autoPlayDelay | `number` |
88
+ | autoPlay | `boolean` |
89
+ | orientation | `string` ('horizontal' or 'vertical') |
90
+ | autoPlay | `boolean` |
91
+ | disableSwipe | `boolean` |
92
+ | showIndicator | `boolean` |
93
+ | indicatorColor | `Color` or `string` |
94
+ | indicatorSelectedColor | `Color` or `string` |
3
95
 
4
- # NativeScript Pager
5
96
 
6
- ## Install
97
+ ```
98
+ Pager for NativeScript supports the core ObservableArray module part of the core NativeScript modules collection. Using an ObservableArray instance as a source for Pager will ensure that changes in the source collection will be automatically taken care of by the control.
99
+ ```
7
100
 
8
- - `tns plugin add @nativescript-community/ui-pager`
9
101
 
10
- ## Usage
102
+
103
+ [](#usage-in-angular)
104
+
105
+ ## Usage in Angular
11
106
 
12
- **Note** v11+
107
+ Import the module into your project.
108
+
109
+ ```typescript
110
+ import { PagerModule } from "@nativescript-community/ui-pager/angular";
13
111
 
112
+ @NgModule({
113
+ imports: [
114
+ PagerModule,
115
+ ],
116
+ })
14
117
  ```
15
- Pager for NativeScript supports the core ObservableArray module part of the core NativeScript modules collection. Using an ObservableArray instance as a source for Pager will ensure that changes in the source collection will be automatically taken care of by the control.
16
- ````
17
118
 
119
+ ### Examples
18
120
 
19
- IMPORTANT: Make sure you include `xmlns:pager="@nativescript-community/ui-pager"` on the Page element any element can be used in the pager
121
+ - [Static Pager](demo-snippets/ng/static-pager)
122
+ - A simple pager example using static content.
123
+ - [Basic Pager](demo-snippets/ng/basic-pager)
124
+ - A simple pager example using dynamic content.
20
125
 
21
- ```xml
22
- <pager:Pager items="{{items}}" row="2" id="pager" spacing="2%" peaking="10%" transformers="scale" pagesCount="10" showIndicator="true" backgroundColor="lightsteelblue">
23
- <pager:Pager.itemTemplate>
24
- <GridLayout rows="auto, *" columns="*" backgroundColor="red">
25
- <Label text="{{title}}"/>
26
- <Image row="1" src="{{image}}"/>
27
- </GridLayout>
28
- </pager:Pager.itemTemplate>
29
- </pager:Pager>
30
- ```
126
+
127
+ [](#usage-in-react)
128
+
129
+ ## Usage in React
130
+
131
+ Import the module into your project.
31
132
 
32
- ### Multi Template
33
-
34
- ```xml
35
- <c:Pager selectedIndexChange="selectedIndexChange" itemTemplateSelector="$index % 2 === 0 ? 'even' : 'odd'" selectedIndex="5" items="{{items}}" row="4" id="pager" pagesCount="10" showIndicator="true" backgroundColor="lightsteelblue">
36
- <Pager.itemTemplates>
37
- <template key="even">
38
- <GridLayout rows="auto,auto,*" columns="*">
39
- <Label text="Even"/>
40
- <Label row="1" text="{{title}}"/>
41
- <Image loaded="loadedImage" row="2" src="{{image}}"/>
42
- </GridLayout>
43
- </template>
44
- <template key="odd">
45
- <GridLayout rows="auto,auto ,auto,*" columns="*" backgroundColor="white">
46
- <Label text="Odd"/>
47
- <Label row="1" text="{{title}}"/>
48
- <StackLayout row="2">
49
- <Label text="{{image}}"/>
50
- </StackLayout>
51
- <Image loaded="loadedImage" row="3" src="{{image}}"/>
52
- </GridLayout>
53
- </template>
54
- </Pager.itemTemplates>
55
- <!-- <Pager.itemTemplate><GridLayout rows="auto,*" columns="*"><Label row="1" text="{{title}}"/><Image loaded="loadedImage" row="2" src="{{image}}"/></GridLayout></Pager.itemTemplate> -->
56
- </c:Pager>
133
+ ```typescript
134
+ import { Pager } from '@nativescript-community/ui-pager/react';
57
135
  ```
58
136
 
59
- ### Static Views
60
-
61
- ```xml
62
- <c:Pager selectedIndexChange="selectedIndexChange" row="4" id="pager"
63
- showIndicator="true" backgroundColor="lightsteelblue">
64
- <c:PagerItem backgroundColor="red">
65
- <Label text="First"></Label>
66
- </c:PagerItem>
67
- <c:PagerItem backgroundColor="white">
68
- <Label text="Second" ></Label>
69
- </c:PagerItem>
70
- <c:PagerItem backgroundColor="black">
71
- <Label text="Third" color="white"></Label>
72
- </c:PagerItem>
73
- <c:PagerItem backgroundColor="green">
74
- <Label text="Fourth"></Label>
75
- </c:PagerItem>
76
- </c:Pager>
137
+ ### Examples
138
+
139
+ - [Basic Pager](demo-snippets/react/BasicPager.tsx)
140
+ - A simple pager example using dynamic content.
141
+
142
+ [](#usage-in-svelte)
143
+
144
+ ## Usage in Svelte
145
+
146
+ Import the module into your project.
77
147
 
148
+ ```typescript
149
+ import { registerNativeViewElement } from 'svelte-native/dom';
150
+
151
+ import PagerElement from '@nativescript-community/ui-pager/svelte';
152
+ import { PagerItem } from '@nativescript-community/ui-pager';
153
+
154
+ PagerElement.register();
155
+ registerNativeViewElement('pageritem', () => PagerItem);
78
156
  ```
79
157
 
80
- ### Vue
158
+ ### Examples
159
+
160
+ - [Static Pager](demo-snippets/svelte/StaticPager.svelte)
161
+ - A simple pager example using static content.
162
+ - [Basic Pager](demo-snippets/svelte/BasicPager.svelte)
163
+ - A simple pager example using dynamic content.
164
+
165
+
166
+ [](#usage-in-vue)
167
+
168
+ ## Usage in Vue
81
169
 
82
- ```js
170
+ Import the module into your project.
171
+
172
+ ```typescript
83
173
  import Vue from 'nativescript-vue';
84
174
  import Pager from '@nativescript-community/ui-pager/vue';
85
175
 
86
176
  Vue.use(Pager);
87
177
  ```
88
178
 
89
- ```html
90
- <template>
91
- <Pager for="item in items">
92
- <v-template>
93
- <GridLayout class="pager-item" rows="auto, *" columns="*">
94
- <Label :text="item.title" />
95
- <Image stretch="fill" row="1" :src="item.image" />
96
- </GridLayout>
97
- </v-template>
98
- <v-template if="$odd">
99
- <GridLayout class="pager-item" rows="auto, *" columns="*">
100
- <Image stretch="fill" :src="item.image" />
101
- <Label :text="item.title" row="1"/>
102
- </GridLayout>
103
- </v-template>
104
- </Pager>
105
- </template>
106
- ```
179
+ ### Examples
107
180
 
108
- ### Static Views
109
-
110
- ```html
111
- <Pager height="100%" :selectedIndex="1">
112
- <PagerItem backgroundColor="red"> <label text="First"></label> </PagerItem>
113
- <PagerItem backgroundColor="white"> <label text="Second"></label> </PagerItem>
114
- <PagerItem backgroundColor="black">
115
- <label text="Third" color="white"></label>
116
- </PagerItem>
117
- <PagerItem backgroundColor="green"> <label text="Fourth"></label> </PagerItem>
118
- </Pager>
119
- ```
181
+ - [Static Pager](demo-snippets/vue/StaticPager.vue)
182
+ - A simple pager example using static content.
183
+ - [Basic Pager](demo-snippets/vue/BasicPager.vue)
184
+ - A simple pager example using dynamic content.
120
185
 
121
- ### Angular
122
-
123
- ```js
124
- import { PagerModule } from "@nativescript-community/ui-pager/angular";
125
186
 
126
- @NgModule({
127
- imports: [
128
- PagerModule
129
- ],
130
- declarations: [
131
- AppComponent
132
- ],
133
- bootstrap: [AppComponent]
134
- })
135
- ```
187
+
188
+ [](#demos-and-development)
189
+
190
+ ## Demos and Development
136
191
 
137
- _Angular v2_
138
-
139
- ```html
140
- <Pager
141
- [items]="items"
142
- #pager
143
- [selectedIndex]="currentPagerIndex"
144
- (selectedIndexChange)="onIndexChanged($event)"
145
- class="pager"
146
- >
147
- <template let-i="index" let-item="item">
148
- <GridLayout
149
- class="pager-item"
150
- rows="auto, *"
151
- columns="*"
152
- backgroundColor="red"
153
- >
154
- <label [text]="item.title"></label>
155
- <image row="1" [src]="item.image"></image>
156
- </GridLayout>
157
- </template>
158
- </Pager>
159
- ```
160
192
 
161
- _Angular v4+_
162
-
163
- ```html
164
- <Pager
165
- [items]="items"
166
- #pager
167
- [selectedIndex]="currentPagerIndex"
168
- (selectedIndexChange)="onIndexChanged($event)"
169
- class="pager"
170
- >
171
- <ng-template let-i="index" let-item="item">
172
- <GridLayout
173
- class="pager-item"
174
- rows="auto, *"
175
- columns="*"
176
- backgroundColor="red"
177
- >
178
- <label [text]="item.title"></label>
179
- <image row="1" [src]="item.image"></image>
180
- </GridLayout>
181
- </ng-template>
182
- </Pager>
183
- ```
193
+ ### Setup
184
194
 
185
- ### Multi Template
195
+ To run the demos, you must clone this repo **recursively**.
186
196
 
187
- ```ts
188
- public templateSelector = (item: any, index: number, items: any) => {
189
- return index % 2 === 0 ? 'even' : 'odd';
190
- }
191
197
  ```
192
-
193
- ```html
194
- <Pager
195
- row="1"
196
- [items]="items | async"
197
- [itemTemplateSelector]="templateSelector"
198
- #pager
199
- [selectedIndex]="currentPagerIndex"
200
- (selectedIndexChange)="onIndexChanged($event)"
201
- class="pager"
202
- backgroundColor="lightsteelblue"
203
- >
204
- <ng-template pagerTemplateKey="even" let-i="index" let-item="item">
205
- <GridLayout class="pager-item" rows="auto,auto,*" columns="*">
206
- <label text="Even"></label> <label row="1" [text]="item.title"></label>
207
- <image loaded="loadedImage" row="2" [src]="item.image"></image>
208
- </GridLayout>
209
- </ng-template>
210
-
211
- <ng-template pagerTemplateKey="odd" let-i="index" let-item="item">
212
- <GridLayout
213
- class="pager-item"
214
- rows="auto,auto,auto,*"
215
- columns="*"
216
- backgroundColor="white"
217
- >
218
- <label text="Odd"></label> <label row="1" [text]="item.title"></label>
219
- <StackLayout row="2"> <label [text]="item.image"></label> </StackLayout>
220
- <image loaded="loadedImage" row="3" [src]="item.image"></image>
221
- </GridLayout>
222
- </ng-template>
223
- </Pager>
198
+ git clone https://github.com/@nativescript-community/ui-pager.git --recursive
224
199
  ```
225
200
 
226
- ### Static Views
227
-
228
- ```html
229
- <Pager
230
- backgroundColor="orange"
231
- row="1"
232
- #pager
233
- [selectedIndex]="1"
234
- height="100%"
235
- >
236
- <StackLayout *pagerItem backgroundColor="red">
237
- <label text="First"></label>
238
- </StackLayout>
239
- <StackLayout *pagerItem backgroundColor="white">
240
- <label text="Second"></label>
241
- </StackLayout>
242
- <StackLayout *pagerItem backgroundColor="black">
243
- <label text="Third" color="white"></label>
244
- </StackLayout>
245
- <StackLayout *pagerItem backgroundColor="green">
246
- <label text="Fourth"></label>
247
- </StackLayout>
248
- </Pager>
201
+ **Install Dependencies:**
202
+ ```bash
203
+ npm i # or 'yarn install' or 'pnpm install'
249
204
  ```
250
- ### React
251
-
252
- ```typescript jsx
253
- import {$Pager} from '@nativescript-community/ui-pager/react';
254
- return (
255
- <$Pager
256
- height={{ unit: "%", value: 100 }}
257
- selectedIndex={this.selectedIndex}
258
- selectedIndexChange={this.selectedIndexChange.bind(this)}
259
- items={this.items}
260
- cellFactory={
261
- (item, ref) => {
262
- return (
263
- <$StackLayout id={item.title} ref={ref}>
264
- <$Label text={item.title}/>
265
- <$ImageCacheIt stretch={'aspectFill'}
266
- src={item.image}/>
267
- </$StackLayout>
268
- );
269
- }
270
- }/>
271
- )
272
- ```
273
-
274
- ### Static Views
275
-
276
- ```typescript jsx
277
- return(<$Pager row={0} col={0} selectedIndex={this.selectedIndex} height={{unit: '%', value: 100}}>
278
- <$PagerItem backgroundColor={'red'}>
279
- <$Label text={'First'}/>
280
- </$PagerItem>
281
- <$PagerItem backgroundColor={'white'}>
282
- <$Label text={'Second'}/>
283
- </$PagerItem>
284
- <$PagerItem backgroundColor={'black'}>
285
- <$Label text={'Third'} color={new Color('white')}/>
286
- </$PagerItem>
287
- <$PagerItem backgroundColor={'green'}>
288
- <$Label text={'Fourth'}/>
289
- </$PagerItem>
290
- <$PagerItem backgroundColor={'pink'}>
291
- <$Label text={'Fifth'}/>
292
- </$PagerItem>
293
- </$Pager>)
294
205
 
295
- ```
206
+ **Interactive Menu:**
296
207
 
208
+ To start the interactive menu, run `npm start` (or `yarn start` or `pnpm start`). This will list all of the commonly used scripts.
297
209
 
210
+ ### Build
298
211
 
212
+ ```bash
213
+ npm run build
299
214
 
215
+ npm run build.angular # or for Angular
216
+ ```
300
217
 
218
+ ### Demos
301
219
 
302
- ## Config
220
+ ```bash
221
+ npm run demo.[ng|react|svelte|vue].[ios|android]
303
222
 
304
- ```xml
305
- <Pager cache="false" disableSwipe="true" disableAnimation="true" selectedIndex="5">
223
+ npm run demo.svelte.ios # Example
306
224
  ```
225
+
226
+ [](#questions)
227
+
228
+ ## Questions
307
229
 
308
- | IOS | Android |
309
- | --------------------------------------- | -------------------------------------------- |
310
- | ![ios](https://i.imgur.com/mvkqXOa.gif) | ![android](https://i.imgur.com/LQgOZ0wh.gif) |
230
+ 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).
@@ -0,0 +1,54 @@
1
+ import { ChangeDetectionStrategy, Component, NO_ERRORS_SCHEMA, NgModule, forwardRef } from '@angular/core';
2
+ import { PagerItemDirective, TEMPLATED_ITEMS_COMPONENT, TemplateKeyDirective, TemplatedItemsComponent } from './pager-items-comp';
3
+ import * as i0 from "@angular/core";
4
+ export { PagerItemDirective, TemplatedItemsComponent, TemplateKeyDirective } from './pager-items-comp';
5
+ export class PagerComponent extends TemplatedItemsComponent {
6
+ constructor(_elementRef, _iterableDiffers) {
7
+ super(_elementRef, _iterableDiffers);
8
+ }
9
+ get nativeElement() {
10
+ return this.templatedItemsView;
11
+ }
12
+ }
13
+ PagerComponent.ɵfac = function PagerComponent_Factory(t) { return new (t || PagerComponent)(i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i0.IterableDiffers)); };
14
+ PagerComponent.ɵcmp = i0.ɵɵdefineComponent({ type: PagerComponent, selectors: [["Pager"]], features: [i0.ɵɵProvidersFeature([
15
+ {
16
+ provide: TEMPLATED_ITEMS_COMPONENT,
17
+ useExisting: forwardRef(() => PagerComponent)
18
+ }
19
+ ]), i0.ɵɵInheritDefinitionFeature], decls: 3, vars: 0, consts: [["loader", ""]], template: function PagerComponent_Template(rf, ctx) { if (rf & 1) {
20
+ i0.ɵɵelementStart(0, "DetachedContainer");
21
+ i0.ɵɵelement(1, "Placeholder", null, 0);
22
+ i0.ɵɵelementEnd();
23
+ } }, encapsulation: 2, changeDetection: 0 });
24
+ (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PagerComponent, [{
25
+ type: Component,
26
+ args: [{
27
+ selector: 'Pager',
28
+ template: ` <DetachedContainer>
29
+ <Placeholder #loader></Placeholder>
30
+ </DetachedContainer>`,
31
+ changeDetection: ChangeDetectionStrategy.OnPush,
32
+ providers: [
33
+ {
34
+ provide: TEMPLATED_ITEMS_COMPONENT,
35
+ useExisting: forwardRef(() => PagerComponent)
36
+ }
37
+ ]
38
+ }]
39
+ }], function () { return [{ type: i0.ElementRef }, { type: i0.IterableDiffers }]; }, null); })();
40
+ export class PagerModule {
41
+ }
42
+ PagerModule.ɵfac = function PagerModule_Factory(t) { return new (t || PagerModule)(); };
43
+ PagerModule.ɵmod = i0.ɵɵdefineNgModule({ type: PagerModule });
44
+ PagerModule.ɵinj = i0.ɵɵdefineInjector({});
45
+ (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PagerModule, [{
46
+ type: NgModule,
47
+ args: [{
48
+ declarations: [PagerComponent, TemplateKeyDirective, PagerItemDirective],
49
+ exports: [PagerComponent, TemplateKeyDirective, PagerItemDirective],
50
+ schemas: [NO_ERRORS_SCHEMA]
51
+ }]
52
+ }], null, null); })();
53
+ (function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(PagerModule, { declarations: [PagerComponent, TemplateKeyDirective, PagerItemDirective], exports: [PagerComponent, TemplateKeyDirective, PagerItemDirective] }); })();
54
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvdWktcGFnZXIvYW5ndWxhci9pbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsU0FBUyxFQUErQixnQkFBZ0IsRUFBRSxRQUFRLEVBQUUsVUFBVSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBR3hJLE9BQU8sRUFBRSxrQkFBa0IsRUFBRSx5QkFBeUIsRUFBRSxvQkFBb0IsRUFBRSx1QkFBdUIsRUFBRSxNQUFNLG9CQUFvQixDQUFDOztBQUVsSSxPQUFPLEVBQUUsa0JBQWtCLEVBQUUsdUJBQXVCLEVBQUUsb0JBQW9CLEVBQUUsTUFBTSxvQkFBb0IsQ0FBQztBQWV2RyxNQUFNLE9BQU8sY0FBZSxTQUFRLHVCQUF1QjtJQU92RCxZQUFZLFdBQXVCLEVBQUUsZ0JBQWlDO1FBQ2xFLEtBQUssQ0FBQyxXQUFXLEVBQUUsZ0JBQWdCLENBQUMsQ0FBQztJQUN6QyxDQUFDO0lBUkQsSUFBVyxhQUFhO1FBQ3BCLE9BQU8sSUFBSSxDQUFDLGtCQUFrQixDQUFDO0lBQ25DLENBQUM7OzRFQUhRLGNBQWM7bURBQWQsY0FBYywyREFQWjtZQUNQO2dCQUNJLE9BQU8sRUFBRSx5QkFBeUI7Z0JBQ2xDLFdBQVcsRUFBRSxVQUFVLENBQUMsR0FBRyxFQUFFLENBQUMsY0FBYyxDQUFDO2FBQ2hEO1NBQ0o7UUFUVyx5Q0FBbUI7UUFDM0IsdUNBQW1DO1FBQ3ZDLGlCQUFvQjs7dUZBU1gsY0FBYztjQWIxQixTQUFTO2VBQUM7Z0JBQ1AsUUFBUSxFQUFFLE9BQU87Z0JBQ2pCLFFBQVEsRUFBRTs7eUJBRVc7Z0JBQ3JCLGVBQWUsRUFBRSx1QkFBdUIsQ0FBQyxNQUFNO2dCQUMvQyxTQUFTLEVBQUU7b0JBQ1A7d0JBQ0ksT0FBTyxFQUFFLHlCQUF5Qjt3QkFDbEMsV0FBVyxFQUFFLFVBQVUsQ0FBQyxHQUFHLEVBQUUsZUFBZSxDQUFDO3FCQUNoRDtpQkFDSjthQUNKOztBQWtCRCxNQUFNLE9BQU8sV0FBVzs7c0VBQVgsV0FBVzsrQ0FBWCxXQUFXOzt1RkFBWCxXQUFXO2NBTHZCLFFBQVE7ZUFBQztnQkFDTixZQUFZLEVBQUUsQ0FBQyxjQUFjLEVBQUUsb0JBQW9CLEVBQUUsa0JBQWtCLENBQUM7Z0JBQ3hFLE9BQU8sRUFBRSxDQUFDLGNBQWMsRUFBRSxvQkFBb0IsRUFBRSxrQkFBa0IsQ0FBQztnQkFDbkUsT0FBTyxFQUFFLENBQUMsZ0JBQWdCLENBQUM7YUFDOUI7O3dGQUNZLFdBQVcsbUJBakJYLGNBQWMsRUFhUSxvQkFBb0IsRUFBRSxrQkFBa0IsYUFiOUQsY0FBYyxFQWNHLG9CQUFvQixFQUFFLGtCQUFrQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDb21wb25lbnQsIEVsZW1lbnRSZWYsIEl0ZXJhYmxlRGlmZmVycywgTk9fRVJST1JTX1NDSEVNQSwgTmdNb2R1bGUsIGZvcndhcmRSZWYgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuaW1wb3J0IHsgUGFnZXIgfSBmcm9tICdAbmF0aXZlc2NyaXB0LWNvbW11bml0eS91aS1wYWdlcic7XG5pbXBvcnQgeyBQYWdlckl0ZW1EaXJlY3RpdmUsIFRFTVBMQVRFRF9JVEVNU19DT01QT05FTlQsIFRlbXBsYXRlS2V5RGlyZWN0aXZlLCBUZW1wbGF0ZWRJdGVtc0NvbXBvbmVudCB9IGZyb20gJy4vcGFnZXItaXRlbXMtY29tcCc7XG5cbmV4cG9ydCB7IFBhZ2VySXRlbURpcmVjdGl2ZSwgVGVtcGxhdGVkSXRlbXNDb21wb25lbnQsIFRlbXBsYXRlS2V5RGlyZWN0aXZlIH0gZnJvbSAnLi9wYWdlci1pdGVtcy1jb21wJztcblxuQENvbXBvbmVudCh7XG4gICAgc2VsZWN0b3I6ICdQYWdlcicsXG4gICAgdGVtcGxhdGU6IGAgPERldGFjaGVkQ29udGFpbmVyPlxuICAgICAgICA8UGxhY2Vob2xkZXIgI2xvYWRlcj48L1BsYWNlaG9sZGVyPlxuICAgIDwvRGV0YWNoZWRDb250YWluZXI+YCxcbiAgICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgICBwcm92aWRlcnM6IFtcbiAgICAgICAge1xuICAgICAgICAgICAgcHJvdmlkZTogVEVNUExBVEVEX0lURU1TX0NPTVBPTkVOVCxcbiAgICAgICAgICAgIHVzZUV4aXN0aW5nOiBmb3J3YXJkUmVmKCgpID0+IFBhZ2VyQ29tcG9uZW50KVxuICAgICAgICB9XG4gICAgXVxufSlcbmV4cG9ydCBjbGFzcyBQYWdlckNvbXBvbmVudCBleHRlbmRzIFRlbXBsYXRlZEl0ZW1zQ29tcG9uZW50IHtcbiAgICBwdWJsaWMgZ2V0IG5hdGl2ZUVsZW1lbnQoKTogUGFnZXIge1xuICAgICAgICByZXR1cm4gdGhpcy50ZW1wbGF0ZWRJdGVtc1ZpZXc7XG4gICAgfVxuXG4gICAgcHJvdGVjdGVkIHRlbXBsYXRlZEl0ZW1zVmlldzogUGFnZXI7XG5cbiAgICBjb25zdHJ1Y3RvcihfZWxlbWVudFJlZjogRWxlbWVudFJlZiwgX2l0ZXJhYmxlRGlmZmVyczogSXRlcmFibGVEaWZmZXJzKSB7XG4gICAgICAgIHN1cGVyKF9lbGVtZW50UmVmLCBfaXRlcmFibGVEaWZmZXJzKTtcbiAgICB9XG59XG5cbkBOZ01vZHVsZSh7XG4gICAgZGVjbGFyYXRpb25zOiBbUGFnZXJDb21wb25lbnQsIFRlbXBsYXRlS2V5RGlyZWN0aXZlLCBQYWdlckl0ZW1EaXJlY3RpdmVdLFxuICAgIGV4cG9ydHM6IFtQYWdlckNvbXBvbmVudCwgVGVtcGxhdGVLZXlEaXJlY3RpdmUsIFBhZ2VySXRlbURpcmVjdGl2ZV0sXG4gICAgc2NoZW1hczogW05PX0VSUk9SU19TQ0hFTUFdXG59KVxuZXhwb3J0IGNsYXNzIFBhZ2VyTW9kdWxlIHt9XG4iXX0=
@@ -0,0 +1,2 @@
1
+ export * from './index';
2
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmF0aXZlc2NyaXB0LWNvbW11bml0eS11aS1wYWdlci1hbmd1bGFyLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vc3JjL3VpLXBhZ2VyL2FuZ3VsYXIvbmF0aXZlc2NyaXB0LWNvbW11bml0eS11aS1wYWdlci1hbmd1bGFyLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUlBLGNBQWMsU0FBUyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBHZW5lcmF0ZWQgYnVuZGxlIGluZGV4LiBEbyBub3QgZWRpdC5cbiAqL1xuXG5leHBvcnQgKiBmcm9tICcuL2luZGV4JztcbiJdfQ==