Input

cf-input

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

• prefix;

• suffix;

• icon;

• menu;

• notification.

Usage

app.html

<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

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

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