{"_id":"@eflexsystems/ember-power-select-with-create","_rev":"2-10cbd98a3ebd21f312eda9770b2acb9d","name":"@eflexsystems/ember-power-select-with-create","dist-tags":{"latest":"2.0.0"},"versions":{"2.0.0":{"name":"@eflexsystems/ember-power-select-with-create","version":"2.0.0","keywords":["ember-addon","ember-power-select-addon","create","select"],"author":{"name":"Miguel Camba","email":"miguel.camba@gmail.com"},"license":"MIT","_id":"@eflexsystems/ember-power-select-with-create@2.0.0","maintainers":[{"name":"eflex","email":"jacobjewell@eflexsystems.com"},{"name":"jakesjews","email":"jakesjews@immersiveapplications.com"},{"name":"rrglomsk","email":"rachelglomski@eflexsystems.com"},{"name":"nevans54","email":"nate544@gmail.com"}],"homepage":"https://github.com/cibernox/ember-power-select-with-create#readme","bugs":{"url":"https://github.com/cibernox/ember-power-select-with-create/issues"},"dist":{"shasum":"8a4c77ac161f2216b6f3a31c62d5358c86af245f","tarball":"https://registry.npmjs.org/@eflexsystems/ember-power-select-with-create/-/ember-power-select-with-create-2.0.0.tgz","fileCount":14,"integrity":"sha512-MdjDS2c5O3YNbjrkATTqAn2eebcBOY9lnP7DyC9gVLmAVXQnzD1CxntVnAcWmklYxaKoWN5ykOLRMlm8fvGrKw==","signatures":[{"sig":"MEUCIENO/TBTD3Nl7z/CrsDKORaV/iECNQ/RJiKkq/C9rNflAiEA7EYUZImHN8GWHnqkgrV16cBzbXebKw8WdGZpwG615JM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18290},"ember":{"edition":"octane"},"engines":{"node":"14.* || >= 16"},"gitHead":"3c1f6781b13c7d75cb8e5409b7fa3e40e1387490","scripts":{"lint":"concurrently \"npm:lint:*(!fix)\" --names \"lint:\"","test":"concurrently \"npm:lint\" \"npm:test:*\" --names \"lint,test:\"","build":"ember build --environment=production","start":"ember serve","lint:js":"eslint . --cache","lint:css":"stylelint \"**/*.css\"","lint:fix":"concurrently \"npm:lint:*:fix\" --names \"fix:\"","lint:hbs":"ember-template-lint .","test:ember":"ember test","lint:js:fix":"eslint . --fix","lint:css:fix":"concurrently \"npm:lint:css -- --fix\"","lint:hbs:fix":"ember-template-lint . --fix","test:ember-compatibility":"ember try:each"},"_npmUser":{"name":"eflex","email":"jacobjewell@eflexsystems.com"},"release-it":{"git":{"tagName":"v${version}"},"github":{"release":true,"tokenRef":"GITHUB_AUTH"},"plugins":{"release-it-lerna-changelog":{"infile":"CHANGELOG.md","launchEditor":true}}},"repository":{"url":"git+https://github.com/cibernox/ember-power-select-with-create.git","type":"git"},"_npmVersion":"10.5.0","description":"Ember Power Select addon that allows creation of items.","directories":{"doc":"doc","test":"tests"},"ember-addon":{"configPath":"tests/dummy/config"},"_nodeVersion":"21.7.1","dependencies":{"@babel/core":"^7.24.0","@embroider/util":"^1.13.0","ember-cli-babel":"^8.2.0","ember-auto-import":"^2.7.2","ember-cli-htmlbars":"^6.1.0"},"publishConfig":{"registry":"https://registry.npmjs.org"},"_hasShrinkwrap":false,"devDependencies":{"qunit":"^2.20.1","eslint":"^8.57.0","webpack":"^5.90.3","prettier":"^3.2.5","ember-cli":"~5.7.0","ember-try":"^3.0.0","loader.js":"^4.7.0","qunit-dom":"^2.0.0","stylelint":"^15.11.0","ember-data":"^5.3.3","release-it":"^14.2.1","ember-qunit":"^8.0.2","concurrently":"^8.2.2","ember-source":"~5.7.0","@ember/string":"^3.1.1","ember-cli-sri":"^2.1.1","ember-resolver":"^11.0.1","eslint-plugin-n":"^16.6.2","ember-cli-terser":"^4.0.2","@glimmer/tracking":"^1.1.2","ember-concurrency":"^4.0.1","@glimmer/component":"^1.1.2","broccoli-asset-rev":"^3.0.0","ember-power-select":"^8.0.1","stylelint-prettier":"^4.1.0","@ember/test-helpers":"^3.3.0","ember-cli-clean-css":"^3.0.0","ember-template-lint":"^5.13.0","eslint-plugin-ember":"^12.0.2","eslint-plugin-qunit":"^8.1.1","@babel/eslint-parser":"^7.23.10","ember-basic-dropdown":"^8.0.0","@embroider/test-setup":"^3.0.3","eslint-config-prettier":"^9.1.0","eslint-plugin-prettier":"^5.1.3","ember-load-initializers":"^2.1.2","@ember/optional-features":"^2.1.0","ember-source-channel-url":"^3.0.0","stylelint-config-standard":"^34.0.0","release-it-lerna-changelog":"^3.1.0","ember-cli-dependency-checker":"^3.3.2","ember-cli-inject-live-reload":"^2.1.0","@babel/plugin-proposal-decorators":"^7.24.0"},"peerDependencies":{"ember-source":">= 4.0.0","ember-power-select":"^8.0.1"},"_npmOperationalInternal":{"tmp":"tmp/ember-power-select-with-create_2.0.0_1710284887935_0.41538165295746143","host":"s3://npm-registry-packages"}}},"time":{"created":"2024-03-12T23:08:07.800Z","modified":"2026-05-05T19:32:29.403Z","2.0.0":"2024-03-12T23:08:08.128Z"},"bugs":{"url":"https://github.com/cibernox/ember-power-select-with-create/issues"},"author":{"name":"Miguel Camba","email":"miguel.camba@gmail.com"},"license":"MIT","homepage":"https://github.com/cibernox/ember-power-select-with-create#readme","keywords":["ember-addon","ember-power-select-addon","create","select"],"repository":{"url":"git+https://github.com/cibernox/ember-power-select-with-create.git","type":"git"},"description":"Ember Power Select addon that allows creation of items.","maintainers":[{"email":"nate.evans@epicor.com","name":"eflex"},{"email":"rachelglomski@eflexsystems.com","name":"rrglomsk"},{"email":"nate544@gmail.com","name":"nevans54"}],"readme":"# ember-power-select-with-create\n\nSimple variation of ember-power-select that allows you to create a new entry based on the search text.\n\n## Installation\n\n```sh\nember install ember-power-select-with-create\n```\n## Compatibility\n\n* Ember.js v3.24 or above\n* Ember CLI v3.24 or above\n* Node.js v14 or above\n* Ember Power Select v4 or above\n\nPlease also refer to [Ember Power Select documentation](https://github.com/cibernox/ember-power-select#ember-power-select) for it's compatibility notes.\n\n## Usage\n\n```hbs\n<PowerSelectWithCreate\n  @options={{countries}}\n  @selected={{selectedCountry}}\n  @onChange={{action (mut selectedCountry)}}\n  @onCreate={{action \"createCountry\"}}\n  as |country|\n>\n  {{country.name}}\n</PowerSelectWithCreate>\n```\n\nIf you want to be able to select multiple options, use the `<PowerSelectMultipleWithCreate>` component instead. It has the same API as the normal `<PowerSelectWithCreate>`.\n\nFor more options please refer to the [Ember Power Select docs](http://www.ember-power-select.com/docs).\n\n#### Control if create option should be shown\n\nYou can provide a callback `showCreateWhen`, which will be called whenever the user types into the search field.\nIf you return `true`, the create option will be shown. If you return `false`, it won't be shown.\n\n```hbs\n<PowerSelectWithCreate\n  @options={{countries}}\n  @searchField=\"name\"\n  @selected={{selectedCountry}}\n  @onCreate={{action \"createCountry\"}}\n  @showCreateWhen={{action \"hideCreateOptionOnSameName\"}}\n  as |country|\n>\n  {{country.name}}\n</PowerSelectWithCreate>\n```\n\n```js\nimport Component from '@ember/component';\nimport { action } from '@ember/object';\n\nexport default class MyComponent extends Component {\n  @action\n  hideCreateOptionOnSameName(term) {\n    let existingOption = this.countries.find(({ name }) => name === term);\n    return !existingOption;\n  }\n}\n```\n\n#### Control create option position\n\nYou can provide `showCreatePosition` property to control the position(bottom|top) of create option. It should be either `\"top\"` or `\"bottom\"`. It defaults to `\"top\"`.\n\n```hbs\n<PowerSelectWithCreate\n  @options={{countries}}\n  @searchField=\"name\"\n  @selected={{selectedCountry}}\n  @onCreate={{action \"createCountry\"}}\n  @showCreatePosition=\"bottom\"\n  @showCreateWhen={{action \"hideCreateOptionOnSameName\"}}\n  as |country|\n>\n  {{country.name}}\n</PowerSelectWithCreate>\n```\n\n#### Control the create option's label - Default `Add \"{{option}}\"...`\n\nYou can provide the `buildSuggestion` action to control the label of the create option. Default - `Add \"{{option}}\"...`\n\n```hbs\n<PowerSelectWithCreate\n  @options={{countries}}\n  @searchField=\"name\"\n  @selected={{selectedCountry}}\n  @onCreate={{action \"createCountry\"}}\n  @buildSuggestion={{action \"customSuggestion\"}}\n>\n  {{country.name}}\n</PowerSelectWithCreate>\n```\n\n```js\nimport Component from '@ember/component';\nimport { action } from '@ember/object';\n\nexport default class MyComponent extends Component {\n  @action\n  customSuggestion(term) {\n    return `Create ${term}`;\n  }\n}\n```\n\n#### Pass the creation option to a component for more control\n\nBeyond building the suggestion label, you can pass the `suggestedOptionComponent` property, which should be a component, not a string to be embroider compatible.\n\nThis component will receive the suggestedOption itself as `option` and the current `term` as `term`.\n\n```hbs\n<PowerSelectWithCreate\n  @options={{countries}}\n  @searchField=\"name\"\n  @selected={{selectedCountry}}\n  @onCreate={{action \"createCountry\"}}\n  @suggestedOptionComponent={{component (ensure-safe-component \"suggested-option\")}}\n>\n  {{country.name}}\n</PowerSelectWithCreate>\n```\n\n```hbs\n<!-- <SuggestedOption @option={{option}} @term={{term}} /> -->\n<span class=\"is-suggested\">\n  Add \"{{term}}\"...\n</span>\n<!-- </SuggestedOption> -->\n```\n## Demo\n\n[https://ember-power-select-with-create.pagefrontapp.com/](https://ember-power-select-with-create.pagefrontapp.com/)\n","readmeFilename":"README.md"}