@porscheinformatik/clr-addons 11.2.0 → 12.1.0

package/src/themes/phs/theme.clarity.scss

@@ -1,262 +0,0 @@
-// Copyright (c) 2018-2021 Porsche Informatik. All Rights Reserved.
-// This software is released under MIT license.
-// The full license information can be found in LICENSE in the root directory of this project.
-
-:root[cds-theme~='phs'] {
-  // Global
-  --clr-global-selection-color: var(--turquoise-light);
-  --clr-responsive-nav-trigger-bg-color: var(--black);
-
-  // Default button colors
-  --clr-btn-border-radius: 0.25rem;
-  --clr-btn-default-color: var(--turquoise); // border-color, color, checked-background-color
-  --clr-btn-default-border-color: var(--turquoise);
-  --clr-btn-default-hover-bg-color: var(--turquoise-light); // hover-background-color
-  --clr-btn-default-hover-color: var(--turquoise-darkest); // hover-color
-  --clr-btn-default-box-shadow-color: var(--turquoise-darkest);
-  --clr-btn-default-checked-bg-color: var(--turquoise);
-
-  // Default outline button
-  --clr-btn-default-outline-color: var(--turquoise); // border-color, color, checked-background-color
-  --clr-btn-default-outline-border-color: var(--turquoise);
-  --clr-btn-default-outline-hover-bg-color: var(--turquoise-lighter); // hover-background-color
-  --clr-btn-default-outline-hover-color: var(--turquoise-darkest); // hover-color
-  --clr-btn-default-outline-box-shadow-color: var(--turquoise-darkest);
-
-  // Primary button
-  --clr-btn-primary-bg-color: var(--turquoise); // background-color, disabled-background-color
-  --clr-btn-primary-border-color: var(--turquoise); // border-color
-  --clr-btn-primary-hover-bg-color: var(--turquoise-darkest); // hover-background-color
-  --clr-btn-primary-box-shadow-color: var(--turquoise);
-
-  // Success button
-  --clr-btn-success-bg-color: var(--green);
-  --clr-btn-success-hover-bg-color: var(--green-dark);
-  --clr-btn-success-box-shadow-color: var(--green);
-  --clr-btn-success-checked-bg-color: var(--clr-btn-success-hover-bg-color);
-
-  // Success button outline
-  --clr-btn-success-outline-color: var(--green);
-  --clr-btn-success-outline-hover-bg-color: var(--green-lighter);
-  --clr-btn-success-outline-border-color: var(--green);
-  --clr-btn-success-outline-hover-color: var(--green-dark);
-  --clr-btn-success-outline-box-shadow-color: var(--green-dark);
-
-  // Danger button
-  --clr-btn-danger-hover-bg-color: var(--red-dark);
-
-  // Danger button outline
-  --clr-btn-danger-outline-hover-bg-color: var(--red-lighter);
-
-  // Link button colors
-  --clr-btn-link-color: var(--turquoise); // color
-  --clr-btn-link-hover-color: var(--turquoise-darkest); // hover-color
-
-  // Alert
-  --clr-alert-success-bg-color: var(--green-light);
-  --clr-alert-success-border-color: var(--green-light-mid);
-  --clr-alert-success-icon-color: var(--green-turquiose);
-
-  --clr-alert-info-bg-color: var(--blue-light);
-  --clr-alert-info-border-color: var(--blue-mid);
-  --clr-alert-info-icon-color: var(--turquoise);
-
-  --clr-alert-warning-border-color: var(--yellow-light);
-
-  --clr-alert-danger-bg-color: var(--red-light);
-  --clr-alert-danger-icon-color: var(--red-darker);
-
-  --clr-app-alert-success-bg-color: var(--green-light-mid);
-  --clr-app-alert-info-bg-color: var(--blue-dark);
-  --clr-app-alert-warning-bg-color: var(--orange-dark);
-  --clr-app-alert-danger-bg-color: var(--red-darker);
-
-  // Badge
-  --clr-badge-info-bg-color: var(--turquoise);
-  --clr-badge-success-bg-color: var(--green);
-  --clr-badge-warning-bg-color: var(--yellow-light);
-  --clr-badge-danger-bg-color: var(--red-darker);
-  --clr-badge-orange-bg-color: var(--orange-dark);
-  --clr-badge-light-blue-bg-color: var(--blue-mid);
-
-  // Card
-  --clr-card-border-radius: 0.25rem;
-  --clr-card-active-border-color: var(--turquoise);
-  --clr-card-clickable-box-shadow-color: var(--turquoise);
-  --clr-card-clickable-border-color: var(--turquoise);
-
-  // Checkbox
-  --clr-forms-checkbox-background-color: var(--turquoise); // checked-background-color
-  --clr-forms-checkbox-checked-shadow: inset 0 0 0 0.25rem var(--clr-forms-checkbox-background-color);
-  --clr-forms-checkbox-indeterminate-border-color: var(--turquoise);
-
-  // Datagrid
-  --clr-datagrid-row-hover: var(--clr-global-selection-color);
-  --clr-datagrid-action-popover-hover-color: var(--clr-global-selection-color);
-  --clr-datagrid-detail-caret-icon-open-bg-color: var(--turquoise);
-
-  // Datepicker
-  --clr-datepicker-trigger-color: var(--turquoise);
-  --clr-datepicker-trigger-hover-color: var(--turquoise-darkest);
-  --clr-calendar-btn-color: var(--turquoise);
-  --clr-calendar-active-cell-background-color: var(--clr-global-selection-color);
-  --clr-calendar-btn-hover-focus-color: var(--clr-global-selection-color);
-  --clr-calendar-active-focus-cell-background-color: var(--clr-global-selection-color);
-
-  // Dropdown
-  --clr-dropdown-selection-color: var(--clr-global-selection-color);
-
-  // Forms
-  --clr-forms-focused-color: var(--turquoise);
-  --clr-forms-input-invalid-color: var(--red-darker);
-
-  // Input
-  --clr-input-border-color: var(--turquoise);
-
-  // Header
-  --clr-header-font-color: var(--black);
-  --clr-header-title-color: var(--black);
-  --clr-header-bg-color: var(--white);
-  --clr-header-2-bg-color: var(--white);
-  --clr-header-3-bg-color: var(--white);
-  --clr-header-4-bg-color: var(--white);
-  --clr-header-5-bg-color: var(--white);
-  --clr-header-6-bg-color: var(--white);
-  --clr-header-7-bg-color: var(--white);
-
-  // Icons
-  --clr-icon-color-success: var(--green);
-  --clr-icon-color-danger: var(--red-darker);
-  --clr-icon-color-warning: var(--yellow-light);
-  --clr-icon-color-error: var(--red-darker);
-  --clr-icon-color-info: var(--turquoise);
-  --clr-icon-color-highlight: var(--turquoise);
-
-  // Label
-  --clr-label-info-font-color: var(--turquoise);
-  --clr-label-info-border-color: var(--turquoise);
-
-  --clr-label-success-bg-color: var(--green-light);
-  --clr-label-success-font-color: var(--green-darkest);
-  --clr-label-success-border-color: var(--green-light-mid);
-
-  --clr-label-warning-border-color: var(--yellow-light);
-
-  --clr-label-danger-bg-color: var(--red-light);
-
-  --clr-label-orange-bg-color: var(--orange-dark);
-  --clr-label-light-blue-bg-color: var(--blue-mid);
-
-  // Links
-  --clr-link-active-color: var(--turquoise);
-  --clr-link-color: var(--turquoise);
-  --clr-link-hover-color: var(--turquoise);
-  --clr-link-visited-color: var(--turquoise-darkest);
-
-  // Notification
-  --clr-notification-progress-info-bar-color: var(--blue-darker);
-
-  // Progress bar
-  --clr-progress-default-color: var(--turquoise);
-  --clr-progress-alt-color-1: var(--green-mid);
-  --clr-progress-alt-color-2: var(--red-darkest);
-  --clr-progress-alt-color-3: var(--orange-darker);
-
-  // Radiobutton
-  --clr-forms-radio-selected-shadow: var(--clr-forms-checkbox-checked-shadow); // selected-background-color
-
-  // Sidenav
-  --clr-sidenav-link-hover-color: var(--clr-global-selection-color);
-
-  // Signposts
-  --clr-signpost-action-hover-color: var(--turquoise);
-
-  // Stack View
-  --clr-stack-view-stack-block-expanded-bg-color: var(--turquoise-light);
-  --clr-stack-view-stack-block-expandable-hover: var(--clr-global-selection-color);
-
-  // Subnav
-  --clr-nav-active-box-shadow-color: var(--turquoise);
-
-  // Text
-  --clr-text-color-primary: var(--turquoise);
-  --clr-text-color-success: var(--green);
-  --clr-text-color-info: var(--turquoise);
-  --clr-text-color-warning: var(--yellow-light);
-  --clr-text-color-danger: var(--red-darker);
-
-  // Toggle
-  --clr-toggle-bg-color-on: var(--turquoise);
-
-  // Tree View
-  --clr-tree-link-hover-color: var(--clr-global-selection-color);
-  --clr-tree-link-selection-color: var(--clr-global-selection-color);
-
-  // Wizard
-  --clr-wizard-stepnav-active-bgcolor: var(--clr-global-selection-color);
-
-  // *************************
-  // CDS variables
-  // *************************
-  --cds-global-typography-font-family: Metropolis, 'Avenir Next', 'Helvetica Neue', Arial, sans-serif;
-  --cds-alias-object-interaction-background-selected: var(--turquoise-light);
-
-  --cds-alias-status-danger-shade: var(--red-darker);
-  --cds-alias-status-danger-tint: var(--red-light);
-  --cds-alias-status-warning-shade: var(--yellow-light);
-  --cds-alias-status-warning: var(--yellow-light);
-  --cds-alias-status-info-shade: var(--turquoise);
-  --cds-alias-status-info-tint: var(--blue-light);
-  --cds-alias-status-info: var(--turquoise);
-  --cds-alias-status-success-shade: var(--green);
-  --cds-alias-status-success-tint: var(--green-light);
-  --cds-alias-status-success: var(--green);
-
-  cds-alert-group {
-    &[status='info'] {
-      --cds-alias-status-info: var(--blue-mid);
-    }
-    &[status='success'] {
-      --cds-alias-status-success: var(--green-light-mid);
-    }
-    &[type='banner'] {
-      &[status='info'] {
-        --cds-alias-status-info: var(--blue-dark);
-      }
-
-      &[status='warning'] {
-        --cds-alias-status-warning: var(--orange-dark);
-        cds-alert {
-          --color: var(--white);
-        }
-      }
-    }
-  }
-
-  cds-badge {
-    &[color='light-blue'] {
-      --background: var(--blue-mid);
-    }
-    &[color='orange'] {
-      --background: var(--orange-dark);
-      --color: var(--white);
-    }
-  }
-
-  cds-tag {
-    &[color='light-blue'] {
-      --border-color: var(--blue-mid);
-    }
-    &[color='orange'] {
-      --border-color: var(--orange-dark);
-    }
-  }
-
-  cds-textarea textarea {
-    outline-color: var(--turquoise);
-  }
-
-  cds-toggle {
-    --cds-alias-status-success: var(--turquoise);
-  }
-}

package/src/themes/phs/variables.color.scss

@@ -1,41 +0,0 @@
-$clr-color-hue: 183.2;
-
-$turquoise: #14a1a9;
-$white: #fff;
-$black: #000;
-
-:root[cds-theme~='phs'] {
-  --blue-light: #e6f3f8;
-  --blue-mid: #85c3df;
-  --blue-dark: #0d88c0;
-  --blue-darker: #0c75a6;
-
-  --turquoise: #{$turquoise};
-  --turquoise-lighter: #e8f3f3;
-  --turquoise-light: #e7f5f6;
-  --turquoise-darkest: #19888d;
-
-  --green-turquiose: #1f9c70;
-  --green-lighter: #e8f2e9;
-  --green-light: #b7e8d7;
-  --green-light-mid: #29cf95;
-  --green-mid: #24b582;
-  --green: #14a91e;
-  --green-dark: #208427;
-  --green-darkest: #266900;
-
-  --red-lighter: #f7eae7;
-  --red-light: #ffdddb;
-  --red-dark: #b12d12;
-  --red-darker: #c11810;
-  --red-darkest: #a8150d;
-
-  --orange-dark: #d25617;
-  --orange-darker: #b84b14;
-  --orange-light: #ffae42;
-
-  --yellow-light: #efd603;
-
-  --black: #{$black};
-  --white: #{$white};
-}

package/src/treetable/treetable.scss

@@ -1,338 +0,0 @@
-@mixin row-indentation($level) {
-  $base-cell-indentation: 2rem;
-  $base-caret-indentation: 0.1rem;
-  $indentation-increment: 1rem;
-
-  .treetable-scrolling-cells {
-    .treetable-cell:first-of-type {
-      padding-left: $base-cell-indentation + $level * $indentation-increment;
-    }
-    .treetable-expandable-caret {
-      @if ($level > 0) {
-        margin-left: $level * $indentation-increment;
-      } @else {
-        margin-left: $base-caret-indentation;
-      }
-    }
-  }
-}
-
-@mixin basic-table($table, $thead, $tbody, $tr, $th, $td) {
-  #{$table} {
-    border-collapse: separate;
-    border-style: solid;
-    border-width: var(--clr-table-borderwidth);
-    border-color: var(--clr-table-border-color);
-    border-radius: var(--clr-table-border-radius);
-    background-color: var(--clr-table-bgcolor);
-    color: var(--clr-table-font-color);
-    margin: 0;
-    margin-top: 0.5rem;
-    max-width: 100%;
-    width: 100%;
-
-    #{$th},
-    #{$td} {
-      font-size: 0.65rem;
-      line-height: 0.7rem;
-      border-top-style: solid;
-      border-top-width: var(--clr-table-borderwidth);
-      border-top-color: var(--clr-tablerow-bordercolor);
-      padding: 0.55rem 0.6rem;
-      text-align: center;
-      vertical-align: top;
-    }
-
-    #{$th} {
-      color: var(--clr-thead-color);
-      font-size: 0.55rem;
-      font-weight: 600;
-      letter-spacing: 0.03rem;
-      background-color: var(--clr-thead-bgcolor);
-      vertical-align: bottom;
-      border-bottom-style: solid;
-      border-bottom-width: var(--clr-table-borderwidth);
-      border-bottom-color: var(--clr-table-border-color);
-      border-top: 0 none;
-    }
-
-    #{$tbody} #{$tr}:first-child #{$td} {
-      border-top: 0 none;
-    }
-
-    // in the rare event we have more than one tbody element.
-    #{$tbody} + #{$tbody} {
-      border-top-style: solid;
-      border-top-width: var(--clr-table-borderwidth);
-      border-top-color: var(--clr-table-border-color);
-    }
-
-    // Rounded corners on tables are a pain...
-    #{$thead} #{$th} {
-      &:first-child {
-        border-radius: 0;
-        border-top-left-radius: var(--clr-table-cornercellradius);
-      }
-
-      &:last-child {
-        border-radius: 0;
-        border-top-right-radius: var(--clr-table-cornercellradius);
-      }
-    }
-
-    #{$tbody}:last-child {
-      #{$tr}:last-child {
-        #{$td} {
-          &:first-child {
-            border-radius: 0;
-            border-bottom-left-radius: var(--clr-table-cornercellradius);
-          }
-
-          &:last-child {
-            border-radius: 0;
-            border-bottom-right-radius: var(--clr-table-cornercellradius);
-          }
-        }
-      }
-    }
-  }
-}
-
-@include exports('treetable.clr-addons') {
-  @include basic-table(
-    '.treetable',
-    '.treetable-header',
-    '.treetable-body',
-    '.treetable-row',
-    '.treetable-column',
-    '.treetable-cell'
-  );
-
-  .treetable-host {
-    display: flex;
-    flex-flow: column nowrap;
-    position: relative;
-
-    .treetable-header,
-    .treetable-body,
-    .treetable-row,
-    .treetable-column,
-    .treetable-cell {
-      display: block;
-    }
-
-    .clr-row-clickable {
-      cursor: pointer;
-    }
-
-    .treetable {
-      border-bottom-left-radius: 0;
-      border-bottom-right-radius: 0;
-      -ms-overflow-style: -ms-autohiding-scrollbar;
-      overflow: auto;
-      flex: 1 1 auto;
-      margin-top: 0.5rem;
-
-      .treetable-grid {
-        display: flex;
-        flex-direction: column;
-        flex: 1 1 auto;
-        align-content: flex-start;
-        min-height: 3rem; // Includes header and space for a single (non existing) row
-        position: relative;
-        height: 100%;
-      }
-
-      .treetable-action-trigger {
-        margin: 0;
-        padding: 0;
-        border: 0;
-        background: none;
-        cursor: pointer;
-      }
-
-      .treetable-expandable-caret {
-        padding: 0.1rem 0.2rem 0.15rem;
-        text-align: center;
-        position: absolute;
-        z-index: map-get($clr-layers, datagrid-header) - 1;
-        overflow: hidden;
-
-        .treetable-expandable-caret-button {
-          -webkit-appearance: none;
-          -moz-appearance: none;
-          -ms-appearance: none;
-          -o-appearance: none;
-          margin: 0;
-          padding: 0;
-          border: none;
-          border-radius: 0;
-          box-shadow: none;
-          background: none;
-          cursor: pointer;
-          height: 1.5rem;
-          width: 1.5rem;
-        }
-
-        .treetable-expandable-caret-icon {
-          color: var(--clr-color-neutral-700);
-
-          svg {
-            transition: transform 0.2s ease-in-out;
-          }
-        }
-      }
-
-      .treetable-row-actions {
-        min-width: 1.9rem;
-        max-width: 1.9rem;
-        flex: 0 0 1.9rem;
-        position: relative;
-
-        &:after {
-          content: '';
-          width: 0.05rem;
-          height: calc(100% - 0.5rem);
-          position: absolute;
-          right: 0;
-          top: 0.25rem;
-          background-color: var(--clr-table-border-color, #ccc);
-        }
-      }
-
-      .treetable-row-scrollable {
-        display: flex;
-        flex-flow: row nowrap;
-        flex: 1 1 auto;
-
-        :first-child {
-          /* Add padding of 1.5 rem to account for the expendable icon in the rows below*/
-          padding-left: 1.5rem;
-        }
-
-        .treetable-column {
-          text-align: left;
-          min-width: 4rem;
-
-          &:last-of-type {
-            padding-right: 1rem;
-          }
-        }
-      }
-
-      .treetable-header {
-        position: sticky;
-        top: 0;
-        // bug(popover): prevents action-overflow from being on top (first row).
-        // Needed to keep select/radio and expand svgs underneath header on scrolling
-        z-index: map-get($clr-layers, datagrid-header);
-        display: flex;
-        flex-flow: row nowrap;
-        flex: 1 1 auto;
-
-        &.hide-header {
-          visibility: hidden;
-          min-height: 0;
-          height: 0;
-        }
-      }
-
-      .treetable-body {
-        width: auto;
-
-        .treetable-row:hover {
-          background-color: var(--clr-datagrid-row-hover);
-        }
-
-        .treetable-row-wrapper {
-          .clr-tt-node-content.treetable-row {
-            border-top: var(--clr-global-borderwidth) solid var(--clr-table-border-color);
-            display: flex;
-            flex: 1 1 auto;
-            flex-flow: row nowrap;
-          }
-
-          .treetable-scrolling-cells {
-            display: flex;
-            flex: 1 1 auto;
-            flex-flow: row nowrap;
-            overflow: hidden;
-
-            .treetable-cell {
-              text-align: left;
-              min-width: 4rem;
-              border-color: var(--clr-table-border-color);
-
-              &:last-of-type {
-                padding-right: 1rem;
-              }
-            }
-          }
-
-          @include row-indentation(0);
-
-          .treetable-row-wrapper {
-            @include row-indentation(1);
-
-            .treetable-row-wrapper {
-              @include row-indentation(2);
-
-              .treetable-row-wrapper {
-                @include row-indentation(3);
-
-                .treetable-row-wrapper {
-                  @include row-indentation(4);
-
-                  .treetable-row-wrapper {
-                    @include row-indentation(5);
-
-                    .treetable-row-wrapper {
-                      @include row-indentation(6);
-                    }
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-
-    &:not(.empty) .treetable-placeholder-container {
-      display: none;
-    }
-
-    .treetable-placeholder-container {
-      flex: 1 1 auto;
-      display: flex;
-      justify-content: center;
-      border-top: var(--clr-global-borderwidth) solid var(--clr-table-border-color);
-    }
-
-    .treetable-placeholder {
-      background: var(--clr-table-bgcolor);
-      width: 100%;
-
-      &.treetable-empty {
-        border-top: 0;
-        padding: 0.5rem;
-        display: flex;
-        flex-flow: column nowrap;
-        align-items: center;
-        justify-content: center;
-        font-size: var(--clr-datagrid-placeholder-font-size);
-        color: var(--clr-dark-midtone-gray);
-      }
-
-      .treetable-placeholder-image {
-        width: 2.5rem;
-        height: 2.5rem;
-        margin-bottom: 0.5rem;
-        background-repeat: no-repeat;
-        background-size: contain;
-        background-position: center;
-        background-image: generateEmptyTreetablePlaceholder();
-      }
-    }
-  }
-}

package/src/view-edit-section/view-edit-section.scss

@@ -1,40 +0,0 @@
-@include exports('view-edit-section.clr-addons') {
-  .view-edit-section {
-    max-width: 1300px;
-
-    .card-block {
-      display: flex;
-      flex-direction: column;
-    }
-
-    .card-title {
-      margin-bottom: 0;
-    }
-
-    .card-text {
-      padding-right: 10px;
-    }
-
-    form,
-    .form {
-      padding: 0;
-    }
-
-    .button-bar {
-      margin-top: 1rem;
-    }
-  }
-
-  .ves-action,
-  .card-action {
-    margin-right: 0 !important;
-    padding-right: 0 !important;
-    line-height: 1rem;
-    height: 1rem;
-  }
-
-  .ves-actions,
-  .card-actions {
-    float: right;
-  }
-}

package/treetable/treetable-action-overflow.ngfactory.d.ts

@@ -1 +0,0 @@
-export {};

package/treetable/treetable-cell.ngfactory.d.ts

@@ -1 +0,0 @@
-export {};

package/treetable/treetable-column.ngfactory.d.ts

@@ -1 +0,0 @@
-export {};

package/treetable/treetable-placeholder.ngfactory.d.ts

@@ -1 +0,0 @@
-export {};

package/treetable/treetable-row.ngfactory.d.ts

@@ -1 +0,0 @@
-export {};

package/treetable/treetable.module.ngfactory.d.ts

@@ -1,3 +0,0 @@
-import * as i0 from '@angular/core';
-import * as i1 from './treetable.module';
-export declare const ClrTreetableModuleNgFactory: i0.NgModuleFactory<i1.ClrTreetableModule>;

package/treetable/treetable.ngfactory.d.ts

@@ -1 +0,0 @@
-export {};

package/view-edit-section/view-edit-section.module.ngfactory.d.ts

@@ -1,3 +0,0 @@
-import * as i0 from '@angular/core';
-import * as i1 from './view-edit-section.module';
-export declare const ClrViewEditSectionModuleNgFactory: i0.NgModuleFactory<i1.ClrViewEditSectionModule>;