forked from CuppaLabs/angular2-multiselect-dropdown
-
Notifications
You must be signed in to change notification settings - Fork 0
/
test.html
148 lines (134 loc) · 29.1 KB
/
test.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<!DOCTYPE html><html><head>
<meta charset="utf-8">
<title>Basic example</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="assets/img/coffee11.png">
<meta name="description" content="A multiselect dropdown component for angular applications. Developed in Angular 2, its easy to install and integrate.">
<meta content="Angular2 data grid, angular2 grid, ng2-grid, angular2 datatable, datatable large datasets" name="keywords">
<meta name="description" content="A multiselect dropdown component for angular applications. Developed in Angular 2, its easy to install and integrate.">
<meta property="og:description" content="A multiselect dropdown component for angular applications. Developed in Angular 2, its easy to install and integrate.">
<meta property="og:url" content="/components/multiselectDropdown/">
<meta property="og:site_name" content="Cuppa Labs">
<meta property="article:publisher" content="https://www.facebook.com/cuppalabs/">
<meta property="article:author" content="https://www.facebook.com/pradeepkumar.terli">
<meta property="article:tag" content="Angular 2">
<meta property="article:tag" content="html5">
<meta property="article:tag" content="css3">
<meta property="og:image" content="http://cuppalabs.github.io/img/component/multiselect-dropdown.png">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<link rel="stylesheet" href="styles.0f6f79aa7666a631b267.css"><style ng-transition="serverApp">.left-sidebar[_ngcontent-sc0]{position:fixed;top:65px;height:calc(100vh - 75px);padding-right:0;overflow:hidden}.left-sidebar[_ngcontent-sc0], .right-sidebar[_ngcontent-sc0]{width:260px}.left-sidebar[_ngcontent-sc0]:hover{overflow:auto}.outer-wrapper[_ngcontent-sc0]{padding:30px}.center-content[_ngcontent-sc0]{background:#fff;border:1px solid rgba(0,0,0,.125);border-radius:3px;padding:15px;margin-left:0;margin-top:0}@media (min-width:768px){.center-content[_ngcontent-sc0]{margin-left:265px}}.nav-sub[_ngcontent-sc0]{width:100%;box-shadow:none;margin-bottom:6px;padding:0;margin-top:50px}.nav-wrapper[_ngcontent-sc0]{padding:0 10px}.list-group-item[_ngcontent-sc0]{padding-top:.5rem;padding-bottom:.5rem}</style><style ng-transition="serverApp">virtual-scroll{display:block;width:100%}.cuppa-dropdown{position:relative}.c-btn{display:inline-block;border-width:1px;line-height:1.25;border-radius:3px;font-size:.85rem;padding:5px 10px;cursor:pointer;align-items:center;min-height:38px}.c-btn.disabled{background:#ccc}.selected-list .c-list{float:left;padding:0;margin:0;width:calc(100% - 20px)}.selected-list .c-list .c-token{list-style:none;padding:4px 22px 4px 8px;border-radius:2px;margin-right:4px;margin-top:2px;float:left;position:relative}.selected-list .c-list .c-token .c-label{display:block;float:left}.selected-list .c-list .c-token .c-remove{position:absolute;right:8px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);width:8px}.selected-list .c-list .c-token .c-remove svg{fill:#fff}.selected-list .fa-angle-down,.selected-list .fa-angle-up{font-size:15pt;position:absolute;right:10px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.selected-list .c-angle-down,.selected-list .c-angle-up{width:12px;height:12px;position:absolute;right:10px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);pointer-events:none}.selected-list .c-angle-down svg,.selected-list .c-angle-up svg{fill:#333}.selected-list .countplaceholder{position:absolute;right:45px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.selected-list .c-btn{width:100%;padding:5px 10px;cursor:pointer;display:flex;position:relative}.selected-list .c-btn .c-icon{position:absolute;right:5px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.dropdown-list{position:absolute;padding-top:14px;width:100%;z-index:99999}.dropdown-list ul{padding:0;list-style:none;overflow:auto;margin:0}.dropdown-list ul li{padding:10px;cursor:pointer;text-align:left}.dropdown-list ul li:first-child{padding-top:10px}.dropdown-list ul li:last-child{padding-bottom:10px}.dropdown-list ::-webkit-scrollbar{width:8px}.dropdown-list ::-webkit-scrollbar-thumb{background:#ccc;border-radius:5px}.dropdown-list ::-webkit-scrollbar-track{background:#f2f2f2}.arrow-down,.arrow-up{width:0;height:0;border-left:13px solid transparent;border-right:13px solid transparent;border-bottom:15px solid #fff;margin-left:15px;position:absolute;top:0}.arrow-down{bottom:-14px;top:unset;-webkit-transform:rotate(180deg);transform:rotate(180deg)}.arrow-2{border-bottom:15px solid #ccc;top:-1px}.arrow-down.arrow-2{top:unset;bottom:-16px}.list-area{border:1px solid #ccc;border-radius:3px;background:#fff;margin:0}.select-all{padding:10px;border-bottom:1px solid #ccc;text-align:left}.list-filter{border-bottom:1px solid #ccc;position:relative;padding-left:35px;height:35px}.list-filter input{border:0;width:100%;height:100%;padding:0}.list-filter input:focus{outline:0}.list-filter .c-search{position:absolute;top:9px;left:10px;width:15px;height:15px}.list-filter .c-search svg{fill:#888}.list-filter .c-clear{position:absolute;top:10px;right:10px;width:15px;height:15px}.list-filter .c-clear svg{fill:#888}.pure-checkbox input[type=checkbox]{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.pure-checkbox input[type=checkbox]:focus+label:before,.pure-checkbox input[type=checkbox]:hover+label:before{background-color:#f2f2f2}.pure-checkbox input[type=checkbox]:active+label:before{transition-duration:0s}.pure-checkbox input[type=checkbox]+label{position:relative;padding-left:2em;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;margin:0;font-weight:300}.pure-checkbox input[type=checkbox]+label:before{box-sizing:content-box;content:'';position:absolute;top:50%;left:0;width:15px;height:15px;margin-top:-9px;text-align:center;transition:all .4s ease;border-radius:3px}.pure-checkbox input[type=checkbox]+label:after{box-sizing:content-box;content:'';position:absolute;-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:50%;transform-origin:50%;transition:-webkit-transform .2s ease-out;transition:transform .2s ease-out;transition:transform .2s ease-out,-webkit-transform .2s ease-out;background-color:transparent;top:50%;left:3px;width:9px;height:4px;margin-top:-5px;border-style:solid;border-color:#fff;border-width:0 0 2px 2px;-o-border-image:none;border-image:none;-webkit-transform:rotate(-45deg) scale(0);transform:rotate(-45deg) scale(0)}.pure-checkbox input[type=checkbox]:disabled+label:before{border-color:#ccc}.pure-checkbox input[type=checkbox]:disabled:focus+label:before .pure-checkbox input[type=checkbox]:disabled:hover+label:before{background-color:inherit}.pure-checkbox input[type=checkbox]:disabled:checked+label:before{background-color:#ccc}.pure-checkbox input[type=radio]:checked+label:before{background-color:#fff}.pure-checkbox input[type=radio]:checked+label:after{-webkit-transform:scale(1);transform:scale(1)}.pure-checkbox input[type=radio]+label:before{border-radius:50%}.pure-checkbox input[type=checkbox]:checked+label:after{content:'';transition:-webkit-transform .2s ease-out;transition:transform .2s ease-out;transition:transform .2s ease-out,-webkit-transform .2s ease-out;-webkit-transform:rotate(-45deg) scale(1);transform:rotate(-45deg) scale(1)}.list-message{text-align:center;margin:0;padding:15px 0;font-size:initial}.list-grp{padding:0 15px!important}.list-grp h4{text-transform:capitalize;margin:15px 0 0;font-size:14px;font-weight:700}.list-grp>li{padding-left:15px!important}.grp-item{padding-left:30px!important}.grp-title{padding-bottom:0!important}.grp-title label{margin-bottom:0!important;font-weight:800;text-transform:capitalize}.grp-title:hover{background:0 0!important}.loading-icon{width:20px;float:right}.nodata-label{width:100%;text-align:center;padding:10px 0 0}.btn-container{text-align:center;padding:0 5px 10px}.clear-all{width:8px;position:absolute;top:50%;right:30px;-webkit-transform:translateY(-50%);transform:translateY(-50%)}</style></head>
<body>
<nav class="navbar navbar-expand-md top-navbar d-print-none navbar-default">
<div class="container">
<a class="navbar-brand" href="/">
<img src="https://cuppalabs.github.io/img/cuppa-logo-coffee11.png" height="32" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="fas fa-navicon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav flex-row">
<li class="nav-item">
<a class="nav-item nav-link disabled component-title" href="#">
Multiselect Dropdown Examples
</a>
</li>
<li class="nav-item">
<a class="nav-item nav-link" href="https://cuppalabs.github.io/components/multiselectDropdown">
Documentation
</a>
</li>
<li class="nav-item">
<a class="nav-item nav-link" href="http://cuppalabs.github.io/aboutme">About Me</a>
</li>
<li class="nav-item">
<img style="margin: 20px 15px;" src="https://img.shields.io/npm/v/angular2-multiselect-dropdown.svg" alt="npm version">
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-item nav-link img-nav-item" href="https://github.com/CuppaLabs/angular2-multiselect-dropdown">
<img src="assets/img/GitHub-Mark-32px.png">
</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="outer-wrapper">
<div class="row">
<app-root class="col pl-0 pr-0" _nghost-sc0="" ng-version="8.0.3"><div _ngcontent-sc0="" class="row"><nav _ngcontent-sc0="" class="navbar navbar-expand-lg nav-sub navbar-light d-md-none d-lg-none"><div _ngcontent-sc0="" class="nav-wrapper"><a _ngcontent-sc0="" class="navbar-brand" href="#">Examples</a><button _ngcontent-sc0="" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-target="#navbarSupportedContent" data-toggle="collapse" type="button"><span _ngcontent-sc0="" class="fas fa-angle-down"></span></button></div><div _ngcontent-sc0="" class="collapse navbar-collapse" id="navbarSupportedContent"><div _ngcontent-sc0="" class="list-group"><a _ngcontent-sc0="" class="list-group-item list-group-item-action active" href="/basic" routerlinkactive="active">Multiselect basic example</a><a _ngcontent-sc0="" class="list-group-item list-group-item-action" href="/singleselection" routerlinkactive="active">Single selection</a><a _ngcontent-sc0="" class="list-group-item list-group-item-action" href="/searchfilter" routerlinkactive="active">Search filter</a><a _ngcontent-sc0="" class="list-group-item list-group-item-action" href="/groupby" routerlinkactive="active">Group By</a><a _ngcontent-sc0="" class="list-group-item list-group-item-action" href="/templating" routerlinkactive="active">Templating</a><a _ngcontent-sc0="" class="list-group-item list-group-item-action" href="/usinginform" routerlinkactive="active">Using in Template Driven Forms</a><a _ngcontent-sc0="" class="list-group-item list-group-item-action" href="/usinginreactiveform" routerlinkactive="active">Using in Reactive Forms</a><a _ngcontent-sc0="" class="list-group-item list-group-item-action" href="/lazyloading" routerlinkactive="active">Lazy Loading</a><a _ngcontent-sc0="" class="list-group-item list-group-item-action" href="/lazyloadingRemoteData" routerlinkactive="active">Lazy Loading Data from API</a><a _ngcontent-sc0="" class="list-group-item list-group-item-action" href="/usingInList" routerlinkactive="active">Using in List for loop</a><a _ngcontent-sc0="" class="list-group-item list-group-item-action" href="/resetdropdown" routerlinkactive="active">Reset dropdown</a><a _ngcontent-sc0="" class="list-group-item list-group-item-action" href="/disablemode" routerlinkactive="active">Disable dropdown</a><a _ngcontent-sc0="" class="list-group-item list-group-item-action" href="/limitselection" routerlinkactive="active">Limit selection</a><a _ngcontent-sc0="" class="list-group-item list-group-item-action" href="/limitbadges" routerlinkactive="active">Limit Badges</a><a _ngcontent-sc0="" class="list-group-item list-group-item-action" href="/customplaceholder" routerlinkactive="active">Custom placeholder</a><a _ngcontent-sc0="" class="list-group-item list-group-item-action" href="/styling" routerlinkactive="active">CSS Styling</a><a _ngcontent-sc0="" class="list-group-item list-group-item-action" href="/theming" routerlinkactive="active">Theming</a></div></div></nav><div _ngcontent-sc0="" class="col-md-3 pl-0 pr-0 left-sidebar d-none d-md-block d-lg-block"><div _ngcontent-sc0="" class="list-group"><a _ngcontent-sc0="" class="list-group-item list-group-item-action disabled" href="#"> Examples </a><a _ngcontent-sc0="" class="list-group-item list-group-item-action active" href="/basic" routerlinkactive="active">Multiselect basic example</a><a _ngcontent-sc0="" class="list-group-item list-group-item-action" href="/singleselection" routerlinkactive="active">Single selection</a><a _ngcontent-sc0="" class="list-group-item list-group-item-action" href="/searchfilter" routerlinkactive="active">Search filter</a><a _ngcontent-sc0="" class="list-group-item list-group-item-action" href="/customSearchAPI" routerlinkactive="active">Custom Search / Search API</a><a _ngcontent-sc0="" class="list-group-item list-group-item-action" href="/searchFilterByOneProperty" routerlinkactive="active">Search Filter By one Property/key</a><a _ngcontent-sc0="" class="list-group-item list-group-item-action" href="/searchfilterAddNewItem" routerlinkactive="active">Search and Add New Item</a><a _ngcontent-sc0="" class="list-group-item list-group-item-action" href="/groupby" routerlinkactive="active">Group By</a><a _ngcontent-sc0="" class="list-group-item list-group-item-action" href="/templating" routerlinkactive="active">Templating</a><a _ngcontent-sc0="" class="list-group-item list-group-item-action" href="/usinginform" routerlinkactive="active">Using in Template Driven Forms</a><a _ngcontent-sc0="" class="list-group-item list-group-item-action" href="/usinginreactiveform" routerlinkactive="active">Using in Reactive Forms</a><a _ngcontent-sc0="" class="list-group-item list-group-item-action" href="/lazyloading" routerlinkactive="active">Virtual Scrolling</a><a _ngcontent-sc0="" class="list-group-item list-group-item-action" href="/lazyloadingRemoteData" routerlinkactive="active">Lazy Loading Data from API</a><a _ngcontent-sc0="" class="list-group-item list-group-item-action" href="/remoteData" routerlinkactive="active">Data from remote API</a><a _ngcontent-sc0="" class="list-group-item list-group-item-action" href="/usingInList" routerlinkactive="active">Using in List for loop</a><a _ngcontent-sc0="" class="list-group-item list-group-item-action" href="/multipledropdowns" routerlinkactive="active">Multiple dropdowns in a page</a><a _ngcontent-sc0="" class="list-group-item list-group-item-action" href="/dynamicdatasets" routerlinkactive="active">Dynamic Data Sets loading</a><a _ngcontent-sc0="" class="list-group-item list-group-item-action" href="/dropdownMethods" routerlinkactive="active">Methods - Open, close, Reset</a><a _ngcontent-sc0="" class="list-group-item list-group-item-action" href="/events" routerlinkactive="active">Events</a><a _ngcontent-sc0="" class="list-group-item list-group-item-action" href="/disablemode" routerlinkactive="active">Disable dropdown</a><a _ngcontent-sc0="" class="list-group-item list-group-item-action" href="/limitselection" routerlinkactive="active">Limit selection</a><a _ngcontent-sc0="" class="list-group-item list-group-item-action" href="/limitbadges" routerlinkactive="active">Limit Badges</a><a _ngcontent-sc0="" class="list-group-item list-group-item-action" href="/customplaceholder" routerlinkactive="active">Custom placeholder</a><a _ngcontent-sc0="" class="list-group-item list-group-item-action" href="/styling" routerlinkactive="active">CSS Styling</a></div></div><div _ngcontent-sc0="" class="col center-content"><router-outlet _ngcontent-sc0=""></router-outlet><ng-component><h2 class="example-title">Basic example</h2><div class="col-md-8 mr-auto ml-auto dropdown-container"><angular2-multiselect class="myclass custom-class ng-untouched ng-pristine ng-valid"><div class="cuppa-dropdown"><div class="selected-list"><div class="c-btn" tabindex="0"><!----><!----><!----><!----><div class="c-list"><!----><div class="c-token"><!----><span class="c-label">India</span><!----><span class="c-remove"><c-icon><!----><svg xml:space="preserve" xmlns:xlink="http://www.w3.org/1999/xlink" height="100%" id="Capa_1" style="enable-background:new 0 0 47.971 47.971;" version="1.1" viewBox="0 0 47.971 47.971" width="100%" x="0px" xmlns="http://www.w3.org/2000/svg" y="0px"><g><path d="M28.228,23.986L47.092,5.122c1.172-1.171,1.172-3.071,0-4.242c-1.172-1.172-3.07-1.172-4.242,0L23.986,19.744L5.121,0.88
c-1.172-1.172-3.07-1.172-4.242,0c-1.172,1.171-1.172,3.071,0,4.242l18.865,18.864L0.879,42.85c-1.172,1.171-1.172,3.071,0,4.242
C1.465,47.677,2.233,47.97,3,47.97s1.535-0.293,2.121-0.879l18.865-18.864L42.85,47.091c0.586,0.586,1.354,0.879,2.121,0.879
s1.535-0.293,2.121-0.879c1.172-1.171,1.172-3.071,0-4.242L28.228,23.986z"></path></g></svg><!----><!----><!----><!----></c-icon></span></div><div class="c-token"><!----><span class="c-label">Singapore</span><!----><span class="c-remove"><c-icon><!----><svg xml:space="preserve" xmlns:xlink="http://www.w3.org/1999/xlink" height="100%" id="Capa_1" style="enable-background:new 0 0 47.971 47.971;" version="1.1" viewBox="0 0 47.971 47.971" width="100%" x="0px" xmlns="http://www.w3.org/2000/svg" y="0px"><g><path d="M28.228,23.986L47.092,5.122c1.172-1.171,1.172-3.071,0-4.242c-1.172-1.172-3.07-1.172-4.242,0L23.986,19.744L5.121,0.88
c-1.172-1.172-3.07-1.172-4.242,0c-1.172,1.171-1.172,3.071,0,4.242l18.865,18.864L0.879,42.85c-1.172,1.171-1.172,3.071,0,4.242
C1.465,47.677,2.233,47.97,3,47.97s1.535-0.293,2.121-0.879l18.865-18.864L42.85,47.091c0.586,0.586,1.354,0.879,2.121,0.879
s1.535-0.293,2.121-0.879c1.172-1.171,1.172-3.071,0-4.242L28.228,23.986z"></path></g></svg><!----><!----><!----><!----></c-icon></span></div><div class="c-token"><!----><span class="c-label">Australia</span><!----><span class="c-remove"><c-icon><!----><svg xml:space="preserve" xmlns:xlink="http://www.w3.org/1999/xlink" height="100%" id="Capa_1" style="enable-background:new 0 0 47.971 47.971;" version="1.1" viewBox="0 0 47.971 47.971" width="100%" x="0px" xmlns="http://www.w3.org/2000/svg" y="0px"><g><path d="M28.228,23.986L47.092,5.122c1.172-1.171,1.172-3.071,0-4.242c-1.172-1.172-3.07-1.172-4.242,0L23.986,19.744L5.121,0.88
c-1.172-1.172-3.07-1.172-4.242,0c-1.172,1.171-1.172,3.071,0,4.242l18.865,18.864L0.879,42.85c-1.172,1.171-1.172,3.071,0,4.242
C1.465,47.677,2.233,47.97,3,47.97s1.535-0.293,2.121-0.879l18.865-18.864L42.85,47.091c0.586,0.586,1.354,0.879,2.121,0.879
s1.535-0.293,2.121-0.879c1.172-1.171,1.172-3.071,0-4.242L28.228,23.986z"></path></g></svg><!----><!----><!----><!----></c-icon></span></div><div class="c-token"><!----><span class="c-label">Canada</span><!----><span class="c-remove"><c-icon><!----><svg xml:space="preserve" xmlns:xlink="http://www.w3.org/1999/xlink" height="100%" id="Capa_1" style="enable-background:new 0 0 47.971 47.971;" version="1.1" viewBox="0 0 47.971 47.971" width="100%" x="0px" xmlns="http://www.w3.org/2000/svg" y="0px"><g><path d="M28.228,23.986L47.092,5.122c1.172-1.171,1.172-3.071,0-4.242c-1.172-1.172-3.07-1.172-4.242,0L23.986,19.744L5.121,0.88
c-1.172-1.172-3.07-1.172-4.242,0c-1.172,1.171-1.172,3.071,0,4.242l18.865,18.864L0.879,42.85c-1.172,1.171-1.172,3.071,0,4.242
C1.465,47.677,2.233,47.97,3,47.97s1.535-0.293,2.121-0.879l18.865-18.864L42.85,47.091c0.586,0.586,1.354,0.879,2.121,0.879
s1.535-0.293,2.121-0.879c1.172-1.171,1.172-3.071,0-4.242L28.228,23.986z"></path></g></svg><!----><!----><!----><!----></c-icon></span></div><div class="c-token"><!----><span class="c-label">South Korea</span><!----><span class="c-remove"><c-icon><!----><svg xml:space="preserve" xmlns:xlink="http://www.w3.org/1999/xlink" height="100%" id="Capa_1" style="enable-background:new 0 0 47.971 47.971;" version="1.1" viewBox="0 0 47.971 47.971" width="100%" x="0px" xmlns="http://www.w3.org/2000/svg" y="0px"><g><path d="M28.228,23.986L47.092,5.122c1.172-1.171,1.172-3.071,0-4.242c-1.172-1.172-3.07-1.172-4.242,0L23.986,19.744L5.121,0.88
c-1.172-1.172-3.07-1.172-4.242,0c-1.172,1.171-1.172,3.071,0,4.242l18.865,18.864L0.879,42.85c-1.172,1.171-1.172,3.071,0,4.242
C1.465,47.677,2.233,47.97,3,47.97s1.535-0.293,2.121-0.879l18.865-18.864L42.85,47.091c0.586,0.586,1.354,0.879,2.121,0.879
s1.535-0.293,2.121-0.879c1.172-1.171,1.172-3.071,0-4.242L28.228,23.986z"></path></g></svg><!----><!----><!----><!----></c-icon></span></div></div><!----><!----><span class="c-remove clear-all"><c-icon><!----><svg xml:space="preserve" xmlns:xlink="http://www.w3.org/1999/xlink" height="100%" id="Capa_1" style="enable-background:new 0 0 47.971 47.971;" version="1.1" viewBox="0 0 47.971 47.971" width="100%" x="0px" xmlns="http://www.w3.org/2000/svg" y="0px"><g><path d="M28.228,23.986L47.092,5.122c1.172-1.171,1.172-3.071,0-4.242c-1.172-1.172-3.07-1.172-4.242,0L23.986,19.744L5.121,0.88
c-1.172-1.172-3.07-1.172-4.242,0c-1.172,1.171-1.172,3.071,0,4.242l18.865,18.864L0.879,42.85c-1.172,1.171-1.172,3.071,0,4.242
C1.465,47.677,2.233,47.97,3,47.97s1.535-0.293,2.121-0.879l18.865-18.864L42.85,47.091c0.586,0.586,1.354,0.879,2.121,0.879
s1.535-0.293,2.121-0.879c1.172-1.171,1.172-3.071,0-4.242L28.228,23.986z"></path></g></svg><!----><!----><!----><!----></c-icon></span><!----><span class="c-angle-down"><c-icon><!----><!----><svg xml:space="preserve" xmlns:xlink="http://www.w3.org/1999/xlink" height="100%" id="Capa_1" style="enable-background:new 0 0 612 612;" version="1.1" viewBox="0 0 612 612" width="100%" x="0px" xmlns="http://www.w3.org/2000/svg" y="0px"><g><g id="_x31_0_34_"><g><path d="M604.501,134.782c-9.999-10.05-26.222-10.05-36.221,0L306.014,422.558L43.721,134.782
c-9.999-10.05-26.223-10.05-36.222,0s-9.999,26.35,0,36.399l279.103,306.241c5.331,5.357,12.422,7.652,19.386,7.296
c6.988,0.356,14.055-1.939,19.386-7.296l279.128-306.268C614.5,161.106,614.5,144.832,604.501,134.782z"></path></g></g></g></svg><!----><!----><!----></c-icon></span><!----></div></div><div class="dropdown-list" style="" hidden=""><div class="arrow-2 arrow-up"></div><div class="arrow-up"></div><div class="list-area"><!----><div class="pure-checkbox select-all"><!----><input type="checkbox"><label><span>Select All</span><span hidden="">UnSelect All</span></label></div><!----><!----><!----><div class="filter-select-all"><!----><!----><!----><!----><!----></div><!----><!----><div style="overflow:auto;max-height:300px;"><ul class="lazyContainer"><!----><li class="pure-checkbox selected-item"><!----><input type="checkbox" checked=""><label>India</label></li><li class="pure-checkbox selected-item"><!----><input type="checkbox" checked=""><label>Singapore</label></li><li class="pure-checkbox selected-item"><!----><input type="checkbox" checked=""><label>Australia</label></li><li class="pure-checkbox selected-item"><!----><input type="checkbox" checked=""><label>Canada</label></li><li class="pure-checkbox selected-item"><!----><input type="checkbox" checked=""><label>South Korea</label></li><li class="pure-checkbox"><!----><input type="checkbox"><label>Brazil</label></li></ul></div><!----><!----><!----><!----><!----><!----><!----><!----></div></div></div></angular2-multiselect></div><h4 class="example-title code-section">Code</h4><p-tabview><div class="ui-tabview ui-widget ui-widget-content ui-corner-all ui-tabview-top"><!----><ul p-tabviewnav="" role="tablist" class="ui-tabview-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all"><!----><!----><li role="presentation" class="ui-state-default ui-corner-top ui-tabview-selected ui-state-active"><a href="#" role="tab" id="ui-tabpanel-4-label" aria-selected="true" aria-controls="ui-tabpanel-4"><!----><!----><!----><span class="ui-tabview-title">basic.ts</span><!----><!----><!----></a><!----></li><!----><!----><li role="presentation" class="ui-state-default ui-corner-top"><a href="#" role="tab" id="ui-tabpanel-5-label" aria-controls="ui-tabpanel-5"><!----><!----><!----><span class="ui-tabview-title">basic.html</span><!----><!----><!----></a><!----></li><!----></ul><div class="ui-tabview-panels"><p-tabpanel><!----><div class="ui-tabview-panel ui-widget-content" role="tabpanel" id="ui-tabpanel-4" aria-hidden="false" aria-labelledby="ui-tabpanel-4-label"><ng2-gist><iframe frameborder="0" type="text/javascript" width="100%" id="gist-CuppaLabs/ee72fbc7b21dad7e4e7664c5b1553235"></iframe></ng2-gist><!----></div></p-tabpanel><p-tabpanel><!----><div class="ui-tabview-panel ui-widget-content ui-helper-hidden" role="tabpanel" id="ui-tabpanel-5" aria-hidden="true" aria-labelledby="ui-tabpanel-5-label"><ng2-gist><iframe frameborder="0" type="text/javascript" width="100%" id="gist-CuppaLabs/eb78d42ab7971fda6493586e329bfdb8"></iframe></ng2-gist><!----></div></p-tabpanel><!----></div><!----></div></p-tabview></ng-component></div></div></app-root>
<div class="col-md-3 right-sidebar">
<div>
<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-4525567075133342" data-ad-slot="2263435109"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<div>
<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle" style="display:inline-block;width:300px;height:600px" data-ad-client="ca-pub-4525567075133342" data-ad-slot="6386579727"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<script>
(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date(); a = s.createElement(o),
m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-93566400-1', 'auto');
ga('send', 'pageview');
</script>
<script>
window.ChatraSetup = {
colors: {
buttonText: '#ffffff', /* chat button text color */
buttonBg: '#e9a142' /* chat button background color */
}
};
</script>
<script>
(function(d, w, c) {
w.ChatraID = 'JTyKDCouJ8iRGe4vb';
var s = d.createElement('script');
w[c] = w[c] || function() {
(w[c].q = w[c].q || []).push(arguments);
};
s.async = true;
s.src = 'https://call.chatra.io/chatra.js';
if (d.head) d.head.appendChild(s);
})(document, window, 'Chatra');
</script>
<script src="runtime-es2015.858f8dd898b75fe86926.js" type="module"></script><script src="polyfills-es2015.444f9ad7571234916d9d.js" type="module"></script><script src="runtime-es5.741402d1d47331ce975c.js" nomodule=""></script><script src="polyfills-es5.89e5d8af723470f72102.js" nomodule=""></script><script src="main-es2015.39b5019152f3995929b7.js" type="module"></script><script src="main-es5.778f9a5bf0d0cc2c4f97.js" nomodule=""></script>
</body></html>