fix counter for textarea & error-icon position & onboarding specialization groups

Author: Awakich

projects/social_platform/src/app/office/onboarding/stage-one/stage-one.component.scss

@@ -2,11 +2,18 @@
 @use "styles/typography";
 
 .auth {
-  &__greeting {
+ &__greeting {
     position: relative;
     display: flex;
+    flex-direction: column;
     gap: 10px;
-    align-items: center;
+    max-width: 100%;
+
+    @include responsive.apply-desktop {
+      max-width: 60%;
+      flex-direction: row;
+      align-items: center;
+    }
   }
 }
 

projects/social_platform/src/app/office/onboarding/stage-two/stage-two.component.scss

@@ -5,8 +5,15 @@
   &__greeting {
     position: relative;
     display: flex;
+    flex-direction: column;
     gap: 10px;
-    align-items: center;
+    max-width: 100%;
+
+    @include responsive.apply-desktop {
+      max-width: 60%;
+      flex-direction: row;
+      align-items: center;
+    }
   }
 }
 
@@ -15,6 +22,14 @@
   display: inline-flex;
   gap: 10px;
   align-items: center;
+
+  ::ng-deep {
+    app-tooltip {
+      .tooltip__content--right {
+        top: 110%;
+      }
+    }
+  }
 }
 
 .content {

projects/social_platform/src/app/office/shared/specializations-group/specializations-group.component.html

@@ -15,12 +15,8 @@
   @if (contentVisible()) {
   <div class="content" [class.content--open]="hasOpenGroups">
     @for (opt of options; track opt.id) {
-    <div
-      class="content__option"
-      [class.content__option--disabled]="disabled"
-      (click)="onSelectOption(opt)"
-    >
-      <label class="text-body-12">{{ opt.name }}</label>
+    <div class="content__option" [class.content__option--disabled]="disabled">
+      <label class="text-body-12" (click)="onSelectOption(opt)">{{ opt.name }}</label>
     </div>
     }
   </div>

projects/social_platform/src/app/office/shared/specializations-group/specializations-group.component.scss

@@ -20,6 +20,7 @@
     }
 
     &--open {
+      z-index: 1000;
       i {
         transform: rotate(90deg);
       }
@@ -57,6 +58,7 @@
 
     &--open {
       width: 40%;
+      z-index: 1000;
     }
 
     &__option {

projects/social_platform/src/app/ui/components/input/input.component.scss

@@ -120,7 +120,7 @@
     justify-content: center;
     padding: 0 4px;
     color: var(--red) !important;
-    background: var(--white);
+    background: var(--light-white);
     transform: translateY(-50%);
   }
 

projects/social_platform/src/app/ui/components/input/input.component.ts

@@ -52,8 +52,8 @@ export class InputComponent implements ControlValueAccessor {
   @Input() maxLength?: number;
 
   @Input()
-  set appValue(value: string) {
-    this.value = value;
+  set appValue(value: string | null) {
+    this.value = value ?? "";
   }
 
   get appValue(): string {
@@ -105,13 +105,9 @@ export class InputComponent implements ControlValueAccessor {
   }
 
   onInput(event: Event): void {
-    const nextValue = (event.target as HTMLInputElement).value;
+    const nextValue = (event.target as HTMLInputElement).value ?? "";
 
-    if (this.maxLength && nextValue.length > this.maxLength) {
-      this.isLengthOverflow = true;
-    } else {
-      this.isLengthOverflow = false;
-    }
+    this.isLengthOverflow = !!this.maxLength && nextValue.length > this.maxLength;
 
     this.value = nextValue;
     this.onChange(nextValue);
@@ -147,10 +143,8 @@ export class InputComponent implements ControlValueAccessor {
     return false;
   }
 
-  writeValue(value: string): void {
-    setTimeout(() => {
-      this.value = value;
-    });
+  writeValue(value: string | null): void {
+    this.value = value ?? "";
   }
 
   onChange: (value: string) => void = () => {};

projects/social_platform/src/app/ui/components/textarea/textarea.component.scss

@@ -51,13 +51,14 @@
 
   &__error-icon {
     position: absolute;
-    top: 15%;
+    top: 25px;
     right: 15px;
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--red) !important;
     transform: translateY(-50%);
+    background-color: var(--light-white);
 
     i {
       color: var(--red) !important;
@@ -66,7 +67,7 @@
 
   &__tooltip-wrapper {
     position: absolute;
-    top: 15%;
+    top: 25px;
     right: 15px;
     z-index: 10;
     transform: translateY(-50%);

projects/social_platform/src/app/ui/components/textarea/textarea.component.ts

@@ -70,7 +70,7 @@ export class TextareaComponent implements OnInit, ControlValueAccessor {
 
   /** Двустороннее связывание текста */
   @Input() set text(value: string) {
-    this.value = value;
+    this.value = value ?? "";
   }
 
   get text(): string {
@@ -86,7 +86,7 @@ export class TextareaComponent implements OnInit, ControlValueAccessor {
 
   /** Обработчик ввода текста */
   onInput(event: Event): void {
-    const nextValue = (event.target as HTMLInputElement).value;
+    const nextValue = (event.target as HTMLInputElement).value ?? "";
 
     if (this.maxLength && nextValue.length > this.maxLength) {
       this.isLengthOverflow = true;
@@ -123,7 +123,7 @@ export class TextareaComponent implements OnInit, ControlValueAccessor {
 
   // Методы ControlValueAccessor
   writeValue(value: string): void {
-    this.value = value;
+    this.value = value ?? "";
   }
 
   onChange: (value: string) => void = () => {};