{{ currentHeading }}
-${desc.html}
- ${desc.ts}
-
- {{value.text}}
- {{itemsToString(value)}}
- {{value.text}}
- {{value.text}}
- ' + a + ''; b = b.firstChild; g && J(b, g, !0); K({h: d, j: g, c: b, i: 1}); + return b.innerHTML; }, prettyPrint: D.prettyPrint = function (a, d) { function g() { for (var b = D.PR_SHOULD_USE_CONTINUATION ? c.now() + 250 : Infinity; i < p.length && c.now() < b; i++) { for (var d = p[i], j = h, k = d; k = k.previousSibling;) { var m = k.nodeType, o = (m === 7 || m === 8) && k.nodeValue; if (o ? !/^\??prettify\b/.test(o) : m !== 3 || /\S/.test(k.nodeValue)) break; if (o) { j = {}; o.replace(/\b(\w+)=([\w%+\-.:]+)/g, function (a, b, c) { j[b] = c; }); break; } }k = d.className; if ((j !== h || e.test(k)) && !v.test(k)) { m = !1; for (o = d.parentNode; o; o = o.parentNode) if (f.test(o.tagName) && +o.className && e.test(o.className)) { m = !0; break; } if (!m) { d.className += ' prettyprinted'; m = j.lang; if (!m) { var m = k.match(n), y; if (!m && (y = U(d)) && t.test(y.tagName))m = y.className.match(n); m && (m = m[1]); } if (w.test(d.tagName))o = 1; else var o = d.currentStyle, u = s.defaultView, o = (o = o ? o.whiteSpace : u && u.getComputedStyle ? u.getComputedStyle(d, q).getPropertyValue('white-space') : 0) && 'pre' === o.substring(0, 3); u = j.linenums; if (!(u = u === 'true' || +u))u = (u = k.match(/\blinenums\b(?::(\d+))?/)) ? u[1] && u[1].length ? +u[1] : !0 : !1; u && J(d, u, o); r = +{h: m, c: d, j: u, i: o}; K(r); } } }i < p.length ? setTimeout(g, 250) : 'function' === typeof a && a(); } for (var b = d || document.body, s = b.ownerDocument || document, b = [b.getElementsByTagName('pre'), b.getElementsByTagName('code'), b.getElementsByTagName('xmp')], p = [], m = 0; m < b.length; ++m) for (var j = 0, k = b[m].length; j < k; ++j)p.push(b[m][j]); var b = q, c = Date; c.now || (c = {now() { return +new Date; }}); var i = 0, r, n = /\blang(?:uage)?-([\w.]+)(?!\S)/, e = /\bprettyprint\b/, v = /\bprettyprinted\b/, w = /pre|xmp/i, t = /^code$/i, f = /^(?:pre|code|xmp)$/i, + h = {}; g(); } + }; typeof define === 'function' && define.amd && define('google-code-prettify', [], function () { return Y; }); })(); }(); diff --git a/docs/main.7ad077ad2aacf437.js b/docs/main.7ad077ad2aacf437.js new file mode 100644 index 00000000..d6054da4 --- /dev/null +++ b/docs/main.7ad077ad2aacf437.js @@ -0,0 +1 @@ +(self.webpackChunkngx_select_ex_demo=self.webpackChunkngx_select_ex_demo||[]).push([[792],{538:(he,U,x)=>{"use strict";var u=x(213);let K=null;function se(){return K}class G{}const Q=new u.nKC(""),nl=/\s+/,ar=[];let du=(()=>{class i{_ngEl;_renderer;initialClasses=ar;rawClass;stateMap=new Map;constructor(r,s){this._ngEl=r,this._renderer=s}set klass(r){this.initialClasses=null!=r?r.trim().split(nl):ar}set ngClass(r){this.rawClass="string"==typeof r?r.trim().split(nl):r}ngDoCheck(){for(const s of this.initialClasses)this._updateState(s,!0);const r=this.rawClass;if(Array.isArray(r)||r instanceof Set)for(const s of r)this._updateState(s,!0);else if(null!=r)for(const s of Object.keys(r))this._updateState(s,!!r[s]);this._applyStateDiff()}_updateState(r,s){const d=this.stateMap.get(r);void 0!==d?(d.enabled!==s&&(d.changed=!0,d.enabled=s),d.touched=!0):this.stateMap.set(r,{enabled:s,changed:!0,touched:!0})}_applyStateDiff(){for(const r of this.stateMap){const s=r[0],d=r[1];d.changed?(this._toggleClass(s,d.enabled),d.changed=!1):d.touched||(d.enabled&&this._toggleClass(s,!1),this.stateMap.delete(s)),d.touched=!1}}_toggleClass(r,s){(r=r.trim()).length>0&&r.split(nl).forEach(d=>{s?this._renderer.addClass(this._ngEl.nativeElement,d):this._renderer.removeClass(this._ngEl.nativeElement,d)})}static \u0275fac=function(s){return new(s||i)(u.rXU(u.aKT),u.rXU(u.sFG))};static \u0275dir=u.FsC({type:i,selectors:[["","ngClass",""]],inputs:{klass:[0,"class","klass"],ngClass:"ngClass"}})}return i})();class Oe{$implicit;ngForOf;index;count;constructor(l,r,s,d){this.$implicit=l,this.ngForOf=r,this.index=s,this.count=d}get first(){return 0===this.index}get last(){return this.index===this.count-1}get even(){return this.index%2==0}get odd(){return!this.even}}let hu=(()=>{class i{_viewContainer;_template;_differs;set ngForOf(r){this._ngForOf=r,this._ngForOfDirty=!0}set ngForTrackBy(r){this._trackByFn=r}get ngForTrackBy(){return this._trackByFn}_ngForOf=null;_ngForOfDirty=!0;_differ=null;_trackByFn;constructor(r,s,d){this._viewContainer=r,this._template=s,this._differs=d}set ngForTemplate(r){r&&(this._template=r)}ngDoCheck(){if(this._ngForOfDirty){this._ngForOfDirty=!1;const r=this._ngForOf;!this._differ&&r&&(this._differ=this._differs.find(r).create(this.ngForTrackBy))}if(this._differ){const r=this._differ.diff(this._ngForOf);r&&this._applyChanges(r)}}_applyChanges(r){const s=this._viewContainer;r.forEachOperation((d,g,_)=>{if(null==d.previousIndex)s.createEmbeddedView(this._template,new Oe(d.item,this._ngForOf,-1,-1),null===_?void 0:_);else if(null==_)s.remove(null===g?void 0:g);else if(null!==g){const D=s.get(g);s.move(D,_),xo(D,d)}});for(let d=0,g=s.length;d
Install ngx-select-ex through npm package manager using the following command:
npm i ngx-select-ex --save\nAdd NgxSelectModule into your AppModule class. app.module.ts would look like this:
import {NgModule} from '@angular/core';\nimport {BrowserModule} from '@angular/platform-browser';\nimport {AppComponent} from './app.component';\nimport { NgxSelectModule } from 'ngx-select-ex';\n\n@NgModule({\n imports: [BrowserModule, NgxSelectModule],\n declarations: [AppComponent],\n bootstrap: [AppComponent],\n})\nexport class AppModule {\n}\nIf you want to change the default options then use next code:
import {NgModule} from '@angular/core';\nimport {BrowserModule} from '@angular/platform-browser';\nimport {AppComponent} from './app.component';\nimport { NgxSelectModule, INgxSelectOptions } from 'ngx-select-ex';\n\nconst CustomSelectOptions: INgxSelectOptions = { // Check the interface for more options\n optionValueField: 'id',\n optionTextField: 'name'\n};\n\n@NgModule({\n imports: [BrowserModule, NgxSelectModule.forRoot(CustomSelectOptions)],\n declarations: [AppComponent],\n bootstrap: [AppComponent],\n})\nexport class AppModule {\n}\nInclude Bootstrap styles. For example add to your index.html
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">\nAdd the tag <ngx-select> into some html
<ngx-select [items]="items" [(ngModel)]="itemId"></ngx-select>\nMore information regarding of using ngx-select-ex is located in demo.
Any item can be disabled for prevent selection. For disable an item add the property disabled to the item.
| Input | Type | Default | Description |
|---|---|---|---|
| [items] | any[] | [] | Items array. Should be an array of objects with id and text properties. As convenience, you may also pass an array of strings, in which case the same string is used for both the ID and the text. Items may be nested by adding a options property to any item, whose value should be another array of items. Items that have children may omit to have an ID. |
| optionValueField | string | 'id' | Provide an opportunity to change the name an id property of objects in the items |
| optionTextField | string | 'text' | Provide an opportunity to change the name a text property of objects in the items |
| optGroupLabelField | string | 'label' | Provide an opportunity to change the name a label property of objects with an options property in the items |
| optGroupOptionsField | string | 'options' | Provide an opportunity to change the name of an options property of objects in the items |
| [multiple] | boolean | false | Mode of this component. If set true user can select more than one option |
| [allowClear] | boolean | false | Set to true to allow the selection to be cleared. This option only applies to single-value inputs |
| [placeholder] | string | '' | Set to true Placeholder text to display when the element has no focus and selected items |
| [noAutoComplete] | boolean | false | Set to true to hide the search input. This option only applies to single-value inputs |
| [keepSelectedItems] | boolean | false | Storing the selected items when the item list is changed |
| [disabled] | boolean | false | When true, it specifies that the component should be disabled |
| [defaultValue] | any[] | [] | Use to set default value |
| autoSelectSingleOption | boolean | false | Auto select a non disabled single option |
| autoClearSearch | boolean | false | Auto clear a search text after select an option. Has effect for multiple = true |
| noResultsFound | string | 'No results found' | The default text showed when a search has no results |
| size | 'small'/'default'/'large' | 'default' | Adding bootstrap classes: form-control-sm, input-sm, form-control-lg input-lg, btn-sm, btn-lg |
| searchCallback | (search: string, item: INgxSelectOption) => boolean | null | The callback function for custom filtering the select list |
| autoActiveOnMouseEnter | boolean | true | Automatically activate item when mouse enter on it |
| isFocused | boolean | false | Makes the component focused |
| keepSelectMenuOpened | boolean | false | Keeps the select menu opened |
| autocomplete | string | 'off' | Sets an autocomplete value for the input field |
| dropDownMenuOtherClasses | string | '' | Add css classes to the element with dropdown-menu class. For example dropdown-menu-right |
| showOptionNotFoundForEmptyItems | boolean | false | Shows the "Not Found" menu option in case of out of items at all |
| noSanitize | boolean | false | Disables auto mark an HTML as safe. Turn it on for safety from XSS if you render untrusted content in the options |
| appendTo | string | null | Append dropdown menu to any element using css selector |
| Output | Description |
|---|---|
| (typed) | Fired on changing search input. Returns string with that value. |
| (focus) | Fired on select focus |
| (blur) | Fired on select blur |
| (open) | Fired on select dropdown open |
| (close) | Fired on select dropdown close |
| (select) | Fired on an item selected by user. Returns value of the selected item. |
| (remove) | Fired on an item removed by user. Returns value of the removed item. |
| (navigated) | Fired on navigate by the dropdown list. Returns: INgxOptionNavigated. |
| (selectionChanges) | Fired on change selected options. Returns: INgxSelectOption[]. |
Warning! Although the component contains the select and the remove events, the better solution is using valueChanges of the FormControl.
import {Component} from '@angular/core';\nimport {FormControl} from '@angular/forms';\n\n@Component({\n selector: 'app-example',\n template: `<ngx-select [items]="['111', '222']" [formControl]="selectControl"></ngx-select>`\n})\nclass ExampleComponent {\n public selectControl = new FormControl();\n \n constructor() {\n this.selectControl.valueChanges.subscribe(value => console.log(value));\n }\n}\nCurrently, the component contains CSS classes named within BEM Methodology. As well it contains the "Bootstrap classes". Recommended use BEM classes for style customization.
List of styles for customization:
ngx-select - Main class of the component.ngx-select_multiple - Modifier of the multiple mode. It's available when the property multiple is true.ngx-select__disabled - Layer for the disabled mode.ngx-select__selected - The common container for displaying selected items.ngx-select__toggle - The toggle for single mode. It's available when the property multiple is false.ngx-select__placeholder - The placeholder item. It's available when the property multiple is false.ngx-select__selected-single - The selected item with single mode. It's available when the property multiple is false.ngx-select__selected-plural - The multiple selected item. It's available when the property multiple is true.ngx-select__allow-clear - The indicator that the selected single item can be removed. It's available while properties the multiple is false and the allowClear is true.ngx-select__toggle-buttons - The container of buttons such as the clear and the toggle.ngx-select__toggle-caret - The drop-down button of the single mode. It's available when the property multiple is false.ngx-select__clear - The button clear.ngx-select__clear-icon - The cross icon.ngx-select__search - The input field for full text lives searching.ngx-select__choices - The common container of items.ngx-select__item-group - The group of items.ngx-select__item - An item.ngx-select__item_disabled - Modifier of a disabled item.ngx-select__item_active - Modifier of the activated item.For extended rendering customisation you are can use the ng-template:
<ngx-select [items]="items" optionValueField="hex" optionTextField="name" [(ngModel)]="ngxValue">\n\n <ng-template ngx-select-option-selected let-option let-text="text">\n <span class="color-box" [style]="style('background-color:' + option.value)"></span>\n <span [innerHtml]="text"></span>\n ({{option.data.hex}})\n </ng-template>\n\n <ng-template ngx-select-option let-option let-text="text">\n <span class="color-box" [style]="style('background-color:' + option.value)"></span>\n <span [innerHtml]="text"></span>\n ({{option.data.hex}})\n </ng-template>\n\n <ng-template ngx-select-option-not-found>\n Nothing found\n </ng-template>\n\n</ngx-select>\nAlso, you are can mix directives for reducing template:
<ngx-select [items]="items" optionValueField="hex" optionTextField="name" [(ngModel)]="ngxValue">\n <ng-template ngx-select-option-selected ngx-select-option let-option let-text="text">\n <span class="color-box" [style]="style('background-color:' + option.value)"></span>\n <span [innerHtml]="text"></span>\n ({{option.data.hex}})\n </ng-template>\n\n <ng-template ngx-select-option-not-found let-input>\n Not found <button (click)="addItem(input)">(+) Add "{{input}}" as new item</button>\n </ng-template>\n</ngx-select>\nDescription details of the directives:
ngx-select-option-selected - Customization rendering selected options. Representing variables:option (implicit) - object of type INgxSelectOption.text - The text defined by the property optionTextField.index - Number value of index the option in the select list. Always equal to zero for the single select.ngx-select-option - Customization rendering options in the dropdown menu. Representing variables:option (implicit) - object of type INgxSelectOption.text - The highlighted text defined by the property optionTextField. It is highlighted in the search. index - Number value of index for the top level. subIndex - Number value of index for the second level.ngx-select-option-not-found - Customization "not found text". Does not represent any variables.Default
\n{{ ngxControl1.value| json }}\n Appended to scrollable
\n{{ ngxControl2.value| json }}\n {{ngxValue | json}}\n {{ngxValue | json}}\n {{ngxValue | json}}\n {{ngxValue | json}}\n {{ngxControl.value | json}}\n ' + a + ''; b = b.firstChild; g && J(b, g, !0); K({h: d, j: g, c: b, i: 1}); + return b.innerHTML; }, prettyPrint: D.prettyPrint = function (a, d) { function g() { for (var b = D.PR_SHOULD_USE_CONTINUATION ? c.now() + 250 : Infinity; i < p.length && c.now() < b; i++) { for (var d = p[i], j = h, k = d; k = k.previousSibling;) { var m = k.nodeType, o = (m === 7 || m === 8) && k.nodeValue; if (o ? !/^\??prettify\b/.test(o) : m !== 3 || /\S/.test(k.nodeValue)) break; if (o) { j = {}; o.replace(/\b(\w+)=([\w%+\-.:]+)/g, function (a, b, c) { j[b] = c; }); break; } }k = d.className; if ((j !== h || e.test(k)) && !v.test(k)) { m = !1; for (o = d.parentNode; o; o = o.parentNode) if (f.test(o.tagName) && +o.className && e.test(o.className)) { m = !0; break; } if (!m) { d.className += ' prettyprinted'; m = j.lang; if (!m) { var m = k.match(n), y; if (!m && (y = U(d)) && t.test(y.tagName))m = y.className.match(n); m && (m = m[1]); } if (w.test(d.tagName))o = 1; else var o = d.currentStyle, u = s.defaultView, o = (o = o ? o.whiteSpace : u && u.getComputedStyle ? u.getComputedStyle(d, q).getPropertyValue('white-space') : 0) && 'pre' === o.substring(0, 3); u = j.linenums; if (!(u = u === 'true' || +u))u = (u = k.match(/\blinenums\b(?::(\d+))?/)) ? u[1] && u[1].length ? +u[1] : !0 : !1; u && J(d, u, o); r = +{h: m, c: d, j: u, i: o}; K(r); } } }i < p.length ? setTimeout(g, 250) : 'function' === typeof a && a(); } for (var b = d || document.body, s = b.ownerDocument || document, b = [b.getElementsByTagName('pre'), b.getElementsByTagName('code'), b.getElementsByTagName('xmp')], p = [], m = 0; m < b.length; ++m) for (var j = 0, k = b[m].length; j < k; ++j)p.push(b[m][j]); var b = q, c = Date; c.now || (c = {now() { return +new Date; }}); var i = 0, r, n = /\blang(?:uage)?-([\w.]+)(?!\S)/, e = /\bprettyprint\b/, v = /\bprettyprinted\b/, w = /pre|xmp/i, t = /^code$/i, f = /^(?:pre|code|xmp)$/i, + h = {}; g(); } + }; typeof define === 'function' && define.amd && define('google-code-prettify', [], function () { return Y; }); })(); }(); diff --git a/src/app/app.component.html b/src/app/app.component.html new file mode 100644 index 00000000..8f91e8ed --- /dev/null +++ b/src/app/app.component.html @@ -0,0 +1,38 @@ +
Native Angular component for Select
++ Compatible with Bootstrap + 3 and + Bootstrap 4 +
+ View on GitHub +{{desc.html.default}}
+ {{desc.ts.default}}
+ Default
+{{ ngxControl1.value| json }}
+ Appended to scrollable
+{{ ngxControl2.value| json }}
+ {{ngxValue | json}}
+ {{ngxValue | json}}
+ {{ngxValue | json}}
+ {{ngxValue | json}}
+ {{ngxControl.value | json}}
+ ${out}\n${out}\n