{"id":18794292,"url":"https://github.com/angular-university/au-input","last_synced_at":"2025-04-13T14:32:36.075Z","repository":{"id":84314586,"uuid":"90750949","full_name":"angular-university/au-input","owner":"angular-university","description":"Angular Icon Input Box Components - Font Awesome and Material Design Input Boxes","archived":false,"fork":false,"pushed_at":"2017-05-18T15:00:46.000Z","size":203,"stargazers_count":38,"open_issues_count":0,"forks_count":23,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-27T06:11:53.861Z","etag":null,"topics":["angular","typescript"],"latest_commit_sha":null,"homepage":"https://angular-university.io","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/angular-university.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-05-09T13:49:10.000Z","updated_at":"2024-11-26T02:23:04.000Z","dependencies_parsed_at":"2023-03-13T20:04:34.501Z","dependency_job_id":null,"html_url":"https://github.com/angular-university/au-input","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/angular-university%2Fau-input","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/angular-university%2Fau-input/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/angular-university%2Fau-input/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/angular-university%2Fau-input/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/angular-university","download_url":"https://codeload.github.com/angular-university/au-input/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248728208,"owners_count":21152178,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","typescript"],"created_at":"2024-11-07T21:28:54.867Z","updated_at":"2025-04-13T14:32:36.060Z","avatar_url":"https://github.com/angular-university.png","language":"JavaScript","readme":"\n# Angular Icon Inputs \n\nThis module contains a couple of Angular Input box components that allow to add an icon inside a text input, which helps better identify common input fields like for example email, etc.\n\nThis small module contains only the HTML and CSS necessary to implement this very common HTML pattern. \n\nThe default theme of the input is designed to look just like a plain HTML input, including the focus blue border (tab and shift-tab are supported).\n\nAny icon available on either the [Font Awesome](http://fontawesome.io) or the [Google Material Design](https://material.io/icons/) Icon libraries can be used.\n\n### Features:\n\n- The components have minimum styling and are themable \n- there is no need to include a component-specific external stylesheet, only the Font Awesome or Material icons stylesheets\n- As the input component takes a plain input and projects it, this means that by design the component supports all standard HTML input attributes, including custom attributes (data-), all the accessiblity properties, etc.\n- This also means that these components are Compatible with Angular Forms \n- This repo is based on the [angular-quickstart-lib](https://github.com/filipesilva/angular-quickstart-lib), \nwhich is a seed repo (under development) for a library in the [Angular Package Format v4.0](https://docs.google.com/document/d/1CZC2rcpxffTDfRDs6p1cfbmKNLA6x5O-NtkJglDaBVs/edit#heading=h.k0mh3o8u5hx).\n- This means for example that this module is compatible with AOT, and includes UMD bundles for use with SystemJs\n\n\n# Demo \nHere is what the inputs with the icons look like on screen:\n\n![Demo of au-input components](https://raw.githubusercontent.com/angular-university/au-input/master/images/icons.png)\n\n\n# Installation\n\nThis is how to install the components:\n\n```bash\nnpm install au-input\n```\n\nor \n\n```bash\nyarn add au-input\n```\n\n\nAnd on your application module:\n\n```ts\nimport {AuInputModule} from 'au-input';\n\n@NgModule({\n  declarations: [ ...],\n  imports: [\n    BrowserModule,\n    ....,\n     AuInputModule\n],\n})\nexport class AppModule { }\n```\n\nSee below for SystemJs / UMD installation.\n\n# Using the Font Awesome Inputs\n\nWe will need to add first a version of Font Awesome to our page, for example:\n\n```html\n\u003clink href=\"https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css\" rel=\"stylesheet\"\u003e\n```\n\nThen we can use the Font Awesome Input like this:\n\n```html\n\u003cau-fa-input icon=\"envelope\"\u003e\n    \u003cinput auInput type=\"email\" name=\"email\" placeholder=\"Email\" autocomplete=\"off\" \n        class=\"some-class\" data-stripe=\"email\"\u003e\n\u003c/au-fa-input\u003e\n\n\u003cau-fa-input id=\"password-field\" icon=\"lock\" \u003e\n    \u003cinput auInput placeholder=\"Password\" class=\"test-class\"\u003e\n\u003c/au-fa-input\u003e\n\n\u003cau-fa-input  icon=\"cc-stripe\"\u003e\n    \u003cinput auInput placeholder=\"Stripe\"\u003e\n\u003c/au-fa-input\u003e\n\n\u003cau-fa-input icon=\"paypal\"\u003e\n    \u003cinput auInput placeholder=\"Paypal\"\u003e\n\u003c/au-fa-input\u003e\n```\n\nThe inputs receive an input property named `icon` that identifies which Font Awesome icon we want to apply. \n\nThe value `envelope` will add the email icon by adding the CSS class `fa-envelope` to the icon, etc.\n\nThe input that you pass inside the component is just a plain HTML input that will be projected inside the component, so all the standard HTML properties of an input apply. \n\nTo make sure that the focus functionality is working correctly, make sure to apply the attribute directive `auInput` like in the examples. \n\n\n# Using the Material Design Input\n\nWe will need to add first a version of the Google Material Design icons to our page, for example:\n\n```html\n\u003clink href=\"https://fonts.googleapis.com/icon?family=Material+Icons\" rel=\"stylesheet\"\u003e\n```\n\nThen we can use the Material Design Input like this:\n\n```html\n\u003cau-md-input icon=\"search\"\u003e\n    \u003cinput auInput type=\"email\" name=\"email\" placeholder=\"E-mail\"\u003e\n\u003c/au-md-input\u003e\n\n\u003cau-md-input icon=\"perm_identity\"\u003e\n    \u003cinput auInput name=\"identity\" placeholder=\"Identity Number\"\u003e\n\u003c/au-md-input\u003e\n\n\u003cau-md-input icon=\"receipt\"\u003e\n    \u003cinput auInput name=\"receipt\" placeholder=\"Receipt\"\u003e\n\u003c/au-md-input\u003e\n```\n        \n# Running the Demo Application\nThis command will build and start the demo application:\n\n```bash\nnpm start\n```\n\n\n# Running This Module In Development\n\nFirst let's build the library using this command:\n\n```bash\nnpm run build\n```\n\n     \nThen let's link it:\n\n```bash\ncd dist\nnpm link\n```\n\n\nOn another folder on the same machine where we have for example a running Angular CLI, we then do:\n\n```bash\nnpm link au-input\n```\n\n\n# Running the Tests \n\nThe tests can be executed with the following commands:\n\n```bash\nnpm test\nnpm integration\n```\n\n## Using SystemJs via the UMD bundle ?\n\nMake sure to add this to your `map` configuration, if you need the module served from a CDN:\n\n```javascript\nmap: {\n\n   ...\n   'au-input': 'https://unpkg.com/au-input@\u003cversion number\u003e/au-input.umd.min.js'\n}\n```\n\nOtherwise if serving from `node_modules`directly:\n\n```javascript\nmap: {\n   ...\n   'au-input': 'node_modules/au-input/bundles/au-input.umd.min.js'\n}\n```\n\nAnd in our packages property:\n\n```javascript\npackages: {\n   ...\n  'au-input': {\n    main: 'index.js',\n    defaultExtension: 'js'\n  }\n\n}\n```\n\n\n# License \n\n[MIT](https://opensource.org/licenses/MIT)\n\n\n\n\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fangular-university%2Fau-input","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fangular-university%2Fau-input","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fangular-university%2Fau-input/lists"}