@festo-ui/angular 4.0.3-pre-20221213.1 → 5.0.0

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

@@ -1,207 +0,0 @@
-@import "../../../../../web-essentials/scss/variables";
-@import "../../../../../web-essentials/scss/popover";
-
-$baseSize: 184px;
-$knobSize: 14px;
-
-.fwe-color-picker {
-  width: 216px;
-  &.fwe-alpha-active {
-    width: 245px;
-  }
-
-  .fwe-gradient-picker {
-    position: relative;
-    width: $baseSize + $knobSize;
-    height: $baseSize + $knobSize;
-    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;
-      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;
-    }
-  }
-
-  .fwe-vertical-picker {
-    position: relative;
-    height: $baseSize + $knobSize;
-    width: $knobSize;
-    margin: -$knobSize * 0.5 -3px;
-    margin-left: 18px;
-    .fwe-picker-background {
-      margin: $knobSize * 0.5 3px;
-      height: $baseSize;
-      width: 8px;
-      border-radius: $border-radius-s;
-    }
-    .fwe-knob {
-      left: -3px;
-    }
-  }
-
-  .fwe-hue-picker {
-    @extend .fwe-vertical-picker;
-    .fwe-picker-background {
-      background-image: linear-gradient(#ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000);
-    }
-  }
-
-  .fwe-alpha-picker {
-    @extend .fwe-vertical-picker;
-    .fwe-no-color-pattern {
-      margin: $knobSize * 0.5 3px;
-      position: absolute;
-    }
-    .fwe-picker-background {
-      position: absolute;
-    }
-  }
-
-  .fwe-type-select {
-    position: relative;
-    display: flex;
-    .fwe-type-indicator {
-      .fwe-input-type {
-        font-size: $font-size-small;
-        line-height: calc(#{$font-size-small} + 5px);
-        font-weight: $font-weight-bold;
-      }
-      flex-shrink: 1;
-      cursor: pointer;
-      display: flex;
-      &:hover {
-        color: $hero;
-      }
-    }
-    .fwe-icon-arrows-collapse {
-      margin-left: 16px;
-      line-height: 16px;
-    }
-    .fwe-popover {
-      position: absolute;
-      z-index: 1;
-      top: 24px;
-      left: 0px;
-      .fwe-type-item {
-        cursor: pointer;
-        display: flex;
-        padding: 8px;
-        &:hover {
-          color: $hero;
-        }
-        .fwe-icon-menu-check {
-          opacity: 0;
-          margin-right: 8px;
-        }
-        &.fwe-selected {
-          cursor: default;
-          .fwe-icon-menu-check {
-            opacity: 1;
-          }
-        }
-      }
-    }
-  }
-
-  /* remove spinner buttons from input */
-  // Chrome, Safari, Edge, Opera
-  input::-webkit-outer-spin-button,
-  input::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-  }
-  // Firefox
-  input[type="number"] {
-    -moz-appearance: textfield;
-  }
-  input {
-    padding-right: 0px !important;
-    text-align: center;
-  }
-
-  .fwe-hex-input {
-    width: 75px;
-    margin-right: 16px;
-  }
-  .fwe-red-input {
-    width: 32px;
-    margin-right: 8px;
-  }
-  .fwe-green-input {
-    width: 32px;
-    margin-right: 8px;
-  }
-  .fwe-blue-input {
-    width: 32px;
-  }
-
-  .fwe-alpha-input {
-    span input {
-      width: 48px;
-      padding-right: 16px !important;
-    }
-    .fwe-percent-char {
-      margin-left: -16px;
-    }
-  }
-
-  .fwe-color-grid {
-    display: flex;
-    flex-wrap: wrap;
-    margin-right: -$spacer-xxs;
-    margin-bottom: -$spacer-xxs;
-    .fwe-color-item {
-      align-items: center;
-      display: flex;
-      justify-content: center;
-      color: white;
-      height: $spacer-m;
-      width: $spacer-m;
-      border-radius: $border-radius-s;
-      margin-right: $spacer-xxs;
-      margin-bottom: $spacer-xxs;
-      &.fwe-white-item {
-        border: 1px solid $control-border;
-        color: black;
-      }
-    }
-    .fwe-remove-color-button {
-      align-items: center;
-      display: flex;
-      justify-content: center;
-      height: $spacer-m;
-      width: $spacer-m;
-      border-radius: $border-radius-s;
-      border: 1px solid $control-border;
-      color: $control;
-      margin-right: $spacer-xxs;
-      margin-bottom: $spacer-xxs;
-      .fwe-no-color-pattern {
-        margin: 2px;
-      }
-      i {
-        color: transparent;
-        position: absolute;
-      }
-    }
-  }
-  .fwe-knob {
-    position: absolute;
-    z-index: 1;
-    height: 14px;
-    width: 14px;
-    border-radius: 50%;
-    border: 2px solid white;
-    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
-  }
-}

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

@@ -1,5 +0,0 @@
-@import "../../../../../web-essentials/scss/variables";
-
-.fwe-border-hero {
-  border-color: $hero !important;
-}

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

@@ -1,34 +0,0 @@
-@import "../../../../../web-essentials/scss/variables";
-
-.fwe-border-hero {
-  border-color: $hero !important;
-}
-
-.fng-date-range-picker {
-  &:hover {
-    input {
-      color: $hero;
-    }
-  }
-
-  &-inputs {
-    display: flex;
-    order: 2;
-    position: relative;
-
-    &--disabled {
-      &::after {
-        color: $text-disabled;
-      }
-    }
-
-    &::after {
-      position: absolute;
-      content: "-";
-      left: 50%;
-      top: 50%;
-      transform: translate(-50%, -50%);
-      padding-right: 32px;
-    }
-  }
-}

package/scss/base/forms/radio/radio.component.scss

@@ -1,9 +0,0 @@
-@import "../../../../../web-essentials/scss/variables";
-
-.fwe-radio {
-  &:hover {
-    .fwe-radio-checkmark {
-      background-color: $control;
-    }
-  }
-}

package/scss/base/forms/select/select.component.scss

@@ -1,251 +0,0 @@
-@import "../../../../../web-essentials/scss/variables";
-@import "../../../../../web-essentials/scss/mixins";
-
-@mixin options-max-height {
-  @for $i from 3 through 10 {
-    &.fng-select-panel-options-#{$i} {
-      .fwe-select-options-container {
-        max-height: 18px + 48px * $i;
-      }
-    }
-  }
-}
-
-// wait for panel until this class is added to body
-.fng-select-panel-open {
-  // show panel when correctly positioned
-  .fng-select-panel {
-    opacity: 1 !important;
-  }
-}
-
-// ======================================================================
-// add style changes that differ from web essentials select style below
-// ======================================================================
-fng-select {
-  width: auto;
-
-  &.ng-invalid:not(.ng-pristine) {
-    .fwe-select:hover {
-      border-color: $red;
-    }
-
-    .fwe-select.fwe-required {
-      ~ .fwe-select-invalid {
-        display: block;
-      }
-
-      ~ .fwe-select-description {
-        display: none;
-      }
-    }
-  }
-}
-
-// select overlay panel styles
-.fng-select-panel {
-  // hide all until correctly positioned in cdk-overlay-pane
-  opacity: 0 !important;
-  @include options-max-height();
-
-  // set up general panel styles (spacing, border-radius, box-shadow)
-  .fwe-select-options-container {
-    @include custom-scrollbar();
-  }
-}
-
-.fng-select-panel-wrap {
-  flex-basis: 100%;
-}
-
-// select options styles
-.fwe-select-options-container {
-  position: relative;
-  top: 4px;
-  left: 0px;
-
-  max-height: 258px;
-  min-width: calc(100% + 0px) !important;
-  max-width: 280px;
-  overflow: auto;
-
-  font-size: $font-size-base;
-  background-color: $white;
-  border-radius: $control-border-radius;
-  padding: ($spacer * 0.5) ($spacer * 0.5);
-  margin: 0;
-  border: 1px solid $gray-200;
-  box-shadow: 0px 1px 4px #00000029;
-  list-style: none;
-  outline: 0;
-
-  .fwe-select-option {
-    position: relative;
-    line-height: 1.5 * $spacer;
-    padding: (0.75 * $spacer) (0.5 * $spacer);
-    min-height: 1.5 * $spacer;
-    cursor: pointer;
-
-    &:hover {
-      background-color: $gray-100;
-    }
-
-    &:last-child {
-      border-bottom: none;
-    }
-
-    .fwe-select-option-content {
-      display: block;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      width: 100%;
-      line-height: 1.5 * $spacer;
-      min-height: 1.5 * $spacer;
-    }
-  }
-}
-
-// pseudo checkbox styles
-.fng-select-pseudo-checkbox {
-  width: 16px;
-  height: 16px;
-  border-radius: 2px;
-  cursor: pointer;
-  display: inline-block;
-  vertical-align: middle;
-  box-sizing: border-box;
-  position: relative;
-  flex-shrink: 0;
-  color: $control-border;
-  border: 1px solid;
-  transition: none;
-  margin-right: 12px;
-  top: -1px;
-
-  &::after {
-    color: $white;
-    position: absolute;
-    display: block;
-    opacity: 0;
-    content: "";
-    border-bottom: 2px solid currentColor;
-    transition: opacity 90ms cubic-bezier(0, 0, 0.2, 0.1);
-  }
-  &.fng-select-pseudo-checkbox-checked {
-    background: $caerul;
-    border: 1px solid $caerul;
-    &::after {
-      top: 3px;
-      left: 2px;
-      width: 8px;
-      height: 3px;
-      border-left: 2px solid currentColor;
-      transform: rotate(-45deg);
-      opacity: 1;
-      box-sizing: content-box;
-    }
-  }
-}
-
-// chip styles
-.chip-text-truncate {
-  display: inline-block;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.chip-removable {
-  &::after {
-    position: absolute;
-    right: 5px;
-    top: 4px;
-    color: $text;
-    font-family: $font-family-icons-16;
-    font-size: $font-size-base;
-    content: "\ea1c";
-    line-height: 16px;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-  }
-}
-
-// select input field styles
-.fwe-select-wrapper {
-  display: flex;
-  width: inherit;
-  min-width: 48px;
-  &::before {
-    bottom: unset;
-    top: 24px;
-  }
-
-  &.fng-hide-label {
-    margin-top: 18px;
-    &::before {
-      top: 6px;
-    }
-  }
-
-  &.fwe-disabled {
-    &::before {
-      color: $text-disabled;
-    }
-  }
-
-  .fwe-select {
-    cursor: pointer;
-    height: unset;
-    min-height: 33px;
-
-    .fwe-select-content {
-      padding-right: 24px;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      line-height: 1.5rem;
-    }
-
-    &.fwe-required:not(.fwe-disabled) {
-      ~ .fwe-select-label {
-        &::after {
-          position: relative;
-          left: 3px;
-          display: inline-block;
-          content: "*";
-        }
-      }
-    }
-
-    &.fwe-disabled {
-      cursor: default;
-      border-color: $control-disabled !important;
-      ~ .fwe-select-label {
-        color: $text-disabled;
-      }
-      .fwe-select-content {
-        color: $text-disabled;
-      }
-      .fwe-chip {
-        color: $text-disabled;
-        border: 1px solid $control-disabled;
-        pointer-events: none;
-        .chip-removable {
-          &::after {
-            color: $text-disabled;
-          }
-        }
-      }
-    }
-  }
-
-  .fwe-select-label {
-    &:empty,
-    &.fwe-sr-only {
-      ~ .fwe-select-options-container {
-        top: 56px - 18px; // regular position - height of missing label
-      }
-    }
-  }
-}

package/scss/base/forms/slider/slider.component.scss

@@ -1,20 +0,0 @@
-@import "../../../../../web-essentials/scss/variables";
-
-label.fwe-slider {
-  display: block;
-  height: 56px;
-  position: relative;
-
-  &.fng-slider-label {
-    height: 83px;
-  }
-
-  .fng-slider-value {
-    color: $text;
-    font-size: $font-size-base;
-    margin-bottom: 0px;
-    position: absolute;
-    bottom: 0px;
-    user-select: none;
-  }
-}

package/scss/base/forms/switch/switch.component.scss

@@ -1,145 +0,0 @@
-@import "../../../../../web-essentials/scss/variables";
-
-$defaultHeight: 16px;
-$lgHeight: 24px;
-
-%label-before {
-  flex-direction: row-reverse;
-  justify-content: flex-end;
-
-  .fwe-switch-label-content {
-    margin-left: 0px;
-    margin-right: 8px;
-  }
-}
-
-%label-below {
-  flex-direction: column;
-
-  .fwe-switch-label-content {
-    margin: 8px 0px 0px 0px;
-  }
-
-  .fwe-switch-track {
-    margin-top: 0px;
-    margin-bottom: 0px;
-  }
-}
-
-.fwe-switch-container {
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  white-space: nowrap;
-  vertical-align: middle;
-  width: 100%;
-  user-select: none;
-
-  .fwe-switch-track {
-    box-sizing: border-box;
-    position: relative;
-    height: $defaultHeight;
-    width: $defaultHeight * 2;
-    border: none;
-    background-color: $control-border;
-    border-radius: $defaultHeight * 0.5;
-    margin-top: 4px;
-    margin-bottom: 4px;
-    &:after {
-      content: "";
-      position: absolute;
-      top: 3px;
-      left: 3px;
-      height: $defaultHeight - 6px;
-      width: $defaultHeight - 6px;
-      background: $white;
-      border-radius: 50%;
-      transition: left 0.2s;
-    }
-  }
-
-  &.fwe-switch-lg {
-    .fwe-switch-track {
-      height: $lgHeight;
-      width: $lgHeight * 2;
-      border-radius: $lgHeight * 0.5;
-      margin-top: 0px;
-      margin-bottom: 0px;
-
-      &:after {
-        top: 5px;
-        left: 5px;
-        height: $lgHeight - 10px;
-        width: $lgHeight - 10px;
-      }
-    }
-
-    &.fwe-checked .fwe-switch-track {
-      &:after {
-        left: $lgHeight + 5px;
-      }
-    }
-  }
-
-  .fwe-switch-label-content {
-    line-height: 24px;
-    margin-left: 8px;
-  }
-
-  &.fwe-switch-label-before {
-    @extend %label-before;
-  }
-
-  &.fwe-switch-label-below {
-    @extend %label-below;
-  }
-
-  input[type="checkbox"] {
-    height: 0px;
-    width: 0px;
-    opacity: 0;
-    cursor: pointer;
-  }
-
-  &:hover .fwe-switch-track {
-    background-color: $control-border-dark;
-  }
-
-  &:active .fwe-switch-track {
-    background-color: $control-border-darker;
-  }
-
-  &.fwe-checked .fwe-switch-track {
-    background-color: $caerul;
-    &:after {
-      left: $defaultHeight + 3px;
-    }
-  }
-
-  &:hover.fwe-checked .fwe-switch-track {
-    background-color: $hero-dark;
-  }
-
-  &:active.fwe-checked .fwe-switch-track {
-    background-color: $hero-darker;
-  }
-
-  &.fwe-disabled .fwe-switch-track {
-    background-color: $control-disabled;
-    cursor: not-allowed;
-  }
-
-  &.fwe-disabled.fwe-checked .fwe-switch-track {
-    background-color: $control-disabled;
-    cursor: not-allowed;
-  }
-
-  &.fwe-disabled {
-    cursor: not-allowed;
-  }
-
-  &.fwe-disabled .fwe-switch-label-content {
-    color: $text-disabled;
-    cursor: not-allowed;
-  }
-}

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

@@ -1,43 +0,0 @@
-@import "../../../../../web-essentials/scss/variables";
-
-fng-text-area.ng-invalid label.fwe-input-text {
-  textarea {    
-    border: 1px solid $red !important;
-    box-shadow: none;
-    outline: none;
-
-    &:focus {
-      border: 1px solid $red !important;
-    }
-
-    &:disabled {
-      border: 1px solid $control-disabled !important;
-
-      & ~ .fwe-input-text-label,
-      & ~ .fwe-input-text-invalid,
-      & ~ .fwe-input-text-info {
-        color: $text-disabled;
-      }
-    }
-  }
-
-  .fwe-input-text-info {
-    display: none !important;
-  }
-
-  .fwe-input-text-invalid {
-    display: block !important;
-  }
-}
-
-label.fwe-input-text {
-  .fwe-input-text-count {
-    display: block;
-    line-height: $line-height-base;
-    position: absolute;
-    right: 0px;
-    bottom: 0px;
-    color: $text-disabled;
-    font-size: $font-size-small;
-  }
-}