Add support for collectionFormat

lib/components/JsonSchema/_json-schema-common.scss

@@ -60,23 +60,27 @@ $sub-schema-offset: ($bullet-size / 2) + $bullet-margin;
   font-weight: bold;
 }
 
-.param-type {
+.param-type, .param-array-format  {
   vertical-align: middle;
   line-height: $param-name-height;
   color: rgba($black, 0.4);
   font-size: 0.929em;
+}
+.param-type {
   font-weight: normal;
+  &.array::before, &.tuple::before {
+    color: $black;
+    font-weight: $base-font-weight;
+    .param-collection-format-multi + & {
+      content: none;
+    }
+  }
 
   &.array::before {
     content: $array-text;
-    color: $black;
-    font-weight: $base-font-weight;
   }
-
   &.tuple::before {
     content: $tuple-text;
-    color: $black;
-    font-weight: $base-font-weight;
   }
 
   &.with-hint {
@@ -193,6 +197,19 @@ $sub-schema-offset: ($bullet-size / 2) + $bullet-margin;
   }
 }
 
+.param-enum {
+  color: $text-color;
+  font-size: 0.95em;
+
+  &::before {
+    content: 'Valid values: ';
+  }
+
+  .param-type.array ~ &::before {
+    content: 'Valid items values: ';
+  }
+}
+
 .param-pattern {
   color: $nullable-color;
   white-space: nowrap;

lib/components/ParamsList/params-list.html

@@ -12,6 +12,9 @@
         </div>
         <div class="param-info">
           <div>
+            <span *ngIf='param.type === "array"' class="param-array-format param-collection-format-{{param.collectionFormat}}">
+              {{param | collectionFormat}}
+            </span>
             <span class="param-type {{param.type}}" [ngClass]="{'with-hint': param._displayTypeHint}"
             title="{{param._displayTypeHint}}"> {{param._displayType}} {{param._displayFormat}}</span>
             <span class="param-range" *ngIf="param._range"> {{param._range}} </span>

lib/components/ParamsList/params-list.scss

@@ -18,6 +18,11 @@ header.paramType {
   text-transform: capitalize;
 }
 
+.param-array-format {
+  color: black;
+  font-weight: 300;
+}
+
 // paramters can't be multilevel so table representation works for it without javascript
 .params-wrap {
   display: table;

lib/utils/pipes.ts

@@ -116,6 +116,25 @@ export class EncodeURIComponentPipe implements PipeTransform {
   }
 }
 
+const COLLECTION_FORMATS = {
+  csv: 'Comma Separated',
+  ssv: 'Space Separated',
+  tsv: 'Tab Separated',
+  pipes: 'Pipe Separated'
+};
+
+@Pipe({ name: 'collectionFormat' })
+export class CollectionFormatPipe implements PipeTransform {
+  transform(param:any) {
+    let format = param.collectionFormat;
+    if (!format) format = 'csv';
+    if (format === 'multi') {
+      return 'Multiple ' + param.in + ' params of';
+    }
+    return COLLECTION_FORMATS[format];
+  }
+}
+
 export const REDOC_PIPES = [
-  JsonPointerEscapePipe, MarkedPipe, SafePipe, PrismPipe, EncodeURIComponentPipe, JsonFormatter, KeysPipe
+  JsonPointerEscapePipe, MarkedPipe, SafePipe, PrismPipe, EncodeURIComponentPipe, JsonFormatter, KeysPipe, CollectionFormatPipe
 ];