@porscheinformatik/clr-addons 12.1.0 → 12.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@porscheinformatik/clr-addons",
-  "version": "12.1.0",
+  "version": "12.2.0",
   "description": "Addon components for Clarity Angular",
   "es2015": "esm2015/clr-addons.js",
   "homepage": "https://porscheinformatik.github.io/clarity-addons/",
@@ -20,10 +20,10 @@
   "peerDependencies": {
     "@angular/common": "^13.0.0",
     "@angular/core": "^13.0.0",
-    "@clr/angular": "13.0.2",
-    "@cds/core": "5.6.4",
-    "@clr/icons": "13.0.2",
-    "@clr/ui": "13.0.2"
+    "@clr/angular": "13.2.1",
+    "@cds/core": "5.7.1",
+    "@clr/icons": "13.2.1",
+    "@clr/ui": "13.2.1"
   },
   "author": "porscheinformatik",
   "license": "MIT",

package/src/back-button/back-button.scss

@@ -0,0 +1,7 @@
+@include exports('back-button.clr-addons') {
+  .btn.back-button {
+    padding: 0;
+    margin-right: 0.25rem;
+    margin-left: -0.25rem;
+  }
+}

package/src/brand-avatar/brand-avatar.scss

@@ -0,0 +1,26 @@
+@include exports('brand-avatar.clr-addons') {
+  .clr-brand-avatar {
+    .brand-avatar-rectangle {
+      display: flex;
+    }
+
+    .brand-avatar-icon-container {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 26px;
+      height: 26px;
+      border-radius: 2.5px;
+      background-color: #707070;
+      color: #fff;
+    }
+  }
+
+  :hover,
+  :focus-within {
+    > .clr-brand-avatar .brand-avatar-icon-container {
+      background-color: var(--clr-btn-link-color) !important;
+      cursor: default;
+    }
+  }
+}

package/src/breadcrumb/breadcrumb.scss

@@ -0,0 +1,21 @@
+@include exports('breadcrumb.clr-addons') {
+  .breadcrumb {
+    display: flex;
+    flex-wrap: wrap;
+    margin-bottom: -1rem;
+    list-style: none;
+    font-size: 13px;
+  }
+
+  .breadcrumb-item {
+    + .breadcrumb-item {
+      padding-left: 0.5rem;
+
+      &::before {
+        content: '/';
+        display: inline-block;
+        padding-right: 0.5rem;
+      }
+    }
+  }
+}

package/src/collapse-expand-section/collapse-expand-section.scss

@@ -0,0 +1,32 @@
+@include exports('collapse-expand-section.clr-addons') {
+  .ces-title,
+  .ces-subtitle {
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      margin-top: 0;
+    }
+  }
+
+  .ces-caret-btn {
+    line-height: 1rem;
+  }
+
+  .disabled-header-styles {
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      display: inline-block;
+    }
+
+    .ces-caret-btn {
+      margin-top: 0;
+    }
+  }
+}

package/src/components.clr-addons.scss

@@ -0,0 +1,395 @@
+@import './mixins';
+
+@import './header.clr-addons';
+@import './collapse-expand-section/collapse-expand-section';
+@import './main-nav-group/main-nav-group';
+@import './paged-search-result-list/paged-search-result-list';
+@import './pager/pager';
+@import './dot-pager/dot-pager';
+@import './view-edit-section/view-edit-section';
+@import './content-panel/content-panel';
+@import './breadcrumb/breadcrumb';
+@import './notification/notification';
+@import './flow-bar/flow-bar';
+@import './back-button/back-button';
+@import './treetable/treetable';
+@import './progress-spinner/progress-spinner';
+@import './numericfield/numeric-field';
+@import './date-time-container/date-time-container';
+@import './searchfield/search-field';
+@import './quick-list/quick-list';
+@import './letter-avatar/letter-avatar';
+@import './brand-avatar/brand-avatar';
+@import './multilingual/multilingual';
+@import './generic-quick-list/generic-quick-list';
+@import './history/history.scss';
+@import './location-bar/location-bar-node/location-bar-node.component.scss';
+
+html,
+body,
+.main-container {
+  height: 100%;
+}
+
+.main-container,
+.u-main-container {
+  > .content-container {
+    border-top: var(--clr-global-borderwidth) solid var(--clr-border-color);
+  }
+
+  .content-header {
+    padding: 0.5rem 0.5rem 0 1rem;
+    display: flex;
+    flex: 0 0 auto;
+
+    h2 {
+      margin-top: 0;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .command-bar {
+      display: flex;
+      flex: 1 0 auto;
+      justify-content: flex-end;
+      align-items: flex-start;
+    }
+  }
+}
+
+.content-container {
+  // Define the sticky footer css when inside a content-container
+  .content-area-footer {
+    border-top: var(--clr-global-borderwidth) solid var(--clr-border-color);
+    display: flex;
+    flex: 0 0 auto;
+    align-items: center;
+    padding: 0.25rem 1rem;
+    background-color: var(--clr-global-app-background);
+    min-height: 2rem;
+
+    // For some reason clarity sets the margin to 0 for dropdown buttons - we want the default btn margin inside the footer
+    .dropdown .dropdown-toggle {
+      margin-right: 0.5rem;
+    }
+  }
+}
+
+// Classes active and clickable add a border around the whole card.
+// Classes card-active and selectable add a border to the left side only.
+.card {
+  .list-group-item.list-group-item-action:hover {
+    background-color: var(--clr-global-selection-color);
+    cursor: pointer;
+  }
+
+  &.active {
+    box-shadow: 0 0.125rem 0 0 var(--clr-card-active-border-color);
+    border: var(--clr-global-borderwidth) solid var(--clr-card-active-border-color);
+    cursor: default;
+    text-decoration: none;
+    transform: translateY(-2px);
+    transition: border 0.2s ease, transform 0.2s ease;
+
+    &.clickable:hover {
+      cursor: default;
+    }
+  }
+
+  @mixin disable-card-clickable-hover() {
+    &.clickable:hover {
+      border-radius: var(--clr-card-border-radius);
+      border-width: var(--clr-card-border-width);
+      border-color: var(--clr-card-border-color);
+      border-style: solid;
+      box-shadow: var(--clr-card-box-shadow);
+      cursor: default;
+      transform: none;
+      transition: none;
+
+      &.active:hover {
+        box-shadow: 0 0.125rem 0 0 var(--clr-card-active-border-color);
+        border: var(--clr-global-borderwidth) solid var(--clr-card-active-border-color);
+        transform: translateY(-2px);
+      }
+    }
+  }
+
+  @mixin card-active-after() {
+    content: '';
+    width: 0.1667rem;
+    position: absolute;
+    background: var(--clr-card-active-border-color);
+    top: -1px;
+    left: -1px;
+    bottom: 0;
+    border-top-left-radius: var(--clr-card-border-radius);
+    border-bottom-left-radius: var(--clr-card-border-radius);
+  }
+
+  &.card-active::after {
+    @include card-active-after();
+  }
+
+  @mixin card-handle-hover() {
+    &.selectable:hover::after {
+      @include card-active-after();
+    }
+
+    &.selectable:hover {
+      border-radius: var(--clr-card-border-radius);
+      border-width: var(--clr-card-border-width);
+      border-color: var(--clr-card-border-color);
+      border-style: solid;
+      cursor: pointer;
+      transform: translateY(-2px);
+      transition: border 0.2s ease, transform 0.2s ease;
+      z-index: 1;
+
+      &.card-active:hover {
+        cursor: default;
+        transform: none;
+        transition: none;
+      }
+    }
+  }
+
+  // firefox needs this, because the hover in @media (hover: hover) is not supported
+  @-moz-document url-prefix() {
+    @include card-handle-hover();
+  }
+
+  @media (hover: hover) {
+    @include card-handle-hover();
+  }
+
+  @media (hover: none) {
+    @include disable-card-clickable-hover();
+  }
+
+  &.card-placeholder {
+    border-left-style: dashed;
+    border-top-style: dashed;
+    border-right-style: dashed;
+  }
+}
+
+.main-container.open-hamburger-menu .header .header-nav.clr-nav-level-1 {
+  .nav-link .nav-text,
+  .nav-list > .nav-link {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    display: block;
+  }
+}
+
+.datagrid-no-select-all .datagrid-header .datagrid-select .clr-checkbox-wrapper {
+  display: none;
+}
+
+// Enable highlighting of rows in a table by adding a new class 'highlight'
+.table {
+  tbody {
+    tr {
+      &.highlight {
+        background-color: var(--clr-global-selection-color);
+      }
+    }
+  }
+}
+
+@mixin required-asterisk($color: var(--red-dark)) {
+  position: relative;
+
+  &:after {
+    position: absolute;
+    content: '*';
+    font-size: 0.58479532rem; // Approximately 14px.
+    line-height: 0.5rem;
+    color: $color;
+    margin-left: 0.25rem;
+    margin-top: 0.25rem;
+  }
+}
+
+form {
+  .required {
+    @include required-asterisk();
+  }
+
+  .required-multiple {
+    @include required-asterisk(var(--orange-light));
+  }
+}
+
+// Readonly checkboxes, radiobuttons
+clr-radio-container[readonly][show-only-selected='true'] .clr-radio-wrapper input:not(:checked),
+clr-checkbox-container[readonly][show-only-selected='true'] .clr-checkbox-wrapper input:not(:checked) {
+  display: none;
+
+  + label {
+    display: none;
+  }
+}
+
+clr-radio-container[readonly].readonly-danger .clr-radio-wrapper input[type='radio'],
+clr-checkbox-container[readonly].readonly-danger .clr-checkbox-wrapper input[type='checkbox'] {
+  &:checked + label {
+    color: var(--clr-btn-danger-bg-color);
+
+    &::before {
+      border-color: var(--clr-btn-danger-bg-color);
+    }
+  }
+}
+
+clr-radio-container[readonly] .clr-radio-wrapper input[type='radio'],
+clr-checkbox-container[readonly] .clr-checkbox-wrapper input[type='checkbox'] {
+  pointer-events: none;
+
+  + label {
+    pointer-events: none;
+  }
+
+  + label::before {
+    border: 0;
+    border-radius: 0;
+    box-shadow: none;
+    transform: rotate(45deg);
+    background: var(--clr-forms-radio-label-color);
+    top: 0.5rem;
+    left: 1px;
+    width: 0.6rem;
+    height: 1px;
+  }
+
+  + label::after {
+    border: 0;
+    border-radius: 0;
+    content: '';
+    display: inline-block;
+    transform: rotate(-45deg);
+    background: var(--clr-forms-radio-label-color);
+    position: absolute;
+    top: 0.5rem;
+    left: 1px;
+    width: 0.6rem;
+    height: 1px;
+  }
+
+  &:checked {
+    + label::before {
+      content: '';
+      background: none;
+      box-shadow: none;
+      border-left: 2px solid var(--clr-forms-checkbox-mark-color);
+      border-bottom: 2px solid var(--clr-forms-checkbox-mark-color);
+      border-color: var(--clr-btn-success-bg-color);
+      position: absolute;
+      top: 0.3rem;
+      left: 0.1rem;
+      width: 0.5rem;
+      height: 0.3rem;
+      transform: rotate(-45deg);
+    }
+
+    + label::after {
+      content: none;
+    }
+  }
+}
+
+// FORM OVERRIDES BELOW
+
+// forms should never be bigger than 1200px
+form,
+.form {
+  max-width: 1200px;
+
+  h4:not(:first-child) {
+    margin-top: 2rem;
+  }
+
+  // Fix alignment of label & values
+  .clr-control-label {
+    line-height: inherit;
+  }
+}
+
+// Set max width for the date picker - Only needs to be as wide as the displayed date
+clr-date-container .clr-control-container {
+  .clr-input-group {
+    max-width: 7rem;
+
+    .clr-input {
+      max-width: 5.5rem;
+    }
+  }
+}
+
+.clr-input-group {
+  width: 100%;
+  max-width: 100%;
+
+  &.clr-focus {
+    width: 100%;
+  }
+
+  // Set all input widths inside a clr-input-group to 100% minus the icons width
+  > .clr-input {
+    // Except for the ClrDataListInput and ClrDate, because this one just looks terrible otherwise (clarity using diff icon here)
+    &:not([clrdatalistinput]):not([clrdate]) {
+      width: calc(100% - 1.5rem);
+    }
+  }
+}
+
+// Set the width of all inputs except time and date to 100%
+.clr-input-wrapper {
+  max-width: none;
+  input:not([type='time']):not([clrdate]) {
+    width: 100%;
+  }
+}
+
+// Set the width of text areas and selects to 100%
+.clr-control-container {
+  .clr-textarea-wrapper textarea {
+    width: 100%;
+    flex: 1 0 auto;
+  }
+
+  .clr-select-wrapper {
+    display: block;
+
+    select {
+      width: 100%;
+    }
+  }
+}
+
+// This avoids the disposition of the clr select arrow icon if a validation error occurs.
+.clr-error {
+  .clr-select-wrapper::after {
+    right: 0.25rem;
+  }
+}
+
+.text-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.btn clr-icon {
+  transform: translate3d(0, -0.1rem, 0);
+}
+
+.clr-treenode-link:hover:visited {
+  color: inherit;
+}
+
+// Has to be at the bottom to override the styles from the above properly
+@import './mobile';

package/src/components.variables.clr-addons.scss

@@ -0,0 +1,42 @@
+:root {
+  --clr-border-color: var(--clr-color-neutral-400);
+  --clr-card-default-border-color: rgba(215, 215, 215, 1);
+  --clr-card-active-border-color: rgba(0, 148, 210, 1);
+  --clr-header-height: 3rem;
+  --clr-footer-height: 2.5rem;
+  --clr-notification-progress-info-bar-color: var(--clr-progress-default-color);
+}
+
+$clr-grid-breakpoints: (
+  xs: 0,
+  sm: 576px,
+  md: 768px,
+  lg: 992px,
+  xl: 1200px,
+) !default;
+
+$clr-layers: (
+  content: 0,
+  select-box: 2,
+  datagrid-row: 500,
+  datagrid-row-sticky: 500,
+  datagrid-header: 501,
+  datagrid-header-sticky: 502,
+  datagrid-host: 590,
+  alert: 1033,
+  sidepanel-bg: 1038,
+  sidepanel: 1039,
+  modal-bg: 1040,
+  modal: 1050,
+  dropdown-menu: 1060,
+  column-switch: 1060,
+  tooltips: 1070,
+  smart-popover: 5000,
+  draggable-ghost: 2147483647,
+) !default;
+
+$clr-sliding-panel-width: 18rem;
+$clr-sliding-panel-animation: transform 0.3s ease;
+$clr-trigger-animation: transform 0.6s ease;
+$clr-sliding-panel-z-index: map-get($clr-layers, sidepanel);
+$clr-sliding-panel-backdrop-z-index: map-get($clr-layers, sidepanel-bg);

package/src/content-panel/content-panel.scss

@@ -0,0 +1,90 @@
+@include exports('content-panel.clr-addons') {
+  :root {
+    --clr-content-panel-width: 456px;
+  }
+
+  .content-panel-container {
+    position: relative;
+    overflow: hidden;
+  }
+
+  .content-panel-outer-wrapper {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+  }
+
+  @media screen and (min-width: map-get($clr-grid-breakpoints, xl)) {
+    .content-panel-outer-wrapper {
+      order: 1;
+    }
+  }
+
+  .content-panel {
+    // Position content-panel to the right of the main content
+    order: 2;
+  }
+
+  .content-panel-content-wrapper {
+    background-color: var(--clr-global-app-background);
+    z-index: map-get($clr-layers, sidepanel-bg) - 1;
+    padding: 1rem;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    border-left: var(--clr-global-borderwidth) solid var(--clr-border-color);
+    overflow: auto;
+
+    @media screen and (min-width: map-get($clr-grid-breakpoints, md)) {
+      width: var(--clr-content-panel-width);
+    }
+
+    @media screen and (min-width: map-get($clr-grid-breakpoints, xl)) {
+      position: relative;
+      height: 100%;
+    }
+
+    @media screen and (max-width: map-get($clr-grid-breakpoints, md)) {
+      width: 100%;
+      border: none;
+    }
+  }
+
+  .content-panel-title {
+    margin-top: 0;
+    margin-bottom: 0.5rem;
+    line-height: 1.5rem;
+  }
+
+  .content-panel-backdrop {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    left: 0;
+    background-color: var(--clr-color-neutral-900);
+    opacity: 0.85;
+    z-index: map-get($clr-layers, sidepanel-bg) - 2;
+
+    @media screen and (max-width: map-get($clr-grid-breakpoints, md)) {
+      display: none;
+    }
+
+    @media screen and (min-width: map-get($clr-grid-breakpoints, xl)) {
+      display: none;
+    }
+  }
+
+  .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);
+  }
+}

package/src/date-time-container/date-time-container.scss

@@ -0,0 +1,18 @@
+@include exports('date-time-container.clr-addons') {
+  .date-time-container {
+    clr-date-container {
+      flex: 1 1 auto;
+      margin-left: 0;
+      margin-right: 0;
+
+      // Places the time input next to the date input on the same height.
+      .clr-input-wrapper {
+        display: flex;
+      }
+    }
+
+    input[type='time'] {
+      margin-left: 1rem;
+    }
+  }
+}

package/src/dot-pager/dot-pager.scss

@@ -0,0 +1,11 @@
+@include exports('dot-pager.clr-addons') {
+  .dot-pager {
+    .clr-control-container {
+      margin: auto;
+    }
+
+    .clr-radio-wrapper input[type='radio']:checked + label::before {
+      box-shadow: inset 0 0 0 1rem var(--clr-forms-checkbox-background-color);
+    }
+  }
+}