Merge branch 'feature/selectablelist'

Vastra-Gotalandsregionen · Oct 26, 2023 · ec194a3 · ec194a3
2 parents 8febc77 + 131a67b
commit ec194a3
Show file tree

Hide file tree

Showing 21 changed files with 1,193 additions and 8 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,8 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Change-log](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
+# 10.3.0 (2023-10-26) 
+- Added new component `vgr-selectablelist`
 # 10.2.0 (2023-09-29) 
 - Added new look on icon for `vgr-header-menu` with and without expanding. Also added a hover effect on icon and possibility to click directly on icon which was not possible before.
 # 10.1.3 (2023-09-19) 

diff --git a/projects/komponentkartan/package.json b/projects/komponentkartan/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vgr-komponentkartan",
-  "version": "10.2.0",
+  "version": "10.3.0-beta13",
   "peerDependencies": {
     "@angular/cdk": ">=14.2.3",
     "@angular/common": ">=14.2.4",

diff --git a/projects/komponentkartan/src/lib/controls/scrollbar/scrollbar.component.html b/projects/komponentkartan/src/lib/controls/scrollbar/scrollbar.component.html
@@ -1,3 +1,9 @@
-<ng-scrollbar  #scrollable [visibility]="'native'" [appearance]="'standard'"  class="scroll-container" [autoHeightDisabled]="autoheightDisabled" > <!--[ngStyle]="{'height': height }"-->
+<ng-scrollbar #scrollable
+[visibility]="visibility"
+[appearance]="'standard'"
+class="scroll-container"
+[autoHeightDisabled]="autoheightDisabled"
+[autoWidthDisabled]="autowidthDisabled"
+[ngStyle]="{'max-height': maxHeight + 'px' }">
   <ng-content></ng-content>
 </ng-scrollbar>
diff --git a/projects/komponentkartan/src/lib/controls/scrollbar/scrollbar.component.ts b/projects/komponentkartan/src/lib/controls/scrollbar/scrollbar.component.ts
@@ -9,6 +9,9 @@ import { NgScrollbar } from 'ngx-scrollbar';
 export class ScrollbarComponent {
   @ViewChild(NgScrollbar) scrollable: NgScrollbar;
   @Input() autoheightDisabled = 'false';
+  @Input() autowidthDisabled = 'true';
+  @Input() visibility = 'native';
+  @Input() maxHeight;
 
   constructor() { }
 

diff --git a/projects/komponentkartan/src/lib/controls/selectablelist/selectablelist.column.component.ts b/projects/komponentkartan/src/lib/controls/selectablelist/selectablelist.column.component.ts
@@ -0,0 +1,14 @@
+import { Component, Input, HostBinding } from '@angular/core';
+
+@Component({
+  selector: 'vgr-selectablelist-column',
+  template: '<ng-content></ng-content>'
+})
+export class SelectablelistColumnComponent {
+
+  @HostBinding('class.right') @Input() alignRight = false;
+  @HostBinding('class.center') @Input() alignCenter = false;
+
+  constructor() { }
+
+}
diff --git a/projects/komponentkartan/src/lib/controls/selectablelist/selectablelist.component.html b/projects/komponentkartan/src/lib/controls/selectablelist/selectablelist.component.html
@@ -0,0 +1,13 @@
+<div class="list-header" [class.hidden]="!headersPresent">
+  <ng-content select="vgr-selectablelist-header"></ng-content>
+</div>
+
+<div class="scrollbar-container">
+  <vgr-scrollbar #scrollable [ngClass]="{'remove-scrollbar': !showScrollbar}" [maxHeight]="maxHeight">
+    <div #scrollWrapper class="scroll-wrapper">
+      <div class="list-wrapper" [class.active]="active">
+        <ng-content select="vgr-selectablelist-row"></ng-content>
+      </div>
+    </div>
+  </vgr-scrollbar>
+</div>
diff --git a/projects/komponentkartan/src/lib/controls/selectablelist/selectablelist.component.scss b/projects/komponentkartan/src/lib/controls/selectablelist/selectablelist.component.scss
@@ -0,0 +1,176 @@
+@import "../../../assets/partials/_settings.sizes.scss";
+@import "../../../assets/partials/_settings.colors.scss";
+@import "../../../assets/partials/_settings.fonts.scss";
+@import "../../../assets/partials/objects.images";
+@import "../../../assets/partials/base.themify";
+
+:host::ng-deep {
+  outline: 0;
+  position: relative;
+  z-index: 0;
+  width: 100%;
+
+    vgr-selectablelist-header,
+    vgr-selectablelist-row {
+      display: table-row;
+      height: 32px;
+    }
+
+    vgr-selectablelist-row:nth-child(even) {
+      background: white;
+
+      &.selected,
+      &.selected:hover {
+        @include themify($themes) {
+          background: themed('primaryColorDimmed') !important;
+          border-left-color: themed('primaryColor') !important;
+        }
+        border-left: 4px solid;
+      }
+
+      &.focused {
+        outline: 3px solid #2275d3;
+        outline-offset: -3px;
+      }
+
+
+      &.groupheader {
+        font-weight: bold;
+
+        vgr-selectablelist-column {
+          padding-left: 10px;
+        }
+      }
+    }
+
+    vgr-selectablelist-row:nth-child(odd) {
+      background: #f0f0f0;
+
+      &.selected,
+      &.selected:hover {
+        @include themify($themes) {
+          background: themed('primaryColorDimmed') !important;
+          border-left-color: themed('primaryColor') !important;
+        }
+        border-left: 4px solid;
+      }
+
+      &.focused {
+        outline: 3px solid #2275d3;
+        outline-offset: -3px;
+      }
+    }
+
+    vgr-selectablelist-header-column,
+    vgr-selectablelist-column {
+      display: table-cell;
+      height: 22px;
+      line-height: 22px;
+      padding: 5px;
+
+      &:first-child {
+        padding-left: 20px;
+      }
+
+      &.center {
+        text-align: center;
+      }
+
+      &.right {
+        text-align: right;
+      }
+    }
+
+  .list-wrapper.active {
+    vgr-selectablelist-row:not(.groupheader) {
+      cursor: pointer;
+
+      &:hover {
+        font-weight: bold;
+        background: transparent;
+        letter-spacing: -0.15px;
+
+        &.selected {
+          @include themify($themes) {
+            background: themed('primaryColorDimmed') !important;
+            border-left-color: themed('primaryColor') !important;
+          }
+          border-left: 4px solid;
+        }
+      }
+    }
+    vgr-selectablelist-row:not(.selectable) {
+      cursor: default;
+      &:hover {
+        font-weight: normal;
+        background: transparent;
+        letter-spacing: 0;
+        &:nth-child(odd) {
+          // background: #f0f0f0;
+          @include themify($themes) {
+            background: themed('primaryColorDimmed') !important;
+            border-left-color: themed('primaryColor') !important;
+          }
+          border-left: 4px solid;
+        }
+      }
+    }
+  }
+
+  .scrollbar-container {
+    @include themify($themes) {
+      border-top-color: themed('primaryColor') !important;
+    }
+    border-top: 2px solid;
+    border-bottom: 1px solid #97939f;
+    border-left: 1px solid #97939f;
+    border-right: 1px solid #97939f;
+  }
+
+  @media screen and (min-width: $desktop-width--medium) {
+    .list-wrapper.active {
+      vgr-selectablelist-row:hover {
+        letter-spacing: -0.19px;
+      }
+    }
+  }
+
+  // IE HACK to fix outline bug on focused states
+  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+    /* IE10+ specific styles go here */
+    vgr-selectablelist-row.focused {
+      border: 3px solid #2275d3 !important;
+      outline: none !important;
+    }
+  }
+  .scroll-wrapper {
+    position: relative;
+    background: white;
+    display: block;
+    // max-height: 244px;
+    // overflow: auto;
+    padding: 10px 0px;
+  }
+
+  .remove-scrollbar {
+    .scroll-wrapper {
+      width: calc(100% + 16px) !important;
+    }
+    scrollbar-y {
+    display: none !important;
+    }
+  }
+}
+
+.list-header {
+  display: table;
+  width: 100%;
+  border-spacing: 0px !important;
+}
+
+.list-wrapper {
+  border-collapse: collapse;
+  display: table;
+  width: 100%;
+}
+