Adjust filter-panel chips display

- Allow setting a class in scrm-panel
- Adjust height in filter panel do display the same as other inputs
- Adjust input width to avoid breaking to new line
- Remove paddings from tag

core/app/src/components/list-filter/list-filter.component.html

@@ -1,5 +1,6 @@
 <scrm-panel [title]="appStrings['LBL_BASIC_FILTER'] || ''"
             [close]="closeButton"
+            klass="filter-panel"
             *ngIf="(vm$ | async) as vm">
 
     <span panel-header-button>

core/app/src/components/panel/panel.component.html

@@ -1,4 +1,4 @@
-<div [class.collapsed]="isCollapsed" class="card panel-card">
+<div [class.collapsed]="isCollapsed" class="card panel-card {{klass}}">
 
     <div class="card-header d-flex justify-content-between align-items-center">
 

core/app/src/components/panel/panel.component.ts

@@ -8,7 +8,7 @@ import {Button, ButtonInterface} from '@components/button/button.model';
 })
 export class PanelComponent implements OnInit {
 
-    @Input() klass: string;
+    @Input() klass = '';
     @Input() bodyPadding = 2;
     @Input() title: string;
     @Input() mode: 'collapsible' | 'closable' | 'none' = 'closable';

core/app/themes/suite8/css/components/_chips.scss

@@ -1,6 +1,8 @@
 tag-input tag {
+  margin-top: 0 !important;
   padding: 0 0.5rem 0 .7rem !important;
-  line-height: 32px !important;
+  line-height: 30px !important;
+  height: 30px !important;
   background-color: $light-grey !important;
 }
 
@@ -8,6 +10,10 @@ tag-input tag delete-icon:hover {
   transform: none !important;
 }
 
+tag-input-form form input.ng2-tag-input__text-input {
+  height: 30px !important;
+}
+
 tag-input tag delete-icon span {
   background-color: $shell-grey;
   border-radius: 50%;
@@ -35,7 +41,7 @@ tag-input tag delete-icon span svg path {
 }
 
 tag-input-form {
-  width: 100%;
+  flex-grow: 1;
 }
 
 .ng2-dropdown-menu {

core/app/themes/suite8/css/components/_filter-panel.scss

@@ -0,0 +1,18 @@
+.filter-panel scrm-field .ng2-tag-input {
+  padding: 0 !important;
+  min-height: 30px;
+}
+
+.filter-panel scrm-field .ng2-tag-input .ng2-tags-container tag {
+  margin-bottom: 2px !important;
+  line-height: 27px !important;
+  height: 27px !important;
+}
+
+tag-input tag {
+  padding: 0 0.5rem 0 .7rem !important;
+  line-height: 30px !important;
+  height: 30px !important;
+  background-color: $light-grey !important;
+}
+

core/app/themes/suite8/css/style.scss

@@ -24,6 +24,7 @@
 @import 'components/widget';
 @import 'components/widget-bar';
 @import 'components/chips';
+@import 'components/filter-panel';
 @import 'layout/panel';
 
 @import 'layout/actionbar';