Serveral adaption in docu, some designed adaptions (#2369)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "clr-addons",
-  "version": "18.1.4",
+  "version": "18.1.5",
   "private": true,
   "scripts": {
     "build:ui:css": "sass --source-map --precision=8 ./src/clr-addons/themes/phs/phs-theme.scss ./dist/clr-addons/styles/clr-addons-phs.css",

src/clr-addons/action-panel/action-panel.scss

@@ -27,7 +27,7 @@
   .action-panel-action-wrapper {
     background-color: var(--clr-global-app-background);
     z-index: map-get($clr-layers, sidepanel-bg) - 1;
-    padding: 1rem;
+    padding: 0 1rem 1rem 1rem;
     position: absolute;
     top: 0;
     bottom: 0;
@@ -68,4 +68,13 @@
       display: none;
     }
   }
+
+  .action-panel-list {
+    padding-left: 0.5rem;
+    padding-top: 0.25rem;
+
+    li::marker {
+      color: var(--clr-link-visited-color);
+    }
+  }
 }

src/clr-addons/content-panel/content-panel.scss

@@ -79,12 +79,4 @@
   .content-panel-close-btn {
     line-height: 1rem;
   }
-
-  .close .content-panel-close-icon {
-    fill: var(--clr-link-color);
-  }
-
-  .close:hover .content-panel-close-icon {
-    fill: var(--clr-link-hover-color);
-  }
 }

src/clr-addons/daterangepicker/directives/daterangepicker/daterangepicker.directive.ts

@@ -197,7 +197,6 @@ export class ClrDaterangepickerDirective implements OnInit, OnDestroy, ControlVa
       return;
     }
 
-    console.log('aaaaa', target, this.regex.test(target.value));
     if (target.value && this.regex.test(target.value)) {
       // handle easy access
       this.handleEasyAccess(target.value);

src/clr-addons/history/history.html

@@ -1,17 +1,17 @@
 <clr-dropdown>
-  <button type="button" class="btn btn-icon btn-outline-primary" clrDropdownTrigger>
+  <button type="button" class="btn btn-icon btn-outline-primary history-button" clrDropdownTrigger>
     <cds-icon shape="history" size="16"></cds-icon>
     <cds-icon shape="angle" direction="down" size="12"></cds-icon>
   </button>
   <clr-dropdown-menu [clrPosition]="position" *clrIfOpen>
-    <label class="dropdown-header" aria-hidden="true">{{dropdownHeader}}</label>
+    <label class="dropdown-header" aria-hidden="true">{{ dropdownHeader }}</label>
     <button type="button" clrDropdownItem *ngFor="let history of historyElements" (click)="select(history)">
-      {{history.title}}
+      {{ history.title }}
     </button>
     <div *ngIf="pinActive" class="dropdown-divider" role="separator" aria-hidden="true"></div>
     <button clrDropdownItem (click)="togglePinHistory()">
-      <span *ngIf="pinActive && !pinActivated">{{dropdownPin}}</span>
-      <span *ngIf="pinActive && pinActivated">{{dropdownUnpin}}</span>
+      <span *ngIf="pinActive && !pinActivated">{{ dropdownPin }}</span>
+      <span *ngIf="pinActive && pinActivated">{{ dropdownUnpin }}</span>
     </button>
   </clr-dropdown-menu>
 </clr-dropdown>

src/clr-addons/history/history.scss

@@ -2,6 +2,9 @@
   .history-container {
     padding: 15px;
   }
+  .history-button {
+    padding-left: 11px;
+  }
 
   .history {
     display: flex;
@@ -13,8 +16,10 @@
 
   .history-item {
     cursor: pointer;
+
     + .history-item {
       padding-left: 0.5rem;
+
       &::before {
         content: '/';
         display: inline-block;

src/clr-addons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@porscheinformatik/clr-addons",
-  "version": "18.1.4",
+  "version": "18.1.5",
   "description": "Addon components for Clarity Angular",
   "es2015": "esm2015/clr-addons.js",
   "homepage": "https://porscheinformatik.github.io/clarity-addons/",

website/src/app/app-routing.module.ts

@@ -1,5 +1,5 @@
 import { NgModule } from '@angular/core';
-import { RouterModule, Routes, PreloadAllModules } from '@angular/router';
+import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
 
 import { HomeComponent } from './home/home.component';
 import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
@@ -31,7 +31,7 @@ const appRoutes: Routes = [
 ];
 
 @NgModule({
-  imports: [RouterModule.forRoot(appRoutes, { preloadingStrategy: PreloadAllModules })],
+  imports: [RouterModule.forRoot(appRoutes, { preloadingStrategy: PreloadAllModules, anchorScrolling: 'enabled' })],
   exports: [RouterModule],
 })
 export class AppRoutingModule {}

website/src/app/documentation/demos/daterangepicker/daterangepicker.demo.html

@@ -264,6 +264,15 @@ <h4>Presets</h4>
       </form>
       <clr-code-snippet [clrCode]="presetsDemo"></clr-code-snippet>
       <clr-code-snippet [clrCode]="presetsTypescriptDemo" clrLanguage="typescript"></clr-code-snippet>
+      <p>Preset are also available for time selection, see example:</p>
+      <form clrForm>
+        <clr-daterangepicker-container [presets]="presetsTime" [timeSelection]="true">
+          <label>Presets Time</label>
+          <input clrDaterangepicker type="date" name="daterange-preset" [(ngModel)]="value" />
+        </clr-daterangepicker-container>
+      </form>
+      <clr-code-snippet [clrCode]="presetsTimeDemo"></clr-code-snippet>
+      <clr-code-snippet [clrCode]="presetsTimeTypescriptDemo" clrLanguage="typescript"></clr-code-snippet>
 
       <h4>Position</h4>
       <p>

website/src/app/documentation/demos/daterangepicker/daterangepicker.demo.ts

@@ -1,6 +1,12 @@
 import { Component } from '@angular/core';
 import { ClarityDocComponent } from '../clarity-doc';
-import { DaterangePreset, DayModel, NullableDaterange, NullableTimerange } from '@porscheinformatik/clr-addons';
+import {
+  DaterangePreset,
+  DayModel,
+  NullableDaterange,
+  NullableTimerange,
+  TimeModel,
+} from '@porscheinformatik/clr-addons';
 
 const BASIC_DEMO = `
 <form clrForm>
@@ -36,6 +42,14 @@ const PRESETS_DEMO = `
   </clr-daterangepicker-container>
 </form>
 `;
+const PRESETS_TIME_DEMO = `
+<form clrForm>
+  <clr-daterangepicker-container [presets]="presetsTime" [timeSelection]="true">
+    <label>Presets</label>
+    <input clrDaterangepicker type="date" name="demo" [(ngModel)]="demo" />
+  </clr-daterangepicker-container>
+</form>
+`;
 const PRESETS_TYPESCRIPT_DEMO = `
 presets: Array<DaterangePreset> = [
   {
@@ -68,6 +82,28 @@ presets: Array<DaterangePreset> = [
   },
 ];
 `;
+const PRESETS_TIME_TYPESCRIPT_DEMO = `
+presets: Array<DaterangePreset> = [
+  {
+    text: 'Last 5 minute',
+    range: () => ({
+      from: new DayModel(new Date()),
+      to: new DayModel(new Date()),
+      fromTime: new TimeModel(new Date(new Date().getTime() - 5000 * 60)),
+      toTime: new TimeModel(new Date()),
+    }),
+  },
+  {
+    text: 'Last 1 hour',
+    range: () => ({
+      from: new DayModel(new Date()),
+      to: new DayModel(new Date()),
+      fromTime: new TimeModel(new Date(new Date().getTime() - 60000 * 60)),
+      toTime: new TimeModel(new Date()),
+    }),
+  },
+];
+`;
 const PRESETS: Array<DaterangePreset> = [
   {
     text: 'Last 30 days',
@@ -98,6 +134,27 @@ const PRESETS: Array<DaterangePreset> = [
     }),
   },
 ];
+
+const PRESETS_TIME: Array<DaterangePreset> = [
+  {
+    text: 'Last 5 minute',
+    range: () => ({
+      from: new DayModel(new Date()),
+      to: new DayModel(new Date()),
+      fromTime: new TimeModel(new Date(new Date().getTime() - 5000 * 60)),
+      toTime: new TimeModel(new Date()),
+    }),
+  },
+  {
+    text: 'Last 1 hour',
+    range: () => ({
+      from: new DayModel(new Date()),
+      to: new DayModel(new Date()),
+      fromTime: new TimeModel(new Date(new Date().getTime() - 60000 * 60)),
+      toTime: new TimeModel(new Date()),
+    }),
+  },
+];
 const POSITIONS_DEMO = `
 <form clrForm>
   <clr-daterangepicker-container [clrPosition]="'left-top'">
@@ -161,8 +218,11 @@ export class DaterangepickerDemo extends ClarityDocComponent {
   basicTimeDemo = BASIC_TIME_DEMO;
   minMaxDemo = MIN_MAX_DEMO;
   presets = PRESETS;
+  presetsTime = PRESETS_TIME;
   presetsDemo = PRESETS_DEMO;
+  presetsTimeDemo = PRESETS_TIME_DEMO;
   presetsTypescriptDemo = PRESETS_TYPESCRIPT_DEMO;
+  presetsTimeTypescriptDemo = PRESETS_TIME_TYPESCRIPT_DEMO;
   positionsDemo = POSITIONS_DEMO;
   labelsTranslationDemo = LABELS_TRANSLATION_DEMO;
   separatorDemo = SEPARATOR_DEMO;

website/src/app/documentation/demos/full-page-layouts/basepage-layout/basepage-layout.demo.html

@@ -16,7 +16,7 @@ <h2>
     </h2>
     <div class="command-bar">
       <clr-history
-        class="history-bar"
+        style="margin-top: 6px"
         *ngIf="withHistory"
         [clrUsername]="'admin'"
         [clrContext]="context"
@@ -37,7 +37,7 @@ <h2>
         type="button"
         class="btn btn-icon btn-outline-primary"
         (click)="toggleActionPanel()"
-        style="margin-left: 10px; margin-top: 0"
+        style="margin-left: 10px; margin-right: 0"
         *ngIf="withActionPanel"
       >
         <cds-icon shape="view-columns"></cds-icon>
@@ -108,16 +108,6 @@ <h2>
   </div>
   <clr-content-panel-container *ngIf="withContentPanel">
     <clr-content-panel-container-content>
-      <h3>Template</h3>
-      <ul>
-        <li>Select the pagelayout and detach it from the main-component to edit the content layer.</li>
-        <li>Add ui elements into the content-area.</li>
-        <li>Using the Autolayout functionality is recommended.</li>
-        <li>
-          See properties of page-title component, toggle the history, command-bar, and action-panel button as required.
-        </li>
-      </ul>
-      <h3>Content Panel</h3>
       <ul>
         <li>Use the content panel to provide supplementary content without interrupting the main content</li>
         <li>If just actions are required use the action-panel instead</li>
@@ -158,7 +148,6 @@ <h3>Content Panel</h3>
 
   <clr-action-panel-container *ngIf="withActionPanel">
     <clr-action-panel-container-content>
-      <h3>Action Panel DEMO</h3>
       <ul>
         <li>Use when lot of actions are required</li>
         <li>Group similar actions using Captions and Spacer.</li>
@@ -170,13 +159,13 @@ <h3>Action Panel DEMO</h3>
     <clr-action-panel #actionPanel>
       <ng-container clr-action-panel-content>
         <h3>Caption 1</h3>
-        <ul class="list">
+        <ul class="list action-panel-list">
           <li><a href=".">Action-Link</a></li>
           <li><a href=".">Action-Link</a></li>
           <li><a href=".">Action-Link</a></li>
         </ul>
         <h3>Caption 2</h3>
-        <ul class="list">
+        <ul class="list action-panel-list">
           <li><a href=".">Action-Link</a></li>
           <li><a href=".">Action-Link</a></li>
           <li><a href=".">Action-Link</a></li>

website/src/styles/global.scss

@@ -116,8 +116,9 @@ a.btn-primary {
     margin-top: -1 * $bl-0_25;
   }
 }
+
 .header .branding {
-  padding-left: 0;
+  padding-left: 5px;
   margin-right: 13px;
 }