Merge fd97b53 into 7411324

.travis.yml

@@ -9,7 +9,7 @@ smalltalk:
   - Pharo-7.0
   - Pharo-6.1
   - Pharo-5.0
-  - GemStone-3.4.1
+#- GemStone-3.4.1
 
 matrix:
   fast_finish: true

README.md

@@ -100,6 +100,19 @@ Where
 	    anHtmlRoot stylesheet url: (WAUrl absolute: 'https://storage.googleapis.com/code.getmdl.io/1.3.0/material.XXX-YYY.min.css').
 ```
 
+### Add specific style for extensions
+
+In order to make the extentions work properly, you should define some colors specific rules for your application in your css. To do so, just define:
+
+```CSS
+    .mdl-pagination__current{
+        box-shadow: inset 0px -4px 0px 0px #XXXXXX !important;
+    }
+```
+
+Where `XXXXXX` is the hex code of the accent color of your MDL application. 
+To find your code you can select the #500 color in the following page: [https://www.materialui.co/colors](https://www.materialui.co/colors) 
+
 ### Subclassing MDLApplication
 
 Another simple way to start with MDL is to subclass MDLApplication to create your root component.
@@ -149,7 +162,7 @@ ZnWorkspace openUrl: 'http://ws.stfx.eu/1JIZRQS7OI00'
 | 1.1.x       	| Pharo 50, 60, 61				| None							|
 | 1.2.x       	| Pharo 50, 60, 61				| None							|
 | 1.3.x       	| Pharo 50, 60, 61				| Gemstone 3.4.1 (*) (**)		|
-| Dev       	| Pharo 50, 60, 61				| Gemstone 3.4.1 (*) (**)		|
+| Dev       	| Pharo 50, 60, 61,	70			| 								|
 
 (*) *This version of Gemstone is tested. Older versions might work but we did not tested it.*
 (**) *The compatibility is not total. MaterialDesignLite uses Pharo's Traits to provide the users composables components. Thus, if the Gemstone users wants to use those components they will have to flatten themself the Traits in their Seaside application*

src/Material-Design-Lite-Components.package/WATagBrush.extension/instance/onClick.if..st

@@ -1,4 +1,4 @@
 *Material-Design-Lite-Components
 onClick: aScript if: aCondition
 	aCondition value
-		ifTrue: [ self onClick: aScript ]
+		ifTrue: [ self onClick: aScript value ]

src/Material-Design-Lite-Demo.package/MDLDemo.class/instance/style.st

@@ -0,0 +1,5 @@
+hooks
+style
+	^ '.mdl-pagination__current{
+        box-shadow: inset 0px -4px 0px 0px #E91E63 !important;
+    }'

src/Material-Design-Lite-Demo.package/MDLDemoInstallationPage.class/instance/renderStartDescriptionOn..st

@@ -44,4 +44,20 @@ renderStartDescriptionOn: html
 											'MyApplication>>updateRoot: anHtmlRoot
 	    super updateRoot: anHtmlRoot.
 	    anHtmlRoot beHtml5.
-	    anHtmlRoot stylesheet url: (WAUrl absolute: ''https://storage.googleapis.com/code.getmdl.io/1.3.0/material.XXX-YYY.min.css'').' ] ] ] ]
+	    anHtmlRoot stylesheet url: (WAUrl absolute: ''https://storage.googleapis.com/code.getmdl.io/1.3.0/material.XXX-YYY.min.css'').' ].
+							html paragraph: 'One last step is to define some specific rules in your CSS to make extensions work properly. You should add:'.
+							html
+								preformatted: [ html code
+										class: 'css';
+										with:
+											'    .mdl-pagination__current{
+        box-shadow: inset 0px -4px 0px 0px #XXXXXX !important;
+    }' ].
+							html
+								paragraph: [ html
+										text:
+											'Where `XXXXXX` is the hex code of the accent color of your MDL application. 
+To find your code you can select the #500 color in the following page: '.
+									html anchor
+										url: 'https://www.materialui.co/colors';
+										with: 'https://www.materialui.co/colors' ] ] ] ]

src/Material-Design-Lite-Demo.package/MDLDemoLibrary.class/instance/paginationPng.st

@@ -0,0 +1,3 @@
+icons
+paginationPng
+	^ #[137 80 78 71 13 10 26 10 0 0 0 13 73 72 68 82 0 0 2 88 0 0 2 88 8 6 0 0 0 190 102 152 220 0 0 0 6 98 75 71 68 0 207 0 216 0 220 158 249 62 2 0 0 0 9 112 72 89 115 0 0 11 19 0 0 11 19 1 0 154 156 24 0 0 0 7 116 73 77 69 7 226 10 15 0 0 3 28 130 73 100 0 0 0 29 105 84 88 116 67 111 109 109 101 110 116 0 0 0 0 0 67 114 101 97 116 101 100 32 119 105 116 104 32 71 73 77 80 100 46 101 7 0 0 13 209 73 68 65 84 120 218 237 221 93 111 19 103 26 128 225 199 246 216 206 7 14 37 180 129 70 108 104 21 85 84 244 132 95 195 127 132 95 211 131 109 213 170 27 21 178 40 124 7 18 199 142 63 198 158 61 0 186 130 101 75 226 140 61 19 207 117 73 156 97 143 159 55 47 241 157 215 118 168 53 30 156 100 1 0 64 110 234 150 0 0 64 96 1 0 8 44 0 0 129 5 0 128 192 2 0 16 88 0 0 2 11 0 0 129 5 0 32 176 0 0 4 22 0 0 2 11 0 64 96 1 0 8 44 0 0 129 5 0 128 192 2 0 16 88 0 0 2 11 0 0 129 5 0 32 176 0 0 4 22 0 0 2 11 0 64 96 1 0 8 44 0 0 4 22 0 128 192 2 0 16 88 0 0 2 11 0 0 129 5 0 32 176 0 0 4 22 0 0 2 11 0 64 96 1 0 8 44 0 0 4 22 0 128 192 2 0 16 88 0 0 8 44 0 0 129 5 0 32 176 0 0 4 22 0 0 2 11 0 64 96 1 0 8 44 0 0 4 22 0 128 192 2 0 16 88 0 0 8 44 0 0 129 5 0 32 176 0 0 16 88 0 0 2 11 0 64 96 1 0 8 44 0 0 4 22 0 128 192 2 0 16 88 0 0 8 44 0 0 129 5 0 32 176 0 0 16 88 0 0 2 11 0 64 96 1 0 8 44 0 0 4 22 0 128 192 2 0 16 88 0 0 8 44 0 0 129 5 0 32 176 0 0 16 88 0 0 2 11 0 64 96 1 0 32 176 0 0 4 22 0 128 192 2 0 16 88 0 0 8 44 0 0 129 5 0 32 176 0 0 16 88 0 0 2 11 0 64 96 1 0 32 176 0 0 4 22 0 128 192 2 0 64 96 1 0 8 44 0 0 129 5 0 32 176 0 0 16 88 0 0 2 11 0 64 96 1 0 32 176 0 0 4 22 0 128 192 2 0 64 96 1 0 8 44 0 0 129 5 0 128 192 2 0 16 88 0 0 2 11 0 64 96 1 0 32 176 0 0 4 22 0 128 192 2 0 64 96 1 0 8 44 0 0 129 5 0 128 192 2 0 16 88 0 0 2 11 0 64 96 1 0 32 176 0 0 4 22 0 128 192 2 0 64 96 1 0 8 44 0 0 129 5 0 128 192 2 0 16 88 0 0 2 11 0 0 129 5 0 32 176 0 0 4 22 0 128 192 2 0 64 96 1 0 8 44 0 0 129 5 0 128 192 2 0 16 88 0 0 2 11 0 0 129 5 0 32 176 0 0 4 22 0 0 2 11 0 64 96 1 0 8 44 0 0 129 5 0 128 192 2 0 40 155 196 18 80 180 244 254 186 69 0 202 255 132 249 176 103 17 56 51 39 88 0 0 2 11 0 64 96 1 0 8 44 0 0 4 22 0 128 192 2 0 16 88 0 0 8 44 0 0 129 5 0 32 176 0 0 16 88 0 0 2 11 0 64 96 1 0 8 44 0 0 4 22 0 128 192 2 0 16 88 0 0 8 44 0 128 50 72 44 1 203 230 231 223 247 44 2 16 247 238 236 90 4 10 227 4 11 0 64 96 1 0 8 44 0 0 129 5 0 128 192 2 0 16 88 0 0 2 11 0 0 129 5 0 32 176 0 0 4 22 0 0 2 11 0 64 96 1 0 8 44 0 0 129 5 0 128 192 2 0 16 88 0 0 2 11 0 0 129 5 0 32 176 0 0 4 22 0 0 2 11 0 64 96 1 0 8 44 0 0 4 22 0 128 192 2 0 16 88 0 0 2 11 0 0 129 5 0 32 176 0 0 4 22 0 0 2 11 0 64 96 1 0 8 44 0 0 4 22 0 128 192 2 0 16 88 0 0 8 44 0 0 129 5 0 32 176 0 0 4 22 0 0 2 11 0 64 96 1 0 8 44 0 0 4 22 0 128 192 2 0 16 88 0 0 8 44 0 0 129 5 0 32 176 0 0 16 88 0 0 2 11 0 64 96 1 0 8 44 0 0 4 22 0 128 192 2 0 16 88 0 0 8 44 0 0 129 5 0 32 176 0 0 16 88 0 0 2 11 0 64 96 1 0 8 44 0 0 4 22 0 128 192 2 0 16 88 0 0 8 44 0 0 129 5 0 32 176 0 0 16 88 0 0 2 11 0 64 96 1 0 32 176 0 0 4 22 0 128 192 2 0 16 88 0 0 8 44 0 0 129 5 0 32 176 0 0 16 88 0 0 2 11 0 64 96 1 0 32 176 0 0 4 22 0 128 192 2 0 64 96 1 0 8 44 0 0 129 5 0 32 176 0 0 16 88 0 0 2 11 0 64 96 1 0 32 176 0 0 4 22 0 128 192 2 0 64 96 1 0 8 44 0 0 129 5 0 128 192 2 0 16 88 0 0 2 11 0 64 96 1 0 32 176 0 0 4 22 0 128 192 2 0 64 96 1 0 8 44 0 0 129 5 0 128 192 2 0 16 88 0 0 2 11 0 64 96 1 0 32 176 0 0 4 22 0 128 192 2 0 64 96 1 0 8 44 0 0 129 5 0 128 192 2 0 16 88 0 0 2 11 0 0 129 5 0 32 176 0 0 4 22 0 128 192 2 0 64 96 1 0 8 44 0 0 129 5 0 128 192 2 0 16 88 0 0 2 11 0 0 129 5 0 32 176 0 0 4 22 0 0 2 11 0 64 96 1 0 8 44 0 0 129 5 0 128 192 2 0 16 88 0 0 2 11 0 0 129 5 0 32 176 0 0 4 22 0 0 2 11 0 64 96 1 0 8 44 0 0 4 22 0 128 192 2 0 16 88 0 0 2 11 0 0 129 5 0 32 176 0 0 4 22 0 0 2 11 0 64 96 1 0 8 44 0 0 4 22 0 128 192 2 0 16 88 0 0 2 11 0 0 129 5 0 32 176 0 0 4 22 0 0 2 11 0 64 96 1 0 8 44 0 0 4 22 0 128 192 2 0 16 88 0 0 8 44 0 0 129 5 0 32 176 0 0 4 22 0 0 2 11 0 64 96 1 0 8 44 0 0 4 22 0 128 192 2 0 16 88 0 0 8 44 0 0 129 5 0 32 176 0 0 16 88 0 0 2 11 0 64 96 1 0 8 44 0 0 4 22 0 128 192 2 0 16 88 0 0 8 44 0 0 129 5 0 32 176 0 0 16 88 0 0 2 11 0 64 96 1 0 32 176 0 0 4 22 0 128 192 2 0 16 88 0 0 8 44 0 0 129 5 0 32 176 0 0 16 88 0 0 2 11 0 64 96 1 0 32 176 0 0 4 22 0 128 192 2 0 16 88 150 0 0 64 96 1 0 8 44 0 0 129 5 0 128 192 2 0 16 88 0 0 2 11 0 0 129 5 0 32 176 0 0 4 22 0 0 159 72 44 1 203 230 222 157 93 139 0 64 161 156 96 1 0 8 44 0 0 129 5 0 32 176 0 0 16 88 0 0 2 11 0 64 96 1 0 32 176 0 0 4 22 0 128 192 2 0 64 96 1 0 8 44 0 0 129 5 0 32 176 0 0 16 88 0 0 2 11 0 64 96 1 0 32 176 0 0 4 22 0 128 192 2 0 64 96 1 0 8 44 0 0 129 5 0 128 192 2 0 152 159 196 18 192 252 253 177 127 16 131 225 48 34 34 86 218 237 248 97 103 123 233 102 204 178 44 6 163 113 28 159 244 227 184 215 255 104 222 141 245 181 216 184 178 22 43 173 102 212 106 53 243 218 207 176 244 106 141 7 39 153 101 160 72 233 253 245 165 155 233 207 131 103 113 212 237 157 233 239 94 237 172 199 247 219 55 47 237 172 227 52 141 39 47 94 157 107 222 91 91 95 71 51 73 204 107 63 95 174 19 137 135 189 0 129 133 192 42 192 225 113 55 246 159 190 152 233 182 59 223 110 197 230 70 231 210 204 58 205 178 120 242 252 101 28 30 117 103 186 253 230 213 78 220 186 241 77 212 47 201 9 79 213 230 173 218 126 22 88 8 44 4 86 73 253 252 251 94 46 247 115 239 206 110 233 103 29 165 105 252 186 247 56 151 251 186 187 123 59 90 37 63 221 169 218 188 85 219 207 2 139 121 240 38 119 40 209 147 81 222 247 53 15 131 225 56 183 216 136 136 248 117 239 113 12 134 99 243 218 207 32 176 160 10 210 201 36 166 211 255 127 192 59 157 102 145 78 38 115 121 2 41 235 147 210 56 77 227 183 71 251 185 223 239 111 143 246 99 156 166 230 93 178 184 18 89 8 44 224 47 195 209 187 211 133 211 225 40 122 131 65 116 251 167 159 253 211 27 12 226 159 255 122 116 169 158 232 46 34 203 178 248 37 199 147 156 79 253 178 247 56 178 44 51 239 146 197 149 200 66 96 65 197 141 211 73 68 188 123 191 77 183 127 106 65 62 241 252 245 155 165 184 134 121 1 129 5 11 50 26 143 99 48 26 157 43 172 246 254 125 48 247 199 85 150 159 250 39 211 105 60 91 64 12 60 123 253 38 38 211 169 121 11 176 136 189 230 20 11 129 5 21 146 78 38 49 28 167 22 226 111 188 56 124 187 148 215 50 47 32 176 96 14 134 163 113 156 14 71 231 190 221 34 78 175 202 244 83 255 34 95 202 42 195 203 102 85 155 119 145 123 204 41 22 2 11 150 220 100 50 141 81 234 228 234 75 138 248 180 91 145 159 176 171 218 188 128 192 130 92 53 26 182 255 89 156 20 240 134 255 147 2 63 100 80 181 121 1 129 5 185 25 142 198 51 127 82 176 219 235 47 252 241 62 63 44 238 101 164 227 2 230 45 226 154 85 157 183 136 189 85 228 126 6 129 5 115 212 110 53 103 190 237 219 227 147 133 63 222 215 111 142 11 91 171 94 127 80 137 107 86 117 222 34 246 86 145 251 25 22 37 177 4 84 205 116 58 141 222 96 56 243 237 199 147 201 194 31 115 17 215 52 175 121 151 113 94 88 20 39 88 84 206 135 95 40 58 171 102 163 177 240 199 92 196 53 205 107 222 101 156 23 4 22 204 201 69 94 30 140 136 248 106 227 202 194 31 243 245 107 27 133 173 215 250 218 74 37 174 89 213 121 139 216 91 69 238 103 16 88 80 82 157 245 181 133 95 243 198 230 181 194 230 221 40 96 222 34 174 89 213 121 139 216 91 69 238 103 16 88 64 41 92 89 91 173 196 53 171 58 47 32 176 32 23 163 241 216 34 156 67 51 73 42 113 205 170 206 11 8 44 200 69 171 217 188 240 125 236 254 99 123 97 143 247 222 157 221 194 215 236 198 245 107 75 121 45 243 46 126 143 149 97 63 131 192 2 74 97 107 243 171 165 188 150 121 1 129 5 37 179 136 83 172 178 252 180 223 168 215 227 230 2 78 90 110 94 191 22 141 122 221 188 5 88 196 94 115 122 133 192 130 37 54 28 121 15 214 44 22 241 82 86 25 94 46 171 234 188 128 192 130 11 105 38 249 253 146 195 121 158 98 149 237 167 253 90 173 22 63 237 222 158 219 253 255 180 123 59 106 181 154 121 11 52 207 61 231 244 10 129 5 203 190 233 235 245 232 228 248 177 248 121 68 86 89 159 140 154 73 18 63 126 183 147 251 253 254 248 221 78 41 63 73 87 181 121 231 181 247 196 21 2 11 42 34 239 151 9 243 140 172 178 63 25 173 180 155 113 55 199 147 157 187 187 183 99 165 221 52 239 146 70 150 184 162 170 106 141 7 39 153 101 160 72 233 253 245 194 174 221 237 159 230 122 127 253 193 32 158 190 60 156 233 182 59 223 110 197 230 70 231 210 124 221 166 89 22 79 158 191 140 195 163 238 76 183 223 188 218 137 91 55 190 137 122 201 94 38 51 239 127 29 30 119 99 255 233 139 74 236 231 179 72 30 246 124 195 70 96 33 176 190 100 50 153 70 127 56 156 203 125 191 122 123 20 71 221 179 125 51 190 218 89 143 239 183 111 94 218 175 223 56 77 227 201 139 87 231 154 247 214 214 215 151 246 151 107 86 109 222 136 136 63 15 158 85 102 63 11 44 4 22 2 43 7 195 209 56 70 105 58 151 251 110 37 201 95 255 177 244 31 251 7 49 120 31 115 43 237 118 252 176 179 189 116 95 199 44 203 98 48 26 199 241 73 63 142 123 253 143 230 221 88 95 139 141 43 107 177 210 106 150 238 141 221 230 61 191 42 236 103 129 133 192 66 96 93 244 250 147 73 156 14 71 185 222 231 106 187 21 73 163 225 139 11 2 139 138 242 38 119 124 211 108 52 162 221 204 239 229 155 118 51 17 87 0 85 127 110 177 4 240 238 255 39 172 213 234 209 76 26 51 191 241 189 179 182 26 227 116 146 235 239 217 2 224 114 114 130 5 239 125 8 163 86 146 156 235 247 100 117 214 86 163 245 254 13 204 226 10 128 8 39 88 240 63 62 188 49 125 181 221 138 122 173 30 245 250 231 223 164 60 157 102 49 205 166 31 221 6 0 4 22 252 221 63 142 47 188 143 170 94 175 69 61 156 88 1 240 153 231 8 75 0 0 32 176 0 0 4 22 0 128 192 2 0 64 96 1 0 8 44 0 0 129 5 0 128 192 2 0 16 88 0 0 2 11 0 0 129 5 0 32 176 0 0 4 22 0 128 192 2 0 64 96 1 0 8 44 0 0 129 5 0 128 192 2 0 16 88 0 0 203 39 177 4 20 190 9 31 246 44 2 0 75 197 9 22 0 128 192 2 0 16 88 0 0 2 11 0 0 129 5 0 32 176 0 0 4 22 0 0 2 11 0 64 96 1 0 8 44 0 0 4 22 0 128 192 2 0 16 88 0 0 2 11 0 0 129 5 0 32 176 0 0 4 22 0 0 2 11 0 64 96 1 0 8 44 0 0 4 22 0 128 192 2 0 16 88 0 0 8 44 0 0 129 5 0 32 176 0 0 4 22 0 0 2 11 0 64 96 1 0 8 44 0 0 4 22 0 128 192 2 0 16 88 0 0 8 44 0 0 129 5 0 32 176 0 0 16 88 0 0 2 11 0 64 96 1 0 8 44 0 0 4 22 0 128 192 2 0 16 88 0 0 8 44 0 0 129 5 0 32 176 0 0 16 88 0 0 2 11 0 64 96 1 0 32 176 0 0 4 22 0 128 192 2 0 16 88 0 0 8 44 0 0 129 5 0 32 176 0 0 16 88 0 0 2 11 0 64 96 1 0 32 176 0 0 4 22 0 128 192 2 0 16 88 0 0 8 44 0 0 129 5 0 32 176 0 0 16 88 0 0 2 11 0 64 96 1 0 32 176 0 0 4 22 0 128 192 2 0 64 96 1 0 8 44 0 0 129 5 0 32 176 0 0 16 88 0 0 2 11 0 64 96 1 0 32 176 0 0 4 22 0 128 192 2 0 64 96 1 0 8 44 0 0 129 5 0 128 192 2 0 16 88 0 0 2 11 0 64 96 1 0 32 176 0 0 4 22 0 128 192 2 0 64 96 1 0 8 44 0 0 129 5 0 128 192 2 0 16 88 0 0 2 11 0 0 129 5 0 32 176 0 0 4 22 0 128 192 2 0 64 96 1 0 8 44 0 0 129 5 0 128 192 2 0 16 88 0 0 2 11 0 0 129 5 0 32 176 0 0 4 22 0 128 192 2 0 64 96 1 0 8 44 0 0 129 5 0 128 192 2 0 16 88 0 0 2 11 0 0 129 5 0 32 176 0 0 4 22 0 0 2 11 0 64 96 1 0 8 44 0 0 129 5 0 128 192 2 0 16 88 0 0 2 11 0 0 129 5 0 32 176 0 0 4 22 0 0 2 11 0 64 96 1 0 8 44 0 0 4 22 0 128 192 2 0 16 88 0 0 2 11 0 0 129 5 0 80 58 255 1 178 174 186 120 131 252 75 222 0 0 0 0 73 69 78 68 174 66 96 130]

src/Material-Design-Lite-Demo.package/MDLPaginationComponentScreen.class/README.md

@@ -0,0 +1,4 @@
+Description
+--------------------
+
+The pagination widget allow the user to easily paginate some content on his page. You can either use it to just manage the pages then use the #currentPage to manage your page on the refresh or pass a block that will have the responsibility to update your page with some ajax.

src/Material-Design-Lite-Demo.package/MDLPaginationComponentScreen.class/class/description.st

@@ -0,0 +1,3 @@
+accessing
+description
+	^ 'The pagination widget allow the user to easily paginate some content on his page. You can either use it to just manage the pages then use the #currentPage to manage your page on the refresh or pass a block that will have the responsibility to update your page with some ajax.'

src/Material-Design-Lite-Demo.package/MDLPaginationComponentScreen.class/class/icon.st

@@ -0,0 +1,3 @@
+accessing
+icon
+	^ 'paginationPng'

src/Material-Design-Lite-Demo.package/MDLPaginationComponentScreen.class/class/title.st

@@ -0,0 +1,3 @@
+accessing
+title
+	^ 'Pagination'

src/Material-Design-Lite-Demo.package/MDLPaginationComponentScreen.class/instance/ajaxPagination.st

@@ -0,0 +1,5 @@
+sections
+ajaxPagination
+	^ OrderedDictionary new
+		add: 'Ajax Pagination Widget' -> #renderAjaxPaginationOn:;
+		yourself

src/Material-Design-Lite-Demo.package/MDLPaginationComponentScreen.class/instance/pagination.st

@@ -0,0 +1,5 @@
+sections
+pagination
+	^ OrderedDictionary new
+		add: 'Pagination Widget' -> #renderPaginationOn:;
+		yourself

src/Material-Design-Lite-Demo.package/MDLPaginationComponentScreen.class/instance/renderAjaxPaginationOn..st

@@ -0,0 +1,24 @@
+rendering
+renderAjaxPaginationOn: html
+	| myColl renderBlock |
+	myColl := 201 to: 640.
+	paginationWidget2 := (MDLPaginationComponent numberOfPages: [ myColl size / 20 roundUpTo: 1 ])
+		adjacentsPagesToShow: 3;
+		updateBlock: [ :s :canvas | 
+			(s << (canvas jQuery id: 'mdl-demo-pagination') load)
+				html: [ :ajaxHtml | renderBlock value: ajaxHtml ];
+				onComplete: 'componentHandler.upgradeDom();'	"The onComplete will update the MDL elements" ];
+		yourself.
+	renderBlock := [ :r | 
+	| currentPage |
+	currentPage := paginationWidget2 currentPage.
+	(currentPage - 1) * 20 + 1 to: currentPage * 20 do: [ :ind | 
+		r mdlCell
+			class: 'grid-cell-demo';
+			size: 2;
+			with: (myColl at: ind) ] ].
+	html
+		div: [ html mdlGrid
+				id: 'mdl-demo-pagination';
+				with: [ renderBlock value: html ].
+			html render: paginationWidget2 ]

src/Material-Design-Lite-Demo.package/MDLPaginationComponentScreen.class/instance/renderPaginationOn..st

@@ -0,0 +1,18 @@
+rendering
+renderPaginationOn: html
+	| myColl |
+	myColl := 201 to: 640.
+	paginationWidget
+		ifNil: [ paginationWidget := (MDLPaginationComponent numberOfPages: [ (myColl size / 20) roundUpTo: 1 ]) "Note the use of a block. If my collection change, the number of pages will be updated."
+				adjacentsPagesToShow: 3;
+				yourself	 ].
+	html
+		div: [ html
+				mdlGrid: [ | currentPage |
+					currentPage := paginationWidget currentPage.
+					(currentPage - 1) * 20 + 1 to: currentPage * 20 do: [ :ind | 
+						html mdlCell
+							class: 'grid-cell-demo';
+							size: 2;
+							with: (myColl at: ind) ] ].
+			html render: paginationWidget ]

src/Material-Design-Lite-Demo.package/MDLPaginationComponentScreen.class/instance/renderScreenContentOn..st

@@ -0,0 +1,5 @@
+rendering
+renderScreenContentOn: html
+	self
+		render: self pagination fullWidth: true on: html;
+		render: self ajaxPagination fullWidth: true on: html

src/Material-Design-Lite-Demo.package/MDLPaginationComponentScreen.class/properties.json

@@ -0,0 +1,14 @@
+{
+	"commentStamp" : "CyrilFerlicot 10/15/2018 00:42",
+	"super" : "MDLExtensionsDemo",
+	"category" : "Material-Design-Lite-Demo-Extensions",
+	"classinstvars" : [ ],
+	"pools" : [ ],
+	"classvars" : [ ],
+	"instvars" : [
+		"paginationWidget",
+		"paginationWidget2"
+	],
+	"name" : "MDLPaginationComponentScreen",
+	"type" : "normal"
+}

src/Material-Design-Lite-Demo.package/monticello.meta/categories.st

@@ -3,6 +3,5 @@ SystemOrganization addCategory: 'Material-Design-Lite-Demo-Components'!
 SystemOrganization addCategory: 'Material-Design-Lite-Demo-Core'!
 SystemOrganization addCategory: 'Material-Design-Lite-Demo-Extensions'!
 SystemOrganization addCategory: 'Material-Design-Lite-Demo-Utils'!
-SystemOrganization addCategory: #'Material-Design-Lite-Demo-Widgets'!
 SystemOrganization addCategory: 'Material-Design-Lite-Demo-Widgets'!
-ets'!
+SystemOrganization addCategory: #'Material-Design-Lite-Demo-Widgets'!

src/Material-Design-Lite-Extensions-Tests.package/MDLPaginationComponentTest.class/instance/actualClass.st

@@ -0,0 +1,3 @@
+helpers
+actualClass
+	^ MDLPaginationComponent 

src/Material-Design-Lite-Extensions-Tests.package/MDLPaginationComponentTest.class/instance/defaultNumberOfPages.st

@@ -0,0 +1,3 @@
+helpers
+defaultNumberOfPages
+	^ 20

src/Material-Design-Lite-Extensions-Tests.package/MDLPaginationComponentTest.class/instance/newInstance.st

@@ -0,0 +1,3 @@
+helpers
+newInstance
+	^ self actualClass numberOfPages: self defaultNumberOfPages

src/Material-Design-Lite-Extensions-Tests.package/MDLPaginationComponentTest.class/instance/setUp.st

@@ -0,0 +1,4 @@
+running
+setUp
+	super setUp.
+	component := self newInstance

src/Material-Design-Lite-Extensions-Tests.package/MDLPaginationComponentTest.class/instance/testCurrentPage.st

@@ -0,0 +1,6 @@
+tests
+testCurrentPage
+	component currentPage: 10.
+	self assert: component currentPage equals: 10.
+	self should: [ component currentPage: -1 ] raise: SubscriptOutOfBounds.
+	self should: [ component currentPage: self defaultNumberOfPages + 1 ] raise: SubscriptOutOfBounds

src/Material-Design-Lite-Extensions-Tests.package/MDLPaginationComponentTest.class/instance/testFirstPage.st

@@ -0,0 +1,5 @@
+tests
+testFirstPage
+	component currentPage: 10.
+	component firstPage.
+	self assert: component currentPage equals: 1

src/Material-Design-Lite-Extensions-Tests.package/MDLPaginationComponentTest.class/instance/testFirstPageInExtremCase.st

@@ -0,0 +1,5 @@
+tests
+testFirstPageInExtremCase
+	component := self actualClass numberOfPages: 0.
+	component firstPage.
+	self assert: component currentPage equals: 0

src/Material-Design-Lite-Extensions-Tests.package/MDLPaginationComponentTest.class/instance/testLastPage.st

@@ -0,0 +1,5 @@
+tests
+testLastPage
+	component currentPage: 10.
+	component lastPage.
+	self assert: component currentPage equals: self defaultNumberOfPages

src/Material-Design-Lite-Extensions-Tests.package/MDLPaginationComponentTest.class/instance/testLastPageInExtremCase.st

@@ -0,0 +1,5 @@
+tests
+testLastPageInExtremCase
+	component := self actualClass numberOfPages: 0.
+	component lastPage.
+	self assert: component currentPage equals: 0

src/Material-Design-Lite-Extensions-Tests.package/MDLPaginationComponentTest.class/instance/testNextPage.st

@@ -0,0 +1,5 @@
+tests
+testNextPage
+	component currentPage: 10.
+	component nextPage.
+	self assert: component currentPage equals: 11

src/Material-Design-Lite-Extensions-Tests.package/MDLPaginationComponentTest.class/instance/testPagesButtonsToRender.st

@@ -0,0 +1,7 @@
+tests
+testPagesButtonsToRender
+	component currentPage: 10.
+	component adjacentsPagesToShow: 2.
+	self assert: component pagesButtonsToRender equals: (8 to: 12).
+	component adjacentsPagesToShow: 4.
+	self assert: component pagesButtonsToRender equals: (6 to: 14)

src/Material-Design-Lite-Extensions-Tests.package/MDLPaginationComponentTest.class/instance/testPreviousPage.st

@@ -0,0 +1,5 @@
+tests
+testPreviousPage
+	component currentPage: 10.
+	component previousPage.
+	self assert: component currentPage equals: 9