Merged PR 1950: 5343-Filter-NumberRange

Related work items: #5343

libs/ui/input-controls/src/index.ts

@@ -1,16 +1,17 @@
-export * from './lib/checkbox/checkbox-label.directive';
-export * from './lib/checkbox/checkbox.component';
-export * from './lib/checkbox/checklist-value.directive';
-export * from './lib/checkbox/checklist.component';
-export * from './lib/core/input-control.directive';
-export * from './lib/dropdown/dropdown.component';
-export * from './lib/dropdown/dropdown.types';
-export * from './lib/listbox/listbox-item.directive';
-export * from './lib/listbox/listbox.directive';
-export * from './lib/text-field/textarea.component';
-export * from './lib/text-field/text-field.component';
-export * from './lib/text-field/text-field-clear.component';
-export * from './lib/text-field/text-field-container.component';
-export * from './lib/text-field/text-field-errors.component';
-export * from './lib/chips/chips.component';
-export * from './lib/chips/chip-option.component';
+export * from './lib/checkbox/checkbox-label.directive';
+export * from './lib/checkbox/checkbox.component';
+export * from './lib/checkbox/checklist-value.directive';
+export * from './lib/checkbox/checklist.component';
+export * from './lib/core/input-control.directive';
+export * from './lib/dropdown/dropdown.component';
+export * from './lib/dropdown/dropdown.types';
+export * from './lib/listbox/listbox-item.directive';
+export * from './lib/listbox/listbox.directive';
+export * from './lib/inline-input/inline-input.component';
+export * from './lib/text-field/textarea.component';
+export * from './lib/text-field/text-field.component';
+export * from './lib/text-field/text-field-clear.component';
+export * from './lib/text-field/text-field-container.component';
+export * from './lib/text-field/text-field-errors.component';
+export * from './lib/chips/chips.component';
+export * from './lib/chips/chip-option.component';

libs/ui/input-controls/src/input-controls.scss

@@ -2,6 +2,7 @@
 @use "./lib/checkbox/checklist";
 @use "./lib/chips/chips";
 @use "./lib/dropdown/dropdown";
+@use "./lib/inline-input/inline-input";
 @use "./lib/listbox/listbox";
 @use "./lib/text-field/text-field";
 @use "./lib/text-field/text-field-clear";

libs/ui/input-controls/src/lib/inline-input/_inline-input.scss

@@ -0,0 +1,47 @@
+.ui-inline-input {
+  display: inline-flex;
+  padding: 0.5rem 0;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 0.25rem;
+
+  label {
+    @apply text-isa-neutral-900;
+
+    font-family: "Open Sans";
+    font-size: 0.5rem;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 0.75rem; /* 150% */
+    text-transform: uppercase;
+  }
+
+  &.ui-inline-input--small input {
+    @apply isa-text-body-2-bold;
+  }
+
+  &.ui-inline-input--medium input {
+    @apply isa-text-body-1-bold;
+  }
+
+  input {
+    @apply outline-none font-bold text-isa-neutral-900;
+
+    &::placeholder {
+      @apply text-isa-neutral-500 font-normal;
+
+      &:hover {
+        @apply font-normal;
+      }
+
+      &:focus {
+        @apply text-isa-neutral-600 font-bold;
+      }
+    }
+
+    &.ng-invalid {
+      @apply text-isa-accent-red;
+    }
+  }
+}

libs/ui/input-controls/src/lib/inline-input/inline-input.component.html

@@ -0,0 +1 @@
+<ng-content></ng-content>

libs/ui/input-controls/src/lib/inline-input/inline-input.component.ts

@@ -0,0 +1,39 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+  contentChild,
+} from '@angular/core';
+
+import { InputControlDirective } from '../core/input-control.directive';
+
+export const InlineInputSize = {
+  Small: 'small',
+  Medium: 'medium',
+} as const;
+export type InlineInputSize =
+  (typeof InlineInputSize)[keyof typeof InlineInputSize];
+
+@Component({
+  selector: 'ui-inline-input',
+  templateUrl: './inline-input.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: { '[class]': "['ui-inline-input', sizeClass()]" },
+})
+export class InlineInputComponent {
+  size = input<InlineInputSize>(InlineInputSize.Medium);
+
+  sizeClass = computed(() => {
+    const size = this.size();
+    switch (size) {
+      case InlineInputSize.Small:
+        return 'ui-inline-input--small';
+      case InlineInputSize.Medium:
+      default:
+        return 'ui-inline-input--medium';
+    }
+  });
+
+  inputControl = contentChild.required(InputControlDirective);
+}