# Input

#### cf-input

Input component is based on Angular Material input and has such extended options:

* prefix;
* suffix;
* icon;
* menu;
* notification.

### Usage

app.html

```markup
<md-grid-list cols="3" rows="2" rowHeight="150px">
    <md-grid-tile>
        <cf-input></cf-input>
    </md-grid-tile>
    <md-grid-tile>
        <cf-input [properties]="input2" [styling]="inputStyling2" [notification]="myNotifications"></cf-input>
    </md-grid-tile>
    <md-grid-tile>
        <cf-button md-raised-button [properties]="sender" (click)="sendMessage()"></cf-button>
    </md-grid-tile>
    <md-grid-tile>
        <span (click)="warning()">
            <cf-input [properties]="input4" [styling]="inputStyling4"></cf-input>
        </span>
    </md-grid-tile>
    <md-grid-tile>
        <cf-input [properties]="input3"></cf-input>
    </md-grid-tile>
    <md-grid-tile>
        <cf-input [properties]="input5"></cf-input>
    </md-grid-tile>
</md-grid-list>
```

app.ts

```typescript
input2= new InputModel ({
    type : "text",        
    placeholder: " amount( USD )",
    prefix : "$",
    iconProperty: new IconModel ({        
        name: "fa-usd",
        size: "20px"
    }),
    iconPosition:"left"
});

inputStyling2 = new InputStylingModel({
    input:{
        class:"redInput"
    },
    iconStyling: new IconStylingModel ({
        icon: {
            class: "redInput"
        }
    })
});

input3= new InputModel ( {
    type : "text",        
    placeholder: "Accent",
    dividerColor : "accent",
    menu: new MenuModel({
        menuItems:[
        {
            buttonProperty: new ButtonModel({
                label: 'Menu item 1',
                icon: new IconModel ({
                    name: 'fa-apple',
                    size: '24px'
                })
            }),
            divider: true,
            notification: '7',
            display: true,
            disable: false,
            onClick: this.clickFunc.bind(this)
        },
        {
            buttonProperty: new ButtonModel({
                label: 'Menu item 2',
                icon: new IconModel ({
                    name: 'thumb_up',
                    size: '24px'
                })
            }),
            notification: '',
            onClick: this.clickFunc.bind(this)
        }
    ]})
});

input4= new InputModel ({
    type : "text",        
    placeholder: "Warning",
    dividerColor : "warn",
    iconProperty: new IconModel ({        
        name: "fa-exclamation-triangle",
        size: "20px"
    }),
    iconPosition:"right"
});
inputStyling4 = new InputStylingModel({
    iconStyling: new IconStylingModel ({
        icon: {
            class: "orangeIcon"
        }
    })
});

input5= new InputModel ({
    type : "password",        
    placeholder: "password",
    maxlength : "10",
    hint : {
        text : "from 1 to 10 chars",
        align : "start"
    }
});

clickFunc(menuItem: MenuItemModel): void {
    this.input3.value = menuItem.buttonProperty.label;
}

letters = 0;
  myNotifications: NotificationModel = {
    value: this.letters
  };
  sender = new ButtonModel({
    label: "Send mail",
    icon: null,
    icon_position:"right"
  });
  sendMessage() { ++this.myNotifications.value; }

warning (): void {
    alert ("Warning!!!");
}
```

app.scss

```css
p {
    margin-right: 16px;
}

cf-input {
    margin: 10px;
}

/deep/ {
    .redInput {
    color: red;
    }
    .orangeIcon {
    color: orange;
    }
}
```

## Input properties

|     Attr     |       |    Type   | Details                                                    |
| :----------: | :---: | :-------: | ---------------------------------------------------------- |
|     type     |       |   string  | It is the type of the input. Default: text.                |
|  placeholder |       |   string  | It is the placeholder of the input                         |
|     hint     |       |   object  | Message to be shown under input field                      |
|              |  text |   string  | Text for hint                                              |
|              | align |   string  | Hint text alignment. Can be: start or end. Default: start. |
|    prefix    |       |   string  | It is the prefix of the input                              |
|    suffix    |       |   string  | It is the suffix of the input                              |
| dividerColor |       |   string  | It is the deviderColor of the input                        |
|     value    |       |    any    | It is the value of the input                               |
|   maxlength  |       |   number  | It is input maxlength                                      |
| iconProperty |       | IconModel | It is the icon object on the input                         |
|     menu     |       | MenuModel | The menu object on the input                               |

## Input styling properties

|     Attr    |       Type       | Dateils                         |
| :---------: | :--------------: | ------------------------------- |
|  container  |   StylingModel   | Styling for the input container |
|    input    |   StylingModel   | Styling for the input itself    |
|     hint    |   StylingModel   | Styling for the hint            |
| iconStyling | IconStylingModel | Styling for the icon            |
| menuStyling | MenuStylingModel | Styling for the menu            |

## Input output properties

|     Attr    | Details                                                 |
| :---------: | ------------------------------------------------------- |
| valueChange | The event that will be called when the value is changed |


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://cedrus.gitbook.io/project-fusion/components/form-controls/input.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.