[ { "path": ".all-contributorsrc", "content": "{\n \"projectName\": \"ng-multiselect-dropdown\",\n \"projectOwner\": \"Nilesh Patel\",\n \"repoType\": \"github\",\n \"repoHost\": \"https://github.com\",\n \"files\": [\n \"README.md\"\n ],\n \"imageSize\": 100,\n \"commit\": false,\n \"commitConvention\": \"angular\",\n \"contributors\": [\n {\n \"login\": \"tomsaleeba\",\n \"name\": \"Tom Saleeba\",\n \"avatar_url\": \"https://avatars0.githubusercontent.com/u/1773838?v=4\",\n \"profile\": \"http://blog.techotom.com\",\n \"contributions\": [\n \"code\"\n ]\n },\n {\n \"login\": \"synap5e\",\n \"name\": \"Simon Pinfold\",\n \"avatar_url\": \"https://avatars0.githubusercontent.com/u/2515062?v=4\",\n \"profile\": \"https://overtrack.gg\",\n \"contributions\": [\n \"code\"\n ]\n },\n {\n \"login\": \"sushil-suthar\",\n \"name\": \"Sushil Suthar\",\n \"avatar_url\": \"https://avatars0.githubusercontent.com/u/32981723?v=4\",\n \"profile\": \"http://helpfordeveloper.blogspot.in\",\n \"contributions\": [\n \"code\"\n ]\n },\n {\n \"login\": \"sacgrover\",\n \"name\": \"Sachin Grover\",\n \"avatar_url\": \"https://avatars1.githubusercontent.com/u/1292182?v=4\",\n \"profile\": \"http://sacgro.com\",\n \"contributions\": [\n \"code\"\n ]\n },\n {\n \"login\": \"WWL-MikeRoberts\",\n \"name\": \"Mike Roberts\",\n \"avatar_url\": \"https://avatars3.githubusercontent.com/u/9750056?v=4\",\n \"profile\": \"https://github.com/WWL-MikeRoberts\",\n \"contributions\": [\n \"code\"\n ]\n },\n {\n \"login\": \"DsosaV\",\n \"name\": \"David Sosa\",\n \"avatar_url\": \"https://avatars2.githubusercontent.com/u/3926475?v=4\",\n \"profile\": \"https://github.com/DsosaV\",\n \"contributions\": [\n \"code\"\n ]\n }\n ],\n \"contributorsPerLine\": 7\n}\n" }, { "path": ".editorconfig", "content": "# Editor configuration, see http://editorconfig.org\nroot = true\n\n[*]\ncharset = utf-8\nindent_style = space\nindent_size = 2\ninsert_final_newline = true\ntrim_trailing_whitespace = true\n\n[*.md]\nmax_line_length = off\ntrim_trailing_whitespace = false\n" }, { "path": ".github/workflows/nodejs.yml", "content": "name: Node CI - run test\n\non: [pull_request]\n\njobs:\n build:\n\n runs-on: ubuntu-latest\n\n strategy:\n matrix:\n node-version: [16.x]\n\n steps:\n - uses: actions/checkout@v1\n - name: Use Node.js ${{ matrix.node-version }}\n uses: actions/setup-node@v1\n with:\n node-version: ${{ matrix.node-version }}\n - name: npm install and test\n run: |\n npm install\n npm run test:ci\n" }, { "path": ".gitignore", "content": "# See http://help.github.com/ignore-files/ for more about ignoring files.\n\n# compiled output\n/dist\n/dist-lib\n/tmp\n/out-tsc\n/.angular\ndist-lib.tgz\n\n# dependencies\n/node_modules\n\n# IDEs and editors\n/.idea\n.project\n.classpath\n.c9/\n*.launch\n.settings/\n*.sublime-workspace\n\n# IDE - VSCode\n.vscode/*\n!.vscode/settings.json\n!.vscode/tasks.json\n!.vscode/launch.json\n!.vscode/extensions.json\n.vscode\n\n# misc\n/.sass-cache\n/connect.lock\n/coverage\n/libpeerconnection.log\nnpm-debug.log\ntestem.log\n/typings\nyarn-error.log\n\n# e2e\n/e2e/*.js\n/e2e/*.map\n\n# System Files\n.DS_Store\nThumbs.db\npackage-lock.json\nsettings.json\n\n\nTODO.md\nng-multiselect-dropdown - Copy\n" }, { "path": "CHANGELOG.md", "content": "" }, { "path": "ISSUE_TEMPLATE.md", "content": "\n**Angular version**:\n\n**ng-multiselect-dropdown version**:\n\n**Description of issue**:\n\n**Steps to reproduce**:\n\n**Expected result**:\n\n**Actual result**:\n\n**Demo**: Please share sample code link using StackBlitz or codesandbox\n\nAny relevant code:\n```\n\n```" }, { "path": "README.md", "content": "# Angular Multiselect Dropdown\n\n[![All Contributors](https://img.shields.io/badge/all_contributors-6-orange.svg?style=flat-square)](#contributors-)\n\n\n[![npm version](https://img.shields.io/npm/v/ng-multiselect-dropdown.svg)](https://www.npmjs.com/package/ng-multiselect-dropdown)\n[![downloads](https://img.shields.io/npm/dt/ng-multiselect-dropdown.svg)](https://www.npmjs.com/package/ng-multiselect-dropdown)\n[![downloads](https://img.shields.io/npm/dm/ng-multiselect-dropdown.svg)](https://www.npmjs.com/package/ng-multiselect-dropdown)\n\nAngular multiselect dropdown component for web applications. Easy to integrate and use. It can be bind to any custom data source.\n\n# [Demo](https://nileshpatel17.github.io/ng-multiselect-dropdown/)\n\n![demo](Screenshots/ng-multiselect-dropdown_v0.1.6.gif)\n\n## Getting Started\n\n## Features\n\n- dropdown with single/multiple selction option\n- bind to any custom data source\n- search item with custom placeholder text\n- limit selection\n- select/de-select all items\n- custom theme\n\n### Installation\n\n```\nnpm install ng-multiselect-dropdown\n```\n\nAnd then include it in your module (see [app.module.ts](https://github.com/NileshPatel17/ng-multiselect-dropdown/blob/master/src/app/app.module.ts)):\n\n```ts\nimport { NgMultiSelectDropDownModule } from 'ng-multiselect-dropdown';\n// ...\n\n@NgModule({\n imports: [\n NgMultiSelectDropDownModule.forRoot()\n // ...\n ]\n // ...\n})\nexport class AppModule {}\n```\n\n### Usage\n\n```ts\nimport { Component, OnInit } from '@angular/core';\nimport { IDropdownSettings } from 'ng-multiselect-dropdown';\n\nexport class AppComponent implements OnInit {\n dropdownList = [];\n selectedItems = [];\n dropdownSettings = {};\n ngOnInit() {\n this.dropdownList = [\n { item_id: 1, item_text: 'Mumbai' },\n { item_id: 2, item_text: 'Bangaluru' },\n { item_id: 3, item_text: 'Pune' },\n { item_id: 4, item_text: 'Navsari' },\n { item_id: 5, item_text: 'New Delhi' }\n ];\n this.selectedItems = [\n { item_id: 3, item_text: 'Pune' },\n { item_id: 4, item_text: 'Navsari' }\n ];\n this.dropdownSettings:IDropdownSettings = {\n singleSelection: false,\n idField: 'item_id',\n textField: 'item_text',\n selectAllText: 'Select All',\n unSelectAllText: 'UnSelect All',\n itemsShowLimit: 3,\n allowSearchFilter: true\n };\n }\n onItemSelect(item: any) {\n console.log(item);\n }\n onSelectAll(items: any) {\n console.log(items);\n }\n}\n```\n\n```html\n\n\n```\n\n### Settings\n\n| Setting | Type | Description | Default Value |\n| :----------------------------- | :--------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------ |\n| singleSelection | Boolean | Mode of this component. If set `true` user can select more than one option. | false |\n| placeholder | String | Text to be show in the dropdown, when no items are selected. | 'Select' |\n| disabled | Boolean | Disable the dropdown | false |\n| data | Array | Array of items from which to select. Should be an array of objects with id and `text` properties. You can also use custom properties. In that case you need to map idField and `textField` properties. As convenience, you may also pass an array of strings, in which case the same string is used for both the ID and the text(no mapping is required) | n/a |\n| idField | String | map id field in case of custom array of object | 'id' |\n| textField | String | map text field in case of custom array of object | 'text' |\n| enableCheckAll | Boolean | Enable the option to select all items in list | false |\n| selectAllText | String | Text to display as the label of select all option | Select All |\n| unSelectAllText | String | Text to display as the label of unSelect option | UnSelect All |\n| allowSearchFilter | Boolean | Enable filter option for the list. | false |\n| searchPlaceholderText | String | custom search placeholder | Search |\n| clearSearchFilter | Boolean | clear search filter on dropdown close | true |\n| maxHeight | Number | Set maximum height of the dropdown list in px. | 197 |\n| itemsShowLimit | Number | Limit the number of items to show in the input field. If not set will show all selected. | All |\n| limitSelection | Number | Limit the selection of number of items from the dropdown list. Once the limit is reached, all unselected items gets disabled. | none |\n| searchPlaceholderText | String | Custom text for the search placeholder text. Default value would be 'Search' | 'Search' |\n| noDataAvailablePlaceholderText | String | Custom text when no data is available. | 'No data available' |\n| closeDropDownOnSelection | Boolean | Closes the dropdown when item is selected. applicable only in cas of single selection | false |\n| defaultOpen | Boolean | open state of dropdown | false |\n| allowRemoteDataSearch | Boolean | allow search remote api if no data is present. | false |\n\n\n### Callback Methods\n\n- `onSelect` - Return the selected item when an item is checked.\n Example : (onSelect)=\"onItemSelect($event)\"\n- `onSelectAll` - Return the all items.\n Example : (onSelectAll)=\"onSelectAll($event)\".\n- `onDeSelect` - Return the unselected item when an item is unchecked.\n Example : (onDeSelect)=\"onItemDeSelect($event)\"\n- `onFilterChange` - Return the key press.\n Example : (onFilterChange)=\"onFilterChange($event)\"\n- `onDropDownClose`-\n Example : (onDropDownClose)=\"onDropDownClose()\"\n\n\n### Custom Theme\n\n- The component package has a themes folder in node_modules at `ng-multiselet-dropdown\\themes\\ng-multiselect-dropdown.theme.scss`\n- Include the `ng-multiselet-dropdown.theme.css` in `angular-cli.json` (for versions below angular 6) and `angular.json` (for version 6 or more).\n- [Refer this file](https://github.com/NileshPatel17/ng-multiselect-dropdown/blob/master/custom-theme.md) on how to add the css file to your angular project.\n\n\n\n## Custom Template(in beta):\n\n### Variables can be used in template\n\n1. id: return id as number\n2. option: return option text. return string\n3. isSelected: determine if item is selected or not. returns boolean\n\nTemplate for each item\n```\n\n {{option}}\n\n```\n\nTemplate for selected item\n```\n\n {{option}}\n\n```\n\n[Demo](https://codesandbox.io/s/custom-template-uyo0o?file=/src/app/app.component.html)\n### Run locally\n\n- Clone the repository or downlod the .zip,.tar files.\n- Run `npm install`\n- Run `ng serve` for a dev server\n- Navigate to `http://localhost:4200/`\n\n### Library Build / NPM Package\n\nRun `yarn build:lib` to build the library and generate an NPM package. The build artifacts will be stored in the dist-lib/ folder.\n\n## Running unit tests\n\nRun `yarn test` to execute the unit tests.\n\n## Development\n\nThis project was generated with Angular CLI version 1.7.1.\n\n## Contributions\n\nContributions are welcome, please open an issue and preferrably file a pull request.\n\n### Opening Issue\n\nPlease share sample code using codesandbox.com or stackblitz.com to help me re-produce the issue.\n\n## License\n\nMIT License.\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\n\n\n\n \n \n \n \n \n \n \n \n \n
\"\"/
Tom Saleeba
💻		\"\"/
Simon Pinfold
💻		\"\"/
Sushil Suthar
💻		\"\"/
Sachin Grover
💻		\"\"/
Mike Roberts
💻		\"\"/
David Sosa
💻		\"\"/
Sergiy Gedeon
💻
\n\n\n\n\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n" }, { "path": "angular.json", "content": "{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"ng-multiselect-dropdown-base\": {\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"projectType\": \"application\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:browser\",\n \"options\": {\n \"aot\": true,\n \"outputPath\": \"dist\",\n \"index\": \"src/index.html\",\n \"main\": \"src/main.ts\",\n \"tsConfig\": \"src/tsconfig.app.json\",\n \"polyfills\": \"src/polyfills.ts\",\n \"assets\": [\n \"src/assets\",\n \"src/favicon.ico\"\n ],\n \"styles\": [\n \"src/styles.scss\"\n ],\n \"scripts\": []\n },\n \"configurations\": {\n \"production\": {\n \"budgets\": [\n {\n \"type\": \"anyComponentStyle\",\n \"maximumWarning\": \"6kb\"\n }\n ],\n \"optimization\": true,\n \"outputHashing\": \"all\",\n \"sourceMap\": false,\n \"extractCss\": true,\n \"namedChunks\": false,\n \"aot\": true,\n \"extractLicenses\": true,\n \"vendorChunk\": false,\n \"buildOptimizer\": true,\n \"fileReplacements\": [\n {\n \"replace\": \"src/environments/environment.ts\",\n \"with\": \"src/environments/environment.prod.ts\"\n }\n ]\n }\n }\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"options\": {\n \"browserTarget\": \"ng-multiselect-dropdown-base:build\"\n },\n \"configurations\": {\n \"production\": {\n \"browserTarget\": \"ng-multiselect-dropdown-base:build:production\"\n }\n }\n },\n \"extract-i18n\": {\n \"builder\": \"@angular-devkit/build-angular:extract-i18n\",\n \"options\": {\n \"browserTarget\": \"ng-multiselect-dropdown-base:build\"\n }\n },\n \"test\": {\n \"builder\": \"@angular-devkit/build-angular:karma\",\n \"options\": {\n \"main\": \"src/test.ts\",\n \"karmaConfig\": \"./karma.conf.js\",\n \"polyfills\": \"src/polyfills.ts\",\n \"tsConfig\": \"src/tsconfig.spec.json\",\n \"scripts\": [],\n \"styles\": [\n \"src/styles.scss\"\n ],\n \"assets\": [\n \"src/assets\",\n \"src/favicon.ico\"\n ]\n }\n },\n \"lint\": {\n \"builder\": \"@angular-devkit/build-angular:tslint\",\n \"options\": {\n \"tsConfig\": [\n \"src/tsconfig.app.json\",\n \"src/tsconfig.spec.json\"\n ],\n \"exclude\": [\n \"**/node_modules/**\"\n ]\n }\n }\n }\n },\n \"ng-multiselect-dropdown-base-e2e\": {\n \"root\": \"\",\n \"sourceRoot\": \"e2e\",\n \"projectType\": \"application\",\n \"architect\": {\n \"e2e\": {\n \"builder\": \"@angular-devkit/build-angular:protractor\",\n \"options\": {\n \"protractorConfig\": \"./protractor.conf.js\",\n \"devServerTarget\": \"ng-multiselect-dropdown-base:serve\"\n }\n },\n \"lint\": {\n \"builder\": \"@angular-devkit/build-angular:tslint\",\n \"options\": {\n \"tsConfig\": [\n \"e2e/tsconfig.e2e.json\"\n ],\n \"exclude\": [\n \"**/node_modules/**\"\n ]\n }\n }\n }\n }\n },\n \"schematics\": {\n \"@schematics/angular:component\": {\n \"prefix\": \"ng\",\n \"style\": \"scss\"\n },\n \"@schematics/angular:directive\": {\n \"prefix\": \"ng\"\n }\n }\n}" }, { "path": "custom-theme.md", "content": "# Custom Theme\n\n#### Step 1:\n\n1. copy 'ng-multiselect-dropdown.theme.scss' file located at `node_modules\\ng-multiselet-dropdown\\themes\\ng-multiselect-dropdown.theme.scss`\n\n\n** if you are using version below 0.2.11, you need to get it from https://github.com/NileshPatel17/ng-multiselect-dropdown/themes/ng-multiselet-dropdown.theme.css\n\n\n#### Step 2:\n1. paste this file in your project wherever you want. Include this file `ng-multiselet-dropdown.theme.css` in `angular-cli.json` (for versions below angular 6) and `angular.json` (for version 6 or more). file name can be anything.\n![](Screenshots/theme-step-2.png)\n\n\n#### Step 3:\n1. Change $base-color in 'ng-multiselect-dropdown.theme.scss'\n![](Screenshots/theme-step-3.png)\n\n\n### You can also checkout [sample code](https://codesandbox.io/s/custom-theme-p1556), i created in codesandbox." }, { "path": "e2e/app.e2e-spec.ts", "content": "import { NgTest2Page } from './app.po';\n\ndescribe('ng-test2 App', () => {\n let page: NgTest2Page;\n\n beforeEach(() => {\n page = new NgTest2Page();\n });\n\n it('should display welcome message', () => {\n page.navigateTo();\n expect(page.getParagraphText()).toEqual('Welcome to app!');\n });\n});\n" }, { "path": "e2e/app.po.ts", "content": "import { browser, by, element } from 'protractor';\n\nexport class NgTest2Page {\n navigateTo() {\n return browser.get('/');\n }\n\n getParagraphText() {\n return element(by.css('app-root h1')).getText();\n }\n}\n" }, { "path": "e2e/tsconfig.e2e.json", "content": "{\n \"extends\": \"../tsconfig.json\",\n \"compilerOptions\": {\n \"outDir\": \"../out-tsc/e2e\",\n \"baseUrl\": \"./\",\n \"module\": \"commonjs\",\n \"target\": \"es5\",\n \"types\": [\n \"jasmine\",\n \"jasminewd2\",\n \"node\"\n ]\n }\n}\n" }, { "path": "jest.config.js", "content": "const jestConfig = {\n \"preset\": \"jest-preset-angular\",\n \"setupFilesAfterEnv\": [\n \"/src/setup-jest.ts\"\n ],\n \"testPathIgnorePatterns\": [\n \"/node_modules/\",\n \"/dist/\",\n \"/dist-lib/\",\n \"/src/test.ts\"\n ],\n \"globals\": {\n \"ts-jest\": {\n \"tsConfig\": \"/src/tsconfig.spec.json\",\n \"stringifyContentPathRegex\": \"\\\\.html$\",\n \"astTransformers\": [\n \"/node_modules/jest-preset-angular/InlineHtmlStripStylesTransformer\"\n ]\n }\n }\n}\n\nmodule.exports = jestConfig;" }, { "path": "karma.conf.js", "content": "// Karma configuration file, see link for more information\n// https://karma-runner.github.io/0.13/config/configuration-file.html\n\nmodule.exports = function (config) {\n config.set({\n basePath: '',\n frameworks: ['jasmine', '@angular-devkit/build-angular'],\n plugins: [\n require('karma-jasmine'),\n require('karma-chrome-launcher'),\n require('karma-jasmine-html-reporter'),\n require('karma-coverage-istanbul-reporter'),\n require('@angular-devkit/build-angular/plugins/karma')\n ],\n client:{\n clearContext: false // leave Jasmine Spec Runner output visible in browser\n },\n coverageIstanbulReporter: {\n dir: require('path').join(__dirname, 'coverage'), reports: [ 'html', 'lcovonly' ],\n fixWebpackSourcePaths: true\n },\n \n reporters: ['progress', 'kjhtml'],\n port: 9876,\n colors: true,\n logLevel: config.LOG_INFO,\n autoWatch: true,\n browsers: ['Chrome'],\n singleRun: false\n });\n};\n" }, { "path": "ng-multiselect-dropdown.theme.scss", "content": "$base-color: #337ab7;\n$disable-background-color: #eceeef;\n.multiselect-dropdown {\n position: relative;\n width: 100%;\n font-size: inherit;\n font-family: inherit;\n .dropdown-btn {\n display: inline-block;\n border: 1px solid #adadad;\n width: 100%;\n padding: 6px 12px;\n margin-bottom: 0;\n font-weight: normal;\n line-height: 1.52857143;\n text-align: left;\n vertical-align: middle;\n cursor: pointer;\n background-image: none;\n border-radius: 4px;\n .selected-item {\n border: 1px solid $base-color;\n margin-right: 4px;\n background: $base-color;\n padding: 0px 5px;\n color: #fff;\n border-radius: 2px;\n float: left;\n a {\n text-decoration: none;\n }\n }\n .selected-item:hover {\n box-shadow: 1px 1px #959595;\n }\n .dropdown-down {\n display: inline-block;\n top: 10px;\n width: 0;\n height: 0;\n border-top: 10px solid #adadad;\n border-left: 10px solid transparent;\n border-right: 10px solid transparent;\n }\n .dropdown-up {\n display: inline-block;\n width: 0;\n height: 0;\n border-bottom: 10px solid #adadad;\n border-left: 10px solid transparent;\n border-right: 10px solid transparent;\n }\n }\n .disabled {\n & > span {\n background-color: $disable-background-color;\n }\n }\n}\n\n.dropdown-list {\n position: absolute;\n padding-top: 6px;\n width: 100%;\n z-index: 9999;\n border: 1px solid #ccc;\n border-radius: 3px;\n background: #fff;\n margin-top: 10px;\n box-shadow: 0px 1px 5px #959595;\n ul {\n padding: 0px;\n list-style: none;\n overflow: auto;\n margin: 0px;\n }\n li {\n padding: 6px 10px;\n cursor: pointer;\n text-align: left;\n }\n .filter-textbox {\n border-bottom: 1px solid #ccc;\n position: relative;\n padding: 10px;\n input {\n border: 0px;\n width: 100%;\n padding: 0px 0px 0px 26px;\n }\n input:focus {\n outline: none;\n }\n }\n}\n\n.multiselect-item-checkbox input[type='checkbox'] {\n border: 0;\n clip: rect(0 0 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n width: 1px;\n}\n\n.multiselect-item-checkbox input[type='checkbox']:focus + div:before,\n.multiselect-item-checkbox input[type='checkbox']:hover + div:before {\n border-color: $base-color;\n background-color: #f2f2f2;\n}\n\n.multiselect-item-checkbox input[type='checkbox']:active + div:before {\n transition-duration: 0s;\n}\n\n.multiselect-item-checkbox input[type='checkbox'] + div {\n position: relative;\n padding-left: 2em;\n vertical-align: middle;\n user-select: none;\n cursor: pointer;\n margin: 0px;\n color: #000;\n}\n\n.multiselect-item-checkbox input[type='checkbox'] + div:before {\n box-sizing: content-box;\n content: '';\n color: $base-color;\n position: absolute;\n top: 50%;\n left: 0;\n width: 14px;\n height: 14px;\n margin-top: -9px;\n border: 2px solid $base-color;\n text-align: center;\n transition: all 0.4s ease;\n}\n\n.multiselect-item-checkbox input[type='checkbox'] + div:after {\n box-sizing: content-box;\n content: '';\n background-color: $base-color;\n position: absolute;\n top: 50%;\n left: 4px;\n width: 10px;\n height: 10px;\n margin-top: -5px;\n transform: scale(0);\n transform-origin: 50%;\n transition: transform 200ms ease-out;\n}\n\n.multiselect-item-checkbox input[type='checkbox']:disabled + div:before {\n border-color: #cccccc;\n}\n\n.multiselect-item-checkbox\n input[type='checkbox']:disabled:focus\n + div:before\n .multiselect-item-checkbox\n input[type='checkbox']:disabled:hover\n + div:before {\n background-color: inherit;\n}\n\n.multiselect-item-checkbox\n input[type='checkbox']:disabled:checked\n + div:before {\n background-color: #cccccc;\n}\n\n.multiselect-item-checkbox input[type='checkbox'] + div:after {\n background-color: transparent;\n top: 50%;\n left: 4px;\n width: 8px;\n height: 3px;\n margin-top: -4px;\n border-style: solid;\n border-color: #ffffff;\n border-width: 0 0 3px 3px;\n border-image: none;\n transform: rotate(-45deg) scale(0);\n}\n\n.multiselect-item-checkbox input[type='checkbox']:checked + div:after {\n content: '';\n transform: rotate(-45deg) scale(1);\n transition: transform 200ms ease-out;\n}\n\n.multiselect-item-checkbox input[type='checkbox']:checked + div:before {\n animation: borderscale 200ms ease-in;\n background: $base-color;\n}\n\n.multiselect-item-checkbox input[type='checkbox']:checked + div:after {\n transform: rotate(-45deg) scale(1);\n}\n\n@keyframes borderscale {\n 50% {\n box-shadow: 0 0 0 2px $base-color;\n }\n}" }, { "path": "ng-package.json", "content": "{\n \"dest\": \"dist-lib\",\n \"lib\": {\n \"entryFile\": \"src/ng-multiselect-dropdown/src/public_api.ts\"\n }\n}" }, { "path": "package-lib-template.json", "content": "{\n \"name\": \"ng-multiselect-dropdown\",\n \"version\": \"0.1.0\",\n \"description\": \"Angular Multi-Select Dropdown\",\n \"keywords\": [\n \"angular2\",\n \"angular4\",\n \"angular multiselect dropdown\",\n \"angular2 multiselect dropdown\",\n \"angular4 multiselect dropdown\",\n \"ng2 multiselect dropdown\",\n \"ng4 multiselect dropdown\"\n ],\n \"author\": \"Nilesh Patel\",\n \"license\": \"MIT\",\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"git+ssh://git@github.com/nileshpatel17/ng-multiselect-dropdown.git\"\n },\n \"bugs\": {\n \"url\": \"https://github.com/nileshpatel17/ng-multiselect-dropdown/issues\"\n },\n \"homepage\": \"nileshpatel17/ng-multiselect-dropdown#readme\",\n \"peerDependencies\": {\n \"@angular/common\": \"^2.3.1 || >=4.0.0\",\n \"@angular/core\": \"^2.3.1 || >=4.0.0\",\n \"@angular/forms\": \"^2.3.1 || >=4.0.0\"\n }\n}\n" }, { "path": "package.json", "content": "{\n \"name\": \"ng-multiselect-dropdown\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"description\": \"Angular Multi-Select Dropdown\",\n \"author\": \"Nilesh Patel\",\n \"license\": \"MIT\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve --port 4201\",\n \"build\": \"ng build\",\n \"ng:test\": \"ng test\",\n \"lint\": \"ng lint\",\n \"test\": \"jest --watch\",\n \"test:ci\": \"jest --runInBand\",\n \"test:coverage\": \"jest --coverage\",\n \"build:prod\": \"ng build --prod --base-href https://nileshpatel17.github.io/ng-multiselect-dropdown/\",\n \"clear:lib\": \"rimraf dist-lib\",\n \"postcopyfiles\": \"copyfiles -u 1 ./dist-lib/**/*.* node_modules/ng-multiselect-dropdown\",\n \"copyfiles\": \"mkdir dist-lib/themes && copyfiles ng-multiselect-dropdown.theme.scss dist-lib/themes\",\n \"build:lib\": \"npm run clear:lib && ng-packagr -p ng-package.json\",\n \"postbuild:lib\": \"npm run copyfiles\",\n \"prepublish\": \"npm run build:prod\",\n \"publish\": \"ngh --no-silent false --name=\\\"nileshpatel17\\\" --email=\\\"nilesh.nvs@hotmail.com\\\"\",\n \"deploy\": \"ng build --prod --base-href /ng-multiselect-dropdown/ && npm run deployOnly\",\n \"deployOnly\": \"angular-cli-ghpages --no-silent --repo=https://github.com/NileshPatel17/ng-multiselect-dropdown.git --name=\\\"Nilesh Patel\\\" --email=nilesh.nvs@hotmail.com\",\n \"contributors:add\": \"all-contributors add\",\n \"contributors:generate\": \"all-contributors generate\"\n },\n \"keywords\": [\n \"angular4\",\n \"angular8\",\n \"angular multiselect dropdown\",\n \"angular4 multiselect dropdown\",\n \"angular8 multiselect dropdown\",\n \"ng multiselect dropdown\",\n \"ng4 multiselect dropdown\",\n \"ng8 multiselect dropdown\"\n ],\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/nileshpatel17/ng-multiselect-dropdown.git\"\n },\n \"bugs\": {\n \"url\": \"https://github.com/nileshpatel17/ng-multiselect-dropdown/issues\"\n },\n \"homepage\": \"https://github.com/nileshpatel17/ng-multiselect-dropdown#readme\",\n \"peerDependencies\": {},\n \"devDependencies\": {\n \"@angular-devkit/build-angular\": \"~16.1.6\",\n \"@angular/animations\": \"16.1.7\",\n \"@angular/cli\": \"^16.1.6\",\n \"@angular/common\": \"16.1.7\",\n \"@angular/compiler\": \"16.1.7\",\n \"@angular/compiler-cli\": \"16.1.7\",\n \"@angular/core\": \"16.1.7\",\n \"@angular/forms\": \"16.1.7\",\n \"@angular/http\": \"7.2.15\",\n \"@angular/language-service\": \"16.1.7\",\n \"@angular/platform-browser\": \"16.1.7\",\n \"@angular/platform-browser-dynamic\": \"16.1.7\",\n \"@angular/router\": \"16.1.7\",\n \"@types/jasmine\": \"~3.4.0\",\n \"@types/jasminewd2\": \"~2.0.2\",\n \"@types/node\": \"^12.11.1\",\n \"angular-cli-ghpages\": \"^0.6.0-rc.2\",\n \"angular2-markdown\": \"^2.2.3\",\n \"codelyzer\": \"^5.1.2\",\n \"copyfiles\": \"^2.0.0\",\n \"core-js\": \"^3.2.1\",\n \"jasmine-core\": \"~3.5.0\",\n \"jasmine-spec-reporter\": \"~5.0.0\",\n \"jest\": \"^29.6.2\",\n \"jest-preset-angular\": \"^7.1.1\",\n \"karma\": \"~6.4.2\",\n \"karma-chrome-launcher\": \"~3.1.0\",\n \"karma-cli\": \"~2.0.0\",\n \"karma-coverage-istanbul-reporter\": \"~3.0.2\",\n \"karma-jasmine\": \"~4.0.0\",\n \"karma-jasmine-html-reporter\": \"^1.5.0\",\n \"ng-multiselect-dropdown\": \"^0.2.11\",\n \"ng-packagr\": \"^16.1.0\",\n \"ngx-bootstrap\": \"^5.1.1\",\n \"protractor\": \"~7.0.0\",\n \"rimraf\": \"^3.0.0\",\n \"rxjs\": \"^6.2.1\",\n \"rxjs-compat\": \"^6.2.1\",\n \"ts-node\": \"~8.3.0\",\n \"tslint\": \"~6.1.0\",\n \"typescript\": \"4.9.5\",\n \"zone.js\": \"~0.13.1\"\n },\n \"dependencies\": {\n \"tslib\": \"^2.0.0\"\n }\n}" }, { "path": "protractor.conf.js", "content": "// Protractor configuration file, see link for more information\n// https://github.com/angular/protractor/blob/master/lib/config.ts\n\nconst { SpecReporter } = require('jasmine-spec-reporter');\n\nexports.config = {\n allScriptsTimeout: 11000,\n specs: [\n './e2e/**/*.e2e-spec.ts'\n ],\n capabilities: {\n 'browserName': 'chrome'\n },\n directConnect: true,\n baseUrl: 'http://localhost:4200/',\n framework: 'jasmine',\n jasmineNodeOpts: {\n showColors: true,\n defaultTimeoutInterval: 30000,\n print: function() {}\n },\n onPrepare() {\n require('ts-node').register({\n project: 'e2e/tsconfig.e2e.json'\n });\n jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));\n }\n};\n" }, { "path": "publish-package.md", "content": "## step to publish\n\n1. yarn build:lib\n2. navigate to dist-lib folder\n3. mark private to false\n4. login to npm registry (npm login)\n5. yarn publish\n6. yarn deployOnly\n\n## Angular Multiselect Dropdown\n\n[![npm version](https://img.shields.io/npm/v/ng-multiselect-dropdown.svg)](https://www.npmjs.com/package/ng-multiselect-dropdown)\n[![downloads](https://img.shields.io/npm/dt/ng-multiselect-dropdown.svg)](https://www.npmjs.com/package/ng-multiselect-dropdown)\n[![npm](https://img.shields.io/npm/dm/localeval.svg)](https://www.npmjs.com/package/ng-multiselect-dropdown)\n[![npm](https://img.shields.io/npm/dw/localeval.svg)](https://www.npmjs.com/package/ng-multiselect-dropdown)\n" }, { "path": "src/app/app.component.html", "content": "
\n
\n

ng-multiselect-dropdown

\n

Native Angular component for Multiple Select

\n View on GitHub\n
\n \n \n
\n
\n
\n\n
\n \n
\n\n
\n
\n
\n
\n" }, { "path": "src/app/app.component.scss", "content": "" }, { "path": "src/app/app.component.ts", "content": "import { Component, OnInit } from '@angular/core';\n\n@Component({\n selector: 'app-root',\n templateUrl: './app.component.html',\n styleUrls: ['./app.component.scss']\n})\nexport class AppComponent implements OnInit {\n\n ngOnInit() {\n\n }\n}\n" }, { "path": "src/app/app.module.ts", "content": "import { NgModule } from '@angular/core';\nimport { FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport { BrowserModule } from '@angular/platform-browser';\n\nimport { TabsModule } from 'ngx-bootstrap/tabs';\nimport { ButtonsModule } from 'ngx-bootstrap/buttons';\nimport { NgMultiSelectDropDownModule } from '../ng-multiselect-dropdown/src';\n// import { NgMultiSelectDropDownModule } from 'ng-multiselect-dropdown';\n\nimport { SelectSectionComponent } from './components/select-section';\nimport { SampleSectionComponent } from './components/sample-section.component';\nimport { SingleDemoComponent } from './components/select/single-demo';\nimport { MultipleDemoComponent } from './components/select/multiple-demo';\nimport { ShCodeViewer } from '../code-viewer/code-viewer.module';\n\nimport { AppComponent } from './app.component';\n\n@NgModule({\n declarations: [SelectSectionComponent, SampleSectionComponent, SingleDemoComponent, MultipleDemoComponent, AppComponent],\n imports: [\n FormsModule,\n ReactiveFormsModule,\n BrowserModule,\n TabsModule.forRoot(),\n ButtonsModule.forRoot(),\n NgMultiSelectDropDownModule.forRoot(),\n ShCodeViewer\n ],\n providers: [],\n bootstrap: [AppComponent]\n})\nexport class AppModule {}\n" }, { "path": "src/app/components/sample-section.component.html", "content": "\n\n" }, { "path": "src/app/components/sample-section.component.ts", "content": "import { Component, Input } from '@angular/core';\n\n@Component({\n selector: 'sample-section',\n templateUrl: './sample-section.component.html'\n})\nexport class SampleSectionComponent{\n @Input() public desc: any;\n}\n" }, { "path": "src/app/components/select/multiple-demo.html", "content": "
\n
\n
\n

Select Multiple Cities

\n
\n \n \n
\n

\n
\n
\n

Option

\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n
\n
\n
Settings
\n
\n 
\n       {{dropdownSettings | json}}\n
\n
\n
\n \n \n \n \n \n \n \n \n
\n" }, { "path": "src/app/components/select/multiple-demo.ts", "content": "import { FormBuilder, FormGroup } from '@angular/forms';\nimport { Component, OnInit } from '@angular/core';\nimport { IDropdownSettings } from '../../../ng-multiselect-dropdown/src';\n\n@Component({\n selector: 'multiple-demo',\n templateUrl: './multiple-demo.html'\n})\nexport class MultipleDemoComponent implements OnInit {\n myForm: FormGroup;\n disabled = false;\n ShowFilter = true;\n showAll = true;\n limitSelection = false;\n limitShow = false;\n disableBangalore = true;\n cities: Array = [];\n selectedItems: Array = [];\n dropdownSettings: IDropdownSettings = {};\n htmlCode = `\n <form [formGroup]=\"myForm\">\n <ng-multiselect-dropdown\n name=\"city\"\n [placeholder]=\"'Select City'\"\n [data]=\"cities\"\n formControlName=\"city\"\n [disabled]=\"disabled\"\n [settings]=\"dropdownSettings\"\n (onSelect)=\"onItemSelect($event)\"\n (onDeSelect)=\"onItemDeSelect($event)\">\n </ng-multiselect-dropdown>\n </form>\n`;\n typescriptCode = `\n import { FormBuilder, FormGroup } from '@angular/forms';\n import { Component, OnInit } from '@angular/core';\n\n @Component({\n selector: 'multiple-demo',\n templateUrl: './multiple-demo.html'\n })\n export class MultipleDemoComponent implements OnInit {\n myForm:FormGroup;\n disabled = false;\n ShowFilter = false;\n limitSelection = false;\n limitShow = false;\n cities: Array = [];\n selectedItems: Array = [];\n dropdownSettings: any = {};\n constructor(private fb: FormBuilder) {}\n\n ngOnInit() {\n this.cities = [\n { item_id: 1, item_text: 'New Delhi' },\n { item_id: 2, item_text: 'Mumbai' },\n { item_id: 3, item_text: 'Bangalore' },\n { item_id: 4, item_text: 'Pune' },\n { item_id: 5, item_text: 'Chennai' },\n { item_id: 6, item_text: 'Navsari' }\n ];\n this.selectedItems = [{ item_id: 4, item_text: 'Pune' }, { item_id: 6, item_text: 'Navsari' }];\n this.dropdownSettings = {\n singleSelection: false,\n idField: 'item_id',\n textField: 'item_text',\n selectAllText: 'Select All',\n unSelectAllText: 'UnSelect All',\n itemsShowLimit: 99999,\n allowSearchFilter: this.ShowFilter\n };\n this.myForm = this.fb.group({\n city: [this.selectedItems]\n });\n }\n\n onItemSelect(item: any) {\n console.log('onItemSelect', item);\n }\n onSelectAll(items: any) {\n console.log('onSelectAll', items);\n }\n toogleShowFilter() {\n this.ShowFilter = !this.ShowFilter;\n this.dropdownSettings = Object.assign({}, this.dropdownSettings, { allowSearchFilter: this.ShowFilter });\n }\n\n handleLimitSelection() {\n if (this.limitSelection) {\n this.dropdownSettings = Object.assign({}, this.dropdownSettings, { limitSelection: 2 });\n } else {\n this.dropdownSettings = Object.assign({}, this.dropdownSettings, { limitSelection: null });\n }\n }\n\n handleLimitShow() {\n if (this.limitShow) {\n this.dropdownSettings = Object.assign({}, this.dropdownSettings, {\n itemsShowLimit: 3\n });\n } else {\n this.dropdownSettings = Object.assign({}, this.dropdownSettings, {\n itemsShowLimit: 999999\n });\n }\n console.log()\n }\n }\n`;\n\n constructor(private fb: FormBuilder) {}\n\n ngOnInit() {\n this.cities = [\n { item_id: 1, item_text: 'New Delhi' },\n { item_id: 2, item_text: 'Mumbai' },\n { item_id: 3, item_text: 'Bangalore', isDisabled: this.disableBangalore },\n { item_id: 4, item_text: 'Pune' },\n { item_id: 5, item_text: 'Chennai' },\n { item_id: 6, item_text: 'Navsari' }\n ];\n this.selectedItems = [\n { item_id: 4, item_text: 'Pune' },\n { item_id: 6, item_text: 'Navsari' }\n ];\n this.dropdownSettings = {\n singleSelection: false,\n defaultOpen: false,\n idField: 'item_id',\n textField: 'item_text',\n selectAllText: 'Select All',\n unSelectAllText: 'UnSelect All',\n enableCheckAll: this.showAll,\n itemsShowLimit: 999999,\n allowSearchFilter: this.ShowFilter\n };\n this.myForm = this.fb.group({\n city: [this.selectedItems]\n });\n }\n\n onItemSelect(item: any) {\n console.log('onItemSelect', item);\n console.log('form model', this.myForm.get('city').value);\n }\n onItemDeSelect(item: any) {\n console.log('onItem DeSelect', item);\n console.log('form model', this.myForm.get('city').value);\n }\n\n onSelectAll(items: any) {\n console.log('onSelectAll', items);\n }\n\n onDropDownClose() {\n console.log('dropdown closed');\n }\n\n toogleShowAll() {\n this.showAll = !this.showAll;\n this.dropdownSettings = Object.assign({}, this.dropdownSettings, {\n enableCheckAll: this.showAll\n });\n }\n toogleShowFilter() {\n this.ShowFilter = !this.ShowFilter;\n this.dropdownSettings = Object.assign({}, this.dropdownSettings, {\n allowSearchFilter: this.ShowFilter\n });\n }\n\n handleLimitSelection() {\n if (this.limitSelection) {\n this.dropdownSettings = Object.assign({}, this.dropdownSettings, {\n limitSelection: 2\n });\n } else {\n this.dropdownSettings = Object.assign({}, this.dropdownSettings, {\n limitSelection: -1\n });\n }\n }\n\n handleLimitShow() {\n if (this.limitShow) {\n this.dropdownSettings = Object.assign({}, this.dropdownSettings, {\n itemsShowLimit: 3\n });\n } else {\n this.dropdownSettings = Object.assign({}, this.dropdownSettings, {\n itemsShowLimit: 999999\n });\n }\n console.log()\n }\n\n\n\n\n handleDisableBangalore() {\n this.cities[2].isDisabled = this.disableBangalore;\n this.cities = [...this.cities];\n }\n\n handleReset() {\n this.myForm.get('city').setValue([]);\n }\n}\n" }, { "path": "src/app/components/select/single-demo.html", "content": "
\n\n
\n
\n

Select a single city

\n
\n \n \n
\n
\n
\n

Option

\n
\n \n
\n
\n \n
\n
\n \n
\n
\n
\n

\n
\n
Settings
\n
\n 
\n        {{dropdownSettings | json}}\n
\n
\n
\n \n \n \n \n \n \n \n \n
\n" }, { "path": "src/app/components/select/single-demo.ts", "content": "import { Component, OnInit } from '@angular/core';\n\n@Component({\n selector: 'single-demo',\n templateUrl: './single-demo.html'\n})\nexport class SingleDemoComponent implements OnInit {\n cities: Array = [];\n selectedItem: Array = [];\n dropdownSettings: any = {};\n closeDropdownSelection = false;\n disabled = false;\n htmlCode = `\n <ng-multiselect-dropdown\n name=\"city\"\n [data]=\"cities\"\n [(ngModel)]=\"selectedItem\"\n [settings]=\"dropdownSettings\"\n (onSelect)=\"onItemSelect($event)\"\n [disabled]=\"disabled\"\n </ng-multiselect-dropdown>\n`;\n typescriptCode = `\n import { Component, OnInit } from '@angular/core';\n\n @Component({\n selector: 'single-demo',\n templateUrl: './single-demo.html'\n })\n export class SingleDemoComponent implements OnInit {\n cities: Array = [];\n selectedItem: Array = [];\n dropdownSettings: any = {};\n closeDropdownSelection=false;\n disabled=false;\n\n ngOnInit() {\n this.cities = ['Mumbai', 'New Delhi', 'Bangaluru', 'Pune', 'Navsari'];\n this.selectedItem = ['Pune'];\n this.dropdownSettings = {\n singleSelection: true,\n selectAllText: 'Select All',\n unSelectAllText: 'UnSelect All',\n allowSearchFilter: true,\n closeDropDownOnSelection: this.closeDropdownSelection\n };\n }\n\n onItemSelect(item: any) {\n console.log('onItemSelect', item);\n }\n\n toggleCloseDropdownSelection() {\n this.closeDropdownSelection = !this.closeDropdownSelection;\n this.dropdownSettings = Object.assign({}, this.dropdownSettings,{closeDropDownOnSelection: this.closeDropdownSelection});\n }\n\n }\n`;\n\n ngOnInit() {\n this.cities = ['Mumbai', 'New Delhi', 'Bangaluru', 'Pune', 'Navsari'];\n\n this.dropdownSettings = {\n singleSelection: true,\n selectAllText: 'Select All',\n unSelectAllText: 'UnSelect All',\n allowSearchFilter: true,\n closeDropDownOnSelection: this.closeDropdownSelection\n };\n this.selectedItem = ['Mumbai'];\n }\n\n onItemSelect(item: any) {\n console.log('onItemSelect', item);\n console.log('selectedItem', this.selectedItem);\n }\n\n toggleCloseDropdownSelection() {\n this.closeDropdownSelection = !this.closeDropdownSelection;\n this.dropdownSettings = Object.assign({}, this.dropdownSettings, { closeDropDownOnSelection: this.closeDropdownSelection });\n }\n\n handleReset() {\n this.selectedItem = [];\n }\n}\n" }, { "path": "src/app/components/select-section.ts", "content": "import { Component } from '@angular/core';\n\nconst tabDesc: any = {\n single: {\n heading: 'Single'\n }\n ,\n multiple1: {\n heading: 'Multiple-Example1'\n }\n};\n\n@Component({\n selector: 'select-section',\n template: `\n
\n
\n
\n \n \n \n \n \n \n \n \n
\n
\n
\n `\n})\nexport class SelectSectionComponent {\n public currentHeading = 'Single';\n public tabDesc: any = tabDesc;\n}\n" }, { "path": "src/app/index.ts", "content": "export * from './app.component';\nexport * from './app.module';\n" }, { "path": "src/assets/.gitkeep", "content": "" }, { "path": "src/code-viewer/code-viewer.module.ts", "content": "import {NgModule, ModuleWithProviders} from '@angular/core';\nimport {CommonModule} from '@angular/common';\nimport {CodeViewerComponent} from './code-viewer';\n\n@NgModule({\n imports: [\n CommonModule\n ],\n declarations: [\n CodeViewerComponent\n ],\n exports: [CodeViewerComponent]\n})\nexport class ShCodeViewer {\n static forRoot(): ModuleWithProviders {\n return {\n ngModule: ShCodeViewer,\n providers: []\n };\n }\n}\n" }, { "path": "src/code-viewer/code-viewer.ts", "content": "import { ElementRef, Input, OnInit, OnChanges, Component, ViewEncapsulation, ViewChild, AfterViewChecked, SimpleChanges } from '@angular/core';\n\ndeclare let hljs: any;\n\n@Component({\n selector: 'sh-code-viewer',\n template: `\n 
\n        \n
\n`,\n encapsulation: ViewEncapsulation.None,\n styles: [\n `\npre{\npadding: 0;\nmargin: 0;\n}\ncode{\nmargin: 0;\npadding-top: 0;\n}\n/*\n\nMonokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-license.org/\n\n*/\n\n.hljs {\n display: block;\n overflow-x: auto;\n padding: 0.5em;\n background: #23241f;\n}\n\n.hljs,\n.hljs-tag,\n.hljs-subst {\n color: #f8f8f2;\n}\n\n.hljs-strong,\n.hljs-emphasis {\n color: #a8a8a2;\n}\n\n.hljs-bullet,\n.hljs-quote,\n.hljs-number,\n.hljs-regexp,\n.hljs-literal,\n.hljs-link {\n color: #ae81ff;\n}\n\n.hljs-code,\n.hljs-title,\n.hljs-section,\n.hljs-selector-class {\n color: #a6e22e;\n}\n\n.hljs-strong {\n font-weight: bold;\n}\n\n.hljs-emphasis {\n font-style: italic;\n}\n\n.hljs-keyword,\n.hljs-selector-tag,\n.hljs-name,\n.hljs-attr {\n color: #f92672;\n}\n\n.hljs-symbol,\n.hljs-attribute {\n color: #66d9ef;\n}\n\n.hljs-params,\n.hljs-class .hljs-title {\n color: #f8f8f2;\n}\n\n.hljs-string,\n.hljs-type,\n.hljs-built_in,\n.hljs-builtin-name,\n.hljs-selector-id,\n.hljs-selector-attr,\n.hljs-selector-pseudo,\n.hljs-addition,\n.hljs-variable,\n.hljs-template-variable {\n color: #e6db74;\n}\n\n.hljs-comment,\n.hljs-deletion,\n.hljs-meta {\n color: #75715e;\n}\n`\n ]\n})\nexport class CodeViewerComponent implements OnInit, OnChanges, AfterViewChecked {\n @Input() useBr: boolean;\n @Input() code: string;\n @Input() language: string;\n @ViewChild('codeView') codeView: ElementRef;\n private needUpdate: boolean;\n\n constructor(private elementRef: ElementRef) {}\n\n ngOnInit() {\n if (this.useBr) {\n hljs.configure({ useBR: true });\n }\n }\n\n ngOnChanges(changes: SimpleChanges) {\n if (changes['code'] && changes['code'].currentValue) {\n this.needUpdate = true;\n }\n }\n\n ngAfterViewChecked() {\n if (!this.needUpdate) {\n return;\n }\n this.needUpdate = false;\n\n if (this.codeView.nativeElement.innerHTML) {\n hljs.highlightBlock(this.codeView.nativeElement);\n }\n }\n}\n" }, { "path": "src/environments/environment.prod.ts", "content": "export const environment = {\n production: true\n};\n" }, { "path": "src/environments/environment.ts", "content": "// The file contents for the current environment will overwrite these during build.\n// The build system defaults to the dev environment which uses `environment.ts`, but if you do\n// `ng build --env=prod` then `environment.prod.ts` will be used instead.\n// The list of which env maps to which file can be found in `.angular-cli.json`.\n\nexport const environment = {\n production: false\n};\n" }, { "path": "src/index.html", "content": "\n\n\n\n \n Angular Multi-Select Dropdown\n \n \n \n \n \n \n \n \n \n \n\n\n\n \n \n

LOADING..

\n \n \n \n \n\n\n\n" }, { "path": "src/jest-global-mocks.ts", "content": "// @ts-ignore\nglobal.CSS = null;\n\nconst webStorageMock = () => {\n let storage: Record = {};\n return {\n getItem: (key: string) => (key in storage ? storage[key] : null),\n setItem: (key: string, value: any) => (storage[key] = value || ''),\n removeItem: (key: string) => delete storage[key],\n clear: () => (storage = {}),\n };\n};\n\nObject.defineProperty(window, 'localStorage', { value: webStorageMock() });\nObject.defineProperty(window, 'sessionStorage', { value: webStorageMock() });\nObject.defineProperty(document, 'doctype', {\n value: '',\n});\nObject.defineProperty(window, 'getComputedStyle', {\n value: () => {\n return {\n display: 'none',\n appearance: ['-webkit-appearance'],\n };\n },\n});\n/**\n * ISSUE: https://github.com/angular/material2/issues/7101\n * Workaround for JSDOM missing transform property\n */\nObject.defineProperty(document.body.style, 'transform', {\n value: () => {\n return {\n enumerable: true,\n configurable: true,\n };\n },\n});" }, { "path": "src/main.ts", "content": "import { enableProdMode } from '@angular/core';\nimport { platformBrowserDynamic } from '@angular/platform-browser-dynamic';\n\nimport { AppModule } from './app/app.module';\nimport { environment } from './environments/environment';\n\nif (environment.production) {\n enableProdMode();\n}\n\nplatformBrowserDynamic().bootstrapModule(AppModule);\n" }, { "path": "src/ng-multiselect-dropdown/src/click-outside.directive.ts", "content": "import {Directive, ElementRef, Output, EventEmitter, HostListener} from '@angular/core';\n\n@Directive({\n selector: '[clickOutside]'\n})\nexport class ClickOutsideDirective {\n constructor(private _elementRef: ElementRef) {\n }\n\n @Output()\n public clickOutside = new EventEmitter();\n\n @HostListener('document:click', ['$event', '$event.target'])\n public onClick(event: MouseEvent, targetElement: HTMLElement): void {\n if (!targetElement) {\n return;\n }\n\n const clickedInside = this._elementRef.nativeElement.contains(targetElement);\n if (!clickedInside) {\n this.clickOutside.emit(event);\n }\n }\n}\n" }, { "path": "src/ng-multiselect-dropdown/src/index.ts", "content": "export { MultiSelectComponent } from './multiselect.component';\nexport { ClickOutsideDirective } from './click-outside.directive';\nexport { ListFilterPipe } from './list-filter.pipe';\nexport { NgMultiSelectDropDownModule } from './ng-multiselect-dropdown.module';\nexport { IDropdownSettings } from './multiselect.model'" }, { "path": "src/ng-multiselect-dropdown/src/list-filter.pipe.ts", "content": "import { Pipe, PipeTransform } from '@angular/core';\n\nimport { ListItem } from './multiselect.model';\n\n@Pipe({\n name: 'multiSelectFilter',\n pure: false\n})\nexport class ListFilterPipe implements PipeTransform {\n transform(items: ListItem[], filter: ListItem): ListItem[] {\n if (!items || !filter) {\n return items;\n }\n return items.filter((item: ListItem) => this.applyFilter(item, filter));\n }\n\n applyFilter(item: ListItem, filter: ListItem): boolean {\n if (typeof item.text === 'string' && typeof filter.text === 'string') {\n return !(filter.text && item.text && item.text.toLowerCase().indexOf(filter.text.toLowerCase()) === -1);\n } else {\n return !(filter.text && item.text && item.text.toString().toLowerCase().indexOf(filter.text.toString().toLowerCase()) === -1);\n }\n }\n}\n" }, { "path": "src/ng-multiselect-dropdown/src/multi-select.component.html", "content": "
\n
\n \n {{_placeholder}}\n \n (this._settings.itemsShowLimit-1)\">\n {{item.text}} \n x\n \n \n \n \n 0\">+{{itemShowRemaining()}}\n \n \n \n
\n
\n
    \n
  • 0 || _settings.allowRemoteDataSearch) && !_settings.singleSelection && _settings.enableCheckAll && _settings.limitSelection===-1\" class=\"multiselect-item-checkbox\" style=\"border-bottom: 1px solid #ccc;padding:10px\">\n \n
    {{!isAllItemsSelected() ? _settings.selectAllText : _settings.unSelectAllText}}
    \n
    • \n
  • 0 || _settings.allowRemoteDataSearch) && _settings.allowSearchFilter\">\n \n
    • \n
\n
    \n
  • \n \n
    {{item.text}}
    \n
    • \n
  • \n
    {{_settings.noFilteredDataAvailablePlaceholderText}}
    \n
    • \n
  • \n
    {{_settings.noDataAvailablePlaceholderText}}
    \n
    • \n
\n
\n
\n" }, { "path": "src/ng-multiselect-dropdown/src/multi-select.component.scss", "content": "$base-color: #337ab7;\n$disable-background-color: #eceeef;\n.multiselect-dropdown {\n position: relative;\n width: 100%;\n font-size: inherit;\n font-family: inherit;\n .dropdown-btn {\n display: inline-block;\n border: 1px solid #adadad;\n width: 100%;\n padding: 6px 12px;\n margin-bottom: 0;\n font-weight: normal;\n line-height: 1.52857143;\n text-align: left;\n vertical-align: middle;\n cursor: pointer;\n background-image: none;\n border-radius: 4px;\n .selected-item-container {\n display: flex;\n float: left;\n .selected-item{\n border: 1px solid $base-color;\n margin-right: 4px;\n background: $base-color;\n padding: 0px 5px;\n color: #fff;\n border-radius: 2px;\n float: left; \n max-width: 100px; \n span {\n overflow: hidden;\n text-overflow: ellipsis;\n }\n a {\n text-decoration: none;\n }\n }\n }\n .selected-item:hover {\n box-shadow: 1px 1px #959595;\n }\n .dropdown-multiselect__caret {\n line-height: 16px;\n display: block;\n position: absolute;\n box-sizing: border-box;\n width: 40px;\n height: 38px;\n right: 1px;\n top: 0px;\n padding: 4px 8px;\n margin: 0;\n text-decoration: none;\n text-align: center;\n cursor: pointer;\n transition: transform 0.2s ease;\n }\n .dropdown-multiselect__caret:before {\n position: relative;\n right: 0;\n top: 65%;\n color: #999;\n margin-top: 4px;\n border-style: solid;\n border-width: 8px 8px 0 8px;\n border-color: #999999 transparent;\n content: \"\";\n }\n .dropdown-multiselect--active .dropdown-multiselect__caret {\n transform: rotateZ(180deg);\n }\n }\n .disabled {\n & > span {\n background-color: $disable-background-color;\n }\n }\n}\n\n.dropdown-list {\n position: absolute;\n padding-top: 6px;\n width: 100%;\n z-index: 9999;\n border: 1px solid #ccc;\n border-radius: 3px;\n background: #fff;\n margin-top: 10px;\n box-shadow: 0px 1px 5px #959595;\n ul {\n padding: 0px;\n list-style: none;\n overflow: auto;\n margin: 0px;\n }\n li {\n padding: 6px 10px;\n cursor: pointer;\n text-align: left;\n }\n .filter-textbox {\n border-bottom: 1px solid #ccc;\n position: relative;\n padding: 10px;\n input {\n border: 0px;\n width: 100%;\n padding: 0px 0px 0px 26px;\n }\n input:focus {\n outline: none;\n }\n }\n}\n\n.multiselect-item-checkbox:hover{\n background-color: #e4e3e3;\n}\n.multiselect-item-checkbox input[type='checkbox'] {\n border: 0;\n clip: rect(0 0 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n width: 1px;\n}\n\n.multiselect-item-checkbox input[type='checkbox']:focus + div:before,\n.multiselect-item-checkbox input[type='checkbox']:hover + div:before {\n border-color: $base-color;\n background-color: #f2f2f2;\n}\n\n.multiselect-item-checkbox input[type='checkbox']:active + div:before {\n transition-duration: 0s;\n}\n\n.multiselect-item-checkbox input[type='checkbox'] + div {\n position: relative;\n padding-left: 2em;\n vertical-align: middle;\n user-select: none;\n cursor: pointer;\n margin: 0px;\n color: #000;\n}\n\n.multiselect-item-checkbox input[type='checkbox'] + div:before {\n box-sizing: content-box;\n content: '';\n color: $base-color;\n position: absolute;\n top: 50%;\n left: 0;\n width: 14px;\n height: 14px;\n margin-top: -9px;\n border: 2px solid $base-color;\n text-align: center;\n transition: all 0.4s ease;\n}\n\n.multiselect-item-checkbox input[type='checkbox'] + div:after {\n box-sizing: content-box;\n content: '';\n background-color: $base-color;\n position: absolute;\n top: 50%;\n left: 4px;\n width: 10px;\n height: 10px;\n margin-top: -5px;\n transform: scale(0);\n transform-origin: 50%;\n transition: transform 200ms ease-out;\n}\n\n.multiselect-item-checkbox input[type='checkbox']:disabled + div:before {\n border-color: #cccccc;\n}\n\n.multiselect-item-checkbox\n input[type='checkbox']:disabled:focus\n + div:before\n .multiselect-item-checkbox\n input[type='checkbox']:disabled:hover\n + div:before {\n background-color: inherit;\n}\n\n.multiselect-item-checkbox\n input[type='checkbox']:disabled:checked\n + div:before {\n background-color: #cccccc;\n}\n\n.multiselect-item-checkbox input[type='checkbox'] + div:after {\n background-color: transparent;\n top: 50%;\n left: 4px;\n width: 8px;\n height: 3px;\n margin-top: -4px;\n border-style: solid;\n border-color: #ffffff;\n border-width: 0 0 3px 3px;\n border-image: none;\n transform: rotate(-45deg) scale(0);\n}\n\n.multiselect-item-checkbox input[type='checkbox']:checked + div:after {\n content: '';\n transform: rotate(-45deg) scale(1);\n transition: transform 200ms ease-out;\n}\n\n.multiselect-item-checkbox input[type='checkbox']:checked + div:before {\n animation: borderscale 200ms ease-in;\n background: $base-color;\n}\n\n.multiselect-item-checkbox input[type='checkbox']:checked + div:after {\n transform: rotate(-45deg) scale(1);\n}\n\n@keyframes borderscale {\n 50% {\n box-shadow: 0 0 0 2px $base-color;\n }\n}\n" }, { "path": "src/ng-multiselect-dropdown/src/multiselect.component.ts", "content": "import { Component, HostListener, forwardRef, Input, Output, EventEmitter, ChangeDetectionStrategy, ChangeDetectorRef } from \"@angular/core\";\nimport { NG_VALUE_ACCESSOR, ControlValueAccessor } from \"@angular/forms\";\nimport { ListItem, IDropdownSettings } from \"./multiselect.model\";\nimport { ListFilterPipe } from \"./list-filter.pipe\";\n\nexport const DROPDOWN_CONTROL_VALUE_ACCESSOR: any = {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => MultiSelectComponent),\n multi: true\n};\nconst noop = () => {};\n\n@Component({\n selector: \"ng-multiselect-dropdown\",\n templateUrl: \"./multi-select.component.html\",\n styleUrls: [\"./multi-select.component.scss\"],\n providers: [DROPDOWN_CONTROL_VALUE_ACCESSOR],\n changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class MultiSelectComponent implements ControlValueAccessor {\n public _settings: IDropdownSettings;\n public _data: Array = [];\n public selectedItems: Array = [];\n public isDropdownOpen = true;\n _placeholder = \"Select\";\n private _sourceDataType = null; // to keep note of the source data type. could be array of string/number/object\n private _sourceDataFields: Array = []; // store source data fields names\n filter: ListItem = new ListItem(this.data);\n defaultSettings: IDropdownSettings = {\n singleSelection: false,\n idField: \"id\",\n textField: \"text\",\n disabledField: \"isDisabled\",\n enableCheckAll: true,\n selectAllText: \"Select All\",\n unSelectAllText: \"UnSelect All\",\n allowSearchFilter: false,\n limitSelection: -1,\n clearSearchFilter: true,\n maxHeight: 197,\n itemsShowLimit: 999999999999,\n searchPlaceholderText: \"Search\",\n noDataAvailablePlaceholderText: \"No data available\",\n noFilteredDataAvailablePlaceholderText: \"No filtered data available\",\n closeDropDownOnSelection: false,\n showSelectedItemsAtTop: false,\n defaultOpen: false,\n allowRemoteDataSearch: false\n };\n\n @Input()\n public set placeholder(value: string) {\n if (value) {\n this._placeholder = value;\n } else {\n this._placeholder = \"Select\";\n }\n }\n @Input()\n disabled = false;\n\n @Input()\n public set settings(value: IDropdownSettings) {\n if (value) {\n this._settings = Object.assign(this.defaultSettings, value);\n } else {\n this._settings = Object.assign(this.defaultSettings);\n }\n }\n\n @Input()\n public set data(value: Array) {\n if (!value) {\n this._data = [];\n } else {\n const firstItem = value[0];\n this._sourceDataType = typeof firstItem;\n this._sourceDataFields = this.getFields(firstItem);\n this._data = value.map((item: any) =>\n typeof item === \"string\" || typeof item === \"number\"\n ? new ListItem(item)\n : new ListItem({\n id: item[this._settings.idField],\n text: item[this._settings.textField],\n isDisabled: item[this._settings.disabledField]\n })\n );\n }\n }\n\n @Output(\"onFilterChange\")\n onFilterChange: EventEmitter = new EventEmitter();\n @Output(\"onDropDownClose\")\n onDropDownClose: EventEmitter = new EventEmitter();\n\n @Output(\"onSelect\")\n onSelect: EventEmitter = new EventEmitter();\n\n @Output(\"onDeSelect\")\n onDeSelect: EventEmitter = new EventEmitter();\n\n @Output(\"onSelectAll\")\n onSelectAll: EventEmitter> = new EventEmitter>();\n\n @Output(\"onDeSelectAll\")\n onDeSelectAll: EventEmitter> = new EventEmitter>();\n\n private onTouchedCallback: () => void = noop;\n private onChangeCallback: (_: any) => void = noop;\n\n onFilterTextChange($event) {\n this.onFilterChange.emit($event);\n }\n\n constructor(\n private listFilterPipe:ListFilterPipe,\n private cdr: ChangeDetectorRef\n ) {}\n\n onItemClick($event: any, item: ListItem) {\n if (this.disabled || item.isDisabled) {\n return false;\n }\n\n const found = this.isSelected(item);\n const allowAdd = this._settings.limitSelection === -1 || (this._settings.limitSelection > 0 && this.selectedItems.length < this._settings.limitSelection);\n if (!found) {\n if (allowAdd) {\n this.addSelected(item);\n }\n } else {\n this.removeSelected(item);\n }\n if (this._settings.singleSelection && this._settings.closeDropDownOnSelection) {\n this.closeDropdown();\n }\n }\n\n writeValue(value: any) {\n if (value !== undefined && value !== null && value.length > 0) {\n if (this._settings.singleSelection) {\n try {\n if (value.length >= 1) {\n const firstItem = value[0];\n this.selectedItems = [\n typeof firstItem === \"string\" || typeof firstItem === \"number\"\n ? new ListItem(firstItem)\n : new ListItem({\n id: firstItem[this._settings.idField],\n text: firstItem[this._settings.textField],\n isDisabled: firstItem[this._settings.disabledField]\n })\n ];\n }\n } catch (e) {\n // console.error(e.body.msg);\n }\n } else {\n const _data = value.map((item: any) =>\n typeof item === \"string\" || typeof item === \"number\"\n ? new ListItem(item)\n : new ListItem({\n id: item[this._settings.idField],\n text: item[this._settings.textField],\n isDisabled: item[this._settings.disabledField]\n })\n );\n if (this._settings.limitSelection > 0) {\n this.selectedItems = _data.splice(0, this._settings.limitSelection);\n } else {\n this.selectedItems = _data;\n }\n }\n } else {\n this.selectedItems = [];\n }\n this.onChangeCallback(value);\n\n this.cdr.markForCheck();\n }\n\n // From ControlValueAccessor interface\n registerOnChange(fn: any) {\n this.onChangeCallback = fn;\n }\n\n // From ControlValueAccessor interface\n registerOnTouched(fn: any) {\n this.onTouchedCallback = fn;\n }\n\n // Set touched on blur\n @HostListener(\"blur\")\n public onTouched() {\n // this.closeDropdown();\n this.onTouchedCallback();\n }\n\n trackByFn(index, item) {\n return item.id;\n }\n\n isSelected(clickedItem: ListItem) {\n let found = false;\n this.selectedItems.forEach(item => {\n if (clickedItem.id === item.id) {\n found = true;\n }\n });\n return found;\n }\n\n isLimitSelectionReached(): boolean {\n return this._settings.limitSelection === this.selectedItems.length;\n }\n\n isAllItemsSelected(): boolean {\n // get disabld item count\n let filteredItems = this.listFilterPipe.transform(this._data,this.filter);\n const itemDisabledCount = filteredItems.filter(item => item.isDisabled).length;\n // take disabled items into consideration when checking\n if ((!this.data || this.data.length === 0) && this._settings.allowRemoteDataSearch) {\n return false;\n }\n return filteredItems.length === this.selectedItems.length + itemDisabledCount;\n }\n\n showButton(): boolean {\n if (!this._settings.singleSelection) {\n if (this._settings.limitSelection > 0) {\n return false;\n }\n // this._settings.enableCheckAll = this._settings.limitSelection === -1 ? true : false;\n return true; // !this._settings.singleSelection && this._settings.enableCheckAll && this._data.length > 0;\n } else {\n // should be disabled in single selection mode\n return false;\n }\n }\n\n itemShowRemaining(): number {\n return this.selectedItems.length - this._settings.itemsShowLimit;\n }\n\n addSelected(item: ListItem) {\n if (this._settings.singleSelection) {\n this.selectedItems = [];\n this.selectedItems.push(item);\n } else {\n this.selectedItems.push(item);\n }\n this.onChangeCallback(this.emittedValue(this.selectedItems));\n this.onSelect.emit(this.emittedValue(item));\n }\n\n removeSelected(itemSel: ListItem) {\n this.selectedItems.forEach(item => {\n if (itemSel.id === item.id) {\n this.selectedItems.splice(this.selectedItems.indexOf(item), 1);\n }\n });\n this.onChangeCallback(this.emittedValue(this.selectedItems));\n this.onDeSelect.emit(this.emittedValue(itemSel));\n }\n\n emittedValue(val: any): any {\n const selected = [];\n if (Array.isArray(val)) {\n val.map(item => {\n selected.push(this.objectify(item));\n });\n } else {\n if (val) {\n return this.objectify(val);\n }\n }\n return selected;\n }\n\n objectify(val: ListItem) {\n if (this._sourceDataType === 'object') {\n const obj = {};\n obj[this._settings.idField] = val.id;\n obj[this._settings.textField] = val.text;\n if (this._sourceDataFields.includes(this._settings.disabledField)) {\n obj[this._settings.disabledField] = val.isDisabled;\n }\n return obj;\n }\n if (this._sourceDataType === 'number') {\n return Number(val.id);\n } else {\n return val.text;\n }\n }\n\n toggleDropdown(evt) {\n evt.preventDefault();\n if (this.disabled && this._settings.singleSelection) {\n return;\n }\n this._settings.defaultOpen = !this._settings.defaultOpen;\n if (!this._settings.defaultOpen) {\n this.onDropDownClose.emit();\n }\n }\n\n closeDropdown() {\n this._settings.defaultOpen = false;\n // clear search text\n if (this._settings.clearSearchFilter) {\n this.filter.text = \"\";\n }\n this.onDropDownClose.emit();\n }\n\n toggleSelectAll() {\n if (this.disabled) {\n return false;\n }\n if (!this.isAllItemsSelected()) {\n // filter out disabled item first before slicing\n this.selectedItems = this.listFilterPipe.transform(this._data,this.filter).filter(item => !item.isDisabled).slice();\n this.onSelectAll.emit(this.emittedValue(this.selectedItems));\n } else {\n this.selectedItems = [];\n this.onDeSelectAll.emit(this.emittedValue(this.selectedItems));\n }\n this.onChangeCallback(this.emittedValue(this.selectedItems));\n }\n\n getFields(inputData) {\n const fields = [];\n if (typeof inputData !== \"object\") {\n return fields;\n }\n // tslint:disable-next-line:forin\n for (const prop in inputData) {\n fields.push(prop);\n }\n return fields;\n }\n\n}\n" }, { "path": "src/ng-multiselect-dropdown/src/multiselect.model.ts", "content": "export interface IDropdownSettings {\n singleSelection?: boolean;\n idField?: string;\n textField?: string;\n disabledField?: string;\n enableCheckAll?: boolean;\n selectAllText?: string;\n unSelectAllText?: string;\n allowSearchFilter?: boolean;\n clearSearchFilter?: boolean;\n maxHeight?: number;\n itemsShowLimit?: number;\n limitSelection?: number;\n searchPlaceholderText?: string;\n noDataAvailablePlaceholderText?: string;\n noFilteredDataAvailablePlaceholderText?: string;\n closeDropDownOnSelection?: boolean;\n showSelectedItemsAtTop?: boolean;\n defaultOpen?: boolean;\n allowRemoteDataSearch?: boolean;\n}\n\nexport class ListItem {\n id: String | number;\n text: String | number;\n isDisabled?: boolean;\n\n public constructor(source: any) {\n if (typeof source === 'string' || typeof source === 'number') {\n this.id = this.text = source;\n this.isDisabled = false;\n }\n if (typeof source === 'object') {\n this.id = source.id;\n this.text = source.text;\n this.isDisabled = source.isDisabled;\n }\n }\n}\n" }, { "path": "src/ng-multiselect-dropdown/src/ng-multiselect-dropdown.module.ts", "content": "import { NgModule, ModuleWithProviders } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { FormsModule } from '@angular/forms';\nimport { MultiSelectComponent } from './multiselect.component';\nimport { ClickOutsideDirective } from './click-outside.directive';\nimport { ListFilterPipe } from './list-filter.pipe';\n\n@NgModule({\n imports: [CommonModule, FormsModule],\n declarations: [MultiSelectComponent, ClickOutsideDirective, ListFilterPipe],\n providers: [ListFilterPipe],\n exports: [MultiSelectComponent]\n})\n\nexport class NgMultiSelectDropDownModule {\n static forRoot(): ModuleWithProviders {\n return {\n ngModule: NgMultiSelectDropDownModule\n };\n }\n}\n" }, { "path": "src/ng-multiselect-dropdown/src/public_api.ts", "content": "export { MultiSelectComponent } from './multiselect.component';\nexport { NgMultiSelectDropDownModule } from './ng-multiselect-dropdown.module';\nexport { IDropdownSettings } from './multiselect.model';\n" }, { "path": "src/ng-multiselect-dropdown/test/helper.ts", "content": "import { Type } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { TestBed, ComponentFixture, tick } from '@angular/core/testing';\nimport { NgMultiSelectDropDownModule } from './../src/ng-multiselect-dropdown.module';\n\nexport function newEvent(eventName: string, bubbles = false, cancelable = false) {\n let evt = document.createEvent('CustomEvent'); // MUST be 'CustomEvent'\n evt.initCustomEvent(eventName, bubbles, cancelable, null);\n return evt;\n}\n\nexport function createTestingModule(cmp: Type, template: string): ComponentFixture {\n TestBed.configureTestingModule({\n imports: [FormsModule, NgMultiSelectDropDownModule],\n declarations: [cmp]\n })\n .overrideComponent(cmp, {\n set: {\n template: template\n }\n })\n .compileComponents();\n const fixture = TestBed.createComponent(cmp);\n fixture.detectChanges();\n return fixture;\n}\n\nexport function tickAndDetectChanges(fixture) {\n fixture.detectChanges();\n tick();\n}\n" }, { "path": "src/ng-multiselect-dropdown/test/list-filter.pipe.spec.ts", "content": "import { ListFilterPipe } from '../src/list-filter.pipe'\ndescribe('multiSelectFilter', () => {\n let pipe: ListFilterPipe;\n beforeEach(() => {\n pipe = new ListFilterPipe();\n })\n it('should create an instance', () => {\n expect(pipe).toBeTruthy();\n });\n it('bad inputs:should return source data if filter data is null', () => {\n const sourceData = [\n {\n id: 1, text: 'Navsari'\n }, {\n id: 2, text: 'Pune'\n }];\n expect(pipe.transform(sourceData, null)).toEqual(sourceData);\n })\n it('transform string data', () => {\n const sourceData = [\n {\n id: 1, text: 'Navsari'\n }, {\n id: 2, text: 'Pune'\n }];\n const filterData = { id: 1, text: 'Nav' };\n const expectedData = [{ id: 1, text: 'Navsari' }]\n expect(pipe.transform(sourceData, filterData)).toEqual(expectedData);\n })\n it('transform numbers data', () => {\n const sourceData = [\n {\n id: 1111, text: 1111\n }, {\n id: 2222, text: 2222\n }];\n const filterData = { id: 1111, text: 1111 };\n const expectedData = [{ id: 1111, text: 1111 }]\n expect(pipe.transform(sourceData, filterData)).toEqual(expectedData);\n })\n})" }, { "path": "src/ng-multiselect-dropdown/test/multi-select-disabled-item.component.spec.ts", "content": "import { Component, Type, ViewChild, DebugElement } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { ComponentFixture, fakeAsync } from '@angular/core/testing';\nimport { By } from '@angular/platform-browser';\nimport { MultiSelectComponent } from './../src/multiselect.component';\nimport { createTestingModule, tickAndDetectChanges } from './helper';\n\n@Component({\n template: ``\n})\nclass Ng2MultiSelectDropdownMultipleSelectWithDisableItemComponent {\n @ViewChild(MultiSelectComponent)\n select: MultiSelectComponent;\n cities = [\n { item_id: 1, item_text: 'Mumbai' },\n { item_id: 2, item_text: 'Bangalore' },\n { item_id: 3, item_text: 'Pune', isDisabled: true },\n { item_id: 4, item_text: 'Navsari' },\n { item_id: 5, item_text: 'New Delhi' }\n ];\n selectedItem = [{ item_id: 1, item_text: 'Mumbai' }, { item_id: 4, item_text: 'Navsari' }];\n dropdownSettings = {\n singleSelection: false,\n idField: 'item_id',\n textField: 'item_text',\n selectAllText: 'Select All',\n unSelectAllText: 'UnSelect All',\n badgeShowLimit: 3,\n disabled: false,\n allowSearchFilter: true,\n closeDropDownOnSelection: true\n };\n}\ndescribe('Multiple Selection:disable item', () => {\n let fixture: ComponentFixture;\n beforeEach(fakeAsync(() => {\n fixture = createTestingModule(\n Ng2MultiSelectDropdownMultipleSelectWithDisableItemComponent,\n `
\n \n \n
`\n );\n }));\n it('should have 4 items enabled and 1 item disabled', fakeAsync(() => {\n let selCheckBoxes: HTMLLIElement[];\n const sel = fixture.nativeElement.querySelectorAll('.multiselect-item-checkbox');\n selCheckBoxes = Array.from(sel);\n // tickAndDetectChanges(fixture);\n // Mumbai\n expect(selCheckBoxes[1].querySelector('div').textContent).toContain('Mumbai');\n expect(selCheckBoxes[1].querySelector('input').disabled).toBe(false);\n // Bangalore\n expect(selCheckBoxes[2].querySelector('div').textContent).toContain('Bangalore');\n expect(selCheckBoxes[2].querySelector('input').disabled).toBe(false);\n expect(selCheckBoxes[3].querySelector('div').textContent).toContain('Pune');\n expect(selCheckBoxes[3].querySelector('input').disabled).toBe(true); // Pune should have disable attribute\n\n // Navsari\n expect(selCheckBoxes[4].querySelector('div').textContent).toContain('Navsari');\n expect(selCheckBoxes[4].querySelector('input').disabled).toBe(false);\n // New Delhi\n expect(selCheckBoxes[5].querySelector('div').textContent).toContain('New Delhi');\n expect(selCheckBoxes[5].querySelector('input').disabled).toBe(false);\n \n expect(fixture.componentInstance.selectedItem.length).toEqual(2);\n }));\n it('should not select disabled item-Pune', fakeAsync(() => {\n const index = 3; // 0 is select all checkbox\n let selCheckBoxes: HTMLLIElement[];\n const sel = fixture.nativeElement.querySelectorAll('.multiselect-item-checkbox');\n selCheckBoxes = Array.from(sel);\n selCheckBoxes[index].click();\n selCheckBoxes[index - 1].click(); // select Bangalore\n tickAndDetectChanges(fixture);\n expect(selCheckBoxes[index - 1].querySelector('input').disabled).toBe(false); // Bangalore should not have disable attribute\n expect(selCheckBoxes[index].querySelector('input').disabled).toBe(true); // Pune should have disable attribute\n expect(selCheckBoxes[index].querySelector('div').textContent).toContain('Pune');\n expect(fixture.componentInstance.selectedItem.length).toEqual(3);\n }));\n it('should not select disabled item when selecting all items', fakeAsync(() => {\n const index = 0; // 0 is select all checkbox\n let selCheckBoxes: HTMLLIElement[];\n const sel = fixture.nativeElement.querySelectorAll('.multiselect-item-checkbox');\n selCheckBoxes = Array.from(sel);\n selCheckBoxes[index].click(); // click on \"select all\"\n tickAndDetectChanges(fixture);\n expect(selCheckBoxes[3].querySelector('div').textContent).toContain('Pune');\n expect(selCheckBoxes[3].querySelector('input').disabled).toBe(true); // Pune should have disable attribute\n expect(fixture.componentInstance.selectedItem.length).toEqual(4);\n }));\n});\n" }, { "path": "src/ng-multiselect-dropdown/test/multi-select.component.spec.ts", "content": "import { Component, Type, ViewChild, DebugElement } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { ComponentFixture, fakeAsync } from '@angular/core/testing';\nimport { By } from '@angular/platform-browser';\nimport { MultiSelectComponent } from './../src/multiselect.component';\nimport { createTestingModule, tickAndDetectChanges } from './helper';\n\n@Component({\n template: ``\n})\nclass Ng2MultiSelectDropdownSingleSelect {\n @ViewChild(MultiSelectComponent)\n select: MultiSelectComponent;\n cities = [\n { item_id: 1, item_text: 'Mumbai' },\n { item_id: 2, item_text: 'Bangalore' },\n { item_id: 3, item_text: 'Pune', isDisabled: true },\n { item_id: 4, item_text: 'Navsari' },\n { item_id: 5, item_text: 'New Delhi' }\n ];\n selectedItem = [{ item_id: 4, item_text: 'Navsari' }];\n dropdownSettings = {\n singleSelection: true,\n idField: 'item_id',\n textField: 'item_text',\n selectAllText: 'Select All',\n unSelectAllText: 'UnSelect All',\n badgeShowLimit: 3,\n disabled: false,\n allowSearchFilter: false,\n closeDropDownOnSelection: true\n };\n}\n@Component({\n template: ``\n})\nclass Ng2MultiSelectDropdownMultipleSelect {\n @ViewChild(MultiSelectComponent)\n select: MultiSelectComponent;\n cities = [\n { item_id: 1, item_text: 'Mumbai' },\n { item_id: 2, item_text: 'Bangalore' },\n { item_id: 3, item_text: 'Pune' },\n { item_id: 4, item_text: 'Navsari' },\n { item_id: 5, item_text: 'New Delhi' }\n ];\n selectedItem = [\n { item_id: 1, item_text: 'Mumbai' },\n { item_id: 4, item_text: 'Navsari' }\n ];\n dropdownSettings = {\n singleSelection: false,\n idField: 'item_id',\n textField: 'item_text',\n selectAllText: 'Select All',\n unSelectAllText: 'UnSelect All',\n badgeShowLimit: 3,\n disabled: false,\n allowSearchFilter: true,\n closeDropDownOnSelection: true\n };\n}\ndescribe('ng-multiselect-component', function() {\n describe('Single Selection', () => {\n let fixture: ComponentFixture;\n beforeEach(fakeAsync(() => {\n fixture = createTestingModule(\n Ng2MultiSelectDropdownSingleSelect,\n `
\n \n \n
`\n );\n }));\n it('should update internal model on select an item', fakeAsync(() => {\n let index = 4;\n let selCheckBoxes: HTMLLIElement[];\n const sel = fixture.nativeElement.querySelectorAll(\n '.multiselect-item-checkbox'\n );\n selCheckBoxes = Array.from(sel);\n selCheckBoxes[index].click();\n tickAndDetectChanges(fixture);\n expect(fixture.componentInstance.selectedItem.length).toBe(1);\n let selItem = fixture.componentInstance.cities[index];\n expect(fixture.componentInstance.selectedItem[0]).toEqual(selItem);\n\n index = 3;\n selCheckBoxes[index].click();\n tickAndDetectChanges(fixture);\n expect(fixture.componentInstance.selectedItem.length).toBe(1);\n selItem = fixture.componentInstance.cities[index];\n expect(fixture.componentInstance.selectedItem[0]).toEqual(selItem);\n\n index = 4;\n selCheckBoxes[index].click();\n tickAndDetectChanges(fixture);\n expect(fixture.componentInstance.selectedItem.length).toBe(1);\n selItem = fixture.componentInstance.cities[index];\n expect(fixture.componentInstance.selectedItem[0]).toEqual(selItem);\n }));\n\n it('should dropdown gets close once item is selected', fakeAsync(() => {\n tickAndDetectChanges(fixture);\n const selDropdown: HTMLElement = fixture.nativeElement.querySelector(\n '.multiselect-dropdown'\n );\n selDropdown.click();\n tickAndDetectChanges(fixture);\n expect(fixture.componentInstance.select._settings.defaultOpen).toBe(\n false\n );\n }));\n\n it('selected item should be correct', fakeAsync(() => {\n expect(fixture.componentInstance.selectedItem.length).toBe(1);\n const selItem = fixture.componentInstance.cities[3];\n expect(fixture.componentInstance.selectedItem[0]).toEqual(selItem);\n }));\n it('should have default placeholder as \"Select\"', () => {\n const de: DebugElement = fixture.debugElement.query(\n By.css('.dropdown-btn>span')\n );\n const el = de.nativeElement;\n expect(el.textContent).toContain('Select');\n });\n\n it('close dropdown if opened and clicked outside dropdown container', fakeAsync(() => {\n fixture.componentInstance.select.isDropdownOpen = true;\n const de: DebugElement = fixture.debugElement.query(By.css('.container'));\n const el = de.nativeElement;\n el.click();\n tickAndDetectChanges(fixture);\n expect(fixture.componentInstance.select._settings.defaultOpen).toBe(\n false\n );\n }));\n\n // it('search filter should work', () => {\n // const inputSearch = fixture.nativeElement.query(By.css('input[type=text]')) as HTMLInputElement;\n // inputSearch.value = 'navsari';\n // inputSearch.dispatchEvent(newEvent('input'));\n // tickAndDetectChanges(fixture);\n // const selItems: HTMLLIElement[] = Array.from(document.querySelectorAll('.multiselect-item-checkbox'));\n // expect(selItems.length).toBe(1);\n // });\n it('dropdown should not open when component is disabled', fakeAsync(() => {\n fixture.componentInstance.select.isDropdownOpen = false;\n fixture.componentInstance.dropdownSettings.disabled = true;\n const de: DebugElement = fixture.debugElement.query(\n By.css('.dropdown-btn')\n );\n const el = de.nativeElement;\n tickAndDetectChanges(fixture);\n expect(fixture.componentInstance.select.isDropdownOpen).toBe(false);\n }));\n\n it('should not select disabled item', fakeAsync(() => {\n const selectedItems = [...fixture.componentInstance.selectedItem]; // currently selected items\n const index = 2;\n let selCheckBoxes: HTMLLIElement[];\n const sel = fixture.nativeElement.querySelectorAll(\n '.multiselect-item-checkbox'\n );\n selCheckBoxes = Array.from(sel);\n selCheckBoxes[index].click();\n tickAndDetectChanges(fixture);\n expect(fixture.componentInstance.select.isDropdownOpen).toBeTruthy();\n expect(fixture.componentInstance.selectedItem).toEqual(selectedItems); // selected items must've not changed\n }));\n });\n describe('Multiple Selection', () => {\n let fixture: ComponentFixture;\n beforeEach(fakeAsync(() => {\n fixture = createTestingModule(\n Ng2MultiSelectDropdownMultipleSelect,\n `
\n \n \n
`\n );\n }));\n // it('should update internal model on select an item', fakeAsync(() => {\n // let index = 4;\n // let selCheckBoxes: HTMLLIElement[];\n // const sel = fixture.nativeElement.querySelectorAll('.multiselect-item-checkbox');\n // selCheckBoxes = Array.from(sel);\n // selCheckBoxes[index].click();\n // tickAndDetectChanges(fixture);\n // expect(fixture.componentInstance.selectedItem.length).toBe(1);\n // let selItem = fixture.componentInstance.cities[index];\n // expect(fixture.componentInstance.selectedItem[0]).toEqual(selItem);\n\n // index = 3;\n // selCheckBoxes[index].click();\n // tickAndDetectChanges(fixture);\n // expect(fixture.componentInstance.selectedItem.length).toBe(1);\n // selItem = fixture.componentInstance.cities[index];\n // expect(fixture.componentInstance.selectedItem[0]).toEqual(selItem);\n\n // index = 4;\n // selCheckBoxes[index].click();\n // tickAndDetectChanges(fixture);\n // expect(fixture.componentInstance.selectedItem.length).toBe(1);\n // selItem = fixture.componentInstance.cities[index];\n // expect(fixture.componentInstance.selectedItem[0]).toEqual(selItem);\n // }));\n\n it('should dropdown gets close once item is selected', fakeAsync(() => {\n tickAndDetectChanges(fixture);\n const selDropdown: HTMLElement = fixture.nativeElement.querySelector(\n '.multiselect-dropdown'\n );\n selDropdown.click();\n tickAndDetectChanges(fixture);\n expect(fixture.componentInstance.select._settings.defaultOpen).toBe(\n false\n );\n }));\n\n it('selected item should be correct', fakeAsync(() => {\n expect(fixture.componentInstance.selectedItem.length).toBe(2);\n // const selItem = fixture.componentInstance.cities[3];\n // expect(fixture.componentInstance.selectedItem[0]).toEqual(selItem);\n }));\n it('should have default placeholder as \"Select\"', () => {\n const de: DebugElement = fixture.debugElement.query(\n By.css('.dropdown-btn>span')\n );\n const el = de.nativeElement;\n expect(el.textContent).toContain('Select');\n });\n it('should have default placeholder for search textbox as \"Search\"', () => {\n const de: DebugElement = fixture.debugElement.query(\n By.css('.filter-textbox>input')\n );\n const el = de.nativeElement;\n expect(el.placeholder).toBe('Search');\n });\n it('close dropdown if opened and clicked outside dropdown container', fakeAsync(() => {\n fixture.componentInstance.select.isDropdownOpen = true;\n const de: DebugElement = fixture.debugElement.query(By.css('.container'));\n const el = de.nativeElement;\n el.click();\n tickAndDetectChanges(fixture);\n expect(fixture.componentInstance.select._settings.defaultOpen).toBe(\n false\n );\n }));\n\n it('should have custom placeholder for \"select all text\" button', () => {\n const de: DebugElement = fixture.debugElement.query(\n By.css('.item1>li>div')\n );\n const el = de.nativeElement;\n expect(el.textContent).toContain('Select All');\n });\n });\n});\n" }, { "path": "src/ng-multiselect-dropdown/test/multi-select.component1.spec.ts", "content": "import { Component, Type, ViewChild, DebugElement } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { ComponentFixture, fakeAsync } from '@angular/core/testing';\nimport { By } from '@angular/platform-browser';\nimport { MultiSelectComponent, IDropdownSettings } from './../src';\nimport { createTestingModule, tickAndDetectChanges } from './helper'\n\n@Component({\n template: ``\n})\nclass Ng2MultiSelectDropdownMultipleSelect_defaultPlaceHolderText {\n @ViewChild(MultiSelectComponent) select: MultiSelectComponent;\n cities = [];\n selectedItem = [];\n dropdownSettings: IDropdownSettings = {\n singleSelection: false,\n idField: 'item_id',\n textField: 'item_text',\n selectAllText: 'Select All',\n unSelectAllText: 'UnSelect All',\n allowSearchFilter: true,\n closeDropDownOnSelection: true,\n };\n}\n\nconst NO_DATA_AVAILABLE = 'NO DATA AVAILABLE'\n@Component({\n template: ``\n})\nclass Ng2MultiSelectDropdownMultipleSelect_CustomPlaceHolderText {\n @ViewChild(MultiSelectComponent) select: MultiSelectComponent;\n cities = [];\n selectedItem = [];\n dropdownSettings: IDropdownSettings = {\n singleSelection: false,\n idField: 'item_id',\n textField: 'item_text',\n selectAllText: 'Select All',\n unSelectAllText: 'UnSelect All',\n allowSearchFilter: true,\n closeDropDownOnSelection: true,\n noDataAvailablePlaceholderText: NO_DATA_AVAILABLE\n };\n}\ndescribe('ng-multiselect-component: default placeholder when no data is available to show', function () {\n let fixture: ComponentFixture;\n beforeEach(\n fakeAsync(() => {\n fixture = createTestingModule(\n Ng2MultiSelectDropdownMultipleSelect_defaultPlaceHolderText,\n `
\n \n \n
`\n );\n })\n );\n\n it('should have default placeholder when no data is available to show', () => {\n const de: DebugElement = fixture.debugElement.query(By.css('.no-data'));\n const el = de.nativeElement;\n expect(el.textContent).toContain('No data available')\n })\n});\ndescribe('ng-multiselect-component: custom placeholder when no data is available to show', function () {\n let fixture: ComponentFixture;\n beforeEach(\n fakeAsync(() => {\n fixture = createTestingModule(\n Ng2MultiSelectDropdownMultipleSelect_CustomPlaceHolderText,\n `
\n \n \n
`\n );\n })\n );\n\n it('should have custom placeholder when no data is available to show', () => {\n const de: DebugElement = fixture.debugElement.query(By.css('.no-data'));\n const el = de.nativeElement;\n expect(el.textContent).toContain(NO_DATA_AVAILABLE)\n })\n});\n" }, { "path": "src/ng-multiselect-dropdown/test/multi-select.component2.spec.ts", "content": "import { Component, Type, ViewChild, DebugElement } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { ComponentFixture, fakeAsync } from '@angular/core/testing';\nimport { By } from '@angular/platform-browser';\nimport { MultiSelectComponent, IDropdownSettings } from './../src';\nimport { createTestingModule, tickAndDetectChanges } from './helper'\n\n@Component({\n template: ``\n})\nclass Ng2MultiSelectDropdownMultipleSelect {\n @ViewChild(MultiSelectComponent) select: MultiSelectComponent;\n cities = [\n { item_id: 0, item_text: 'Navsari' },\n { item_id: 1, item_text: 'Mumbai' },\n { item_id: 2, item_text: 'Bangalore' },\n { item_id: 3, item_text: 'Pune' },\n { item_id: 5, item_text: 'New Delhi' }\n ];\n selectedItem = [{ item_id: 0, item_text: 'Navsari' }];\n dropdownSettings: IDropdownSettings = {\n singleSelection: false,\n idField: 'item_id',\n textField: 'item_text',\n selectAllText: 'Select All',\n unSelectAllText: 'UnSelect All',\n allowSearchFilter: true,\n closeDropDownOnSelection: true,\n };\n}\n// https://github.com/NileshPatel17/ng-multiselect-dropdown/issues/67\ndescribe('ng-multiselect-component: Issue No: 67( Option with value = 0 does not work)', function () {\n let fixture: ComponentFixture;\n beforeEach(\n fakeAsync(() => {\n fixture = createTestingModule(\n Ng2MultiSelectDropdownMultipleSelect,\n `
\n \n \n
`\n );\n })\n );\n\n it('should have 5 total items', () => {\n let selCheckBoxes: HTMLLIElement[];\n const de: DebugElement[] = fixture.debugElement.queryAll(By.css('.item2>li'));\n expect(fixture.componentInstance.cities.length).toBe(5)\n expect(de.length).toBe(5)\n expect(fixture.componentInstance.selectedItem.length).toBe(1)\n })\n});\n\n" }, { "path": "src/ng-multiselect-dropdown/test/various-input-data.spec.ts", "content": "import { Component, ViewChild } from '@angular/core';\nimport { ComponentFixture, fakeAsync } from '@angular/core/testing';\nimport { MultiSelectComponent } from './../src/multiselect.component';\nimport { createTestingModule, tickAndDetectChanges } from './helper';\n\n// #region String Data\nconst ALL_CITIES = ['New Delhi', 'Mumbai', 'Bangalore', 'Pune', 'Chennai', 'Navsari'];\nconst SELECTED_CITIES = ['Mumbai', 'Navsari'];\n\n@Component({\n template: ``\n})\nclass SingleDimensionString {\n @ViewChild(MultiSelectComponent)\n select: MultiSelectComponent;\n cities: Array = ALL_CITIES;\n selectedItem: Array = SELECTED_CITIES;\n dropdownSettings = {\n singleSelection: false,\n selectAllText: 'Select All',\n unSelectAllText: 'UnSelect All',\n badgeShowLimit: 3,\n disabled: false,\n allowSearchFilter: true,\n closeDropDownOnSelection: true\n };\n}\n\ndescribe('Multiple Selection:String Data', () => {\n let fixture: ComponentFixture;\n beforeEach(fakeAsync(() => {\n fixture = createTestingModule(\n SingleDimensionString,\n `
\n \n \n
`\n );\n }));\n\n it('selected item should be array of string', fakeAsync(() => {\n const index = 0; // 0 is select all checkbox\n let selCheckBoxes: HTMLLIElement[];\n const sel = fixture.nativeElement.querySelectorAll('.multiselect-item-checkbox');\n selCheckBoxes = Array.from(sel);\n selCheckBoxes[index].click();\n tickAndDetectChanges(fixture);\n expect(fixture.componentInstance.selectedItem.length).toEqual(ALL_CITIES.length);\n expect(fixture.componentInstance.selectedItem).toEqual(ALL_CITIES);\n }));\n});\n\n// #endregion\n\n// #region Numeric data\nconst NUMBERS = [1, 3, 5, 6];\n@Component({\n template: ``\n})\nclass SingleDimensionNumber {\n @ViewChild(MultiSelectComponent)\n select: MultiSelectComponent;\n cities: Array = NUMBERS;\n selectedItem: Array = [3];\n dropdownSettings = {\n singleSelection: false,\n selectAllText: 'Select All',\n unSelectAllText: 'UnSelect All',\n badgeShowLimit: 3,\n disabled: false,\n allowSearchFilter: true,\n closeDropDownOnSelection: true\n };\n}\n\ndescribe('Multiple Selection:Numeric Data', () => {\n let fixture: ComponentFixture;\n beforeEach(fakeAsync(() => {\n fixture = createTestingModule(\n SingleDimensionNumber,\n `
\n \n \n
`\n );\n }));\n\n it('selected item should be array of number', fakeAsync(() => {\n const index = 0; // 0 is select all checkbox\n let selCheckBoxes: HTMLLIElement[];\n const sel = fixture.nativeElement.querySelectorAll('.multiselect-item-checkbox');\n selCheckBoxes = Array.from(sel);\n selCheckBoxes[index].click();\n tickAndDetectChanges(fixture);\n expect(fixture.componentInstance.selectedItem.length).toEqual(NUMBERS.length);\n expect(fixture.componentInstance.selectedItem).toEqual(NUMBERS);\n }));\n});\n// #endregion\n\n// #region Object data\ninterface ICity {\n item_id: number;\n item_text: string;\n}\nconst CITIES: Array = [\n { item_id: 1, item_text: 'New Delhi' },\n { item_id: 2, item_text: 'Mumbai' },\n { item_id: 3, item_text: 'Bangalore' },\n { item_id: 4, item_text: 'Pune' },\n { item_id: 5, item_text: 'Chennai' },\n { item_id: 6, item_text: 'Navsari' }\n];\nconst SEL_CITIES: Array = [\n { item_id: 2, item_text: 'Mumbai' },\n { item_id: 4, item_text: 'Pune' }\n];\n\n@Component({\n template: ``\n})\nclass SingleDimensionObjectComponent {\n @ViewChild(MultiSelectComponent)\n select: MultiSelectComponent;\n cities: Array = CITIES;\n selectedItem: Array = SEL_CITIES;\n dropdownSettings = {\n singleSelection: false,\n idField: 'item_id',\n textField: 'item_text',\n selectAllText: 'Select All',\n unSelectAllText: 'UnSelect All',\n badgeShowLimit: 3,\n disabled: false,\n allowSearchFilter: true,\n closeDropDownOnSelection: true\n };\n}\n\ndescribe('Multiple Selection:Object Data', () => {\n let fixture: ComponentFixture;\n beforeEach(fakeAsync(() => {\n fixture = createTestingModule(\n SingleDimensionObjectComponent,\n `
\n \n \n
`\n );\n }));\n\n it('selected item should be array of Object', fakeAsync(() => {\n const index = 0; // 0 is select all checkbox\n let selCheckBoxes: HTMLLIElement[];\n const sel = fixture.nativeElement.querySelectorAll('.multiselect-item-checkbox');\n selCheckBoxes = Array.from(sel);\n selCheckBoxes[index].click();\n tickAndDetectChanges(fixture);\n expect(fixture.componentInstance.selectedItem.length).toEqual(CITIES.length);\n expect(fixture.componentInstance.selectedItem).toEqual(CITIES);\n }));\n});\n// #endregion\n" }, { "path": "src/polyfills.ts", "content": "/**\n * This file includes polyfills needed by Angular and is loaded before the app.\n * You can add your own extra polyfills to this file.\n *\n * This file is divided into 2 sections:\n * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.\n * 2. Application imports. Files imported after ZoneJS that should be loaded before your main\n * file.\n *\n * The current setup is for so-called \"evergreen\" browsers; the last versions of browsers that\n * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),\n * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.\n *\n * Learn more in https://angular.io/guide/browser-support\n */\n\n/***************************************************************************************************\n * BROWSER POLYFILLS\n */\n\n/** IE10 and IE11 requires the following for NgClass support on SVG elements */\n// import 'classlist.js'; // Run `npm install --save classlist.js`.\n\n/**\n * Web Animations `@angular/platform-browser/animations`\n * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.\n * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).\n */\n// import 'web-animations-js'; // Run `npm install --save web-animations-js`.\n\n/**\n * By default, zone.js will patch all possible macroTask and DomEvents\n * user can disable parts of macroTask/DomEvents patch by setting following flags\n * because those flags need to be set before `zone.js` being loaded, and webpack\n * will put import in the top of bundle, so user need to create a separate file\n * in this directory (for example: zone-flags.ts), and put the following flags\n * into that file, and then add the following code before importing zone.js.\n * import './zone-flags.ts';\n *\n * The flags allowed in zone-flags.ts are listed here.\n *\n * The following flags will work for all browsers.\n *\n * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame\n * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick\n * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames\n *\n * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js\n * with the following flag, it will bypass `zone.js` patch for IE/Edge\n *\n * (window as any).__Zone_enable_cross_context_check = true;\n *\n */\n\n/***************************************************************************************************\n * Zone JS is required by default for Angular itself.\n */\nimport 'zone.js/dist/zone'; // Included with Angular CLI.\n\n\n/***************************************************************************************************\n * APPLICATION IMPORTS\n */\n" }, { "path": "src/setup-jest.ts", "content": "import 'jest-preset-angular';\n\nimport './jest-global-mocks'; // browser mocks globally available for every test" }, { "path": "src/styles.scss", "content": "/* You can add global styles to this file, and also import other style files */\n.h1, .h2, .h3, h1, h2, h3 {\n margin-top: 20px;\n margin-bottom: 10px;\n}\n\n.h1, h1 {\n font-size: 36px;\n}\n\n.btn-group-lg > .btn, .btn-lg {\n font-size: 18px;\n}\n\nsection {\n padding-top: 30px;\n}\n\n.bd-pageheader {\n // margin-top: 51px;\n}\n\n.page-header {\n padding-bottom: 9px;\n margin: 40px 0 20px;\n border-bottom: 1px solid #eee;\n}\n\n.navbar-default .navbar-nav > li > a {\n color: #777;\n}\n\n.navbar {\n padding: 0;\n}\n\n.navbar-nav .nav-item {\n margin-left: 0 !important;\n}\n\n.nav > li > a {\n position: relative;\n display: block;\n padding: 10px 15px;\n}\n\n.nav .navbar-brand {\n float: left;\n height: 50px;\n padding: 15px 15px;\n font-size: 18px;\n line-height: 20px;\n margin-right: 0 !important;\n}\n\n.navbar-brand {\n color: #777;\n float: left;\n height: 50px;\n padding: 15px 15px;\n font-size: 18px;\n line-height: 20px;\n}\n\n.navbar-toggler {\n margin-top: 8px;\n margin-right: 15px;\n}\n\n.navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:hover {\n color: #333;\n background-color: transparent;\n}\n\n.bd-pageheader, .bs-docs-masthead {\n position: relative;\n padding: 30px 0;\n color: #cdbfe3;\n text-align: center;\n text-shadow: 0 1px 0 rgba(0, 0, 0, .1);\n background-color: #6f5499;\n background-image: -webkit-gradient(linear, left top, left bottom, from(#563d7c), to(#6f5499));\n background-image: -webkit-linear-gradient(top, #563d7c 0, #6f5499 100%);\n background-image: -o-linear-gradient(top, #563d7c 0, #6f5499 100%);\n background-image: linear-gradient(to bottom, #563d7c 0, #6f5499 100%);\n filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#563d7c', endColorstr='#6F5499', GradientType=0);\n background-repeat: repeat-x;\n}\n\n.bd-pageheader {\n // margin-bottom: 40px;\n font-size: 20px;\n}\n\n.bd-pageheader h1 {\n margin-top: 0;\n color: #fff;\n}\n\n.bd-pageheader p {\n margin-bottom: 0;\n font-weight: 300;\n line-height: 1.4;\n}\n\n.bd-pageheader .btn {\n margin: 10px 0;\n}\n\n.scrollable-menu .nav-link {\n color: #337ab7;\n font-size: 14px;\n}\n\n.scrollable-menu .nav-link:hover {\n color: #23527c;\n background-color: #eee;\n}\n\n@media (min-width: 992px) {\n .bd-pageheader h1, .bd-pageheader p {\n margin-right: 380px;\n }\n}\n\n@media (min-width: 768px) {\n .bd-pageheader {\n // padding-top: 60px;\n // padding-bottom: 60px;\n font-size: 24px;\n text-align: left;\n }\n\n .bd-pageheader h1 {\n font-size: 60px;\n line-height: 1;\n }\n\n .navbar-nav > li > a.nav-link {\n padding-top: 15px;\n padding-bottom: 15px;\n font-size: 14px;\n }\n\n .navbar > .container .navbar-brand, .navbar > .container-fluid .navbar-brand {\n margin-left: -15px;\n }\n}\n\n@media (max-width: 767px) {\n .hidden-xs {\n display: none !important;\n }\n\n .navbar .container {\n width: 100%;\n max-width: 100%;\n }\n .navbar .container,\n .navbar .container .navbar-header {\n padding: 0;\n margin: 0;\n }\n}\n\n@media (max-width: 400px) {\n code, kbd {\n font-size: 60%;\n }\n}\n\n.scrollable-menu {\n height: 90vh !important;\n width: 100vw;\n overflow-x: hidden;\n padding: 0 0 20px;\n}\n\n/**\n * iPad with portrait orientation.\n */\n@media all and (device-width: 768px) and (device-height: 1024px) and (orientation: portrait) {\n .scrollable-menu {\n height: 1024px !important;\n }\n}\n\n/**\n * iPad with landscape orientation.\n */\n@media all and (device-width: 768px) and (device-height: 1024px) and (orientation: landscape) {\n .scrollable-menu {\n height: 768px !important;\n }\n}\n\n/**\n * iPhone 5\n * You can also target devices with aspect ratio.\n */\n@media screen and (device-aspect-ratio: 40/71) {\n .scrollable-menu {\n height: 500px !important;\n }\n}\n\n.navbar-default .navbar-toggle .icon-bar {\n background-color: #888;\n}\n\n.navbar-toggle:focus {\n outline: 0\n}\n\n.navbar-toggle .icon-bar {\n display: block;\n width: 22px;\n height: 2px;\n border-radius: 1px\n}\n\n.navbar-toggle .icon-bar + .icon-bar {\n margin-top: 4px\n}\n\npre {\n white-space: pre-wrap; /* CSS 3 */\n white-space: -moz-pre-wrap; /* Mozilla, since 1999 */\n white-space: -pre-wrap; /* Opera 4-6 */\n white-space: -o-pre-wrap; /* Opera 7 */\n word-wrap: break-word; /* Internet Explorer 5.5+ */\n}\n\n.chart-legend, .bar-legend, .line-legend, .pie-legend, .radar-legend, .polararea-legend, .doughnut-legend {\n list-style-type: none;\n margin-top: 5px;\n text-align: center;\n -webkit-padding-start: 0;\n -moz-padding-start: 0;\n padding-left: 0\n}\n\n.chart-legend li, .bar-legend li, .line-legend li, .pie-legend li, .radar-legend li, .polararea-legend li, .doughnut-legend li {\n display: inline-block;\n white-space: nowrap;\n position: relative;\n margin-bottom: 4px;\n border-radius: 5px;\n padding: 2px 8px 2px 28px;\n font-size: smaller;\n cursor: default\n}\n\n.chart-legend li span, .bar-legend li span, .line-legend li span, .pie-legend li span, .radar-legend li span, .polararea-legend li span, .doughnut-legend li span {\n display: block;\n position: absolute;\n left: 0;\n top: 0;\n width: 20px;\n height: 20px;\n border-radius: 5px\n}" }, { "path": "src/test.ts", "content": "// This file is required by karma.conf.js and loads recursively all the .spec and framework files\n\nimport 'zone.js/dist/long-stack-trace-zone';\nimport 'zone.js/dist/proxy.js';\nimport 'zone.js/dist/sync-test';\nimport 'zone.js/dist/jasmine-patch';\nimport 'zone.js/dist/async-test';\nimport 'zone.js/dist/fake-async-test';\nimport { getTestBed } from '@angular/core/testing';\nimport {\n BrowserDynamicTestingModule,\n platformBrowserDynamicTesting\n} from '@angular/platform-browser-dynamic/testing';\n\n// Unfortunately there's no typing for the `__karma__` variable. Just declare it as any.\ndeclare const __karma__: any;\ndeclare const require: any;\n\n// Prevent Karma from running prematurely.\n__karma__.loaded = function () {};\n\n// First, initialize the Angular testing environment.\ngetTestBed().initTestEnvironment(\n BrowserDynamicTestingModule,\n platformBrowserDynamicTesting()\n);\n// Then we find all the tests.\nconst context = require.context('./', true, /\\.spec\\.ts$/);\n// And load the modules.\ncontext.keys().map(context);\n// Finally, start Karma to run the tests.\n__karma__.start();\n" }, { "path": "src/tsconfig.app.json", "content": "{\n \"extends\": \"../tsconfig.json\",\n \"compilerOptions\": {\n \"outDir\": \"../out-tsc/app\",\n \"baseUrl\": \"./\",\n \"types\": []\n },\n \"files\": [\n \"main.ts\",\n \"polyfills.ts\"\n ],\n \"include\": [\n \"src/**/*.d.ts\"\n ]\n}\n" }, { "path": "src/tsconfig.json", "content": "{\n \"compileOnSave\": false,\n \"compilerOptions\": {\n \"outDir\": \"./temp/out-tsc\",\n \"sourceMap\": true,\n \"declaration\": false,\n \"moduleResolution\": \"node\",\n \"emitDecoratorMetadata\": true,\n \"experimentalDecorators\": true,\n \"target\": \"es5\",\n \"mapRoot\": \"./\",\n \"typeRoots\": [\"../node_modules/@types\"],\n \"lib\": [\"es2015\", \"dom\"]\n }\n}\n" }, { "path": "src/tsconfig.spec.json", "content": "{\n \"extends\": \"../tsconfig.json\",\n \"compilerOptions\": {\n \"outDir\": \"../out-tsc/spec\",\n \"baseUrl\": \"./\",\n \"target\": \"es5\",\n \"types\": [\n \"jasmine\",\n \"node\"\n ]\n },\n \"files\": [\n \"test.ts\",\n \"polyfills.ts\"\n ],\n \"include\": [\n \"**/*.spec.ts\",\n \"**/*.d.ts\"\n ]\n}\n" }, { "path": "src/typings.d.ts", "content": "/* SystemJS module definition */\ndeclare var module: NodeModule;\ninterface NodeModule {\n id: string;\n}\n" }, { "path": "tsconfig.json", "content": "{\n \"compileOnSave\": false,\n \"compilerOptions\": {\n \"module\": \"es2020\",\n \"outDir\": \"./dist/out-tsc\",\n \"sourceMap\": true,\n \"declaration\": false,\n \"moduleResolution\": \"node\",\n \"emitDecoratorMetadata\": true,\n \"experimentalDecorators\": true,\n \"target\": \"es2018\",\n \"typeRoots\": [\"node_modules/@types\"],\n \"lib\": [\"es2016\",\"es2015\", \"dom\"]\n }\n}\n" }, { "path": "tslint.json", "content": "{\n \"rulesDirectory\": [\n \"node_modules/codelyzer\"\n ],\n \"rules\": {\n \"arrow-return-shorthand\": true,\n \"callable-types\": true,\n \"class-name\": true,\n \"comment-format\": [\n true,\n \"check-space\"\n ],\n \"curly\": true,\n \"eofline\": true,\n \"forin\": true,\n \"deprecation\": {\n \"severity\": \"warning\"\n },\n \"import-blacklist\": [\n true\n ],\n \"import-spacing\": true,\n \"indent\": [\n true,\n \"spaces\"\n ],\n \"interface-over-type-literal\": true,\n \"label-position\": true,\n \"max-line-length\": [\n true,\n 140\n ],\n \"member-access\": false,\n \"member-ordering\": [\n true,\n {\n \"order\": [\n \"static-field\",\n \"instance-field\",\n \"static-method\",\n \"instance-method\"\n ]\n }\n ],\n \"no-arg\": true,\n \"no-bitwise\": true,\n \"no-console\": [\n true,\n \"debug\",\n \"info\",\n \"time\",\n \"timeEnd\",\n \"trace\"\n ],\n \"no-construct\": true,\n \"no-debugger\": true,\n \"no-duplicate-super\": true,\n \"no-empty\": false,\n \"no-empty-interface\": true,\n \"no-eval\": true,\n \"no-inferrable-types\": [\n true,\n \"ignore-params\"\n ],\n \"no-misused-new\": true,\n \"no-non-null-assertion\": true,\n \"no-shadowed-variable\": true,\n \"no-string-literal\": false,\n \"no-string-throw\": true,\n \"no-switch-case-fall-through\": true,\n \"no-trailing-whitespace\": true,\n \"no-unnecessary-initializer\": true,\n \"no-unused-expression\": true,\n \"no-var-keyword\": true,\n \"object-literal-sort-keys\": false,\n \"one-line\": [\n true,\n \"check-open-brace\",\n \"check-catch\",\n \"check-else\",\n \"check-whitespace\"\n ],\n \"prefer-const\": true,\n \"quotemark\": [\n true,\n \"single\"\n ],\n \"radix\": true,\n \"semicolon\": [\n true,\n \"always\"\n ],\n \"triple-equals\": [\n true,\n \"allow-null-check\"\n ],\n \"typedef-whitespace\": [\n true,\n {\n \"call-signature\": \"nospace\",\n \"index-signature\": \"nospace\",\n \"parameter\": \"nospace\",\n \"property-declaration\": \"nospace\",\n \"variable-declaration\": \"nospace\"\n }\n ],\n \"typeof-compare\": true,\n \"unified-signatures\": true,\n \"variable-name\": false,\n \"whitespace\": [\n true,\n \"check-branch\",\n \"check-decl\",\n \"check-operator\",\n \"check-separator\",\n \"check-type\"\n ],\n \"directive-selector\": [\n true,\n \"attribute\",\n \"app\",\n \"camelCase\"\n ],\n \"component-selector\": [\n true,\n \"element\",\n \"app\",\n \"kebab-case\"\n ],\n \"use-input-property-decorator\": true,\n \"use-output-property-decorator\": true,\n \"use-host-property-decorator\": true,\n \"no-input-rename\": true,\n \"no-output-rename\": true,\n \"use-life-cycle-interface\": true,\n \"use-pipe-transform-interface\": true,\n \"component-class-suffix\": true,\n \"directive-class-suffix\": true,\n \"no-access-missing-member\": true,\n \"templates-use-public\": true,\n \"invoke-injectable\": true\n }\n}\n" } ]