carbon-components-angular 3.53.2 → 3.53.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/bundle/carbon-angular.umd.js +1 -1
  2. package/bundle/carbon-angular.umd.js.map +1 -1
  3. package/combobox/combobox.component.js +1 -0
  4. package/combobox/combobox.component.js.map +1 -1
  5. package/docs/documentation/components/ComboBox.html +1 -0
  6. package/docs/documentation/graph/dependencies.dot +1 -3
  7. package/docs/documentation/js/search/search_index.js +2 -2
  8. package/docs/documentation/modules/DatePickerInputModule/dependencies.svg +30 -56
  9. package/docs/documentation/modules/DatePickerInputModule.html +30 -56
  10. package/docs/storybook/iframe.html +3 -3
  11. package/docs/storybook/{main.39186e031f107fc56c4a.bundle.js → main.767fc9bea0250161aab4.bundle.js} +6 -4
  12. package/docs/storybook/main.767fc9bea0250161aab4.bundle.js.map +1 -0
  13. package/docs/storybook/{runtime~main.39186e031f107fc56c4a.bundle.js → runtime~main.767fc9bea0250161aab4.bundle.js} +1 -1
  14. package/docs/storybook/{runtime~main.39186e031f107fc56c4a.bundle.js.map → runtime~main.767fc9bea0250161aab4.bundle.js.map} +1 -1
  15. package/docs/storybook/{vendors~main.39186e031f107fc56c4a.bundle.js → vendors~main.767fc9bea0250161aab4.bundle.js} +1 -1
  16. package/docs/storybook/{vendors~main.39186e031f107fc56c4a.bundle.js.map → vendors~main.767fc9bea0250161aab4.bundle.js.map} +1 -1
  17. package/package.json +1 -1
  18. package/docs/storybook/main.39186e031f107fc56c4a.bundle.js.map +0 -1
package/docs/documentation/modules/DatePickerInputModule/dependencies.svg CHANGED
@@ -4,89 +4,63 @@
4
4
  <!-- Generated by graphviz version 2.40.1 (20161225.0304)
5
5
  -->
6
6
  <!-- Title: dependencies Pages: 1 -->
7
- <svg width="722pt" height="396pt"
8
- viewBox="0.00 0.00 722.00 395.59" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
9
- <g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 391.5901)">
7
+ <svg width="504pt" height="284pt"
8
+ viewBox="0.00 0.00 504.00 284.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
9
+ <g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 280)">
10
10
  <title>dependencies</title>
11
- <polygon fill="#ffffff" stroke="transparent" points="-4,4 -4,-391.5901 718,-391.5901 718,4 -4,4"/>
12
- <text text-anchor="start" x="336.0091" y="-42.4" font-family="sans-serif" font-weight="bold" font-size="14.00" fill="#000000">Legend</text>
13
- <polygon fill="#ffffb3" stroke="transparent" points="123,-10 123,-30 143,-30 143,-10 123,-10"/>
14
- <text text-anchor="start" x="146.629" y="-15.4" font-family="sans-serif" font-size="14.00" fill="#000000"> &#160;Declarations</text>
15
- <polygon fill="#8dd3c7" stroke="transparent" points="236,-10 236,-30 256,-30 256,-10 236,-10"/>
16
- <text text-anchor="start" x="259.7251" y="-15.4" font-family="sans-serif" font-size="14.00" fill="#000000"> &#160;Module</text>
17
- <polygon fill="#80b1d3" stroke="transparent" points="322,-10 322,-30 342,-30 342,-10 322,-10"/>
18
- <text text-anchor="start" x="345.7812" y="-15.4" font-family="sans-serif" font-size="14.00" fill="#000000"> &#160;Bootstrap</text>
19
- <polygon fill="#fdb462" stroke="transparent" points="419,-10 419,-30 439,-30 439,-10 419,-10"/>
20
- <text text-anchor="start" x="442.6732" y="-15.4" font-family="sans-serif" font-size="14.00" fill="#000000"> &#160;Providers</text>
21
- <polygon fill="#fb8072" stroke="transparent" points="515,-10 515,-30 535,-30 535,-10 515,-10"/>
22
- <text text-anchor="start" x="538.7258" y="-15.4" font-family="sans-serif" font-size="14.00" fill="#000000"> &#160;Exports</text>
11
+ <polygon fill="#ffffff" stroke="transparent" points="-4,4 -4,-280 500,-280 500,4 -4,4"/>
12
+ <text text-anchor="start" x="227.0091" y="-42.4" font-family="sans-serif" font-weight="bold" font-size="14.00" fill="#000000">Legend</text>
13
+ <polygon fill="#ffffb3" stroke="transparent" points="14,-10 14,-30 34,-30 34,-10 14,-10"/>
14
+ <text text-anchor="start" x="37.629" y="-15.4" font-family="sans-serif" font-size="14.00" fill="#000000"> &#160;Declarations</text>
15
+ <polygon fill="#8dd3c7" stroke="transparent" points="127,-10 127,-30 147,-30 147,-10 127,-10"/>
16
+ <text text-anchor="start" x="150.7251" y="-15.4" font-family="sans-serif" font-size="14.00" fill="#000000"> &#160;Module</text>
17
+ <polygon fill="#80b1d3" stroke="transparent" points="213,-10 213,-30 233,-30 233,-10 213,-10"/>
18
+ <text text-anchor="start" x="236.7812" y="-15.4" font-family="sans-serif" font-size="14.00" fill="#000000"> &#160;Bootstrap</text>
19
+ <polygon fill="#fdb462" stroke="transparent" points="310,-10 310,-30 330,-30 330,-10 310,-10"/>
20
+ <text text-anchor="start" x="333.6732" y="-15.4" font-family="sans-serif" font-size="14.00" fill="#000000"> &#160;Providers</text>
21
+ <polygon fill="#fb8072" stroke="transparent" points="406,-10 406,-30 426,-30 426,-10 406,-10"/>
22
+ <text text-anchor="start" x="429.7258" y="-15.4" font-family="sans-serif" font-size="14.00" fill="#000000"> &#160;Exports</text>
23
23
  <g id="clust1" class="cluster">
24
24
  <title>cluster_DatePickerInputModule</title>
25
- <polygon fill="none" stroke="#000000" stroke-dasharray="1,5" points="8,-70 8,-379.5901 706,-379.5901 706,-70 8,-70"/>
25
+ <polygon fill="none" stroke="#000000" stroke-dasharray="1,5" points="164,-70 164,-268 332,-268 332,-70 164,-70"/>
26
26
  </g>
27
27
  <g id="clust2" class="cluster">
28
28
  <title>cluster_DatePickerInputModule_declarations</title>
29
- <polygon fill="none" stroke="#000000" points="295,-189.5901 295,-241.5901 419,-241.5901 419,-189.5901 295,-189.5901"/>
30
- </g>
31
- <g id="clust3" class="cluster">
32
- <title>cluster_DatePickerInputModule_DatePickerInput_providers</title>
33
- <polygon fill="none" stroke="#000000" points="16,-78 16,-176.5901 698,-176.5901 698,-78 16,-78"/>
29
+ <polygon fill="none" stroke="#000000" points="186,-78 186,-130 310,-130 310,-78 186,-78"/>
34
30
  </g>
35
31
  <g id="clust5" class="cluster">
36
32
  <title>cluster_DatePickerInputModule_exports</title>
37
- <polygon fill="none" stroke="#000000" points="293,-319.5901 293,-371.5901 421,-371.5901 421,-319.5901 293,-319.5901"/>
33
+ <polygon fill="none" stroke="#000000" points="184,-208 184,-260 312,-260 312,-208 184,-208"/>
38
34
  </g>
39
35
  <!-- DatePickerInput -->
40
36
  <g id="node1" class="node">
41
37
  <title>DatePickerInput</title>
42
- <polygon fill="#ffffb3" stroke="#000000" points="410.7409,-233.5901 303.2591,-233.5901 303.2591,-197.5901 410.7409,-197.5901 410.7409,-233.5901"/>
43
- <text text-anchor="middle" x="357" y="-211.3901" font-family="Times,serif" font-size="14.00" fill="#000000">DatePickerInput</text>
38
+ <polygon fill="#ffffb3" stroke="#000000" points="301.7409,-122 194.2591,-122 194.2591,-86 301.7409,-86 301.7409,-122"/>
39
+ <text text-anchor="middle" x="248" y="-99.8" font-family="Times,serif" font-size="14.00" fill="#000000">DatePickerInput</text>
44
40
  </g>
45
41
  <!-- DatePickerInputModule -->
46
42
  <g id="node2" class="node">
47
43
  <title>DatePickerInputModule</title>
48
- <polygon fill="#8dd3c7" stroke="#000000" points="432.7907,-298.5901 429.7907,-302.5901 408.7907,-302.5901 405.7907,-298.5901 281.2093,-298.5901 281.2093,-262.5901 432.7907,-262.5901 432.7907,-298.5901"/>
49
- <text text-anchor="middle" x="357" y="-276.3901" font-family="Times,serif" font-size="14.00" fill="#000000">DatePickerInputModule</text>
44
+ <polygon fill="#8dd3c7" stroke="#000000" points="323.7907,-187 320.7907,-191 299.7907,-191 296.7907,-187 172.2093,-187 172.2093,-151 323.7907,-151 323.7907,-187"/>
45
+ <text text-anchor="middle" x="248" y="-164.8" font-family="Times,serif" font-size="14.00" fill="#000000">DatePickerInputModule</text>
50
46
  </g>
51
47
  <!-- DatePickerInput&#45;&gt;DatePickerInputModule -->
52
48
  <g id="edge1" class="edge">
53
49
  <title>DatePickerInput&#45;&gt;DatePickerInputModule</title>
54
- <path fill="none" stroke="#000000" d="M357,-233.6962C357,-233.6962 357,-252.581 357,-252.581"/>
55
- <polygon fill="#000000" stroke="#000000" points="353.5001,-252.581 357,-262.581 360.5001,-252.5811 353.5001,-252.581"/>
50
+ <path fill="none" stroke="#000000" d="M248,-122.1061C248,-122.1061 248,-140.991 248,-140.991"/>
51
+ <polygon fill="#000000" stroke="#000000" points="244.5001,-140.9909 248,-150.991 251.5001,-140.991 244.5001,-140.9909"/>
56
52
  </g>
57
53
  <!-- DatePickerInput -->
58
- <g id="node4" class="node">
54
+ <g id="node3" class="node">
59
55
  <title>DatePickerInput </title>
60
- <polygon fill="#fb8072" stroke="#000000" points="412.7409,-363.5901 301.2591,-363.5901 301.2591,-327.5901 412.7409,-327.5901 412.7409,-363.5901"/>
61
- <text text-anchor="middle" x="357" y="-341.3901" font-family="Times,serif" font-size="14.00" fill="#000000">DatePickerInput </text>
56
+ <polygon fill="#fb8072" stroke="#000000" points="303.7409,-252 192.2591,-252 192.2591,-216 303.7409,-216 303.7409,-252"/>
57
+ <text text-anchor="middle" x="248" y="-229.8" font-family="Times,serif" font-size="14.00" fill="#000000">DatePickerInput </text>
62
58
  </g>
63
59
  <!-- DatePickerInputModule&#45;&gt;DatePickerInput -->
64
- <g id="edge3" class="edge">
65
- <title>DatePickerInputModule&#45;&gt;DatePickerInput </title>
66
- <path fill="none" stroke="#000000" stroke-dasharray="5,2" d="M357,-298.6962C357,-298.6962 357,-317.581 357,-317.581"/>
67
- <polygon fill="#000000" stroke="#000000" points="353.5001,-317.581 357,-327.581 360.5001,-317.5811 353.5001,-317.581"/>
68
- </g>
69
- <!-- {
70
- &#160;&#160;&#160;provide: NG_VALUE_ACCESSOR, useExisting: DatePickerInput, multi: true
71
- } -->
72
- <g id="node3" class="node">
73
- <title>{
74
- &#160;&#160;&#160;provide: NG_VALUE_ACCESSOR, useExisting: DatePickerInput, multi: true
75
- }</title>
76
- <ellipse fill="#fdb462" stroke="#000000" cx="357" cy="-127.295" rx="333.0382" ry="41.0911"/>
77
- <text text-anchor="middle" x="357" y="-139.895" font-family="Times,serif" font-size="14.00" fill="#000000">{</text>
78
- <text text-anchor="middle" x="357" y="-123.095" font-family="Times,serif" font-size="14.00" fill="#000000"> &#160;&#160;&#160;provide: NG_VALUE_ACCESSOR, useExisting: DatePickerInput, multi: true</text>
79
- <text text-anchor="middle" x="357" y="-106.295" font-family="Times,serif" font-size="14.00" fill="#000000">}</text>
80
- </g>
81
- <!-- {
82
- &#160;&#160;&#160;provide: NG_VALUE_ACCESSOR, useExisting: DatePickerInput, multi: true
83
- }&#45;&gt;DatePickerInput -->
84
60
  <g id="edge2" class="edge">
85
- <title>{
86
- &#160;&#160;&#160;provide: NG_VALUE_ACCESSOR, useExisting: DatePickerInput, multi: true
87
- }&#45;&gt;DatePickerInput</title>
88
- <path fill="none" stroke="#000000" d="M357,-168.5989C357,-168.5989 357,-187.2551 357,-187.2551"/>
89
- <polygon fill="#000000" stroke="#000000" points="353.5001,-187.255 357,-197.2551 360.5001,-187.2551 353.5001,-187.255"/>
61
+ <title>DatePickerInputModule&#45;&gt;DatePickerInput </title>
62
+ <path fill="none" stroke="#000000" stroke-dasharray="5,2" d="M248,-187.1061C248,-187.1061 248,-205.991 248,-205.991"/>
63
+ <polygon fill="#000000" stroke="#000000" points="244.5001,-205.9909 248,-215.991 251.5001,-205.991 244.5001,-205.9909"/>
90
64
  </g>
91
65
  </g>
92
66
  </svg>
package/docs/documentation/modules/DatePickerInputModule.html CHANGED
@@ -45,89 +45,63 @@
45
45
  <!-- Generated by graphviz version 2.40.1 (20161225.0304)
46
46
  -->
47
47
  <!-- Title: dependencies Pages: 1 -->
48
- <svg width="722pt" height="396pt"
49
- viewBox="0.00 0.00 722.00 395.59" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
50
- <g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 391.5901)">
48
+ <svg width="504pt" height="284pt"
49
+ viewBox="0.00 0.00 504.00 284.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
50
+ <g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 280)">
51
51
  <title>dependencies</title>
52
- <polygon fill="#ffffff" stroke="transparent" points="-4,4 -4,-391.5901 718,-391.5901 718,4 -4,4"/>
53
- <text text-anchor="start" x="336.0091" y="-42.4" font-family="sans-serif" font-weight="bold" font-size="14.00" fill="#000000">Legend</text>
54
- <polygon fill="#ffffb3" stroke="transparent" points="123,-10 123,-30 143,-30 143,-10 123,-10"/>
55
- <text text-anchor="start" x="146.629" y="-15.4" font-family="sans-serif" font-size="14.00" fill="#000000"> &#160;Declarations</text>
56
- <polygon fill="#8dd3c7" stroke="transparent" points="236,-10 236,-30 256,-30 256,-10 236,-10"/>
57
- <text text-anchor="start" x="259.7251" y="-15.4" font-family="sans-serif" font-size="14.00" fill="#000000"> &#160;Module</text>
58
- <polygon fill="#80b1d3" stroke="transparent" points="322,-10 322,-30 342,-30 342,-10 322,-10"/>
59
- <text text-anchor="start" x="345.7812" y="-15.4" font-family="sans-serif" font-size="14.00" fill="#000000"> &#160;Bootstrap</text>
60
- <polygon fill="#fdb462" stroke="transparent" points="419,-10 419,-30 439,-30 439,-10 419,-10"/>
61
- <text text-anchor="start" x="442.6732" y="-15.4" font-family="sans-serif" font-size="14.00" fill="#000000"> &#160;Providers</text>
62
- <polygon fill="#fb8072" stroke="transparent" points="515,-10 515,-30 535,-30 535,-10 515,-10"/>
63
- <text text-anchor="start" x="538.7258" y="-15.4" font-family="sans-serif" font-size="14.00" fill="#000000"> &#160;Exports</text>
52
+ <polygon fill="#ffffff" stroke="transparent" points="-4,4 -4,-280 500,-280 500,4 -4,4"/>
53
+ <text text-anchor="start" x="227.0091" y="-42.4" font-family="sans-serif" font-weight="bold" font-size="14.00" fill="#000000">Legend</text>
54
+ <polygon fill="#ffffb3" stroke="transparent" points="14,-10 14,-30 34,-30 34,-10 14,-10"/>
55
+ <text text-anchor="start" x="37.629" y="-15.4" font-family="sans-serif" font-size="14.00" fill="#000000"> &#160;Declarations</text>
56
+ <polygon fill="#8dd3c7" stroke="transparent" points="127,-10 127,-30 147,-30 147,-10 127,-10"/>
57
+ <text text-anchor="start" x="150.7251" y="-15.4" font-family="sans-serif" font-size="14.00" fill="#000000"> &#160;Module</text>
58
+ <polygon fill="#80b1d3" stroke="transparent" points="213,-10 213,-30 233,-30 233,-10 213,-10"/>
59
+ <text text-anchor="start" x="236.7812" y="-15.4" font-family="sans-serif" font-size="14.00" fill="#000000"> &#160;Bootstrap</text>
60
+ <polygon fill="#fdb462" stroke="transparent" points="310,-10 310,-30 330,-30 330,-10 310,-10"/>
61
+ <text text-anchor="start" x="333.6732" y="-15.4" font-family="sans-serif" font-size="14.00" fill="#000000"> &#160;Providers</text>
62
+ <polygon fill="#fb8072" stroke="transparent" points="406,-10 406,-30 426,-30 426,-10 406,-10"/>
63
+ <text text-anchor="start" x="429.7258" y="-15.4" font-family="sans-serif" font-size="14.00" fill="#000000"> &#160;Exports</text>
64
64
  <g id="clust1" class="cluster">
65
65
  <title>cluster_DatePickerInputModule</title>
66
- <polygon fill="none" stroke="#000000" stroke-dasharray="1,5" points="8,-70 8,-379.5901 706,-379.5901 706,-70 8,-70"/>
66
+ <polygon fill="none" stroke="#000000" stroke-dasharray="1,5" points="164,-70 164,-268 332,-268 332,-70 164,-70"/>
67
67
  </g>
68
68
  <g id="clust2" class="cluster">
69
69
  <title>cluster_DatePickerInputModule_declarations</title>
70
- <polygon fill="none" stroke="#000000" points="295,-189.5901 295,-241.5901 419,-241.5901 419,-189.5901 295,-189.5901"/>
71
- </g>
72
- <g id="clust3" class="cluster">
73
- <title>cluster_DatePickerInputModule_DatePickerInput_providers</title>
74
- <polygon fill="none" stroke="#000000" points="16,-78 16,-176.5901 698,-176.5901 698,-78 16,-78"/>
70
+ <polygon fill="none" stroke="#000000" points="186,-78 186,-130 310,-130 310,-78 186,-78"/>
75
71
  </g>
76
72
  <g id="clust5" class="cluster">
77
73
  <title>cluster_DatePickerInputModule_exports</title>
78
- <polygon fill="none" stroke="#000000" points="293,-319.5901 293,-371.5901 421,-371.5901 421,-319.5901 293,-319.5901"/>
74
+ <polygon fill="none" stroke="#000000" points="184,-208 184,-260 312,-260 312,-208 184,-208"/>
79
75
  </g>
80
76
  <!-- DatePickerInput -->
81
77
  <g id="node1" class="node">
82
78
  <title>DatePickerInput</title>
83
- <polygon fill="#ffffb3" stroke="#000000" points="410.7409,-233.5901 303.2591,-233.5901 303.2591,-197.5901 410.7409,-197.5901 410.7409,-233.5901"/>
84
- <text text-anchor="middle" x="357" y="-211.3901" font-family="Times,serif" font-size="14.00" fill="#000000">DatePickerInput</text>
79
+ <polygon fill="#ffffb3" stroke="#000000" points="301.7409,-122 194.2591,-122 194.2591,-86 301.7409,-86 301.7409,-122"/>
80
+ <text text-anchor="middle" x="248" y="-99.8" font-family="Times,serif" font-size="14.00" fill="#000000">DatePickerInput</text>
85
81
  </g>
86
82
  <!-- DatePickerInputModule -->
87
83
  <g id="node2" class="node">
88
84
  <title>DatePickerInputModule</title>
89
- <polygon fill="#8dd3c7" stroke="#000000" points="432.7907,-298.5901 429.7907,-302.5901 408.7907,-302.5901 405.7907,-298.5901 281.2093,-298.5901 281.2093,-262.5901 432.7907,-262.5901 432.7907,-298.5901"/>
90
- <text text-anchor="middle" x="357" y="-276.3901" font-family="Times,serif" font-size="14.00" fill="#000000">DatePickerInputModule</text>
85
+ <polygon fill="#8dd3c7" stroke="#000000" points="323.7907,-187 320.7907,-191 299.7907,-191 296.7907,-187 172.2093,-187 172.2093,-151 323.7907,-151 323.7907,-187"/>
86
+ <text text-anchor="middle" x="248" y="-164.8" font-family="Times,serif" font-size="14.00" fill="#000000">DatePickerInputModule</text>
91
87
  </g>
92
88
  <!-- DatePickerInput&#45;&gt;DatePickerInputModule -->
93
89
  <g id="edge1" class="edge">
94
90
  <title>DatePickerInput&#45;&gt;DatePickerInputModule</title>
95
- <path fill="none" stroke="#000000" d="M357,-233.6962C357,-233.6962 357,-252.581 357,-252.581"/>
96
- <polygon fill="#000000" stroke="#000000" points="353.5001,-252.581 357,-262.581 360.5001,-252.5811 353.5001,-252.581"/>
91
+ <path fill="none" stroke="#000000" d="M248,-122.1061C248,-122.1061 248,-140.991 248,-140.991"/>
92
+ <polygon fill="#000000" stroke="#000000" points="244.5001,-140.9909 248,-150.991 251.5001,-140.991 244.5001,-140.9909"/>
97
93
  </g>
98
94
  <!-- DatePickerInput -->
99
- <g id="node4" class="node">
95
+ <g id="node3" class="node">
100
96
  <title>DatePickerInput </title>
101
- <polygon fill="#fb8072" stroke="#000000" points="412.7409,-363.5901 301.2591,-363.5901 301.2591,-327.5901 412.7409,-327.5901 412.7409,-363.5901"/>
102
- <text text-anchor="middle" x="357" y="-341.3901" font-family="Times,serif" font-size="14.00" fill="#000000">DatePickerInput </text>
97
+ <polygon fill="#fb8072" stroke="#000000" points="303.7409,-252 192.2591,-252 192.2591,-216 303.7409,-216 303.7409,-252"/>
98
+ <text text-anchor="middle" x="248" y="-229.8" font-family="Times,serif" font-size="14.00" fill="#000000">DatePickerInput </text>
103
99
  </g>
104
100
  <!-- DatePickerInputModule&#45;&gt;DatePickerInput -->
105
- <g id="edge3" class="edge">
106
- <title>DatePickerInputModule&#45;&gt;DatePickerInput </title>
107
- <path fill="none" stroke="#000000" stroke-dasharray="5,2" d="M357,-298.6962C357,-298.6962 357,-317.581 357,-317.581"/>
108
- <polygon fill="#000000" stroke="#000000" points="353.5001,-317.581 357,-327.581 360.5001,-317.5811 353.5001,-317.581"/>
109
- </g>
110
- <!-- {
111
- &#160;&#160;&#160;provide: NG_VALUE_ACCESSOR, useExisting: DatePickerInput, multi: true
112
- } -->
113
- <g id="node3" class="node">
114
- <title>{
115
- &#160;&#160;&#160;provide: NG_VALUE_ACCESSOR, useExisting: DatePickerInput, multi: true
116
- }</title>
117
- <ellipse fill="#fdb462" stroke="#000000" cx="357" cy="-127.295" rx="333.0382" ry="41.0911"/>
118
- <text text-anchor="middle" x="357" y="-139.895" font-family="Times,serif" font-size="14.00" fill="#000000">{</text>
119
- <text text-anchor="middle" x="357" y="-123.095" font-family="Times,serif" font-size="14.00" fill="#000000"> &#160;&#160;&#160;provide: NG_VALUE_ACCESSOR, useExisting: DatePickerInput, multi: true</text>
120
- <text text-anchor="middle" x="357" y="-106.295" font-family="Times,serif" font-size="14.00" fill="#000000">}</text>
121
- </g>
122
- <!-- {
123
- &#160;&#160;&#160;provide: NG_VALUE_ACCESSOR, useExisting: DatePickerInput, multi: true
124
- }&#45;&gt;DatePickerInput -->
125
101
  <g id="edge2" class="edge">
126
- <title>{
127
- &#160;&#160;&#160;provide: NG_VALUE_ACCESSOR, useExisting: DatePickerInput, multi: true
128
- }&#45;&gt;DatePickerInput</title>
129
- <path fill="none" stroke="#000000" d="M357,-168.5989C357,-168.5989 357,-187.2551 357,-187.2551"/>
130
- <polygon fill="#000000" stroke="#000000" points="353.5001,-187.255 357,-197.2551 360.5001,-187.2551 353.5001,-187.255"/>
102
+ <title>DatePickerInputModule&#45;&gt;DatePickerInput </title>
103
+ <path fill="none" stroke="#000000" stroke-dasharray="5,2" d="M248,-187.1061C248,-187.1061 248,-205.991 248,-205.991"/>
104
+ <polygon fill="#000000" stroke="#000000" points="244.5001,-205.9909 248,-215.991 251.5001,-205.991 244.5001,-205.9909"/>
131
105
  </g>
132
106
  </g>
133
107
  </svg>
package/docs/storybook/iframe.html CHANGED
@@ -125,11 +125,11 @@
125
125
 
126
126
 
127
127
 
128
- <script src="runtime~main.39186e031f107fc56c4a.bundle.js"></script>
128
+ <script src="runtime~main.767fc9bea0250161aab4.bundle.js"></script>
129
129
 
130
- <script src="vendors~main.39186e031f107fc56c4a.bundle.js"></script>
130
+ <script src="vendors~main.767fc9bea0250161aab4.bundle.js"></script>
131
131
 
132
- <script src="main.39186e031f107fc56c4a.bundle.js"></script>
132
+ <script src="main.767fc9bea0250161aab4.bundle.js"></script>
133
133
 
134
134
  </body>
135
135
  </html>
package/docs/storybook/{main.39186e031f107fc56c4a.bundle.js → main.767fc9bea0250161aab4.bundle.js} RENAMED
@@ -2700,6 +2700,7 @@ var ComboBox = /** @class */ (function () {
2700
2700
  }
2701
2701
  else if (selected && selected[0]) {
2702
2702
  this.selectedValue = selected[0].content;
2703
+ this.showClearButton = true;
2703
2704
  this.propagateChangeCallback(selected[0]);
2704
2705
  }
2705
2706
  };
@@ -2961,9 +2962,9 @@ var addSourceDecorator = __webpack_require__(/*! @storybook/source-loader/previe
2961
2962
  // @ts-ignore
2962
2963
  var __SOURCE_PREFIX__ = "/home/travis/build/IBM/carbon-components-angular/src/combobox";
2963
2964
  // @ts-ignore
2964
- var __STORY__ = "import { storiesOf, moduleMetadata } from \"@storybook/angular\";\nimport { action } from \"@storybook/addon-actions\";\nimport { withKnobs, text, boolean, number } from \"@storybook/addon-knobs/angular\";\n\nimport { ComboBoxModule } from \"./combobox.module\";\nimport { LoadingModule } from \"../loading/loading.module\";\nimport { ButtonModule } from \"../button/button.module\";\nimport { DocumentationModule } from \"./../documentation-component/documentation.module\";\nimport {\n\tReactiveFormsModule,\n\tFormGroup,\n\tFormBuilder,\n\tFormControl\n} from \"@angular/forms\";\nimport {\n\tComponent,\n\tOnInit,\n\tInput,\n\tAfterViewInit\n} from \"@angular/core\";\n\nconst getOptions = (override = {}) => {\n\tconst options = {\n\t\tdisabled: boolean(\"disabled\", false),\n\t\tinvalid: boolean(\"Invalid\", false),\n\t\tinvalidText: text(\"Invalid text\", \"A valid value is required\"),\n\t\tlabel: text(\"Label\", \"ComboBox label\"),\n\t\thelperText: text(\"Helper text\", \"Optional helper text.\"),\n\t\titems: [\n\t\t\t{\n\t\t\t\tcontent: \"one\"\n\t\t\t},\n\t\t\t{\n\t\t\t\tcontent: \"two\"\n\t\t\t},\n\t\t\t{\n\t\t\t\tcontent: \"three\"\n\t\t\t},\n\t\t\t{\n\t\t\t\tcontent: \"four\"\n\t\t\t}\n\t\t],\n\t\tselected: action(\"selection changed\"),\n\t\tsubmit: action(\"submit\")\n\t};\n\n\treturn Object.assign({}, options, override);\n};\n\n@Component({\n\tselector: \"app-dynamic-list-combobox\",\n\ttemplate: `\n\t\t<ibm-combo-box\n\t\t\t[(items)]=\"items\"\n\t\t\ttype=\"multi\"\n\t\t\t(selected)=\"updateSelected($event)\">\n\t\t\t<ibm-dropdown-list></ibm-dropdown-list>\n\t\t</ibm-combo-box>\n\t`\n})\nclass DynamicListComboBox implements AfterViewInit {\n\titems = [\n\t\t{\n\t\t\tcontent: \"one\"\n\t\t},\n\t\t{\n\t\t\tcontent: \"two\"\n\t\t},\n\t\t{\n\t\t\tcontent: \"three\"\n\t\t},\n\t\t{\n\t\t\tcontent: \"four\"\n\t\t}\n\t];\n\n\tupdateSelected(event) {\n\t\tthis.items.forEach((item: any) => {\n\t\t\tif (event.some(selectedItem => selectedItem.content === item.content)) {\n\t\t\t\titem.selected = true;\n\t\t\t} else {\n\t\t\t\titem.selected = false;\n\t\t\t}\n\t\t});\n\t}\n\n\tngAfterViewInit() {\n\t\tsetInterval(() => {\n\t\t\tconst newItems = JSON.parse(JSON.stringify(this.items));\n\t\t\tnewItems.push({ content: `New ${newItems.length}` });\n\t\t\tthis.items = newItems;\n\t\t}, 4000);\n\t}\n}\n\n@Component({\n\tselector: \"app-reactive-combobox\",\n\ttemplate: `\n\t\t<form [formGroup]=\"sampleForm\" (ngSubmit)=\"onSubmit(sampleForm)\">\n\t\t\t<ibm-combo-box\n\t\t\t\tformControlName=\"combobox\"\n\t\t\t\t[label]=\"label\"\n\t\t\t\t[helperText]=\"helperText\"\n\t\t\t\t[items]=\"items\">\n\t\t\t\t<ibm-dropdown-list></ibm-dropdown-list>\n\t\t\t</ibm-combo-box>\n\t\t\tselected: {{ sampleForm.get(\"combobox\").value | json }}\n\t\t\t<ibm-combo-box\n\t\t\t\tstyle=\"margin-top: 40px\"\n\t\t\t\tformControlName=\"multibox\"\n\t\t\t\t[label]=\"label\"\n\t\t\t\t[helperText]=\"helperText\"\n\t\t\t\ttype=\"multi\"\n\t\t\t\t[items]=\"items\">\n\t\t\t\t<ibm-dropdown-list></ibm-dropdown-list>\n\t\t\t</ibm-combo-box>\n\t\t\tselected: {{ sampleForm.get(\"multibox\").value | json }}\n\t\t</form>\n\t`\n})\nclass ReactiveFormsCombobox implements OnInit {\n\tpublic sampleForm: FormGroup;\n\t@Input() items = [];\n\t@Input() label = \"\";\n\t@Input() helperText = \"\";\n\n\tconstructor(private fb: FormBuilder) {}\n\n\tngOnInit() {\n\t\tthis.sampleForm = this.fb.group({\n\t\t\tcombobox: new FormControl,\n\t\t\tmultibox: new FormControl\n\t\t});\n\n\t\tthis.sampleForm.get(\"combobox\").setValue({ content: \"four\", selected: true });\n\t\tthis.sampleForm.get(\"multibox\").setValue(\n\t\t\t[\n\t\t\t\t{ content: \"four\", selected: true },\n\t\t\t\t{ content: \"two\", selected: true }\n\t\t\t]\n\t\t);\n\t}\n}\n\n@Component({\n\tselector: \"app-mock-query-search\",\n\ttemplate: `\n\t\t<ibm-loading [isActive]=\"loading\" size=\"sm\"></ibm-loading>\n\t\t<ibm-combo-box\n\t\t\tappendInline=\"true\"\n\t\t\t[items]=\"filterItems\"\n\t\t\t(search)=\"onSearch($event)\">\n\t\t\t<ibm-dropdown-list></ibm-dropdown-list>\n\t\t</ibm-combo-box>\n\t`\n})\nclass TestComponent {\n\tfilterItems = [];\n\n\tloading = false;\n\n\tonSearch() {\n\t\tthis.loading = true;\n\t\tsetTimeout(() => {\n\t\t\tthis.filterItems = [\n\t\t\t\t{ content: `Random ${Math.random()}` },\n\t\t\t\t{ content: `Random ${Math.random()}` },\n\t\t\t\t{ content: `Random ${Math.random()}` },\n\t\t\t\t{ content: `Random ${Math.random()}` }\n\t\t\t];\n\t\t\tthis.loading = false;\n\t\t}, 1000);\n\t}\n}\n\nstoriesOf(\"Components|Combobox\", module)\n\t.addDecorator(\n\t\tmoduleMetadata({\n\t\t\tdeclarations: [\n\t\t\t\tDynamicListComboBox,\n\t\t\t\tReactiveFormsCombobox,\n\t\t\t\tTestComponent\n\t\t\t],\n\t\t\timports: [\n\t\t\t\tComboBoxModule,\n\t\t\t\tButtonModule,\n\t\t\t\tReactiveFormsModule,\n\t\t\t\tDocumentationModule,\n\t\t\t\tLoadingModule\n\t\t\t]\n\t\t})\n\t)\n\t.addDecorator(withKnobs)\n\t.add(\"Basic\", () => ({\n\t\ttemplate: `\n\t\t\t<ibm-combo-box\n\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t[invalid]=\"invalid\"\n\t\t\t\t[invalidText]=\"invalidText\"\n\t\t\t\t[label]=\"label\"\n\t\t\t\t[helperText]=\"helperText\"\n\t\t\t\t[items]=\"items\"\n\t\t\t\t(selected)=\"selected($event)\"\n\t\t\t\t(submit)=\"submit($event)\">\n\t\t\t\t<ibm-dropdown-list></ibm-dropdown-list>\n\t\t\t</ibm-combo-box>\n\t\t`,\n\t\tprops: getOptions()\n\t}))\n\t.add(\"Dynamically added list items\", () => ({\n\t\ttemplate: `\n\t\t\t<app-dynamic-list-combobox></app-dynamic-list-combobox>\n\t\t`\n\t}))\n\t.add(\"Basic with max length\", () => ({\n\t\ttemplate: `\n\t\t\t<ibm-combo-box\n\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t[invalid]=\"invalid\"\n\t\t\t\t[invalidText]=\"invalidText\"\n\t\t\t\t[label]=\"label\"\n\t\t\t\t[helperText]=\"helperText\"\n\t\t\t\t[items]=\"items\"\n\t\t\t\t(selected)=\"selected($event)\"\n\t\t\t\t(submit)=\"submit($event)\"\n\t\t\t\t[maxLength]=\"maxLength\">\n\t\t\t\t<ibm-dropdown-list></ibm-dropdown-list>\n\t\t\t</ibm-combo-box>\n\t\t`,\n\t\tprops: {\n\t\t\t...getOptions(),\n\t\t\tmaxLength: number(\"Max length\", 5)\n\t\t}\n\t}))\n\t.add(\"With dynamic search\", () => ({\n\t\ttemplate: `\n\t\t\t<ibm-combo-box\n\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t[invalid]=\"invalid\"\n\t\t\t\t[invalidText]=\"invalidText\"\n\t\t\t\t[label]=\"label\"\n\t\t\t\t[helperText]=\"helperText\"\n\t\t\t\t[items]=\"items\"\n\t\t\t\t(selected)=\"onSelected()\"\n\t\t\t\t(search)=\"onSearch($event)\">\n\t\t\t\t<ibm-dropdown-list></ibm-dropdown-list>\n\t\t\t</ibm-combo-box>\n\t\t`,\n\t\tprops: {\n\t\t\tdisabled: boolean(\"disabled\", false),\n\t\t\tinvalid: boolean(\"Invalid\", false),\n\t\t\tinvalidText: text(\"Invalid text\", \"A valid value is required\"),\n\t\t\tlabel: text(\"Label\", \"ComboBox label\"),\n\t\t\thelperText: text(\"Helper text\", \"Optional helper text.\"),\n\t\t\titems: [\n\t\t\t\t{\n\t\t\t\t\tcontent: \"one\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tcontent: \"two\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tcontent: \"three\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tcontent: \"four\"\n\t\t\t\t}\n\t\t\t],\n\t\t\tonSelected: function() {\n\t\t\t\tthis.invalid = false;\n\t\t\t},\n\t\t\tonSearch: function(event) {\n\t\t\t\tconst selected = this.items.find(\n\t\t\t\t\t({ content }) => content.toLowerCase().includes(event.toLowerCase())\n\t\t\t\t);\n\n\t\t\t\tif (!selected) {\n\t\t\t\t\tthis.invalid = true;\n\t\t\t\t} else {\n\t\t\t\t\tthis.invalid = false;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}))\n\t.add(\"With template\", () => ({\n\t\ttemplate: `\n\t\t\t<ibm-combo-box\n\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t[invalid]=\"invalid\"\n\t\t\t\t[invalidText]=\"invalidText\"\n\t\t\t\t[label]=\"label\"\n\t\t\t\t[helperText]=\"helperText\"\n\t\t\t\t[items]=\"items\"\n\t\t\t\t(selected)=\"onSelected()\"\n\t\t\t\t(search)=\"onSearch($event)\">\n\t\t\t\t<ibm-dropdown-list></ibm-dropdown-list>\n\t\t\t</ibm-combo-box>\n\n\t\t\t<ng-template #invalidText>\n\t\t\t\t<div class=\"bx--form-requirement\">This is a template</div>\n\t\t\t</ng-template>\n\t\t`,\n\t\tprops: getOptions({\n\t\t\tonSelected: function() {\n\t\t\t\tthis.invalid = false;\n\t\t\t},\n\t\t\tonSearch: function(event) {\n\t\t\t\tconst selected = this.items.find(\n\t\t\t\t\t({ content }) => content.toLowerCase().includes(event.toLowerCase())\n\t\t\t\t);\n\n\t\t\t\tif (!selected) {\n\t\t\t\t\tthis.invalid = true;\n\t\t\t\t} else {\n\t\t\t\t\tthis.invalid = false;\n\t\t\t\t}\n\t\t\t}\n\t\t})\n\t}))\n\t.add(\"Multi-select\", () => ({\n\t\ttemplate: `\n\t\t\t<ibm-combo-box\n\t\t\t\t[invalid]=\"invalid\"\n\t\t\t\t[invalidText]=\"invalidText\"\n\t\t\t\t[label]=\"label\"\n\t\t\t\t[helperText]=\"helperText\"\n\t\t\t\t[items]=\"items\"\n\t\t\t\ttype=\"multi\"\n\t\t\t\t(selected)=\"selected($event)\"\n\t\t\t\t(submit)=\"submit($event)\">\n\t\t\t\t<ibm-dropdown-list></ibm-dropdown-list>\n\t\t\t</ibm-combo-box>\n\t\t`,\n\t\tprops: getOptions()\n\t}))\n\t.add(\"With reactive forms\", () => ({\n\t\ttemplate: `\n\t\t\t<app-reactive-combobox\n\t\t\t\t[items]=\"items\"\n\t\t\t\t[label]=\"label\"\n\t\t\t\t[helperText]=\"helperText\">\n\t\t\t</app-reactive-combobox>\n\t\t`,\n\t\tprops: getOptions()\n\t}))\n\t.add(\"With submit\", () => ({\n\t\ttemplate: `\n\t\t\t<ibm-combo-box\n\t\t\t\t[invalid]=\"invalid\"\n\t\t\t\t[invalidText]=\"invalidText\"\n\t\t\t\t[label]=\"label\"\n\t\t\t\t[helperText]=\"helperText\"\n\t\t\t\t[items]=\"items\"\n\t\t\t\ttype=\"multi\"\n\t\t\t\t(selected)=\"selected($event)\"\n\t\t\t\t(submit)=\"submit($event)\">\n\t\t\t\t<ibm-dropdown-list></ibm-dropdown-list>\n\t\t\t</ibm-combo-box>\n\t\t`,\n\t\tprops: getOptions({\n\t\t\tsubmit: function(event) {\n\t\t\t\t// so the action still shows up in the \"actions\" panel\n\t\t\t\taction(\"submit\")(event);\n\t\t\t\tif (event.value.content) {\n\t\t\t\t\tthis.items = [\n\t\t\t\t\t\t...event.items,\n\t\t\t\t\t\tObject.assign({}, event.value, { selected: true })\n\t\t\t\t\t];\n\t\t\t\t}\n\t\t\t}\n\t\t})\n\t}))\n\t.add(\"With ngModel\", () => ({\n\t\ttemplate: `\n\t\t\t<ibm-combo-box\n\t\t\t\t[invalid]=\"invalid\"\n\t\t\t\t[invalidText]=\"invalidText\"\n\t\t\t\t[label]=\"label\"\n\t\t\t\t[helperText]=\"helperText\"\n\t\t\t\t[items]=\"items\"\n\t\t\t\t[(ngModel)]=\"model\"\n\t\t\t\t(selected)=\"selected($event)\"\n\t\t\t\t(submit)=\"submit($event)\">\n\t\t\t\t<ibm-dropdown-list></ibm-dropdown-list>\n\t\t\t</ibm-combo-box>\n\n\t\t\t<p>model: {{model | json}}</p>\n\t\t`,\n\t\tprops: getOptions({\n\t\t\tmodel: { \"content\": \"three\", \"selected\": true }\n\t\t})\n\t}))\n\t.add(\"Mock query search\", () => ({\n\t\ttemplate: `\n\t\t\t<app-mock-query-search></app-mock-query-search>\n\t\t`\n\t}))\n\t.add(\"Documentation\", () => ({\n\t\ttemplate: `\n\t\t\t<ibm-documentation src=\"documentation/components/ComboBox.html\"></ibm-documentation>\n\t\t`\n\t}));\n";
2965
+ var __STORY__ = "import { storiesOf, moduleMetadata } from \"@storybook/angular\";\nimport { action } from \"@storybook/addon-actions\";\nimport { withKnobs, text, boolean, number } from \"@storybook/addon-knobs/angular\";\n\nimport { ComboBoxModule } from \"./combobox.module\";\nimport { LoadingModule } from \"../loading/loading.module\";\nimport { ButtonModule } from \"../button/button.module\";\nimport { DocumentationModule } from \"./../documentation-component/documentation.module\";\nimport {\n\tReactiveFormsModule,\n\tFormGroup,\n\tFormBuilder,\n\tFormControl\n} from \"@angular/forms\";\nimport {\n\tComponent,\n\tOnInit,\n\tInput,\n\tAfterViewInit\n} from \"@angular/core\";\n\nconst getOptions = (override = {}) => {\n\tconst options = {\n\t\tdisabled: boolean(\"disabled\", false),\n\t\tinvalid: boolean(\"Invalid\", false),\n\t\tinvalidText: text(\"Invalid text\", \"A valid value is required\"),\n\t\tlabel: text(\"Label\", \"ComboBox label\"),\n\t\thelperText: text(\"Helper text\", \"Optional helper text.\"),\n\t\titems: [\n\t\t\t{\n\t\t\t\tcontent: \"one\"\n\t\t\t},\n\t\t\t{\n\t\t\t\tcontent: \"two\",\n\t\t\t\tselected: true\n\t\t\t},\n\t\t\t{\n\t\t\t\tcontent: \"three\"\n\t\t\t},\n\t\t\t{\n\t\t\t\tcontent: \"four\"\n\t\t\t}\n\t\t],\n\t\tselected: action(\"selection changed\"),\n\t\tsubmit: action(\"submit\")\n\t};\n\n\treturn Object.assign({}, options, override);\n};\n\n@Component({\n\tselector: \"app-dynamic-list-combobox\",\n\ttemplate: `\n\t\t<ibm-combo-box\n\t\t\t[(items)]=\"items\"\n\t\t\ttype=\"multi\"\n\t\t\t(selected)=\"updateSelected($event)\">\n\t\t\t<ibm-dropdown-list></ibm-dropdown-list>\n\t\t</ibm-combo-box>\n\t`\n})\nclass DynamicListComboBox implements AfterViewInit {\n\titems = [\n\t\t{\n\t\t\tcontent: \"one\"\n\t\t},\n\t\t{\n\t\t\tcontent: \"two\"\n\t\t},\n\t\t{\n\t\t\tcontent: \"three\"\n\t\t},\n\t\t{\n\t\t\tcontent: \"four\"\n\t\t}\n\t];\n\n\tupdateSelected(event) {\n\t\tthis.items.forEach((item: any) => {\n\t\t\tif (event.some(selectedItem => selectedItem.content === item.content)) {\n\t\t\t\titem.selected = true;\n\t\t\t} else {\n\t\t\t\titem.selected = false;\n\t\t\t}\n\t\t});\n\t}\n\n\tngAfterViewInit() {\n\t\tsetInterval(() => {\n\t\t\tconst newItems = JSON.parse(JSON.stringify(this.items));\n\t\t\tnewItems.push({ content: `New ${newItems.length}` });\n\t\t\tthis.items = newItems;\n\t\t}, 4000);\n\t}\n}\n\n@Component({\n\tselector: \"app-reactive-combobox\",\n\ttemplate: `\n\t\t<form [formGroup]=\"sampleForm\" (ngSubmit)=\"onSubmit(sampleForm)\">\n\t\t\t<ibm-combo-box\n\t\t\t\tformControlName=\"combobox\"\n\t\t\t\t[label]=\"label\"\n\t\t\t\t[helperText]=\"helperText\"\n\t\t\t\t[items]=\"items\">\n\t\t\t\t<ibm-dropdown-list></ibm-dropdown-list>\n\t\t\t</ibm-combo-box>\n\t\t\tselected: {{ sampleForm.get(\"combobox\").value | json }}\n\t\t\t<ibm-combo-box\n\t\t\t\tstyle=\"margin-top: 40px\"\n\t\t\t\tformControlName=\"multibox\"\n\t\t\t\t[label]=\"label\"\n\t\t\t\t[helperText]=\"helperText\"\n\t\t\t\ttype=\"multi\"\n\t\t\t\t[items]=\"items\">\n\t\t\t\t<ibm-dropdown-list></ibm-dropdown-list>\n\t\t\t</ibm-combo-box>\n\t\t\tselected: {{ sampleForm.get(\"multibox\").value | json }}\n\t\t</form>\n\t`\n})\nclass ReactiveFormsCombobox implements OnInit {\n\tpublic sampleForm: FormGroup;\n\t@Input() items = [];\n\t@Input() label = \"\";\n\t@Input() helperText = \"\";\n\n\tconstructor(private fb: FormBuilder) {}\n\n\tngOnInit() {\n\t\tthis.sampleForm = this.fb.group({\n\t\t\tcombobox: new FormControl,\n\t\t\tmultibox: new FormControl\n\t\t});\n\n\t\tthis.sampleForm.get(\"combobox\").setValue({ content: \"four\", selected: true });\n\t\tthis.sampleForm.get(\"multibox\").setValue(\n\t\t\t[\n\t\t\t\t{ content: \"four\", selected: true },\n\t\t\t\t{ content: \"two\", selected: true }\n\t\t\t]\n\t\t);\n\t}\n}\n\n@Component({\n\tselector: \"app-mock-query-search\",\n\ttemplate: `\n\t\t<ibm-loading [isActive]=\"loading\" size=\"sm\"></ibm-loading>\n\t\t<ibm-combo-box\n\t\t\tappendInline=\"true\"\n\t\t\t[items]=\"filterItems\"\n\t\t\t(search)=\"onSearch($event)\">\n\t\t\t<ibm-dropdown-list></ibm-dropdown-list>\n\t\t</ibm-combo-box>\n\t`\n})\nclass TestComponent {\n\tfilterItems = [];\n\n\tloading = false;\n\n\tonSearch() {\n\t\tthis.loading = true;\n\t\tsetTimeout(() => {\n\t\t\tthis.filterItems = [\n\t\t\t\t{ content: `Random ${Math.random()}` },\n\t\t\t\t{ content: `Random ${Math.random()}` },\n\t\t\t\t{ content: `Random ${Math.random()}` },\n\t\t\t\t{ content: `Random ${Math.random()}` }\n\t\t\t];\n\t\t\tthis.loading = false;\n\t\t}, 1000);\n\t}\n}\n\nstoriesOf(\"Components|Combobox\", module)\n\t.addDecorator(\n\t\tmoduleMetadata({\n\t\t\tdeclarations: [\n\t\t\t\tDynamicListComboBox,\n\t\t\t\tReactiveFormsCombobox,\n\t\t\t\tTestComponent\n\t\t\t],\n\t\t\timports: [\n\t\t\t\tComboBoxModule,\n\t\t\t\tButtonModule,\n\t\t\t\tReactiveFormsModule,\n\t\t\t\tDocumentationModule,\n\t\t\t\tLoadingModule\n\t\t\t]\n\t\t})\n\t)\n\t.addDecorator(withKnobs)\n\t.add(\"Basic\", () => ({\n\t\ttemplate: `\n\t\t\t<ibm-combo-box\n\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t[invalid]=\"invalid\"\n\t\t\t\t[invalidText]=\"invalidText\"\n\t\t\t\t[label]=\"label\"\n\t\t\t\t[helperText]=\"helperText\"\n\t\t\t\t[items]=\"items\"\n\t\t\t\t(selected)=\"selected($event)\"\n\t\t\t\t(submit)=\"submit($event)\">\n\t\t\t\t<ibm-dropdown-list></ibm-dropdown-list>\n\t\t\t</ibm-combo-box>\n\t\t`,\n\t\tprops: getOptions()\n\t}))\n\t.add(\"Dynamically added list items\", () => ({\n\t\ttemplate: `\n\t\t\t<app-dynamic-list-combobox></app-dynamic-list-combobox>\n\t\t`\n\t}))\n\t.add(\"Basic with max length\", () => ({\n\t\ttemplate: `\n\t\t\t<ibm-combo-box\n\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t[invalid]=\"invalid\"\n\t\t\t\t[invalidText]=\"invalidText\"\n\t\t\t\t[label]=\"label\"\n\t\t\t\t[helperText]=\"helperText\"\n\t\t\t\t[items]=\"items\"\n\t\t\t\t(selected)=\"selected($event)\"\n\t\t\t\t(submit)=\"submit($event)\"\n\t\t\t\t[maxLength]=\"maxLength\">\n\t\t\t\t<ibm-dropdown-list></ibm-dropdown-list>\n\t\t\t</ibm-combo-box>\n\t\t`,\n\t\tprops: {\n\t\t\t...getOptions(),\n\t\t\tmaxLength: number(\"Max length\", 5)\n\t\t}\n\t}))\n\t.add(\"With dynamic search\", () => ({\n\t\ttemplate: `\n\t\t\t<ibm-combo-box\n\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t[invalid]=\"invalid\"\n\t\t\t\t[invalidText]=\"invalidText\"\n\t\t\t\t[label]=\"label\"\n\t\t\t\t[helperText]=\"helperText\"\n\t\t\t\t[items]=\"items\"\n\t\t\t\t(selected)=\"onSelected()\"\n\t\t\t\t(search)=\"onSearch($event)\">\n\t\t\t\t<ibm-dropdown-list></ibm-dropdown-list>\n\t\t\t</ibm-combo-box>\n\t\t`,\n\t\tprops: {\n\t\t\tdisabled: boolean(\"disabled\", false),\n\t\t\tinvalid: boolean(\"Invalid\", false),\n\t\t\tinvalidText: text(\"Invalid text\", \"A valid value is required\"),\n\t\t\tlabel: text(\"Label\", \"ComboBox label\"),\n\t\t\thelperText: text(\"Helper text\", \"Optional helper text.\"),\n\t\t\titems: [\n\t\t\t\t{\n\t\t\t\t\tcontent: \"one\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tcontent: \"two\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tcontent: \"three\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tcontent: \"four\"\n\t\t\t\t}\n\t\t\t],\n\t\t\tonSelected: function() {\n\t\t\t\tthis.invalid = false;\n\t\t\t},\n\t\t\tonSearch: function(event) {\n\t\t\t\tconst selected = this.items.find(\n\t\t\t\t\t({ content }) => content.toLowerCase().includes(event.toLowerCase())\n\t\t\t\t);\n\n\t\t\t\tif (!selected) {\n\t\t\t\t\tthis.invalid = true;\n\t\t\t\t} else {\n\t\t\t\t\tthis.invalid = false;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}))\n\t.add(\"With template\", () => ({\n\t\ttemplate: `\n\t\t\t<ibm-combo-box\n\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t[invalid]=\"invalid\"\n\t\t\t\t[invalidText]=\"invalidText\"\n\t\t\t\t[label]=\"label\"\n\t\t\t\t[helperText]=\"helperText\"\n\t\t\t\t[items]=\"items\"\n\t\t\t\t(selected)=\"onSelected()\"\n\t\t\t\t(search)=\"onSearch($event)\">\n\t\t\t\t<ibm-dropdown-list></ibm-dropdown-list>\n\t\t\t</ibm-combo-box>\n\n\t\t\t<ng-template #invalidText>\n\t\t\t\t<div class=\"bx--form-requirement\">This is a template</div>\n\t\t\t</ng-template>\n\t\t`,\n\t\tprops: getOptions({\n\t\t\tonSelected: function() {\n\t\t\t\tthis.invalid = false;\n\t\t\t},\n\t\t\tonSearch: function(event) {\n\t\t\t\tconst selected = this.items.find(\n\t\t\t\t\t({ content }) => content.toLowerCase().includes(event.toLowerCase())\n\t\t\t\t);\n\n\t\t\t\tif (!selected) {\n\t\t\t\t\tthis.invalid = true;\n\t\t\t\t} else {\n\t\t\t\t\tthis.invalid = false;\n\t\t\t\t}\n\t\t\t}\n\t\t})\n\t}))\n\t.add(\"Multi-select\", () => ({\n\t\ttemplate: `\n\t\t\t<ibm-combo-box\n\t\t\t\t[invalid]=\"invalid\"\n\t\t\t\t[invalidText]=\"invalidText\"\n\t\t\t\t[label]=\"label\"\n\t\t\t\t[helperText]=\"helperText\"\n\t\t\t\t[items]=\"items\"\n\t\t\t\ttype=\"multi\"\n\t\t\t\t(selected)=\"selected($event)\"\n\t\t\t\t(submit)=\"submit($event)\">\n\t\t\t\t<ibm-dropdown-list></ibm-dropdown-list>\n\t\t\t</ibm-combo-box>\n\t\t`,\n\t\tprops: getOptions()\n\t}))\n\t.add(\"With reactive forms\", () => ({\n\t\ttemplate: `\n\t\t\t<app-reactive-combobox\n\t\t\t\t[items]=\"items\"\n\t\t\t\t[label]=\"label\"\n\t\t\t\t[helperText]=\"helperText\">\n\t\t\t</app-reactive-combobox>\n\t\t`,\n\t\tprops: getOptions()\n\t}))\n\t.add(\"With submit\", () => ({\n\t\ttemplate: `\n\t\t\t<ibm-combo-box\n\t\t\t\t[invalid]=\"invalid\"\n\t\t\t\t[invalidText]=\"invalidText\"\n\t\t\t\t[label]=\"label\"\n\t\t\t\t[helperText]=\"helperText\"\n\t\t\t\t[items]=\"items\"\n\t\t\t\ttype=\"multi\"\n\t\t\t\t(selected)=\"selected($event)\"\n\t\t\t\t(submit)=\"submit($event)\">\n\t\t\t\t<ibm-dropdown-list></ibm-dropdown-list>\n\t\t\t</ibm-combo-box>\n\t\t`,\n\t\tprops: getOptions({\n\t\t\tsubmit: function(event) {\n\t\t\t\t// so the action still shows up in the \"actions\" panel\n\t\t\t\taction(\"submit\")(event);\n\t\t\t\tif (event.value.content) {\n\t\t\t\t\tthis.items = [\n\t\t\t\t\t\t...event.items,\n\t\t\t\t\t\tObject.assign({}, event.value, { selected: true })\n\t\t\t\t\t];\n\t\t\t\t}\n\t\t\t}\n\t\t})\n\t}))\n\t.add(\"With ngModel\", () => ({\n\t\ttemplate: `\n\t\t\t<ibm-combo-box\n\t\t\t\t[invalid]=\"invalid\"\n\t\t\t\t[invalidText]=\"invalidText\"\n\t\t\t\t[label]=\"label\"\n\t\t\t\t[helperText]=\"helperText\"\n\t\t\t\t[items]=\"items\"\n\t\t\t\t[(ngModel)]=\"model\"\n\t\t\t\t(selected)=\"selected($event)\"\n\t\t\t\t(submit)=\"submit($event)\">\n\t\t\t\t<ibm-dropdown-list></ibm-dropdown-list>\n\t\t\t</ibm-combo-box>\n\n\t\t\t<p>model: {{model | json}}</p>\n\t\t`,\n\t\tprops: getOptions({\n\t\t\tmodel: { \"content\": \"three\", \"selected\": true }\n\t\t})\n\t}))\n\t.add(\"Mock query search\", () => ({\n\t\ttemplate: `\n\t\t\t<app-mock-query-search></app-mock-query-search>\n\t\t`\n\t}))\n\t.add(\"Documentation\", () => ({\n\t\ttemplate: `\n\t\t\t<ibm-documentation src=\"documentation/components/ComboBox.html\"></ibm-documentation>\n\t\t`\n\t}));\n";
2965
2966
  // @ts-ignore
2966
- var __ADDS_MAP__ = { "components-combobox--documentation": { "startLoc": { "col": 6, "line": 398 }, "endLoc": { "col": 3, "line": 402 }, "startBody": { "col": 23, "line": 398 }, "endBody": { "col": 3, "line": 402 } }, "components-combobox--mock-query-search": { "startLoc": { "col": 6, "line": 393 }, "endLoc": { "col": 3, "line": 397 }, "startBody": { "col": 27, "line": 393 }, "endBody": { "col": 3, "line": 397 } }, "components-combobox--with-ngmodel": { "startLoc": { "col": 6, "line": 373 }, "endLoc": { "col": 3, "line": 392 }, "startBody": { "col": 22, "line": 373 }, "endBody": { "col": 3, "line": 392 } }, "components-combobox--with-submit": { "startLoc": { "col": 6, "line": 346 }, "endLoc": { "col": 3, "line": 372 }, "startBody": { "col": 21, "line": 346 }, "endBody": { "col": 3, "line": 372 } }, "components-combobox--with-reactive-forms": { "startLoc": { "col": 6, "line": 336 }, "endLoc": { "col": 3, "line": 345 }, "startBody": { "col": 29, "line": 336 }, "endBody": { "col": 3, "line": 345 } }, "components-combobox--multi-select": { "startLoc": { "col": 6, "line": 320 }, "endLoc": { "col": 3, "line": 335 }, "startBody": { "col": 22, "line": 320 }, "endBody": { "col": 3, "line": 335 } }, "components-combobox--with-template": { "startLoc": { "col": 6, "line": 285 }, "endLoc": { "col": 3, "line": 319 }, "startBody": { "col": 23, "line": 285 }, "endBody": { "col": 3, "line": 319 } }, "components-combobox--with-dynamic-search": { "startLoc": { "col": 6, "line": 235 }, "endLoc": { "col": 3, "line": 284 }, "startBody": { "col": 29, "line": 235 }, "endBody": { "col": 3, "line": 284 } }, "components-combobox--basic-with-max-length": { "startLoc": { "col": 6, "line": 215 }, "endLoc": { "col": 3, "line": 234 }, "startBody": { "col": 31, "line": 215 }, "endBody": { "col": 3, "line": 234 } }, "components-combobox--dynamically-added-list-items": { "startLoc": { "col": 6, "line": 210 }, "endLoc": { "col": 3, "line": 214 }, "startBody": { "col": 38, "line": 210 }, "endBody": { "col": 3, "line": 214 } }, "components-combobox--basic": { "startLoc": { "col": 6, "line": 194 }, "endLoc": { "col": 3, "line": 209 }, "startBody": { "col": 15, "line": 194 }, "endBody": { "col": 3, "line": 209 } } };
2967
+ var __ADDS_MAP__ = { "components-combobox--documentation": { "startLoc": { "col": 6, "line": 399 }, "endLoc": { "col": 3, "line": 403 }, "startBody": { "col": 23, "line": 399 }, "endBody": { "col": 3, "line": 403 } }, "components-combobox--mock-query-search": { "startLoc": { "col": 6, "line": 394 }, "endLoc": { "col": 3, "line": 398 }, "startBody": { "col": 27, "line": 394 }, "endBody": { "col": 3, "line": 398 } }, "components-combobox--with-ngmodel": { "startLoc": { "col": 6, "line": 374 }, "endLoc": { "col": 3, "line": 393 }, "startBody": { "col": 22, "line": 374 }, "endBody": { "col": 3, "line": 393 } }, "components-combobox--with-submit": { "startLoc": { "col": 6, "line": 347 }, "endLoc": { "col": 3, "line": 373 }, "startBody": { "col": 21, "line": 347 }, "endBody": { "col": 3, "line": 373 } }, "components-combobox--with-reactive-forms": { "startLoc": { "col": 6, "line": 337 }, "endLoc": { "col": 3, "line": 346 }, "startBody": { "col": 29, "line": 337 }, "endBody": { "col": 3, "line": 346 } }, "components-combobox--multi-select": { "startLoc": { "col": 6, "line": 321 }, "endLoc": { "col": 3, "line": 336 }, "startBody": { "col": 22, "line": 321 }, "endBody": { "col": 3, "line": 336 } }, "components-combobox--with-template": { "startLoc": { "col": 6, "line": 286 }, "endLoc": { "col": 3, "line": 320 }, "startBody": { "col": 23, "line": 286 }, "endBody": { "col": 3, "line": 320 } }, "components-combobox--with-dynamic-search": { "startLoc": { "col": 6, "line": 236 }, "endLoc": { "col": 3, "line": 285 }, "startBody": { "col": 29, "line": 236 }, "endBody": { "col": 3, "line": 285 } }, "components-combobox--basic-with-max-length": { "startLoc": { "col": 6, "line": 216 }, "endLoc": { "col": 3, "line": 235 }, "startBody": { "col": 31, "line": 216 }, "endBody": { "col": 3, "line": 235 } }, "components-combobox--dynamically-added-list-items": { "startLoc": { "col": 6, "line": 211 }, "endLoc": { "col": 3, "line": 215 }, "startBody": { "col": 38, "line": 211 }, "endBody": { "col": 3, "line": 215 } }, "components-combobox--basic": { "startLoc": { "col": 6, "line": 195 }, "endLoc": { "col": 3, "line": 210 }, "startBody": { "col": 15, "line": 195 }, "endBody": { "col": 3, "line": 210 } } };
2967
2968
  // @ts-ignore
2968
2969
  var __MAIN_FILE_LOCATION__ = "/combobox.stories.ts";
2969
2970
  // @ts-ignore
@@ -2994,7 +2995,8 @@ var getOptions = function (override) {
2994
2995
  content: "one"
2995
2996
  },
2996
2997
  {
2997
- content: "two"
2998
+ content: "two",
2999
+ selected: true
2998
3000
  },
2999
3001
  {
3000
3002
  content: "three"
@@ -32950,4 +32952,4 @@ module.exports = __webpack_require__(/*! /home/travis/build/IBM/carbon-component
32950
32952
  /***/ })
32951
32953
 
32952
32954
  },[[0,"runtime~main","vendors~main"]]]);
32953
- //# sourceMappingURL=main.39186e031f107fc56c4a.bundle.js.map
32955
+ //# sourceMappingURL=main.767fc9bea0250161aab4.bundle.js.map