Skip to content

Commit

Permalink
Merge pull request #1230 from zyfra/fix/textarea-placeholder
Browse files Browse the repository at this point in the history 
feat(components/textarea): show placeholder #357
  • Loading branch information
@ZurabDev
ZurabDev authored Dec 29, 2023
2 parents 3761d6b + 5003391 commit a1c024b
Show file tree
Hide file tree
Showing 12 changed files with 275 additions and 180 deletions.
162 changes: 103 additions & 59 deletions apps/doc/src/app/components/input/input-number/input-number-example.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,11 +31,13 @@
<div>
<h4>Number</h4>
<prizm-input-layout
[label]="label"
[size]="size"
[label]="label"
[outer]="outer"
[status]="status"
[border]="border"
[position]="inputPosition"
[status]="status"
[forceClear]="forceClear"
>
<input
#prizmInputNumber
Expand Down Expand Up @@ -70,11 +72,16 @@ <h4>Number</h4>
<div>
<h4>Counter</h4>
<prizm-input-layout
[label]="label"
#inputElement
[prizmDocHostElement]="inputElement"
[prizmDocHostElementKey]="layoutKey"
[size]="size"
[status]="status"
[label]="label"
[outer]="outer"
[position]="'center'"
[border]="border"
[position]="inputPosition"
[status]="status"
[forceClear]="forceClear"
>
<button
[inputNumber]="inputCounter"
Expand All @@ -93,10 +100,10 @@ <h4>Counter</h4>
[step]="step"
[precision]="precision"
[value]="value"
[placeholder]="placeholder"
[disabled]="disabled"
[prizmHintDirection]="prizmHintDirection"
[prizmHintCanShow]="prizmHintCanShow"
[placeholder]="placeholder"
[required]="required"
prizmInputNumber
/>
Expand Down Expand Up @@ -142,33 +149,14 @@ <h4>Counter</h4>
heading="PrizmInputNumberDirective"
hostComponentKey="PrizmInputNumberDirective"
>
<!-- <ng-template-->
<!-- [(documentationPropertyValue)]="required"-->
<!-- documentationPropertyName="required"-->
<!-- documentationPropertyType="boolean"-->
<!-- documentationPropertyMode="input"-->
<!-- >-->
<!-- Required-->
<!-- </ng-template>-->

<!-- <ng-template-->
<!-- [(documentationPropertyValue)]="disabled"-->
<!-- [documentationPropertyDeprecated]="true"-->
<!-- documentationPropertyName="disabled"-->
<!-- documentationPropertyType="boolean"-->
<!-- documentationPropertyMode="input"-->
<!-- >-->
<!-- Disabled Use form control disabled-->
<!-- </ng-template>-->

<!-- <ng-template-->
<!-- [(documentationPropertyValue)]="value"-->
<!-- documentationPropertyName="value"-->
<!-- documentationPropertyType="number"-->
<!-- documentationPropertyMode="input"-->
<!-- >-->
<!-- Value-->
<!-- </ng-template>-->
<ng-template
[(documentationPropertyValue)]="placeholder"
documentationPropertyName="placeholder"
documentationPropertyType="string"
documentationPropertyMode="input"
>
Placeholder
</ng-template>

<ng-template
[(documentationPropertyValue)]="min"
Expand All @@ -179,16 +167,6 @@ <h4>Counter</h4>
Minimum value
</ng-template>

<!-- <ng-template-->
<!-- [(documentationPropertyValue)]="decimal"-->
<!-- [documentationPropertyValues]="decimalVariants"-->
<!-- documentationPropertyName="decimal"-->
<!-- documentationPropertyType="PrizmDecimal"-->
<!-- documentationPropertyMode="input"-->
<!-- >-->
<!-- Show/hide decimal-->
<!-- </ng-template>-->

<ng-template
[(documentationPropertyValue)]="precision"
documentationPropertyName="precision"
Expand Down Expand Up @@ -216,29 +194,13 @@ <h4>Counter</h4>
Step
</ng-template>

<!-- <ng-template-->
<!-- documentationPropertyName="enter"-->
<!-- documentationPropertyType="any"-->
<!-- documentationPropertyMode="output"-->
<!-- >-->
<!-- Enter-->
<!-- </ng-template>-->

<ng-template
documentationPropertyName="onClear"
documentationPropertyType="MouseEvent"
documentationPropertyMode="output"
>
On Clear
</ng-template>

<!-- <ng-template-->
<!-- documentationPropertyName="valueChanged"-->
<!-- documentationPropertyType="number"-->
<!-- documentationPropertyMode="output"-->
<!-- >-->
<!-- Value Changed-->
<!-- </ng-template>-->
</prizm-doc-documentation>

<prizm-doc-documentation
Expand Down Expand Up @@ -276,6 +238,88 @@ <h4>Counter</h4>
prizmInputNumberAuxiliaryControl
</ng-template>
</prizm-doc-documentation>

<prizm-doc-documentation [heading]="layoutKey" [hostComponentKey]="layoutKey">
<ng-template
[(documentationPropertyValue)]="forceClear"
[documentationPropertyValues]="forceClearVariants"
documentationPropertyName="forceClear"
documentationPropertyType="boolean | null"
documentationPropertyMode="input"
>
Show clear button
</ng-template>

<ng-template
documentationPropertyName="clearButton"
documentationPropertyType="PolymorphContent<PrizmInputLayoutClearButtonContext>"
documentationPropertyMode="input"
>
Clear Button (icon or template)
</ng-template>

<ng-template
[(documentationPropertyValue)]="outer"
documentationPropertyName="outer"
documentationPropertyType="boolean"
documentationPropertyMode="input"
>
Outer
</ng-template>

<ng-template
[(documentationPropertyValue)]="size"
[documentationPropertyValues]="sizeVariants"
documentationPropertyName="size"
documentationPropertyType="PrizmInputSize"
documentationPropertyMode="input"
>
Size
</ng-template>

<ng-template
[(documentationPropertyValue)]="label"
documentationPropertyName="label"
documentationPropertyType="string"
documentationPropertyMode="input"
>
Label
</ng-template>
<ng-template
documentationPropertyName="clear"
documentationPropertyType="MouseEvent"
documentationPropertyMode="output"
>
Clear
</ng-template>

<ng-template
[(documentationPropertyValue)]="border"
documentationPropertyName="border"
documentationPropertyType="boolean"
documentationPropertyMode="input"
>
Border
</ng-template>
<ng-template
[(documentationPropertyValue)]="status"
[documentationPropertyValues]="statuses"
documentationPropertyName="status"
documentationPropertyType="PrizmInputStatus"
documentationPropertyMode="input"
>
Status
</ng-template>
<ng-template
[(documentationPropertyValue)]="inputPosition"
[documentationPropertyValues]="inputPositionVariants"
documentationPropertyName="position"
documentationPropertyType="PrizmInputPosition"
documentationPropertyMode="input"
>
Position
</ng-template>
</prizm-doc-documentation>
</ng-template>

<ng-template prizmDocPageTab>
Expand Down
22 changes: 18 additions & 4 deletions apps/doc/src/app/components/input/input-number/input-number-example.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,24 @@ import { PrizmDecimal } from '@prizm-ui/core';
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class InputNumberExampleComponent {
readonly layoutKey = 'PrizmInputLayoutComponent';
public readOnly = false;
public border = true;
public inputPosition: PrizmInputPosition = 'left';
public inputPositionVariants: PrizmInputPosition[] = ['left', 'center'];

outer = false;
get sizeVariants(): ReadonlyArray<PrizmInputSize> {
return this.outer ? ['s', 'm', 'l'] : ['m', 'l'];
}
size = this.sizeVariants[0];
forceClearVariants: ReadonlyArray<boolean | null> = [null, false, true];
forceClear = this.forceClearVariants[0];
emptyContent = 'Ничего не найдено';
nullContent = 'Не выбрано';
minDropdownHeight = 0;
maxDropdownHeight = 342;

value = 1;
public requiredInputControl = new UntypedFormControl('', Validators.required);
public min = 0;
Expand All @@ -33,11 +51,7 @@ export class InputNumberExampleComponent {
public label = 'Заголовок';
public placeholder = '';

public inputPosition: PrizmInputPosition = 'left';
public inputPositions: PrizmInputPosition[] = ['left', 'center'];
public outer!: false;

public size: PrizmInputSize = 'l';
public sizesOuter: PrizmInputSize[] = ['l', 'm', 's'];
public sizesInner: PrizmInputSize[] = ['l', 'm'];

Expand Down
107 changes: 0 additions & 107 deletions apps/doc/src/app/components/input/input-select/input-select.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -308,113 +308,6 @@
>
dropdown Width
</ng-template>
<!-- <ng-template-->
<!-- documentationPropertyName="readOnly"-->
<!-- documentationPropertyType="boolean"-->
<!-- documentationPropertyMode="input"-->
<!-- [(documentationPropertyValue)]="readOnly"-->
<!-- >-->
<!-- Read Only-->
<!-- </ng-template>-->

<!-- <ng-template-->
<!-- documentationPropertyName="val"-->
<!-- documentationPropertyType="any[]"-->
<!-- documentationPropertyMode="input-output"-->
<!-- [(documentationPropertyValue)]="val1"-->
<!-- >-->
<!-- Val-->
<!-- </ng-template>-->

<!-- <ng-template-->
<!-- documentationPropertyName="pseudoInvalid"-->
<!-- documentationPropertyType="boolean | null"-->
<!-- documentationPropertyMode="input"-->
<!-- [(documentationPropertyValue)]="pseudoInvalid"-->
<!-- >-->
<!-- Pseudo Invalid-->
<!-- </ng-template>-->

<!-- <ng-template-->
<!-- documentationPropertyName="pseudoHovered"-->
<!-- documentationPropertyType=" boolean | null"-->
<!-- documentationPropertyMode="input"-->
<!-- [(documentationPropertyValue)]="pseudoHovered"-->
<!-- >-->
<!-- Pseudo Hovered-->
<!-- </ng-template>-->

<!-- <ng-template-->
<!-- documentationPropertyName="pseudoPressed"-->
<!-- documentationPropertyType="boolean | null"-->
<!-- documentationPropertyMode="input"-->
<!-- [(documentationPropertyValue)]="pseudoPressed"-->
<!-- >-->
<!-- Pseudo Pressed-->
<!-- </ng-template>-->

<!-- <ng-template-->
<!-- documentationPropertyName="pseudoFocused"-->
<!-- documentationPropertyType="boolean | null"-->
<!-- documentationPropertyMode="input"-->
<!-- [(documentationPropertyValue)]="pseudoFocused"-->
<!-- >-->
<!-- Pseudo Focused-->
<!-- </ng-template>-->

<!-- <ng-template-->
<!-- documentationPropertyName="focusable"-->
<!-- documentationPropertyType="boolean"-->
<!-- documentationPropertyMode="input"-->
<!-- [(documentationPropertyValue)]="focusable"-->
<!-- >-->
<!-- Focusable-->
<!-- </ng-template>-->

<!-- <ng-template-->
<!-- documentationPropertyName="pseudoState"-->
<!-- documentationPropertyType="string"-->
<!-- documentationPropertyMode="input"-->
<!-- [(documentationPropertyValue)]="pseudoState"-->
<!-- >-->
<!-- Pseudo State-->
<!-- </ng-template>-->

<!-- <ng-template-->
<!-- documentationPropertyName="focusedChange"-->
<!-- documentationPropertyType="boolean"-->
<!-- documentationPropertyMode="output"-->
<!-- [(documentationPropertyValue)]="focusedChange"-->
<!-- >-->
<!-- Focused Change-->
<!-- </ng-template>-->

<!-- <ng-template-->
<!-- documentationPropertyName="pressedChange"-->
<!-- documentationPropertyType="boolean"-->
<!-- documentationPropertyMode="output"-->
<!-- [(documentationPropertyValue)]="pressedChange"-->
<!-- >-->
<!-- Pressed Change-->
<!-- </ng-template>-->

<!-- <ng-template-->
<!-- documentationPropertyName="hoveredChange"-->
<!-- documentationPropertyType="boolean"-->
<!-- documentationPropertyMode="output"-->
<!-- [(documentationPropertyValue)]="hoveredChange"-->
<!-- >-->
<!-- Hovered Change-->
<!-- </ng-template>-->

<!-- <ng-template-->
<!-- documentationPropertyName="focusVisibleChange"-->
<!-- documentationPropertyType="boolean"-->
<!-- documentationPropertyMode="output"-->
<!-- [(documentationPropertyValue)]="focusVisibleChange"-->
<!-- >-->
<!-- Focus Visible Change-->
<!-- </ng-template>-->
</prizm-doc-documentation>

<prizm-doc-documentation [heading]="layoutKey" [hostComponentKey]="layoutKey">
Expand Down
Loading

0 comments on commit a1c024b

Please sign in to comment.