@c8y/style 1023.14.33 → 1023.14.36

package/styles/{_input-groups.less → core/forms/_input-groups.less}

@@ -182,7 +182,7 @@
       height: 100%;
       line-height: 1;
       border-radius: calc(@form-control-height-base * 0.5);
-      text-overflow: initial!important;
+      text-overflow: initial;
       &:hover {
         box-shadow: inset 0 0 0 2px @component-brand-primary;
       }
@@ -381,7 +381,7 @@ c8y-search-input.input-group-sm{
 
 .input-group-editable {
   textarea.form-control {
-    max-height: unset !important;
+    max-height: unset;
     height: @form-control-height-base;
   }
 

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

@@ -0,0 +1,700 @@
+@use "sass:math";
+@use "../../../variables/index" as *;
+@use "../../../variables/dlt-c8y-icons-vars";
+
+/**
+ * Input Groups - Form input groups with addons and buttons
+ *
+ * Note: Uses $form-control-*, $input-group-addon-*, and $size-* tokens.
+ *
+ * Intentionally hardcoded values:
+ * - Border widths (1px): Standard borders
+ * - Negative margins (-1px): Fine-tuning for overlapping borders
+ * - Component-specific sizes (32px, 39px, 40px, 230px): Fixed component dimensions
+ * - Typography sizes (12px, 14px): Font sizes
+ * - Off-token spacing (12px): Legacy spacing not in token system
+ * - Line-height values (1, 32px, 40px): Specific alignments
+ * - Fine-tuning offsets (3ch, 6px): Precise positioning
+ * - Z-index values: Layering
+ * - Percentages (50%, 100%): Layout calculations
+ * - Calc expressions: Complex computed values
+ * - Transition durations (0.25s): Animation timing
+ * - Opacity values: Visual effects
+ * - RGBA values: Semi-transparent colors
+ */
+
+// Shared mixin for flex container with centered alignment
+@mixin flex-center() {
+  display: flex;
+  align-items: center;
+}
+
+.input-group {
+  position: relative; // For dropdowns
+  display: flex;
+  align-items: stretch;
+  flex-wrap: nowrap;
+  width: 100%;
+
+  // Undo padding and float of grid classes
+  &[class*='col-'] {
+    float: none;
+    padding-right: 0;
+    padding-left: 0;
+  }
+
+  .form-control + .form-control {
+    margin-left: -1px;
+  }
+  > .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 {
+    flex-grow: 0;
+    flex-basis: 39px;
+  }
+  .form-control.inner-scroll {
+    box-shadow: none;
+    border: 1px solid $form-control-border-color-default;
+    padding-top: 0;
+    padding-bottom: 0;
+    align-items: center;
+    background-color: $form-control-background-default;
+    > .tag {
+      align-self: unset;
+      flex-shrink: 0;
+    }
+  }
+
+  c8y-software-type {
+    flex-grow: 1 !important;
+
+    c8y-typeahead .input-group input {
+      flex-grow: 1 !important;
+    }
+  }
+
+  &.typeahead > div:not(.input-group-btn) {
+    flex: 1;
+
+    .form-control {
+      width: 100%;
+    }
+  }
+}
+
+.input-group-addon {
+  @include flex-center();
+  padding: $form-control-padding-base-vertical $form-control-padding-base-horizontal;
+  border-radius: $form-control-border-radius;
+  background-color: $form-control-border-color-default;
+  color: $form-control-color-default;
+  font-weight: $form-control-font-weight;
+  font-size: $font-size-base;
+  font-family: $form-control-font-family;
+  line-height: $form-control-line-height;
+  height: $form-control-height-base;
+
+  &.inner-scroll {
+    max-width: 230px;
+    height: 32px;
+    margin-left: -1px;
+  }
+
+  .form-group-sm &,
+  .input-group-sm &,
+  &.input-sm {
+    padding: $form-control-padding-small-vertical $form-control-padding-small-horizontal;
+    font-size: $font-size-small;
+    height: $form-control-height-sm;
+  }
+  .form-group-lg &,
+  .input-group-lg &,
+  &.input-lg {
+    padding: $form-control-padding-large-vertical $form-control-padding-large-horizontal;
+    font-size: $font-size-large;
+    height: $form-control-height-lg;
+  }
+
+  label.c8y-checkbox,
+  label.c8y-radio {
+    margin: 0;
+    line-height: 1;
+
+    input[type='checkbox'] + span::before,
+    input[type='radio'] + span::before {
+      margin: 0;
+    }
+  }
+}
+
+.input-group-btn {
+  display: flex;
+  align-items: stretch;
+  max-height: $form-control-height-base;
+  &:not(:first-child) {
+    margin-left: -1px;
+  }
+  &--last, + .input-group-btn {
+    margin-left: -1px;
+  }
+  .input-group-sm & {
+    max-height: $form-control-height-sm;
+  }
+  > .btn-default {
+    --c8y-btn-default-background-default: #{$form-control-background-default};
+  }
+}
+
+.input-group-addon,
+.input-group-btn,
+.form-control {
+  &:not(:first-child):not(:last-child) {
+    border-radius: 0;
+  }
+  .btn:not(.btn-dot) {
+    border-radius: $form-control-border-radius;
+  }
+}
+
+// search with round corners
+.input-group.input-group-search,
+.input-group-search .input-group {
+  display: flex !important;
+
+  .form-control {
+    &,
+    &:first-child,
+    &:last-child {
+      padding-right: calc($form-control-height-base + $form-control-padding-base-horizontal) !important;
+      padding-left: calc($form-control-padding-base-horizontal * 2);
+      border-radius: calc($form-control-height-base * 0.5);
+    }
+  }
+  .form-control.input-lg {
+    &,
+    &:first-child,
+    &:last-child {
+      padding: $form-control-padding-large-vertical calc($form-control-padding-large-horizontal * 2);
+      border-radius: $form-control-height-base;
+      font-size: $font-size-large;
+    }
+  }
+
+  &:has(.input-group-btn > .btn + .btn) {
+    .form-control {
+      &,
+      &:first-child,
+      &:last-child {
+        padding-right: calc($form-control-height-base + $form-control-padding-base-horizontal * 4) !important;
+      }
+    }
+  }
+
+  .input-group-btn,
+  .input-group-addon {
+    position: absolute;
+    right: 0;
+    z-index: 2;
+    display: flex;
+    align-items: center;
+    min-width: $form-control-height-base;
+    height: $form-control-height-base;
+    border: 0;
+    background-color: transparent;
+
+    .btn {
+      width: 100%;
+      height: 100%;
+      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 & {
+    .form-control:not(.c8y-radio):not(.c8y-checkbox) {
+      padding-left: 12px;
+    }
+
+    .input-group-btn,
+    .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;
+      }
+    }
+  }
+}
+
+.input-group.input-group--dots {
+  display: flex;
+  align-items: center;
+  border-radius: calc($form-control-height-base * 0.5);
+  height: $form-control-height-base;
+  border: 1px solid $form-control-border-color-default;
+  padding: var(--c8y-form-control-padding-base-vertical);
+  gap: $size-8;
+  font-size: $font-size-small;
+}
+
+.input-group-search {
+  .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 {
+      border-top-right-radius: $form-control-height-base !important;
+      border-bottom-right-radius: $form-control-height-base !important;
+    }
+  }
+}
+
+//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 {
+    // @extend .input-sm; // Removed for performance
+    }
+  }
+  // add smaller left and right margins in the search dropdown
+  c8y-li.m-l-32.m-r-32 {
+    margin-left: $size-8 !important;
+    margin-right: $size-8 !important;
+  }
+}
+
+.input-group.input-group-password {
+  display: flex !important;
+
+  .form-control {
+    &,
+    &:first-child,
+    &:last-child {
+      padding-right: calc($form-control-height-base + $form-control-padding-base-horizontal);
+      padding-left: $form-control-padding-base-horizontal;
+    }
+  }
+
+  .input-group-btn,
+  .input-group-addon {
+    position: absolute;
+    right: 0;
+    z-index: 2;
+    display: flex;
+    align-items: center;
+    min-width: $form-control-height-base;
+    height: 100%;
+    max-height: unset;
+    border: 0;
+    background-color: transparent;
+
+    .btn {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  &.input-group-sm {
+    .form-control:not(.c8y-radio):not(.c8y-checkbox) {
+      padding-left: 12px;
+    }
+
+    .input-group-btn,
+    .input-group-addon {
+      height: $form-control-height-sm;
+    }
+  }
+}
+
+// dropdown without round corners
+.input-group.input-group-dropdown {
+  .input-group-btn,
+  .input-group-addon {
+    position: absolute;
+    right: 0;
+    z-index: 2;
+    display: flex;
+    align-items: center;
+    min-width: $form-control-height-base;
+    height: $form-control-height-base;
+    border: 0;
+    background-color: transparent;
+
+    .btn {
+      width: 100%;
+      height: 100%;
+      border: 0;
+      border-radius: $form-control-border-radius;
+    }
+  }
+  &.input-group-sm {
+    .input-group-btn,
+    .input-group-addon {
+      height: $form-control-height-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 {
+  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 {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+//Input group editable
+// supports a save button and a cancel button inside a input-group
+.input-group-editable {
+  .input-group-btn {
+    .btn-clean {
+      position: relative;
+      padding: 6px;
+
+      &::after {
+        position: absolute;
+        top: 50%;
+        right: 0;
+        display: block;
+        margin-top: calc(-1 * $size-10);
+        width: 1px;
+        height: $size-20;
+        background-color: rgba($black, math.div(10, 100));
+        content: '';
+      }
+    }
+
+    &:last-child {
+      .btn-clean::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 {
+      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) {
+    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%;
+      }
+
+      + 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;
+        }
+      }
+
+      &[disabled] {
+        + span:after {
+          display: none;
+        }
+      }
+    }
+  }
+
+  &:hover {
+    .form-control:not(:focus):not(.ng-dirty) {
+      flex: 0 1 auto;
+      max-width: 100%;
+    }
+  }
+}
+
+// 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 {
+    @extend .input-lg !optional;
+}
+.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 {
+  // @extend .input-sm; // Removed for performance
+}
+.input-group-sm > .form-group {
+  height: $form-control-height-sm !important;
+}
+
+// Text input groups
+.input-group-addon {
+  padding: $form-control-padding-base-vertical $form-control-padding-base-horizontal;
+  border: 1px solid $input-group-addon-border-color;
+  border-radius: $form-control-border-radius;
+  background-color: $input-group-addon-background-default;
+  color: $form-control-color-default;
+  text-align: center;
+  font-weight: normal;
+  font-size: $font-size-base;
+  line-height: 1;
+
+  &.input-sm {
+    padding: $form-control-padding-small-vertical $form-control-padding-small-horizontal;
+    border-radius: $form-control-border-radius;
+    font-size: $font-size-small;
+  }
+
+  &.input-lg {
+    padding: $form-control-padding-large-vertical $form-control-padding-large-horizontal;
+    border-radius: $form-control-border-radius;
+    font-size: $font-size-large;
+  }
+
+  input[type='radio'],
+  input[type='checkbox'] {
+    margin-top: 0;
+  }
+}
+
+// Button input groups
+.input-group-btn {
+  position: relative; // Jankily prevent input button groups from wrapping with `white-space` and
+  white-space: nowrap; // Negative margin for spacing, position for bringing hovered/focused/actived
+  // `font-size` in combination with `inline-block` on buttons.
+  font-size: 0;
+
+  // element above the siblings.
+  > .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,
+    &:active {
+      z-index: 2;
+    }
+
+    &.btn-default:not(:focus) {
+      border-color: $form-control-border-color-default;
+    }
+
+    &.btn-link[disabled] {
+      color: $component-color-disabled !important;
+      opacity: $form-control-disabled-opacity !important;
+      cursor: $cursor-disabled !important;
+      pointer-events: auto !important;
+    }
+  }
+
+  // No negative margins to show the complet input border
+  &:first-child {
+    > .btn,
+    > .btn-group {
+      margin-right: 0;
+      border-right-color: rgba($black, math.div(15, 100));
+    }
+
+    > .btn:last-child {
+      // border-right: 0;
+    }
+  }
+
+  &:last-child {
+    > .btn:not(:focus),
+    > .btn-group {
+      z-index: 2;
+      // border-left-color: rgba($black, 15/100);
+    }
+    > .btn:focus {
+      margin-left: -1px;
+    }
+  }
+  &:not(:first-child) {
+    > .btn:first-child:not(:focus) {
+      // border-left: 0;
+    }
+  }
+}
+
+// input-group-array for formly array.type.component
+.input-group-array {
+  @media screen and (min-width: $screen-sm-min) {
+    display: flex;
+  }
+
+  .form-group {
+    position: relative;
+  }
+
+  .form-group,
+  .input-group-btn {
+    margin-bottom: $size-4;
+  }
+
+  // $TODO: JAWI validate
+  > .input-group-btn.delete-row {
+    margin-top: $size-24;
+  }
+
+  formly-field {
+    flex-grow: 1;
+  }
+
+  + .input-group-array {
+    .input-group-btn {
+      margin-top: 0;
+    }
+
+    .form-group > label {
+      display: none;
+    }
+  }
+}
+
+// modifier classes for formly
+.formly-group-array-cols {
+  .input-group-array {
+    gap: $size-base;
+
+    > formly-field {
+      display: contents;
+
+      > formly-group {
+        display: contents;
+      }
+    }
+
+    formly-field {
+      flex-basis: 50%;
+    }
+  }
+}
+
+formly-field label.c8y-checkbox {
+  margin: $size-base 0;
+}
+
+c8y-lwm2m-legend-wrapper formly-field {
+  > c8y-field-checkbox {
+    display: flex;
+    align-items: center;
+    margin: 0 0 $size-8 0;
+    & label.c8y-switch {
+      display: flex !important;
+      overflow: visible;
+      align-items: center;
+    }
+  }
+}
+
+// EXTENDABLE INPUT LIST
+[c8yinputgrouplistcontainer] > li:not(:last-child) .input-group-btn > .btn.text-primary {
+  display: none;
+}