fix(components/input-layout): clear button with status message #766

zyfra · Oct 9, 2023 · 42f86dc · 42f86dc
1 parent dc39be5
commit 42f86dc
Show file tree

Hide file tree

Showing 11 changed files with 25 additions and 14 deletions.
diff --git a/...ents/input/textarea/examples/textarea-basic-example/textarea-basic-example.component.html b/...ents/input/textarea/examples/textarea-basic-example/textarea-basic-example.component.html
@@ -1,3 +1,3 @@
-<prizm-input-layout label="Заголовок">
- <textarea [height]="70" prizmInput></textarea>
+<prizm-input-layout [forceClear]="true" label="Заголовок">
+ <textarea [height]="70" [formControl]="value" prizmInput></textarea>
 </prizm-input-layout>
diff --git a/...onents/input/textarea/examples/textarea-basic-example/textarea-basic-example.component.ts b/...onents/input/textarea/examples/textarea-basic-example/textarea-basic-example.component.ts
@@ -1,9 +1,12 @@
 import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { FormControl, Validators } from '@angular/forms';
 
 @Component({
  selector: 'prizm-textarea-basic-example',
  templateUrl: './textarea-basic-example.component.html',
  styleUrls: ['./textarea-basic-example.component.less'],
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class TextareaBasicExampleComponent {}
+export class TextareaBasicExampleComponent {
+ public value = new FormControl('222', [Validators.required, Validators.maxLength(10)]);
+}
diff --git a/...ponents/side-menu/examples/side-menu-example-basic/side-menu-example-basic.component.html b/...ponents/side-menu/examples/side-menu-example-basic/side-menu-example-basic.component.html
@@ -37,7 +37,7 @@
  <prizm-icon
  class="instruments__icon"
  [size]="16"
- iconClass="cansel-delete-content"
+ iconClass="cancel-delete-content"
  ></prizm-icon>
  <prizm-icon class="instruments__icon" [size]="16" iconClass="tools-content-save"></prizm-icon>
  </div>

diff --git a/libs/components/assets/icon-codepoints.json b/libs/components/assets/icon-codepoints.json
@@ -701,7 +701,7 @@
  "cancel-delete-line": {
  "content": ""
  },
- "cansel-delete-content": {
+ "cancel-delete-content": {
  "content": ""
  },
  "cansel-delete-file": {

diff --git a/libs/components/src/lib/components/icon/icon-16-definitions.ts b/libs/components/src/lib/components/icon/icon-16-definitions.ts
@@ -283,7 +283,7 @@ export const Icon16Defs = [
  'cancel-close-circle',
  'cancel-close',
  'cancel-delete-line',
- 'cansel-delete-content',
+ 'cancel-delete-content',
  'cansel-delete-file',
  ],
  },

diff --git a/libs/components/src/lib/components/icon/icon-definitions.ts b/libs/components/src/lib/components/icon/icon-definitions.ts
@@ -281,7 +281,7 @@ export const IconDefs = [
  'cancel-close-small',
  'cancel-close',
  'cancel-delete-line',
- 'cansel-delete-content',
+ 'cancel-delete-content',
  'cansel-delete-file',
  ],
  },

diff --git a/libs/components/src/lib/components/input/common/input-layout/input-layout.component.html b/libs/components/src/lib/components/input/common/input-layout/input-layout.component.html
@@ -36,11 +36,11 @@
  <span class="prizm-input-label-required" *ngIf="$.required">*</span>
  </label>
  <button
- class="prizm-input-label-clear-btn"
+ class="prizm-input-label-clear-btn clear-icon"
  [interactive]="true"
  [disabled]="$.disabled"
  (click)="onClearClick($event)"
- prizmInputIconButton="cansel-delete-content"
+ prizmInputIconButton="cancel-delete-content"
  ></button>
  </div>
  </ng-template>
@@ -85,12 +85,12 @@
  </div>
 
  <button
- class="prizm-input-button-default {{ showStatusButton ? '' : 'alone' }}"
+ class="prizm-input-button-default clear-icon {{ showStatusButton ? '' : 'alone' }}"
  *ngIf="showClearButton"
  [interactive]="true"
  [disabled]="$.disabled"
  (click)="onClearClick($event)"
- prizmInputIconButton="cansel-delete-content"
+ prizmInputIconButton="cancel-delete-content"
  ></button>
 
  <button

diff --git a/libs/components/src/lib/components/input/common/input-layout/input-layout.component.less b/libs/components/src/lib/components/input/common/input-layout/input-layout.component.less
@@ -280,3 +280,11 @@
  text-overflow: ellipsis;
  gap: 4px;
 }
+
+.clear-icon {
+ z-index: 2;
+}
+
+.prizm-input-form-status-button {
+ z-index: 1;
+}
diff --git a/libs/components/src/lib/components/input/input-text/input-text.component.ts b/libs/components/src/lib/components/input/input-text/input-text.component.ts
@@ -261,7 +261,7 @@ export class PrizmInputTextComponent<VALUE extends string | number | null = stri
  public clear(event: MouseEvent): void {
  if (this.disabled) return;
 
- this.updateValue('' as VALUE);
+ this.updateValue(null as VALUE);
 
  this.ngControl?.control?.markAsDirty();
 

diff --git a/libs/components/src/styles/icons-16/icons-16.less b/libs/components/src/styles/icons-16/icons-16.less
@@ -720,7 +720,7 @@
  &.cancel-delete-line:before {
  content: '';
  }
- &.cansel-delete-content:before {
+ &.cancel-delete-content:before {
  content: '';
  }
  &.cansel-delete-file:before {

diff --git a/libs/components/src/styles/icons/icons.less b/libs/components/src/styles/icons/icons.less
@@ -712,7 +712,7 @@
  &.cancel-delete-line:before {
  content: '';
  }
- &.cansel-delete-content:before {
+ &.cancel-delete-content:before {
  content: '';
  }
  &.cansel-delete-file:before {