{"_id":"@311devs/ngx-inline-editor","_rev":"2-d909a6397a5651c32df6d01b197dc970","name":"@311devs/ngx-inline-editor","dist-tags":{"latest":"0.2.0-alpha.11"},"versions":{"0.2.0-alpha.11":{"name":"@311devs/ngx-inline-editor","version":"0.2.0-alpha.11","author":{"name":"Carlos Caballero","email":"caballerog.carlos@gmail.com"},"maintainers":[{"name":"Carlos Caballero","email":"caballerog.carlos@gmail.com"},{"name":"Toni Villena","email":"tonivj5@gmail.com"}],"license":"MIT","repository":{"type":"git","url":"git+https://github.com/311devs/ngx-inline-editor.git"},"bugs":{"url":"https://github.com/311devs/ngx-inline-editor/issues"},"keywords":["angular","angular4"],"main":"ngx-inline-editor.umd.js","module":"ngx-inline-editor.es5.js","es2015":"ngx-inline-editor.es2015.js","typings":"ngx-inline-editor.d.ts","scripts":{"gulp":"gulp","build":"gulp build && echo 'To publish a new version of library, please use npm run publish'","build:watch":"gulp","debug":"gulp watch:debug","clean":"gulp clean","commit":"git-cz","lint":"tslint --type-check --project ./src/tsconfig.json src/**/*.ts","publish":"cd dist && npm publish","test":"karma start"},"config":{"commitizen":{"path":"node_modules/cz-conventional-changelog"}},"dependencies":{},"peerDependencies":{"@angular/common":"^4.0.0","@angular/core":"^4.0.0","@angular/forms":"^4.0.0"},"devDependencies":{"@angular/common":"^4.2.3","@angular/compiler":"^4.2.3","@angular/core":"^4.2.3","@angular/forms":"^4.2.3","@angular/platform-browser":"^4.2.3","@angular/platform-browser-dynamic":"^4.2.3","@types/del":"^2.2.32","@types/gulp":"4.0.3","@types/gulp-changed":"^0.0.31","@types/gulp-rename":"^0.0.32","@types/jasmine":"^2.5.47","@types/karma":"^0.13.36","@types/merge2":"^0.3.30","@types/node":"~7.0.13","@types/run-sequence":"^0.0.28","codelyzer":"^3.0.0","commitizen":"^2.9.6","conventional-changelog-lint":"^1.1.9","core-js":"^2.4.1","del":"^2.2.2","gulp":"^3.9.1","gulp-changed":"^3.1.0","gulp-inline-ng2-template":"^4.0.0","gulp-ngc":"^0.3.2","gulp-rename":"^1.2.2","gulp-rollup":"^2.14.0","gulp-typescript":"^3.2.1","jasmine-core":"^2.6.4","karma":"^1.7.0","karma-chrome-launcher":"~2.2.0","karma-cli":"~1.0.1","karma-coverage-istanbul-reporter":"^0.2.0","karma-jasmine":"^1.1.0","karma-jasmine-diff-reporter":"^1.1.0","karma-jasmine-html-reporter":"^0.2.2","karma-mocha-reporter":"^2.2.3","karma-phantomjs-launcher":"^1.0.4","karma-sourcemap-loader":"^0.3.7","karma-typescript":"^3.0.4","karma-typescript-angular2-transform":"^1.0.0","merge2":"^1.0.3","node-watch":"^0.5.2","phantomjs-prebuilt":"~2.1.14","protractor":"~5.1.0","reflect-metadata":"~0.1.10","rollup":"^0.45.2","run-sequence":"^1.2.2","rxjs":"^5.3.0","ts-loader":"^2.0.3","ts-node":"~2.0.0","tslint":"^5.1.0","typescript":"~2.3.4","zone.js":"^0.8.5"},"engines":{"node":">=6.0.0"},"description":"","homepage":"https://github.com/311devs/ngx-inline-editor#readme","_id":"@311devs/ngx-inline-editor@0.2.0-alpha.11","_shasum":"a894b8d55a04ae7c4f0fb5063a850264815b36f1","_from":".","_npmVersion":"3.10.10","_nodeVersion":"6.11.2","_npmUser":{"name":"311devs","email":"dev@informpartner.com"},"dist":{"shasum":"a894b8d55a04ae7c4f0fb5063a850264815b36f1","tarball":"https://registry.npmjs.org/@311devs/ngx-inline-editor/-/ngx-inline-editor-0.2.0-alpha.11.tgz","integrity":"sha512-9F+BPD0ms91uLYryPBvlSR28os67J0JvWvFpvZO/p4qDWlJU46gMp7VE+ekI6XUcmvNyDrHAHcJQIlZSOZ7yOQ==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCPvB1B7h1P4Ejcoffh5MyAlOmGBjXXHvW6ZDgv/cglSAIgb2EXcJwETuCIYiGZwYNp9rJ8TdteUpTir3/uT7/F82M="}]},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ngx-inline-editor-0.2.0-alpha.11.tgz_1503408119996_0.7030213708058"}}},"readme":"# Native UI Inline-editor Angular (version 4+) component ([demo](demos))\n\n\nFollow me [![twitter](https://img.shields.io/twitter/follow/carlillo.svg?style=social&label=%20carlillo)](https://twitter.com/carlillo) to be notified about new releases.\n\nngx-inline-editor is a library of Angular (version 4+) that allows you to create editable elements.\nSuch technique is also known as *click-to-edit* or *edit-in-place*.\nIt is based on ideas of [angular-xeditable](https://github.com/vitalets/angular-xeditable) which is developed in AngularJS.\n\n\n![Version 0.1.0](https://github.com/qontu/ngx-inline-editor/raw/master/demos/basic/0.1.0.gif)\n## Dependencies\n\nBasically it does not depend on any libraries except Angular4 itself.\nFor themes you may need to include Twitter Bootstrap CSS.\n\n### Angular 4+ Version\n\nAngular 4 is now stable. Therefore, if encountering errors using this\nlib, ensure your version of Angular is compatible. The current version used to develop this lib is angular4 **^4.0.0**.\n\n## Controls & Features\n\n* [x] text\n* [x] textarea\n* [x] select\n* [ ] checkbox\n* [ ] radio\n* [ ] date\n* [ ] time\n* [x] datetime\n* [ ] html5 inputs\n  * [x] pattern\n  * [x] number\n  * [x] range\n* [ ] typeahead\n* [ ] ui-select\n* [ ] complex form\n* [ ] editable row\n* [ ] editable column\n* [ ] editable table\n* [x] themes\n\n\n## Quick start\n\n1. A recommended way to install ***ngx-inline-editor*** is through [npm](https://www.npmjs.com/search?q=ngx-inline-editor) package manager using the following command:\n\n  `npm i @qontu/ngx-inline-editor --save`\n\n2. Include the basic theme or configure your own styles which are in the following path:\n\n`dist/themes/bootstrap.css`\n\n3. Include [Twitter Bootstrap](http://v4-alpha.getbootstrap.com/) and [FontAwesome](http://fontawesome.io/) in your project.\n\n\nUsage\n-----\n\n## Angular (4+) and later\n\nImport `InlineEditorModule` into your app's modules:\n\n``` typescript\nimport {InlineEditorModule} from '@qontu/ngx-inline-editor';\n\n@NgModule({\n  imports: [\n    InlineEditorModule\n  ]\n})\n```\n\nThis makes all the `@qontu/ngx-inline-editor` components available for use in your app components.\n\n\n## Simple Example\n\nYou can find a complete example [here](demos/basic)\n```TypeScript\nimport {Component} from '@angular/core';\n\n@Component({\n    selector: 'my-component',\n    template: `\n    <div>\n        <inline-editor type=\"text\" [(ngModel)]=\"editableText\" (onSave)=\"saveEditable($event)\" name=\"editableText1\" size=\"8\"></inline-editor>\n    </div>\n    <div>\n        <inline-editor type=\"password\" [(ngModel)]=\"editablePassword\" (onSave)=\"saveEditable($event)\"></inline-editor>\n    </div>\n    <div>\n        <inline-editor type=\"textarea\" [(ngModel)]=\"editableTextArea\" (onSave)=\"saveEditable($event)\"> </inline-editor>\n    </div>\n    <div>\n        <inline-editor type=\"select\" [(ngModel)]=\"editableSelect\" (onSave)=\"saveEditable($event)\" [options]=\"editableSelectOptions\"\n        value=\"valor\"></inline-editor>\n  </div>`\n})\nexport class MyComponent {\n  title = 'My component!';\n\n  editableText = 'myText';\n  editablePassword = 'myPassword';\n  editableTextArea = 'Text in text area';\n  editableSelect = 2;\n  editableSelectOptions =[\n    {value: 1, text: 'status1'},\n    {value: 2, text: 'status2'},\n    {value: 3, text: 'status3'},\n    {value: 4, text: 'status4'}\n  ];\n\n  saveEditable(value) {\n    //call to http service\n    console.log('http.service: ' + value);\n  }\n```\n\n\n## API\n\n### InlineEditorDirectives\n\n##### Text\n\n\n```HTML\n <inline-editor\n        type=\"text\"\n        [(ngModel)]=\"editableText\"\n        (onSave)=\"saveEditable($event)\"\n        name=\"editableText1\"\n        size=\"8\"\n        disabled=\"true\"\n        min=\"1\"\n        max=\"8\"\n        pattern=\"^[a-zA-Z]{1,3}\"\n        (onError)=\"myHandleError\"></inline-editor>\n```\n\n* **`type`** [`string`] Specifies the type `<input>` element to display.\n* **`onSave`** [`event handler`] The expression specified will be invoked whenever the form is save via a click on save button.\nThe `$event` argument will be the value return of the input send.\n* **`onError`** [`event handler`] The expression specified will be invoked whenever the form is save via a click on save button and an error is provoked (example: the value is not between min and max).\n* **`name`** [`string`] Defines the name of an `<input>` element. Default is `undefined`.\n* **`size`** [`number`] Defines the width, in characters, of an `<input>` element. Default is `8`.\n* **`disabled`** [`boolean`] If set to `true`, a disabled input element is unusable and un-clickable. Default is `false`.\n* **`min`** [`number`] the min attribute specifies the minimum value for an `<input>` element. Default is `1`.\n* **`max`** [`number`] the max attribute specifies the maximum value for an `<input>` element. Default is `Infinity`.\n\n\n##### Password\n\n```HTML\n <inline-editor\n        type=\"password\"\n        [(ngModel)]=\"editablePassword\"\n        (onSave)=\"saveEditable($event)\"\n        name=\"editablePassword\"\n        size=\"8\"\n        disabled=\"true\"\n        min=\"1\"\n        max=\"8\"\n        (onError)=\"myHandleError\"></inline-editor>\n```\n\n* **`type`** [`string`] Specifies the type `<input>` element to display.\n* **`onSave`** [`event handler`] The expression specified will be invoked whenever the form is save via a click on save button.\nThe `$event` argument will be the value return of the input send.\n* **`onError`** [`event handler`] The expression specified will be invoked whenever the form is save via a click on save button and an error is provoked (example: the value is not between min and max).\n* **`name`** [`string`] Defines the name of an `<input>` element. Default is `undefined`.\n* **`size`** [`number`] Defines the width, in characters, of an `<input>` element. Default is `8`.\n* **`disabled`** [`boolean`] If set to `true`, a disabled input element is unusable and un-clickable. Default is `false`.\n* **`min`** [`number`] the min attribute specifies the minimum value for an `<input>` element. Default is `1`.\n* **`max`** [`number`] the max attribute specifies the maximum value for an `<input>` element. Default is `Infinity`.\n\n\n##### TextArea\n\n```HTML\n <inline-editor\n        type=\"textArea\"\n        [(ngModel)]=\"editableTextArea\"\n        (onSave)=\"saveEditable($event)\"\n        name=\"editableTextArea\"\n        size=\"8\"\n        disabled=\"true\"\n        cols=\"50\"\n        rows=\"4\"\n        min=\"1\"\n        max=\"8\"\n        (onError)=\"myHandleError\"></inline-editor>\n\n```\n\n* **`type`** [`string`] Specifies the type `<input>` element to display.\n* **`onSave`** [`event handler`] The expression specified will be invoked whenever the form is save via a click on save button.\nThe `$event` argument will be the value return of the input send.\n* **`onError`** [`event handler`] The expression specified will be invoked whenever the form is save via a click on save button and an error is provoked (example: the value is not between min and max).\n* **`name`** [`string`] Defines the name of an `<input>` element. Default is `undefined`.\n* **`size`** [`number`] Defines the width, in characters, of an `<input>` element. Default is `8`.\n* **`disabled`** [`boolean`] If set to `true`, a disabled input element is unusable and un-clickable. Default is `false`.\n* **`cols`** [`number`] Specifies the visible width of a text area. Default is `50`.\n* **`rows`** [`number`] Specifies the visible height of a text area. Default is `4`.\n* **`min`** [`number`] the min attribute specifies the minimum value for an `<input>` element. Default is `1`.\n* **`max`** [`number`] the max attribute specifies the maximum value for an `<input>` element. Default is `Infinity`.\n\n\n##### Select\n\n##### Basic example\n\n```HTML\n<inline-editor\n        type=\"select\"\n        [(ngModel)]=\"editableSelect\"\n        (onSave)=\"saveEditable($event)\"\n        name=\"editableSelect\"\n        disabled=\"false\"\n        [options]=\"editableSelectOptions\"></inline-editor>\n```\n\n* **`type`** [`string`] Specifies the type `<input>` element to display.\n* **`onSave`** [`event handler`] The expression specified will be invoked whenever the form is save via a click on save button.\nThe `$event` argument will be the value return of the input send.\n* **`name`** [`string`] Defines the name of an `<input>` element. Default is `undefined`.\n* **`disabled`** [`boolean`] If set to `true`, a disabled input element is unusable and un-clickable. Default is `false`.\n* **`options`** [`Array<optionItem> | Object:{ data: Array<optionItem, value:string, text: string }`] Array of items from which to select. Should be an array of objects with `value` and `text` properties.\nIs possible to configure key-value parameters using an object that specifies these fields and data.\n\nTypescript code:\n```TypeScript\n  editableSelect = 2;\n  editableSelectOptions =[\n    {value: 1, text: 'status1'},\n    {value: 2, text: 'status2'},\n    {value: 3, text: 'status3'},\n    {value: 4, text: 'status4'}\n  ];\n\n  saveEditable(value) {\n    //call to http server\n    console.log('http.server: ' + value);\n\n  }\n```\n\n##### Parameter's configuration example\n\n* **`editableSelect`** [`number`] Specifies the default's value of the select.\n* **`editableSelectOptions`** [`Array<optionItem> | Object: { data: Array<optionItem, value:string, text: string }`] Specifies the array of items from which to select. Should be an array of objects with `value` and `text` properties.\nIs possible to configure key-value parameters using an object that specifies these fields and data.\n\nTypescript code:\n```TypeScript\n  editableSelect = 2;\n  editableSelectOptionsConfiguration = {\n    data: [\n      { id: 1, field: 'status1' },\n      { id: 2, field: 'status2' },\n      { id: 3, field: 'status3' },\n      { id: 4, field: 'status4' }\n    ],\n    value: 'id',\n    text: 'field'\n  }\n\n  saveEditable(value) {\n    //call to http server\n    console.log('http.server: ' + value);\n\n  }\n```\n\n##### Children example\n\nIs possible to configure sublevels/children to generate the select using an array of objects called `children`.\n\nTypescript code:\n```TypeScript\n editableSelectOptionsTwoLevelsDefault = 1;\n  editableSelectOptionsTwoLevelsConfiguration = {\n    data: [\n      {\n        id: 1, field: 'status1',\n        children: [\n          { id: 5, field: 'status1.1' },\n          { id: 6, field: 'status1.2' }\n        ]\n      },\n      { id: 2, field: 'status2' },\n      { id: 3, field: 'status3' },\n      {\n        id: 4, field: 'status4',\n        children: [{ id: 7, field: 'status4.1' }]\n      }\n    ],\n    value: 'id',\n    text: 'field'\n  }\n```\n\n\n![Version 0.1.0-optGroup](https://github.com/qontu/ngx-inline-editor/raw/master/demos/basic/0.1.0-optGroup.gif)\n\n#### Empty components\n\n\n\n```HTML\n  <inline-editor\n  type=\"text\"\n  ngModel\n  empty=\"My custom message\"\n  (onSave)=\"saveEditable($event)\"\n  (onError)=\"handleError\"\n  name=\"editableText1\"\n  size=\"8\"\n  min=\"3\"\n  max=\"5\"></inline-editor>\n\n  <inline-editor type=\"select\"\n                [(ngModel)]=\"editableSelectDoesntExist\"\n                (onSave)=\"saveEditable($event)\"\n                [options]=\"editableSelectOptionsConfiguration\"></inline-editor>\n```\n\n* **`empty`** [`string`] Specifies the default message to display if there are not ngModel for the component.\nIf the type is `select` then the default selected element is the first element of the `options` array.\n\n\n\n# Style/Theme\n\nThe `inline-editor` has the following basic theme which you can find in `dist/themes/bootstrap.css`:\n\n```CSS\na.c-inline-editor {\n  text-decoration: none;\n  color: #428bca;\n  border-bottom: dashed 1px #428bca;\n  cursor: pointer;\n  line-height: 2;\n  margin-right: 5px;\n  margin-left: 5px;\n}\n.c-inline-editor.editable-empty,\n.c-inline-editor.editable-empty:hover,\n.c-inline-editor.editable-empty:focus,\n.c-inline-editor.a.editable-empty,\n.c-inline-editor.a.editable-empty:hover,\n.c-inline-editor.a.editable-empty:focus {\n  font-style: italic;\n  color: #DD1144;\n  text-decoration: none;\n}\n\n.c-inline-editor.inlineEditForm {\n  display: inline-block;\n  white-space: nowrap;\n  margin: 0;\n}\n\n#inlineEditWrapper {\n  display: inline-block;\n}\n\n.c-inline-editor.inlineEditForm input,\n.c-inline-editor.select {\n  width: auto;\n  display: inline;\n}\n\n.c-inline-editor.inline-editor-button-group {\n  display: inline-block;\n}\n\n.c-inline-editor.editInvalid {\n  color: #a94442;\n  margin-bottom: 0;\n}\n\n.c-inline-editor.error {\n  border-color: #a94442;\n}\n\n[hidden].c-inline-editor {\n  display: none;\n}\n```\n\n\n# Integration with other ngx-libraries\n\n## ngx-data-table\nExample using [angular2-data-table](https://github.com/swimlane/angular2-data-table) ([demo](demos))\n![Version 0.1.0-angular2-data-table](demos/angular2-data-table/0.1.0.gif)\n\n\n# Troubleshooting\n\nPlease follow this guidelines when reporting bugs and feature requests:\n\n1. Use [GitHub Issues](https://github.com/qontu/ngx-inline-editor/issues) board to report bugs and feature requests (not our email address)\n2. Please **always** write steps to reproduce the error. That way we can focus on fixing the bug, not scratching our heads trying to reproduce it.\n\nThanks for understanding!\n\n# Development\n\n1. To generate all `*.js`, `*.js.map` and `*.d.ts` files:\n\n    `npm run build`\n\n2. To debug :\n\n    `npm run build:watch`\n\n## Authors\nCarlos Caballero - [https://github.com/caballerog](hhttps://github.com/caballerog)\n\nAntonio Villena - [https://github.com/xxxtonixxx](https://github.com/xxxtonixxx)\n## License\n\nThe MIT License (See the [LICENSE](https://github.com/qontu/ngx-inline-editor/blob/master/LICENSE.MD) file for the full text) - \n\n","maintainers":[{"name":"311devs","email":"dev@informpartner.com"}],"time":{"modified":"2022-06-12T14:10:50.290Z","created":"2017-08-22T13:22:01.172Z","0.2.0-alpha.11":"2017-08-22T13:22:01.172Z"},"homepage":"https://github.com/311devs/ngx-inline-editor#readme","keywords":["angular","angular4"],"repository":{"type":"git","url":"git+https://github.com/311devs/ngx-inline-editor.git"},"author":{"name":"Carlos Caballero","email":"caballerog.carlos@gmail.com"},"bugs":{"url":"https://github.com/311devs/ngx-inline-editor/issues"},"license":"MIT","readmeFilename":"README.md"}