Merge branch 'master' of https://github.com/Vastra-Gotalandsregionen/…

…komponentkartan

CHANGELOG.md

@@ -3,6 +3,21 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
+## 0.3.3 (2017-12-05)
+- Controls in a title-value-layout are now equally spaced and takes less room when in slim mode
+- More examples added to komponentkartan-demo
+- Route matching in the menu is now *exact*, disabling partial route matching
+
+### Card component
+- Card now supports a single-column layout
+- Restructured card with new components, vgr-card-header and vgr-card-column.
+
+### List component
+- Added checkbox column, vgr-list-column-checkbox, that adds support for checkboxes in lists
+- Added trashcan column, vgr-list-column-trashcan, that adds support for trashcan buttons in lists
+- Added support for aligment on vgr-list-column-header. Left, center and right alignment is supported
+
+
 ## 0.3.0 (2017-11-07)
 
 ### Description of release

Content/partials/_components.list.scss

@@ -81,9 +81,12 @@
 
 .list-item {
   visibility: visible;
-  display: block;
+  display: none;
   margin-top: 1px;
   box-shadow: none; //Visa uppåt-pil i headern när containern är expanderad
+  &.list-item--columns-initialized {
+    display: block;
+  }
   .list-item__header:after {
     @extend .bg-image-icon-chevron;
     content: "";

component-package/controls/list-item/list-item.component.html

@@ -1,15 +1,14 @@
-<div *ngIf="columnInitialized">
-  <ng-content select=".list-item__header"></ng-content>
-  <div class="list-item__notification">
-    <span class="list-item__notification__icon" [ngClass]="
+<ng-content select=".list-item__header">
+</ng-content>
+<div class="list-item__notification">
+  <span class="list-item__notification__icon" [ngClass]="
             {   'bg-image-icon-ok-check' : notification && notification.icon===NotificationIcons.Ok,
                 'bg-image-icon-ok-check--green' : notification && notification.icon===NotificationIcons.OkGreen,
                 'bg-image-icon-exclamation' : notification && notification.icon===NotificationIcons.Exclamation,
                 'bg-image-icon-exclamation--red' : notification && notification.icon===NotificationIcons.ExclamationRed}">
-    </span>
-    <div class="list-item__notification__message">
-      {{notification? notification.message : ''}}
-    </div>
+  </span>
+  <div class="list-item__notification__message">
+    {{notification? notification.message : ''}}
   </div>
-  <ng-content select=".list-item__content"></ng-content>
 </div>
+<ng-content select=".list-item__content"></ng-content>

component-package/controls/list-item/list-item.component.ts

@@ -18,14 +18,14 @@ import { ListHeaderComponent } from '../list/list-header.component';
 export class ListItemComponent implements OnInit {
     // För att kunna binda till Enum värde i markup
     public NotificationIcons = NotificationIcon;
-    public columnInitialized: boolean;
     readonly showNotificationDurationMs = 1500;
     @HostBinding('class.list-item') isContainer = true;
     @HostBinding('class.list-item--collapsed') collapsed = true;
     @HostBinding('class.list-item--expanded') private _expanded: boolean;
     @HostBinding('class.list-item--deleted') deleted: boolean;
     @HostBinding('class.list-item--notification-visible') notificationVisible: boolean;
     @HostBinding('class.list-item--not-interactable') notInteractable: boolean;
+    @HostBinding('class.list-item--columns-initialized') columnsInitialized: boolean;
 
     @Input() set expanded(expandedValue: boolean) {
         if (expandedValue) {
@@ -76,7 +76,7 @@ export class ListItemComponent implements OnInit {
         this.columns.forEach((column, index) => {
             header.applyToColumn(column, index);
         });
-        this.columnInitialized = true;
+        this.columnsInitialized = true;
     }
 
 

demo-app/list-columns/list-columns.component.ts

@@ -58,7 +58,11 @@ export class ListColumnsComponent {
     }
 
     getSelectedRows(): number {
-        return this.peopleRows && this.peopleRows.filter(r => r.previewObject.selected).length;
+        if (!this.peopleRows) {
+            return 0;
+        } else {
+            return this.peopleRows && this.peopleRows.filter(r => r.previewObject.selected).length;
+        }
     }
 
     onSortChanged(event: SortChangedArgs) {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vgr-komponentkartan",
-  "version": "0.3.3-rc29",
+  "version": "0.3.3-rc32",
   "author": "Västra Götalandsregionen",
   "scripts": {
     "start": "concurrent \"npm run _watch-ts\" \"npm run _local-webserver\" \"npm run _watch-css\" \"npm run _watch-demo-app-css\"",