@festo-ui/angular 3.1.0 → 3.2.0

package/scss/base/components/accordion/accordion-item/accordion-item-body/accordion-item-body.component.scss

@@ -0,0 +1,109 @@
+@import "../../../../../../../web-essentials/scss/variables";
+
+.fng-accordion-item-body {
+  overflow: hidden;
+  transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  height: 0px;
+
+  // remove all padding/margin top of first element in item body to ensure that its always 24px distance to header (which is the headers padding)
+  > :first-child:not(.fng-accordion-item-body-spacer-bottom):not(.fng-accordion) {
+    margin-top: 0 !important;
+    padding-top: 0 !important;
+  }
+
+  // for mobile view we do not have an extra margin for elements in body
+  > :not(.fng-accordion) {
+    margin-right: 0px;
+  }
+
+  &-content {
+    margin-right: $spacer-xxl;
+  }
+
+  &-spacer {
+    // the spacer ensures that there is always at least 24px margin at the end of the body
+    // it also makes use of "margin collapsing" so that even if the last element in the body itself has a margin of 24px or more
+    // it will not add the 24px on top of it
+    &-bottom {
+      margin-top: $spacer-m;
+      height: 0;
+      width: 0;
+    }
+  }
+}
+
+// styles for an accordion inside an accordion (nested accordion)
+.fng-accordion-item-body {
+
+  .fng-accordion {
+    margin-top: $spacer-xxl;
+    margin-bottom: $spacer-m;
+  }
+
+  .fng-accordion-item {
+    &-link {
+      display: block;
+      top: 8px;
+    }
+
+    &-header {
+      padding-top: $spacer-l;
+      padding-right: $spacer-l;
+    }
+
+    &::after {
+      top: 12px;
+      right: 4px;
+      color: $caerul;
+      font-family: $font-family-icons-16;
+      font-size: $font-size-base;
+      content: "\e900";
+      height: $spacer-s;
+      line-height: $spacer-s;
+    }
+
+    &--expanded {
+      &::before {
+        background-color: transparent;
+      }
+    }
+  }
+}
+
+// styles for different viewports below this line with mobile first approach
+@media (min-width: $grid-breakpoint-xs) {
+  .fng-accordion-item {
+    &-body {
+      // give all elements inside the accordion body a margin right of 64px except if its another accordion inside the body
+      > :not(.fng-accordion) {
+        margin-right: $spacer-xxl;
+      }
+    }
+  }
+
+  // styles for an accordion inside an accordion (nested accordion)
+  .fng-accordion-item-body {
+    .fng-accordion-item {
+      &-header {
+        padding-top: $spacer-m;
+        // increase the padding right because instead of only arrow icon we have text and arrow icon here
+        // make a best guess to fit also langugages with more chars (if too long it will be truncated with ellipsis)
+        padding-right: 168px;
+      }
+
+      &-link {
+        font-size: $font-size-base;
+        top: $spacer-m;
+        max-width: $spacer-xxl * 2;
+        // if link gets to long we truncate it with ellipsis here
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      &::after {
+        top: 30px;
+      }
+    }
+  }
+}

package/scss/base/components/accordion/accordion-item/accordion-item-header/accordion-item-header.component.scss

@@ -0,0 +1,9 @@
+@import "../../../../../../../web-essentials/scss/variables";
+
+.fng-accordion-item-header {
+  display: flex;
+  align-items: center;
+  padding: $spacer-m $spacer-xxl $spacer-m 0;
+  min-height: $spacer-xl;
+  cursor: pointer;
+}

package/scss/base/components/accordion/accordion-item/accordion-item.component.scss

@@ -0,0 +1,71 @@
+@import "../../../../../../web-essentials/scss/variables";
+
+.fng-accordion-item {
+  position: relative;
+  padding: 0 $spacer-s 0 $spacer-m;
+  border-top: 1px solid $gray-100;
+  border-bottom: 1px solid $gray-100;
+
+  &-link {
+    position: absolute;
+    top: $spacer-m;
+    right: $spacer-m;
+    color: $caerul;
+    font-size: $font-size-md;
+    pointer-events: none;
+    display: none;
+  }
+
+  &::before {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: block;
+    content: "";
+    width: $spacer-xxxs;
+    height: 0px;
+    background-color: $caerul;
+  }
+
+  &::after {
+    position: absolute;
+    top: 21px;
+    right: $spacer-s;
+    display: block;
+    font-family: $font-family-icons-32;
+    font-size: $font-size-xxl;
+    content: "\e900";
+    height: $spacer-l;
+    line-height: $spacer-l;
+    transition: transform 0.2s ease;
+    pointer-events: none;
+  }
+
+  &--expanded {
+    .fng-accordion-item-header {
+      font-weight: $font-weight-bold;
+    }
+
+    .fng-accordion-item-body {
+      height: auto;
+    }
+
+    &::after {
+      transform: rotate(-180deg);
+    }
+
+    &::before {
+      height: 100%;
+    }
+  }
+
+  &--collapsed {
+    .fng-accordion-item-body {
+      height: 0px;
+    }
+
+    .fng-accordion-item-header {
+      font-weight: $font-weight-normal;
+    }
+  }
+}

package/scss/base/components/accordion/accordion.component.scss

@@ -0,0 +1,6 @@
+@import "../../../../../web-essentials/scss/variables";
+
+.fng-accordion {
+  background-color: $white;
+  border-bottom: 1px solid $gray-100;
+}

package/scss/base/components/breadcrumb/breadcrumb.component.scss

@@ -1 +0,0 @@
-

package/scss/base/components/buttons/button/button.component.scss

@@ -1,4 +1,9 @@
-.fng-button {
+fng-button {
+  display: inline-block;
+}
+
+.fng-button { 
+  width: 100%;
   .fng-button-text {
     margin: -1px 0px 1px 0px;
   }

package/scss/base/components/image-gallery/styles.scss

@@ -0,0 +1,5 @@
+@import "swiper/scss";
+@import "swiper/scss/free-mode";
+@import "swiper/scss/navigation";
+@import "swiper/scss/thumbs";
+@import "swiper/scss/zoom";

package/scss/base/components/modals/prompt/prompt.component.scss

@@ -1 +0,0 @@
-

package/scss/base/components/popovers/legend/legend.component.scss

@@ -1,5 +1,5 @@
-@import '../../../../../../web-essentials/scss/variables';
-@import '../../../../../../web-essentials/scss/popover';
+@import "../../../../../../web-essentials/scss/variables";
+@import "../../../../../../web-essentials/scss/popover";
 
 .fng-legend {
   @include popover-legend();

package/scss/base/components/popovers/popover/styles.scss

@@ -1,6 +1,5 @@
-@import '~@angular/cdk/overlay-prebuilt';
-@import '../../../../../../web-essentials/scss/variables';
-@import '../../../../../../web-essentials/scss/popover';
+@import "../../../../../../web-essentials/scss/popover";
+@import "@angular/cdk/overlay-prebuilt";
 
 /* This file is imported into global ~src/styles.scss to overwrite cdk overlay styles */
 

package/scss/base/components/popovers/popover-content/popover-content.component.scss

@@ -1,4 +1,4 @@
-@import '../../../../../../web-essentials/scss/variables';
+@import "../../../../../../web-essentials/scss/variables";
 
 .fng-off-screen {
   position: absolute;

package/scss/base/components/scroll/scroll-story-helper.scss

@@ -1,7 +1,6 @@
-@import '~simplebar/dist/simplebar.min.css';
+@import "~simplebar/dist/simplebar.min.css";
 @import "../../../../../web-essentials/scss/festo-web-essentials.scss";
 
-
 .scroll-test {
   display: block;
   overflow-x: hidden;
@@ -11,4 +10,3 @@
   height: 300px;
   padding-right: 8px;
 }
-

package/scss/base/components/search-input/search-input.component.scss

@@ -1,3 +1,7 @@
 .fwe-w-100 {
   width: 100%;
 }
+
+.fwe-search-suggestion {
+  height: 40px;
+}

package/scss/base/components/snackbar/snackbar.component.scss

@@ -1,3 +1,3 @@
 .fwe-snackbar {
   pointer-events: all;
-}
+}

package/scss/base/components/stepper-horizontal/step-horizontal/step-horizontal.component.scss

@@ -0,0 +1,23 @@
+.overflow-hidden {
+  overflow: hidden;
+}
+
+@keyframes stepperAnimation {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0%);
+  }
+}
+
+.fng-moving-container {
+  animation-name: stepperAnimation;
+  animation-duration: 0.3s;
+  animation-timing-function: ease;
+}
+
+.hidden {
+  display: none;
+}
+

package/scss/base/components/stepper-vertical/step-vertical/step-vertical.component.scss

@@ -0,0 +1,6 @@
+// start with closed state
+.fwe-step-container.fwe-step-active {
+  .fwe-step-content-container {
+    height: 20px;
+  }
+}

package/scss/base/forms/color-indicator/color-indicator.component.scss

@@ -21,7 +21,7 @@
   .fwe-color-label {
     height: 18px;
     font-size: $font-size-small;
-    font-weight: bold;
+    font-weight: $font-weight-bold;
     margin-bottom: $spacer-xxxs;
   }
 

package/scss/base/forms/color-picker/color-picker.component.scss

@@ -14,21 +14,21 @@ $knobSize: 14px;
     position: relative;
     width: $baseSize + $knobSize;
     height: $baseSize + $knobSize;
-    margin: -$knobSize*0.5;
+    margin: -$knobSize * 0.5;
     .fwe-brightness-gradient {
       position: absolute;
-      top: $knobSize*0.5;
-      bottom: $knobSize*0.5;
-      right: $knobSize*0.5;
-      left: $knobSize*0.5;
+      top: $knobSize * 0.5;
+      bottom: $knobSize * 0.5;
+      right: $knobSize * 0.5;
+      left: $knobSize * 0.5;
       background-image: linear-gradient(transparent, black);
     }
     .fwe-saturation-gradient {
       position: absolute;
-      top: $knobSize*0.5;
-      bottom: $knobSize*0.5;
-      right: $knobSize*0.5;
-      left: $knobSize*0.5;
+      top: $knobSize * 0.5;
+      bottom: $knobSize * 0.5;
+      right: $knobSize * 0.5;
+      left: $knobSize * 0.5;
     }
   }
 
@@ -36,10 +36,10 @@ $knobSize: 14px;
     position: relative;
     height: $baseSize + $knobSize;
     width: $knobSize;
-    margin: -$knobSize*0.5 -3px;
+    margin: -$knobSize * 0.5 -3px;
     margin-left: 18px;
     .fwe-picker-background {
-      margin: $knobSize*0.5 3px;
+      margin: $knobSize * 0.5 3px;
       height: $baseSize;
       width: 8px;
       border-radius: 4px;
@@ -59,7 +59,7 @@ $knobSize: 14px;
   .fwe-alpha-picker {
     @extend .fwe-vertical-picker;
     .fwe-no-color-pattern {
-      margin: $knobSize*0.5 3px;
+      margin: $knobSize * 0.5 3px;
       position: absolute;
     }
     .fwe-picker-background {
@@ -72,9 +72,9 @@ $knobSize: 14px;
     display: flex;
     .fwe-type-indicator {
       .fwe-input-type {
-        font-size: 12px;
-        line-height: 17px;
-        font-weight: bold;
+        font-size: $font-size-small;
+        line-height: calc(#{$font-size-small} + 5px);
+        font-weight: $font-weight-bold;
       }
       flex-shrink: 1;
       cursor: pointer;

package/scss/base/forms/date-picker/date-picker.component.scss

@@ -2,4 +2,4 @@
 
 .fwe-border-hero {
   border-color: $hero !important;
-}
+}

package/scss/base/forms/date-range-picker/date-range-picker.component.scss

@@ -19,7 +19,7 @@
     &--disabled {
       &::after {
         color: $text-disabled;
-      }    
+      }
     }
 
     &::after {

package/scss/base/forms/text-area/text-area.component.scss

@@ -1,17 +1,17 @@
 @import "../../../../../web-essentials/scss/variables";
 
 fng-text-area.ng-invalid label.fwe-input-text {
-  textarea {
-    border-bottom: 1px solid $red !important;
+  textarea {    
+    border: 1px solid $red !important;
     box-shadow: none;
     outline: none;
 
     &:focus {
-      border-bottom: 1px solid $red !important;
+      border: 1px solid $red !important;
     }
 
     &:disabled {
-      border-bottom: 1px solid $control-disabled !important;
+      border: 1px solid $control-disabled !important;
 
       & ~ .fwe-input-text-label,
       & ~ .fwe-input-text-invalid,

package/scss/base/forms/text-editor/text-editor.component.scss

@@ -21,18 +21,17 @@ fng-text-editor {
       min-height: 100%;
       overflow-y: auto;
       @include custom-scrollbar();
-      margin-top: $spacer-xxs;
+      padding-top: $spacer-xxxs;
       padding-bottom: $spacer-xxxs;
-      border-bottom: $gray-400 solid 1px;
-
+      padding-left: $spacer-xxs;
+      border: $control-border solid 1px;
       &:hover {
-        border-bottom: $hero solid 1px;
+        border-color: $hero;
       }
-
       &[contenteditable="true"] {
         outline: none;
         &:focus {
-          border-bottom: $hero solid 1px;
+          border-color: $hero;
         }
       }
     }
@@ -79,9 +78,9 @@ fng-text-editor {
       }
 
       .fng-editor-container {
-        border-bottom: 1px solid $control-disabled !important;
+        border-color: $control-disabled !important;
         &:hover {
-          border-bottom: 1px solid $control-disabled !important;
+          border-color: $control-disabled !important;
         }
       }
       .fng-divider-y {
@@ -122,7 +121,7 @@ fng-text-editor {
         }
 
         &-container {
-          border-bottom: 1px solid $red;
+          border-color: $red;
         }
       }
     }
@@ -218,7 +217,6 @@ fng-text-editor {
     &.ql-snow {
       border: 0;
       padding: $spacer-xxxs 0;
-      border-bottom: 1px solid $gray-400;
 
       .ql-formats {
         &.fng-editor-toolbar-buttons-container {

package/scss/base/forms/time-picker/time-picker-dropdown/time-picker-dropdown.component.scss

@@ -7,4 +7,4 @@
 .fwe-timepicker {
   width: 100%;
   max-width: 100%;
-}
+}