@c8y/style 1023.71.1 → 1023.76.0

package/styles/core/forms/_input-groups.scss

@@ -1,5 +1,5 @@
 @use "sass:math";
-@use "../../../variables/index" as *;
+@use "../../../variables/index"as *;
 @use "../../../variables/dlt-c8y-icons-vars";
 
 /**
@@ -43,27 +43,31 @@
     padding-left: 0;
   }
 
-  .form-control + .form-control {
+  .form-control+.form-control {
     margin-left: -1px;
   }
-  > .form-control,
-  > .c8y-select-wrapper,
-  > .form-group,
-  > div[c8y-device-group-selector] {
+
+  >.form-control,
+  >.c8y-select-wrapper,
+  >.form-group,
+  >div[c8y-device-group-selector] {
     position: relative;
     z-index: 2;
     flex: 1 1 auto;
     margin-bottom: 0;
     height: $form-control-height-base !important;
     min-width: 0;
+
     &:not(:first-child) {
       margin-left: -1px;
     }
   }
-  > .color-input {
+
+  >.color-input {
     flex-grow: 0;
     flex-basis: 39px;
   }
+
   .form-control.inner-scroll {
     box-shadow: none;
     border: 1px solid $form-control-border-color-default;
@@ -71,7 +75,8 @@
     padding-bottom: 0;
     align-items: center;
     background-color: $form-control-background-default;
-    > .tag {
+
+    >.tag {
       align-self: unset;
       flex-shrink: 0;
     }
@@ -85,7 +90,7 @@
     }
   }
 
-  &.typeahead > div:not(.input-group-btn) {
+  &.typeahead>div:not(.input-group-btn) {
     flex: 1;
 
     .form-control {
@@ -119,6 +124,7 @@
     font-size: $font-size-small;
     height: $form-control-height-sm;
   }
+
   .form-group-lg &,
   .input-group-lg &,
   &.input-lg {
@@ -132,8 +138,8 @@
     margin: 0;
     line-height: 1;
 
-    input[type='checkbox'] + span::before,
-    input[type='radio'] + span::before {
+    input[type='checkbox']+span::before,
+    input[type='radio']+span::before {
       margin: 0;
     }
   }
@@ -143,16 +149,21 @@
   display: flex;
   align-items: stretch;
   max-height: $form-control-height-base;
+
   &:not(:first-child) {
     margin-left: -1px;
   }
-  &--last, + .input-group-btn {
+
+  &--last,
+  +.input-group-btn {
     margin-left: -1px;
   }
+
   .input-group-sm & {
     max-height: $form-control-height-sm;
   }
-  > .btn-default {
+
+  >.btn-default {
     --c8y-btn-default-background-default: #{$form-control-background-default};
   }
 }
@@ -163,6 +174,7 @@
   &:not(:first-child):not(:last-child) {
     border-radius: 0;
   }
+
   .btn:not(.btn-dot) {
     border-radius: $form-control-border-radius;
   }
@@ -174,6 +186,7 @@
   display: flex !important;
 
   .form-control {
+
     &,
     &:first-child,
     &:last-child {
@@ -182,7 +195,9 @@
       border-radius: calc($form-control-height-base * 0.5);
     }
   }
+
   .form-control.input-lg {
+
     &,
     &:first-child,
     &:last-child {
@@ -194,6 +209,7 @@
 
   &:has(.input-group-btn > .btn + .btn) {
     .form-control {
+
       &,
       &:first-child,
       &:last-child {
@@ -220,28 +236,33 @@
       line-height: 1;
       border-radius: calc($form-control-height-base * 0.5);
       text-overflow: initial;
+
       &:hover {
         box-shadow: inset 0 0 0 2px $component-brand-primary;
       }
     }
   }
 
-  &.input-group-sm, .input-group-sm & {
+  &.input-group-sm,
+  .input-group-sm & {
     .form-control:not(.c8y-radio):not(.c8y-checkbox) {
       padding-left: 12px;
     }
 
     .input-group-btn,
-    .input-group-addon, .form-group {
+    .input-group-addon,
+    .form-group {
       height: $form-control-height-sm !important;
     }
   }
 
   &.input-group-lg {
+
     .input-group-btn,
     .input-group-addon {
       height: $form-control-height-lg;
       max-height: unset;
+
       .btn {
         border-radius: $form-control-height-base !important;
         min-width: $form-control-height-lg;
@@ -262,12 +283,13 @@
 }
 
 .input-group-search {
-  .input-group-btn > .btn {
+  .input-group-btn>.btn {
     border-top-right-radius: calc($form-control-height-base * 0.5) !important;
     border-bottom-right-radius: calc($form-control-height-base * 0.5) !important;
   }
+
   &.input-group-lg {
-    .input-group-btn > .btn {
+    .input-group-btn>.btn {
       border-top-right-radius: $form-control-height-base !important;
       border-bottom-right-radius: $form-control-height-base !important;
     }
@@ -277,9 +299,11 @@
 //smaller search input when using the c8y-search-input component
 c8y-search-input.input-group-sm {
   .input-group-search {
+
     .form-control,
     .input-group-addon,
-    .input-group-btn > .btn {
+    .input-group-btn>.btn {
+
       // Inline .input-sm styles (was @extend .input-sm)
       &:not(.c8y-radio):not(.c8y-checkbox) {
         padding: $form-control-padding-small-vertical $form-control-padding-small-horizontal;
@@ -289,6 +313,7 @@ c8y-search-input.input-group-sm {
       }
     }
   }
+
   // add smaller left and right margins in the search dropdown
   c8y-li.m-l-32.m-r-32 {
     margin-left: $size-8 !important;
@@ -300,6 +325,7 @@ c8y-search-input.input-group-sm {
   display: flex !important;
 
   .form-control {
+
     &,
     &:first-child,
     &:last-child {
@@ -341,6 +367,7 @@ c8y-search-input.input-group-sm {
 
 // dropdown without round corners
 .input-group.input-group-dropdown {
+
   .input-group-btn,
   .input-group-addon {
     position: absolute;
@@ -358,9 +385,15 @@ c8y-search-input.input-group-sm {
       height: 100%;
       border: 0;
       border-radius: $form-control-border-radius;
+
+      +.btn {
+        margin-left: 0;
+      }
     }
   }
+
   &.input-group-sm {
+
     .input-group-btn,
     .input-group-addon {
       height: $form-control-height-sm;
@@ -371,22 +404,22 @@ c8y-search-input.input-group-sm {
 // Reset rounded corners
 .input-group .form-control:first-child,
 .input-group-addon:first-child,
-.input-group-btn:first-child > .btn,
-.input-group-btn:first-child > .btn-group > .btn,
-.input-group-btn:first-child > .dropdown-toggle,
-.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle):not(.btn-dot),
-.input-group-btn:last-child > .btn-group:not(:last-child) > .btn {
+.input-group-btn:first-child>.btn,
+.input-group-btn:first-child>.btn-group>.btn,
+.input-group-btn:first-child>.dropdown-toggle,
+.input-group-btn:last-child>.btn:not(:last-child):not(.dropdown-toggle):not(.btn-dot),
+.input-group-btn:last-child>.btn-group:not(:last-child)>.btn {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
 
 .input-group .form-control:last-child,
 .input-group-addon:last-child,
-.input-group-btn:last-child > .btn:not(.btn-dot),
-.input-group-btn:last-child > .btn-group > .btn,
-.input-group-btn:last-child > .dropdown-toggle,
-.input-group-btn:first-child > .btn:not(:first-child),
-.input-group-btn:first-child > .btn-group:not(:first-child) > .btn {
+.input-group-btn:last-child>.btn:not(.btn-dot),
+.input-group-btn:last-child>.btn-group>.btn,
+.input-group-btn:last-child>.dropdown-toggle,
+.input-group-btn:first-child>.btn:not(:first-child),
+.input-group-btn:first-child>.btn-group:not(:first-child)>.btn {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
@@ -394,15 +427,107 @@ c8y-search-input.input-group-sm {
 //Input group editable
 // supports a save button and a cancel button inside a input-group
 .input-group-editable {
-  .input-group-btn {
+  position: relative;
+
+  textarea.form-control {
+    max-height: unset;
+  }
+
+  input[type='number']:not(:focus) {
+    -moz-appearance: textfield;
+
+    &::-webkit-inner-spin-button {
+      margin: 0;
+      -webkit-appearance: none;
+    }
+  }
+
+  .form-control, .form-control:first-child{
+    field-sizing: content;
+    min-width: 3ch;
+    max-width: 100%;
+    width: auto;
+    transition: all 0.25s ease;
+    flex: 0 1 auto;
+
+    + span{
+      opacity: 1;
+      transition: all 0.25s ease;
+      display: flex;
+      align-items: flex-end;
+        &::after {
+          z-index: 5;
+          display: inline-block;
+          align-self: center;
+          margin-left: calc(-1 * $size-8);
+          color: $component-brand-primary;
+          opacity: 1;
+          line-height: $form-control-height-base;
+          transition: all 0.25s ease;
+          content: dlt-c8y-icons-vars.$dlt-c8y-icon-pencil;
+          font-family: dlt-c8y-icons-vars.$icon-font-family;
+          font-style: normal;
+          font-weight: normal;
+          text-rendering: auto;
+          -webkit-font-smoothing: antialiased;
+          -moz-osx-font-smoothing: grayscale;
+        }
+      }
+    
+    &:hover, &:focus-within{
+      + span {
+        opacity: 0;
+      }
+    }
+  }
+  .form-control:not(:hover):not(:focus):not(.ng-dirty) {
+    z-index: 2;
+    overflow: hidden;
+    margin-right: 12px;
+    padding-left: 0;
+    padding-right: 0;
+    border-radius: $form-control-border-radius;
+    width: auto;
+    background-color: transparent;
+    box-shadow: none;
+    text-overflow: ellipsis;
+    + span{
+      display: flex;
+      align-items: flex-end;
+    }
+    &[disabled],
+    &[read-only] {
+      width: 100%;
+      +span::after {
+        opacity: 0;
+      }
+    }
+  }
+  .input-group-btn{
+    opacity: 0;
+    pointer-events: none;
+    transition: all 0.25s ease;
+    padding: $size-4;
+    display: flex;
+
     .btn-clean {
       position: relative;
-      padding: 6px;
+      padding: 0!important;
+      width: auto;
+      margin: 0!important;
+      max-height: unset;
+      height: auto!important;
+      aspect-ratio: 1;
+      border-radius: 50%!important;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      align-self: stretch;
 
       &::after {
         position: absolute;
         top: 50%;
-        right: 0;
+        left: -4px;
         display: block;
         margin-top: calc(-1 * $size-10);
         width: 1px;
@@ -410,128 +535,111 @@ c8y-search-input.input-group-sm {
         background-color: rgba($black, math.div(10, 100));
         content: '';
       }
-    }
-
-    &:last-child {
-      .btn-clean::after {
+      &:last-child::after {
         display: none;
       }
     }
   }
-}
-
-.input-group-editable {
-  textarea.form-control {
-    max-height: unset;
-    height: $form-control-height-base;
-  }
-
-  input[type='number']:not(:focus) {
-    -moz-appearance: textfield;
-
-    &::-webkit-inner-spin-button {
+  &:has(.ng-dirty){
+    .input-group-btn{
+      opacity: 1;
+      pointer-events: auto;
+      z-index: 10;
       margin: 0;
-
-      -webkit-appearance: none;
-    }
-  }
-
-  .form-control:not(.ng-dirty) {
-    transition: all 0.25s ease;
-
-    &[disabled] {
-      padding-left: 0;
-      box-shadow: none;
-      opacity: $component-disabled-opacity;
-      transition: none;
-    }
-
-    ~ .input-group-btn {
-      display: none;
     }
   }
-
-  &:not(:hover) {
+  &:not(:has(.form-control:hover)):not(:focus-within) {
     textarea.form-control {
       resize: none;
     }
-
-    .form-control:not(:focus):not(.ng-dirty) {
-      z-index: 2;
-      overflow: hidden;
-      flex: 0 1 auto;
-      margin-right: 12px;
-      padding-left: 0;
-      min-width: 3ch;
-      max-width: 100%;
-      field-sizing: content;
-      width: auto;
-      background-color: transparent;
-      box-shadow: none;
-      text-overflow: ellipsis;
-
-      &[disabled],
-      &[read-only] {
-        width: 100%;
+  }
+  .form-control.ng-dirty{
+    padding-right: calc($form-control-height-base * 2)!important;
+    border-top-right-radius: $form-control-height-sm;
+    border-bottom-right-radius: $form-control-height-sm;
+    + span{
+      opacity: 0;
+    }
+    ~.input-group-btn {
+      max-height: unset;
+      height: $form-control-height-base;
+      margin-left: calc($form-control-height-base * -2);
+      align-items: stretch;
+      .btn{
+        height: unset!important;
       }
-
-      + span:after {
-        z-index: 5;
-        display: inline-block;
-        margin-left: calc(-1 * $size-16);
-        color: $component-brand-primary;
-        content: dlt-c8y-icons-vars.$dlt-c8y-icon-pencil;
-        font: normal normal normal 14px/1 dlt-c8y-icons-vars.$icon-font-family;
-        font-size: 12px;
-        line-height: 32px;
-        opacity: 0.5;
-
-        text-rendering: auto;
-        -webkit-font-smoothing: antialiased;
-        -moz-osx-font-smoothing: grayscale;
-
-        .form-group-lg & {
-          line-height: 40px;
-        }
+    }
+  }
+  &.input-group-sm,
+  .form-group-sm & {
+    .form-control.ng-dirty{
+      padding-right: calc($form-control-height-sm * 2)!important;
+      border-top-right-radius: $form-control-height-sm;
+      border-bottom-right-radius: $form-control-height-sm;
+      + span{
+        opacity: 0;
       }
-
-      &[disabled] {
-        + span:after {
-          display: none;
+      ~.input-group-btn {
+        height: $form-control-height-sm;
+        margin-left: calc($form-control-height-sm * -2);
+        .btn{
+          height: unset!important;
         }
       }
     }
+    .form-control:not(.ng-dirty)+span::after {
+      line-height: $form-control-height-sm;
+    }
   }
 
-  &:hover {
-    .form-control:not(:focus):not(.ng-dirty) {
-      flex: 0 1 auto;
-      max-width: 100%;
+  &.input-group-lg,
+  .form-group-lg & {
+    .form-control.ng-dirty{
+      padding-right: calc($form-control-height-lg * 2)!important;
+      border-top-right-radius: $form-control-height-lg;
+      border-bottom-right-radius: $form-control-height-lg;
+      + span{
+        opacity: 0;
+      }
+      ~.input-group-btn {
+        height: $form-control-height-lg;
+        margin-left: calc($form-control-height-lg * -2);
+        .btn{
+          height: unset!important;
+        }
+      }
+    }
+    .form-control:not(.ng-dirty)+span::after {
+      line-height: $form-control-height-lg;
     }
   }
 }
 
 // Sizing options
 // Remix the default form control sizing classes into new ones for easier manipulation.
-.input-group-lg > .form-control,
-.input-group-lg > .input-group-addon,
-.input-group-lg > .input-group-btn > .btn,
-.input-group-search.input-group-lg .input-group > .form-control,
-.input-group-search.input-group-lg .input-group-btn > .btn {
-    // Inline .input-lg styles (was @extend .input-lg)
-    &:not(.c8y-radio):not(.c8y-checkbox) {
-        padding: $form-control-padding-large-vertical $form-control-padding-large-horizontal;
-        max-height: unset !important;
-        height: $form-control-height-lg !important;
-        font-size: $font-size-large;
-    }
+.input-group-lg>.form-control,
+.input-group-lg>.input-group-addon,
+.input-group-lg>.input-group-btn>.btn,
+.input-group-search.input-group-lg .input-group>.form-control,
+.input-group-search.input-group-lg .input-group-btn>.btn {
+
+  // Inline .input-lg styles (was @extend .input-lg)
+  &:not(.c8y-radio):not(.c8y-checkbox) {
+    padding: $form-control-padding-large-vertical $form-control-padding-large-horizontal;
+    max-height: unset !important;
+    height: $form-control-height-lg !important;
+    font-size: $font-size-large;
+  }
 }
-.input-group-lg > .form-group {
+
+.input-group-lg>.form-group {
   height: $form-control-height-lg !important;
 }
-.input-group-sm > .form-control,
-.input-group-sm > .input-group-addon,
-.input-group-sm > .input-group-btn > .btn {
+
+.input-group-sm>.form-control,
+.input-group-sm>.input-group-addon,
+.input-group-sm>.input-group-btn>.btn {
+
   // Inline .input-sm styles (was @extend .input-sm)
   &:not(.c8y-radio):not(.c8y-checkbox) {
     padding: $form-control-padding-small-vertical $form-control-padding-small-horizontal;
@@ -582,17 +690,16 @@ c8y-search-input.input-group-sm {
   // `font-size` in combination with `inline-block` on buttons.
   font-size: 0;
 
+  .btn+.btn {
+    margin-left: 0;
+  }
+
   // element above the siblings.
-  > .btn {
+  >.btn {
     position: relative;
     padding: $size-5 12px;
     height: 100%;
 
-    + .btn {
-      margin-left: -1px;
-      border-left-color: rgba($black, math.div(15, 100));
-    }
-
     // Bring the "active" button to the front
     &:hover,
     &:focus,
@@ -614,29 +721,33 @@ c8y-search-input.input-group-sm {
 
   // No negative margins to show the complet input border
   &:first-child {
-    > .btn,
-    > .btn-group {
+
+    >.btn,
+    >.btn-group {
       margin-right: 0;
       border-right-color: rgba($black, math.div(15, 100));
     }
 
-    > .btn:last-child {
+    >.btn:last-child {
       // border-right: 0;
     }
   }
 
   &:last-child {
-    > .btn:not(:focus),
-    > .btn-group {
+
+    >.btn:not(:focus),
+    >.btn-group {
       z-index: 2;
       // border-left-color: rgba($black, 15/100);
     }
-    > .btn:focus {
+
+    >.btn:focus {
       margin-left: -1px;
     }
   }
+
   &:not(:first-child) {
-    > .btn:first-child:not(:focus) {
+    >.btn:first-child:not(:focus) {
       // border-left: 0;
     }
   }
@@ -658,7 +769,7 @@ c8y-search-input.input-group-sm {
   }
 
   // $TODO: JAWI validate
-  > .input-group-btn.delete-row {
+  >.input-group-btn.delete-row {
     margin-top: $size-24;
   }
 
@@ -666,12 +777,12 @@ c8y-search-input.input-group-sm {
     flex-grow: 1;
   }
 
-  + .input-group-array {
+  +.input-group-array {
     .input-group-btn {
       margin-top: 0;
     }
 
-    .form-group > label {
+    .form-group>label {
       display: none;
     }
   }
@@ -682,10 +793,10 @@ c8y-search-input.input-group-sm {
   .input-group-array {
     gap: $size-base;
 
-    > formly-field {
+    >formly-field {
       display: contents;
 
-      > formly-group {
+      >formly-group {
         display: contents;
       }
     }
@@ -701,10 +812,11 @@ formly-field label.c8y-checkbox {
 }
 
 c8y-lwm2m-legend-wrapper formly-field {
-  > c8y-field-checkbox {
+  >c8y-field-checkbox {
     display: flex;
     align-items: center;
     margin: 0 0 $size-8 0;
+
     & label.c8y-switch {
       display: flex !important;
       overflow: visible;
@@ -714,6 +826,6 @@ c8y-lwm2m-legend-wrapper formly-field {
 }
 
 // EXTENDABLE INPUT LIST
-[c8yinputgrouplistcontainer] > li:not(:last-child) .input-group-btn > .btn.text-primary {
+[c8yinputgrouplistcontainer]>li:not(:last-child) .input-group-btn>.btn.text-primary {
   display: none;
 }