{"_id":"@terminus/ui-select","_rev":"39-105bd4a85661fe44cdda50dd8a915503","name":"@terminus/ui-select","dist-tags":{"latest":"3.0.0","next":"3.0.0"},"versions":{"0.0.1":{"name":"@terminus/ui-select","version":"0.0.1","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"peerDependencies":{"@angular/animations":"^9.1.0","@angular/cdk":"^9.1.0","@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/flex-layout":"~9.0.0-beta.29","@angular/forms":"^9.1.0","@angular/material":"^9.1.0","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^1.0.10","@terminus/ngx-tools":"^8.0.5","@terminus/ui-checkbox":"*","@terminus/ui-form-field":"*","@terminus/ui-icon":"*","@terminus/ui-input":"*","@terminus/ui-option":"*","@terminus/ui-spacing":"*","@terminus/ui-validation-messages":"*","rxjs":"^6.5.0"},"main":"bundles/terminus-ui-select.umd.js","module":"fesm5/terminus-ui-select.js","es2015":"fesm2015/terminus-ui-select.js","esm5":"esm5/terminus-ui-select.js","esm2015":"esm2015/terminus-ui-select.js","fesm5":"fesm5/terminus-ui-select.js","fesm2015":"fesm2015/terminus-ui-select.js","typings":"terminus-ui-select.d.ts","metadata":"terminus-ui-select.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0"},"description":"<h1>Select :rotating_light: DEPRECATED :rotating_light:</h1>","_id":"@terminus/ui-select@0.0.1","_nodeVersion":"12.10.0","_npmVersion":"6.10.3","dist":{"integrity":"sha512-0lLr/oVTBUTjPv5TC+dDW9En3af2eBuELMQDYZRqIZPUFk3X9IybLn38/93zXmiUlpW1Keq12GIfm6AQ1tuXMQ==","shasum":"ed36d7b670e7f1e8f3a643984e89cfac43c20a2d","tarball":"https://registry.npmjs.org/@terminus/ui-select/-/ui-select-0.0.1.tgz","fileCount":75,"unpackedSize":1215150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1d2ICRA9TVsSAnZWagAAZbEP/iAfJvHMnuYvquIp865q\nVr2kZbtYbDg3UqF02ZeJPYgCOQxjiR5oWbHtKf98b/+7/0TxuB2oJV92gjSJ\n0MUhpp5tHwm1k+urPqzj42oTdN8FE9VxCV0UjH7WPSHjlKaklOdve9NQy5O2\nJMS2U/7eJm0HVYshQTI4hQnXUrt1c4eT2NkfPD+79Xz70jljo6i7Xo3WH/Vx\njTji2xv/nh73WSeWF22TbIQE0pBYZeBFPmIywL7DO6gAcqmQZDASx6KQR/sj\nBbVSBVyBFz4Nc+dX1mLGffveC7mbHckdVYTiVGhz5yHTetTv6gnndScO/BFY\nBg9gEgzUjLCKcpXJLLKjQhkUDm02VQiXnsQHV1dzG8wyjlN4yHd1cCWWGEBM\nc8Dya62cI+TZ10Pq8BRBAXUUdppHiqKj8wZ+424DlXJ5D1VJo3pQHymeWR/9\nQb0FiTTd2p7QFVIQMGO4uSd9wE+3S+rdMZhbco334SjKk9ZF701Wqm1KVD3g\nBMB+QBa8z/hd/xlsxlNYBdozAFW/Qz1DTilXbchDYdc4evcObT50cEHPAujY\nHEaxJ5jM9RkbuJyZAWFjgsqP5+PjF13uGwYmC/+finH29Z8QKwUyR9O6ZyUO\nDdpY42e4VaKFB6cey9ck4T7cVjzPZ7HmrAT15jpu9APkoXz+R1E9tlh9LppI\nDJUs\r\n=eFv8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDemrSQDkd7K/5RhyfE/ZdE35kJDXvAT1phBCpie9ifWQIgdPMz8rCY6yP5nB5WtRfnG0G6vQC/MgsGrNrPlpVW6j4="}]},"maintainers":[{"name":"terminus_devops","email":"devops@terminus.com"},{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"}],"_npmUser":{"name":"benjamincharity","email":"ben@benjamincharity.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-select_0.0.1_1591074184215_0.09220834225623986"},"_hasShrinkwrap":false},"1.0.0":{"name":"@terminus/ui-select","version":"1.0.0","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"peerDependencies":{"@angular/animations":"^9.1.0","@angular/cdk":"^9.1.0","@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/flex-layout":"~9.0.0-beta.29","@angular/forms":"^9.1.0","@angular/material":"^9.1.0","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^1.0.10","@terminus/ngx-tools":"^8.0.5","@terminus/ui-checkbox":"^0.0.1","@terminus/ui-form-field":"^0.0.1","@terminus/ui-icon":"^0.0.1","@terminus/ui-input":"^0.0.1","@terminus/ui-option":"^0.0.1","@terminus/ui-spacing":"^0.0.1","@terminus/ui-validation-messages":"^0.0.1","rxjs":"^6.5.0","tslib":"^1.10.0"},"description":"<h1>Select :rotating_light: DEPRECATED :rotating_light:</h1>","_id":"@terminus/ui-select@1.0.0","_nodeVersion":"12.16.3","_npmVersion":"6.14.5","dist":{"integrity":"sha512-qfkDtEhmn5T51rm3UkX77+kQ258qsiSpR2s/bZz+TI9BGnfcANNiFSDYzELqHraaMIrsmRq+J0Fi7K6mwP0czw==","shasum":"7202e73a1ab14c45c807dbb99bd1f07cf0653617","tarball":"https://registry.npmjs.org/@terminus/ui-select/-/ui-select-1.0.0.tgz","fileCount":23,"unpackedSize":155040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2Si0CRA9TVsSAnZWagAA6cEP/Aufmr7WyqgjL1WgrVwr\neqFH9XBKQoNxpnGFgA10vI370KYyM8rQQmuv3dgazqWA0pj38BJB4B7RU4hp\nBgjp1MVQ+EZRbDjEtOyOQR6vlLnLJBaa++W/7Q1QLMB/jYQxcwsRfrxpKiz3\noMMcBvxaHZrdkgQBVdpHWUB24X1KfMSnUhNuzBwzIN7OncxWnRSVKGsBns32\nFjd5+D6pss1isSX2HXnPPC7aOx9NlwIqFxRNOFcoLsf1On2euq2AKExOzaRT\ns0LrnbIDd/BZQVgMpBwn9+8iMHNBYHJq7Q9o7D5iengP2IB1Zt20ZGVVa1cH\n37o/Nsmtku5C8urCLCE6JcJsYLCTC04RpXmMZ9MzH2RQN9HIiMM8spENUNti\n8kinCtgIbd1L8HDuKa37AiwgkknxSHNiQlUg3DK1jz2WeellUZIIXMlXOog6\nLnjQw2SP8wRXb3Y2AEyI2ENWJ3viT5HloA9raDGSKVyoA2wQUyIPzCM1Cp/c\nFwXRsBq/5qNkEPWJ9cAxNVvU0roW7lizVvzVHnbRtgmlg4G/wI7daWlJ4LrF\nr9UPmTn0GkqlGUA7dP8HMdURXUrxlakGgo+fnMl+/7G9retXosQ6yIjhpw7R\n/WQkSADI4/pyPFuyAh8XriNDUSooN6ulOC5HCSeUcFnVjKfImCdTnFFaYZfN\nTOYF\r\n=13vi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCtk6R8pLw4SeZaalEcZbURyYoElapafbuTosWgRrbP9wIgDLEMRKIj5DUTZ+ePhQAuSbuctXz3AvhIzX/Zwavjilc="}]},"maintainers":[{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"terminus_devops","email":"devops@terminus.com"}],"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-select_1.0.0_1591290035793_0.0933054451865547"},"_hasShrinkwrap":false},"1.0.1":{"name":"@terminus/ui-select","version":"1.0.1","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next"},"peerDependencies":{"@angular/animations":"^9.1.0","@angular/cdk":"^9.1.0","@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/flex-layout":"~9.0.0-beta.29","@angular/forms":"^9.1.0","@angular/material":"^9.1.0","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^1.0.10","@terminus/ngx-tools":"^8.0.5","@terminus/ui-checkbox":"^0.0.1","@terminus/ui-form-field":"^0.0.1","@terminus/ui-icon":"^0.0.1","@terminus/ui-input":"^0.0.1","@terminus/ui-option":"^0.0.1","@terminus/ui-spacing":"^0.0.1","@terminus/ui-validation-messages":"^0.0.1","rxjs":"^6.5.0","tslib":"^1.10.0"},"readme":"<h1>Select :rotating_light: DEPRECATED :rotating_light:</h1>\n\n[![CI/CD Status][github-action-badge]][github-action-link] [![Codecov][codecov-badge]][codecov-project] [![MIT License][license-image]][license-url]  \n[![NPM version][npm-version-image]][npm-package] [![Github release][gh-release-badge]][gh-releases] [![Library size][file-size-badge]][raw-distribution-js]\n\n---\n\n> :rotating_light: NOTE: This component is deprecated. Please use the [Selection List Component][selection-list-src].\n\n---\n\nA custom select dropdown.\n\n<!-- START doctoc generated TOC please keep comment here to allow auto update -->\n<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->\n**Table of Contents**\n\n- [Usage](#usage)\n  - [Label](#label)\n  - [Hint](#hint)\n  - [No validation or hint](#no-validation-or-hint)\n  - [FormControl](#formcontrol)\n  - [ngModel](#ngmodel)\n  - [Custom compare function](#custom-compare-function)\n  - [Optgroups](#optgroups)\n  - [Disabled](#disabled)\n    - [Disable via Input](#disable-via-input)\n    - [Disable via FormControl](#disable-via-formcontrol)\n    - [Disabled Option](#disabled-option)\n    - [Disabled Optgroup](#disabled-optgroup)\n  - [Required](#required)\n    - [Required by Input](#required-by-input)\n    - [Required by FormControl](#required-by-formcontrol)\n  - [Placeholder](#placeholder)\n  - [Custom trigger value](#custom-trigger-value)\n  - [Blank option](#blank-option)\n  - [Option template](#option-template)\n  - [Custom view value](#custom-view-value)\n  - [Multiple selections](#multiple-selections)\n  - [Custom delimiter](#custom-delimiter)\n  - [Custom sort comparator](#custom-sort-comparator)\n  - [Filterable](#filterable)\n  - [Allow user to request update](#allow-user-to-request-update)\n  - [Prompt the user to refine their search](#prompt-the-user-to-refine-their-search)\n  - [Events](#events)\n- [Test helpers](#test-helpers)\n\n<!-- END doctoc generated TOC please keep comment here to allow auto update -->\n\n\n## Usage\n\nThe most basic usage is by wrapping one or more `ts-option`s inside an `ts-select`:\n\n```html\n<!-- Define the option value by passing a property to the option's `value` input -->\n<ts-select>\n  <ts-option\n    *ngFor=\"let item of items\"\n    [value]=\"item.value\"\n  >{{ item.name }}</ts-option>\n</ts-select>\n```\n\n\n### Label\n\nDefine a label on the select:\n\n```html\n<ts-select label=\"My cool label!\">\n  ...\n</ts-select>\n```\n\n\n### Hint\n\nDefine a hint on the select:\n\n```html\n<ts-select hint=\"Please select an option\">\n  ...\n</ts-select>\n```\n\n### No validation or hint\n\nA flag to define whether this select field needs validation or hint. If it needs validation or hint, a padding bottom is added for the message, otherwise, no padding at the bottom.\n\n```html\n<ts-select\n  [formControl]=\"myCtrl\"\n  [noValidationOrHint]=\"true\"\n></ts-select>\n```\n\n### FormControl\n\nTo use a `FormControl` with the select, pass the control in:\n\n```html\n<ts-select [formControl]=\"myCtrl\">\n  ...\n</ts-select>\n```\n\n\n### ngModel\n\nTo use `ngModel`, add the model to the select:\n\n```html\n<ts-select [(ngModel)]=\"myModel\">\n  ...\n</ts-select>\n```\n\n\n### Custom compare function\n\nIf more refined control of how options are compared is needed, a custom comparator function can be used:\n\n```html\n<ts-select [compareWith]=\"compareByReference\">\n  ...\n</ts-select>\n```\n\n```typescript\n// Example comparing by reference:\ncompareByReference(f1: any, f2: any) { return f1 === f2; }\n\n// Example comparing by value:\ncompareByValue(f1: any, f2: any) { return f1 && f2 && f1.text === f2.text; }\n```\n\n```typescript\nTsOptionCompareWith = (o1: any, o2: any) => boolean;\n```\n\n\n### Optgroups\n\nOptgroups can be used by wrapping one or more options inside an optgroup component:\n\n```html\n<ts-select>\n  <ts-select-optgroup\n    *ngFor=\"let group of itemsWithGroups\"\n    [label]=\"group.myLabel\"\n  >\n    <ts-option\n      *ngFor=\"let child of group.children\"\n      [value]=\"child.slug\"\n    >{{ child.foo }}</ts-option>\n  </ts-select-optgroup>\n</ts-select>\n```\n\n\n### Disabled\n\nThe entire select can be disabled in one of two ways:\n\n#### Disable via Input\n\n```html\n<ts-select [isDisabled]=\"true\">\n  ...\n</ts-select>\n```\n\n#### Disable via FormControl\n\n```typescript\nmyCtrl = new FormControl({value: null, disabled: true});\n```\n\n```html\n<ts-select [formControl]=\"myCtrl\">\n  ...\n</ts-select>\n```\n\n#### Disabled Option\n\nIndividual options may also be disabled:\n\n```html\n<ts-select>\n  <ts-option\n    *ngFor=\"let option of options\"\n    [value]=\"option.value\"\n    [isDisabled]=\"option.disabled\" <!-- Disabled when true -->\n  >{{ option.name }}</ts-option>\n</ts-select>\n```\n\n#### Disabled Optgroup\n\nEntire optgroups can be disabled just like options. When an optgroup is disabled, all options that are children of that optgroup\nare also disabled.\n\n```html\n<ts-select>\n  <ts-select-optgroup\n    *ngFor=\"let group of itemsWithGroups\"\n    [label]=\"group.myLabel\"\n    [isDisabled]=\"option.disabled\" <!-- Disabled when true -->\n  >\n    <ts-option\n      *ngFor=\"let child of group.children\"\n      [value]=\"child.slug\"\n    >{{ child.foo }}</ts-option>\n  </ts-select-optgroup>\n</ts-select>\n```\n\n### Required\n\nThe entire select can be marked required in one of two ways:\n\n#### Required by Input\n\n\n```html\n<ts-select [isRequired]=\"true\">\n  ...\n</ts-select>\n```\n\n#### Required by FormControl\n\n```typescript\nmyCtrl = new FormControl(null, Validators.required);\n```\n\n```html\n<ts-select [formControl]=\"myCtrl\">\n  ...\n</ts-select>\n```\n\n\n### Placeholder\n\nThe placeholder is used for the trigger value when the control or model value is empty.\n\n```html\n<ts-select placeholder=\"Please make a selection.\">\n  ...\n</ts-select>\n```\n\n\n### Custom trigger value\n\nCustom HTML can be used for the trigger value by using the `ts-select-trigger` component. This trigger will be shown when the control or\nmodel does have value.\n\n```html\n<ts-select>\n  <!-- Here is my custom trigger! -->\n  <ts-select-trigger>\n    My custom trigger!\n    With <strong>custom</strong> HTML!\n  </ts-select-trigger>\n\n  <ts-option\n    [value]=\"option.value\"\n    *ngFor=\"let option of options\"\n  >{{ option.name }}</ts-option>\n</ts-select>\n```\n\n\n### Blank option\n\nA blank option can be implemented by adding a `ts-option` with no value:\n\n```html\n<ts-select [formControl]=\"myForm.get('myChoices1')\">\n  <ts-option>\n    None\n  </ts-option>\n\n  <ts-option\n    [value]=\"option.value\"\n    *ngFor=\"let option of options\"\n  >{{ option.name }}</ts-option>\n</ts-select>\n```\n\n\n### Option template\n\nA custom template can be used for the option content.\n\n> NOTE: The option object *must* be passed into the option when using a custom template\n\n```html\n<ts-select>\n  <ts-option\n    *ngFor=\"let option of options\"\n    [value]=\"option.value\"\n    [option]=\"option\"\n  >\n    <!-- The object you pass to the `option` input will be exposed as `option` in the template -->\n    <ng-template let-option>\n      <div class=\"myClass\">\n        <h4>{{ option.name }}</h4>\n        <small>{{ option.value / 100 }}%</small>\n      </div>\n    </ng-template>\n  </ts-option>\n</ts-select>\n```\n\n\n### Custom view value\n\nPart of the option view can be defined as the 'view value' which is used to define the `title` attribute for the option:\n\n```html\n<ts-select>\n  <ts-option\n    *ngFor=\"let option of options\"\n    [value]=\"option.value\"\n    [option]=\"option\"\n  >\n    <ng-template let-option>\n      <div class=\"myClass\">\n        <!-- The content of this h4 will be used for the option title -->\n        <h4 tsOptionDisplay>{{ option.name }}</h4>\n        <small>{{ option.value / 100 }}%</small>\n      </div>\n    </ng-template>\n  </ts-option>\n</ts-select>\n```\n\n\n### Multiple selections\n\nAllow multiple selections via an `@Input`:\n\n```html\n<ts-select [allowMultiple]=\"true\">\n  ...\n</ts-select>\n```\n\nThis will show checkboxes next to each option and include a top-level 'Select All' toggle.\n\n\n### Custom delimiter\n\nThe delimiter is used to separate multiple options when shown in the trigger. By default this is a comma (`,`). A custom delimiter may also\nbe set:\n\n```html\n<ts-select\n  [allowMultiple]=\"true\"\n  delimiter=\"/\"\n>\n  ...\n</ts-select>\n<!-- Standard output: `foo, bar, baz` -->\n<!-- Output with custom delimiter: `foo/ bar/ baz` -->\n```\n\n\n### Custom sort comparator\n\nBy default, the selections will be stored in the order matching the order of items passed in. A custom sort comparator may be passed in\nto alter the sort order.\n\n```html\n<ts-select [sortComparator]=\"myComparatorFn\">\n  ...\n</ts-select>\n```\n\nThe comparator function type is `TsSelectSortComparatorFunction` and has the following format:\n\n```typescript\ntype TsSelectSortComparatorFunction = (\n  a: TsOptionComponent,\n  b: TsOptionComponent,\n  options: TsOptionComponent[],\n) => number;\n```\n\n\n### Filterable\n\nA select can include an input at the top of the list to filter options:\n\n```html\n<ts-select\n  [formControl]=\"myCtrl\"\n  [isFilterable]=\"true\"\n  (queryChange)=\"mySearchFunction($event)\"\n>\n  ...\n</ts-select>\n```\n\nAny unique, debounced query will be emitted through the `queryChange` emitter. The consumer is in control of what options are displayed. A\nblank option can be used to show the user a message when no items are found by the query.\n\n\n### Allow user to request update\n\nThere are times where the data may change after it is loaded. The `showRefresh` option allows the user to manually request updated data.\n\n```html\n<ts-select\n  [formControl]=\"myCtrl\"\n  [showRefresh]=\"true\"\n  (optionsRefreshRequested)=\"userRequestedRefresh()\"\n>\n  ...\n</ts-select>\n```\n\n\n### Prompt the user to refine their search\n\nFor certain queries it is not always possible to return all options. In those cases, we should prompt the user to refine their search for\nbetter results.\n\n```html\n<ts-select\n  [formControl]=\"myCtrl\"\n  [showRefineSearchMessage]=\"true\"\n>\n  ...\n</ts-select>\n```\n\nThis will show a message below all existing options:\n\n```bash\nNarrow your search to reveal hidden results.\n```\n\nIf the `totalHiddenResults` input is defined, the count will be included in the message:\n\n```html\n<ts-select\n  [formControl]=\"myCtrl\"\n  [showRefineSearchMessage]=\"true\"\n  [totalHiddenResults]=\"972\"\n>\n  ...\n</ts-select>\n```\n\nThis will show a message below all existing options:\n\n```bash\nNarrow your search to reveal 972 hidden results.\n```\n\n\n### Events\n\nMultiple events are fired during interaction with the select:\n\n| Event                     | Description                                     | Payload              |\n|:--------------------------|:------------------------------------------------|:---------------------|\n| `closed`                  | Fired when the panel is closed                  | `undefined`          |\n| `duplicateSelection`      | Fired when a duplicate selection is made        | `string`             |\n| `opened`                  | Fired when the panel is open                    | `undefined`          |\n| `optionDeselected`        | Fired when an option is deselected              | `TsSelectChange`     |\n| `optionSelected`          | Fired when an option is selected                | `TsSelectChange`     |\n| `optionsRefreshRequested` | Fired when the user selects the refresh trigger | `undefined`          |\n| `queryChange`             | Fired when query changes                        | `string`             |\n| `selectionChange`         | Fired when the selection changes                | `TsSelectChange`     |\n| `valueChange`             | Fired when the selection value changes          | `string \\| string[]` |\n\n\n```html\n<ts-select (selectionChange)=\"myFunction($event)\">\n  ...\n</ts-select>\n```\n\nThe `TsSelectChange` structure:\n\n```typescript\nclass TsSelectChange {\n  constructor(\n    // Reference to the select that emitted the change event\n    public source: TsSelectComponent,\n    // The current value\n    public value: any,\n  ) {}\n}\n\n```\n\n\n## Test helpers\n\nSome helpers are exposed to assist with testing. These are imported from `@terminus/ui-select/testing`;\n\n[[source]][test-helpers-src]\n\n| Function                  |\n|---------------------------|\n| `getSelectInstance`       |\n| `getSelectElement`        |\n| `getSelectTriggerElement` |\n| `getToggleAllElement`     |\n| `getPanelElement`         |\n| `getAllOptionInstances`   |\n| `getOptionInstance`       |\n| `getOptionElement`        |\n| `getAllOptgroups`         |\n| `getOptgroup`             |\n| `getOptgroupElement`      |\n| `getAllChipInstances`     |\n| `getChipInstance`         |\n| `getChipElement`          |\n| `getFilterInputElement`   |\n\n\n<!-- Links -->\n[test-helpers-src]:    testing/src/test-helpers.ts\n[selection-list-src]:  ../selection-list/\n[license-url]:         https://github.com/GetTerminus/terminus-oss/blob/master/LICENSE\n[license-image]:       http://img.shields.io/badge/license-MIT-blue.svg\n[codecov-project]:     https://codecov.io/gh/GetTerminus/terminus-oss\n[codecov-badge]:       https://codecov.io/gh/GetTerminus/terminus-oss/branch/master/graph/badge.svg\n[npm-version-image]:   http://img.shields.io/npm/v/@terminus/ui-select.svg\n[npm-package]:         https://www.npmjs.com/package/@terminus/ui-select\n[gh-release-badge]:    https://img.shields.io/github/release/GetTerminus/terminus-oss.svg\n[gh-releases]:         https://github.com/GetTerminus/terminus-ui/releases/\n[github-action-badge]: https://github.com/GetTerminus/terminus-oss/workflows/CI%20Release/badge.svg\n[github-action-link]:  https://github.com/GetTerminus/terminus-oss/actions?query=workflow%3A%22CI+Release%22\n[file-size-badge]:     http://img.badgesize.io/https://unpkg.com/@terminus/ui-select/bundles/terminus-ui-select.umd.min.js?compression=gzip\n[raw-distribution-js]: https://unpkg.com/@terminus/ui-select/bundles/terminus-ui-select.umd.js\n","readmeFilename":"README.md","description":"<h1>Select :rotating_light: DEPRECATED :rotating_light:</h1>","_id":"@terminus/ui-select@1.0.1","_nodeVersion":"12.16.3","_npmVersion":"6.14.5","dist":{"integrity":"sha512-piPMf1+2yvyj+eOZGumJruGkVvXlo/OLFqVSYgPKfcifmK0zot5Zc0O04RUj0ZlWbdU/ISgJDLEzHQtiUzXLsQ==","shasum":"d008a6dfbb2077cff05c05c23eddd5640e968eec","tarball":"https://registry.npmjs.org/@terminus/ui-select/-/ui-select-1.0.1.tgz","fileCount":23,"unpackedSize":155108,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2T57CRA9TVsSAnZWagAApmAP/1Ldc6A122cx+81W2+rh\nD6JvOCFmD5WjOk6XFfa68R9rBJR7A0EjGb/59MKJAL0ARdv6UlWxbUpnYyJx\n+SoJDspMbxQjhGjaPX2lcbag4w3+qst6FrlodrBmlt50IUzjHFo6oswYf2YB\nd02iJ1CPEU/VOVanoBRcmU2ovN95X6B+11k4wfOnU/ikl7RCahZg7JAorMh9\nt2zxV83Jv+y22/nlf13x1mpG+/DKdCb/Nn1K6jgIvkvwTKjhgHyK+yph+dj3\nE90CUOLGeNNgHCYiOHaKgNHmG5ZFVtL/+rULpQpKd1yR9KDEqvZ2K46gw4nN\nXTKPP8RvcIs1dvxlySSE39Al+NiOmrb7pbhUh0ySI4CsLOmgiI8xViD2K7V/\ntPy49C1ybyK9eZ2YRm4+I92QCt1crbi86Pd5YXCfvu+7x5fxI2C5XVyIEmkE\n0lr7p2O7No3pnv1l5CJki0dpYxB32uAEkkBzIAL9pyq5EPbEEb0ImXh3AXUO\nv6/Zk11njYX/YZ9QPplMgEnUi/jLhzXFHzjU3EEHB/43ka8Qf6ZpsqBuT9na\nZeGT1BcB9KrNMTF7RAmv9MIn6CHj9LJClvJ7azA5athCPfLkmNlRTlIJeNBc\nzWmKoQWzadRif5zRg1nLBK9aO7Fscg119AEol0b7AfXKspBriyiT3QBImdwi\ngIBL\r\n=xfpp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC1dCDDqC5D0V50h3S76o6U8RDHwVExKSH5tZC29l3j9gIgBGpkF6BTC99paLz0a3jSZdkuhtU3NRp+jqtfhYpXmaQ="}]},"maintainers":[{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"terminus_devops","email":"devops@terminus.com"}],"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-select_1.0.1_1591295611153_0.5557242407154483"},"_hasShrinkwrap":false},"1.0.2":{"name":"@terminus/ui-select","version":"1.0.2","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next"},"peerDependencies":{"@angular/animations":"^9.1.0","@angular/cdk":"^9.1.0","@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/flex-layout":"~9.0.0-beta.29","@angular/forms":"^9.1.0","@angular/material":"^9.1.0","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^1.0.10","@terminus/ngx-tools":"^8.0.5","@terminus/ui-checkbox":"^0.0.1","@terminus/ui-form-field":"^0.0.1","@terminus/ui-icon":"^0.0.1","@terminus/ui-input":"^0.0.1","@terminus/ui-option":"^0.0.1","@terminus/ui-spacing":"^0.0.1","@terminus/ui-validation-messages":"^0.0.1","rxjs":"^6.5.0","tslib":"^1.10.0"},"description":"<h1>Select :rotating_light: DEPRECATED :rotating_light:</h1>","_id":"@terminus/ui-select@1.0.2","_nodeVersion":"12.16.3","_npmVersion":"6.14.5","dist":{"integrity":"sha512-PD3FhZBr8OHtxbP9eKbs1vtNPHzslq7CXl/evwt9TmyP0iFNPtKJDOgQTvMYmEeL7bIFlHxxV3Zn061BEekXZA==","shasum":"11a0f8dabbc61d1932563bfd4f1dbdf19710b56b","tarball":"https://registry.npmjs.org/@terminus/ui-select/-/ui-select-1.0.2.tgz","fileCount":24,"unpackedSize":155162,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2avcCRA9TVsSAnZWagAADj4P/0djhiyC/mAwXKXuL9nM\nVjkNAM/IL68BX+KagoR498EHic60Qn5JzEBg20AlU3uiIEoCll0Qk2Tb86CA\nbAa/1gw93o0TQUISgRLVtNhAD42SDMSE7obCvZOQptQwQzCk/sP9+EzqHIPe\nsyiH4SCFkqFxDO8V4r9YWgO799XtiGK8X+kukMaoVf5T6vmvevbpUpF7I68H\nD3JwGY/4zSrl4a4LHe4wkjaLELcN4V2uBRnbqwuWESLuJF89LL4huXCW3Vev\nl6kAA7fZHzVDLinelJentu4RLHUnJN3qY/fw8ZuXz4OqDRJtwkXKZNso0ut4\n2HuF0QiSKQNyfnKwn0R836eesPkb6NEhsKt9rvmkTbqz/sQ/GsmEqfcOiMtx\nNHIgkYOkiiGvLgOy55T4zFAeya0RUPvxJCe3OgtdGxPijXJc0inlBxpB5jiF\ncBj6m+ecvJYs62lnx0HZpD6K6OFdI3lMF/5C2c1/vDD5kuMxTFdVnlCMfu6r\naBmsAaiYkJIG2dJ3DLQG8Wdu0FksfMZG6kYc8vXcYJUOxq8p7lCmNyIn+81l\n9UgoVRS8M81JhgJ3csg0udjkR3NhPxYQcI+VM+Zj9qmAB/+8ySdgZS+U1vm4\n7v23Q3UDP2E7RPs3z0C0mjlbMLB3iKpRWZrjKsVOaVWn6Cm9mn3wPhW/wPBQ\nw54E\r\n=PC3d\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDe1YagfipWAU5LVsH1XQBpaEX4fg4Etvj+JKgYJIGmeAIhAPDpTzkvbkJMkZrUhRsZnhlnmbtvgB8f7XD4WEaHHO4C"}]},"maintainers":[{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"terminus_devops","email":"devops@terminus.com"}],"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-select_1.0.2_1591323612329_0.2656986471509897"},"_hasShrinkwrap":false},"1.0.3":{"name":"@terminus/ui-select","version":"1.0.3","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/select"},"peerDependencies":{"@angular/animations":"^9.1.0","@angular/cdk":"^9.1.0","@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/flex-layout":"~9.0.0-beta.29","@angular/forms":"^9.1.0","@angular/material":"^9.1.0","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^1.0.10","@terminus/ngx-tools":"^8.0.5","@terminus/ui-checkbox":"^1.0.0","@terminus/ui-form-field":"^1.0.0","@terminus/ui-icon":"^1.0.0","@terminus/ui-input":"^1.0.0","@terminus/ui-option":"^1.0.0","@terminus/ui-spacing":"^1.0.0","@terminus/ui-validation-messages":"^1.0.0","rxjs":"^6.5.0"},"main":"bundles/terminus-ui-select.umd.js","module":"fesm5/terminus-ui-select.js","es2015":"fesm2015/terminus-ui-select.js","esm5":"esm5/terminus-ui-select.js","esm2015":"esm2015/terminus-ui-select.js","fesm5":"fesm5/terminus-ui-select.js","fesm2015":"fesm2015/terminus-ui-select.js","typings":"terminus-ui-select.d.ts","metadata":"terminus-ui-select.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0","@terminus/ui-utilities":"1.0.3","@terminus/ui-pipes":"1.0.2","date-fns":"2.14.0","@terminus/ui-validators":"1.0.2","text-mask-addons":"3.8.0","text-mask-core":"5.1.2"},"description":"<h1>Select :rotating_light: DEPRECATED :rotating_light:</h1>","_id":"@terminus/ui-select@1.0.3","_nodeVersion":"12.18.0","_npmVersion":"lerna/3.22.1/node@v12.18.0+x64 (linux)","dist":{"integrity":"sha512-TAdw374GvvJQNdyqIDdUN0BASswi1MawGEskL/t3V5G1GQI6nlIXsyzovcn4d6JXAd61bi4PqzaGxtvWTPpOMg==","shasum":"952094aa11ab3721daed919637a32c8925d8a75b","tarball":"https://registry.npmjs.org/@terminus/ui-select/-/ui-select-1.0.3.tgz","fileCount":77,"unpackedSize":1216882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4ODRCRA9TVsSAnZWagAA808QAId2oiF2/Fd/6TSezrEs\npA/TLcdUucwBDq7ga9CXwAzQtET1CeWpzjRg6Yg/UNjCdbPuqOJ9PFzTx43z\n54+kR1/xMxbzkR5o+k/TsFencaexyH0X8vlWiwcyjfCevsF2zK+AL1ZXF9z0\nY+3wr0v9ywqXDCNOz/WxyyJEPEtSaFnfFTG7GYh545KSwADylSym1D7/RP1C\nzZLCfOwD5KDnfGUZI0xKLlZWYGKasCa7NPs60MOrNwjLqrcRkWjhMbyDQ8nX\nKIS7VFH32k+GPZTUTGpB1A7hv2yrvUi0z2XSst48RS2DaMyw/g5TJYYsZwt5\nqj4pu6NXMuDtco961niWl1ryyGbOJoylt24UoQD9ZwO9pBfmhNQIvuYx7bFn\njp/Y74BTwJM6vdI9eax0C4X5VY0dCvnJ8THjACoF7F7LCtqiJ1sOSCheaaeM\nMKtY4TCzok2d5p4V/QFKX2kLWFyomHbZCXSO/Ps7igq0teKEewT5UNUQFsyq\nTDhUE+7QVYRj44DI2V4mvE2X0ZxmM13G3IsAHcSelVSVQtCLrdHY+aEzxwB7\nWkf/htNQmJhwvlX0QpMXr6K6KhG0O9sKV0l/jdWdO8AurjXTfBTN5Vc9Qzqf\n0QnDHVeNUL/2lRpg7ODnvsdyyR21Wd3ksXB3dn1lAq2sSUj8L249u/J7bX2e\nUxq1\r\n=+AJP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDHyT0mrWauahAJ7JqoKeZMQPVlKMCP0Tj71jFuRSzZrwIhAOLnjh4QsSQX8nOuCaryu3V8Lm1v3XqZ1mF+R/P172Et"}]},"maintainers":[{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"terminus_devops","email":"devops@terminus.com"}],"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-select_1.0.3_1591795921055_0.269620389198737"},"_hasShrinkwrap":false},"1.0.4":{"name":"@terminus/ui-select","version":"1.0.4","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/select"},"peerDependencies":{"@angular/animations":"^9.1.0","@angular/cdk":"^9.1.0","@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/flex-layout":"~9.0.0-beta.29","@angular/forms":"^9.1.0","@angular/material":"^9.1.0","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^2.0.2","@terminus/ngx-tools":"^8.0.5","@terminus/ui-checkbox":"^1.0.0","@terminus/ui-form-field":"^1.0.0","@terminus/ui-icon":"^1.0.0","@terminus/ui-input":"^1.0.0","@terminus/ui-option":"^1.0.0","@terminus/ui-spacing":"^1.0.0","@terminus/ui-validation-messages":"^1.0.0","rxjs":"^6.5.0"},"main":"bundles/terminus-ui-select.umd.js","module":"fesm5/terminus-ui-select.js","es2015":"fesm2015/terminus-ui-select.js","esm5":"esm5/terminus-ui-select.js","esm2015":"esm2015/terminus-ui-select.js","fesm5":"fesm5/terminus-ui-select.js","fesm2015":"fesm2015/terminus-ui-select.js","typings":"terminus-ui-select.d.ts","metadata":"terminus-ui-select.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0"},"readme":"<h1>Select :rotating_light: DEPRECATED :rotating_light:</h1>\n\n[![CI/CD Status][github-action-badge]][github-action-link] [![Codecov][codecov-badge]][codecov-project] [![MIT License][license-image]][license-url]  \n[![NPM version][npm-version-image]][npm-package] [![Github release][gh-release-badge]][gh-releases] [![Library size][file-size-badge]][raw-distribution-js]\n\n---\n\n> :rotating_light: NOTE: This component is deprecated. Please use the [Selection List Component][selection-list-src].\n\n---\n\nA custom select dropdown.\n\n<!-- START doctoc generated TOC please keep comment here to allow auto update -->\n<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->\n**Table of Contents**\n\n- [Usage](#usage)\n  - [Label](#label)\n  - [Hint](#hint)\n  - [No validation or hint](#no-validation-or-hint)\n  - [FormControl](#formcontrol)\n  - [ngModel](#ngmodel)\n  - [Custom compare function](#custom-compare-function)\n  - [Optgroups](#optgroups)\n  - [Disabled](#disabled)\n    - [Disable via Input](#disable-via-input)\n    - [Disable via FormControl](#disable-via-formcontrol)\n    - [Disabled Option](#disabled-option)\n    - [Disabled Optgroup](#disabled-optgroup)\n  - [Required](#required)\n    - [Required by Input](#required-by-input)\n    - [Required by FormControl](#required-by-formcontrol)\n  - [Placeholder](#placeholder)\n  - [Custom trigger value](#custom-trigger-value)\n  - [Blank option](#blank-option)\n  - [Option template](#option-template)\n  - [Custom view value](#custom-view-value)\n  - [Multiple selections](#multiple-selections)\n  - [Custom delimiter](#custom-delimiter)\n  - [Custom sort comparator](#custom-sort-comparator)\n  - [Filterable](#filterable)\n  - [Allow user to request update](#allow-user-to-request-update)\n  - [Prompt the user to refine their search](#prompt-the-user-to-refine-their-search)\n  - [Events](#events)\n- [Test helpers](#test-helpers)\n\n<!-- END doctoc generated TOC please keep comment here to allow auto update -->\n\n\n## Usage\n\nThe most basic usage is by wrapping one or more `ts-option`s inside an `ts-select`:\n\n```html\n<!-- Define the option value by passing a property to the option's `value` input -->\n<ts-select>\n  <ts-option\n    *ngFor=\"let item of items\"\n    [value]=\"item.value\"\n  >{{ item.name }}</ts-option>\n</ts-select>\n```\n\n\n### Label\n\nDefine a label on the select:\n\n```html\n<ts-select label=\"My cool label!\">\n  ...\n</ts-select>\n```\n\n\n### Hint\n\nDefine a hint on the select:\n\n```html\n<ts-select hint=\"Please select an option\">\n  ...\n</ts-select>\n```\n\n### No validation or hint\n\nA flag to define whether this select field needs validation or hint. If it needs validation or hint, a padding bottom is added for the message, otherwise, no padding at the bottom.\n\n```html\n<ts-select\n  [formControl]=\"myCtrl\"\n  [noValidationOrHint]=\"true\"\n></ts-select>\n```\n\n### FormControl\n\nTo use a `FormControl` with the select, pass the control in:\n\n```html\n<ts-select [formControl]=\"myCtrl\">\n  ...\n</ts-select>\n```\n\n\n### ngModel\n\nTo use `ngModel`, add the model to the select:\n\n```html\n<ts-select [(ngModel)]=\"myModel\">\n  ...\n</ts-select>\n```\n\n\n### Custom compare function\n\nIf more refined control of how options are compared is needed, a custom comparator function can be used:\n\n```html\n<ts-select [compareWith]=\"compareByReference\">\n  ...\n</ts-select>\n```\n\n```typescript\n// Example comparing by reference:\ncompareByReference(f1: any, f2: any) { return f1 === f2; }\n\n// Example comparing by value:\ncompareByValue(f1: any, f2: any) { return f1 && f2 && f1.text === f2.text; }\n```\n\n```typescript\nTsOptionCompareWith = (o1: any, o2: any) => boolean;\n```\n\n\n### Optgroups\n\nOptgroups can be used by wrapping one or more options inside an optgroup component:\n\n```html\n<ts-select>\n  <ts-select-optgroup\n    *ngFor=\"let group of itemsWithGroups\"\n    [label]=\"group.myLabel\"\n  >\n    <ts-option\n      *ngFor=\"let child of group.children\"\n      [value]=\"child.slug\"\n    >{{ child.foo }}</ts-option>\n  </ts-select-optgroup>\n</ts-select>\n```\n\n\n### Disabled\n\nThe entire select can be disabled in one of two ways:\n\n#### Disable via Input\n\n```html\n<ts-select [isDisabled]=\"true\">\n  ...\n</ts-select>\n```\n\n#### Disable via FormControl\n\n```typescript\nmyCtrl = new FormControl({value: null, disabled: true});\n```\n\n```html\n<ts-select [formControl]=\"myCtrl\">\n  ...\n</ts-select>\n```\n\n#### Disabled Option\n\nIndividual options may also be disabled:\n\n```html\n<ts-select>\n  <ts-option\n    *ngFor=\"let option of options\"\n    [value]=\"option.value\"\n    [isDisabled]=\"option.disabled\" <!-- Disabled when true -->\n  >{{ option.name }}</ts-option>\n</ts-select>\n```\n\n#### Disabled Optgroup\n\nEntire optgroups can be disabled just like options. When an optgroup is disabled, all options that are children of that optgroup\nare also disabled.\n\n```html\n<ts-select>\n  <ts-select-optgroup\n    *ngFor=\"let group of itemsWithGroups\"\n    [label]=\"group.myLabel\"\n    [isDisabled]=\"option.disabled\" <!-- Disabled when true -->\n  >\n    <ts-option\n      *ngFor=\"let child of group.children\"\n      [value]=\"child.slug\"\n    >{{ child.foo }}</ts-option>\n  </ts-select-optgroup>\n</ts-select>\n```\n\n### Required\n\nThe entire select can be marked required in one of two ways:\n\n#### Required by Input\n\n\n```html\n<ts-select [isRequired]=\"true\">\n  ...\n</ts-select>\n```\n\n#### Required by FormControl\n\n```typescript\nmyCtrl = new FormControl(null, Validators.required);\n```\n\n```html\n<ts-select [formControl]=\"myCtrl\">\n  ...\n</ts-select>\n```\n\n\n### Placeholder\n\nThe placeholder is used for the trigger value when the control or model value is empty.\n\n```html\n<ts-select placeholder=\"Please make a selection.\">\n  ...\n</ts-select>\n```\n\n\n### Custom trigger value\n\nCustom HTML can be used for the trigger value by using the `ts-select-trigger` component. This trigger will be shown when the control or\nmodel does have value.\n\n```html\n<ts-select>\n  <!-- Here is my custom trigger! -->\n  <ts-select-trigger>\n    My custom trigger!\n    With <strong>custom</strong> HTML!\n  </ts-select-trigger>\n\n  <ts-option\n    [value]=\"option.value\"\n    *ngFor=\"let option of options\"\n  >{{ option.name }}</ts-option>\n</ts-select>\n```\n\n\n### Blank option\n\nA blank option can be implemented by adding a `ts-option` with no value:\n\n```html\n<ts-select [formControl]=\"myForm.get('myChoices1')\">\n  <ts-option>\n    None\n  </ts-option>\n\n  <ts-option\n    [value]=\"option.value\"\n    *ngFor=\"let option of options\"\n  >{{ option.name }}</ts-option>\n</ts-select>\n```\n\n\n### Option template\n\nA custom template can be used for the option content.\n\n> NOTE: The option object *must* be passed into the option when using a custom template\n\n```html\n<ts-select>\n  <ts-option\n    *ngFor=\"let option of options\"\n    [value]=\"option.value\"\n    [option]=\"option\"\n  >\n    <!-- The object you pass to the `option` input will be exposed as `option` in the template -->\n    <ng-template let-option>\n      <div class=\"myClass\">\n        <h4>{{ option.name }}</h4>\n        <small>{{ option.value / 100 }}%</small>\n      </div>\n    </ng-template>\n  </ts-option>\n</ts-select>\n```\n\n\n### Custom view value\n\nPart of the option view can be defined as the 'view value' which is used to define the `title` attribute for the option:\n\n```html\n<ts-select>\n  <ts-option\n    *ngFor=\"let option of options\"\n    [value]=\"option.value\"\n    [option]=\"option\"\n  >\n    <ng-template let-option>\n      <div class=\"myClass\">\n        <!-- The content of this h4 will be used for the option title -->\n        <h4 tsOptionDisplay>{{ option.name }}</h4>\n        <small>{{ option.value / 100 }}%</small>\n      </div>\n    </ng-template>\n  </ts-option>\n</ts-select>\n```\n\n\n### Multiple selections\n\nAllow multiple selections via an `@Input`:\n\n```html\n<ts-select [allowMultiple]=\"true\">\n  ...\n</ts-select>\n```\n\nThis will show checkboxes next to each option and include a top-level 'Select All' toggle.\n\n\n### Custom delimiter\n\nThe delimiter is used to separate multiple options when shown in the trigger. By default this is a comma (`,`). A custom delimiter may also\nbe set:\n\n```html\n<ts-select\n  [allowMultiple]=\"true\"\n  delimiter=\"/\"\n>\n  ...\n</ts-select>\n<!-- Standard output: `foo, bar, baz` -->\n<!-- Output with custom delimiter: `foo/ bar/ baz` -->\n```\n\n\n### Custom sort comparator\n\nBy default, the selections will be stored in the order matching the order of items passed in. A custom sort comparator may be passed in\nto alter the sort order.\n\n```html\n<ts-select [sortComparator]=\"myComparatorFn\">\n  ...\n</ts-select>\n```\n\nThe comparator function type is `TsSelectSortComparatorFunction` and has the following format:\n\n```typescript\ntype TsSelectSortComparatorFunction = (\n  a: TsOptionComponent,\n  b: TsOptionComponent,\n  options: TsOptionComponent[],\n) => number;\n```\n\n\n### Filterable\n\nA select can include an input at the top of the list to filter options:\n\n```html\n<ts-select\n  [formControl]=\"myCtrl\"\n  [isFilterable]=\"true\"\n  (queryChange)=\"mySearchFunction($event)\"\n>\n  ...\n</ts-select>\n```\n\nAny unique, debounced query will be emitted through the `queryChange` emitter. The consumer is in control of what options are displayed. A\nblank option can be used to show the user a message when no items are found by the query.\n\n\n### Allow user to request update\n\nThere are times where the data may change after it is loaded. The `showRefresh` option allows the user to manually request updated data.\n\n```html\n<ts-select\n  [formControl]=\"myCtrl\"\n  [showRefresh]=\"true\"\n  (optionsRefreshRequested)=\"userRequestedRefresh()\"\n>\n  ...\n</ts-select>\n```\n\n\n### Prompt the user to refine their search\n\nFor certain queries it is not always possible to return all options. In those cases, we should prompt the user to refine their search for\nbetter results.\n\n```html\n<ts-select\n  [formControl]=\"myCtrl\"\n  [showRefineSearchMessage]=\"true\"\n>\n  ...\n</ts-select>\n```\n\nThis will show a message below all existing options:\n\n```bash\nNarrow your search to reveal hidden results.\n```\n\nIf the `totalHiddenResults` input is defined, the count will be included in the message:\n\n```html\n<ts-select\n  [formControl]=\"myCtrl\"\n  [showRefineSearchMessage]=\"true\"\n  [totalHiddenResults]=\"972\"\n>\n  ...\n</ts-select>\n```\n\nThis will show a message below all existing options:\n\n```bash\nNarrow your search to reveal 972 hidden results.\n```\n\n\n### Events\n\nMultiple events are fired during interaction with the select:\n\n| Event                     | Description                                     | Payload              |\n|:--------------------------|:------------------------------------------------|:---------------------|\n| `closed`                  | Fired when the panel is closed                  | `undefined`          |\n| `duplicateSelection`      | Fired when a duplicate selection is made        | `string`             |\n| `opened`                  | Fired when the panel is open                    | `undefined`          |\n| `optionDeselected`        | Fired when an option is deselected              | `TsSelectChange`     |\n| `optionSelected`          | Fired when an option is selected                | `TsSelectChange`     |\n| `optionsRefreshRequested` | Fired when the user selects the refresh trigger | `undefined`          |\n| `queryChange`             | Fired when query changes                        | `string`             |\n| `selectionChange`         | Fired when the selection changes                | `TsSelectChange`     |\n| `valueChange`             | Fired when the selection value changes          | `string \\| string[]` |\n\n\n```html\n<ts-select (selectionChange)=\"myFunction($event)\">\n  ...\n</ts-select>\n```\n\nThe `TsSelectChange` structure:\n\n```typescript\nclass TsSelectChange {\n  constructor(\n    // Reference to the select that emitted the change event\n    public source: TsSelectComponent,\n    // The current value\n    public value: any,\n  ) {}\n}\n\n```\n\n\n## Test helpers\n\nSome helpers are exposed to assist with testing. These are imported from `@terminus/ui-select/testing`;\n\n[[source]][test-helpers-src]\n\n| Function                  |\n|---------------------------|\n| `getSelectInstance`       |\n| `getSelectElement`        |\n| `getSelectTriggerElement` |\n| `getToggleAllElement`     |\n| `getPanelElement`         |\n| `getAllOptionInstances`   |\n| `getOptionInstance`       |\n| `getOptionElement`        |\n| `getAllOptgroups`         |\n| `getOptgroup`             |\n| `getOptgroupElement`      |\n| `getAllChipInstances`     |\n| `getChipInstance`         |\n| `getChipElement`          |\n| `getFilterInputElement`   |\n\n\n<!-- Links -->\n[test-helpers-src]:    testing/src/test-helpers.ts\n[selection-list-src]:  ../selection-list/\n[license-url]:         https://github.com/GetTerminus/terminus-oss/blob/master/LICENSE\n[license-image]:       http://img.shields.io/badge/license-MIT-blue.svg\n[codecov-project]:     https://codecov.io/gh/GetTerminus/terminus-oss\n[codecov-badge]:       https://codecov.io/gh/GetTerminus/terminus-oss/branch/master/graph/badge.svg\n[npm-version-image]:   http://img.shields.io/npm/v/@terminus/ui-select.svg\n[npm-package]:         https://www.npmjs.com/package/@terminus/ui-select\n[gh-release-badge]:    https://img.shields.io/github/release/GetTerminus/terminus-oss.svg\n[gh-releases]:         https://github.com/GetTerminus/terminus-ui/releases/\n[github-action-badge]: https://github.com/GetTerminus/terminus-oss/workflows/Release%20CI/badge.svg\n[github-action-link]:  https://github.com/GetTerminus/terminus-oss/actions?query=workflow%3A%22CI+Release%22\n[file-size-badge]:     http://img.badgesize.io/https://unpkg.com/@terminus/ui-select/bundles/terminus-ui-select.umd.min.js?compression=gzip\n[raw-distribution-js]: https://unpkg.com/@terminus/ui-select/bundles/terminus-ui-select.umd.js\n","readmeFilename":"README.md","description":"<h1>Select :rotating_light: DEPRECATED :rotating_light:</h1>","_id":"@terminus/ui-select@1.0.4","_nodeVersion":"12.10.0","_npmVersion":"6.10.3","dist":{"integrity":"sha512-h4hJfxL788rgXPr5mKVl5Lv1kx40SRiHOEfJlN45fRWnriRl0ag/DNbkid5F5FvDEJ33dEFGxATSZRW/RJtreg==","shasum":"dbe9d05d14ddeff38c0831ee6bd2e7cc6b61336a","tarball":"https://registry.npmjs.org/@terminus/ui-select/-/ui-select-1.0.4.tgz","fileCount":76,"unpackedSize":1215882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4THvCRA9TVsSAnZWagAAeiMP/A0ZVyGnqcCUNtWdSIm0\n4VKaQgmEtPs4qOLf4z6YxtZbnjlXYxjZQU+bb+eVL9w7kP2lQAZWjuTzZRb5\ndShf6ex5W9rXmqFBf2MGnb2+tJ5uTFktGOh/46EB/ZzMki5WFCw8uqi9Sd4h\nAbrK7GwRAnsVX9H9vVQYji1+AHqVY8+biZB7jN1TbCdqRuL9DswnuJfP2bhC\nLLP0ov/kFqgKRoohXNhctNuN/VFCo11vtzk1todVlYdEjpt2CTDLjWqBxG39\nYSa+sIE1jsAcg1HaAHYcuj4VJeJ0f7nn1UdqCl9P+PRDlafVtlichtBHMkuh\np3UY1w0OQsdWFV4SxAghFJfGdyaKWPu4SCaLhEVXqcCP4D7PAc0Tj8IgNsZF\n+kFRfuotVHxH32GZ8kTKunYgIR82n4zVIqHR3d+JZRtt6CAzenMbUvAmAcFu\nxBey/loHDUAzPenISV9KNWVB1mlzoueRCKCKOoJukhjcIYn0Nhu/a8eApPpQ\nUCwOu6TjndMCR/FCArruLrTdORWkoTq4UdLm2WMxf0M3kjvthpX3jMW8KVBy\npdcSfSo5v2mJjvjVVapgq89MX/hy+io1RHs4o9htskKMnYm5ZqddxHVU7ERo\nO1g4E+uHWLpof7GvlR0zhfjE0xpKvwHF/1YZNtFUHIEPO1150qn7mjMVBncU\nah60\r\n=9sgf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDotelVcjrNrBNZoleWuF3oq9zfMAeeQNk8nNiwD+r7lgIgVDxqRX6lQ4NY0UI6R3L957zt/frcCvIV8dQ+HfjPI0M="}]},"maintainers":[{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"terminus_devops","email":"devops@terminus.com"}],"_npmUser":{"name":"benjamincharity","email":"ben@benjamincharity.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-select_1.0.4_1591816686454_0.47744965801783046"},"_hasShrinkwrap":false},"1.0.5":{"name":"@terminus/ui-select","version":"1.0.5","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/select"},"peerDependencies":{"@angular/animations":"^9.1.0","@angular/cdk":"^9.1.0","@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/flex-layout":"~9.0.0-beta.29","@angular/forms":"^9.1.0","@angular/material":"^9.1.0","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^2.0.2","@terminus/ngx-tools":"^8.0.5","@terminus/ui-checkbox":"^1.0.0","@terminus/ui-form-field":"^1.0.0","@terminus/ui-icon":"^1.0.0","@terminus/ui-input":"^1.0.0","@terminus/ui-option":"^1.0.0","@terminus/ui-spacing":"^1.0.0","@terminus/ui-validation-messages":"^1.0.0","rxjs":"^6.5.0"},"main":"bundles/terminus-ui-select.umd.js","module":"fesm5/terminus-ui-select.js","es2015":"fesm2015/terminus-ui-select.js","esm5":"esm5/terminus-ui-select.js","esm2015":"esm2015/terminus-ui-select.js","fesm5":"fesm5/terminus-ui-select.js","fesm2015":"fesm2015/terminus-ui-select.js","typings":"terminus-ui-select.d.ts","metadata":"terminus-ui-select.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0","@terminus/ui-utilities":"1.0.3","@terminus/ui-pipes":"1.0.3","date-fns":"2.14.0","@terminus/ui-validators":"1.0.3","text-mask-addons":"3.8.0","text-mask-core":"5.1.2"},"description":"<h1>Select :rotating_light: DEPRECATED :rotating_light:</h1>","_id":"@terminus/ui-select@1.0.5","_nodeVersion":"12.18.0","_npmVersion":"lerna/3.22.1/node@v12.18.0+x64 (linux)","dist":{"integrity":"sha512-moQ6hMomEp3tM49z4VLxraSKMSxT5aTMr5xBbY4hR0uQ2W2QQjkGw1NGHkqNnB5Rcz5/fDMwzgff+wrqPS7mzw==","shasum":"75473d95382529cdc70edb995dd7d9d5685149ed","tarball":"https://registry.npmjs.org/@terminus/ui-select/-/ui-select-1.0.5.tgz","fileCount":77,"unpackedSize":1217461,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4j1qCRA9TVsSAnZWagAA2hwP/RdNM4O/a5REZwW/Iwid\nrjDDwYoVdOt2mMxo1pDdpP0DxiH7H3Kq2vyt6k67ya6wM/ggqU9nKzMMKfEb\nLN6QrZ9jZpjmiS6PTU+2CvqF2LHmjFxs+V1z9K2b3w9jazT9e3It2XtAxsCq\nGOMSiH8yU6QWaGHgXfwhGsR10UjIJk7VYxc778uML9TOWaaaMdnuGAh30aSp\ncZATubs9OJRLK9QVmeJ32G/FdUjb5c9+ImVEWs9s4PwsmOJA7SV+gVztV8qj\n2Jeg3QjJsbBDgetn0vC+ws+dds461vZDqZ8fzzSsT4Y68NSOH0sgBdjYYmmd\nXGRFbTdglzSAfvm/uhin5iq6DSjD6FkugsYYgj/Oblxv9aDzdQw7F9bvKfZ8\ngRehBoW90oNXnAZfhs2C8mj3Kwl1Cp0Rma15d4IQDh1Zbx/iOCee3tOZqnZR\nTZ2piJnfnQll8cAjONqwIB74vqn7fBILHJL5IV3iNUsTK3AZw8bVqLq9iATY\nKCesrIYxelHsxwudKR1tf4bdAa9IfaUmjnl7X1tPT7/Fw8o8LI8Cd9DDYemM\nmfDW2TZcqMuH/kCQ907Ly5RsFyWlO+hD/5nCZV4JJ9Ec1DPxpzfdlOut1H5B\nCffl33LToBtFboWKJzYmp1cuZEzk8w+NbvpuMWvWsqJUPrYgZKswMsWbcSVD\ncE8g\r\n=M6oa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDol/aIk0j/zpOEZiXwbpgHJNY2m0kk8MIyXh/+VibykAiAJMm/s8SYUhFBSpZcJt5UYx3eOnWPr5h0y28euHGe61g=="}]},"maintainers":[{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"terminus_devops","email":"devops@terminus.com"}],"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-select_1.0.5_1591885161994_0.5570142517064021"},"_hasShrinkwrap":false},"1.0.6":{"name":"@terminus/ui-select","version":"1.0.6","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/select"},"peerDependencies":{"@angular/animations":"^9.1.0","@angular/cdk":"^9.1.0","@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/flex-layout":"~9.0.0-beta.29","@angular/forms":"^9.1.0","@angular/material":"^9.1.0","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^2.0.2","@terminus/ngx-tools":"^8.0.5","@terminus/ui-checkbox":"^1.0.0","@terminus/ui-form-field":"^1.0.0","@terminus/ui-icon":"^1.0.0","@terminus/ui-input":"^1.0.0","@terminus/ui-option":"^1.0.0","@terminus/ui-spacing":"^1.0.0","@terminus/ui-validation-messages":"^1.0.0","rxjs":"^6.5.0"},"main":"bundles/terminus-ui-select.umd.js","module":"fesm5/terminus-ui-select.js","es2015":"fesm2015/terminus-ui-select.js","esm5":"esm5/terminus-ui-select.js","esm2015":"esm2015/terminus-ui-select.js","fesm5":"fesm5/terminus-ui-select.js","fesm2015":"fesm2015/terminus-ui-select.js","typings":"terminus-ui-select.d.ts","metadata":"terminus-ui-select.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0"},"description":"<h1>Select :rotating_light: DEPRECATED :rotating_light:</h1>","_id":"@terminus/ui-select@1.0.6","_nodeVersion":"12.18.0","_npmVersion":"lerna/3.22.1/node@v12.18.0+x64 (linux)","dist":{"integrity":"sha512-6YYZFQV9eqjnDBhEfR6SDUTNklz8k1ExV2nPBH66laOjefMu/+XzTfqQ1XAC4cyVn26grzuN2Fweu1kRK+AMoA==","shasum":"344b418b77c24756a3ef1ffee4e7ad7a896c6c90","tarball":"https://registry.npmjs.org/@terminus/ui-select/-/ui-select-1.0.6.tgz","fileCount":77,"unpackedSize":1217345,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8iFOCRA9TVsSAnZWagAACzEQAJYdSuYiEnDMxMKqMYv5\nff440fuISveD9JIgAQJP6B6qCsKlhoUdU9aUiJsxRh1xrADgOcRXV46KVR6U\nV1ce2gTSMQEUSeiX8VaLoBOOlbc/07f8+BHUlDVuFfAkCL2e+mnzRWwv5ypY\n8nCxvhQR8H4wpyCwbLNI5XTFUNsxM03tHb4mrBkzbGbcTqro9aq32EzUykps\nMyJKHz/DVAasUvqFWi8h6g3zLXqCOqyAjSAIPOUvOtlBAMJJ23/KoINHOXKQ\n5iukcbBrQF+cK2DgKtodyd0P4eahGs9u/t0cKNHKjRl1Yhdsl11gzLcmg6MN\n77PGIzFViqF9Ek16tfYfWqy+EgBsQnBkE02IxkIlXrEE1KYeTYQ+4voqyWd8\n3X+OIji6Q6I23PlExQP6EqrOwDz0D0noOftn/JECH6QzqYSMuSUoatbdZA1w\nHUwCEBcPivTkez3VyG6HS3rgr1jhrER1zu9us7Ua1Vt0blT4JUxA6bmjVl+s\nPl5QwnkNxUxSgZVt4avCmIlSQa/7LmmEhD1lywJKy55lHiSMfx5LGJapZ3+o\n7PY267TopYUFcPh/M2LsC46Rcnylqg+jRbrlh4sgPLu1a8mD5vVm32VxvoAt\nN2EkMdcL31LCi0ZMIbfJOecwozPEuE46rjlXRINcxkxAowEtv0HG/b/Uil+5\nwl9M\r\n=vvRl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC6V3HQQPaWoRPXlvrjSJI9zhRGqjY0xE5l1HynuXeN5AiAt1crfMwW+2WXmWZCXutHVwSqbe5u5JF+z7RaDjb8bKw=="}]},"maintainers":[{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"terminus_devops","email":"devops@terminus.com"}],"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-select_1.0.6_1592926541497_0.7434960147236482"},"_hasShrinkwrap":false},"1.0.7":{"name":"@terminus/ui-select","version":"1.0.7","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/select"},"peerDependencies":{"@angular/animations":"^9.1.0","@angular/cdk":"^9.1.0","@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/flex-layout":"~9.0.0-beta.29","@angular/forms":"^9.1.0","@angular/material":"^9.1.0","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^2.0.2","@terminus/ngx-tools":"^8.0.5","@terminus/ui-checkbox":"^1.0.0","@terminus/ui-form-field":"^1.0.0","@terminus/ui-icon":"^1.0.0","@terminus/ui-input":"^1.0.0","@terminus/ui-option":"^1.0.0","@terminus/ui-spacing":"^1.0.0","@terminus/ui-validation-messages":"^1.0.0","rxjs":"^6.5.0"},"main":"bundles/terminus-ui-select.umd.js","module":"fesm5/terminus-ui-select.js","es2015":"fesm2015/terminus-ui-select.js","esm5":"esm5/terminus-ui-select.js","esm2015":"esm2015/terminus-ui-select.js","fesm5":"fesm5/terminus-ui-select.js","fesm2015":"fesm2015/terminus-ui-select.js","typings":"terminus-ui-select.d.ts","metadata":"terminus-ui-select.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0"},"description":"<h1>Select :rotating_light: DEPRECATED :rotating_light:</h1>","_id":"@terminus/ui-select@1.0.7","_nodeVersion":"12.18.1","_npmVersion":"lerna/3.22.1/node@v12.18.1+x64 (linux)","dist":{"integrity":"sha512-08oacJNoO9PbrGdQp1CMX8aZbe33NoZ/k7S4mNDxgnSuhkASWAWcEupgOalVjIXOUj6RIYK530JRBcwGCbDj5Q==","shasum":"5bdb17ecf1a6e8c7f749c3c04bf41c0f39201cd8","tarball":"https://registry.npmjs.org/@terminus/ui-select/-/ui-select-1.0.7.tgz","fileCount":77,"unpackedSize":1217544,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBJdFCRA9TVsSAnZWagAAmM4P/1mgyu0iEHjLO72qkhBZ\n1nw1Ck3HGKHQ4atmRyWy4cllRxPO9yq56PhGYLFVM3E4cQmOiWC2qVWadMnM\nsBlrR3LQ1+RorMcqkMr2eZiRVWlG0xm0LfhN2SVQxB6XnAY2HHJmFdhSYxTP\nxFB1fPtX6mxDKeJFQ1eUDrE6gSFvTnGGABINwcUlkzHXqaHP87MOrADGRJN5\nvVa4knZf35UfW7b1BEBNZ0BI6A6FYJESze5Q+Moocom4y7aM4umNRSX/fmAK\nugVN1s83Y3UWTxQLqh02B+osnyaLWyP1AMz32nZrpEKp2bVQwR/mJid8t5JV\nscM7yltgeIe6z2ZRAz7kE91d5zCfuDwyNcfry07k9kjij+AvtwpV8aYbBuHX\nUzUuhyVgGhP88yzeXX9osXI/2znKoPrrwnpKy1eOdmD6SPsXjiwzk+z54nVw\nhMOLLfSwYE3gqBG6hggiCHP2qTZqhnCa5CGZ2ezFZlrXRUq9s9uIJ4nZstID\nbehhTl+6+EKl8bjGzwPMhqZ/HLY8rlhWiONT7GtSlxtBBj7yOUqX/KjJNEHf\narKuf1RwxW2bqPh2rZLf32rsv/xUr5tprbkC9gPhOR3K3qVOj25Yl4nzWY/1\nKt0lIf2ETKskl498cgOw3VOqTzCp4BkZM1qa6Mh1qC3eTEU1ySm/mAgGdtfr\nISpa\r\n=kL75\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDw5KJTcjVppEiRu5x+ogT1meHDXqSx5rwhMDlNymJKGwIhALbmXZSGFT0/TQxvCV9j/xpauchfDlxMSFAgir59mRdE"}]},"maintainers":[{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"terminus_devops","email":"devops@terminus.com"}],"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-select_1.0.7_1594136389295_0.2988168508882074"},"_hasShrinkwrap":false},"1.0.8":{"name":"@terminus/ui-select","version":"1.0.8","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/select"},"peerDependencies":{"@angular/animations":"^9.1.0","@angular/cdk":"^9.1.0","@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/flex-layout":"~9.0.0-beta.29","@angular/forms":"^9.1.0","@angular/material":"^9.1.0","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^2.0.2","@terminus/ngx-tools":"^8.0.5","@terminus/ui-checkbox":"^1.0.0","@terminus/ui-form-field":"^1.0.0","@terminus/ui-icon":"^1.0.0","@terminus/ui-input":"^1.0.0","@terminus/ui-option":"^1.0.0","@terminus/ui-spacing":"^1.0.0","@terminus/ui-validation-messages":"^1.0.0","rxjs":"^6.5.0"},"schematics":"./schematics/collection.json","main":"bundles/terminus-ui-select.umd.js","module":"fesm5/terminus-ui-select.js","es2015":"fesm2015/terminus-ui-select.js","esm5":"esm5/terminus-ui-select.js","esm2015":"esm2015/terminus-ui-select.js","fesm5":"fesm5/terminus-ui-select.js","fesm2015":"fesm2015/terminus-ui-select.js","typings":"terminus-ui-select.d.ts","metadata":"terminus-ui-select.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0","@terminus/ui-utilities":"1.0.5","@terminus/ui-pipes":"1.0.6","@angular-devkit/schematics":"9.1.9","@schematics/angular":"10.0.0","date-fns":"2.14.0","@terminus/ui-validators":"1.0.5","text-mask-addons":"3.8.0","text-mask-core":"5.1.2"},"description":"<h1>Select :rotating_light: DEPRECATED :rotating_light:</h1>","_id":"@terminus/ui-select@1.0.8","_nodeVersion":"12.18.1","_npmVersion":"lerna/3.22.1/node@v12.18.1+x64 (linux)","dist":{"integrity":"sha512-dTeFkKLc2oP+LpF19JGZS0PSWg/uARr3RcznFhKtmME7+oOtkz/9hXYmrUyK9ta9j9fFgtFscxWBEKuq4tiFEQ==","shasum":"b2fa7b71b2f99707488f2b6d0247f2b142c7cee0","tarball":"https://registry.npmjs.org/@terminus/ui-select/-/ui-select-1.0.8.tgz","fileCount":77,"unpackedSize":1219325,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDLUFCRA9TVsSAnZWagAAaIQP/R03sg++kL34NqipVT3L\n3aGh9+seHTM7FDmDe0g3ws1vYDQ3IPSF2xN/PiMoYO1hhZWXxaU+sroGEERZ\nrRJ1O0JyhoB1d9WLKCwQJgAH3zWuh5ldT9D0mc0s6yfhMY6axnzT6mW9MUZ+\nZd/wFnxA15fDedDpx0PklxZtG5ZUJNrTMtVA+ozpVuyWvl0NiWoDdkfmn5bs\nd3V2Ahzca3TvSkWsoKHK8g05rI2XMUwbEukl8WMq/726U/vuo8IWFcXEJdp0\nu4XbH5W1ioSbaEuvczBIkXWK+/ijBCPABwv1yKcurxZqqgWnPZ10uQ81c30B\noseu+8bb5XsheCcmHzs+uVMs1ykmGsHlDwdtdsnHEKmMR4vpMpiijDlUQeNT\nSF2NY5mhtq/62Nb2aJ7z4Ka07VOx10TuDOEj9UCrtaTxZeNQbvaAcQgGYUbC\nz7lLzllTURzs9+MbAxa164pcDcfFM1DIe8j5eTQczt7AwsuK9sIUu8BSnD2l\nefEo1k+OQVxrU6TQ1KkPqgz8XlFeZ/9wmdZktUyVdpWJifQ+8ScDYV03W8MY\n9K+k52XvpEu8yqt9DzC7hU4FISKbdi3QsEWe7mk2pyf1Eh4E/vZhgIa5Vw1l\nHCHApL73X7mcLs2QToiOUoGsEkCDDaaCT2HiZCagPwtp2WozghOraheyis/B\nQJF4\r\n=7Wuc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGwv9qkxx/VDKsXfOSy+WcyCpQixHOgFcu0+Mji1KGcWAiEAnIZ9hJOD4qv7R/cqEuzDObzG8Ma3PBENfEsMIt77fR4="}]},"maintainers":[{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"terminus_devops","email":"devops@terminus.com"}],"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-select_1.0.8_1594668292355_0.34709890399921695"},"_hasShrinkwrap":false},"2.0.0":{"name":"@terminus/ui-select","version":"2.0.0","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/select"},"peerDependencies":{"@angular/animations":"^9.1.0","@angular/cdk":"^9.1.0","@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/flex-layout":"~9.0.0-beta.29","@angular/forms":"^9.1.0","@angular/material":"^9.1.0","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^3.1.0","@terminus/ngx-tools":"^8.0.5","@terminus/ui-checkbox":"^1.0.0","@terminus/ui-form-field":"^1.0.0","@terminus/ui-icon":"^1.0.0","@terminus/ui-input":"^1.0.0","@terminus/ui-option":"^1.0.0","@terminus/ui-spacing":"^1.0.0","@terminus/ui-validation-messages":"^1.0.0","rxjs":"^6.5.0"},"schematics":"./schematics/collection.json","main":"bundles/terminus-ui-select.umd.js","module":"fesm5/terminus-ui-select.js","es2015":"fesm2015/terminus-ui-select.js","esm5":"esm5/terminus-ui-select.js","esm2015":"esm2015/terminus-ui-select.js","fesm5":"fesm5/terminus-ui-select.js","fesm2015":"fesm2015/terminus-ui-select.js","typings":"terminus-ui-select.d.ts","metadata":"terminus-ui-select.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0","@angular-devkit/schematics":"9.1.9","@schematics/angular":"10.0.0","@terminus/ui-utilities":"1.0.7","@terminus/ui-pipes":"1.0.7","date-fns":"2.14.0","@fortawesome/fontawesome-svg-core":"1.2.30","@fortawesome/angular-fontawesome":"0.6.0","@terminus/ui-validators":"1.0.7","@fortawesome/pro-solid-svg-icons":"5.14.0","text-mask-addons":"3.8.0","text-mask-core":"5.1.2"},"readme":"<h1>Select :rotating_light: DEPRECATED :rotating_light:</h1>\n\n[![CI/CD Status][github-action-badge]][github-action-link] [![Codecov][codecov-badge]][codecov-project] [![MIT License][license-image]][license-url]  \n[![NPM version][npm-version-image]][npm-package] [![Library size][file-size-badge]][raw-distribution-js]\n\n---\n\n> :rotating_light: NOTE: This component is deprecated. Please use the [Selection List Component][selection-list-src].\n\n---\n\nA custom select dropdown.\n\n<!-- START doctoc generated TOC please keep comment here to allow auto update -->\n<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->\n**Table of Contents**\n\n- [Installation](#installation)\n  - [Packages that need to be installed](#packages-that-need-to-be-installed)\n  - [Modules that need to be in NgModule](#modules-that-need-to-be-in-ngmodule)\n  - [CSS imports](#css-imports)\n  - [CSS resources](#css-resources)\n- [Usage](#usage)\n  - [Label](#label)\n  - [Hint](#hint)\n  - [No validation or hint](#no-validation-or-hint)\n  - [FormControl](#formcontrol)\n  - [ngModel](#ngmodel)\n  - [Custom compare function](#custom-compare-function)\n  - [Optgroups](#optgroups)\n  - [Disabled](#disabled)\n    - [Disable via Input](#disable-via-input)\n    - [Disable via FormControl](#disable-via-formcontrol)\n    - [Disabled Option](#disabled-option)\n    - [Disabled Optgroup](#disabled-optgroup)\n  - [Required](#required)\n    - [Required by Input](#required-by-input)\n    - [Required by FormControl](#required-by-formcontrol)\n  - [Placeholder](#placeholder)\n  - [Custom trigger value](#custom-trigger-value)\n  - [Blank option](#blank-option)\n  - [Option template](#option-template)\n  - [Custom view value](#custom-view-value)\n  - [Multiple selections](#multiple-selections)\n  - [Custom delimiter](#custom-delimiter)\n  - [Custom sort comparator](#custom-sort-comparator)\n  - [Filterable](#filterable)\n  - [Allow user to request update](#allow-user-to-request-update)\n  - [Prompt the user to refine their search](#prompt-the-user-to-refine-their-search)\n  - [Events](#events)\n- [Test helpers](#test-helpers)\n\n<!-- END doctoc generated TOC please keep comment here to allow auto update -->\n\n## Installation\n\n### Packages that need to be installed\n\n- `@angular/cdk`\n- `@angular/common`\n- `@angular/core`\n- `@angular/flex-layout`\n- `@angular/forms`\n- `@angular/material`\n- `@angular/platform-browser`\n- `@terminus/design-tokens`\n- `@terminus/ngx-tools`\n- `@terminus/ui-checkbox`\n- `@terminus/ui-form-field`\n- `@terminus/ui-icon`\n- `@terminus/ui-input`\n- `@terminus/ui-option`\n- `@terminus/ui-pipes`\n- `@terminus/ui-validators`\n- `@terminus/ui-spacing`\n- `@terminus/ui-styles`\n- `@terminus/ui-validation-messages`\n- `@terminus/ui-utilities`\n- `@terminus/ui-select`\n- `date-fns`\n- `text-mask-addons`\n- `text-mask-core`\n\nUse the `ng add` command to quickly install all the needed dependencies:\n\n```bash\nng add @terminus/ui-select\n```\n\n### Modules that need to be in NgModule\n\n- `BrowserAnimationsModule,`\n- `TsOptionModule,`\n- `TsSelectModule,`\n- `FormsModule,`\n- `ReactiveFormsModule`\n\n### CSS imports\n\nIn your top level stylesheet, add these imports:\n\n```css\n@import '~@terminus/design-tokens/css/library-design-tokens.css';\n@import '~@terminus/ui-styles/terminus-ui.css';\n```  \n\n### CSS resources\n\nLoad the needed font families by adding this link to the `<head>` of your application:\n\n```css\n<link href=\"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400&display=swap\" rel=\"stylesheet\">\n```\n\n## Usage\n\nThe most basic usage is by wrapping one or more `ts-option`s inside an `ts-select`:\n\n```html\n<!-- Define the option value by passing a property to the option's `value` input -->\n<ts-select>\n  <ts-option\n    *ngFor=\"let item of items\"\n    [value]=\"item.value\"\n  >{{ item.name }}</ts-option>\n</ts-select>\n```\n\n### Label\n\nDefine a label on the select:\n\n```html\n<ts-select label=\"My cool label!\">\n  ...\n</ts-select>\n```\n\n### Hint\n\nDefine a hint on the select:\n\n```html\n<ts-select hint=\"Please select an option\">\n  ...\n</ts-select>\n```\n\n### No validation or hint\n\nA flag to define whether this select field needs validation or hint. If it needs validation or hint, a padding bottom is added for the message, otherwise, no padding at the bottom.\n\n```html\n<ts-select\n  [formControl]=\"myCtrl\"\n  [noValidationOrHint]=\"true\"\n></ts-select>\n```\n\n### FormControl\n\nTo use a `FormControl` with the select, pass the control in:\n\n```html\n<ts-select [formControl]=\"myCtrl\">\n  ...\n</ts-select>\n```\n\n### ngModel\n\nTo use `ngModel`, add the model to the select:\n\n```html\n<ts-select [(ngModel)]=\"myModel\">\n  ...\n</ts-select>\n```\n\n### Custom compare function\n\nIf more refined control of how options are compared is needed, a custom comparator function can be used:\n\n```html\n<ts-select [compareWith]=\"compareByReference\">\n  ...\n</ts-select>\n```\n\n```typescript\n// Example comparing by reference:\ncompareByReference(f1: any, f2: any) { return f1 === f2; }\n\n// Example comparing by value:\ncompareByValue(f1: any, f2: any) { return f1 && f2 && f1.text === f2.text; }\n```\n\n```typescript\nTsOptionCompareWith = (o1: any, o2: any) => boolean;\n```\n\n### Optgroups\n\nOptgroups can be used by wrapping one or more options inside an optgroup component:\n\n```html\n<ts-select>\n  <ts-select-optgroup\n    *ngFor=\"let group of itemsWithGroups\"\n    [label]=\"group.myLabel\"\n  >\n    <ts-option\n      *ngFor=\"let child of group.children\"\n      [value]=\"child.slug\"\n    >{{ child.foo }}</ts-option>\n  </ts-select-optgroup>\n</ts-select>\n```\n\n### Disabled\n\nThe entire select can be disabled in one of two ways:\n\n#### Disable via Input\n\n```html\n<ts-select [isDisabled]=\"true\">\n  ...\n</ts-select>\n```\n\n#### Disable via FormControl\n\n```typescript\nmyCtrl = new FormControl({value: null, disabled: true});\n```\n\n```html\n<ts-select [formControl]=\"myCtrl\">\n  ...\n</ts-select>\n```\n\n#### Disabled Option\n\nIndividual options may also be disabled:\n\n```html\n<ts-select>\n  <ts-option\n    *ngFor=\"let option of options\"\n    [value]=\"option.value\"\n    [isDisabled]=\"option.disabled\" <!-- Disabled when true -->\n  >{{ option.name }}</ts-option>\n</ts-select>\n```\n\n#### Disabled Optgroup\n\nEntire optgroups can be disabled just like options. When an optgroup is disabled, all options that are children of that optgroup\nare also disabled.\n\n```html\n<ts-select>\n  <ts-select-optgroup\n    *ngFor=\"let group of itemsWithGroups\"\n    [label]=\"group.myLabel\"\n    [isDisabled]=\"option.disabled\" <!-- Disabled when true -->\n  >\n    <ts-option\n      *ngFor=\"let child of group.children\"\n      [value]=\"child.slug\"\n    >{{ child.foo }}</ts-option>\n  </ts-select-optgroup>\n</ts-select>\n```\n\n### Required\n\nThe entire select can be marked required in one of two ways:\n\n#### Required by Input\n\n```html\n<ts-select [isRequired]=\"true\">\n  ...\n</ts-select>\n```\n\n#### Required by FormControl\n\n```typescript\nmyCtrl = new FormControl(null, Validators.required);\n```\n\n```html\n<ts-select [formControl]=\"myCtrl\">\n  ...\n</ts-select>\n```\n\n### Placeholder\n\nThe placeholder is used for the trigger value when the control or model value is empty.\n\n```html\n<ts-select placeholder=\"Please make a selection.\">\n  ...\n</ts-select>\n```\n\n### Custom trigger value\n\nCustom HTML can be used for the trigger value by using the `ts-select-trigger` component. This trigger will be shown when the control or\nmodel does have value.\n\n```html\n<ts-select>\n  <!-- Here is my custom trigger! -->\n  <ts-select-trigger>\n    My custom trigger!\n    With <strong>custom</strong> HTML!\n  </ts-select-trigger>\n\n  <ts-option\n    [value]=\"option.value\"\n    *ngFor=\"let option of options\"\n  >{{ option.name }}</ts-option>\n</ts-select>\n```\n\n### Blank option\n\nA blank option can be implemented by adding a `ts-option` with no value:\n\n```html\n<ts-select [formControl]=\"myForm.get('myChoices1')\">\n  <ts-option>\n    None\n  </ts-option>\n\n  <ts-option\n    [value]=\"option.value\"\n    *ngFor=\"let option of options\"\n  >{{ option.name }}</ts-option>\n</ts-select>\n```\n\n### Option template\n\nA custom template can be used for the option content.\n\n> NOTE: The option object *must* be passed into the option when using a custom template\n\n```html\n<ts-select>\n  <ts-option\n    *ngFor=\"let option of options\"\n    [value]=\"option.value\"\n    [option]=\"option\"\n  >\n    <!-- The object you pass to the `option` input will be exposed as `option` in the template -->\n    <ng-template let-option>\n      <div class=\"myClass\">\n        <h4>{{ option.name }}</h4>\n        <small>{{ option.value / 100 }}%</small>\n      </div>\n    </ng-template>\n  </ts-option>\n</ts-select>\n```\n\n### Custom view value\n\nPart of the option view can be defined as the 'view value' which is used to define the `title` attribute for the option:\n\n```html\n<ts-select>\n  <ts-option\n    *ngFor=\"let option of options\"\n    [value]=\"option.value\"\n    [option]=\"option\"\n  >\n    <ng-template let-option>\n      <div class=\"myClass\">\n        <!-- The content of this h4 will be used for the option title -->\n        <h4 tsOptionDisplay>{{ option.name }}</h4>\n        <small>{{ option.value / 100 }}%</small>\n      </div>\n    </ng-template>\n  </ts-option>\n</ts-select>\n```\n\n### Multiple selections\n\nAllow multiple selections via an `@Input`:\n\n```html\n<ts-select [allowMultiple]=\"true\">\n  ...\n</ts-select>\n```\n\nThis will show checkboxes next to each option and include a top-level 'Select All' toggle.\n\n### Custom delimiter\n\nThe delimiter is used to separate multiple options when shown in the trigger. By default this is a comma (`,`). A custom delimiter may also\nbe set:\n\n```html\n<ts-select\n  [allowMultiple]=\"true\"\n  delimiter=\"/\"\n>\n  ...\n</ts-select>\n<!-- Standard output: `foo, bar, baz` -->\n<!-- Output with custom delimiter: `foo/ bar/ baz` -->\n```\n\n### Custom sort comparator\n\nBy default, the selections will be stored in the order matching the order of items passed in. A custom sort comparator may be passed in\nto alter the sort order.\n\n```html\n<ts-select [sortComparator]=\"myComparatorFn\">\n  ...\n</ts-select>\n```\n\nThe comparator function type is `TsSelectSortComparatorFunction` and has the following format:\n\n```typescript\ntype TsSelectSortComparatorFunction = (\n  a: TsOptionComponent,\n  b: TsOptionComponent,\n  options: TsOptionComponent[],\n) => number;\n```\n\n### Filterable\n\nA select can include an input at the top of the list to filter options:\n\n```html\n<ts-select\n  [formControl]=\"myCtrl\"\n  [isFilterable]=\"true\"\n  (queryChange)=\"mySearchFunction($event)\"\n>\n  ...\n</ts-select>\n```\n\nAny unique, debounced query will be emitted through the `queryChange` emitter. The consumer is in control of what options are displayed. A\nblank option can be used to show the user a message when no items are found by the query.\n\n### Allow user to request update\n\nThere are times where the data may change after it is loaded. The `showRefresh` option allows the user to manually request updated data.\n\n```html\n<ts-select\n  [formControl]=\"myCtrl\"\n  [showRefresh]=\"true\"\n  (optionsRefreshRequested)=\"userRequestedRefresh()\"\n>\n  ...\n</ts-select>\n```\n\n### Prompt the user to refine their search\n\nFor certain queries it is not always possible to return all options. In those cases, we should prompt the user to refine their search for\nbetter results.\n\n```html\n<ts-select\n  [formControl]=\"myCtrl\"\n  [showRefineSearchMessage]=\"true\"\n>\n  ...\n</ts-select>\n```\n\nThis will show a message below all existing options:\n\n```bash\nNarrow your search to reveal hidden results.\n```\n\nIf the `totalHiddenResults` input is defined, the count will be included in the message:\n\n```html\n<ts-select\n  [formControl]=\"myCtrl\"\n  [showRefineSearchMessage]=\"true\"\n  [totalHiddenResults]=\"972\"\n>\n  ...\n</ts-select>\n```\n\nThis will show a message below all existing options:\n\n```bash\nNarrow your search to reveal 972 hidden results.\n```\n\n### Events\n\nMultiple events are fired during interaction with the select:\n\n| Event                     | Description                                     | Payload              |\n|:--------------------------|:------------------------------------------------|:---------------------|\n| `closed`                  | Fired when the panel is closed                  | `undefined`          |\n| `duplicateSelection`      | Fired when a duplicate selection is made        | `string`             |\n| `opened`                  | Fired when the panel is open                    | `undefined`          |\n| `optionDeselected`        | Fired when an option is deselected              | `TsSelectChange`     |\n| `optionSelected`          | Fired when an option is selected                | `TsSelectChange`     |\n| `optionsRefreshRequested` | Fired when the user selects the refresh trigger | `undefined`          |\n| `queryChange`             | Fired when query changes                        | `string`             |\n| `selectionChange`         | Fired when the selection changes                | `TsSelectChange`     |\n| `valueChange`             | Fired when the selection value changes          | `string \\| string[]` |\n\n```html\n<ts-select (selectionChange)=\"myFunction($event)\">\n  ...\n</ts-select>\n```\n\nThe `TsSelectChange` structure:\n\n```typescript\nclass TsSelectChange {\n  constructor(\n    // Reference to the select that emitted the change event\n    public source: TsSelectComponent,\n    // The current value\n    public value: any,\n  ) {}\n}\n\n```\n\n## Test helpers\n\nSome helpers are exposed to assist with testing. These are imported from `@terminus/ui-select/testing`;\n\n[[source]][test-helpers-src]\n\n| Function                  |\n|---------------------------|\n| `getSelectInstance`       |\n| `getSelectElement`        |\n| `getSelectTriggerElement` |\n| `getToggleAllElement`     |\n| `getPanelElement`         |\n| `getAllOptionInstances`   |\n| `getOptionInstance`       |\n| `getOptionElement`        |\n| `getAllOptgroups`         |\n| `getOptgroup`             |\n| `getOptgroupElement`      |\n| `getAllChipInstances`     |\n| `getChipInstance`         |\n| `getChipElement`          |\n| `getFilterInputElement`   |\n\n\n<!-- Links -->\n[test-helpers-src]:    testing/src/test-helpers.ts\n[selection-list-src]:  ../selection-list/\n[license-url]:         https://github.com/GetTerminus/terminus-oss/blob/release/LICENSE\n[license-image]:       http://img.shields.io/badge/license-MIT-blue.svg\n[codecov-project]:     https://codecov.io/gh/GetTerminus/terminus-oss\n[codecov-badge]:       https://codecov.io/gh/GetTerminus/terminus-oss/branch/release/graph/badge.svg\n[npm-version-image]:   http://img.shields.io/npm/v/@terminus/ui-select.svg\n[npm-package]:         https://www.npmjs.com/package/@terminus/ui-select\n[github-action-badge]: https://github.com/GetTerminus/terminus-oss/workflows/Release%20CI/badge.svg\n[github-action-link]:  https://github.com/GetTerminus/terminus-oss/actions?query=workflow%3A%22CI+Release%22\n[file-size-badge]:     http://img.badgesize.io/https://unpkg.com/@terminus/ui-select/bundles/terminus-ui-select.umd.min.js?compression=gzip\n[raw-distribution-js]: https://unpkg.com/@terminus/ui-select/bundles/terminus-ui-select.umd.js\n","readmeFilename":"README.md","description":"<h1>Select :rotating_light: DEPRECATED :rotating_light:</h1>","_id":"@terminus/ui-select@2.0.0","_nodeVersion":"12.18.2","_npmVersion":"lerna/3.22.1/node@v12.18.2+x64 (linux)","dist":{"integrity":"sha512-i7Yb3CPdKnbbj2QseS3acqfIHrX3OLcIi8Y1pON/PEuNUzr6FPyPd27y3tKKlk8Ps3eV5FZhTjKt2v6V4ZS+4g==","shasum":"27b4ba7bb9f486dce2652e19248d17e72a06377d","tarball":"https://registry.npmjs.org/@terminus/ui-select/-/ui-select-2.0.0.tgz","fileCount":81,"unpackedSize":1224707,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHy2wCRA9TVsSAnZWagAAzb4P/jHEwX6R6Hfx8Uo9+3E0\nzGcWrGg8vgMTEN9rz77cv2p1SydeX0sMyMWx9loHBMoEVLohBDqba2U++7Wq\ngqGeZnShaCsJccKfrH6Rq3ovp1G5b/LizVATCL4H7EGow/hYGwzNMk2gR+fM\nuh62blczyyJwPmBsuqKa2NW7jtJySw2pA9g/q+VnIZGxCHskRBjPPGZp790m\n4hQ+WekEaNSjeSPXVlulMeQ5HgGon+G1WniKnABKusvMxzfzNY7Z5dQO76Gw\nBd+XzvjTBHL3/5XK06k0Q36OVE923QFPepDRAVO8UfwDW60yfBfXzncnO9wv\ntscwT0dzlHuzC4w7+AV4hp9ZvJvx0rjPWoP5LHvPY03bxCJGc02UfpN6Bpn+\n+36/WiZHiN2F/0kH76HrFNytmmXWIknMaQX4p2Sjje0VPggdtCgjOswNz/vC\n3+L3L9tHOh51n3zx7HnFTXoU07EMoprZgUg9sXe+RQfGS3hsFVRBoUF8w19b\nM9/wbbabgUVem7p8zmwBcmlpEXWLjB6YgIbls0EMBdfCEb0OjWwzT+tPvUhN\nKH2E44hZABYulf4iH4xZXdpNAgcn5YhGachhsdNBlnOzjglw+f0HdRaylOug\nHXQRBFHqDkd1J9VU2iatow2Lr0NqnSRHB4k4wh70L/YjU6yh2hbyFjkZdP42\noPK3\r\n=2unB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDXOrOkyCgLTtVIDMvq2Zq+WPlkQ0tJmvkWIdOGGhvDSgIgCh8ajNNDNMi7v1hYG4disxY9GkObkmTYINkPL7l6sf4="}]},"maintainers":[{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"terminus_devops","email":"devops@terminus.com"}],"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-select_2.0.0_1595878831801_0.39214985861260776"},"_hasShrinkwrap":false},"2.0.1":{"name":"@terminus/ui-select","version":"2.0.1","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/select"},"peerDependencies":{"@angular/animations":"^9.1.0","@angular/cdk":"^9.1.0","@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/flex-layout":"~9.0.0-beta.29","@angular/forms":"^9.1.0","@angular/material":"^9.1.0","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^3.1.0","@terminus/ngx-tools":"^8.0.5","@terminus/ui-checkbox":"^2.0.0","@terminus/ui-form-field":"^2.0.0","@terminus/ui-icon":"^2.0.0","@terminus/ui-input":"^2.0.0","@terminus/ui-option":"^1.0.8","@terminus/ui-spacing":"^1.0.9","@terminus/ui-validation-messages":"^1.0.11","rxjs":"^6.5.0"},"schematics":"./schematics/collection.json","main":"bundles/terminus-ui-select.umd.js","module":"fesm5/terminus-ui-select.js","es2015":"fesm2015/terminus-ui-select.js","esm5":"esm5/terminus-ui-select.js","esm2015":"esm2015/terminus-ui-select.js","fesm5":"fesm5/terminus-ui-select.js","fesm2015":"fesm2015/terminus-ui-select.js","typings":"terminus-ui-select.d.ts","metadata":"terminus-ui-select.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0","@angular-devkit/schematics":"9.1.9","@schematics/angular":"10.0.0","@terminus/ui-utilities":"1.0.8","@terminus/ui-pipes":"1.0.8","date-fns":"2.14.0","@fortawesome/fontawesome-svg-core":"1.2.30","@fortawesome/angular-fontawesome":"0.6.0","@terminus/ui-validators":"1.0.8","@fortawesome/pro-solid-svg-icons":"5.14.0","text-mask-addons":"3.8.0","text-mask-core":"5.1.2"},"description":"<h1>Select :rotating_light: DEPRECATED :rotating_light:</h1>","_id":"@terminus/ui-select@2.0.1","_nodeVersion":"12.18.2","_npmVersion":"lerna/3.22.1/node@v12.18.2+x64 (linux)","dist":{"integrity":"sha512-bTqmtbtIn5ERxEW2jxJ223Dr8EFjxgn5lA8Nx6VOwtCewaR7PiZsNoz377O2EeKq9uzsXRGB7k04V1KjQdBGKQ==","shasum":"6ee18f7f7ebad5b4bdf27a0e02a05ab502ea0a09","tarball":"https://registry.npmjs.org/@terminus/ui-select/-/ui-select-2.0.1.tgz","fileCount":81,"unpackedSize":1224995,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIERqCRA9TVsSAnZWagAAQr4P/17M9Fl6tGFR3VOAqDMy\nD8SnhVYXxFTrLBjTN2t2Vtbfy9J2XGEETYxE/P+2FNJPIy7u3e9oSA7F/fxh\n/m1t8tHJxDBYxhJQJ0kUQBoMS/v8sPOHZKMSjW1CNypLM9Y2ao1PJu+dhA1t\nosrk2kspsR62rMXTSQL7WTv1So0bxsXDQYGDgxdJh9ibTqQO89SbplHQwX3x\nwgjkoNL8CD8Krq1A7uzhzMLj9ocvCGMh4/UrglAiaR1yDfZ/k8Xe0+ivc6sB\nH2yxGXKzigU4S/dbkJWYRNQsUWXtwworoItIkIoBZXOQp9mJaQ92aRktpN72\n1HUA/vxhjAD9ImTj8wWFa6zs9eCkH3EZyx2rEKD0h0JTmfk33SpOBmlRKgCv\nEQs416GoCJNaNHSXeDdm9nfrx4HUzgvkcV6EdazTMNJi4oHZsdcYCWceQFqN\nVUJH3KZ/It5nBcMcaaV5Zkga1NXVnOIIctHeeIy12A3KRLTVu3cHQGNgvSUa\naH6V4CK7RlBPSwvlpIH/ucga9L8zQQSze6kUGVjtt1wbAeNnp6BOBVnxoETo\nVz0OapiH6Y1rLCKVl1bqYKudQzzPcnaon3YyuigTdbKQd1xI2aNQT2qMmKRD\nE1BFVrTFWAQQnAmFPp05hde6XdlPlWqxuhd4aw+a3zlfNQMoaLjq0MpurL5M\nrSkf\r\n=xhZe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFmC6VsfZJe5+wqHyUP2ejUchmxaNopLd/ri0kMuyMm5AiABLq/8NZEaOGRhplnMJqc8JgNgQmK/BUnCTsP92WLxlw=="}]},"maintainers":[{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"terminus_devops","email":"devops@terminus.com"}],"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-select_2.0.1_1595950185450_0.5573991769579196"},"_hasShrinkwrap":false},"2.0.2":{"name":"@terminus/ui-select","version":"2.0.2","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/select"},"peerDependencies":{"@angular/animations":"^9.1.0","@angular/cdk":"^9.1.0","@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/flex-layout":"~9.0.0-beta.29","@angular/forms":"^9.1.0","@angular/material":"^9.1.0","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^3.1.0","@terminus/ngx-tools":"^8.0.5","@terminus/ui-checkbox":"^2.0.0","@terminus/ui-form-field":"^2.0.0","@terminus/ui-icon":"^2.0.0","@terminus/ui-input":"^2.0.0","@terminus/ui-option":"^1.0.8","@terminus/ui-spacing":"^1.0.9","@terminus/ui-validation-messages":"^1.0.11","rxjs":"^6.5.0"},"schematics":"./schematics/collection.json","main":"bundles/terminus-ui-select.umd.js","module":"fesm5/terminus-ui-select.js","es2015":"fesm2015/terminus-ui-select.js","esm5":"esm5/terminus-ui-select.js","esm2015":"esm2015/terminus-ui-select.js","fesm5":"fesm5/terminus-ui-select.js","fesm2015":"fesm2015/terminus-ui-select.js","typings":"terminus-ui-select.d.ts","metadata":"terminus-ui-select.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0","@angular-devkit/schematics":"9.1.9","@schematics/angular":"10.0.0","@terminus/ui-utilities":"1.0.8","@terminus/ui-pipes":"1.0.8","date-fns":"2.14.0","@fortawesome/fontawesome-svg-core":"1.2.30","@fortawesome/angular-fontawesome":"0.6.0","@terminus/ui-validators":"1.0.8","@fortawesome/pro-solid-svg-icons":"5.14.0","text-mask-addons":"3.8.0","text-mask-core":"5.1.2"},"description":"<h1>Select :rotating_light: DEPRECATED :rotating_light:</h1>","_id":"@terminus/ui-select@2.0.2","_nodeVersion":"12.18.2","_npmVersion":"lerna/3.22.1/node@v12.18.2+x64 (linux)","dist":{"integrity":"sha512-YZYO6loIdype/NILY7lft0w1V0eqx/novBPq1o6D9VK32ZBsgICkgBLd4aPf/qsglYouGtZ/SqIC4TGQ/cD/Xg==","shasum":"131ba052bc2c903ffd4444e838079fea0c71b2ba","tarball":"https://registry.npmjs.org/@terminus/ui-select/-/ui-select-2.0.2.tgz","fileCount":81,"unpackedSize":1225665,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIG5vCRA9TVsSAnZWagAAxq0QAIIdofQBC8zP6/hDivng\neyP3YzDVXk6KCdrUWww1/ofXnXnfFXPf/MgbJBjDjkon73U9D18hOfxyEeA5\nPKXMWFVDF2hi2CIJxDopBcw2pf+elBp58pVC0E+puK+E9b0xvrraRXxE5HhD\nmLd236Y9jUnYwyhT9DXpDHvUFu+MviklVhgMrT8X5iHlghBhurF6dmMRy652\nyroi+xX8SaRlqKlYUk9ct5cVyRFXyJ8F39X/1n88nTemoEwDo7gi9gEv+0E2\ncLM15jp+HX+h/k9b3K1JvQjgOUsyzV9n6VC30G4L8LUodTQIavTZhQKAYFsz\n0vf/RJ4voU69j7WtvvUs41BQF/ClRDh/jdMAqSFWPkmngOdKBAZrjx8CCFUX\nt7668tA1k1XlHAGTjnp15aszOf4PvEarP548lHsLy+RYgTtwp9h3kL+/EGaz\ntuF2h6vbVXe38u0dI3Upqag57cFYUOdkaOXNJgqCnC8YKSdalL3z6ZLI07av\nHzwJWzqqJCJGMslVTLO/DIFq6Ui6LQPNYqFrd46B2+mSBrR9lLs2XhGaG0UB\nXGq8AfEu7mI3TgInL0bvkhpJV/cT9uHZ3FxoLpyZvb3pCn0OeH5LaNXq2sgh\nKBobBW7n0CTkWkdkLE/4QO7NqZpv0HJp61btIr7Kdxcb8fToe5Z+yi1XGNyu\n71wJ\r\n=cQne\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAfl4QW2aurCdQ2YGOQTjzFOqBOtQ/IIsBwx86+TiMGtAiA0nVw/UHDZgs9Q4PF9YTzx9RUaTLQKeZVBWJRBaSTzxw=="}]},"maintainers":[{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"terminus_devops","email":"devops@terminus.com"}],"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-select_2.0.2_1595960942483_0.43750155834050686"},"_hasShrinkwrap":false},"2.0.3":{"name":"@terminus/ui-select","version":"2.0.3","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/select"},"peerDependencies":{"@angular/animations":"^9.1.0","@angular/cdk":"^9.1.0","@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/flex-layout":"~9.0.0-beta.29","@angular/forms":"^9.1.0","@angular/material":"^9.1.0","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^3.1.0","@terminus/ngx-tools":"^8.0.5","@terminus/ui-checkbox":"^2.0.0","@terminus/ui-form-field":"^2.0.0","@terminus/ui-icon":"^2.0.0","@terminus/ui-input":"^2.0.0","@terminus/ui-option":"^1.0.8","@terminus/ui-spacing":"^1.0.9","@terminus/ui-validation-messages":"^1.0.11","rxjs":"^6.5.0"},"schematics":"./schematics/collection.json","main":"bundles/terminus-ui-select.umd.js","module":"fesm5/terminus-ui-select.js","es2015":"fesm2015/terminus-ui-select.js","esm5":"esm5/terminus-ui-select.js","esm2015":"esm2015/terminus-ui-select.js","fesm5":"fesm5/terminus-ui-select.js","fesm2015":"fesm2015/terminus-ui-select.js","typings":"terminus-ui-select.d.ts","metadata":"terminus-ui-select.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0","@angular-devkit/schematics":"9.1.9","@schematics/angular":"10.0.0","@terminus/ui-utilities":"1.0.8","@terminus/ui-pipes":"1.0.8","date-fns":"2.14.0","@fortawesome/fontawesome-svg-core":"1.2.30","@fortawesome/angular-fontawesome":"0.6.0","@terminus/ui-validators":"1.0.8","@fortawesome/pro-solid-svg-icons":"5.14.0","text-mask-addons":"3.8.0","text-mask-core":"5.1.2"},"description":"<h1>Select :rotating_light: DEPRECATED :rotating_light:</h1>","_id":"@terminus/ui-select@2.0.3","_nodeVersion":"12.18.3","_npmVersion":"lerna/3.22.1/node@v12.18.3+x64 (linux)","dist":{"integrity":"sha512-RJHiqeHgUwkEmXEgZJXKwJRDfUfU3oUYp9Kvpps68069r+N/CuCPMw/u7LXeVCkY4bGz3IpGfR46DJVfChbGtg==","shasum":"161f7cb1e627eb8653e84f4ccd2f6102e1ef8c63","tarball":"https://registry.npmjs.org/@terminus/ui-select/-/ui-select-2.0.3.tgz","fileCount":81,"unpackedSize":1225868,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIZcDCRA9TVsSAnZWagAAAhIQAJIh5eO01KXCLjT3kE8p\noBfsm12G/RCbLN3tnBEQand+tVMr18CyF1z32JogDRctlYUbXxto3bSqwSxS\nWmM/okr3AHDRIF6jMbM0FA+UGzPPsEui8rICRRst+au/siy+w2aE4OS1hMrG\nNP2a9+/L9LZC94igrC4E98pPmndQqsHfruHdS14W/85/gETrG0I6YuiuTSmL\ns2VDHl1QFLNZx/9o1EDu4Xy03L0+HOjF+SkhQ26tGAC1w+2md14z4Rd0GN2f\nwJZCYhHLv2Jrqj/J1XNs7Fk6dU4uGtVGw4pmPfrQvTHLhl/wolCzOoZv/FM6\nlVncQ1vVYg3LQLC5OMooFivmAZZPqFswJ6K8IEJ8Qi3Pnmy2dsE7j4Lw6RWi\n6ouxDV6AaYWeF4/s4wO6zBq/K30kvKw8mmdlKb47A0T4F5CgNZwEQHV6EL9i\n2eRKK78CBFykLRg1UBYmjNgWs1uzb3u//ANWmf+e7nZy/Ej9igzzpvo8iRV6\nwBsALF6olVbUD8IlFBTOkwoef7u3DUgdH3mk/55LjoTI3US3yufUTu7b7Lv0\ntXV1ww8rSpZRRR0LFVIYcHY3bcvjHz3bpEmKsu20klFFsmHA3g+JcTn5yUfO\nyZALj/kjZqCFpsFyVMW6hltOsM9RMjQdzkfLLmohwJhfkkF7l2N+pE0ZFALj\nji09\r\n=SElm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE4ycUVSKbzs1tznXuwcFZTz3KYeo+K2Qirwjza42N71AiEAlTP8av2P3dLhLDR3qPAL95DSorkWi+bHJ+qN4BcOcWY="}]},"maintainers":[{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"terminus_devops","email":"devops@terminus.com"}],"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-select_2.0.3_1596036866717_0.7053405545151015"},"_hasShrinkwrap":false},"2.0.4":{"name":"@terminus/ui-select","version":"2.0.4","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/select"},"peerDependencies":{"@angular/animations":"^9.1.0","@angular/cdk":"^9.1.0","@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/flex-layout":"~9.0.0-beta.29","@angular/forms":"^9.1.0","@angular/material":"^9.1.0","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^3.1.0","@terminus/fe-utilities":"^1.0.0","@terminus/ui-checkbox":"^2.0.0","@terminus/ui-form-field":"^2.0.0","@terminus/ui-icon":"^2.0.0","@terminus/ui-input":"^2.0.0","@terminus/ui-option":"^1.0.8","@terminus/ui-spacing":"^1.0.9","@terminus/ui-validation-messages":"^1.0.11","rxjs":"^6.5.0"},"schematics":"./schematics/collection.json","main":"bundles/terminus-ui-select.umd.js","module":"fesm5/terminus-ui-select.js","es2015":"fesm2015/terminus-ui-select.js","esm5":"esm5/terminus-ui-select.js","esm2015":"esm2015/terminus-ui-select.js","fesm5":"fesm5/terminus-ui-select.js","fesm2015":"fesm2015/terminus-ui-select.js","typings":"terminus-ui-select.d.ts","metadata":"terminus-ui-select.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0","date-fns":"2.14.0","@angular-devkit/schematics":"9.1.9","@schematics/angular":"9.1.12","@terminus/ui-utilities":"1.0.9","@terminus/ui-pipes":"1.0.9","@fortawesome/fontawesome-svg-core":"1.2.30","@fortawesome/angular-fontawesome":"0.6.0","@terminus/ui-validators":"1.0.9","@fortawesome/pro-solid-svg-icons":"5.14.0","text-mask-addons":"3.8.0","text-mask-core":"5.1.2"},"readme":"<h1>Select :rotating_light: DEPRECATED :rotating_light:</h1>\n\n[![CI/CD Status][github-action-badge]][github-action-link] [![Codecov][codecov-badge]][codecov-project] [![MIT License][license-image]][license-url]  \n[![NPM version][npm-version-image]][npm-package] [![Library size][file-size-badge]][raw-distribution-js]\n\n---\n\n> :rotating_light: NOTE: This component is deprecated. Please use the [Selection List Component][selection-list-src].\n\n---\n\nA custom select dropdown.\n\n<!-- START doctoc generated TOC please keep comment here to allow auto update -->\n<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->\n**Table of Contents**\n\n- [Installation](#installation)\n  - [Packages that need to be installed](#packages-that-need-to-be-installed)\n  - [Modules that need to be in NgModule](#modules-that-need-to-be-in-ngmodule)\n  - [CSS imports](#css-imports)\n  - [CSS resources](#css-resources)\n- [Usage](#usage)\n  - [Label](#label)\n  - [Hint](#hint)\n  - [No validation or hint](#no-validation-or-hint)\n  - [FormControl](#formcontrol)\n  - [ngModel](#ngmodel)\n  - [Custom compare function](#custom-compare-function)\n  - [Optgroups](#optgroups)\n  - [Disabled](#disabled)\n    - [Disable via Input](#disable-via-input)\n    - [Disable via FormControl](#disable-via-formcontrol)\n    - [Disabled Option](#disabled-option)\n    - [Disabled Optgroup](#disabled-optgroup)\n  - [Required](#required)\n    - [Required by Input](#required-by-input)\n    - [Required by FormControl](#required-by-formcontrol)\n  - [Placeholder](#placeholder)\n  - [Custom trigger value](#custom-trigger-value)\n  - [Blank option](#blank-option)\n  - [Option template](#option-template)\n  - [Custom view value](#custom-view-value)\n  - [Multiple selections](#multiple-selections)\n  - [Custom delimiter](#custom-delimiter)\n  - [Custom sort comparator](#custom-sort-comparator)\n  - [Filterable](#filterable)\n  - [Allow user to request update](#allow-user-to-request-update)\n  - [Prompt the user to refine their search](#prompt-the-user-to-refine-their-search)\n  - [Events](#events)\n- [Test helpers](#test-helpers)\n\n<!-- END doctoc generated TOC please keep comment here to allow auto update -->\n\n## Installation\n\n### Packages that need to be installed\n\n- `@angular/cdk`\n- `@angular/common`\n- `@angular/core`\n- `@angular/flex-layout`\n- `@angular/forms`\n- `@angular/material`\n- `@angular/platform-browser`\n- `@terminus/design-tokens`\n- `@terminus/fe-utilities`\n- `@terminus/ui-checkbox`\n- `@terminus/ui-form-field`\n- `@terminus/ui-icon`\n- `@terminus/ui-input`\n- `@terminus/ui-option`\n- `@terminus/ui-pipes`\n- `@terminus/ui-validators`\n- `@terminus/ui-spacing`\n- `@terminus/ui-styles`\n- `@terminus/ui-validation-messages`\n- `@terminus/ui-utilities`\n- `@terminus/ui-select`\n- `date-fns`\n- `text-mask-addons`\n- `text-mask-core`\n\nUse the `ng add` command to quickly install all the needed dependencies:\n\n```bash\nng add @terminus/ui-select\n```\n\n### Modules that need to be in NgModule\n\n- `BrowserAnimationsModule,`\n- `TsOptionModule,`\n- `TsSelectModule,`\n- `FormsModule,`\n- `ReactiveFormsModule`\n\n### CSS imports\n\nIn your top level stylesheet, add these imports:\n\n```css\n@import '~@terminus/design-tokens/css/library-design-tokens.css';\n@import '~@terminus/ui-styles/terminus-ui.css';\n```  \n\n### CSS resources\n\nLoad the needed font families by adding this link to the `<head>` of your application:\n\n```css\n<link href=\"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400&display=swap\" rel=\"stylesheet\">\n```\n\n## Usage\n\nThe most basic usage is by wrapping one or more `ts-option`s inside an `ts-select`:\n\n```html\n<!-- Define the option value by passing a property to the option's `value` input -->\n<ts-select>\n  <ts-option\n    *ngFor=\"let item of items\"\n    [value]=\"item.value\"\n  >{{ item.name }}</ts-option>\n</ts-select>\n```\n\n### Label\n\nDefine a label on the select:\n\n```html\n<ts-select label=\"My cool label!\">\n  ...\n</ts-select>\n```\n\n### Hint\n\nDefine a hint on the select:\n\n```html\n<ts-select hint=\"Please select an option\">\n  ...\n</ts-select>\n```\n\n### No validation or hint\n\nA flag to define whether this select field needs validation or hint. If it needs validation or hint, a padding bottom is added for the message, otherwise, no padding at the bottom.\n\n```html\n<ts-select\n  [formControl]=\"myCtrl\"\n  [noValidationOrHint]=\"true\"\n></ts-select>\n```\n\n### FormControl\n\nTo use a `FormControl` with the select, pass the control in:\n\n```html\n<ts-select [formControl]=\"myCtrl\">\n  ...\n</ts-select>\n```\n\n### ngModel\n\nTo use `ngModel`, add the model to the select:\n\n```html\n<ts-select [(ngModel)]=\"myModel\">\n  ...\n</ts-select>\n```\n\n### Custom compare function\n\nIf more refined control of how options are compared is needed, a custom comparator function can be used:\n\n```html\n<ts-select [compareWith]=\"compareByReference\">\n  ...\n</ts-select>\n```\n\n```typescript\n// Example comparing by reference:\ncompareByReference(f1: any, f2: any) { return f1 === f2; }\n\n// Example comparing by value:\ncompareByValue(f1: any, f2: any) { return f1 && f2 && f1.text === f2.text; }\n```\n\n```typescript\nTsOptionCompareWith = (o1: any, o2: any) => boolean;\n```\n\n### Optgroups\n\nOptgroups can be used by wrapping one or more options inside an optgroup component:\n\n```html\n<ts-select>\n  <ts-select-optgroup\n    *ngFor=\"let group of itemsWithGroups\"\n    [label]=\"group.myLabel\"\n  >\n    <ts-option\n      *ngFor=\"let child of group.children\"\n      [value]=\"child.slug\"\n    >{{ child.foo }}</ts-option>\n  </ts-select-optgroup>\n</ts-select>\n```\n\n### Disabled\n\nThe entire select can be disabled in one of two ways:\n\n#### Disable via Input\n\n```html\n<ts-select [isDisabled]=\"true\">\n  ...\n</ts-select>\n```\n\n#### Disable via FormControl\n\n```typescript\nmyCtrl = new FormControl({value: null, disabled: true});\n```\n\n```html\n<ts-select [formControl]=\"myCtrl\">\n  ...\n</ts-select>\n```\n\n#### Disabled Option\n\nIndividual options may also be disabled:\n\n```html\n<ts-select>\n  <ts-option\n    *ngFor=\"let option of options\"\n    [value]=\"option.value\"\n    [isDisabled]=\"option.disabled\" <!-- Disabled when true -->\n  >{{ option.name }}</ts-option>\n</ts-select>\n```\n\n#### Disabled Optgroup\n\nEntire optgroups can be disabled just like options. When an optgroup is disabled, all options that are children of that optgroup\nare also disabled.\n\n```html\n<ts-select>\n  <ts-select-optgroup\n    *ngFor=\"let group of itemsWithGroups\"\n    [label]=\"group.myLabel\"\n    [isDisabled]=\"option.disabled\" <!-- Disabled when true -->\n  >\n    <ts-option\n      *ngFor=\"let child of group.children\"\n      [value]=\"child.slug\"\n    >{{ child.foo }}</ts-option>\n  </ts-select-optgroup>\n</ts-select>\n```\n\n### Required\n\nThe entire select can be marked required in one of two ways:\n\n#### Required by Input\n\n```html\n<ts-select [isRequired]=\"true\">\n  ...\n</ts-select>\n```\n\n#### Required by FormControl\n\n```typescript\nmyCtrl = new FormControl(null, Validators.required);\n```\n\n```html\n<ts-select [formControl]=\"myCtrl\">\n  ...\n</ts-select>\n```\n\n### Placeholder\n\nThe placeholder is used for the trigger value when the control or model value is empty.\n\n```html\n<ts-select placeholder=\"Please make a selection.\">\n  ...\n</ts-select>\n```\n\n### Custom trigger value\n\nCustom HTML can be used for the trigger value by using the `ts-select-trigger` component. This trigger will be shown when the control or\nmodel does have value.\n\n```html\n<ts-select>\n  <!-- Here is my custom trigger! -->\n  <ts-select-trigger>\n    My custom trigger!\n    With <strong>custom</strong> HTML!\n  </ts-select-trigger>\n\n  <ts-option\n    [value]=\"option.value\"\n    *ngFor=\"let option of options\"\n  >{{ option.name }}</ts-option>\n</ts-select>\n```\n\n### Blank option\n\nA blank option can be implemented by adding a `ts-option` with no value:\n\n```html\n<ts-select [formControl]=\"myForm.get('myChoices1')\">\n  <ts-option>\n    None\n  </ts-option>\n\n  <ts-option\n    [value]=\"option.value\"\n    *ngFor=\"let option of options\"\n  >{{ option.name }}</ts-option>\n</ts-select>\n```\n\n### Option template\n\nA custom template can be used for the option content.\n\n> NOTE: The option object *must* be passed into the option when using a custom template\n\n```html\n<ts-select>\n  <ts-option\n    *ngFor=\"let option of options\"\n    [value]=\"option.value\"\n    [option]=\"option\"\n  >\n    <!-- The object you pass to the `option` input will be exposed as `option` in the template -->\n    <ng-template let-option>\n      <div class=\"myClass\">\n        <h4>{{ option.name }}</h4>\n        <small>{{ option.value / 100 }}%</small>\n      </div>\n    </ng-template>\n  </ts-option>\n</ts-select>\n```\n\n### Custom view value\n\nPart of the option view can be defined as the 'view value' which is used to define the `title` attribute for the option:\n\n```html\n<ts-select>\n  <ts-option\n    *ngFor=\"let option of options\"\n    [value]=\"option.value\"\n    [option]=\"option\"\n  >\n    <ng-template let-option>\n      <div class=\"myClass\">\n        <!-- The content of this h4 will be used for the option title -->\n        <h4 tsOptionDisplay>{{ option.name }}</h4>\n        <small>{{ option.value / 100 }}%</small>\n      </div>\n    </ng-template>\n  </ts-option>\n</ts-select>\n```\n\n### Multiple selections\n\nAllow multiple selections via an `@Input`:\n\n```html\n<ts-select [allowMultiple]=\"true\">\n  ...\n</ts-select>\n```\n\nThis will show checkboxes next to each option and include a top-level 'Select All' toggle.\n\n### Custom delimiter\n\nThe delimiter is used to separate multiple options when shown in the trigger. By default this is a comma (`,`). A custom delimiter may also\nbe set:\n\n```html\n<ts-select\n  [allowMultiple]=\"true\"\n  delimiter=\"/\"\n>\n  ...\n</ts-select>\n<!-- Standard output: `foo, bar, baz` -->\n<!-- Output with custom delimiter: `foo/ bar/ baz` -->\n```\n\n### Custom sort comparator\n\nBy default, the selections will be stored in the order matching the order of items passed in. A custom sort comparator may be passed in\nto alter the sort order.\n\n```html\n<ts-select [sortComparator]=\"myComparatorFn\">\n  ...\n</ts-select>\n```\n\nThe comparator function type is `TsSelectSortComparatorFunction` and has the following format:\n\n```typescript\ntype TsSelectSortComparatorFunction = (\n  a: TsOptionComponent,\n  b: TsOptionComponent,\n  options: TsOptionComponent[],\n) => number;\n```\n\n### Filterable\n\nA select can include an input at the top of the list to filter options:\n\n```html\n<ts-select\n  [formControl]=\"myCtrl\"\n  [isFilterable]=\"true\"\n  (queryChange)=\"mySearchFunction($event)\"\n>\n  ...\n</ts-select>\n```\n\nAny unique, debounced query will be emitted through the `queryChange` emitter. The consumer is in control of what options are displayed. A\nblank option can be used to show the user a message when no items are found by the query.\n\n### Allow user to request update\n\nThere are times where the data may change after it is loaded. The `showRefresh` option allows the user to manually request updated data.\n\n```html\n<ts-select\n  [formControl]=\"myCtrl\"\n  [showRefresh]=\"true\"\n  (optionsRefreshRequested)=\"userRequestedRefresh()\"\n>\n  ...\n</ts-select>\n```\n\n### Prompt the user to refine their search\n\nFor certain queries it is not always possible to return all options. In those cases, we should prompt the user to refine their search for\nbetter results.\n\n```html\n<ts-select\n  [formControl]=\"myCtrl\"\n  [showRefineSearchMessage]=\"true\"\n>\n  ...\n</ts-select>\n```\n\nThis will show a message below all existing options:\n\n```bash\nNarrow your search to reveal hidden results.\n```\n\nIf the `totalHiddenResults` input is defined, the count will be included in the message:\n\n```html\n<ts-select\n  [formControl]=\"myCtrl\"\n  [showRefineSearchMessage]=\"true\"\n  [totalHiddenResults]=\"972\"\n>\n  ...\n</ts-select>\n```\n\nThis will show a message below all existing options:\n\n```bash\nNarrow your search to reveal 972 hidden results.\n```\n\n### Events\n\nMultiple events are fired during interaction with the select:\n\n| Event                     | Description                                     | Payload              |\n|:--------------------------|:------------------------------------------------|:---------------------|\n| `closed`                  | Fired when the panel is closed                  | `undefined`          |\n| `duplicateSelection`      | Fired when a duplicate selection is made        | `string`             |\n| `opened`                  | Fired when the panel is open                    | `undefined`          |\n| `optionDeselected`        | Fired when an option is deselected              | `TsSelectChange`     |\n| `optionSelected`          | Fired when an option is selected                | `TsSelectChange`     |\n| `optionsRefreshRequested` | Fired when the user selects the refresh trigger | `undefined`          |\n| `queryChange`             | Fired when query changes                        | `string`             |\n| `selectionChange`         | Fired when the selection changes                | `TsSelectChange`     |\n| `valueChange`             | Fired when the selection value changes          | `string \\| string[]` |\n\n```html\n<ts-select (selectionChange)=\"myFunction($event)\">\n  ...\n</ts-select>\n```\n\nThe `TsSelectChange` structure:\n\n```typescript\nclass TsSelectChange {\n  constructor(\n    // Reference to the select that emitted the change event\n    public source: TsSelectComponent,\n    // The current value\n    public value: any,\n  ) {}\n}\n\n```\n\n## Test helpers\n\nSome helpers are exposed to assist with testing. These are imported from `@terminus/ui-select/testing`;\n\n[[source]][test-helpers-src]\n\n| Function                  |\n|---------------------------|\n| `getSelectInstance`       |\n| `getSelectElement`        |\n| `getSelectTriggerElement` |\n| `getToggleAllElement`     |\n| `getPanelElement`         |\n| `getAllOptionInstances`   |\n| `getOptionInstance`       |\n| `getOptionElement`        |\n| `getAllOptgroups`         |\n| `getOptgroup`             |\n| `getOptgroupElement`      |\n| `getAllChipInstances`     |\n| `getChipInstance`         |\n| `getChipElement`          |\n| `getFilterInputElement`   |\n\n\n<!-- Links -->\n[test-helpers-src]:    testing/src/test-helpers.ts\n[selection-list-src]:  ../selection-list/\n[license-url]:         https://github.com/GetTerminus/terminus-oss/blob/release/LICENSE\n[license-image]:       http://img.shields.io/badge/license-MIT-blue.svg\n[codecov-project]:     https://codecov.io/gh/GetTerminus/terminus-oss\n[codecov-badge]:       https://codecov.io/gh/GetTerminus/terminus-oss/branch/release/graph/badge.svg\n[npm-version-image]:   http://img.shields.io/npm/v/@terminus/ui-select.svg\n[npm-package]:         https://www.npmjs.com/package/@terminus/ui-select\n[github-action-badge]: https://github.com/GetTerminus/terminus-oss/workflows/Release%20CI/badge.svg\n[github-action-link]:  https://github.com/GetTerminus/terminus-oss/actions?query=workflow%3A%22CI+Release%22\n[file-size-badge]:     http://img.badgesize.io/https://unpkg.com/@terminus/ui-select/bundles/terminus-ui-select.umd.min.js?compression=gzip\n[raw-distribution-js]: https://unpkg.com/@terminus/ui-select/bundles/terminus-ui-select.umd.js\n","readmeFilename":"README.md","description":"<h1>Select :rotating_light: DEPRECATED :rotating_light:</h1>","_id":"@terminus/ui-select@2.0.4","_nodeVersion":"12.18.3","_npmVersion":"lerna/3.22.1/node@v12.18.3+x64 (linux)","dist":{"integrity":"sha512-5GwaBnIyp5LEH+b+7fGE7aQolHCb86LXFrpPJd3Q/JJgZETx3kZsnYyKrNwimCZLHdh8uP0dzmfusZCDP/AbQQ==","shasum":"1e4bd5ccad1a60da9fe3724c7346d0213a3ca6f0","tarball":"https://registry.npmjs.org/@terminus/ui-select/-/ui-select-2.0.4.tgz","fileCount":81,"unpackedSize":1223708,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfJCQxCRA9TVsSAnZWagAAV+IQAIch1SMDMwcqZ8MKzYul\nZj91CSZmLyrmzSJR14qSSGOAe+GMOH9HIxneyRAktAhItyk+iD+l8EsMqPCR\n/wWU2tU6+6J0JwqCo/AxIlZC3MmVLXRc+VloAO30LcTlLJgH/HN2pMCRjD9G\nC3vOWRiX86UOFWdCOltIFMJvH48D/3qJav12xTSND1PoPJv07xy8unHEQPug\n1UVqdykWQ7I7U9Wo3ZPdP7QayvuH7Q8ObwWQjrL9g4WhUAbHmw+fas4n1XtF\n93kwwew40ZtfXO7R71T/t/7O1yrpj7gwYXO9vn1zlzueRSjUFlRntyLmV64z\n/asdCtkgBddGg2F4r619H0vqS7Ig9zuaguVu0vmg9N3Xyq5LTZfAkkwcPREU\nBU+GKx0KBVs1HVeDXFKjYkgxNI4v58jfDU33Fg1UribxvmD9gEM/LdTnYi1S\ntMVYi0XNAtiRCMxRdMXKxkp8xOpuL/JFtpD3qD7q4oRwAQ6opeo659LRJ9vL\n/sam0DoXKW73S68nRUPwCna7ZPncZz3A41yLE8/1qUmtByy/wapg7HIQLFn4\nOLgYK7OIGL2xQkUfjsG8VVhtUxTYU0f1aH0qGqAl/J3rDwlgCwIpa2CaIPCF\nufgAD1K1AyRKi3wjdsagJIuUgAJeGBE80x6j8Gs3O+NoL7c69vlLo4AhrFgS\next2\r\n=CrJS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCL/Dw7cL2ackvxq0ec2jBoEK3JTi3ndSGikuv4WrUGTgIhALCxvXKsN1ZgR2eSWzElJGc5pLfQV9GB/S+hCz/YAxCK"}]},"maintainers":[{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"terminus_devops","email":"devops@terminus.com"}],"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-select_2.0.4_1596204080635_0.0944604427858926"},"_hasShrinkwrap":false},"2.0.5":{"name":"@terminus/ui-select","version":"2.0.5","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/select"},"peerDependencies":{"@angular/animations":"^9.1.0","@angular/cdk":"^9.1.0","@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/flex-layout":"~9.0.0-beta.29","@angular/forms":"^9.1.0","@angular/material":"^9.1.0","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^3.1.0","@terminus/fe-utilities":"^1.0.0","@terminus/ui-checkbox":"^2.0.0","@terminus/ui-form-field":"^2.0.0","@terminus/ui-icon":"^2.0.0","@terminus/ui-input":"^2.0.0","@terminus/ui-option":"^1.0.8","@terminus/ui-spacing":"^1.0.9","@terminus/ui-validation-messages":"^1.0.11","rxjs":"^6.5.0"},"schematics":"./schematics/collection.json","main":"bundles/terminus-ui-select.umd.js","module":"fesm5/terminus-ui-select.js","es2015":"fesm2015/terminus-ui-select.js","esm5":"esm5/terminus-ui-select.js","esm2015":"esm2015/terminus-ui-select.js","fesm5":"fesm5/terminus-ui-select.js","fesm2015":"fesm2015/terminus-ui-select.js","typings":"terminus-ui-select.d.ts","metadata":"terminus-ui-select.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0","date-fns":"2.15.0","@angular-devkit/schematics":"9.1.9","@schematics/angular":"9.1.12","@terminus/ui-utilities":"1.0.9","@terminus/ui-pipes":"1.0.9","@fortawesome/fontawesome-svg-core":"1.2.30","@fortawesome/angular-fontawesome":"0.6.0","@terminus/ui-validators":"1.0.9","@fortawesome/pro-solid-svg-icons":"5.14.0","text-mask-addons":"3.8.0","text-mask-core":"5.1.2"},"description":"<h1>Select :rotating_light: DEPRECATED :rotating_light:</h1>","_id":"@terminus/ui-select@2.0.5","_nodeVersion":"12.18.3","_npmVersion":"lerna/3.22.1/node@v12.18.3+x64 (linux)","dist":{"integrity":"sha512-pxgnrc38o4ETQhlSOJr7xMgUiDmjaxaka4aWc+H1H84xDr2/rOS/rYY2SS4apOc2GC/QDuuATcEJk6qpjF1ypA==","shasum":"fb191ad7b4e6c3461c70d8aca14bb14e37590492","tarball":"https://registry.npmjs.org/@terminus/ui-select/-/ui-select-2.0.5.tgz","fileCount":81,"unpackedSize":1223905,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfJEUnCRA9TVsSAnZWagAAsaYQAKBLF/npzzPuRdnpaXBe\nWS4BcH5zmNGe7RK1gR+dFAlHQ9f2+5Otm6EbvWlIrs6/wnpMS/3fNxF1QCe2\nxHkGHOa+fLx/MJFwuLvcfdZjrat6HhWhY5p/mTm7Vlqumu2ZW1o9AG4+wJvr\nJoxjWoxM2u/aMrvDg3c8L6THQ6bQAKJ1I+/XLrXU5vfnXHhCseuc4aeDeThX\nZ1FdTBgymPSkTCk3Y0/MauF+FFcSoSbuqagVgl7+F4qY5zzgrznASPtIIJh/\n3+V1He4FFrdYJeVGXWA5bztIpWhbnCq7ji/YxJLcJFy8SUdq2EfqlZIdHlRM\nHnpY9X3tKabwaDagC66544vPOVBpf0YDI08fL+wVeHFEa5vCc9lOQpQvhI2R\nvuBixXRp3yZBjfUxaqLkPXdCwsaO6h619MRcCqmv2oEcjCyFxz0zFleiJCAu\nrAK7tofQccgvOxMN9NAUiYPDgxY7A6ubhh5HzJKIUh6MAxpK1kbS09Gnqhc1\nP+nGxUH/vk3okA+Tkf3Trk+zUzj2iwfhFz+UmgEXoMXeZdJmtjfTWco3vXw+\nzKzFrpJQlKlshQx1J5ySp0FgP7jagKOly8g5NTNJIiY4wM2ZsXkV8yMZ5hTq\ndC4qoihqIYf9pca8CW5lSRgGRwcWdPMnd/XBg94/OiTbYi6EASSeejQs0TFh\nlZMT\r\n=fn5Y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFRT9p+vc2iFHnKygcLvCY9BbtJPR6zgkoSIDdDnFfQuAiEAqM8KhR9epJuYc0YIQ1nMARndS1tHTbBqlmzAwPiKQE8="}]},"maintainers":[{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"terminus_devops","email":"devops@terminus.com"}],"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-select_2.0.5_1596212518907_0.7474774137611739"},"_hasShrinkwrap":false},"2.0.6":{"name":"@terminus/ui-select","version":"2.0.6","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/select"},"peerDependencies":{"@angular/animations":"^9.1.0","@angular/cdk":"^9.1.0","@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/flex-layout":"~9.0.0-beta.29","@angular/forms":"^9.1.0","@angular/material":"^9.1.0","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^3.1.0","@terminus/fe-utilities":"^1.0.0","@terminus/ui-checkbox":"^2.0.6","@terminus/ui-form-field":"^2.0.8","@terminus/ui-icon":"^2.0.5","@terminus/ui-input":"^2.0.7","@terminus/ui-option":"^1.0.10","@terminus/ui-spacing":"^1.0.11","@terminus/ui-validation-messages":"^1.0.14","rxjs":"^6.5.0"},"schematics":"./schematics/collection.json","main":"bundles/terminus-ui-select.umd.js","module":"fesm5/terminus-ui-select.js","es2015":"fesm2015/terminus-ui-select.js","esm5":"esm5/terminus-ui-select.js","esm2015":"esm2015/terminus-ui-select.js","fesm5":"fesm5/terminus-ui-select.js","fesm2015":"fesm2015/terminus-ui-select.js","typings":"terminus-ui-select.d.ts","metadata":"terminus-ui-select.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0","date-fns":"2.15.0","@angular-devkit/schematics":"9.1.9","@schematics/angular":"9.1.12","@terminus/ui-utilities":"1.0.10","@terminus/ui-pipes":"1.0.10","@fortawesome/fontawesome-svg-core":"1.2.30","@fortawesome/angular-fontawesome":"0.6.0","@terminus/ui-validators":"1.0.10","@fortawesome/pro-solid-svg-icons":"5.14.0","text-mask-addons":"3.8.0","text-mask-core":"5.1.2"},"description":"<h1>Select :rotating_light: DEPRECATED :rotating_light:</h1>","_id":"@terminus/ui-select@2.0.6","_nodeVersion":"12.18.3","_npmVersion":"lerna/3.22.1/node@v12.18.3+x64 (linux)","dist":{"integrity":"sha512-Twt7R43Zdxg5KBctpCx3q/FN8rgMYZvXGw+x/6b9iCV12AxTBiZo4DytptVNNXS+OtHsMlP4UWKnrm0UzRassQ==","shasum":"89315dd380c25e325af229482425913a2a5b39be","tarball":"https://registry.npmjs.org/@terminus/ui-select/-/ui-select-2.0.6.tgz","fileCount":81,"unpackedSize":1224110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMXP9CRA9TVsSAnZWagAAurYP/1i8d72k7rwPEGboxMN/\nhcnXfz2bsSzx1ZZoj/WuH2+GJmE++NNzT9vVbiPtG8XjVqW/h21ULzzpWqmz\nchfWuxvNAPSNjWpZ1W2gv/X7/RH/L0uUgUo22zT2CBEKIXQlZIwzkLwaHzrU\nPED/Cs4rd6kvs/OFaDSzPPuFWriuvNxQGfAPQrR3ugv+8h0j/npXQye/c96d\n9oBd1niv4/rooCN3Mkvxse9tGr3voJI9v1+TKDidvHzTF0V1Et1a0TJw2rQ0\nMqE+dBXJwJq9vOeQ/FG+AEg7O/RWZlleIhf2rmnfSUtqCK/H+N9I41mMdhV5\nFGbIiSurC71jKWZSkIdES5EiXnApGmgccen/H7FC8fkCKFUAktGk3sTCx+Vi\nghLFeNbFmuzAWsZ0EqWB6dr+yTNqNpC0lP25ZeS4X1eMfIZmqwshPuiJUrrj\n4gnJevpgiSvOj27dFJDZUet/ZjPfoDDXpPCJtXTYTeopXBxg+E2gTtn7Brd2\nm+FW7NM9jlvBWkylvWdCAiOxBsUpjmBTmIO40onCVVdsHRHevFuI9Y2EU4qq\nJ9Yuk9Vl5hll/2DPmG/hAwu0klsyFktBBWI2tkJUuesvhXGMLzPSnhJvUo0A\n0tDGSFC3YwqANa5k8jzT6GZ8IdxwM92mN5EfvVV2MdEgVU8Zg6dV/WRcnOMN\ndJUU\r\n=fc0Q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCgKGuSB2MdSfTZ4NJNAFn+0dEh4d+W9uv9Q/roiSH7rAIgV4AdF2uid/4fwDMG5nPvqBpu2eZkRWfjXB4qxTbVXew="}]},"maintainers":[{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"terminus_devops","email":"devops@terminus.com"}],"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-select_2.0.6_1597076476540_0.39806649552911866"},"_hasShrinkwrap":false},"2.0.7":{"name":"@terminus/ui-select","version":"2.0.7","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/select"},"peerDependencies":{"@angular/animations":"^9.1.0","@angular/cdk":"^9.1.0","@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/flex-layout":"~9.0.0-beta.29","@angular/forms":"^9.1.0","@angular/material":"^9.1.0","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^3.1.0","@terminus/fe-utilities":"^1.0.0","@terminus/ui-checkbox":"^2.0.6","@terminus/ui-form-field":"^2.0.8","@terminus/ui-icon":"^2.0.5","@terminus/ui-input":"^2.0.7","@terminus/ui-option":"^1.0.10","@terminus/ui-spacing":"^1.0.11","@terminus/ui-validation-messages":"^1.0.14","rxjs":"^6.5.0"},"schematics":"./schematics/collection.json","main":"bundles/terminus-ui-select.umd.js","module":"fesm5/terminus-ui-select.js","es2015":"fesm2015/terminus-ui-select.js","esm5":"esm5/terminus-ui-select.js","esm2015":"esm2015/terminus-ui-select.js","fesm5":"fesm5/terminus-ui-select.js","fesm2015":"fesm2015/terminus-ui-select.js","typings":"terminus-ui-select.d.ts","metadata":"terminus-ui-select.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0","date-fns":"2.15.0","@angular-devkit/schematics":"9.1.9","@schematics/angular":"9.1.12","@terminus/ui-utilities":"1.0.12","@terminus/ui-pipes":"1.0.12","@fortawesome/fontawesome-svg-core":"1.2.30","@fortawesome/angular-fontawesome":"0.6.0","@terminus/ui-validators":"1.0.12","@fortawesome/pro-solid-svg-icons":"5.14.0","text-mask-addons":"3.8.0","text-mask-core":"5.1.2"},"readme":"<h1>Select :rotating_light: DEPRECATED :rotating_light:</h1>\n\n[![CI/CD Status][github-action-badge]][github-action-link] [![Codecov][codecov-badge]][codecov-project] [![MIT License][license-image]][license-url]  \n[![NPM version][npm-version-image]][npm-package] [![Library size][file-size-badge]][raw-distribution-js]\n\n---\n\n> :rotating_light: NOTE: This component is deprecated. Please use the [Selection List Component][selection-list-src].\n\n---\n\nA custom select dropdown.\n\n<!-- START doctoc generated TOC please keep comment here to allow auto update -->\n<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->\n## Table of Contents\n\n- [Installation](#installation)\n  - [Packages that need to be installed](#packages-that-need-to-be-installed)\n  - [Modules that need to be in NgModule](#modules-that-need-to-be-in-ngmodule)\n  - [CSS imports](#css-imports)\n  - [CSS resources](#css-resources)\n- [Usage](#usage)\n  - [Label](#label)\n  - [Hint](#hint)\n  - [No validation or hint](#no-validation-or-hint)\n  - [FormControl](#formcontrol)\n  - [ngModel](#ngmodel)\n  - [Custom compare function](#custom-compare-function)\n  - [Optgroups](#optgroups)\n  - [Disabled](#disabled)\n    - [Disable via Input](#disable-via-input)\n    - [Disable via FormControl](#disable-via-formcontrol)\n    - [Disabled Option](#disabled-option)\n    - [Disabled Optgroup](#disabled-optgroup)\n  - [Required](#required)\n    - [Required by Input](#required-by-input)\n    - [Required by FormControl](#required-by-formcontrol)\n  - [Placeholder](#placeholder)\n  - [Custom trigger value](#custom-trigger-value)\n  - [Blank option](#blank-option)\n  - [Option template](#option-template)\n  - [Custom view value](#custom-view-value)\n  - [Multiple selections](#multiple-selections)\n  - [Custom delimiter](#custom-delimiter)\n  - [Custom sort comparator](#custom-sort-comparator)\n  - [Filterable](#filterable)\n  - [Allow user to request update](#allow-user-to-request-update)\n  - [Prompt the user to refine their search](#prompt-the-user-to-refine-their-search)\n  - [Events](#events)\n- [Test helpers](#test-helpers)\n\n<!-- END doctoc generated TOC please keep comment here to allow auto update -->\n\n## Installation\n\n### Packages that need to be installed\n\n- `@angular/cdk`\n- `@angular/common`\n- `@angular/core`\n- `@angular/flex-layout`\n- `@angular/forms`\n- `@angular/material`\n- `@angular/platform-browser`\n- `@terminus/design-tokens`\n- `@terminus/fe-utilities`\n- `@terminus/ui-checkbox`\n- `@terminus/ui-form-field`\n- `@terminus/ui-icon`\n- `@terminus/ui-input`\n- `@terminus/ui-option`\n- `@terminus/ui-pipes`\n- `@terminus/ui-validators`\n- `@terminus/ui-spacing`\n- `@terminus/ui-styles`\n- `@terminus/ui-validation-messages`\n- `@terminus/ui-utilities`\n- `@terminus/ui-select`\n- `date-fns`\n- `text-mask-addons`\n- `text-mask-core`\n\nUse the `ng add` command to quickly install all the needed dependencies:\n\n```bash\nng add @terminus/ui-select\n```\n\n### Modules that need to be in NgModule\n\n- `BrowserAnimationsModule,`\n- `TsOptionModule,`\n- `TsSelectModule,`\n- `FormsModule,`\n- `ReactiveFormsModule`\n\n### CSS imports\n\nIn your top level stylesheet, add these imports:\n\n```css\n@import '~@terminus/design-tokens/css/library-design-tokens.css';\n@import '~@terminus/ui-styles/terminus-ui.css';\n```  \n\n### CSS resources\n\nLoad the needed font families by adding this link to the `<head>` of your application:\n\n```css\n<link href=\"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400&display=swap\" rel=\"stylesheet\">\n```\n\n## Usage\n\nThe most basic usage is by wrapping one or more `ts-option`s inside an `ts-select`:\n\n```html\n<!-- Define the option value by passing a property to the option's `value` input -->\n<ts-select>\n  <ts-option\n    *ngFor=\"let item of items\"\n    [value]=\"item.value\"\n  >{{ item.name }}</ts-option>\n</ts-select>\n```\n\n### Label\n\nDefine a label on the select:\n\n```html\n<ts-select label=\"My cool label!\">\n  ...\n</ts-select>\n```\n\n### Hint\n\nDefine a hint on the select:\n\n```html\n<ts-select hint=\"Please select an option\">\n  ...\n</ts-select>\n```\n\n### No validation or hint\n\nA flag to define whether this select field needs validation or hint. If it needs validation or hint, a padding bottom is added for the message, otherwise, no padding at the bottom.\n\n```html\n<ts-select\n  [formControl]=\"myCtrl\"\n  [noValidationOrHint]=\"true\"\n></ts-select>\n```\n\n### FormControl\n\nTo use a `FormControl` with the select, pass the control in:\n\n```html\n<ts-select [formControl]=\"myCtrl\">\n  ...\n</ts-select>\n```\n\n### ngModel\n\nTo use `ngModel`, add the model to the select:\n\n```html\n<ts-select [(ngModel)]=\"myModel\">\n  ...\n</ts-select>\n```\n\n### Custom compare function\n\nIf more refined control of how options are compared is needed, a custom comparator function can be used:\n\n```html\n<ts-select [compareWith]=\"compareByReference\">\n  ...\n</ts-select>\n```\n\n```typescript\n// Example comparing by reference:\ncompareByReference(f1: any, f2: any) { return f1 === f2; }\n\n// Example comparing by value:\ncompareByValue(f1: any, f2: any) { return f1 && f2 && f1.text === f2.text; }\n```\n\n```typescript\nTsOptionCompareWith = (o1: any, o2: any) => boolean;\n```\n\n### Optgroups\n\nOptgroups can be used by wrapping one or more options inside an optgroup component:\n\n```html\n<ts-select>\n  <ts-select-optgroup\n    *ngFor=\"let group of itemsWithGroups\"\n    [label]=\"group.myLabel\"\n  >\n    <ts-option\n      *ngFor=\"let child of group.children\"\n      [value]=\"child.slug\"\n    >{{ child.foo }}</ts-option>\n  </ts-select-optgroup>\n</ts-select>\n```\n\n### Disabled\n\nThe entire select can be disabled in one of two ways:\n\n#### Disable via Input\n\n```html\n<ts-select [isDisabled]=\"true\">\n  ...\n</ts-select>\n```\n\n#### Disable via FormControl\n\n```typescript\nmyCtrl = new FormControl({value: null, disabled: true});\n```\n\n```html\n<ts-select [formControl]=\"myCtrl\">\n  ...\n</ts-select>\n```\n\n#### Disabled Option\n\nIndividual options may also be disabled:\n\n```html\n<ts-select>\n  <ts-option\n    *ngFor=\"let option of options\"\n    [value]=\"option.value\"\n    [isDisabled]=\"option.disabled\" <!-- Disabled when true -->\n  >{{ option.name }}</ts-option>\n</ts-select>\n```\n\n#### Disabled Optgroup\n\nEntire optgroups can be disabled just like options. When an optgroup is disabled, all options that are children of that optgroup\nare also disabled.\n\n```html\n<ts-select>\n  <ts-select-optgroup\n    *ngFor=\"let group of itemsWithGroups\"\n    [label]=\"group.myLabel\"\n    [isDisabled]=\"option.disabled\" <!-- Disabled when true -->\n  >\n    <ts-option\n      *ngFor=\"let child of group.children\"\n      [value]=\"child.slug\"\n    >{{ child.foo }}</ts-option>\n  </ts-select-optgroup>\n</ts-select>\n```\n\n### Required\n\nThe entire select can be marked required in one of two ways:\n\n#### Required by Input\n\n```html\n<ts-select [isRequired]=\"true\">\n  ...\n</ts-select>\n```\n\n#### Required by FormControl\n\n```typescript\nmyCtrl = new FormControl(null, Validators.required);\n```\n\n```html\n<ts-select [formControl]=\"myCtrl\">\n  ...\n</ts-select>\n```\n\n### Placeholder\n\nThe placeholder is used for the trigger value when the control or model value is empty.\n\n```html\n<ts-select placeholder=\"Please make a selection.\">\n  ...\n</ts-select>\n```\n\n### Custom trigger value\n\nCustom HTML can be used for the trigger value by using the `ts-select-trigger` component. This trigger will be shown when the control or\nmodel does have value.\n\n```html\n<ts-select>\n  <!-- Here is my custom trigger! -->\n  <ts-select-trigger>\n    My custom trigger!\n    With <strong>custom</strong> HTML!\n  </ts-select-trigger>\n\n  <ts-option\n    [value]=\"option.value\"\n    *ngFor=\"let option of options\"\n  >{{ option.name }}</ts-option>\n</ts-select>\n```\n\n### Blank option\n\nA blank option can be implemented by adding a `ts-option` with no value:\n\n```html\n<ts-select [formControl]=\"myForm.get('myChoices1')\">\n  <ts-option>\n    None\n  </ts-option>\n\n  <ts-option\n    [value]=\"option.value\"\n    *ngFor=\"let option of options\"\n  >{{ option.name }}</ts-option>\n</ts-select>\n```\n\n### Option template\n\nA custom template can be used for the option content.\n\n> NOTE: The option object *must* be passed into the option when using a custom template\n\n```html\n<ts-select>\n  <ts-option\n    *ngFor=\"let option of options\"\n    [value]=\"option.value\"\n    [option]=\"option\"\n  >\n    <!-- The object you pass to the `option` input will be exposed as `option` in the template -->\n    <ng-template let-option>\n      <div class=\"myClass\">\n        <h4>{{ option.name }}</h4>\n        <small>{{ option.value / 100 }}%</small>\n      </div>\n    </ng-template>\n  </ts-option>\n</ts-select>\n```\n\n### Custom view value\n\nPart of the option view can be defined as the 'view value' which is used to define the `title` attribute for the option:\n\n```html\n<ts-select>\n  <ts-option\n    *ngFor=\"let option of options\"\n    [value]=\"option.value\"\n    [option]=\"option\"\n  >\n    <ng-template let-option>\n      <div class=\"myClass\">\n        <!-- The content of this h4 will be used for the option title -->\n        <h4 tsOptionDisplay>{{ option.name }}</h4>\n        <small>{{ option.value / 100 }}%</small>\n      </div>\n    </ng-template>\n  </ts-option>\n</ts-select>\n```\n\n### Multiple selections\n\nAllow multiple selections via an `@Input`:\n\n```html\n<ts-select [allowMultiple]=\"true\">\n  ...\n</ts-select>\n```\n\nThis will show checkboxes next to each option and include a top-level 'Select All' toggle.\n\n### Custom delimiter\n\nThe delimiter is used to separate multiple options when shown in the trigger. By default this is a comma (`,`). A custom delimiter may also\nbe set:\n\n```html\n<ts-select\n  [allowMultiple]=\"true\"\n  delimiter=\"/\"\n>\n  ...\n</ts-select>\n<!-- Standard output: `foo, bar, baz` -->\n<!-- Output with custom delimiter: `foo/ bar/ baz` -->\n```\n\n### Custom sort comparator\n\nBy default, the selections will be stored in the order matching the order of items passed in. A custom sort comparator may be passed in\nto alter the sort order.\n\n```html\n<ts-select [sortComparator]=\"myComparatorFn\">\n  ...\n</ts-select>\n```\n\nThe comparator function type is `TsSelectSortComparatorFunction` and has the following format:\n\n```typescript\ntype TsSelectSortComparatorFunction = (\n  a: TsOptionComponent,\n  b: TsOptionComponent,\n  options: TsOptionComponent[],\n) => number;\n```\n\n### Filterable\n\nA select can include an input at the top of the list to filter options:\n\n```html\n<ts-select\n  [formControl]=\"myCtrl\"\n  [isFilterable]=\"true\"\n  (queryChange)=\"mySearchFunction($event)\"\n>\n  ...\n</ts-select>\n```\n\nAny unique, debounced query will be emitted through the `queryChange` emitter. The consumer is in control of what options are displayed. A\nblank option can be used to show the user a message when no items are found by the query.\n\n### Allow user to request update\n\nThere are times where the data may change after it is loaded. The `showRefresh` option allows the user to manually request updated data.\n\n```html\n<ts-select\n  [formControl]=\"myCtrl\"\n  [showRefresh]=\"true\"\n  (optionsRefreshRequested)=\"userRequestedRefresh()\"\n>\n  ...\n</ts-select>\n```\n\n### Prompt the user to refine their search\n\nFor certain queries it is not always possible to return all options. In those cases, we should prompt the user to refine their search for\nbetter results.\n\n```html\n<ts-select\n  [formControl]=\"myCtrl\"\n  [showRefineSearchMessage]=\"true\"\n>\n  ...\n</ts-select>\n```\n\nThis will show a message below all existing options:\n\n```bash\nNarrow your search to reveal hidden results.\n```\n\nIf the `totalHiddenResults` input is defined, the count will be included in the message:\n\n```html\n<ts-select\n  [formControl]=\"myCtrl\"\n  [showRefineSearchMessage]=\"true\"\n  [totalHiddenResults]=\"972\"\n>\n  ...\n</ts-select>\n```\n\nThis will show a message below all existing options:\n\n```bash\nNarrow your search to reveal 972 hidden results.\n```\n\n### Events\n\nMultiple events are fired during interaction with the select:\n\n| Event                     | Description                                     | Payload              |\n|:--------------------------|:------------------------------------------------|:---------------------|\n| `closed`                  | Fired when the panel is closed                  | `undefined`          |\n| `duplicateSelection`      | Fired when a duplicate selection is made        | `string`             |\n| `opened`                  | Fired when the panel is open                    | `undefined`          |\n| `optionDeselected`        | Fired when an option is deselected              | `TsSelectChange`     |\n| `optionSelected`          | Fired when an option is selected                | `TsSelectChange`     |\n| `optionsRefreshRequested` | Fired when the user selects the refresh trigger | `undefined`          |\n| `queryChange`             | Fired when query changes                        | `string`             |\n| `selectionChange`         | Fired when the selection changes                | `TsSelectChange`     |\n| `valueChange`             | Fired when the selection value changes          | `string \\| string[]` |\n\n```html\n<ts-select (selectionChange)=\"myFunction($event)\">\n  ...\n</ts-select>\n```\n\nThe `TsSelectChange` structure:\n\n```typescript\nclass TsSelectChange {\n  constructor(\n    // Reference to the select that emitted the change event\n    public source: TsSelectComponent,\n    // The current value\n    public value: any,\n  ) {}\n}\n\n```\n\n## Test helpers\n\nSome helpers are exposed to assist with testing. These are imported from `@terminus/ui-select/testing`;\n\n[[source]][test-helpers-src]\n\n| Function                  |\n|---------------------------|\n| `getSelectInstance`       |\n| `getSelectElement`        |\n| `getSelectTriggerElement` |\n| `getToggleAllElement`     |\n| `getPanelElement`         |\n| `getAllOptionInstances`   |\n| `getOptionInstance`       |\n| `getOptionElement`        |\n| `getAllOptgroups`         |\n| `getOptgroup`             |\n| `getOptgroupElement`      |\n| `getAllChipInstances`     |\n| `getChipInstance`         |\n| `getChipElement`          |\n| `getFilterInputElement`   |\n\n<!-- Links -->\n[test-helpers-src]:    testing/src/test-helpers.ts\n[selection-list-src]:  ../selection-list/\n[license-url]:         https://github.com/GetTerminus/terminus-oss/blob/release/LICENSE\n[license-image]:       http://img.shields.io/badge/license-MIT-blue.svg\n[codecov-project]:     https://codecov.io/gh/GetTerminus/terminus-oss\n[codecov-badge]:       https://codecov.io/gh/GetTerminus/terminus-oss/branch/release/graph/badge.svg\n[npm-version-image]:   http://img.shields.io/npm/v/@terminus/ui-select.svg\n[npm-package]:         https://www.npmjs.com/package/@terminus/ui-select\n[github-action-badge]: https://github.com/GetTerminus/terminus-oss/workflows/Release%20CI/badge.svg\n[github-action-link]:  https://github.com/GetTerminus/terminus-oss/actions?query=workflow%3A%22CI+Release%22\n[file-size-badge]:     http://img.badgesize.io/https://unpkg.com/@terminus/ui-select/bundles/terminus-ui-select.umd.min.js?compression=gzip\n[raw-distribution-js]: https://unpkg.com/@terminus/ui-select/bundles/terminus-ui-select.umd.js\n","readmeFilename":"README.md","description":"<h1>Select :rotating_light: DEPRECATED :rotating_light:</h1>","_id":"@terminus/ui-select@2.0.7","_nodeVersion":"12.18.3","_npmVersion":"lerna/3.22.1/node@v12.18.3+x64 (linux)","dist":{"integrity":"sha512-k+vbRHPgpTcm4zAzbXP2NJiPU8S2dNN9n1s+Zqfo4Y67wKEOHCmXAMQFo/U2HpQTbN6i0goWVvPL6IqZU1b/Hg==","shasum":"aff320ee3acf79f63b4352a66490d70123565af9","tarball":"https://registry.npmjs.org/@terminus/ui-select/-/ui-select-2.0.7.tgz","fileCount":81,"unpackedSize":1224253,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNq6UCRA9TVsSAnZWagAAymYP+gOaqS+0CxVNSZ0FpsBz\nlTVZq+M9kUep3nsavxyRE+KjuOrUhH8CBwzMUt0++4jwuRK/YucD77sn9p44\nU6AzV+uOflvlNL9c1i0zL9Ux/qbkS2oHmK/S4e8MkiAXQUApvIyGsyskK0La\nXB5BznEAVR+VQ0EvCRSY/0ReHbCdNSjjPc6Cj3RsgyamWPikWAc/0fpBzFcI\njnNm6SkCObEOlizYcJ49RPEff/fhAt9TlBZoWLSN99ToL7Ax1CSDMEM8TqYU\n+O2b5u9EpxnHITw1r8/zYPNvD2VWknv6mAz5p0vKMFIFl1vgO8a1svhtEwnL\nSFKk6ym8SeXZGO7Wz/liFNUJYDrIFx0DWkxTcT9KfvWPuU9l4/fGAvs8QCWi\nLBn4oRuUJ7YDU0e903kYkSY+TXFrK1rGwFrPm83nI6W5iolBv9rt4PNLxBih\nxfd6EFE4rdiRhF5hZJeauLJEy2/yKxprHv1JV1iI7k5CcHz+/goTKNTuAZp/\neCPyIXAZm9BbVvPkK0Aktcn37s/5zoPWlGN2oDq9TbCUpb9u1wSS83Wf68d1\nYUnHy1jgqNO6QklWV7zJt36uyMmxLldBVKldVlgysd2+mCdAvOGnCXaIFxei\nrFzB+BYeIFPilD0myrYJHzEbaU/9y6Fhq0JiwvDFSM9VtluSTQY9M4bIKu36\n1b7I\r\n=duqn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDFJ1fJQ8MYowm6LA896TJbt2qMNXuQwJdO2a6grUQpTQIgemRCtWAIeQNGpPQ6y+wgczN0562Ft1VrQnXXar0v/Ps="}]},"maintainers":[{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"terminus_devops","email":"devops@terminus.com"}],"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-select_2.0.7_1597419156227_0.5150129471203944"},"_hasShrinkwrap":false},"2.0.8":{"name":"@terminus/ui-select","version":"2.0.8","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/select"},"peerDependencies":{"@angular/animations":"^9.1.0","@angular/cdk":"^9.1.0","@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/flex-layout":"~9.0.0-beta.29","@angular/forms":"^9.1.0","@angular/material":"^9.1.0","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^3.1.0","@terminus/fe-utilities":"^1.0.0","@terminus/ui-checkbox":"^2.0.6","@terminus/ui-form-field":"^2.0.8","@terminus/ui-icon":"^2.0.5","@terminus/ui-input":"^2.0.7","@terminus/ui-option":"^1.0.10","@terminus/ui-spacing":"^1.0.11","@terminus/ui-validation-messages":"^1.0.14","rxjs":"^6.5.0"},"schematics":"./schematics/collection.json","main":"bundles/terminus-ui-select.umd.js","module":"fesm5/terminus-ui-select.js","es2015":"fesm2015/terminus-ui-select.js","esm5":"esm5/terminus-ui-select.js","esm2015":"esm2015/terminus-ui-select.js","fesm5":"fesm5/terminus-ui-select.js","fesm2015":"fesm2015/terminus-ui-select.js","typings":"terminus-ui-select.d.ts","metadata":"terminus-ui-select.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0","date-fns":"2.15.0","@angular-devkit/schematics":"9.1.9","@schematics/angular":"9.1.12","@terminus/ui-utilities":"1.0.13","@terminus/ui-pipes":"1.0.15","@angular/router":"9.1.11","ngx-webstorage-service":"4.1.0","ngx-clipboard":"13.0.1","@fortawesome/fontawesome-svg-core":"1.2.30","@fortawesome/angular-fontawesome":"0.6.0","@fortawesome/pro-solid-svg-icons":"5.14.0","@terminus/ui-validators":"1.0.13","text-mask-addons":"3.8.0","text-mask-core":"5.1.2"},"readme":"<h1>Select :rotating_light: DEPRECATED :rotating_light:</h1>\n\n[![CI/CD Status][github-action-badge]][github-action-link] [![Codecov][codecov-badge]][codecov-project] [![MIT License][license-image]][license-url]  \n[![NPM version][npm-version-image]][npm-package] [![Library size][file-size-badge]][raw-distribution-js]\n\n---\n\n> :rotating_light: NOTE: This component is deprecated. Please use the [Selection List Component][selection-list-src].\n\n---\n\nA custom select dropdown.\n\n<!-- START doctoc generated TOC please keep comment here to allow auto update -->\n<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->\n## Table of Contents\n\n- [Installation](#installation)\n  - [Packages that need to be installed](#packages-that-need-to-be-installed)\n  - [Modules that need to be in NgModule](#modules-that-need-to-be-in-ngmodule)\n  - [CSS imports](#css-imports)\n  - [CSS resources](#css-resources)\n- [Usage](#usage)\n  - [Label](#label)\n  - [Hint](#hint)\n  - [No validation or hint](#no-validation-or-hint)\n  - [FormControl](#formcontrol)\n  - [ngModel](#ngmodel)\n  - [Custom compare function](#custom-compare-function)\n  - [Optgroups](#optgroups)\n  - [Disabled](#disabled)\n    - [Disable via Input](#disable-via-input)\n    - [Disable via FormControl](#disable-via-formcontrol)\n    - [Disabled Option](#disabled-option)\n    - [Disabled Optgroup](#disabled-optgroup)\n  - [Required](#required)\n    - [Required by Input](#required-by-input)\n    - [Required by FormControl](#required-by-formcontrol)\n  - [Placeholder](#placeholder)\n  - [Custom trigger value](#custom-trigger-value)\n  - [Blank option](#blank-option)\n  - [Option template](#option-template)\n  - [Custom view value](#custom-view-value)\n  - [Multiple selections](#multiple-selections)\n  - [Custom delimiter](#custom-delimiter)\n  - [Custom sort comparator](#custom-sort-comparator)\n  - [Filterable](#filterable)\n  - [Allow user to request update](#allow-user-to-request-update)\n  - [Prompt the user to refine their search](#prompt-the-user-to-refine-their-search)\n  - [Events](#events)\n- [Test helpers](#test-helpers)\n\n<!-- END doctoc generated TOC please keep comment here to allow auto update -->\n\n## Installation\n\n### Packages that need to be installed\n\n- `@angular/cdk`\n- `@angular/common`\n- `@angular/core`\n- `@angular/flex-layout`\n- `@angular/forms`\n- `@angular/material`\n- `@angular/platform-browser`\n- `@terminus/design-tokens`\n- `@terminus/fe-utilities`\n- `@terminus/ui-checkbox`\n- `@terminus/ui-form-field`\n- `@terminus/ui-icon`\n- `@terminus/ui-input`\n- `@terminus/ui-option`\n- `@terminus/ui-pipes`\n- `@terminus/ui-validators`\n- `@terminus/ui-spacing`\n- `@terminus/ui-styles`\n- `@terminus/ui-validation-messages`\n- `@terminus/ui-utilities`\n- `@terminus/ui-select`\n- `date-fns`\n- `text-mask-addons`\n- `text-mask-core`\n\nUse the `ng add` command to quickly install all the needed dependencies:\n\n```bash\nng add @terminus/ui-select\n```\n\n### Modules that need to be in NgModule\n\n- `BrowserAnimationsModule,`\n- `TsOptionModule,`\n- `TsSelectModule,`\n- `FormsModule,`\n- `ReactiveFormsModule`\n\n### CSS imports\n\nIn your top level stylesheet, add these imports:\n\n```css\n@import '~@terminus/design-tokens/css/library-design-tokens.css';\n@import '~@terminus/ui-styles/terminus-ui.css';\n```  \n\n### CSS resources\n\nLoad the needed font families by adding this link to the `<head>` of your application:\n\n```css\n<link href=\"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400&display=swap\" rel=\"stylesheet\">\n```\n\n## Usage\n\nThe most basic usage is by wrapping one or more `ts-option`s inside an `ts-select`:\n\n```html\n<!-- Define the option value by passing a property to the option's `value` input -->\n<ts-select>\n  <ts-option\n    *ngFor=\"let item of items\"\n    [value]=\"item.value\"\n  >{{ item.name }}</ts-option>\n</ts-select>\n```\n\n### Label\n\nDefine a label on the select:\n\n```html\n<ts-select label=\"My cool label!\">\n  ...\n</ts-select>\n```\n\n### Hint\n\nDefine a hint on the select:\n\n```html\n<ts-select hint=\"Please select an option\">\n  ...\n</ts-select>\n```\n\n### No validation or hint\n\nA flag to define whether this select field needs validation or hint. If it needs validation or hint, a padding bottom is added for the message, otherwise, no padding at the bottom.\n\n```html\n<ts-select\n  [formControl]=\"myCtrl\"\n  [noValidationOrHint]=\"true\"\n></ts-select>\n```\n\n### FormControl\n\nTo use a `FormControl` with the select, pass the control in:\n\n```html\n<ts-select [formControl]=\"myCtrl\">\n  ...\n</ts-select>\n```\n\n### ngModel\n\nTo use `ngModel`, add the model to the select:\n\n```html\n<ts-select [(ngModel)]=\"myModel\">\n  ...\n</ts-select>\n```\n\n### Custom compare function\n\nIf more refined control of how options are compared is needed, a custom comparator function can be used:\n\n```html\n<ts-select [compareWith]=\"compareByReference\">\n  ...\n</ts-select>\n```\n\n```typescript\n// Example comparing by reference:\ncompareByReference(f1: any, f2: any) { return f1 === f2; }\n\n// Example comparing by value:\ncompareByValue(f1: any, f2: any) { return f1 && f2 && f1.text === f2.text; }\n```\n\n```typescript\nTsOptionCompareWith = (o1: any, o2: any) => boolean;\n```\n\n### Optgroups\n\nOptgroups can be used by wrapping one or more options inside an optgroup component:\n\n```html\n<ts-select>\n  <ts-select-optgroup\n    *ngFor=\"let group of itemsWithGroups\"\n    [label]=\"group.myLabel\"\n  >\n    <ts-option\n      *ngFor=\"let child of group.children\"\n      [value]=\"child.slug\"\n    >{{ child.foo }}</ts-option>\n  </ts-select-optgroup>\n</ts-select>\n```\n\n### Disabled\n\nThe entire select can be disabled in one of two ways:\n\n#### Disable via Input\n\n```html\n<ts-select [isDisabled]=\"true\">\n  ...\n</ts-select>\n```\n\n#### Disable via FormControl\n\n```typescript\nmyCtrl = new FormControl({value: null, disabled: true});\n```\n\n```html\n<ts-select [formControl]=\"myCtrl\">\n  ...\n</ts-select>\n```\n\n#### Disabled Option\n\nIndividual options may also be disabled:\n\n```html\n<ts-select>\n  <ts-option\n    *ngFor=\"let option of options\"\n    [value]=\"option.value\"\n    [isDisabled]=\"option.disabled\" <!-- Disabled when true -->\n  >{{ option.name }}</ts-option>\n</ts-select>\n```\n\n#### Disabled Optgroup\n\nEntire optgroups can be disabled just like options. When an optgroup is disabled, all options that are children of that optgroup\nare also disabled.\n\n```html\n<ts-select>\n  <ts-select-optgroup\n    *ngFor=\"let group of itemsWithGroups\"\n    [label]=\"group.myLabel\"\n    [isDisabled]=\"option.disabled\" <!-- Disabled when true -->\n  >\n    <ts-option\n      *ngFor=\"let child of group.children\"\n      [value]=\"child.slug\"\n    >{{ child.foo }}</ts-option>\n  </ts-select-optgroup>\n</ts-select>\n```\n\n### Required\n\nThe entire select can be marked required in one of two ways:\n\n#### Required by Input\n\n```html\n<ts-select [isRequired]=\"true\">\n  ...\n</ts-select>\n```\n\n#### Required by FormControl\n\n```typescript\nmyCtrl = new FormControl(null, Validators.required);\n```\n\n```html\n<ts-select [formControl]=\"myCtrl\">\n  ...\n</ts-select>\n```\n\n### Placeholder\n\nThe placeholder is used for the trigger value when the control or model value is empty.\n\n```html\n<ts-select placeholder=\"Please make a selection.\">\n  ...\n</ts-select>\n```\n\n### Custom trigger value\n\nCustom HTML can be used for the trigger value by using the `ts-select-trigger` component. This trigger will be shown when the control or\nmodel does have value.\n\n```html\n<ts-select>\n  <!-- Here is my custom trigger! -->\n  <ts-select-trigger>\n    My custom trigger!\n    With <strong>custom</strong> HTML!\n  </ts-select-trigger>\n\n  <ts-option\n    [value]=\"option.value\"\n    *ngFor=\"let option of options\"\n  >{{ option.name }}</ts-option>\n</ts-select>\n```\n\n### Blank option\n\nA blank option can be implemented by adding a `ts-option` with no value:\n\n```html\n<ts-select [formControl]=\"myForm.get('myChoices1')\">\n  <ts-option>\n    None\n  </ts-option>\n\n  <ts-option\n    [value]=\"option.value\"\n    *ngFor=\"let option of options\"\n  >{{ option.name }}</ts-option>\n</ts-select>\n```\n\n### Option template\n\nA custom template can be used for the option content.\n\n> NOTE: The option object *must* be passed into the option when using a custom template\n\n```html\n<ts-select>\n  <ts-option\n    *ngFor=\"let option of options\"\n    [value]=\"option.value\"\n    [option]=\"option\"\n  >\n    <!-- The object you pass to the `option` input will be exposed as `option` in the template -->\n    <ng-template let-option>\n      <div class=\"myClass\">\n        <h4>{{ option.name }}</h4>\n        <small>{{ option.value / 100 }}%</small>\n      </div>\n    </ng-template>\n  </ts-option>\n</ts-select>\n```\n\n### Custom view value\n\nPart of the option view can be defined as the 'view value' which is used to define the `title` attribute for the option:\n\n```html\n<ts-select>\n  <ts-option\n    *ngFor=\"let option of options\"\n    [value]=\"option.value\"\n    [option]=\"option\"\n  >\n    <ng-template let-option>\n      <div class=\"myClass\">\n        <!-- The content of this h4 will be used for the option title -->\n        <h4 tsOptionDisplay>{{ option.name }}</h4>\n        <small>{{ option.value / 100 }}%</small>\n      </div>\n    </ng-template>\n  </ts-option>\n</ts-select>\n```\n\n### Multiple selections\n\nAllow multiple selections via an `@Input`:\n\n```html\n<ts-select [allowMultiple]=\"true\">\n  ...\n</ts-select>\n```\n\nThis will show checkboxes next to each option and include a top-level 'Select All' toggle.\n\n### Custom delimiter\n\nThe delimiter is used to separate multiple options when shown in the trigger. By default this is a comma (`,`). A custom delimiter may also\nbe set:\n\n```html\n<ts-select\n  [allowMultiple]=\"true\"\n  delimiter=\"/\"\n>\n  ...\n</ts-select>\n<!-- Standard output: `foo, bar, baz` -->\n<!-- Output with custom delimiter: `foo/ bar/ baz` -->\n```\n\n### Custom sort comparator\n\nBy default, the selections will be stored in the order matching the order of items passed in. A custom sort comparator may be passed in\nto alter the sort order.\n\n```html\n<ts-select [sortComparator]=\"myComparatorFn\">\n  ...\n</ts-select>\n```\n\nThe comparator function type is `TsSelectSortComparatorFunction` and has the following format:\n\n```typescript\ntype TsSelectSortComparatorFunction = (\n  a: TsOptionComponent,\n  b: TsOptionComponent,\n  options: TsOptionComponent[],\n) => number;\n```\n\n### Filterable\n\nA select can include an input at the top of the list to filter options:\n\n```html\n<ts-select\n  [formControl]=\"myCtrl\"\n  [isFilterable]=\"true\"\n  (queryChange)=\"mySearchFunction($event)\"\n>\n  ...\n</ts-select>\n```\n\nAny unique, debounced query will be emitted through the `queryChange` emitter. The consumer is in control of what options are displayed. A\nblank option can be used to show the user a message when no items are found by the query.\n\n### Allow user to request update\n\nThere are times where the data may change after it is loaded. The `showRefresh` option allows the user to manually request updated data.\n\n```html\n<ts-select\n  [formControl]=\"myCtrl\"\n  [showRefresh]=\"true\"\n  (optionsRefreshRequested)=\"userRequestedRefresh()\"\n>\n  ...\n</ts-select>\n```\n\n### Prompt the user to refine their search\n\nFor certain queries it is not always possible to return all options. In those cases, we should prompt the user to refine their search for\nbetter results.\n\n```html\n<ts-select\n  [formControl]=\"myCtrl\"\n  [showRefineSearchMessage]=\"true\"\n>\n  ...\n</ts-select>\n```\n\nThis will show a message below all existing options:\n\n```bash\nNarrow your search to reveal hidden results.\n```\n\nIf the `totalHiddenResults` input is defined, the count will be included in the message:\n\n```html\n<ts-select\n  [formControl]=\"myCtrl\"\n  [showRefineSearchMessage]=\"true\"\n  [totalHiddenResults]=\"972\"\n>\n  ...\n</ts-select>\n```\n\nThis will show a message below all existing options:\n\n```bash\nNarrow your search to reveal 972 hidden results.\n```\n\n### Events\n\nMultiple events are fired during interaction with the select:\n\n| Event                     | Description                                     | Payload              |\n|:--------------------------|:------------------------------------------------|:---------------------|\n| `closed`                  | Fired when the panel is closed                  | `undefined`          |\n| `duplicateSelection`      | Fired when a duplicate selection is made        | `string`             |\n| `opened`                  | Fired when the panel is open                    | `undefined`          |\n| `optionDeselected`        | Fired when an option is deselected              | `TsSelectChange`     |\n| `optionSelected`          | Fired when an option is selected                | `TsSelectChange`     |\n| `optionsRefreshRequested` | Fired when the user selects the refresh trigger | `undefined`          |\n| `queryChange`             | Fired when query changes                        | `string`             |\n| `selectionChange`         | Fired when the selection changes                | `TsSelectChange`     |\n| `valueChange`             | Fired when the selection value changes          | `string \\| string[]` |\n\n```html\n<ts-select (selectionChange)=\"myFunction($event)\">\n  ...\n</ts-select>\n```\n\nThe `TsSelectChange` structure:\n\n```typescript\nclass TsSelectChange {\n  constructor(\n    // Reference to the select that emitted the change event\n    public source: TsSelectComponent,\n    // The current value\n    public value: any,\n  ) {}\n}\n\n```\n\n## Test helpers\n\nSome helpers are exposed to assist with testing. These are imported from `@terminus/ui-select/testing`;\n\n[[source]][test-helpers-src]\n\n| Function                  |\n|---------------------------|\n| `getSelectInstance`       |\n| `getSelectElement`        |\n| `getSelectTriggerElement` |\n| `getToggleAllElement`     |\n| `getPanelElement`         |\n| `getAllOptionInstances`   |\n| `getOptionInstance`       |\n| `getOptionElement`        |\n| `getAllOptgroups`         |\n| `getOptgroup`             |\n| `getOptgroupElement`      |\n| `getAllChipInstances`     |\n| `getChipInstance`         |\n| `getChipElement`          |\n| `getFilterInputElement`   |\n\n<!-- Links -->\n[test-helpers-src]:    testing/src/test-helpers.ts\n[selection-list-src]:  ../selection-list/\n[license-url]:         https://github.com/GetTerminus/terminus-oss/blob/release/LICENSE\n[license-image]:       http://img.shields.io/badge/license-MIT-blue.svg\n[codecov-project]:     https://codecov.io/gh/GetTerminus/terminus-oss\n[codecov-badge]:       https://codecov.io/gh/GetTerminus/terminus-oss/branch/release/graph/badge.svg\n[npm-version-image]:   http://img.shields.io/npm/v/@terminus/ui-select.svg\n[npm-package]:         https://www.npmjs.com/package/@terminus/ui-select\n[github-action-badge]: https://github.com/GetTerminus/terminus-oss/workflows/Release%20CI/badge.svg\n[github-action-link]:  https://github.com/GetTerminus/terminus-oss/actions?query=workflow%3A%22CI+Release%22\n[file-size-badge]:     http://img.badgesize.io/https://unpkg.com/@terminus/ui-select/bundles/terminus-ui-select.umd.min.js?compression=gzip\n[raw-distribution-js]: https://unpkg.com/@terminus/ui-select/bundles/terminus-ui-select.umd.js\n","readmeFilename":"README.md","description":"<h1>Select :rotating_light: DEPRECATED :rotating_light:</h1>","_id":"@terminus/ui-select@2.0.8","_nodeVersion":"12.18.3","_npmVersion":"lerna/3.22.1/node@v12.18.3+x64 (linux)","dist":{"integrity":"sha512-yhV9exqLy9l9qTzHjheNhiXRolfaOSiOaJr/wHDb199mIQHdvYHH5yNmM5pEnw7i7MhtNrXTNqRrQE7qTGA9IQ==","shasum":"bfb40864472cc524b8b494b4364319e331df0081","tarball":"https://registry.npmjs.org/@terminus/ui-select/-/ui-select-2.0.8.tgz","fileCount":81,"unpackedSize":1224466,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUlcOCRA9TVsSAnZWagAAuFsQAIY1knZ/+bAyTz2s5Iyw\nydB2vsKBtQda/Ev3CreJ84fXaeO+7MRVaxGGJ5D+hG7t9axEZYe4/5rjKvNh\n0VnOFsoOVAxODdUndg/ru7gxMF7/PPi22j+XjFoIR5YFryWpPWsnijk7G6UM\nKyb9O0QC7iN50wQ8zlz0JtksBPz92yxpsq2/TmXjBVq7GObyPV4Fgotd6o8j\nKf4oJcebuZVbFAfRyx3cuhH5TGng8f9q8SgPCwLegXzFvwsKg9VUSUJVNgy7\nK2cGn5mXJZovyjJpXu2Qburm1Uu55Bzo9wBWKC+d9hVxM2k3/YBFeq/FwxUE\ndj9P6UFQMNUvW7ClIDIM6DJc/qB0/0+/tTauk3UuHelXsTTTa9bZ/NQ7MMJF\n69g0eknzxZYRhtO9DzZS1G5Xc3yI2n14fF4zWSZcYv8nkgsJXtHUGMbgBg/B\nZGmjMM2u5czBhEm4Y2LUiMUTe7WQYBM7cePQ1TWRkOJt+Oue2+6nLOUkvdgk\nAdt70ZoX5um8Mwz3CdrDxq5vPPTfI5d+Rv++xv4D/hIRWhrdrC1Z7AEcMQ6q\nUyGXREck/H5jO/Qhfap4vN9mDHoHYKVQcFgGc7ybyAYiX4io47oKVUmvl7CI\nnBgFTzIjH5Zq8X6fkUPr05X3ytbYTWQKsGfZ3T9oAQFbh52zhLeCgs8YasLS\nPpS3\r\n=e/v4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGYbgbYs9gV9tu0QMCSnVvhAHIETrqlSMjHUpjPGMSz4AiAzxDTrnxdx2Q4ciiQCPxlgGYAR0yxO6a6J+jAfhUbjjQ=="}]},"maintainers":[{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"terminus_devops","email":"devops@terminus.com"}],"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-select_2.0.8_1599231758187_0.9242366098694179"},"_hasShrinkwrap":false},"2.1.0":{"name":"@terminus/ui-select","version":"2.1.0","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/select"},"peerDependencies":{"@angular/animations":"^9.1.0","@angular/cdk":"^9.2.4","@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/flex-layout":"~9.0.0-beta.29","@angular/forms":"^9.1.0","@angular/material":"^9.2.4","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^3.1.0","@terminus/fe-utilities":"^1.0.0","@terminus/ui-checkbox":"^2.0.6","@terminus/ui-form-field":"^2.0.8","@terminus/ui-icon":"^2.0.5","@terminus/ui-input":"^2.0.7","@terminus/ui-option":"^1.0.10","@terminus/ui-spacing":"^1.0.11","@terminus/ui-validation-messages":"^1.0.14","rxjs":"^6.5.0"},"schematics":"./schematics/collection.json","main":"bundles/terminus-ui-select.umd.js","module":"fesm5/terminus-ui-select.js","es2015":"fesm2015/terminus-ui-select.js","esm5":"esm5/terminus-ui-select.js","esm2015":"esm2015/terminus-ui-select.js","fesm5":"fesm5/terminus-ui-select.js","fesm2015":"fesm2015/terminus-ui-select.js","typings":"terminus-ui-select.d.ts","metadata":"terminus-ui-select.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0","date-fns":"2.15.0","@angular-devkit/schematics":"9.1.9","@schematics/angular":"9.1.12","@terminus/ui-utilities":"1.1.0","@terminus/ui-pipes":"1.1.0","@angular/router":"9.1.11","ngx-webstorage-service":"4.1.0","ngx-clipboard":"13.0.1","@fortawesome/fontawesome-svg-core":"1.2.30","@fortawesome/angular-fontawesome":"0.6.0","@fortawesome/pro-solid-svg-icons":"5.14.0","@terminus/ui-validators":"1.1.0","text-mask-addons":"3.8.0","text-mask-core":"5.1.2"},"description":"<h1>Select :rotating_light: DEPRECATED :rotating_light:</h1>","_id":"@terminus/ui-select@2.1.0","_nodeVersion":"12.18.3","_npmVersion":"lerna/3.22.1/node@v12.18.3+x64 (linux)","dist":{"integrity":"sha512-nSqlTacM4WFjwCmHbfup8knPD34/d1YBBysnGerTuD7XUX2gwEMIEA4wkTl1e86SLedEL6h57TM9KYe3lToleQ==","shasum":"8caf7ec9f816a9999aabdd9947e17b0d28c9288a","tarball":"https://registry.npmjs.org/@terminus/ui-select/-/ui-select-2.1.0.tgz","fileCount":81,"unpackedSize":1224973,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfV9MMCRA9TVsSAnZWagAA6LMP/RVhkzbsOxite7rAT5Za\nj+8JwUOZK1EpnS9wbQnxO0UGMQjZ/g2uSJFo9Z5Ok+RMcmc9Cg8Pw3BMsb+R\n+jebPGQ4Lo0QeIMne6e/KsutGb54ARN8dW1eHYathz8cz5lA+ETuM8R6W1zy\nhhHzi7bNozRBWjqSQPd/ijJsOECNkzrVJBJ3RzcdmYFBeHTcQq0igxAYg9EV\ncEckiLIJaf4wqZJi1FyIZsmLDDVxkkikftPQUVNy4EbDc2gdSppRoarTpsh5\nCJx/VPO17z+PQKber2lN6/7fghN/xiwETgJMYpz73HUIrcTkAz5GI1st6cOJ\ngyHKnUeC3pKclyrRsENULhWGE2xM4YvO97SsuruSynDCzSkuFo8x6tHz1Glt\nLEQBx9iiT52uslUH0FNtt5BMpUkLA91+Z+LuJDh2PGvisQPbCIvxUdwtWolU\nE5fZealr9il5bcVJDhqotcB9yQXSIJff4TksS1Sf3Km3zSP3f0ueqqisYzBf\njpwl06p5oCtfxykVZXR+o3exjveC+dCAlbyYNG8/IeHprbaH5RIvPZ6cAwLW\nW3Rz+yWwe7PSaTpupagBMrZ/kMOk/PsxTCTce9f+gzC7UAjsdphtxrqfjK6N\nibjRyIB9cOpn5UxhzBRKTidbpuQJBbmTy2nn9efroFpUZhjITwshx8AvuxaW\nssfb\r\n=36Ql\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF0KlVclJRTz/z8uHBTK1QPZ3SG+zsVJB+C6gd04YFxwAiEAvFDLonf3vzW782WqGDbFwv2m9BCOLTQYN+Pqbdmz7IM="}]},"maintainers":[{"name":"terminus_devops","email":"devops@terminus.com"},{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"}],"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-select_2.1.0_1599591180205_0.09326243099402798"},"_hasShrinkwrap":false},"2.1.1":{"name":"@terminus/ui-select","version":"2.1.1","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/select"},"peerDependencies":{"@angular/animations":"^9.1.0","@angular/cdk":"^9.2.4","@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/flex-layout":"~9.0.0-beta.29","@angular/forms":"^9.1.0","@angular/material":"^9.2.4","@angular/platform-browser":"^9.1.0","@fortawesome/angular-fontawesome":"^0.6.0","@fortawesome/fontawesome-svg-core":"^1.2.30","@fortawesome/pro-solid-svg-icons":"^5.14.0","@terminus/design-tokens":"^3.1.0","@terminus/fe-utilities":"^1.3.0","@terminus/ui-checkbox":"^2.0.6","@terminus/ui-form-field":"^2.0.8","@terminus/ui-icon":"^2.1.5","@terminus/ui-input":"^2.0.7","@terminus/ui-option":"^1.0.10","@terminus/ui-pipes":"^1.2.0","@terminus/ui-spacing":"^1.0.11","@terminus/ui-utilities":"^1.1.0","@terminus/ui-validation-messages":"^1.0.14","@terminus/ui-validators":"^2.0.4","date-fns":"^2.16.1","rxjs":"^6.5.0","text-mask-addons":"^3.8.0","text-mask-core":"^5.1.2"},"schematics":"./schematics/collection.json","main":"bundles/terminus-ui-select.umd.js","module":"fesm5/terminus-ui-select.js","es2015":"fesm2015/terminus-ui-select.js","esm5":"esm5/terminus-ui-select.js","esm2015":"esm2015/terminus-ui-select.js","fesm5":"fesm5/terminus-ui-select.js","fesm2015":"fesm2015/terminus-ui-select.js","typings":"terminus-ui-select.d.ts","metadata":"terminus-ui-select.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0","@angular-devkit/schematics":"9.1.9","@schematics/angular":"9.1.12"},"description":"<h1>Select :rotating_light: DEPRECATED :rotating_light:</h1>","_id":"@terminus/ui-select@2.1.1","_nodeVersion":"12.19.0","_npmVersion":"lerna/3.22.1/node@v12.19.0+x64 (linux)","dist":{"integrity":"sha512-s10GSsdfUrK+y1iWvUTePULbgnByfhs+JWlrXKLex0eFeFI78qBDj8G5gwNRabSIps7FdmcGJiLBZUWTVSxyQQ==","shasum":"488e5be1fe6c3db717cae85e586f20e16fdd9535","tarball":"https://registry.npmjs.org/@terminus/ui-select/-/ui-select-2.1.1.tgz","fileCount":81,"unpackedSize":1225589,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfq9MwCRA9TVsSAnZWagAAH80P/1EuQG6LNwdGYYVYueP0\ntdTSeO5TR4Xu2xRQrnMeE88k+em3l75OKPRtxgSdO8SG3qX/WaxWK2nRx7Ax\nc4lVK9mMkcoA3KOkKtUT5QpGJEQRxsNZL2ZV1/ttuXdwKFrIsYXYncZJlrvP\n+5ZzzR9EMaVJ9vcuN9p2OePyIs/9Z94/68EqLQDIp/JImNCuRcwkpaTQ0dQC\npCcrD+YDT6lPgqmDhrqd+O65coGyjAgdLaEH6pu39stOz7DO6Sd3pnkXmog5\n2csqS8/JB+aCOr0Vzcd8bgFTao9W2+IKbtbD6PY2t7IG+TrqUzpganPArZP9\nDczr7NYDZIs1PLkFBDoqgJIQYV4MnVYmutQalHOyFyAZJ6u6oBnfwAUewAbe\n7bqft3jmn4wsMDUcsks+96a5cuSqSD/V/pw8WRlnRQ4rk+v/Ph1uyTH7ge9z\nEj2bsVdHpwEPvbFB4hjdpH8ILMc/H+fv2y+VWFTe6iGyZi4GwcwGqd6ciS+j\n+dMzjNW3Lu2ll5dfvp3tZHLNaQBDJffJAsyAhlHEdNivphfbRnSkQrfui9cG\nEA7GfoBpAifSZByhH60JHevJNUSprsAti02616ZBq2e49gOQLEzNM8Sjsxwb\nYC9fAsdz7rTMzGmb/TjEtzoSum+GZPI+4ey6DrQtsX8A6084oA+L+jp6IA8u\nn6mV\r\n=JKPy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCXPZSJi6IrgPsMerHpBdsj5tUPy0Qii0xGUt/bpxGFzgIhAKLaqrl9tR1nHBBDvPTEWTzNjFs2G77CHeb0sJZLcYLo"}]},"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"maintainers":[{"name":"terminus_devops","email":"devops@terminus.com"},{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-select_2.1.1_1605096240071_0.8836418564132125"},"_hasShrinkwrap":false},"2.1.2":{"name":"@terminus/ui-select","version":"2.1.2","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/select"},"peerDependencies":{"@angular/animations":"^9.1.0","@angular/cdk":"^9.2.4","@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/flex-layout":"~9.0.0-beta.29","@angular/forms":"^9.1.0","@angular/material":"^9.2.4","@angular/platform-browser":"^9.1.0","@fortawesome/angular-fontawesome":"^0.6.0","@fortawesome/fontawesome-svg-core":"^1.2.30","@fortawesome/pro-solid-svg-icons":"^5.14.0","@terminus/design-tokens":"^3.1.0","@terminus/fe-utilities":"^1.3.0","@terminus/ui-checkbox":"^2.0.6","@terminus/ui-form-field":"^2.0.8","@terminus/ui-icon":"^2.1.5","@terminus/ui-input":"^2.0.7","@terminus/ui-option":"^1.0.10","@terminus/ui-pipes":"^1.2.0","@terminus/ui-spacing":"^1.0.11","@terminus/ui-styles":"^1.1.0","@terminus/ui-utilities":"^1.1.0","@terminus/ui-validation-messages":"^1.0.14","@terminus/ui-validators":"^2.0.4","date-fns":"^2.16.1","rxjs":"^6.5.0","text-mask-addons":"^3.8.0","text-mask-core":"^5.1.2"},"schematics":"./schematics/collection.json","main":"bundles/terminus-ui-select.umd.js","module":"fesm5/terminus-ui-select.js","es2015":"fesm2015/terminus-ui-select.js","esm5":"esm5/terminus-ui-select.js","esm2015":"esm2015/terminus-ui-select.js","fesm5":"fesm5/terminus-ui-select.js","fesm2015":"fesm2015/terminus-ui-select.js","typings":"terminus-ui-select.d.ts","metadata":"terminus-ui-select.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0","@angular-devkit/schematics":"9.1.9","@schematics/angular":"9.1.12"},"description":"<h1>Select :rotating_light: DEPRECATED :rotating_light:</h1>","_id":"@terminus/ui-select@2.1.2","_nodeVersion":"12.19.0","_npmVersion":"lerna/3.22.1/node@v12.19.0+x64 (linux)","dist":{"integrity":"sha512-XGu8FVzOkaYG8tB1giva+S1W1UpRYm7lWYRXDhFc3ih+ELgHBqd2J80wPvkkbw8DUb3cJymPOvbOjdNxfXHPyQ==","shasum":"57bca6ffaa43659badd682fbb3b43b064349deee","tarball":"https://registry.npmjs.org/@terminus/ui-select/-/ui-select-2.1.2.tgz","fileCount":81,"unpackedSize":1225977,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrB3QCRA9TVsSAnZWagAANlYP/iBzz1sZdJuQ0kqIxU8u\nyCB/rU/bt17iwergLin61/12KPoZG8LGEQo4nWCGwXPUUiqzlUEPCheaZZQf\nBFVL7hPy8UHMi27v5/0ig/a0wPkpkwExBB23A/Q/pXZhP5I/SfHoHrlHWUlf\nlIuFIu5K3f6iKnBXUX4zl4TQY5ZdqOps3iHUH+KQ2mn/GYij+n9tPCEgLehA\n6VCifnjlBzjw4k6879a8PQdiQbKZn/PiwNFtk0ADSdrLNIvhkneU87mT7+1B\n4B3UJrWbDN/Wswm8lsHQKo3NNNYINc8kGKBNaxGojyQtHt9HVI6qA4tLvNX7\n7BlOf7PYKFwnVK7+Us85unvLMvuAWPlWoY8jaGRtiZ50SUFHCIFuOPDBRX55\n8vmOpPhK1dOv57z6ChDQK/5s/qUjaIHwStEKf/tfMhWmHYy3x9n+TR38XNcF\nxeQU/0zfRF1Godj7u4xPEOX6jORUQTJQ8Rhp8mLRFDat/4NdodbhFuU6b4Lg\nb1kaSxbI0PbrE/koUqtyyYSv2Rb77DIcb3/BN1Ll12FvZNSHkKEgcm195gHf\nSrMV1cKjz8y3y7KzhacTo8Gb0PQgAzuaJF/V0FGIF7BN71Oq7qiyFY11spno\nDm9eP7YYw2sUZub1f9wqUu5QHRf9WkCNr5A3k3KrUhQXqmb3LRfiLp983wmQ\n4lqw\r\n=LMj9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEOtRj03Zpx7JOvG/yeugUbTPFaC0bh1SR/RB7ZhdSLJAiBnsAem3a9c7FqvzX4FtWXAuPqpCQIqny2d3bUEH4D2qw=="}]},"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"maintainers":[{"name":"terminus_devops","email":"devops@terminus.com"},{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-select_2.1.2_1605115344154_0.5001699326315658"},"_hasShrinkwrap":false},"3.0.0":{"name":"@terminus/ui-select","version":"3.0.0","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/select"},"dependencies":{"tslib":"^2.0.3","@angular-devkit/schematics":"11.0.4","@schematics/angular":"11.0.4"},"peerDependencies":{"@angular/animations":"^11.0.4","@angular/cdk":"^11.0.3","@angular/common":"^11.0.4","@angular/core":"^11.0.4","@angular/flex-layout":"~11.0.0-beta.33","@angular/forms":"^11.0.4","@angular/material":"^11.0.3","@angular/platform-browser":"^11.0.4","@fortawesome/angular-fontawesome":"^0.8.1","@fortawesome/fontawesome-svg-core":"^1.2.32","@fortawesome/pro-solid-svg-icons":"^5.15.1","@terminus/design-tokens":"^3.1.0","@terminus/fe-utilities":"^2.0.0","@terminus/ui-checkbox":"^4.0.0","@terminus/ui-form-field":"^3.0.0","@terminus/ui-icon":"^3.0.0","@terminus/ui-input":"^4.0.0","@terminus/ui-option":"^2.0.0","@terminus/ui-pipes":"^2.0.0","@terminus/ui-spacing":"^2.0.0","@terminus/ui-styles":"^2.0.0","@terminus/ui-utilities":"^2.0.0","@terminus/ui-validation-messages":"^2.0.0","@terminus/ui-validators":"^3.0.0","date-fns":"^2.16.1","rxjs":"^6.6.3","text-mask-addons":"^3.8.0","text-mask-core":"^5.1.2"},"schematics":"./schematics/collection.json","main":"bundles/terminus-ui-select.umd.js","module":"fesm2015/terminus-ui-select.js","es2015":"fesm2015/terminus-ui-select.js","esm2015":"esm2015/terminus-ui-select.js","fesm2015":"fesm2015/terminus-ui-select.js","typings":"terminus-ui-select.d.ts","metadata":"terminus-ui-select.metadata.json","sideEffects":false,"readme":"<h1>Select :rotating_light: DEPRECATED :rotating_light:</h1>\n\n[![CI/CD Status][github-action-badge]][github-action-link] [![Codecov][codecov-badge]][codecov-project] [![MIT License][license-image]][license-url]  \n[![NPM version][npm-version-image]][npm-package] [![Library size][file-size-badge]][raw-distribution-js]\n\n---\n\n> :rotating_light: NOTE: This component is deprecated. Please use the [Selection List Component][selection-list-src].\n\n---\n\nA custom select dropdown.\n\n<!-- START doctoc generated TOC please keep comment here to allow auto update -->\n<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->\n## Table of Contents\n\n- [Installation](#installation)\n  - [CSS imports](#css-imports)\n  - [CSS resources](#css-resources)\n- [Usage](#usage)\n  - [Label](#label)\n  - [Hint](#hint)\n  - [No validation or hint](#no-validation-or-hint)\n  - [FormControl](#formcontrol)\n  - [ngModel](#ngmodel)\n  - [Custom compare function](#custom-compare-function)\n  - [Optgroups](#optgroups)\n  - [Disabled](#disabled)\n    - [Disable via Input](#disable-via-input)\n    - [Disable via FormControl](#disable-via-formcontrol)\n    - [Disabled Option](#disabled-option)\n    - [Disabled Optgroup](#disabled-optgroup)\n  - [Required](#required)\n    - [Required by Input](#required-by-input)\n    - [Required by FormControl](#required-by-formcontrol)\n  - [Placeholder](#placeholder)\n  - [Custom trigger value](#custom-trigger-value)\n  - [Blank option](#blank-option)\n  - [Option template](#option-template)\n  - [Custom view value](#custom-view-value)\n  - [Multiple selections](#multiple-selections)\n  - [Custom delimiter](#custom-delimiter)\n  - [Custom sort comparator](#custom-sort-comparator)\n  - [Filterable](#filterable)\n  - [Allow user to request update](#allow-user-to-request-update)\n  - [Prompt the user to refine their search](#prompt-the-user-to-refine-their-search)\n  - [Events](#events)\n- [Test helpers](#test-helpers)\n\n<!-- END doctoc generated TOC please keep comment here to allow auto update -->\n\n## Installation\n\nUse the `ng add` command to quickly install all the needed dependencies:\n\n```bash\nng add @terminus/ui-select\n```\n\n### CSS imports\n\nIn your top-level stylesheet, add these imports:\n\n```css\n@import '~@terminus/design-tokens/css/library-design-tokens.css';\n@import '~@terminus/ui-styles/terminus-ui.css';\n```  \n\n### CSS resources\n\nLoad the needed font families by adding this link to the `<head>` of your application:\n\n```css\n<link href=\"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400&display=swap\" rel=\"stylesheet\">\n```\n\n## Usage\n\nThe most basic usage is by wrapping one or more `ts-option`s inside an `ts-select`:\n\n```html\n<!-- Define the option value by passing a property to the option's `value` input -->\n<ts-select>\n  <ts-option\n    *ngFor=\"let item of items\"\n    [value]=\"item.value\"\n  >{{ item.name }}</ts-option>\n</ts-select>\n```\n\n### Label\n\nDefine a label on the select:\n\n```html\n<ts-select label=\"My cool label!\">\n  ...\n</ts-select>\n```\n\n### Hint\n\nDefine a hint on the select:\n\n```html\n<ts-select hint=\"Please select an option\">\n  ...\n</ts-select>\n```\n\n### No validation or hint\n\nA flag to define whether this select field needs validation or hint. If it needs validation or hint, a padding bottom is added for the message, otherwise, no padding at the bottom.\n\n```html\n<ts-select\n  [formControl]=\"myCtrl\"\n  [noValidationOrHint]=\"true\"\n></ts-select>\n```\n\n### FormControl\n\nTo use a `FormControl` with the select, pass the control in:\n\n```html\n<ts-select [formControl]=\"myCtrl\">\n  ...\n</ts-select>\n```\n\n### ngModel\n\nTo use `ngModel`, add the model to the select:\n\n```html\n<ts-select [(ngModel)]=\"myModel\">\n  ...\n</ts-select>\n```\n\n### Custom compare function\n\nIf more refined control of how options are compared is needed, a custom comparator function can be used:\n\n```html\n<ts-select [compareWith]=\"compareByReference\">\n  ...\n</ts-select>\n```\n\n```typescript\n// Example comparing by reference:\ncompareByReference(f1: any, f2: any) { return f1 === f2; }\n\n// Example comparing by value:\ncompareByValue(f1: any, f2: any) { return f1 && f2 && f1.text === f2.text; }\n```\n\n```typescript\nTsOptionCompareWith = (o1: any, o2: any) => boolean;\n```\n\n### Optgroups\n\nOptgroups can be used by wrapping one or more options inside an optgroup component:\n\n```html\n<ts-select>\n  <ts-select-optgroup\n    *ngFor=\"let group of itemsWithGroups\"\n    [label]=\"group.myLabel\"\n  >\n    <ts-option\n      *ngFor=\"let child of group.children\"\n      [value]=\"child.slug\"\n    >{{ child.foo }}</ts-option>\n  </ts-select-optgroup>\n</ts-select>\n```\n\n### Disabled\n\nThe entire select can be disabled in one of two ways:\n\n#### Disable via Input\n\n```html\n<ts-select [isDisabled]=\"true\">\n  ...\n</ts-select>\n```\n\n#### Disable via FormControl\n\n```typescript\nmyCtrl = new FormControl({value: null, disabled: true});\n```\n\n```html\n<ts-select [formControl]=\"myCtrl\">\n  ...\n</ts-select>\n```\n\n#### Disabled Option\n\nIndividual options may also be disabled:\n\n```html\n<ts-select>\n  <ts-option\n    *ngFor=\"let option of options\"\n    [value]=\"option.value\"\n    [isDisabled]=\"option.disabled\" <!-- Disabled when true -->\n  >{{ option.name }}</ts-option>\n</ts-select>\n```\n\n#### Disabled Optgroup\n\nEntire optgroups can be disabled just like options. When an optgroup is disabled, all options that are children of that optgroup\nare also disabled.\n\n```html\n<ts-select>\n  <ts-select-optgroup\n    *ngFor=\"let group of itemsWithGroups\"\n    [label]=\"group.myLabel\"\n    [isDisabled]=\"option.disabled\" <!-- Disabled when true -->\n  >\n    <ts-option\n      *ngFor=\"let child of group.children\"\n      [value]=\"child.slug\"\n    >{{ child.foo }}</ts-option>\n  </ts-select-optgroup>\n</ts-select>\n```\n\n### Required\n\nThe entire select can be marked required in one of two ways:\n\n#### Required by Input\n\n```html\n<ts-select [isRequired]=\"true\">\n  ...\n</ts-select>\n```\n\n#### Required by FormControl\n\n```typescript\nmyCtrl = new FormControl(null, Validators.required);\n```\n\n```html\n<ts-select [formControl]=\"myCtrl\">\n  ...\n</ts-select>\n```\n\n### Placeholder\n\nThe placeholder is used for the trigger value when the control or model value is empty.\n\n```html\n<ts-select placeholder=\"Please make a selection.\">\n  ...\n</ts-select>\n```\n\n### Custom trigger value\n\nCustom HTML can be used for the trigger value by using the `ts-select-trigger` component. This trigger will be shown when the control or\nmodel does have value.\n\n```html\n<ts-select>\n  <!-- Here is my custom trigger! -->\n  <ts-select-trigger>\n    My custom trigger!\n    With <strong>custom</strong> HTML!\n  </ts-select-trigger>\n\n  <ts-option\n    [value]=\"option.value\"\n    *ngFor=\"let option of options\"\n  >{{ option.name }}</ts-option>\n</ts-select>\n```\n\n### Blank option\n\nA blank option can be implemented by adding a `ts-option` with no value:\n\n```html\n<ts-select [formControl]=\"myForm.get('myChoices1')\">\n  <ts-option>\n    None\n  </ts-option>\n\n  <ts-option\n    [value]=\"option.value\"\n    *ngFor=\"let option of options\"\n  >{{ option.name }}</ts-option>\n</ts-select>\n```\n\n### Option template\n\nA custom template can be used for the option content.\n\n> NOTE: The option object *must* be passed into the option when using a custom template\n\n```html\n<ts-select>\n  <ts-option\n    *ngFor=\"let option of options\"\n    [value]=\"option.value\"\n    [option]=\"option\"\n  >\n    <!-- The object you pass to the `option` input will be exposed as `option` in the template -->\n    <ng-template let-option>\n      <div class=\"myClass\">\n        <h4>{{ option.name }}</h4>\n        <small>{{ option.value / 100 }}%</small>\n      </div>\n    </ng-template>\n  </ts-option>\n</ts-select>\n```\n\n### Custom view value\n\nPart of the option view can be defined as the 'view value' which is used to define the `title` attribute for the option:\n\n```html\n<ts-select>\n  <ts-option\n    *ngFor=\"let option of options\"\n    [value]=\"option.value\"\n    [option]=\"option\"\n  >\n    <ng-template let-option>\n      <div class=\"myClass\">\n        <!-- The content of this h4 will be used for the option title -->\n        <h4 tsOptionDisplay>{{ option.name }}</h4>\n        <small>{{ option.value / 100 }}%</small>\n      </div>\n    </ng-template>\n  </ts-option>\n</ts-select>\n```\n\n### Multiple selections\n\nAllow multiple selections via an `@Input`:\n\n```html\n<ts-select [allowMultiple]=\"true\">\n  ...\n</ts-select>\n```\n\nThis will show checkboxes next to each option and include a top-level 'Select All' toggle.\n\n### Custom delimiter\n\nThe delimiter is used to separate multiple options when shown in the trigger. By default this is a comma (`,`). A custom delimiter may also\nbe set:\n\n```html\n<ts-select\n  [allowMultiple]=\"true\"\n  delimiter=\"/\"\n>\n  ...\n</ts-select>\n<!-- Standard output: `foo, bar, baz` -->\n<!-- Output with custom delimiter: `foo/ bar/ baz` -->\n```\n\n### Custom sort comparator\n\nBy default, the selections will be stored in the order matching the order of items passed in. A custom sort comparator may be passed in\nto alter the sort order.\n\n```html\n<ts-select [sortComparator]=\"myComparatorFn\">\n  ...\n</ts-select>\n```\n\nThe comparator function type is `TsSelectSortComparatorFunction` and has the following format:\n\n```typescript\ntype TsSelectSortComparatorFunction = (\n  a: TsOptionComponent,\n  b: TsOptionComponent,\n  options: TsOptionComponent[],\n) => number;\n```\n\n### Filterable\n\nA select can include an input at the top of the list to filter options:\n\n```html\n<ts-select\n  [formControl]=\"myCtrl\"\n  [isFilterable]=\"true\"\n  (queryChange)=\"mySearchFunction($event)\"\n>\n  ...\n</ts-select>\n```\n\nAny unique, debounced query will be emitted through the `queryChange` emitter. The consumer is in control of what options are displayed. A\nblank option can be used to show the user a message when no items are found by the query.\n\n### Allow user to request update\n\nThere are times where the data may change after it is loaded. The `showRefresh` option allows the user to manually request updated data.\n\n```html\n<ts-select\n  [formControl]=\"myCtrl\"\n  [showRefresh]=\"true\"\n  (optionsRefreshRequested)=\"userRequestedRefresh()\"\n>\n  ...\n</ts-select>\n```\n\n### Prompt the user to refine their search\n\nFor certain queries it is not always possible to return all options. In those cases, we should prompt the user to refine their search for\nbetter results.\n\n```html\n<ts-select\n  [formControl]=\"myCtrl\"\n  [showRefineSearchMessage]=\"true\"\n>\n  ...\n</ts-select>\n```\n\nThis will show a message below all existing options:\n\n```bash\nNarrow your search to reveal hidden results.\n```\n\nIf the `totalHiddenResults` input is defined, the count will be included in the message:\n\n```html\n<ts-select\n  [formControl]=\"myCtrl\"\n  [showRefineSearchMessage]=\"true\"\n  [totalHiddenResults]=\"972\"\n>\n  ...\n</ts-select>\n```\n\nThis will show a message below all existing options:\n\n```bash\nNarrow your search to reveal 972 hidden results.\n```\n\n### Events\n\nMultiple events are fired during interaction with the select:\n\n| Event                     | Description                                     | Payload              |\n|:--------------------------|:------------------------------------------------|:---------------------|\n| `closed`                  | Fired when the panel is closed                  | `undefined`          |\n| `duplicateSelection`      | Fired when a duplicate selection is made        | `string`             |\n| `opened`                  | Fired when the panel is open                    | `undefined`          |\n| `optionDeselected`        | Fired when an option is deselected              | `TsSelectChange`     |\n| `optionSelected`          | Fired when an option is selected                | `TsSelectChange`     |\n| `optionsRefreshRequested` | Fired when the user selects the refresh trigger | `undefined`          |\n| `queryChange`             | Fired when query changes                        | `string`             |\n| `selectionChange`         | Fired when the selection changes                | `TsSelectChange`     |\n| `valueChange`             | Fired when the selection value changes          | `string \\| string[]` |\n\n```html\n<ts-select (selectionChange)=\"myFunction($event)\">\n  ...\n</ts-select>\n```\n\nThe `TsSelectChange` structure:\n\n```typescript\nclass TsSelectChange {\n  constructor(\n    // Reference to the select that emitted the change event\n    public source: TsSelectComponent,\n    // The current value\n    public value: any,\n  ) {}\n}\n\n```\n\n## Test helpers\n\nSome helpers are exposed to assist with testing. These are imported from `@terminus/ui-select/testing`;\n\n[[source]][test-helpers-src]\n\n| Function                  |\n|---------------------------|\n| `getSelectInstance`       |\n| `getSelectElement`        |\n| `getSelectTriggerElement` |\n| `getToggleAllElement`     |\n| `getPanelElement`         |\n| `getAllOptionInstances`   |\n| `getOptionInstance`       |\n| `getOptionElement`        |\n| `getAllOptgroups`         |\n| `getOptgroup`             |\n| `getOptgroupElement`      |\n| `getAllChipInstances`     |\n| `getChipInstance`         |\n| `getChipElement`          |\n| `getFilterInputElement`   |\n\n<!-- Links -->\n[test-helpers-src]:    testing/src/test-helpers.ts\n[selection-list-src]:  ../selection-list/\n[license-url]:         https://github.com/GetTerminus/terminus-oss/blob/release/LICENSE\n[license-image]:       http://img.shields.io/badge/license-MIT-blue.svg\n[codecov-project]:     https://codecov.io/gh/GetTerminus/terminus-oss\n[codecov-badge]:       https://codecov.io/gh/GetTerminus/terminus-oss/branch/release/graph/badge.svg\n[npm-version-image]:   http://img.shields.io/npm/v/@terminus/ui-select.svg\n[npm-package]:         https://www.npmjs.com/package/@terminus/ui-select\n[github-action-badge]: https://github.com/GetTerminus/terminus-oss/workflows/Release%20CI/badge.svg\n[github-action-link]:  https://github.com/GetTerminus/terminus-oss/actions?query=workflow%3A%22CI+Release%22\n[file-size-badge]:     http://img.badgesize.io/https://unpkg.com/@terminus/ui-select/bundles/terminus-ui-select.umd.min.js?compression=gzip\n[raw-distribution-js]: https://unpkg.com/@terminus/ui-select/bundles/terminus-ui-select.umd.js\n","readmeFilename":"README.md","description":"<h1>Select :rotating_light: DEPRECATED :rotating_light:</h1>","_id":"@terminus/ui-select@3.0.0","_nodeVersion":"12.20.0","_npmVersion":"lerna/3.22.1/node@v12.20.0+x64 (linux)","dist":{"integrity":"sha512-HPmXH5I/OfyVN97Qw6VcV1Akk8m8JNRVQ8iuADGCK66UcoO/gGLQAayv3SZ/jClMNTMWYGwv6kl65OQHjLz4pA==","shasum":"f5bfa37a121b3100a292d009aafb975790f190c7","tarball":"https://registry.npmjs.org/@terminus/ui-select/-/ui-select-3.0.0.tgz","fileCount":59,"unpackedSize":834166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2hfxCRA9TVsSAnZWagAAol8P/0lYMVv8u7vheram09Gf\naDuK2cHvz5MaYW9n/JLz5cdbGzEbkWhPynWE5u+KB9AundsTY5FavC4Wy4lZ\nC80EPWN7SZiKhax2fCFi6TtS2fOBC/+KOZRz4MnXxEBKN1+D5MH0tZ4ApOAP\nzNyfsJn2wXkQsArytFiXVSUJEQLUCnyrWA5HHMCKaF3aCVpN1Of9298LDopv\nj5nh+oL9tfVGhcyShAOtFGNyYxS+d8JKkel09Caw3ULJIF9ST4SUt8ItE875\n8InCU9U95g6c44Tr9AYOAko5EHIE14N5j8YYg0RN4xZCxyHtineEvyQiluKq\nYhoab+9UwVu96zpmLNvMxNnHt5U9uWwTSjtPYo//LhJJbb0g8VOygfIobrL6\ny6dQ8YTEuzCMlpTbIJ/oi20SxisIg+gTII3XyUWadlIu0IGv9rkBTmmAeZiT\nk2LIShLVUKaIwrxo1jFkZiF5DAvvk5GYxqelZ9mY0s9AtCU8FvXX/bMRJ2Bu\nhUQMR23yM5wt/ynAiFmxpki6Dd4oLw8vC9Jz2TTz8LtkP8vjcvS/6tyTDYHz\n1QD3GTIUoAHNutkPjeMcmuv6ujoTgjyXysG642/eOCZhggCLLuR2MSibJ2kZ\nve0qmqsCMZqfzJtq2C/NU2BYxeEo9l3f+5nosldvMCcqLf9v5V176hH55iFo\nR3QX\r\n=EikV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGRb4qToCsnNyhbQs8viMEzjsqA9j7o1m38QnjfZY/Z2AiEAj6lBKc4bAE2ofCf5XYBpIX6P2taFO8jzJyaozxWYz6A="}]},"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"maintainers":[{"name":"benjamincharity","email":"ben@benjamincharity.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"terminus_devops","email":"devops@terminus.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-select_3.0.0_1608128496688_0.8085619651142395"},"_hasShrinkwrap":false}},"time":{"created":"2020-06-02T05:03:04.075Z","0.0.1":"2020-06-02T05:03:04.392Z","modified":"2022-04-07T05:16:20.920Z","1.0.0":"2020-06-04T17:00:35.959Z","1.0.1":"2020-06-04T18:33:31.300Z","1.0.2":"2020-06-05T02:20:12.475Z","1.0.3":"2020-06-10T13:32:01.280Z","1.0.4":"2020-06-10T19:18:06.627Z","1.0.5":"2020-06-11T14:19:22.153Z","1.0.6":"2020-06-23T15:35:41.669Z","1.0.7":"2020-07-07T15:39:49.455Z","1.0.8":"2020-07-13T19:24:52.639Z","2.0.0":"2020-07-27T19:40:32.103Z","2.0.1":"2020-07-28T15:29:45.643Z","2.0.2":"2020-07-28T18:29:02.713Z","2.0.3":"2020-07-29T15:34:26.944Z","2.0.4":"2020-07-31T14:01:20.782Z","2.0.5":"2020-07-31T16:21:59.029Z","2.0.6":"2020-08-10T16:21:16.753Z","2.0.7":"2020-08-14T15:32:36.373Z","2.0.8":"2020-09-04T15:02:38.435Z","2.1.0":"2020-09-08T18:53:00.367Z","2.1.1":"2020-11-11T12:04:00.226Z","2.1.2":"2020-11-11T17:22:24.423Z","3.0.0":"2020-12-16T14:21:36.915Z"},"maintainers":[{"email":"brian.malinconico@terminus.com","name":"bmalinconico-terminus"},{"email":"atlwendy@gmail.com","name":"atlwendy"},{"email":"devops@terminus.com","name":"terminus_devops"}],"description":"<h1>Select :rotating_light: DEPRECATED :rotating_light:</h1>","homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"author":{"name":"@terminus"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"license":"MIT","readme":"<h1>Select :rotating_light: DEPRECATED :rotating_light:</h1>\n\n[![CI/CD Status][github-action-badge]][github-action-link] [![Codecov][codecov-badge]][codecov-project] [![MIT License][license-image]][license-url]  \n[![NPM version][npm-version-image]][npm-package] [![Library size][file-size-badge]][raw-distribution-js]\n\n---\n\n> :rotating_light: NOTE: This component is deprecated. Please use the [Selection List Component][selection-list-src].\n\n---\n\nA custom select dropdown.\n\n<!-- START doctoc generated TOC please keep comment here to allow auto update -->\n<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->\n## Table of Contents\n\n- [Installation](#installation)\n  - [Packages that need to be installed](#packages-that-need-to-be-installed)\n  - [Modules that need to be in NgModule](#modules-that-need-to-be-in-ngmodule)\n  - [CSS imports](#css-imports)\n  - [CSS resources](#css-resources)\n- [Usage](#usage)\n  - [Label](#label)\n  - [Hint](#hint)\n  - [No validation or hint](#no-validation-or-hint)\n  - [FormControl](#formcontrol)\n  - [ngModel](#ngmodel)\n  - [Custom compare function](#custom-compare-function)\n  - [Optgroups](#optgroups)\n  - [Disabled](#disabled)\n    - [Disable via Input](#disable-via-input)\n    - [Disable via FormControl](#disable-via-formcontrol)\n    - [Disabled Option](#disabled-option)\n    - [Disabled Optgroup](#disabled-optgroup)\n  - [Required](#required)\n    - [Required by Input](#required-by-input)\n    - [Required by FormControl](#required-by-formcontrol)\n  - [Placeholder](#placeholder)\n  - [Custom trigger value](#custom-trigger-value)\n  - [Blank option](#blank-option)\n  - [Option template](#option-template)\n  - [Custom view value](#custom-view-value)\n  - [Multiple selections](#multiple-selections)\n  - [Custom delimiter](#custom-delimiter)\n  - [Custom sort comparator](#custom-sort-comparator)\n  - [Filterable](#filterable)\n  - [Allow user to request update](#allow-user-to-request-update)\n  - [Prompt the user to refine their search](#prompt-the-user-to-refine-their-search)\n  - [Events](#events)\n- [Test helpers](#test-helpers)\n\n<!-- END doctoc generated TOC please keep comment here to allow auto update -->\n\n## Installation\n\n### Packages that need to be installed\n\n- `@angular/cdk`\n- `@angular/common`\n- `@angular/core`\n- `@angular/flex-layout`\n- `@angular/forms`\n- `@angular/material`\n- `@angular/platform-browser`\n- `@terminus/design-tokens`\n- `@terminus/fe-utilities`\n- `@terminus/ui-checkbox`\n- `@terminus/ui-form-field`\n- `@terminus/ui-icon`\n- `@terminus/ui-input`\n- `@terminus/ui-option`\n- `@terminus/ui-pipes`\n- `@terminus/ui-validators`\n- `@terminus/ui-spacing`\n- `@terminus/ui-styles`\n- `@terminus/ui-validation-messages`\n- `@terminus/ui-utilities`\n- `@terminus/ui-select`\n- `date-fns`\n- `text-mask-addons`\n- `text-mask-core`\n\nUse the `ng add` command to quickly install all the needed dependencies:\n\n```bash\nng add @terminus/ui-select\n```\n\n### Modules that need to be in NgModule\n\n- `BrowserAnimationsModule,`\n- `TsOptionModule,`\n- `TsSelectModule,`\n- `FormsModule,`\n- `ReactiveFormsModule`\n\n### CSS imports\n\nIn your top level stylesheet, add these imports:\n\n```css\n@import '~@terminus/design-tokens/css/library-design-tokens.css';\n@import '~@terminus/ui-styles/terminus-ui.css';\n```  \n\n### CSS resources\n\nLoad the needed font families by adding this link to the `<head>` of your application:\n\n```css\n<link href=\"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400&display=swap\" rel=\"stylesheet\">\n```\n\n## Usage\n\nThe most basic usage is by wrapping one or more `ts-option`s inside an `ts-select`:\n\n```html\n<!-- Define the option value by passing a property to the option's `value` input -->\n<ts-select>\n  <ts-option\n    *ngFor=\"let item of items\"\n    [value]=\"item.value\"\n  >{{ item.name }}</ts-option>\n</ts-select>\n```\n\n### Label\n\nDefine a label on the select:\n\n```html\n<ts-select label=\"My cool label!\">\n  ...\n</ts-select>\n```\n\n### Hint\n\nDefine a hint on the select:\n\n```html\n<ts-select hint=\"Please select an option\">\n  ...\n</ts-select>\n```\n\n### No validation or hint\n\nA flag to define whether this select field needs validation or hint. If it needs validation or hint, a padding bottom is added for the message, otherwise, no padding at the bottom.\n\n```html\n<ts-select\n  [formControl]=\"myCtrl\"\n  [noValidationOrHint]=\"true\"\n></ts-select>\n```\n\n### FormControl\n\nTo use a `FormControl` with the select, pass the control in:\n\n```html\n<ts-select [formControl]=\"myCtrl\">\n  ...\n</ts-select>\n```\n\n### ngModel\n\nTo use `ngModel`, add the model to the select:\n\n```html\n<ts-select [(ngModel)]=\"myModel\">\n  ...\n</ts-select>\n```\n\n### Custom compare function\n\nIf more refined control of how options are compared is needed, a custom comparator function can be used:\n\n```html\n<ts-select [compareWith]=\"compareByReference\">\n  ...\n</ts-select>\n```\n\n```typescript\n// Example comparing by reference:\ncompareByReference(f1: any, f2: any) { return f1 === f2; }\n\n// Example comparing by value:\ncompareByValue(f1: any, f2: any) { return f1 && f2 && f1.text === f2.text; }\n```\n\n```typescript\nTsOptionCompareWith = (o1: any, o2: any) => boolean;\n```\n\n### Optgroups\n\nOptgroups can be used by wrapping one or more options inside an optgroup component:\n\n```html\n<ts-select>\n  <ts-select-optgroup\n    *ngFor=\"let group of itemsWithGroups\"\n    [label]=\"group.myLabel\"\n  >\n    <ts-option\n      *ngFor=\"let child of group.children\"\n      [value]=\"child.slug\"\n    >{{ child.foo }}</ts-option>\n  </ts-select-optgroup>\n</ts-select>\n```\n\n### Disabled\n\nThe entire select can be disabled in one of two ways:\n\n#### Disable via Input\n\n```html\n<ts-select [isDisabled]=\"true\">\n  ...\n</ts-select>\n```\n\n#### Disable via FormControl\n\n```typescript\nmyCtrl = new FormControl({value: null, disabled: true});\n```\n\n```html\n<ts-select [formControl]=\"myCtrl\">\n  ...\n</ts-select>\n```\n\n#### Disabled Option\n\nIndividual options may also be disabled:\n\n```html\n<ts-select>\n  <ts-option\n    *ngFor=\"let option of options\"\n    [value]=\"option.value\"\n    [isDisabled]=\"option.disabled\" <!-- Disabled when true -->\n  >{{ option.name }}</ts-option>\n</ts-select>\n```\n\n#### Disabled Optgroup\n\nEntire optgroups can be disabled just like options. When an optgroup is disabled, all options that are children of that optgroup\nare also disabled.\n\n```html\n<ts-select>\n  <ts-select-optgroup\n    *ngFor=\"let group of itemsWithGroups\"\n    [label]=\"group.myLabel\"\n    [isDisabled]=\"option.disabled\" <!-- Disabled when true -->\n  >\n    <ts-option\n      *ngFor=\"let child of group.children\"\n      [value]=\"child.slug\"\n    >{{ child.foo }}</ts-option>\n  </ts-select-optgroup>\n</ts-select>\n```\n\n### Required\n\nThe entire select can be marked required in one of two ways:\n\n#### Required by Input\n\n```html\n<ts-select [isRequired]=\"true\">\n  ...\n</ts-select>\n```\n\n#### Required by FormControl\n\n```typescript\nmyCtrl = new FormControl(null, Validators.required);\n```\n\n```html\n<ts-select [formControl]=\"myCtrl\">\n  ...\n</ts-select>\n```\n\n### Placeholder\n\nThe placeholder is used for the trigger value when the control or model value is empty.\n\n```html\n<ts-select placeholder=\"Please make a selection.\">\n  ...\n</ts-select>\n```\n\n### Custom trigger value\n\nCustom HTML can be used for the trigger value by using the `ts-select-trigger` component. This trigger will be shown when the control or\nmodel does have value.\n\n```html\n<ts-select>\n  <!-- Here is my custom trigger! -->\n  <ts-select-trigger>\n    My custom trigger!\n    With <strong>custom</strong> HTML!\n  </ts-select-trigger>\n\n  <ts-option\n    [value]=\"option.value\"\n    *ngFor=\"let option of options\"\n  >{{ option.name }}</ts-option>\n</ts-select>\n```\n\n### Blank option\n\nA blank option can be implemented by adding a `ts-option` with no value:\n\n```html\n<ts-select [formControl]=\"myForm.get('myChoices1')\">\n  <ts-option>\n    None\n  </ts-option>\n\n  <ts-option\n    [value]=\"option.value\"\n    *ngFor=\"let option of options\"\n  >{{ option.name }}</ts-option>\n</ts-select>\n```\n\n### Option template\n\nA custom template can be used for the option content.\n\n> NOTE: The option object *must* be passed into the option when using a custom template\n\n```html\n<ts-select>\n  <ts-option\n    *ngFor=\"let option of options\"\n    [value]=\"option.value\"\n    [option]=\"option\"\n  >\n    <!-- The object you pass to the `option` input will be exposed as `option` in the template -->\n    <ng-template let-option>\n      <div class=\"myClass\">\n        <h4>{{ option.name }}</h4>\n        <small>{{ option.value / 100 }}%</small>\n      </div>\n    </ng-template>\n  </ts-option>\n</ts-select>\n```\n\n### Custom view value\n\nPart of the option view can be defined as the 'view value' which is used to define the `title` attribute for the option:\n\n```html\n<ts-select>\n  <ts-option\n    *ngFor=\"let option of options\"\n    [value]=\"option.value\"\n    [option]=\"option\"\n  >\n    <ng-template let-option>\n      <div class=\"myClass\">\n        <!-- The content of this h4 will be used for the option title -->\n        <h4 tsOptionDisplay>{{ option.name }}</h4>\n        <small>{{ option.value / 100 }}%</small>\n      </div>\n    </ng-template>\n  </ts-option>\n</ts-select>\n```\n\n### Multiple selections\n\nAllow multiple selections via an `@Input`:\n\n```html\n<ts-select [allowMultiple]=\"true\">\n  ...\n</ts-select>\n```\n\nThis will show checkboxes next to each option and include a top-level 'Select All' toggle.\n\n### Custom delimiter\n\nThe delimiter is used to separate multiple options when shown in the trigger. By default this is a comma (`,`). A custom delimiter may also\nbe set:\n\n```html\n<ts-select\n  [allowMultiple]=\"true\"\n  delimiter=\"/\"\n>\n  ...\n</ts-select>\n<!-- Standard output: `foo, bar, baz` -->\n<!-- Output with custom delimiter: `foo/ bar/ baz` -->\n```\n\n### Custom sort comparator\n\nBy default, the selections will be stored in the order matching the order of items passed in. A custom sort comparator may be passed in\nto alter the sort order.\n\n```html\n<ts-select [sortComparator]=\"myComparatorFn\">\n  ...\n</ts-select>\n```\n\nThe comparator function type is `TsSelectSortComparatorFunction` and has the following format:\n\n```typescript\ntype TsSelectSortComparatorFunction = (\n  a: TsOptionComponent,\n  b: TsOptionComponent,\n  options: TsOptionComponent[],\n) => number;\n```\n\n### Filterable\n\nA select can include an input at the top of the list to filter options:\n\n```html\n<ts-select\n  [formControl]=\"myCtrl\"\n  [isFilterable]=\"true\"\n  (queryChange)=\"mySearchFunction($event)\"\n>\n  ...\n</ts-select>\n```\n\nAny unique, debounced query will be emitted through the `queryChange` emitter. The consumer is in control of what options are displayed. A\nblank option can be used to show the user a message when no items are found by the query.\n\n### Allow user to request update\n\nThere are times where the data may change after it is loaded. The `showRefresh` option allows the user to manually request updated data.\n\n```html\n<ts-select\n  [formControl]=\"myCtrl\"\n  [showRefresh]=\"true\"\n  (optionsRefreshRequested)=\"userRequestedRefresh()\"\n>\n  ...\n</ts-select>\n```\n\n### Prompt the user to refine their search\n\nFor certain queries it is not always possible to return all options. In those cases, we should prompt the user to refine their search for\nbetter results.\n\n```html\n<ts-select\n  [formControl]=\"myCtrl\"\n  [showRefineSearchMessage]=\"true\"\n>\n  ...\n</ts-select>\n```\n\nThis will show a message below all existing options:\n\n```bash\nNarrow your search to reveal hidden results.\n```\n\nIf the `totalHiddenResults` input is defined, the count will be included in the message:\n\n```html\n<ts-select\n  [formControl]=\"myCtrl\"\n  [showRefineSearchMessage]=\"true\"\n  [totalHiddenResults]=\"972\"\n>\n  ...\n</ts-select>\n```\n\nThis will show a message below all existing options:\n\n```bash\nNarrow your search to reveal 972 hidden results.\n```\n\n### Events\n\nMultiple events are fired during interaction with the select:\n\n| Event                     | Description                                     | Payload              |\n|:--------------------------|:------------------------------------------------|:---------------------|\n| `closed`                  | Fired when the panel is closed                  | `undefined`          |\n| `duplicateSelection`      | Fired when a duplicate selection is made        | `string`             |\n| `opened`                  | Fired when the panel is open                    | `undefined`          |\n| `optionDeselected`        | Fired when an option is deselected              | `TsSelectChange`     |\n| `optionSelected`          | Fired when an option is selected                | `TsSelectChange`     |\n| `optionsRefreshRequested` | Fired when the user selects the refresh trigger | `undefined`          |\n| `queryChange`             | Fired when query changes                        | `string`             |\n| `selectionChange`         | Fired when the selection changes                | `TsSelectChange`     |\n| `valueChange`             | Fired when the selection value changes          | `string \\| string[]` |\n\n```html\n<ts-select (selectionChange)=\"myFunction($event)\">\n  ...\n</ts-select>\n```\n\nThe `TsSelectChange` structure:\n\n```typescript\nclass TsSelectChange {\n  constructor(\n    // Reference to the select that emitted the change event\n    public source: TsSelectComponent,\n    // The current value\n    public value: any,\n  ) {}\n}\n\n```\n\n## Test helpers\n\nSome helpers are exposed to assist with testing. These are imported from `@terminus/ui-select/testing`;\n\n[[source]][test-helpers-src]\n\n| Function                  |\n|---------------------------|\n| `getSelectInstance`       |\n| `getSelectElement`        |\n| `getSelectTriggerElement` |\n| `getToggleAllElement`     |\n| `getPanelElement`         |\n| `getAllOptionInstances`   |\n| `getOptionInstance`       |\n| `getOptionElement`        |\n| `getAllOptgroups`         |\n| `getOptgroup`             |\n| `getOptgroupElement`      |\n| `getAllChipInstances`     |\n| `getChipInstance`         |\n| `getChipElement`          |\n| `getFilterInputElement`   |\n\n<!-- Links -->\n[test-helpers-src]:    testing/src/test-helpers.ts\n[selection-list-src]:  ../selection-list/\n[license-url]:         https://github.com/GetTerminus/terminus-oss/blob/release/LICENSE\n[license-image]:       http://img.shields.io/badge/license-MIT-blue.svg\n[codecov-project]:     https://codecov.io/gh/GetTerminus/terminus-oss\n[codecov-badge]:       https://codecov.io/gh/GetTerminus/terminus-oss/branch/release/graph/badge.svg\n[npm-version-image]:   http://img.shields.io/npm/v/@terminus/ui-select.svg\n[npm-package]:         https://www.npmjs.com/package/@terminus/ui-select\n[github-action-badge]: https://github.com/GetTerminus/terminus-oss/workflows/Release%20CI/badge.svg\n[github-action-link]:  https://github.com/GetTerminus/terminus-oss/actions?query=workflow%3A%22CI+Release%22\n[file-size-badge]:     http://img.badgesize.io/https://unpkg.com/@terminus/ui-select/bundles/terminus-ui-select.umd.min.js?compression=gzip\n[raw-distribution-js]: https://unpkg.com/@terminus/ui-select/bundles/terminus-ui-select.umd.js\n","readmeFilename":"README.md"}