feat: add hint for input clear button #1515

apps/doc/src/app/components/input/input-carousel/input-carousel-example.component.html

@@ -42,6 +42,7 @@
  [position]="inputPosition"
  [status]="status"
  [forceClear]="forceClear"
+ [hideClearButtonHint]="hideClearButtonHint"
  >
  <prizm-input-carousel
  #carousel
@@ -71,6 +72,16 @@
  Show clear button
  </ng-template>
 
+ <ng-template
+ [(documentationPropertyValue)]="hideClearButtonHint"
+ [documentationPropertyValues]="hideHintVariants"
+ documentationPropertyName="hideClearButtonHint"
+ documentationPropertyType="boolean | null"
+ documentationPropertyMode="input"
+ >
+ Hide clear button hint
+ </ng-template>
+
  <ng-template
  documentationPropertyName="clearButton"
  documentationPropertyType="PolymorphContent<PrizmInputLayoutClearButtonContext>"

apps/doc/src/app/components/input/input-carousel/input-carousel-example.component.ts

@@ -26,6 +26,9 @@ export class PrizmInputCarouselExampleComponent {
  public status: PrizmInputStatus = 'default';
  public statuses: PrizmInputStatus[] = ['default', 'success', 'warning', 'danger'];
 
+ public hideClearButtonHint: boolean | null = null;
+ public hideHintVariants: ReadonlyArray<boolean | null> = [null, false, true];
+
  readonly layoutKey = 'PrizmInputLayoutComponent';
  readonly controlKey = 'PrizmInputCarouselComponent';
 

apps/doc/src/app/components/input/input-layout-date-range/input-layout-date-range.component.html

@@ -30,6 +30,7 @@
  [position]="inputPosition"
  [status]="status"
  [forceClear]="forceClear"
+ [hideClearButtonHint]="hideClearButtonHint"
  >
  <prizm-input-layout-date-range
  #dateElement
@@ -131,6 +132,16 @@
  Show clear button
  </ng-template>
 
+ <ng-template
+ [(documentationPropertyValue)]="hideClearButtonHint"
+ [documentationPropertyValues]="hideHintVariants"
+ documentationPropertyName="hideClearButtonHint"
+ documentationPropertyType="boolean | null"
+ documentationPropertyMode="input"
+ >
+ Hide clear button hint
+ </ng-template>
+
  <ng-template
  documentationPropertyName="clearButton"
  documentationPropertyType="PolymorphContent<PrizmInputLayoutClearButtonContext>"

apps/doc/src/app/components/input/input-layout-date-range/input-layout-date-range.component.ts

@@ -1,12 +1,6 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { RawLoaderContent, TuiDocExample } from '@prizm-ui/doc';
-import {
- PrizmDayRange,
- PrizmInputPosition,
- PrizmInputSize,
- PrizmInputStatus,
- PrizmTime,
-} from '@prizm-ui/components';
+import { PrizmDayRange, PrizmInputPosition, PrizmInputSize, PrizmInputStatus } from '@prizm-ui/components';
 import { UntypedFormControl } from '@angular/forms';
 
 @Component({
@@ -48,6 +42,9 @@ export class InputLayoutDateRangeComponent {
  forceClear: boolean | null = null;
  forceClearVariants: ReadonlyArray<boolean | null> = [null, false, true];
 
+ public hideClearButtonHint: boolean | null = null;
+ public hideHintVariants: ReadonlyArray<boolean | null> = [null, false, true];
+
  readonly setupModule: RawLoaderContent = import('./examples/setup-module.md?raw');
 
  readonly exampleBase: TuiDocExample = {

apps/doc/src/app/components/input/input-layout-date-relative/input-layout-date-relative.component.html

@@ -18,6 +18,7 @@
  [position]="inputPosition"
  [status]="status"
  [forceClear]="forceClear"
+ [hideClearButtonHint]="hideClearButtonHint"
  >
  <prizm-input-layout-date-relative
  #element
@@ -73,6 +74,16 @@
  Show clear button
  </ng-template>
 
+ <ng-template
+ [(documentationPropertyValue)]="hideClearButtonHint"
+ [documentationPropertyValues]="hideHintVariants"
+ documentationPropertyName="hideClearButtonHint"
+ documentationPropertyType="boolean | null"
+ documentationPropertyMode="input"
+ >
+ Hide clear button hint
+ </ng-template>
+
  <ng-template
  documentationPropertyName="clearButton"
  documentationPropertyType="PolymorphContent<PrizmInputLayoutClearButtonContext>"

apps/doc/src/app/components/input/input-layout-date-relative/input-layout-date-relative.component.ts

@@ -34,6 +34,9 @@ export class InputLayoutDateRelativeRelativeComponent {
  forceClear: boolean | null = null;
  forceClearVariants: ReadonlyArray<boolean | null> = [null, false, true];
 
+ public hideClearButtonHint: boolean | null = null;
+ public hideHintVariants: ReadonlyArray<boolean | null> = [null, false, true];
+
  readonly setupModule: RawLoaderContent = import('./examples/setup-module.md?raw');
 
  readonly exampleBase: TuiDocExample = {

apps/doc/src/app/components/input/input-layout-date-time-range/input-layout-date-time-range.component.html

@@ -25,6 +25,7 @@
  [position]="inputPosition"
  [status]="status"
  [forceClear]="forceClear"
+ [hideClearButtonHint]="hideClearButtonHint"
  >
  <prizm-input-layout-date-time-range
  #element
@@ -165,6 +166,16 @@
  Show clear button
  </ng-template>
 
+ <ng-template
+ [(documentationPropertyValue)]="hideClearButtonHint"
+ [documentationPropertyValues]="hideHintVariants"
+ documentationPropertyName="hideClearButtonHint"
+ documentationPropertyType="boolean | null"
+ documentationPropertyMode="input"
+ >
+ Hide clear button hint
+ </ng-template>
+
  <ng-template
  documentationPropertyName="clearButton"
  documentationPropertyType="PolymorphContent<PrizmInputLayoutClearButtonContext>"

apps/doc/src/app/components/input/input-layout-date-time-range/input-layout-date-time-range.component.ts

@@ -46,6 +46,9 @@ export class InputLayoutDateTimeRangeComponent {
  forceClear: boolean | null = null;
  forceClearVariants: ReadonlyArray<boolean | null> = [null, false, true];
 
+ public hideClearButtonHint: boolean | null = null;
+ public hideHintVariants: ReadonlyArray<boolean | null> = [null, false, true];
+
  public timeStrict = false;
  public timeModeVariants: ReadonlyArray<PrizmTimeMode> = ['HH:MM', 'HH:MM:SS', 'HH:MM:SS.MSS'];
  public timeMode: PrizmTimeMode = `HH:MM`;

apps/doc/src/app/components/input/input-layout-date-time/input-layout-date-time.component.html

@@ -41,6 +41,7 @@
  [position]="inputPosition"
  [status]="status"
  [forceClear]="forceClear"
+ [hideClearButtonHint]="hideClearButtonHint"
  >
  <prizm-input-layout-date-time
  #element
@@ -148,6 +149,16 @@
  Show clear button
  </ng-template>
 
+ <ng-template
+ [(documentationPropertyValue)]="hideClearButtonHint"
+ [documentationPropertyValues]="hideHintVariants"
+ documentationPropertyName="hideClearButtonHint"
+ documentationPropertyType="boolean | null"
+ documentationPropertyMode="input"
+ >
+ Hide clear button hint
+ </ng-template>
+
  <ng-template
  documentationPropertyName="clearButton"
  documentationPropertyType="PolymorphContent<PrizmInputLayoutClearButtonContext>"

apps/doc/src/app/components/input/input-layout-date-time/input-layout-date-time.component.ts

@@ -51,6 +51,9 @@ export class InputLayoutDateTimeTimeComponent {
  forceClear: boolean | null = null;
  forceClearVariants: ReadonlyArray<boolean | null> = [null, false, true];
 
+ public hideClearButtonHint: boolean | null = null;
+ public hideHintVariants: ReadonlyArray<boolean | null> = [null, false, true];
+
  public timeModeVariants: ReadonlyArray<PrizmTimeMode> = ['HH:MM', 'HH:MM:SS', 'HH:MM:SS.MSS'];
  public timeMode: PrizmTimeMode = `HH:MM`;
  public testIdPostfix!: string;

apps/doc/src/app/components/input/input-layout-date/input-layout-date.component.html

@@ -27,6 +27,7 @@
  [position]="inputPosition"
  [status]="status"
  [forceClear]="forceClear"
+ [hideClearButtonHint]="hideClearButtonHint"
  >
  <prizm-input-layout-date
  #dateElement
@@ -121,6 +122,16 @@
  Show clear button
  </ng-template>
 
+ <ng-template
+ [(documentationPropertyValue)]="hideClearButtonHint"
+ [documentationPropertyValues]="hideHintVariants"
+ documentationPropertyName="hideClearButtonHint"
+ documentationPropertyType="boolean | null"
+ documentationPropertyMode="input"
+ >
+ Hide clear button hint
+ </ng-template>
+
  <ng-template
  documentationPropertyName="clearButton"
  documentationPropertyType="PolymorphContent<PrizmInputLayoutClearButtonContext>"

apps/doc/src/app/components/input/input-layout-date/input-layout-date.component.ts

@@ -44,6 +44,9 @@ export class InputLayoutDateComponent {
  forceClear: boolean | null = null;
  forceClearVariants: ReadonlyArray<boolean | null> = [null, false, true];
 
+ public hideClearButtonHint: boolean | null = null;
+ public hideHintVariants: ReadonlyArray<boolean | null> = [null, false, true];
+
  readonly setupModule: RawLoaderContent = import('./examples/setup-module.md?raw');
 
  readonly exampleBase: TuiDocExample = {

apps/doc/src/app/components/input/input-layout-month-range/input-layout-month-range.component.html

@@ -18,6 +18,7 @@
  [position]="inputPosition"
  [status]="status"
  [forceClear]="forceClear"
+ [hideClearButtonHint]="hideClearButtonHint"
  >
  <prizm-input-layout-month-range
  #inputControlElement
@@ -86,6 +87,16 @@
  Show clear button
  </ng-template>
 
+ <ng-template
+ [(documentationPropertyValue)]="hideClearButtonHint"
+ [documentationPropertyValues]="hideHintVariants"
+ documentationPropertyName="hideClearButtonHint"
+ documentationPropertyType="boolean | null"
+ documentationPropertyMode="input"
+ >
+ Hide clear button hint
+ </ng-template>
+
  <ng-template
  documentationPropertyName="clearButton"
  documentationPropertyType="PolymorphContent<PrizmInputLayoutClearButtonContext>"

apps/doc/src/app/components/input/input-layout-month-range/input-layout-month-range.component.ts

@@ -1,12 +1,6 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { RawLoaderContent, TuiDocExample } from '@prizm-ui/doc';
-import {
- PrizmDay,
- PrizmInputPosition,
- PrizmInputSize,
- PrizmInputStatus,
- PrizmTime,
-} from '@prizm-ui/components';
+import { PrizmDay, PrizmInputPosition, PrizmInputSize, PrizmInputStatus } from '@prizm-ui/components';
 import { UntypedFormControl } from '@angular/forms';
 
 @Component({
@@ -19,6 +13,9 @@ export class InputLayoutMonthRangeRangeComponent {
  forceClear: boolean | null = null;
  forceClearVariants: ReadonlyArray<boolean | null> = [null, false, true];
 
+ public hideClearButtonHint: boolean | null = null;
+ public hideHintVariants: ReadonlyArray<boolean | null> = [null, false, true];
+
  public readOnly = false;
  val!: PrizmDay;
  readonly layoutKey = 'PrizmInputLayoutComponent';

apps/doc/src/app/components/input/input-layout-month/input-layout-month.component.html

@@ -18,6 +18,7 @@
  [position]="inputPosition"
  [status]="status"
  [forceClear]="forceClear"
+ [hideClearButtonHint]="hideClearButtonHint"
  >
  <prizm-input-layout-month
  #element
@@ -88,6 +89,16 @@
  Show clear button
  </ng-template>
 
+ <ng-template
+ [(documentationPropertyValue)]="hideClearButtonHint"
+ [documentationPropertyValues]="hideHintVariants"
+ documentationPropertyName="hideClearButtonHint"
+ documentationPropertyType="boolean | null"
+ documentationPropertyMode="input"
+ >
+ Hide clear button hint
+ </ng-template>
+
  <ng-template
  documentationPropertyName="clearButton"
  documentationPropertyType="PolymorphContent<PrizmInputLayoutClearButtonContext>"

apps/doc/src/app/components/input/input-layout-month/input-layout-month.component.ts

@@ -23,6 +23,9 @@ export class InputLayoutMonthComponent {
  forceClear: boolean | null = null;
  forceClearVariants: ReadonlyArray<boolean | null> = [null, false, true];
 
+ public hideClearButtonHint: boolean | null = null;
+ public hideHintVariants: ReadonlyArray<boolean | null> = [null, false, true];
+
  val!: PrizmDay;
  public pseudoInvalid = false;
  public pseudoHovered = false;

apps/doc/src/app/components/input/input-layout-time/input-layout-time.component.html

@@ -30,6 +30,7 @@
  [position]="inputPosition"
  [status]="status"
  [forceClear]="forceClear"
+ [hideClearButtonHint]="hideClearButtonHint"
  >
  <prizm-input-layout-time
  #element
@@ -121,6 +122,16 @@
  Show clear button
  </ng-template>
 
+ <ng-template
+ [(documentationPropertyValue)]="hideClearButtonHint"
+ [documentationPropertyValues]="hideHintVariants"
+ documentationPropertyName="hideClearButtonHint"
+ documentationPropertyType="boolean | null"
+ documentationPropertyMode="input"
+ >
+ Hide clear button hint
+ </ng-template>
+
  <ng-template
  documentationPropertyName="clearButton"
  documentationPropertyType="PolymorphContent<PrizmInputLayoutClearButtonContext>"

apps/doc/src/app/components/input/input-layout-time/input-layout-time.component.ts

@@ -1,14 +1,9 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { RawLoaderContent, TuiDocExample } from '@prizm-ui/doc';
 import {
- PolymorphContent,
- PrizmContextWithImplicit,
- PrizmDay,
  PrizmInputPosition,
  PrizmInputSize,
  PrizmInputStatus,
- PrizmSizeL,
- PrizmSizeM,
  PrizmTime,
  PrizmTimeMode,
 } from '@prizm-ui/components';
@@ -37,6 +32,9 @@ export class InputLayoutTimeTimeComponent {
  forceClear: boolean | null = null;
  forceClearVariants: ReadonlyArray<boolean | null> = [null, false, true];
 
+ public hideClearButtonHint: boolean | null = null;
+ public hideHintVariants: ReadonlyArray<boolean | null> = [null, false, true];
+
  public pseudoInvalid = false;
  public pseudoHovered = false;
  public pseudoPressed = false;

apps/doc/src/app/components/input/input-multi-select/input-multi-select.component.html

@@ -44,6 +44,7 @@
  [position]="inputPosition"
  [status]="status"
  [forceClear]="forceClear"
+ [hideClearButtonHint]="hideClearButtonHint"
  >
  <prizm-input-multi-select
  #element
@@ -246,6 +247,16 @@
  Show clear button
  </ng-template>
 
+ <ng-template
+ [(documentationPropertyValue)]="hideClearButtonHint"
+ [documentationPropertyValues]="hideHintVariants"
+ documentationPropertyName="hideClearButtonHint"
+ documentationPropertyType="boolean | null"
+ documentationPropertyMode="input"
+ >
+ Hide clear button hint
+ </ng-template>
+
  <ng-template
  documentationPropertyName="clearButton"
  documentationPropertyType="PolymorphContent<PrizmInputLayoutClearButtonContext>"

apps/doc/src/app/components/input/input-multi-select/input-multi-select.component.ts

@@ -72,6 +72,10 @@ export class InputInputMultiSelectComponent {
  isChipsDeletable = true;
  forceClearVariants: ReadonlyArray<boolean | null> = [null, false, true];
  forceClear = this.forceClearVariants[0];
+
+ public hideClearButtonHint: boolean | null = null;
+ public hideHintVariants: ReadonlyArray<boolean | null> = [null, false, true];
+
  get sizeVariants(): ReadonlyArray<PrizmInputSize> {
  return this.outer ? ['s', 'm', 'l'] : ['m', 'l'];
  }