carbon-components-angular 5.32.0 → 5.33.0
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.
- package/combobox/combobox.component.d.ts +5 -1
- package/docs/documentation/components/ComboBox.html +179 -136
- package/docs/documentation/coverage.html +1 -1
- package/docs/documentation/js/search/search_index.js +2 -2
- package/docs/documentation/modules/ToggleModule/dependencies.svg +42 -46
- package/docs/documentation/modules/ToggleModule.html +42 -46
- package/docs/documentation/modules/ToggletipModule/dependencies.svg +39 -39
- package/docs/documentation/modules/ToggletipModule.html +39 -39
- package/docs/documentation/modules/TooltipModule/dependencies.svg +4 -4
- package/docs/documentation/modules/TooltipModule.html +4 -4
- package/docs/documentation/modules/TreeviewModule/dependencies.svg +37 -37
- package/docs/documentation/modules/TreeviewModule.html +37 -37
- package/docs/documentation/modules/UIShellModule/dependencies.svg +4 -4
- package/docs/documentation/modules/UIShellModule.html +4 -4
- package/docs/documentation.json +115 -104
- package/docs/storybook/combobox-combobox-stories.3bbada2d.iframe.bundle.js +1 -0
- package/docs/storybook/iframe.html +2 -2
- package/docs/storybook/main.f6f7b65b.iframe.bundle.js +1 -0
- package/docs/storybook/{patterns-forms-multi-step-form-stories.89086fc2.iframe.bundle.js → patterns-forms-multi-step-form-stories.22da53c6.iframe.bundle.js} +1 -1
- package/docs/storybook/project.json +1 -1
- package/docs/storybook/{runtime~main.6c556d33.iframe.bundle.js → runtime~main.b455b6c9.iframe.bundle.js} +1 -1
- package/esm2020/combobox/combobox.component.mjs +18 -8
- package/fesm2015/carbon-components-angular-combobox.mjs +17 -7
- package/fesm2015/carbon-components-angular-combobox.mjs.map +1 -1
- package/fesm2020/carbon-components-angular-combobox.mjs +17 -7
- package/fesm2020/carbon-components-angular-combobox.mjs.map +1 -1
- package/package.json +1 -1
- package/docs/storybook/combobox-combobox-stories.57374785.iframe.bundle.js +0 -1
- package/docs/storybook/main.84a378b3.iframe.bundle.js +0 -1
package/docs/documentation.json
CHANGED
|
@@ -22680,7 +22680,7 @@
|
|
|
22680
22680
|
},
|
|
22681
22681
|
{
|
|
22682
22682
|
"name": "ComboBox",
|
|
22683
|
-
"id": "component-ComboBox-
|
|
22683
|
+
"id": "component-ComboBox-0faba74069aaef129ce53ea4dad541eeeae0d52927675d873ecb68bfccd0f50cfc39d5a06d82fda3b8643ba05a45c74feeb026abebd60e96b527bc858eb2b4a5",
|
|
22684
22684
|
"file": "src/combobox/combobox.component.ts",
|
|
22685
22685
|
"encapsulation": [],
|
|
22686
22686
|
"entryComponents": [],
|
|
@@ -22694,7 +22694,7 @@
|
|
|
22694
22694
|
"selector": "cds-combo-box, ibm-combo-box",
|
|
22695
22695
|
"styleUrls": [],
|
|
22696
22696
|
"styles": [],
|
|
22697
|
-
"template": "<div class=\"cds--list-box__wrapper\">\n\t<label\n\t\t*ngIf=\"label\"\n\t\t[for]=\"id\"\n\t\t[id]=\"labelId\"\n\t\tclass=\"cds--label\"\n\t\t[ngClass]=\"{\n\t\t\t'cds--label--disabled': disabled,\n\t\t\t'cds--visually-hidden': hideLabel\n\t\t}\">\n\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t<ng-template *ngIf=\"isTemplate(label)\" [ngTemplateOutlet]=\"label\"></ng-template>\n\t</label>\n\t<div\n\t\t#listbox\n\t\t[ngClass]=\"{\n\t\t\t'cds--multi-select cds--multi-select--filterable': type === 'multi',\n\t\t\t'cds--list-box--light': theme === 'light',\n\t\t\t'cds--list-box--expanded': open,\n\t\t\t'cds--list-box--sm': size === 'sm',\n\t\t\t'cds--list-box--md': size === 'md',\n\t\t\t'cds--list-box--lg': size === 'lg',\n\t\t\t'cds--list-box--disabled': disabled,\n\t\t\t'cds--combo-box--warning cds--list-box--warning': warn\n\t\t}\"\n\t\tclass=\"cds--list-box cds--combo-box\"\n\t\t[attr.data-invalid]=\"(invalid ? true : null)\">\n\t\t<div\n\t\t\tclass=\"cds--list-box__field\"\n\t\t\t(click)=\"toggleDropdown()\"\n\t\t\t(blur)=\"onBlur()\">\n\t\t\t<div\n\t\t\t\t*ngIf=\"type === 'multi' && pills.length > 0\"\n\t\t\t\tclass=\"cds--tag cds--tag--filter cds--tag--high-contrast\"\n\t\t\t\t[ngClass]=\"{'cds--tag--disabled': disabled}\">\n\t\t\t\t<span class=\"cds--tag__label\">{{ pills.length }}</span>\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t(click)=\"clearSelected($event)\"\n\t\t\t\t\t(blur)=\"onBlur()\"\n\t\t\t\t\t(keydown.enter)=\"clearSelected($event)\"\n\t\t\t\t\tclass=\"cds--tag__close-icon\"\n\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t[title]=\"clearSelectionsTitle\"\n\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t[attr.aria-label]=\"clearSelectionAria\">\n\t\t\t\t\t<svg\n\t\t\t\t\t\tfocusable=\"false\"\n\t\t\t\t\t\tpreserveAspectRatio=\"xMidYMid meet\"\n\t\t\t\t\t\tstyle=\"will-change: transform;\"\n\t\t\t\t\t\trole=\"img\"\n\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\twidth=\"16\"\n\t\t\t\t\t\theight=\"16\"\n\t\t\t\t\t\tviewBox=\"0 0 16 16\"\n\t\t\t\t\t\taria-hidden=\"true\">\n\t\t\t\t\t\t<path d=\"M12 4.7l-.7-.7L8 7.3 4.7 4l-.7.7L7.3 8 4 11.3l.7.7L8 8.7l3.3 3.3.7-.7L8.7 8z\"></path>\n\t\t\t\t\t</svg>\n\t\t\t\t</button>\n\t\t\t</div>\n\t\t\t<input\n\t\t\t\t#input\n\t\t\t\ttype=\"text\"\n\t\t\t\tautocomplete=\"off\"\n\t\t\t\trole=\"combobox\"\n\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t(input)=\"onSearch($event.target.value)\"\n\t\t\t\t(blur)=\"onBlur()\"\n\t\t\t\t(keydown.enter)=\"onSubmit($event)\"\n\t\t\t\t[value]=\"selectedValue\"\n\t\t\t\tclass=\"cds--text-input\"\n\t\t\t\t[ngClass]=\"{'cds--text-input--empty': !showClearButton}\"\n\t\t\t\ttabindex=\"0\"\n\t\t\t\t[id]=\"id\"\n\t\t\t\t[attr.aria-labelledby]=\"labelId\"\n\t\t\t\t[attr.aria-expanded]=\"open\"\n\t\t\t\taria-haspopup=\"listbox\"\n\t\t\t\t[attr.maxlength]=\"maxLength\"\n\t\t\t\t[attr.aria-controls]=\"open ? view?.listId : null\"\n\t\t\t\t[attr.aria-autocomplete]=\"autocomplete\"\n\t\t\t\t[placeholder]=\"placeholder\"/>\n\t\t\t<svg\n\t\t\t\t*ngIf=\"invalid\"\n\t\t\t\tcdsIcon=\"warning--filled\"\n\t\t\t\tsize=\"16\"\n\t\t\t\tclass=\"cds--list-box__invalid-icon\">\n\t\t\t</svg>\n\t\t\t<svg\n\t\t\t\t*ngIf=\"!invalid && warn\"\n\t\t\t\tcdsIcon=\"warning--alt--filled\"\n\t\t\t\tsize=\"16\"\n\t\t\t\tclass=\"cds--list-box__invalid-icon cds--list-box__invalid-icon--warning\">\n\t\t\t</svg>\n\t\t\t<div\n\t\t\t\t*ngIf=\"showClearButton\"\n\t\t\t\trole=\"button\"\n\t\t\t\tclass=\"cds--list-box__selection\"\n\t\t\t\ttabindex=\"0\"\n\t\t\t\t[attr.aria-label]=\"clearSelectionAria\"\n\t\t\t\t[title]=\"clearSelectionTitle\"\n\t\t\t\t(keyup.enter)=\"clearInput($event)\"\n\t\t\t\t(click)=\"clearInput($event)\"\n\t\t\t\t(blur)=\"onBlur()\">\n\t\t\t\t<svg cdsIcon=\"close\" size=\"16\"></svg>\n\t\t\t</div>\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\trole=\"button\"\n\t\t\t\tclass=\"cds--list-box__menu-icon\"\n\t\t\t\ttabindex=\"-1\"\n\t\t\t\t[title]=\"open ? closeMenuAria : openMenuAria\"\n\t\t\t\t[attr.aria-label]=\"open ? closeMenuAria : openMenuAria\"\n\t\t\t\t[ngClass]=\"{'cds--list-box__menu-icon--open': open}\">\n\t\t\t\t<svg cdsIcon=\"chevron--down\" size=\"16\"></svg>\n\t\t\t</button>\n\t\t</div>\n\t\t<div\n\t\t\t#dropdownMenu\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--list-box--up': this.dropUp !== null && this.dropUp !== undefined ? dropUp : _dropUp\n\t\t\t}\">\n\t\t\t<ng-content *ngIf=\"open\"></ng-content>\n\t\t</div>\n\t</div>\n\t<div\n\t\t*ngIf=\"helperText && !invalid && !warn\"\n\t\tclass=\"cds--form__helper-text\"\n\t\t[ngClass]=\"{'cds--form__helper-text--disabled': disabled}\">\n\t\t<ng-container *ngIf=\"!isTemplate(helperText)\">{{helperText}}</ng-container>\n\t\t<ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n\t</div>\n\t<div *ngIf=\"invalid\" class=\"cds--form-requirement\">\n\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{ invalidText }}</ng-container>\n\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t</div>\n\t<div *ngIf=\"!invalid && warn\" class=\"cds--form-requirement\">\n\t\t<ng-container *ngIf=\"!isTemplate(warnText)\">{{warnText}}</ng-container>\n\t\t<ng-template *ngIf=\"isTemplate(warnText)\" [ngTemplateOutlet]=\"warnText\"></ng-template>\n\t</div>\n</div>\n\t",
|
|
22697
|
+
"template": "<div class=\"cds--list-box__wrapper\">\n\t<label\n\t\t*ngIf=\"label\"\n\t\t[for]=\"id\"\n\t\t[id]=\"labelId\"\n\t\tclass=\"cds--label\"\n\t\t[ngClass]=\"{\n\t\t\t'cds--label--disabled': disabled,\n\t\t\t'cds--visually-hidden': hideLabel\n\t\t}\">\n\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t<ng-template *ngIf=\"isTemplate(label)\" [ngTemplateOutlet]=\"label\"></ng-template>\n\t</label>\n\t<div\n\t\t#listbox\n\t\t[ngClass]=\"{\n\t\t\t'cds--multi-select cds--multi-select--filterable': type === 'multi',\n\t\t\t'cds--list-box--light': theme === 'light',\n\t\t\t'cds--list-box--expanded': open,\n\t\t\t'cds--list-box--sm': size === 'sm',\n\t\t\t'cds--list-box--md': size === 'md',\n\t\t\t'cds--list-box--lg': size === 'lg',\n\t\t\t'cds--list-box--disabled': disabled,\n\t\t\t'cds--combo-box--readonly': readonly,\n\t\t\t'cds--combo-box--warning cds--list-box--warning': warn\n\t\t}\"\n\t\tclass=\"cds--list-box cds--combo-box\"\n\t\t[attr.data-invalid]=\"(invalid ? true : null)\">\n\t\t<div\n\t\t\tclass=\"cds--list-box__field\"\n\t\t\t(click)=\"toggleDropdown()\"\n\t\t\t(blur)=\"onBlur()\">\n\t\t\t<div\n\t\t\t\t*ngIf=\"type === 'multi' && pills.length > 0\"\n\t\t\t\tclass=\"cds--tag cds--tag--filter cds--tag--high-contrast\"\n\t\t\t\t[ngClass]=\"{'cds--tag--disabled': disabled || readonly}\">\n\t\t\t\t<span class=\"cds--tag__label\">{{ pills.length }}</span>\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t(click)=\"clearSelected($event)\"\n\t\t\t\t\t(blur)=\"onBlur()\"\n\t\t\t\t\t(keydown.enter)=\"clearSelected($event)\"\n\t\t\t\t\tclass=\"cds--tag__close-icon\"\n\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t[title]=\"clearSelectionsTitle\"\n\t\t\t\t\t[disabled]=\"disabled || readonly\"\n\t\t\t\t\t[attr.aria-label]=\"clearSelectionAria\">\n\t\t\t\t\t<svg\n\t\t\t\t\t\tfocusable=\"false\"\n\t\t\t\t\t\tpreserveAspectRatio=\"xMidYMid meet\"\n\t\t\t\t\t\tstyle=\"will-change: transform;\"\n\t\t\t\t\t\trole=\"img\"\n\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\twidth=\"16\"\n\t\t\t\t\t\theight=\"16\"\n\t\t\t\t\t\tviewBox=\"0 0 16 16\"\n\t\t\t\t\t\taria-hidden=\"true\">\n\t\t\t\t\t\t<path d=\"M12 4.7l-.7-.7L8 7.3 4.7 4l-.7.7L7.3 8 4 11.3l.7.7L8 8.7l3.3 3.3.7-.7L8.7 8z\"></path>\n\t\t\t\t\t</svg>\n\t\t\t\t</button>\n\t\t\t</div>\n\t\t\t<input\n\t\t\t\t#input\n\t\t\t\ttype=\"text\"\n\t\t\t\tautocomplete=\"off\"\n\t\t\t\trole=\"combobox\"\n\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t[readOnly]=\"readonly\"\n\t\t\t\t(input)=\"onSearch($event.target.value)\"\n\t\t\t\t(blur)=\"onBlur()\"\n\t\t\t\t(keydown.enter)=\"onSubmit($event)\"\n\t\t\t\t[value]=\"selectedValue\"\n\t\t\t\tclass=\"cds--text-input\"\n\t\t\t\t[ngClass]=\"{'cds--text-input--empty': !showClearButton}\"\n\t\t\t\ttabindex=\"0\"\n\t\t\t\t[id]=\"id\"\n\t\t\t\t[attr.aria-labelledby]=\"labelId\"\n\t\t\t\t[attr.aria-expanded]=\"open\"\n\t\t\t\taria-haspopup=\"listbox\"\n\t\t\t\t[attr.maxlength]=\"maxLength\"\n\t\t\t\t[attr.aria-controls]=\"open ? view?.listId : null\"\n\t\t\t\t[attr.aria-autocomplete]=\"autocomplete\"\n\t\t\t\t[placeholder]=\"placeholder\"/>\n\t\t\t<svg\n\t\t\t\t*ngIf=\"invalid\"\n\t\t\t\tcdsIcon=\"warning--filled\"\n\t\t\t\tsize=\"16\"\n\t\t\t\tclass=\"cds--list-box__invalid-icon\">\n\t\t\t</svg>\n\t\t\t<svg\n\t\t\t\t*ngIf=\"!invalid && warn\"\n\t\t\t\tcdsIcon=\"warning--alt--filled\"\n\t\t\t\tsize=\"16\"\n\t\t\t\tclass=\"cds--list-box__invalid-icon cds--list-box__invalid-icon--warning\">\n\t\t\t</svg>\n\t\t\t<div\n\t\t\t\t*ngIf=\"showClearButton\"\n\t\t\t\trole=\"button\"\n\t\t\t\tclass=\"cds--list-box__selection\"\n\t\t\t\ttabindex=\"0\"\n\t\t\t\t[attr.aria-label]=\"clearSelectionAria\"\n\t\t\t\t[title]=\"clearSelectionTitle\"\n\t\t\t\t(keyup.enter)=\"clearInput($event)\"\n\t\t\t\t(click)=\"clearInput($event)\"\n\t\t\t\t(blur)=\"onBlur()\">\n\t\t\t\t<svg cdsIcon=\"close\" size=\"16\"></svg>\n\t\t\t</div>\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\trole=\"button\"\n\t\t\t\tclass=\"cds--list-box__menu-icon\"\n\t\t\t\ttabindex=\"-1\"\n\t\t\t\t[title]=\"open ? closeMenuAria : openMenuAria\"\n\t\t\t\t[attr.aria-label]=\"open ? closeMenuAria : openMenuAria\"\n\t\t\t\t[ngClass]=\"{'cds--list-box__menu-icon--open': open}\">\n\t\t\t\t<svg cdsIcon=\"chevron--down\" size=\"16\"></svg>\n\t\t\t</button>\n\t\t</div>\n\t\t<div\n\t\t\t#dropdownMenu\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--list-box--up': this.dropUp !== null && this.dropUp !== undefined ? dropUp : _dropUp\n\t\t\t}\">\n\t\t\t<ng-content *ngIf=\"open\"></ng-content>\n\t\t</div>\n\t</div>\n\t<div\n\t\t*ngIf=\"helperText && !invalid && !warn\"\n\t\tclass=\"cds--form__helper-text\"\n\t\t[ngClass]=\"{'cds--form__helper-text--disabled': disabled}\">\n\t\t<ng-container *ngIf=\"!isTemplate(helperText)\">{{helperText}}</ng-container>\n\t\t<ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n\t</div>\n\t<div *ngIf=\"invalid\" class=\"cds--form-requirement\">\n\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{ invalidText }}</ng-container>\n\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t</div>\n\t<div *ngIf=\"!invalid && warn\" class=\"cds--form-requirement\">\n\t\t<ng-container *ngIf=\"!isTemplate(warnText)\">{{warnText}}</ng-container>\n\t\t<ng-template *ngIf=\"isTemplate(warnText)\" [ngTemplateOutlet]=\"warnText\"></ng-template>\n\t</div>\n</div>\n\t",
|
|
22698
22698
|
"templateUrl": [],
|
|
22699
22699
|
"viewProviders": [],
|
|
22700
22700
|
"hostDirectives": [],
|
|
@@ -22706,7 +22706,7 @@
|
|
|
22706
22706
|
"deprecationMessage": "",
|
|
22707
22707
|
"rawdescription": "\n\nset to `true` to place the dropdown view inline with the component\n",
|
|
22708
22708
|
"description": "<p>set to <code>true</code> to place the dropdown view inline with the component</p>\n",
|
|
22709
|
-
"line":
|
|
22709
|
+
"line": 322,
|
|
22710
22710
|
"type": "boolean",
|
|
22711
22711
|
"decorators": []
|
|
22712
22712
|
},
|
|
@@ -22717,7 +22717,7 @@
|
|
|
22717
22717
|
"deprecationMessage": "",
|
|
22718
22718
|
"rawdescription": "\n\nSpecify aria-autocomplete attribute of text input.\n\"list\", is the expected value for a combobox that invokes a drop-down list\n",
|
|
22719
22719
|
"description": "<p>Specify aria-autocomplete attribute of text input.\n"list", is the expected value for a combobox that invokes a drop-down list</p>\n",
|
|
22720
|
-
"line":
|
|
22720
|
+
"line": 358,
|
|
22721
22721
|
"type": "string",
|
|
22722
22722
|
"decorators": []
|
|
22723
22723
|
},
|
|
@@ -22727,7 +22727,7 @@
|
|
|
22727
22727
|
"deprecationMessage": "",
|
|
22728
22728
|
"rawdescription": "\n\nValue to display for accessibility purposes on the clear the selected item icon, when single is selected\n",
|
|
22729
22729
|
"description": "<p>Value to display for accessibility purposes on the clear the selected item icon, when single is selected</p>\n",
|
|
22730
|
-
"line":
|
|
22730
|
+
"line": 258,
|
|
22731
22731
|
"type": "string | Observable",
|
|
22732
22732
|
"decorators": []
|
|
22733
22733
|
},
|
|
@@ -22737,7 +22737,7 @@
|
|
|
22737
22737
|
"deprecationMessage": "",
|
|
22738
22738
|
"rawdescription": "\n\nValue to display for accessibility purposes to clear selections, when multi is selected\n",
|
|
22739
22739
|
"description": "<p>Value to display for accessibility purposes to clear selections, when multi is selected</p>\n",
|
|
22740
|
-
"line":
|
|
22740
|
+
"line": 238,
|
|
22741
22741
|
"type": "string | Observable",
|
|
22742
22742
|
"decorators": []
|
|
22743
22743
|
},
|
|
@@ -22747,7 +22747,7 @@
|
|
|
22747
22747
|
"deprecationMessage": "",
|
|
22748
22748
|
"rawdescription": "\n\nValue to display on the clear selections icon, when multi is selected\n",
|
|
22749
22749
|
"description": "<p>Value to display on the clear selections icon, when multi is selected</p>\n",
|
|
22750
|
-
"line":
|
|
22750
|
+
"line": 228,
|
|
22751
22751
|
"type": "string | Observable",
|
|
22752
22752
|
"decorators": []
|
|
22753
22753
|
},
|
|
@@ -22757,7 +22757,7 @@
|
|
|
22757
22757
|
"deprecationMessage": "",
|
|
22758
22758
|
"rawdescription": "\n\nValue to display on the clear the selected item icon, when single is selected\n",
|
|
22759
22759
|
"description": "<p>Value to display on the clear the selected item icon, when single is selected</p>\n",
|
|
22760
|
-
"line":
|
|
22760
|
+
"line": 248,
|
|
22761
22761
|
"type": "string | Observable",
|
|
22762
22762
|
"decorators": []
|
|
22763
22763
|
},
|
|
@@ -22767,7 +22767,7 @@
|
|
|
22767
22767
|
"deprecationMessage": "",
|
|
22768
22768
|
"rawdescription": "\n\nValue to display for accessibility purposes on the combobox control menu when opened\n",
|
|
22769
22769
|
"description": "<p>Value to display for accessibility purposes on the combobox control menu when opened</p>\n",
|
|
22770
|
-
"line":
|
|
22770
|
+
"line": 218,
|
|
22771
22771
|
"type": "string | Observable",
|
|
22772
22772
|
"decorators": []
|
|
22773
22773
|
},
|
|
@@ -22778,7 +22778,7 @@
|
|
|
22778
22778
|
"deprecationMessage": "",
|
|
22779
22779
|
"rawdescription": "\n\nSet to `true` to disable combobox.\n",
|
|
22780
22780
|
"description": "<p>Set to <code>true</code> to disable combobox.</p>\n",
|
|
22781
|
-
"line":
|
|
22781
|
+
"line": 366,
|
|
22782
22782
|
"type": "boolean",
|
|
22783
22783
|
"decorators": []
|
|
22784
22784
|
},
|
|
@@ -22788,7 +22788,7 @@
|
|
|
22788
22788
|
"deprecationMessage": "",
|
|
22789
22789
|
"rawdescription": "\n\nOverrides the automatic dropUp.\n",
|
|
22790
22790
|
"description": "<p>Overrides the automatic dropUp.</p>\n",
|
|
22791
|
-
"line":
|
|
22791
|
+
"line": 362,
|
|
22792
22792
|
"type": "boolean",
|
|
22793
22793
|
"decorators": []
|
|
22794
22794
|
},
|
|
@@ -22798,7 +22798,7 @@
|
|
|
22798
22798
|
"deprecationMessage": "",
|
|
22799
22799
|
"rawdescription": "\n\nSets the optional helper text.\n",
|
|
22800
22800
|
"description": "<p>Sets the optional helper text.</p>\n",
|
|
22801
|
-
"line":
|
|
22801
|
+
"line": 318,
|
|
22802
22802
|
"type": "string | TemplateRef<any>",
|
|
22803
22803
|
"decorators": []
|
|
22804
22804
|
},
|
|
@@ -22809,7 +22809,7 @@
|
|
|
22809
22809
|
"deprecationMessage": "",
|
|
22810
22810
|
"rawdescription": "\n\nHide label while keeping it accessible for screen readers\n",
|
|
22811
22811
|
"description": "<p>Hide label while keeping it accessible for screen readers</p>\n",
|
|
22812
|
-
"line":
|
|
22812
|
+
"line": 314,
|
|
22813
22813
|
"type": "boolean",
|
|
22814
22814
|
"decorators": []
|
|
22815
22815
|
},
|
|
@@ -22818,7 +22818,7 @@
|
|
|
22818
22818
|
"defaultValue": "`dropdown-${ComboBox.comboBoxCount++}`",
|
|
22819
22819
|
"deprecated": false,
|
|
22820
22820
|
"deprecationMessage": "",
|
|
22821
|
-
"line":
|
|
22821
|
+
"line": 266,
|
|
22822
22822
|
"type": "string",
|
|
22823
22823
|
"decorators": []
|
|
22824
22824
|
},
|
|
@@ -22829,7 +22829,7 @@
|
|
|
22829
22829
|
"deprecationMessage": "",
|
|
22830
22830
|
"rawdescription": "\n\nSet to `true` to show the invalid state.\n",
|
|
22831
22831
|
"description": "<p>Set to <code>true</code> to show the invalid state.</p>\n",
|
|
22832
|
-
"line":
|
|
22832
|
+
"line": 326,
|
|
22833
22833
|
"type": "boolean",
|
|
22834
22834
|
"decorators": []
|
|
22835
22835
|
},
|
|
@@ -22839,7 +22839,7 @@
|
|
|
22839
22839
|
"deprecationMessage": "",
|
|
22840
22840
|
"rawdescription": "\n\nValue displayed if combobox is in an invalid state.\n",
|
|
22841
22841
|
"description": "<p>Value displayed if combobox is in an invalid state.</p>\n",
|
|
22842
|
-
"line":
|
|
22842
|
+
"line": 330,
|
|
22843
22843
|
"type": "string | TemplateRef<any>",
|
|
22844
22844
|
"decorators": []
|
|
22845
22845
|
},
|
|
@@ -22850,7 +22850,7 @@
|
|
|
22850
22850
|
"deprecationMessage": "",
|
|
22851
22851
|
"rawdescription": "\n\nList of items to fill the content with.\n\n**Example:**\n```javascript\nitems = [\n\t\t{\n\t\t\tcontent: \"Abacus\",\n\t\t\tselected: false\n\t\t},\n\t\t{\n\t\t\tcontent: \"Byte\",\n\t\t\tselected: false,\n\t\t},\n\t\t{\n\t\t\tcontent: \"Computer\",\n\t\t\tselected: false\n\t\t},\n\t\t{\n\t\t\tcontent: \"Digital\",\n\t\t\tselected: false\n\t\t}\n];\n```\n\n",
|
|
22852
22852
|
"description": "<p>List of items to fill the content with.</p>\n<p><strong>Example:</strong></p>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-javascript\">items = [\n {\n content: "Abacus",\n selected: false\n },\n {\n content: "Byte",\n selected: false,\n },\n {\n content: "Computer",\n selected: false\n },\n {\n content: "Digital",\n selected: false\n }\n];</code></pre></div>",
|
|
22853
|
-
"line":
|
|
22853
|
+
"line": 294,
|
|
22854
22854
|
"type": "Array<ListItem>",
|
|
22855
22855
|
"decorators": []
|
|
22856
22856
|
},
|
|
@@ -22860,7 +22860,7 @@
|
|
|
22860
22860
|
"deprecationMessage": "",
|
|
22861
22861
|
"rawdescription": "\n\nSpecifies the property to be used as the return value to `ngModel`\n",
|
|
22862
22862
|
"description": "<p>Specifies the property to be used as the return value to <code>ngModel</code></p>\n",
|
|
22863
|
-
"line":
|
|
22863
|
+
"line": 306,
|
|
22864
22864
|
"type": "string",
|
|
22865
22865
|
"decorators": []
|
|
22866
22866
|
},
|
|
@@ -22870,7 +22870,7 @@
|
|
|
22870
22870
|
"deprecationMessage": "",
|
|
22871
22871
|
"rawdescription": "\n\nLabel for the combobox.\n",
|
|
22872
22872
|
"description": "<p>Label for the combobox.</p>\n",
|
|
22873
|
-
"line":
|
|
22873
|
+
"line": 310,
|
|
22874
22874
|
"type": "string | TemplateRef<any>",
|
|
22875
22875
|
"decorators": []
|
|
22876
22876
|
},
|
|
@@ -22879,7 +22879,7 @@
|
|
|
22879
22879
|
"defaultValue": "`dropdown-label-${ComboBox.comboBoxCount++}`",
|
|
22880
22880
|
"deprecated": false,
|
|
22881
22881
|
"deprecationMessage": "",
|
|
22882
|
-
"line":
|
|
22882
|
+
"line": 267,
|
|
22883
22883
|
"type": "string",
|
|
22884
22884
|
"decorators": []
|
|
22885
22885
|
},
|
|
@@ -22890,7 +22890,7 @@
|
|
|
22890
22890
|
"deprecationMessage": "",
|
|
22891
22891
|
"rawdescription": "\n\nMax length value to limit input characters\n",
|
|
22892
22892
|
"description": "<p>Max length value to limit input characters</p>\n",
|
|
22893
|
-
"line":
|
|
22893
|
+
"line": 342,
|
|
22894
22894
|
"type": "number",
|
|
22895
22895
|
"decorators": []
|
|
22896
22896
|
},
|
|
@@ -22900,7 +22900,7 @@
|
|
|
22900
22900
|
"deprecationMessage": "",
|
|
22901
22901
|
"rawdescription": "\n\nValue to display for accessibility purposes on the combobox control menu when closed\n",
|
|
22902
22902
|
"description": "<p>Value to display for accessibility purposes on the combobox control menu when closed</p>\n",
|
|
22903
|
-
"line":
|
|
22903
|
+
"line": 208,
|
|
22904
22904
|
"type": "string | Observable",
|
|
22905
22905
|
"decorators": []
|
|
22906
22906
|
},
|
|
@@ -22910,10 +22910,21 @@
|
|
|
22910
22910
|
"deprecationMessage": "",
|
|
22911
22911
|
"rawdescription": "\n\nText to show when nothing is selected.\n",
|
|
22912
22912
|
"description": "<p>Text to show when nothing is selected.</p>\n",
|
|
22913
|
-
"line":
|
|
22913
|
+
"line": 198,
|
|
22914
22914
|
"type": "string | Observable",
|
|
22915
22915
|
"decorators": []
|
|
22916
22916
|
},
|
|
22917
|
+
{
|
|
22918
|
+
"name": "readonly",
|
|
22919
|
+
"defaultValue": "false",
|
|
22920
|
+
"deprecated": false,
|
|
22921
|
+
"deprecationMessage": "",
|
|
22922
|
+
"rawdescription": "\n\nSet to `true` for readonly state.\n",
|
|
22923
|
+
"description": "<p>Set to <code>true</code> for readonly state.</p>\n",
|
|
22924
|
+
"line": 370,
|
|
22925
|
+
"type": "boolean",
|
|
22926
|
+
"decorators": []
|
|
22927
|
+
},
|
|
22917
22928
|
{
|
|
22918
22929
|
"name": "selectionFeedback",
|
|
22919
22930
|
"defaultValue": "\"top-after-reopen\"",
|
|
@@ -22921,7 +22932,7 @@
|
|
|
22921
22932
|
"deprecationMessage": "",
|
|
22922
22933
|
"rawdescription": "\n\nSpecify feedback (mode) of the selection.\n`top`: selected item jumps to top\n`fixed`: selected item stays at its position\n`top-after-reopen`: selected item jump to top after reopen dropdown\n",
|
|
22923
22934
|
"description": "<p>Specify feedback (mode) of the selection.\n<code>top</code>: selected item jumps to top\n<code>fixed</code>: selected item stays at its position\n<code>top-after-reopen</code>: selected item jump to top after reopen dropdown</p>\n",
|
|
22924
|
-
"line":
|
|
22935
|
+
"line": 353,
|
|
22925
22936
|
"type": "\"top\" | \"fixed\" | \"top-after-reopen\"",
|
|
22926
22937
|
"decorators": []
|
|
22927
22938
|
},
|
|
@@ -22932,7 +22943,7 @@
|
|
|
22932
22943
|
"deprecationMessage": "",
|
|
22933
22944
|
"rawdescription": "\n\nCombo box render size.\n",
|
|
22934
22945
|
"description": "<p>Combo box render size.</p>\n",
|
|
22935
|
-
"line":
|
|
22946
|
+
"line": 302,
|
|
22936
22947
|
"type": "\"sm\" | \"md\" | \"lg\"",
|
|
22937
22948
|
"decorators": []
|
|
22938
22949
|
},
|
|
@@ -22943,15 +22954,15 @@
|
|
|
22943
22954
|
"deprecationMessage": "since v5 - Use `cdsLayer` directive instead",
|
|
22944
22955
|
"jsdoctags": [
|
|
22945
22956
|
{
|
|
22946
|
-
"pos":
|
|
22947
|
-
"end":
|
|
22957
|
+
"pos": 9868,
|
|
22958
|
+
"end": 9926,
|
|
22948
22959
|
"flags": 16842752,
|
|
22949
22960
|
"modifierFlagsCache": 0,
|
|
22950
22961
|
"transformFlags": 0,
|
|
22951
22962
|
"kind": 338,
|
|
22952
22963
|
"tagName": {
|
|
22953
|
-
"pos":
|
|
22954
|
-
"end":
|
|
22964
|
+
"pos": 9869,
|
|
22965
|
+
"end": 9879,
|
|
22955
22966
|
"flags": 16842752,
|
|
22956
22967
|
"modifierFlagsCache": 0,
|
|
22957
22968
|
"transformFlags": 0,
|
|
@@ -22961,7 +22972,7 @@
|
|
|
22961
22972
|
"comment": "<p>since v5 - Use <code>cdsLayer</code> directive instead</p>\n"
|
|
22962
22973
|
}
|
|
22963
22974
|
],
|
|
22964
|
-
"line":
|
|
22975
|
+
"line": 346,
|
|
22965
22976
|
"type": "\"light\" | \"dark\"",
|
|
22966
22977
|
"decorators": []
|
|
22967
22978
|
},
|
|
@@ -22972,7 +22983,7 @@
|
|
|
22972
22983
|
"deprecationMessage": "",
|
|
22973
22984
|
"rawdescription": "\n\nCombo box type (supporting single or multi selection of items).\n",
|
|
22974
22985
|
"description": "<p>Combo box type (supporting single or multi selection of items).</p>\n",
|
|
22975
|
-
"line":
|
|
22986
|
+
"line": 298,
|
|
22976
22987
|
"type": "\"single\" | \"multi\"",
|
|
22977
22988
|
"decorators": []
|
|
22978
22989
|
},
|
|
@@ -22983,7 +22994,7 @@
|
|
|
22983
22994
|
"deprecationMessage": "",
|
|
22984
22995
|
"rawdescription": "\n\nSet to `true` to show a warning (contents set by warnText)\n",
|
|
22985
22996
|
"description": "<p>Set to <code>true</code> to show a warning (contents set by warnText)</p>\n",
|
|
22986
|
-
"line":
|
|
22997
|
+
"line": 334,
|
|
22987
22998
|
"type": "boolean",
|
|
22988
22999
|
"decorators": []
|
|
22989
23000
|
},
|
|
@@ -22993,7 +23004,7 @@
|
|
|
22993
23004
|
"deprecationMessage": "",
|
|
22994
23005
|
"rawdescription": "\n\nSets the warning text\n",
|
|
22995
23006
|
"description": "<p>Sets the warning text</p>\n",
|
|
22996
|
-
"line":
|
|
23007
|
+
"line": 338,
|
|
22997
23008
|
"type": "string | TemplateRef<any>",
|
|
22998
23009
|
"decorators": []
|
|
22999
23010
|
}
|
|
@@ -23006,7 +23017,7 @@
|
|
|
23006
23017
|
"deprecationMessage": "",
|
|
23007
23018
|
"rawdescription": "\nEmits an event when the clear button is clicked.",
|
|
23008
23019
|
"description": "<p>Emits an event when the clear button is clicked.</p>\n",
|
|
23009
|
-
"line":
|
|
23020
|
+
"line": 422,
|
|
23010
23021
|
"type": "EventEmitter"
|
|
23011
23022
|
},
|
|
23012
23023
|
{
|
|
@@ -23016,7 +23027,7 @@
|
|
|
23016
23027
|
"deprecationMessage": "",
|
|
23017
23028
|
"rawdescription": "\nEmits an empty event when the menu is closed",
|
|
23018
23029
|
"description": "<p>Emits an empty event when the menu is closed</p>\n",
|
|
23019
|
-
"line":
|
|
23030
|
+
"line": 418,
|
|
23020
23031
|
"type": "EventEmitter"
|
|
23021
23032
|
},
|
|
23022
23033
|
{
|
|
@@ -23026,7 +23037,7 @@
|
|
|
23026
23037
|
"deprecationMessage": "",
|
|
23027
23038
|
"rawdescription": "\nEmits the search string from the input",
|
|
23028
23039
|
"description": "<p>Emits the search string from the input</p>\n",
|
|
23029
|
-
"line":
|
|
23040
|
+
"line": 420,
|
|
23030
23041
|
"type": "EventEmitter"
|
|
23031
23042
|
},
|
|
23032
23043
|
{
|
|
@@ -23036,7 +23047,7 @@
|
|
|
23036
23047
|
"deprecationMessage": "",
|
|
23037
23048
|
"rawdescription": "\n\nEmits a ListItem\n\nExample:\n```javascript\n{\n\t\tcontent: \"one\",\n\t\tselected: true\n}\n```\n",
|
|
23038
23049
|
"description": "<p>Emits a ListItem</p>\n<p>Example:</p>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-javascript\">{\n content: "one",\n selected: true\n}</code></pre></div>",
|
|
23039
|
-
"line":
|
|
23050
|
+
"line": 382,
|
|
23040
23051
|
"type": "EventEmitter"
|
|
23041
23052
|
},
|
|
23042
23053
|
{
|
|
@@ -23046,7 +23057,7 @@
|
|
|
23046
23057
|
"deprecationMessage": "",
|
|
23047
23058
|
"rawdescription": "\n\nIntended to be used to add items to the list.\n\nEmits an event that includes the current item list, the suggested index for the new item, and a simple ListItem\n\nExample:\n```javascript\n\t{\n\t\titems: [{content: \"one\", selected: true}, {content: \"two\", selected: true}],\n\t\tindex: 1,\n\t\tvalue: {\n\t\t\tcontent: \"some user string\",\n\t\t\tselected: false\n\t\t}\n\t}\n```\n\n\nExample:\n```javascript\n{\n\tafter: 1,\n\tvalue: \"some user string\"\n}\n```\n",
|
|
23048
23059
|
"description": "<p>Intended to be used to add items to the list.</p>\n<p>Emits an event that includes the current item list, the suggested index for the new item, and a simple ListItem</p>\n<p>Example:</p>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-javascript\"> {\n items: [{content: "one", selected: true}, {content: "two", selected: true}],\n index: 1,\n value: {\n content: "some user string",\n selected: false\n }\n }</code></pre></div><p>Example:</p>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-javascript\">{\n after: 1,\n value: "some user string"\n}</code></pre></div>",
|
|
23049
|
-
"line":
|
|
23060
|
+
"line": 409,
|
|
23050
23061
|
"type": "EventEmitter"
|
|
23051
23062
|
}
|
|
23052
23063
|
],
|
|
@@ -23059,7 +23070,7 @@
|
|
|
23059
23070
|
"type": "",
|
|
23060
23071
|
"optional": false,
|
|
23061
23072
|
"description": "<p>controls whether the <code>drop-up</code> class is applied</p>\n",
|
|
23062
|
-
"line":
|
|
23073
|
+
"line": 445,
|
|
23063
23074
|
"rawdescription": "\n\ncontrols whether the `drop-up` class is applied\n"
|
|
23064
23075
|
},
|
|
23065
23076
|
{
|
|
@@ -23070,7 +23081,7 @@
|
|
|
23070
23081
|
"type": "number",
|
|
23071
23082
|
"optional": false,
|
|
23072
23083
|
"description": "",
|
|
23073
|
-
"line":
|
|
23084
|
+
"line": 265,
|
|
23074
23085
|
"modifierKind": [
|
|
23075
23086
|
126
|
|
23076
23087
|
]
|
|
@@ -23083,7 +23094,7 @@
|
|
|
23083
23094
|
"type": "string",
|
|
23084
23095
|
"optional": false,
|
|
23085
23096
|
"description": "",
|
|
23086
|
-
"line":
|
|
23097
|
+
"line": 429,
|
|
23087
23098
|
"decorators": [
|
|
23088
23099
|
{
|
|
23089
23100
|
"name": "HostBinding",
|
|
@@ -23101,7 +23112,7 @@
|
|
|
23101
23112
|
"type": "",
|
|
23102
23113
|
"optional": false,
|
|
23103
23114
|
"description": "",
|
|
23104
|
-
"line":
|
|
23115
|
+
"line": 425,
|
|
23105
23116
|
"decorators": [
|
|
23106
23117
|
{
|
|
23107
23118
|
"name": "ViewChild",
|
|
@@ -23120,7 +23131,7 @@
|
|
|
23120
23131
|
"type": "",
|
|
23121
23132
|
"optional": false,
|
|
23122
23133
|
"description": "",
|
|
23123
|
-
"line":
|
|
23134
|
+
"line": 428,
|
|
23124
23135
|
"decorators": [
|
|
23125
23136
|
{
|
|
23126
23137
|
"name": "HostBinding",
|
|
@@ -23138,7 +23149,7 @@
|
|
|
23138
23149
|
"type": "ElementRef",
|
|
23139
23150
|
"optional": false,
|
|
23140
23151
|
"description": "",
|
|
23141
|
-
"line":
|
|
23152
|
+
"line": 426,
|
|
23142
23153
|
"decorators": [
|
|
23143
23154
|
{
|
|
23144
23155
|
"name": "ViewChild",
|
|
@@ -23157,7 +23168,7 @@
|
|
|
23157
23168
|
"type": "",
|
|
23158
23169
|
"optional": false,
|
|
23159
23170
|
"description": "",
|
|
23160
|
-
"line":
|
|
23171
|
+
"line": 441
|
|
23161
23172
|
},
|
|
23162
23173
|
{
|
|
23163
23174
|
"name": "listbox",
|
|
@@ -23166,7 +23177,7 @@
|
|
|
23166
23177
|
"type": "ElementRef",
|
|
23167
23178
|
"optional": false,
|
|
23168
23179
|
"description": "",
|
|
23169
|
-
"line":
|
|
23180
|
+
"line": 427,
|
|
23170
23181
|
"decorators": [
|
|
23171
23182
|
{
|
|
23172
23183
|
"name": "ViewChild",
|
|
@@ -23185,7 +23196,7 @@
|
|
|
23185
23196
|
"type": "",
|
|
23186
23197
|
"optional": false,
|
|
23187
23198
|
"description": "",
|
|
23188
|
-
"line":
|
|
23199
|
+
"line": 431,
|
|
23189
23200
|
"modifierKind": [
|
|
23190
23201
|
125
|
|
23191
23202
|
]
|
|
@@ -23198,7 +23209,7 @@
|
|
|
23198
23209
|
"type": "",
|
|
23199
23210
|
"optional": false,
|
|
23200
23211
|
"description": "",
|
|
23201
|
-
"line":
|
|
23212
|
+
"line": 440
|
|
23202
23213
|
},
|
|
23203
23214
|
{
|
|
23204
23215
|
"name": "pills",
|
|
@@ -23208,7 +23219,7 @@
|
|
|
23208
23219
|
"type": "[]",
|
|
23209
23220
|
"optional": false,
|
|
23210
23221
|
"description": "<p>Selected items for multi-select combo-boxes.</p>\n",
|
|
23211
|
-
"line":
|
|
23222
|
+
"line": 436,
|
|
23212
23223
|
"rawdescription": "\nSelected items for multi-select combo-boxes.",
|
|
23213
23224
|
"modifierKind": [
|
|
23214
23225
|
125
|
|
@@ -23222,7 +23233,7 @@
|
|
|
23222
23233
|
"type": "string",
|
|
23223
23234
|
"optional": false,
|
|
23224
23235
|
"description": "<p>used to update the displayValue</p>\n",
|
|
23225
|
-
"line":
|
|
23236
|
+
"line": 438,
|
|
23226
23237
|
"rawdescription": "\nused to update the displayValue",
|
|
23227
23238
|
"modifierKind": [
|
|
23228
23239
|
125
|
|
@@ -23236,7 +23247,7 @@
|
|
|
23236
23247
|
"type": "",
|
|
23237
23248
|
"optional": false,
|
|
23238
23249
|
"description": "",
|
|
23239
|
-
"line":
|
|
23250
|
+
"line": 433,
|
|
23240
23251
|
"modifierKind": [
|
|
23241
23252
|
125
|
|
23242
23253
|
]
|
|
@@ -23248,7 +23259,7 @@
|
|
|
23248
23259
|
"type": "AbstractDropdownView",
|
|
23249
23260
|
"optional": false,
|
|
23250
23261
|
"description": "<p>ContentChild reference to the instantiated dropdown list</p>\n",
|
|
23251
|
-
"line":
|
|
23262
|
+
"line": 424,
|
|
23252
23263
|
"rawdescription": "\nContentChild reference to the instantiated dropdown list",
|
|
23253
23264
|
"decorators": [
|
|
23254
23265
|
{
|
|
@@ -23268,7 +23279,7 @@
|
|
|
23268
23279
|
"optional": false,
|
|
23269
23280
|
"returnType": "void",
|
|
23270
23281
|
"typeParameters": [],
|
|
23271
|
-
"line":
|
|
23282
|
+
"line": 831,
|
|
23272
23283
|
"deprecated": false,
|
|
23273
23284
|
"deprecationMessage": "",
|
|
23274
23285
|
"rawdescription": "\n\nCreates the `Dropdown` list as an element that is appended to the DOM body.\n",
|
|
@@ -23280,7 +23291,7 @@
|
|
|
23280
23291
|
"optional": false,
|
|
23281
23292
|
"returnType": "void",
|
|
23282
23293
|
"typeParameters": [],
|
|
23283
|
-
"line":
|
|
23294
|
+
"line": 842,
|
|
23284
23295
|
"deprecated": false,
|
|
23285
23296
|
"deprecationMessage": "",
|
|
23286
23297
|
"rawdescription": "\n\nCreates the `Dropdown` list appending it to the dropdown parent object instead of the body.\n",
|
|
@@ -23299,7 +23310,7 @@
|
|
|
23299
23310
|
"optional": false,
|
|
23300
23311
|
"returnType": "void",
|
|
23301
23312
|
"typeParameters": [],
|
|
23302
|
-
"line":
|
|
23313
|
+
"line": 811,
|
|
23303
23314
|
"deprecated": false,
|
|
23304
23315
|
"deprecationMessage": "",
|
|
23305
23316
|
"rawdescription": "\n\nHandles keyboard events so users are controlling the `Dropdown` instead of unintentionally controlling outside elements.\n",
|
|
@@ -23322,7 +23333,7 @@
|
|
|
23322
23333
|
"optional": false,
|
|
23323
23334
|
"returnType": "void",
|
|
23324
23335
|
"typeParameters": [],
|
|
23325
|
-
"line":
|
|
23336
|
+
"line": 605,
|
|
23326
23337
|
"deprecated": false,
|
|
23327
23338
|
"deprecationMessage": ""
|
|
23328
23339
|
},
|
|
@@ -23339,7 +23350,7 @@
|
|
|
23339
23350
|
"optional": false,
|
|
23340
23351
|
"returnType": "void",
|
|
23341
23352
|
"typeParameters": [],
|
|
23342
|
-
"line":
|
|
23353
|
+
"line": 871,
|
|
23343
23354
|
"deprecated": false,
|
|
23344
23355
|
"deprecationMessage": "",
|
|
23345
23356
|
"rawdescription": "\n\nHandles clicks outside of the `Dropdown` list.\n",
|
|
@@ -23362,7 +23373,7 @@
|
|
|
23362
23373
|
"optional": false,
|
|
23363
23374
|
"returnType": "any",
|
|
23364
23375
|
"typeParameters": [],
|
|
23365
|
-
"line":
|
|
23376
|
+
"line": 851,
|
|
23366
23377
|
"deprecated": false,
|
|
23367
23378
|
"deprecationMessage": "",
|
|
23368
23379
|
"rawdescription": "\n\nDetects whether or not the `Dropdown` list is visible within all scrollable parents.\nThis can be overridden by passing in a value to the `dropUp` input.\n",
|
|
@@ -23381,7 +23392,7 @@
|
|
|
23381
23392
|
"optional": false,
|
|
23382
23393
|
"returnType": "void",
|
|
23383
23394
|
"typeParameters": [],
|
|
23384
|
-
"line":
|
|
23395
|
+
"line": 783,
|
|
23385
23396
|
"deprecated": false,
|
|
23386
23397
|
"deprecationMessage": "",
|
|
23387
23398
|
"jsdoctags": [
|
|
@@ -23409,7 +23420,7 @@
|
|
|
23409
23420
|
"optional": false,
|
|
23410
23421
|
"returnType": "void",
|
|
23411
23422
|
"typeParameters": [],
|
|
23412
|
-
"line":
|
|
23423
|
+
"line": 671,
|
|
23413
23424
|
"deprecated": false,
|
|
23414
23425
|
"deprecationMessage": "",
|
|
23415
23426
|
"modifierKind": [
|
|
@@ -23433,7 +23444,7 @@
|
|
|
23433
23444
|
"optional": false,
|
|
23434
23445
|
"returnType": "void",
|
|
23435
23446
|
"typeParameters": [],
|
|
23436
|
-
"line":
|
|
23447
|
+
"line": 691,
|
|
23437
23448
|
"deprecated": false,
|
|
23438
23449
|
"deprecationMessage": "",
|
|
23439
23450
|
"rawdescription": "\n\nCloses the dropdown and emits the close event.\n",
|
|
@@ -23455,7 +23466,7 @@
|
|
|
23455
23466
|
"optional": false,
|
|
23456
23467
|
"returnType": "void",
|
|
23457
23468
|
"typeParameters": [],
|
|
23458
|
-
"line":
|
|
23469
|
+
"line": 580,
|
|
23459
23470
|
"deprecated": false,
|
|
23460
23471
|
"deprecationMessage": "",
|
|
23461
23472
|
"rawdescription": "\n\nHandles `Escape/Tab` key closing the dropdown, and arrow up/down focus to/from the dropdown list.\n",
|
|
@@ -23494,7 +23505,7 @@
|
|
|
23494
23505
|
"optional": false,
|
|
23495
23506
|
"returnType": "boolean",
|
|
23496
23507
|
"typeParameters": [],
|
|
23497
|
-
"line":
|
|
23508
|
+
"line": 804,
|
|
23498
23509
|
"deprecated": false,
|
|
23499
23510
|
"deprecationMessage": "",
|
|
23500
23511
|
"modifierKind": [
|
|
@@ -23518,7 +23529,7 @@
|
|
|
23518
23529
|
"optional": false,
|
|
23519
23530
|
"returnType": "void",
|
|
23520
23531
|
"typeParameters": [],
|
|
23521
|
-
"line":
|
|
23532
|
+
"line": 642,
|
|
23522
23533
|
"deprecated": false,
|
|
23523
23534
|
"deprecationMessage": ""
|
|
23524
23535
|
},
|
|
@@ -23542,7 +23553,7 @@
|
|
|
23542
23553
|
"optional": false,
|
|
23543
23554
|
"returnType": "void",
|
|
23544
23555
|
"typeParameters": [],
|
|
23545
|
-
"line":
|
|
23556
|
+
"line": 739,
|
|
23546
23557
|
"deprecated": false,
|
|
23547
23558
|
"deprecationMessage": "",
|
|
23548
23559
|
"rawdescription": "\n\nSets the list group filter, and manages single select item selection.\n",
|
|
@@ -23585,7 +23596,7 @@
|
|
|
23585
23596
|
"optional": false,
|
|
23586
23597
|
"returnType": "void",
|
|
23587
23598
|
"typeParameters": [],
|
|
23588
|
-
"line":
|
|
23599
|
+
"line": 772,
|
|
23589
23600
|
"deprecated": false,
|
|
23590
23601
|
"deprecationMessage": "",
|
|
23591
23602
|
"rawdescription": "\n\nIntended to be used to add items to the list.\n",
|
|
@@ -23611,7 +23622,7 @@
|
|
|
23611
23622
|
"optional": false,
|
|
23612
23623
|
"returnType": "void",
|
|
23613
23624
|
"typeParameters": [],
|
|
23614
|
-
"line":
|
|
23625
|
+
"line": 705,
|
|
23615
23626
|
"deprecated": false,
|
|
23616
23627
|
"deprecationMessage": "",
|
|
23617
23628
|
"rawdescription": "\n\nOpens the dropdown.\n",
|
|
@@ -23633,7 +23644,7 @@
|
|
|
23633
23644
|
"optional": false,
|
|
23634
23645
|
"returnType": "void",
|
|
23635
23646
|
"typeParameters": [],
|
|
23636
|
-
"line":
|
|
23647
|
+
"line": 646,
|
|
23637
23648
|
"deprecated": false,
|
|
23638
23649
|
"deprecationMessage": "",
|
|
23639
23650
|
"jsdoctags": [
|
|
@@ -23661,7 +23672,7 @@
|
|
|
23661
23672
|
"optional": false,
|
|
23662
23673
|
"returnType": "void",
|
|
23663
23674
|
"typeParameters": [],
|
|
23664
|
-
"line":
|
|
23675
|
+
"line": 650,
|
|
23665
23676
|
"deprecated": false,
|
|
23666
23677
|
"deprecationMessage": "",
|
|
23667
23678
|
"jsdoctags": [
|
|
@@ -23689,7 +23700,7 @@
|
|
|
23689
23700
|
"optional": false,
|
|
23690
23701
|
"returnType": "void",
|
|
23691
23702
|
"typeParameters": [],
|
|
23692
|
-
"line":
|
|
23703
|
+
"line": 659,
|
|
23693
23704
|
"deprecated": false,
|
|
23694
23705
|
"deprecationMessage": "",
|
|
23695
23706
|
"rawdescription": "\n\n`ControlValueAccessor` method to programmatically disable the combobox.\n\nex: `this.formGroup.get(\"myCoolCombobox\").disable();`\n",
|
|
@@ -23712,7 +23723,7 @@
|
|
|
23712
23723
|
"optional": false,
|
|
23713
23724
|
"returnType": "void",
|
|
23714
23725
|
"typeParameters": [],
|
|
23715
|
-
"line":
|
|
23726
|
+
"line": 728,
|
|
23716
23727
|
"deprecated": false,
|
|
23717
23728
|
"deprecationMessage": "",
|
|
23718
23729
|
"rawdescription": "\n\nToggles the dropdown.\n",
|
|
@@ -23727,7 +23738,7 @@
|
|
|
23727
23738
|
"optional": false,
|
|
23728
23739
|
"returnType": "void",
|
|
23729
23740
|
"typeParameters": [],
|
|
23730
|
-
"line":
|
|
23741
|
+
"line": 666,
|
|
23731
23742
|
"deprecated": false,
|
|
23732
23743
|
"deprecationMessage": "",
|
|
23733
23744
|
"rawdescription": "\n\nCalled by `n-pill-input` when the selected pills have changed.\n",
|
|
@@ -23749,7 +23760,7 @@
|
|
|
23749
23760
|
"optional": false,
|
|
23750
23761
|
"returnType": "void",
|
|
23751
23762
|
"typeParameters": [],
|
|
23752
|
-
"line":
|
|
23763
|
+
"line": 610,
|
|
23753
23764
|
"deprecated": false,
|
|
23754
23765
|
"deprecationMessage": "",
|
|
23755
23766
|
"jsdoctags": [
|
|
@@ -23773,7 +23784,7 @@
|
|
|
23773
23784
|
"defaultValue": "true",
|
|
23774
23785
|
"deprecated": false,
|
|
23775
23786
|
"deprecationMessage": "",
|
|
23776
|
-
"line":
|
|
23787
|
+
"line": 428,
|
|
23777
23788
|
"type": "boolean",
|
|
23778
23789
|
"decorators": []
|
|
23779
23790
|
},
|
|
@@ -23782,7 +23793,7 @@
|
|
|
23782
23793
|
"defaultValue": "\"block\"",
|
|
23783
23794
|
"deprecated": false,
|
|
23784
23795
|
"deprecationMessage": "",
|
|
23785
|
-
"line":
|
|
23796
|
+
"line": 429,
|
|
23786
23797
|
"type": "string",
|
|
23787
23798
|
"decorators": []
|
|
23788
23799
|
}
|
|
@@ -23805,7 +23816,7 @@
|
|
|
23805
23816
|
"deprecationMessage": "",
|
|
23806
23817
|
"rawdescription": "\n\nHandles `Escape/Tab` key closing the dropdown, and arrow up/down focus to/from the dropdown list.\n",
|
|
23807
23818
|
"description": "<p>Handles <code>Escape/Tab</code> key closing the dropdown, and arrow up/down focus to/from the dropdown list.</p>\n",
|
|
23808
|
-
"line":
|
|
23819
|
+
"line": 580
|
|
23809
23820
|
}
|
|
23810
23821
|
],
|
|
23811
23822
|
"standalone": false,
|
|
@@ -23813,7 +23824,7 @@
|
|
|
23813
23824
|
"description": "<p>Get started with importing the module:</p>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-typescript\">import { ComboBoxModule } from 'carbon-components-angular';</code></pre></div><p>ComboBoxes are similar to dropdowns, except a combobox provides an input field for users to search items and (optionally) add their own.\nMulti-select comboboxes also provide "pills" of selected items.</p>\n<p><a href=\"../../?path=/story/components-combobox--basic\">See demo</a></p>\n",
|
|
23814
23825
|
"rawdescription": "\n\nGet started with importing the module:\n\n```typescript\nimport { ComboBoxModule } from 'carbon-components-angular';\n```\n\nComboBoxes are similar to dropdowns, except a combobox provides an input field for users to search items and (optionally) add their own.\nMulti-select comboboxes also provide \"pills\" of selected items.\n\n[See demo](../../?path=/story/components-combobox--basic)\n",
|
|
23815
23826
|
"type": "component",
|
|
23816
|
-
"sourceCode": "import {\n\tComponent,\n\tOnChanges,\n\tContentChild,\n\tInput,\n\tOutput,\n\tHostListener,\n\tElementRef,\n\tViewChild,\n\tEventEmitter,\n\tAfterViewInit,\n\tAfterContentInit,\n\tHostBinding,\n\tTemplateRef,\n\tOnDestroy\n} from \"@angular/core\";\nimport { AbstractDropdownView, DropdownService } from \"carbon-components-angular/dropdown\";\nimport { ListItem } from \"carbon-components-angular/dropdown\";\nimport { NG_VALUE_ACCESSOR } from \"@angular/forms\";\nimport { filter } from \"rxjs/operators\";\nimport {\n\tgetScrollableParents,\n\thasScrollableParents\n} from \"carbon-components-angular/utils\";\nimport { I18n, Overridable } from \"carbon-components-angular/i18n\";\nimport { Observable } from \"rxjs\";\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { ComboBoxModule } from 'carbon-components-angular';\n * ```\n *\n * ComboBoxes are similar to dropdowns, except a combobox provides an input field for users to search items and (optionally) add their own.\n * Multi-select comboboxes also provide \"pills\" of selected items.\n *\n * [See demo](../../?path=/story/components-combobox--basic)\n */\n@Component({\n\tselector: \"cds-combo-box, ibm-combo-box\",\n\ttemplate: `\n\t\t<div class=\"cds--list-box__wrapper\">\n\t\t\t<label\n\t\t\t\t*ngIf=\"label\"\n\t\t\t\t[for]=\"id\"\n\t\t\t\t[id]=\"labelId\"\n\t\t\t\tclass=\"cds--label\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--label--disabled': disabled,\n\t\t\t\t\t'cds--visually-hidden': hideLabel\n\t\t\t\t}\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(label)\" [ngTemplateOutlet]=\"label\"></ng-template>\n\t\t\t</label>\n\t\t\t<div\n\t\t\t\t#listbox\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--multi-select cds--multi-select--filterable': type === 'multi',\n\t\t\t\t\t'cds--list-box--light': theme === 'light',\n\t\t\t\t\t'cds--list-box--expanded': open,\n\t\t\t\t\t'cds--list-box--sm': size === 'sm',\n\t\t\t\t\t'cds--list-box--md': size === 'md',\n\t\t\t\t\t'cds--list-box--lg': size === 'lg',\n\t\t\t\t\t'cds--list-box--disabled': disabled,\n\t\t\t\t\t'cds--combo-box--warning cds--list-box--warning': warn\n\t\t\t\t}\"\n\t\t\t\tclass=\"cds--list-box cds--combo-box\"\n\t\t\t\t[attr.data-invalid]=\"(invalid ? true : null)\">\n\t\t\t\t<div\n\t\t\t\t\tclass=\"cds--list-box__field\"\n\t\t\t\t\t(click)=\"toggleDropdown()\"\n\t\t\t\t\t(blur)=\"onBlur()\">\n\t\t\t\t\t<div\n\t\t\t\t\t\t*ngIf=\"type === 'multi' && pills.length > 0\"\n\t\t\t\t\t\tclass=\"cds--tag cds--tag--filter cds--tag--high-contrast\"\n\t\t\t\t\t\t[ngClass]=\"{'cds--tag--disabled': disabled}\">\n\t\t\t\t\t\t<span class=\"cds--tag__label\">{{ pills.length }}</span>\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t(click)=\"clearSelected($event)\"\n\t\t\t\t\t\t\t(blur)=\"onBlur()\"\n\t\t\t\t\t\t\t(keydown.enter)=\"clearSelected($event)\"\n\t\t\t\t\t\t\tclass=\"cds--tag__close-icon\"\n\t\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t\t[title]=\"clearSelectionsTitle\"\n\t\t\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t\t\t[attr.aria-label]=\"clearSelectionAria\">\n\t\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t\tfocusable=\"false\"\n\t\t\t\t\t\t\t\tpreserveAspectRatio=\"xMidYMid meet\"\n\t\t\t\t\t\t\t\tstyle=\"will-change: transform;\"\n\t\t\t\t\t\t\t\trole=\"img\"\n\t\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t\t\twidth=\"16\"\n\t\t\t\t\t\t\t\theight=\"16\"\n\t\t\t\t\t\t\t\tviewBox=\"0 0 16 16\"\n\t\t\t\t\t\t\t\taria-hidden=\"true\">\n\t\t\t\t\t\t\t\t<path d=\"M12 4.7l-.7-.7L8 7.3 4.7 4l-.7.7L7.3 8 4 11.3l.7.7L8 8.7l3.3 3.3.7-.7L8.7 8z\"></path>\n\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</div>\n\t\t\t\t\t<input\n\t\t\t\t\t\t#input\n\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\tautocomplete=\"off\"\n\t\t\t\t\t\trole=\"combobox\"\n\t\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t\t(input)=\"onSearch($event.target.value)\"\n\t\t\t\t\t\t(blur)=\"onBlur()\"\n\t\t\t\t\t\t(keydown.enter)=\"onSubmit($event)\"\n\t\t\t\t\t\t[value]=\"selectedValue\"\n\t\t\t\t\t\tclass=\"cds--text-input\"\n\t\t\t\t\t\t[ngClass]=\"{'cds--text-input--empty': !showClearButton}\"\n\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t[id]=\"id\"\n\t\t\t\t\t\t[attr.aria-labelledby]=\"labelId\"\n\t\t\t\t\t\t[attr.aria-expanded]=\"open\"\n\t\t\t\t\t\taria-haspopup=\"listbox\"\n\t\t\t\t\t\t[attr.maxlength]=\"maxLength\"\n\t\t\t\t\t\t[attr.aria-controls]=\"open ? view?.listId : null\"\n\t\t\t\t\t\t[attr.aria-autocomplete]=\"autocomplete\"\n\t\t\t\t\t\t[placeholder]=\"placeholder\"/>\n\t\t\t\t\t<svg\n\t\t\t\t\t\t*ngIf=\"invalid\"\n\t\t\t\t\t\tcdsIcon=\"warning--filled\"\n\t\t\t\t\t\tsize=\"16\"\n\t\t\t\t\t\tclass=\"cds--list-box__invalid-icon\">\n\t\t\t\t\t</svg>\n\t\t\t\t\t<svg\n\t\t\t\t\t\t*ngIf=\"!invalid && warn\"\n\t\t\t\t\t\tcdsIcon=\"warning--alt--filled\"\n\t\t\t\t\t\tsize=\"16\"\n\t\t\t\t\t\tclass=\"cds--list-box__invalid-icon cds--list-box__invalid-icon--warning\">\n\t\t\t\t\t</svg>\n\t\t\t\t\t<div\n\t\t\t\t\t\t*ngIf=\"showClearButton\"\n\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\tclass=\"cds--list-box__selection\"\n\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t[attr.aria-label]=\"clearSelectionAria\"\n\t\t\t\t\t\t[title]=\"clearSelectionTitle\"\n\t\t\t\t\t\t(keyup.enter)=\"clearInput($event)\"\n\t\t\t\t\t\t(click)=\"clearInput($event)\"\n\t\t\t\t\t\t(blur)=\"onBlur()\">\n\t\t\t\t\t\t<svg cdsIcon=\"close\" size=\"16\"></svg>\n\t\t\t\t\t</div>\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\tclass=\"cds--list-box__menu-icon\"\n\t\t\t\t\t\ttabindex=\"-1\"\n\t\t\t\t\t\t[title]=\"open ? closeMenuAria : openMenuAria\"\n\t\t\t\t\t\t[attr.aria-label]=\"open ? closeMenuAria : openMenuAria\"\n\t\t\t\t\t\t[ngClass]=\"{'cds--list-box__menu-icon--open': open}\">\n\t\t\t\t\t\t<svg cdsIcon=\"chevron--down\" size=\"16\"></svg>\n\t\t\t\t\t</button>\n\t\t\t\t</div>\n\t\t\t\t<div\n\t\t\t\t\t#dropdownMenu\n\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t'cds--list-box--up': this.dropUp !== null && this.dropUp !== undefined ? dropUp : _dropUp\n\t\t\t\t\t}\">\n\t\t\t\t\t<ng-content *ngIf=\"open\"></ng-content>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\t*ngIf=\"helperText && !invalid && !warn\"\n\t\t\t\tclass=\"cds--form__helper-text\"\n\t\t\t\t[ngClass]=\"{'cds--form__helper-text--disabled': disabled}\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(helperText)\">{{helperText}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n\t\t\t</div>\n\t\t\t<div *ngIf=\"invalid\" class=\"cds--form-requirement\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{ invalidText }}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t\t\t</div>\n\t\t\t<div *ngIf=\"!invalid && warn\" class=\"cds--form-requirement\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(warnText)\">{{warnText}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(warnText)\" [ngTemplateOutlet]=\"warnText\"></ng-template>\n\t\t\t</div>\n\t\t</div>\n\t`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: ComboBox,\n\t\t\tmulti: true\n\t\t}\n\t]\n})\nexport class ComboBox implements OnChanges, AfterViewInit, AfterContentInit, OnDestroy {\n\t/**\n\t * Text to show when nothing is selected.\n\t */\n\t@Input() set placeholder(value: string | Observable<string>) {\n\t\tthis._placeholder.override(value);\n\t}\n\n\tget placeholder() {\n\t\treturn this._placeholder.value;\n\t}\n\t/**\n\t * Value to display for accessibility purposes on the combobox control menu when closed\n\t */\n\t@Input() set openMenuAria(value: string | Observable<string>) {\n\t\tthis._openMenuAria.override(value);\n\t}\n\n\tget openMenuAria() {\n\t\treturn this._openMenuAria.value;\n\t}\n\t/**\n\t * Value to display for accessibility purposes on the combobox control menu when opened\n\t */\n\t@Input() set closeMenuAria(value: string | Observable<string>) {\n\t\tthis._closeMenuAria.override(value);\n\t}\n\n\tget closeMenuAria() {\n\t\treturn this._closeMenuAria.value;\n\t}\n\t/**\n\t * Value to display on the clear selections icon, when multi is selected\n\t */\n\t@Input() set clearSelectionsTitle(value: string | Observable<string>) {\n\t\tthis._clearSelectionsTitle.override(value);\n\t}\n\n\tget clearSelectionsTitle() {\n\t\treturn this._clearSelectionsTitle.value;\n\t}\n\t/**\n\t * Value to display for accessibility purposes to clear selections, when multi is selected\n\t */\n\t@Input() set clearSelectionsAria(value: string | Observable<string>) {\n\t\tthis._clearSelectionsAria.override(value);\n\t}\n\n\tget clearSelectionsAria() {\n\t\treturn this._clearSelectionsAria.value;\n\t}\n\t/**\n\t * Value to display on the clear the selected item icon, when single is selected\n\t */\n\t@Input() set clearSelectionTitle(value: string | Observable<string>) {\n\t\tthis._clearSelectionTitle.override(value);\n\t}\n\n\tget clearSelectionTitle() {\n\t\treturn this._clearSelectionTitle.value;\n\t}\n\t/**\n\t * Value to display for accessibility purposes on the clear the selected item icon, when single is selected\n\t */\n\t@Input() set clearSelectionAria(value: string | Observable<string>) {\n\t\tthis._clearSelectionAria.override(value);\n\t}\n\n\tget clearSelectionAria() {\n\t\treturn this._clearSelectionAria.value;\n\t}\n\tstatic comboBoxCount = 0;\n\t@Input() id = `dropdown-${ComboBox.comboBoxCount++}`;\n\t@Input() labelId = `dropdown-label-${ComboBox.comboBoxCount++}`;\n\t/**\n\t * List of items to fill the content with.\n\t *\n\t * **Example:**\n\t * ```javascript\n\t * items = [\n\t *\t\t{\n\t *\t\t\tcontent: \"Abacus\",\n\t *\t\t\tselected: false\n\t *\t\t},\n\t *\t\t{\n\t *\t\t\tcontent: \"Byte\",\n\t *\t\t\tselected: false,\n\t *\t\t},\n\t *\t\t{\n\t *\t\t\tcontent: \"Computer\",\n\t *\t\t\tselected: false\n\t *\t\t},\n\t *\t\t{\n\t *\t\t\tcontent: \"Digital\",\n\t *\t\t\tselected: false\n\t *\t\t}\n\t * ];\n\t * ```\n\t *\n\t */\n\t@Input() items: Array<ListItem> = [];\n\t/**\n\t * Combo box type (supporting single or multi selection of items).\n\t */\n\t@Input() type: \"single\" | \"multi\" = \"single\";\n\t/**\n\t * Combo box render size.\n\t */\n\t@Input() size: \"sm\" | \"md\" | \"lg\" = \"md\";\n\t/**\n\t * Specifies the property to be used as the return value to `ngModel`\n\t */\n\t@Input() itemValueKey: string;\n\t/**\n\t * Label for the combobox.\n\t */\n\t@Input() label: string | TemplateRef<any>;\n\t/**\n\t * Hide label while keeping it accessible for screen readers\n\t */\n\t@Input() hideLabel = false;\n\t/**\n\t * Sets the optional helper text.\n\t */\n\t@Input() helperText: string | TemplateRef<any>;\n\t/**\n\t * set to `true` to place the dropdown view inline with the component\n\t */\n\t@Input() appendInline: boolean = null;\n\t/**\n\t * Set to `true` to show the invalid state.\n\t */\n\t@Input() invalid = false;\n\t/**\n\t * Value displayed if combobox is in an invalid state.\n\t */\n\t@Input() invalidText: string | TemplateRef<any>;\n\t/**\n\t* Set to `true` to show a warning (contents set by warnText)\n\t*/\n\t@Input() warn = false;\n\t/**\n\t * Sets the warning text\n\t */\n\t@Input() warnText: string | TemplateRef<any>;\n\t/**\n\t * Max length value to limit input characters\n\t */\n\t@Input() maxLength: number = null;\n\t/**\n\t * @deprecated since v5 - Use `cdsLayer` directive instead\n\t */\n\t@Input() theme: \"light\" | \"dark\" = \"dark\";\n\t/**\n\t * Specify feedback (mode) of the selection.\n\t * `top`: selected item jumps to top\n\t * `fixed`: selected item stays at its position\n\t * `top-after-reopen`: selected item jump to top after reopen dropdown\n\t */\n\t@Input() selectionFeedback: \"top\" | \"fixed\" | \"top-after-reopen\" = \"top-after-reopen\";\n\t/**\n\t * Specify aria-autocomplete attribute of text input.\n\t * \"list\", is the expected value for a combobox that invokes a drop-down list\n\t */\n\t@Input() autocomplete = \"list\";\n\t/**\n\t * Overrides the automatic dropUp.\n\t */\n\t@Input() dropUp: boolean;\n\t/**\n\t * Set to `true` to disable combobox.\n\t */\n\t@Input() disabled = false;\n\t/**\n\t * Emits a ListItem\n\t *\n\t * Example:\n\t * ```javascript\n\t * {\n\t * \t\tcontent: \"one\",\n\t * \t\tselected: true\n\t * }\n\t * ```\n\t */\n\t@Output() selected = new EventEmitter<ListItem | ListItem[]>();\n\t/**\n\t * Intended to be used to add items to the list.\n\t *\n\t * Emits an event that includes the current item list, the suggested index for the new item, and a simple ListItem\n\t *\n\t * Example:\n\t * ```javascript\n\t *\t{\n\t *\t\titems: [{content: \"one\", selected: true}, {content: \"two\", selected: true}],\n\t *\t\tindex: 1,\n\t *\t\tvalue: {\n\t *\t\t\tcontent: \"some user string\",\n\t *\t\t\tselected: false\n\t *\t\t}\n\t *\t}\n\t * ```\n\t *\n\t *\n\t * Example:\n\t * ```javascript\n\t * {\n\t *\tafter: 1,\n\t *\tvalue: \"some user string\"\n\t * }\n\t * ```\n\t */\n\t@Output() submit = new EventEmitter<{\n\t\titems: ListItem[],\n\t\tindex: number,\n\t\tvalue: {\n\t\t\tcontent: string,\n\t\t\tselected: boolean\n\t\t}\n\t}>();\n\t/** Emits an empty event when the menu is closed */\n\t@Output() close = new EventEmitter<void>();\n\t/** Emits the search string from the input */\n\t@Output() search = new EventEmitter<string>();\n\t/** Emits an event when the clear button is clicked. */\n\t@Output() clear = new EventEmitter<Event>();\n\t/** ContentChild reference to the instantiated dropdown list */\n\t@ContentChild(AbstractDropdownView, { static: true }) view: AbstractDropdownView;\n\t@ViewChild(\"dropdownMenu\") dropdownMenu;\n\t@ViewChild(\"input\", { static: true }) input: ElementRef;\n\t@ViewChild(\"listbox\", { static: true }) listbox: ElementRef;\n\t@HostBinding(\"class.cds--list-box__wrapper\") hostClass = true;\n\t@HostBinding(\"style.display\") display = \"block\";\n\n\tpublic open = false;\n\n\tpublic showClearButton = false;\n\n\t/** Selected items for multi-select combo-boxes. */\n\tpublic pills = [];\n\t/** used to update the displayValue */\n\tpublic selectedValue = \"\";\n\n\toutsideClick = this._outsideClick.bind(this);\n\tkeyboardNav = this._keyboardNav.bind(this);\n\t/**\n\t * controls whether the `drop-up` class is applied\n\t */\n\t_dropUp = false;\n\n\tprotected noop = this._noop.bind(this);\n\tprotected onTouchedCallback: () => void = this._noop;\n\tprotected propagateChangeCallback: (_: any) => void = this._noop;\n\n\tprotected _placeholder = this.i18n.getOverridable(\"COMBOBOX.PLACEHOLDER\");\n\tprotected _closeMenuAria = this.i18n.getOverridable(\"COMBOBOX.A11Y.CLOSE_MENU\");\n\tprotected _openMenuAria = this.i18n.getOverridable(\"COMBOBOX.A11Y.OPEN_MENU\");\n\tprotected _clearSelectionsTitle = this.i18n.getOverridable(\"COMBOBOX.CLEAR_SELECTIONS\");\n\tprotected _clearSelectionsAria = this.i18n.getOverridable(\"COMBOBOX.A11Y.CLEAR_SELECTIONS\");\n\tprotected _clearSelectionTitle = this.i18n.getOverridable(\"COMBOBOX.CLEAR_SELECTED\");\n\tprotected _clearSelectionAria = this.i18n.getOverridable(\"COMBOBOX.A11Y.CLEAR_SELECTED\");\n\n\t/**\n\t * Creates an instance of ComboBox.\n\t */\n\tconstructor(\n\t\tprotected elementRef: ElementRef,\n\t\tprotected dropdownService: DropdownService,\n\t\tprotected i18n: I18n\n\t) {}\n\n\t/**\n\t * Lifecycle hook.\n\t * Updates pills if necessary.\n\t *\n\t */\n\tngOnChanges(changes) {\n\t\tif (changes.items) {\n\t\t\tthis.view.items = changes.items.currentValue;\n\t\t\tthis.updateSelected();\n\t\t\t// If new items are added into the combobox while there is search input,\n\t\t\t// repeat the search. Search should only trigger for type 'single' when there is no value selected.\n\t\t\tif (this.type === \"multi\" || (this.type === \"single\" && !this.selectedValue)) {\n\t\t\t\tthis.onSearch(this.input.nativeElement.value, false);\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Sets initial state that depends on child components\n\t * Subscribes to select events and handles focus/filtering/initial list updates\n\t */\n\tngAfterContentInit() {\n\t\tif (this.view) {\n\t\t\tthis.view.type = this.type;\n\n\t\t\t// function to check if the event is organic (isUpdate === false) or programmatic\n\t\t\tconst isUpdate = event => event && event.isUpdate;\n\n\t\t\tthis.view.select.subscribe(event => {\n\t\t\t\tif (Array.isArray(event)) {\n\t\t\t\t\tthis.updatePills();\n\t\t\t\t\tif (!isUpdate(event)) {\n\t\t\t\t\t\tif (this.itemValueKey && this.view.getSelected()) {\n\t\t\t\t\t\t\tconst values = this.view.getSelected().map(item => item[this.itemValueKey]);\n\t\t\t\t\t\t\tthis.propagateChangeCallback(values);\n\t\t\t\t\t\t// otherwise just pass up the values from `getSelected`\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tthis.propagateChangeCallback(this.view.getSelected());\n\t\t\t\t\t\t}\n\t\t\t\t\t\tthis.selected.emit(event);\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\t// If type is single, dropdown list will emit an object\n\t\t\t\t\tif (event.item && event.item.selected) {\n\t\t\t\t\t\tthis.showClearButton = true;\n\t\t\t\t\t\tthis.selectedValue = event.item.content;\n\n\t\t\t\t\t\tif (!isUpdate(event)) {\n\t\t\t\t\t\t\tif (this.itemValueKey) {\n\t\t\t\t\t\t\t\tthis.propagateChangeCallback(event.item[this.itemValueKey]);\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tthis.propagateChangeCallback(event.item);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t} else {\n\t\t\t\t\t\tthis.selectedValue = \"\";\n\t\t\t\t\t\tif (!isUpdate(event)) {\n\t\t\t\t\t\t\tthis.propagateChangeCallback(null);\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\t// not guarding these since the nativeElement has to be loaded\n\t\t\t\t\t// for select to even fire\n\t\t\t\t\t// only focus for \"organic\" selections\n\t\t\t\t\tif (!isUpdate(event)) {\n\t\t\t\t\t\tthis.elementRef.nativeElement.querySelector(\"input\").focus();\n\t\t\t\t\t\tthis.view.filterBy(\"\");\n\t\t\t\t\t\tthis.selected.emit(event.item);\n\t\t\t\t\t}\n\t\t\t\t\tthis.closeDropdown();\n\t\t\t\t}\n\t\t\t});\n\t\t\t// update the rest of combobox with any pre-selected items\n\t\t\t// setTimeout just defers the call to the next check cycle\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.updateSelected();\n\t\t\t});\n\n\t\t\tthis.view.blurIntent.pipe(filter(v => v === \"top\")).subscribe(() => {\n\t\t\t\tthis.elementRef.nativeElement.querySelector(\".cds--text-input\").focus();\n\t\t\t});\n\t\t}\n\t}\n\n\t/**\n\t * Binds event handlers against the rendered view\n\t */\n\tngAfterViewInit() {\n\t\t// if appendInline is default valued (null) we should:\n\t\t// 1. if there are scrollable parents (not including body) don't append inline\n\t\t// this should also cover the case where the dropdown is in a modal\n\t\t// (where we _do_ want to append to the placeholder)\n\t\tif (this.appendInline === null && hasScrollableParents(this.elementRef.nativeElement)) {\n\t\t\tthis.appendInline = false;\n\t\t// 2. otherwise we should append inline\n\t\t} else if (this.appendInline === null) {\n\t\t\tthis.appendInline = true;\n\t\t}\n\t}\n\n\t/**\n\t * Removing the `Dropdown` from the body if it is appended to the body.\n\t */\n\tngOnDestroy() {\n\t\tif (!this.appendInline) {\n\t\t\tthis._appendToDropdown();\n\t\t}\n\t}\n\n\t/**\n\t * Handles `Escape/Tab` key closing the dropdown, and arrow up/down focus to/from the dropdown list.\n\t */\n\t@HostListener(\"keydown\", [\"$event\"])\n\thostkeys(ev: KeyboardEvent) {\n\t\tif (ev.key === \"Escape\") {\n\t\t\tthis.closeDropdown();\n\t\t} else if ((ev.key === \"ArrowDown\")\n\t\t\t&& (!this.dropdownMenu || !this.dropdownMenu.nativeElement.contains(ev.target))) {\n\t\t\tev.preventDefault();\n\t\t\tthis.openDropdown();\n\t\t\tsetTimeout(() => { this.view.initFocus(); }, 0);\n\t\t}\n\n\t\tif (\n\t\t\tthis.open && ev.key === \"Tab\" &&\n\t\t\t(this.dropdownMenu.nativeElement.contains(ev.target as Node) || ev.target === this.input.nativeElement)\n\t\t) {\n\t\t\tthis.closeDropdown();\n\t\t}\n\n\t\tif (this.open && ev.key === \"Tab\" && ev.shiftKey) {\n\t\t\tthis.closeDropdown();\n\t\t}\n\t}\n\n\t/*\n\t * no-op method for null event listeners, and other no op calls\n\t */\n\t_noop() {}\n\n\t/*\n\t * propagates the value provided from ngModel\n\t */\n\twriteValue(value: any) {\n\t\tif (this.type === \"single\") {\n\t\t\tif (this.itemValueKey) {\n\t\t\t\t// clone the specified item and update its state\n\t\t\t\tconst newValue = Object.assign({}, this.view.getListItems().find(item => item[this.itemValueKey] === value));\n\t\t\t\tnewValue.selected = true;\n\t\t\t\tthis.view.propagateSelected([newValue]);\n\t\t\t} else {\n\t\t\t\t// all items in propagateSelected must be iterable\n\t\t\t\tthis.view.propagateSelected([value || \"\"]);\n\t\t\t}\n\t\t\tthis.showClearButton = !!(value && this.view.getSelected().length);\n\t\t} else {\n\t\t\tif (this.itemValueKey) {\n\t\t\t\t// clone the items and update their state based on the received value array\n\t\t\t\t// this way we don't lose any additional metadata that may be passed in via the `items` Input\n\t\t\t\tlet newValues = [];\n\t\t\t\tfor (const v of value) {\n\t\t\t\t\tfor (const item of this.view.getListItems()) {\n\t\t\t\t\t\tif (item[this.itemValueKey] === v) {\n\t\t\t\t\t\t\tnewValues.push(Object.assign({}, item, { selected: true }));\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tthis.view.propagateSelected(newValues);\n\t\t\t} else {\n\t\t\t\tthis.view.propagateSelected(value ? value : [\"\"]);\n\t\t\t}\n\t\t}\n\t\tthis.updateSelected();\n\t}\n\n\tonBlur() {\n\t\tthis.onTouchedCallback();\n\t}\n\n\tregisterOnChange(fn: any) {\n\t\tthis.propagateChangeCallback = fn;\n\t}\n\n\tregisterOnTouched(fn: any) {\n\t\tthis.onTouchedCallback = fn;\n\t}\n\n\t/**\n\t * `ControlValueAccessor` method to programmatically disable the combobox.\n\t *\n\t * ex: `this.formGroup.get(\"myCoolCombobox\").disable();`\n\t */\n\tsetDisabledState(isDisabled: boolean) {\n\t\tthis.disabled = isDisabled;\n\t}\n\n\t/**\n\t * Called by `n-pill-input` when the selected pills have changed.\n\t */\n\tpublic updatePills() {\n\t\tthis.pills = this.view.getSelected() || [];\n\t\tthis.checkForReorder();\n\t}\n\n\tpublic clearSelected(event) {\n\t\tthis.items = this.items.map(item => {\n\t\t\tif (!item.disabled) {\n\t\t\t\titem.selected = false;\n\t\t\t}\n\t\t\treturn item;\n\t\t});\n\t\tthis.view.items = this.items;\n\t\tthis.updatePills();\n\t\t// clearSelected can only fire on type=multi\n\t\t// so we just emit getSelected() (just in case there's any disabled but selected items)\n\t\tconst selected = this.view.getSelected();\n\t\tthis.propagateChangeCallback(selected);\n\t\tthis.selected.emit(selected as any);\n\t\tthis.clear.emit(event);\n\t}\n\n\t/**\n\t * Closes the dropdown and emits the close event.\n\t */\n\tpublic closeDropdown() {\n\t\tthis.open = false;\n\t\tthis.checkForReorder();\n\t\tthis.close.emit();\n\t\tif (!this.appendInline) {\n\t\t\tthis._appendToDropdown();\n\t\t}\n\n\t\tdocument.removeEventListener(\"click\", this.outsideClick, true);\n\t}\n\n\t/**\n\t * Opens the dropdown.\n\t */\n\tpublic openDropdown() {\n\t\tif (this.disabled) { return; }\n\t\tthis.open = true;\n\t\tthis._dropUp = false;\n\n\t\tif (!this.appendInline) {\n\t\t\tthis._appendToBody();\n\t\t}\n\n\t\tdocument.addEventListener(\"click\", this.outsideClick, true);\n\n\t\t// set the dropdown menu to drop up if it is near the bottom of the screen\n\t\t// setTimeout lets us do the calculations after it is visible in the DOM\n\t\tsetTimeout(() => {\n\t\t\tif (this.dropUp === null || this.dropUp === undefined) {\n\t\t\t\tthis._dropUp = this._shouldDropUp();\n\t\t\t}\n\t\t}, 0);\n\t}\n\n\t/**\n\t * Toggles the dropdown.\n\t */\n\tpublic toggleDropdown() {\n\t\tif (this.open) {\n\t\t\tthis.closeDropdown();\n\t\t} else {\n\t\t\tthis.openDropdown();\n\t\t}\n\t}\n\n\t/**\n\t * Sets the list group filter, and manages single select item selection.\n\t */\n\tpublic onSearch(searchString, shouldEmitSearch = true) {\n\t\tif (shouldEmitSearch) {\n\t\t\tthis.search.emit(searchString);\n\t\t}\n\t\tthis.showClearButton = !!searchString;\n\t\tthis.view.filterBy(searchString);\n\t\tif (searchString !== \"\") {\n\t\t\tif (!this.open) {\n\t\t\t\tthis.openDropdown();\n\t\t\t}\n\t\t} else {\n\t\t\tthis.selectedValue = \"\";\n\t\t\tif (this.type === \"multi\" &&\n\t\t\t\t(this.selectionFeedback === \"top\" || this.selectionFeedback === \"top-after-reopen\")) {\n\t\t\t\tthis.view.reorderSelected();\n\t\t\t}\n\t\t}\n\t\tif (this.type === \"single\") {\n\t\t\t// deselect if the input doesn't match the content\n\t\t\t// of any given item\n\t\t\tconst matches = this.view.getListItems().some(item => item.content.toLowerCase().includes(searchString.toLowerCase()));\n\t\t\tif (!matches) {\n\t\t\t\tconst selected = this.view.getSelected();\n\t\t\t\tif (!selected || !selected[0]) {\n\t\t\t\t\tthis.view.filterBy(searchString);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Intended to be used to add items to the list.\n\t */\n\tpublic onSubmit(event: KeyboardEvent) {\n\t\tthis.submit.emit({\n\t\t\titems: this.view.getListItems(),\n\t\t\tindex: 0,\n\t\t\tvalue: {\n\t\t\t\tcontent: (event.target as HTMLInputElement).value,\n\t\t\t\tselected: false\n\t\t\t}\n\t\t});\n\t}\n\n\tclearInput(event) {\n\t\tevent.stopPropagation();\n\t\tevent.preventDefault();\n\n\t\tif (this.disabled) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (this.type === \"single\") { // don't want to clear selected or close if multi\n\t\t\tthis.clearSelected(event);\n\t\t\tthis.closeDropdown();\n\t\t}\n\n\t\tthis.selectedValue = \"\";\n\t\tthis.input.nativeElement.value = \"\";\n\n\t\tthis.showClearButton = false;\n\t\tthis.input.nativeElement.focus();\n\t\tthis.onSearch(this.input.nativeElement.value);\n\t}\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n\n\t/**\n\t * Handles keyboard events so users are controlling the `Dropdown` instead of unintentionally controlling outside elements.\n\t */\n\t_keyboardNav(event: KeyboardEvent) {\n\t\tif ((event.key === \"Escape\") && this.open) {\n\t\t\tevent.stopImmediatePropagation(); // don't unintentionally close modal if inside of it\n\t\t}\n\t\tif (event.key === \"Escape\") {\n\t\t\tevent.preventDefault();\n\t\t\tthis.closeDropdown();\n\t\t\tthis.input.nativeElement.focus();\n\t\t} else if (this.open && event.key === \"Tab\") {\n\t\t\t// this way focus will start on the next focusable item from the dropdown\n\t\t\t// not the top of the body!\n\t\t\tthis.input.nativeElement.focus();\n\t\t\tthis.input.nativeElement.dispatchEvent(new KeyboardEvent(\"keydown\", { bubbles: true, cancelable: true, key: \"Tab\" }));\n\t\t\tthis.closeDropdown();\n\t\t}\n\t}\n\n\t/**\n\t * Creates the `Dropdown` list as an element that is appended to the DOM body.\n\t */\n\t_appendToBody() {\n\t\tthis.dropdownService.appendToBody(\n\t\t\tthis.listbox.nativeElement,\n\t\t\tthis.dropdownMenu.nativeElement,\n\t\t\t`${this.elementRef.nativeElement.className}${this.open ? \" cds--list-box--expanded\" : \"\"}`);\n\t\tthis.dropdownMenu.nativeElement.addEventListener(\"keydown\", this.keyboardNav, true);\n\t}\n\n\t/**\n\t * Creates the `Dropdown` list appending it to the dropdown parent object instead of the body.\n\t */\n\t_appendToDropdown() {\n\t\tthis.dropdownService.appendToDropdown(this.elementRef.nativeElement);\n\t\tthis.dropdownMenu.nativeElement.removeEventListener(\"keydown\", this.keyboardNav, true);\n\t}\n\n\t/**\n\t * Detects whether or not the `Dropdown` list is visible within all scrollable parents.\n\t * This can be overridden by passing in a value to the `dropUp` input.\n\t */\n\t_shouldDropUp() {\n\t\t// check if dropdownMenu exists first.\n\t\tconst menu = this.dropdownMenu && this.dropdownMenu.nativeElement.querySelector(\".cds--list-box__menu\");\n\t\t// check if menu exists first.\n\t\tconst menuRect = menu && menu.getBoundingClientRect();\n\t\tif (menu && menuRect) {\n\t\t\tconst scrollableParents = getScrollableParents(menu);\n\t\t\treturn scrollableParents.reduce((shouldDropUp: boolean, parent: HTMLElement) => {\n\t\t\t\tconst parentRect = parent.getBoundingClientRect();\n\t\t\t\tconst isBelowParent = !(menuRect.bottom <= parentRect.bottom);\n\t\t\t\treturn shouldDropUp || isBelowParent;\n\t\t\t}, false);\n\t\t}\n\n\t\treturn false;\n\t}\n\n\t/**\n\t * Handles clicks outside of the `Dropdown` list.\n\t */\n\t_outsideClick(event) {\n\t\tif (!this.elementRef.nativeElement.contains(event.target) &&\n\t\t\t// if we're appendToBody the list isn't within the _elementRef,\n\t\t\t// so we've got to check if our target is possibly in there too.\n\t\t\t!this.dropdownMenu.nativeElement.contains(event.target)) {\n\t\t\tthis.closeDropdown();\n\t\t}\n\t}\n\n\tprotected updateSelected() {\n\t\tconst selected = this.view.getSelected();\n\t\tif (this.type === \"multi\") {\n\t\t\tthis.updatePills();\n\t\t} else if (selected) {\n\t\t\tconst value = selected[0] ? selected[0].content : \"\";\n\t\t\tconst changeCallbackValue = selected[0] ? selected[0] : \"\";\n\t\t\tthis.selectedValue = value;\n\t\t\tthis.showClearButton = !!value;\n\t\t}\n\t}\n\n\tprotected checkForReorder() {\n\t\tconst topAfterReopen = !this.open && this.selectionFeedback === \"top-after-reopen\";\n\t\tif ((this.type === \"multi\") && (topAfterReopen || this.selectionFeedback === \"top\")) {\n\t\t\tthis.view.reorderSelected(true);\n\t\t}\n\t}\n}\n",
|
|
23827
|
+
"sourceCode": "import {\n\tComponent,\n\tOnChanges,\n\tContentChild,\n\tInput,\n\tOutput,\n\tHostListener,\n\tElementRef,\n\tViewChild,\n\tEventEmitter,\n\tAfterViewInit,\n\tAfterContentInit,\n\tHostBinding,\n\tTemplateRef,\n\tOnDestroy\n} from \"@angular/core\";\nimport { AbstractDropdownView, DropdownService } from \"carbon-components-angular/dropdown\";\nimport { ListItem } from \"carbon-components-angular/dropdown\";\nimport { NG_VALUE_ACCESSOR } from \"@angular/forms\";\nimport { filter } from \"rxjs/operators\";\nimport {\n\tgetScrollableParents,\n\thasScrollableParents\n} from \"carbon-components-angular/utils\";\nimport { I18n, Overridable } from \"carbon-components-angular/i18n\";\nimport { Observable } from \"rxjs\";\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { ComboBoxModule } from 'carbon-components-angular';\n * ```\n *\n * ComboBoxes are similar to dropdowns, except a combobox provides an input field for users to search items and (optionally) add their own.\n * Multi-select comboboxes also provide \"pills\" of selected items.\n *\n * [See demo](../../?path=/story/components-combobox--basic)\n */\n@Component({\n\tselector: \"cds-combo-box, ibm-combo-box\",\n\ttemplate: `\n\t\t<div class=\"cds--list-box__wrapper\">\n\t\t\t<label\n\t\t\t\t*ngIf=\"label\"\n\t\t\t\t[for]=\"id\"\n\t\t\t\t[id]=\"labelId\"\n\t\t\t\tclass=\"cds--label\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--label--disabled': disabled,\n\t\t\t\t\t'cds--visually-hidden': hideLabel\n\t\t\t\t}\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(label)\" [ngTemplateOutlet]=\"label\"></ng-template>\n\t\t\t</label>\n\t\t\t<div\n\t\t\t\t#listbox\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--multi-select cds--multi-select--filterable': type === 'multi',\n\t\t\t\t\t'cds--list-box--light': theme === 'light',\n\t\t\t\t\t'cds--list-box--expanded': open,\n\t\t\t\t\t'cds--list-box--sm': size === 'sm',\n\t\t\t\t\t'cds--list-box--md': size === 'md',\n\t\t\t\t\t'cds--list-box--lg': size === 'lg',\n\t\t\t\t\t'cds--list-box--disabled': disabled,\n\t\t\t\t\t'cds--combo-box--readonly': readonly,\n\t\t\t\t\t'cds--combo-box--warning cds--list-box--warning': warn\n\t\t\t\t}\"\n\t\t\t\tclass=\"cds--list-box cds--combo-box\"\n\t\t\t\t[attr.data-invalid]=\"(invalid ? true : null)\">\n\t\t\t\t<div\n\t\t\t\t\tclass=\"cds--list-box__field\"\n\t\t\t\t\t(click)=\"toggleDropdown()\"\n\t\t\t\t\t(blur)=\"onBlur()\">\n\t\t\t\t\t<div\n\t\t\t\t\t\t*ngIf=\"type === 'multi' && pills.length > 0\"\n\t\t\t\t\t\tclass=\"cds--tag cds--tag--filter cds--tag--high-contrast\"\n\t\t\t\t\t\t[ngClass]=\"{'cds--tag--disabled': disabled || readonly}\">\n\t\t\t\t\t\t<span class=\"cds--tag__label\">{{ pills.length }}</span>\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t(click)=\"clearSelected($event)\"\n\t\t\t\t\t\t\t(blur)=\"onBlur()\"\n\t\t\t\t\t\t\t(keydown.enter)=\"clearSelected($event)\"\n\t\t\t\t\t\t\tclass=\"cds--tag__close-icon\"\n\t\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t\t[title]=\"clearSelectionsTitle\"\n\t\t\t\t\t\t\t[disabled]=\"disabled || readonly\"\n\t\t\t\t\t\t\t[attr.aria-label]=\"clearSelectionAria\">\n\t\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t\tfocusable=\"false\"\n\t\t\t\t\t\t\t\tpreserveAspectRatio=\"xMidYMid meet\"\n\t\t\t\t\t\t\t\tstyle=\"will-change: transform;\"\n\t\t\t\t\t\t\t\trole=\"img\"\n\t\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t\t\twidth=\"16\"\n\t\t\t\t\t\t\t\theight=\"16\"\n\t\t\t\t\t\t\t\tviewBox=\"0 0 16 16\"\n\t\t\t\t\t\t\t\taria-hidden=\"true\">\n\t\t\t\t\t\t\t\t<path d=\"M12 4.7l-.7-.7L8 7.3 4.7 4l-.7.7L7.3 8 4 11.3l.7.7L8 8.7l3.3 3.3.7-.7L8.7 8z\"></path>\n\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</div>\n\t\t\t\t\t<input\n\t\t\t\t\t\t#input\n\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\tautocomplete=\"off\"\n\t\t\t\t\t\trole=\"combobox\"\n\t\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t\t[readOnly]=\"readonly\"\n\t\t\t\t\t\t(input)=\"onSearch($event.target.value)\"\n\t\t\t\t\t\t(blur)=\"onBlur()\"\n\t\t\t\t\t\t(keydown.enter)=\"onSubmit($event)\"\n\t\t\t\t\t\t[value]=\"selectedValue\"\n\t\t\t\t\t\tclass=\"cds--text-input\"\n\t\t\t\t\t\t[ngClass]=\"{'cds--text-input--empty': !showClearButton}\"\n\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t[id]=\"id\"\n\t\t\t\t\t\t[attr.aria-labelledby]=\"labelId\"\n\t\t\t\t\t\t[attr.aria-expanded]=\"open\"\n\t\t\t\t\t\taria-haspopup=\"listbox\"\n\t\t\t\t\t\t[attr.maxlength]=\"maxLength\"\n\t\t\t\t\t\t[attr.aria-controls]=\"open ? view?.listId : null\"\n\t\t\t\t\t\t[attr.aria-autocomplete]=\"autocomplete\"\n\t\t\t\t\t\t[placeholder]=\"placeholder\"/>\n\t\t\t\t\t<svg\n\t\t\t\t\t\t*ngIf=\"invalid\"\n\t\t\t\t\t\tcdsIcon=\"warning--filled\"\n\t\t\t\t\t\tsize=\"16\"\n\t\t\t\t\t\tclass=\"cds--list-box__invalid-icon\">\n\t\t\t\t\t</svg>\n\t\t\t\t\t<svg\n\t\t\t\t\t\t*ngIf=\"!invalid && warn\"\n\t\t\t\t\t\tcdsIcon=\"warning--alt--filled\"\n\t\t\t\t\t\tsize=\"16\"\n\t\t\t\t\t\tclass=\"cds--list-box__invalid-icon cds--list-box__invalid-icon--warning\">\n\t\t\t\t\t</svg>\n\t\t\t\t\t<div\n\t\t\t\t\t\t*ngIf=\"showClearButton\"\n\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\tclass=\"cds--list-box__selection\"\n\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t[attr.aria-label]=\"clearSelectionAria\"\n\t\t\t\t\t\t[title]=\"clearSelectionTitle\"\n\t\t\t\t\t\t(keyup.enter)=\"clearInput($event)\"\n\t\t\t\t\t\t(click)=\"clearInput($event)\"\n\t\t\t\t\t\t(blur)=\"onBlur()\">\n\t\t\t\t\t\t<svg cdsIcon=\"close\" size=\"16\"></svg>\n\t\t\t\t\t</div>\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\tclass=\"cds--list-box__menu-icon\"\n\t\t\t\t\t\ttabindex=\"-1\"\n\t\t\t\t\t\t[title]=\"open ? closeMenuAria : openMenuAria\"\n\t\t\t\t\t\t[attr.aria-label]=\"open ? closeMenuAria : openMenuAria\"\n\t\t\t\t\t\t[ngClass]=\"{'cds--list-box__menu-icon--open': open}\">\n\t\t\t\t\t\t<svg cdsIcon=\"chevron--down\" size=\"16\"></svg>\n\t\t\t\t\t</button>\n\t\t\t\t</div>\n\t\t\t\t<div\n\t\t\t\t\t#dropdownMenu\n\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t'cds--list-box--up': this.dropUp !== null && this.dropUp !== undefined ? dropUp : _dropUp\n\t\t\t\t\t}\">\n\t\t\t\t\t<ng-content *ngIf=\"open\"></ng-content>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\t*ngIf=\"helperText && !invalid && !warn\"\n\t\t\t\tclass=\"cds--form__helper-text\"\n\t\t\t\t[ngClass]=\"{'cds--form__helper-text--disabled': disabled}\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(helperText)\">{{helperText}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n\t\t\t</div>\n\t\t\t<div *ngIf=\"invalid\" class=\"cds--form-requirement\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{ invalidText }}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t\t\t</div>\n\t\t\t<div *ngIf=\"!invalid && warn\" class=\"cds--form-requirement\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(warnText)\">{{warnText}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(warnText)\" [ngTemplateOutlet]=\"warnText\"></ng-template>\n\t\t\t</div>\n\t\t</div>\n\t`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: ComboBox,\n\t\t\tmulti: true\n\t\t}\n\t]\n})\nexport class ComboBox implements OnChanges, AfterViewInit, AfterContentInit, OnDestroy {\n\t/**\n\t * Text to show when nothing is selected.\n\t */\n\t@Input() set placeholder(value: string | Observable<string>) {\n\t\tthis._placeholder.override(value);\n\t}\n\n\tget placeholder() {\n\t\treturn this._placeholder.value;\n\t}\n\t/**\n\t * Value to display for accessibility purposes on the combobox control menu when closed\n\t */\n\t@Input() set openMenuAria(value: string | Observable<string>) {\n\t\tthis._openMenuAria.override(value);\n\t}\n\n\tget openMenuAria() {\n\t\treturn this._openMenuAria.value;\n\t}\n\t/**\n\t * Value to display for accessibility purposes on the combobox control menu when opened\n\t */\n\t@Input() set closeMenuAria(value: string | Observable<string>) {\n\t\tthis._closeMenuAria.override(value);\n\t}\n\n\tget closeMenuAria() {\n\t\treturn this._closeMenuAria.value;\n\t}\n\t/**\n\t * Value to display on the clear selections icon, when multi is selected\n\t */\n\t@Input() set clearSelectionsTitle(value: string | Observable<string>) {\n\t\tthis._clearSelectionsTitle.override(value);\n\t}\n\n\tget clearSelectionsTitle() {\n\t\treturn this._clearSelectionsTitle.value;\n\t}\n\t/**\n\t * Value to display for accessibility purposes to clear selections, when multi is selected\n\t */\n\t@Input() set clearSelectionsAria(value: string | Observable<string>) {\n\t\tthis._clearSelectionsAria.override(value);\n\t}\n\n\tget clearSelectionsAria() {\n\t\treturn this._clearSelectionsAria.value;\n\t}\n\t/**\n\t * Value to display on the clear the selected item icon, when single is selected\n\t */\n\t@Input() set clearSelectionTitle(value: string | Observable<string>) {\n\t\tthis._clearSelectionTitle.override(value);\n\t}\n\n\tget clearSelectionTitle() {\n\t\treturn this._clearSelectionTitle.value;\n\t}\n\t/**\n\t * Value to display for accessibility purposes on the clear the selected item icon, when single is selected\n\t */\n\t@Input() set clearSelectionAria(value: string | Observable<string>) {\n\t\tthis._clearSelectionAria.override(value);\n\t}\n\n\tget clearSelectionAria() {\n\t\treturn this._clearSelectionAria.value;\n\t}\n\tstatic comboBoxCount = 0;\n\t@Input() id = `dropdown-${ComboBox.comboBoxCount++}`;\n\t@Input() labelId = `dropdown-label-${ComboBox.comboBoxCount++}`;\n\t/**\n\t * List of items to fill the content with.\n\t *\n\t * **Example:**\n\t * ```javascript\n\t * items = [\n\t *\t\t{\n\t *\t\t\tcontent: \"Abacus\",\n\t *\t\t\tselected: false\n\t *\t\t},\n\t *\t\t{\n\t *\t\t\tcontent: \"Byte\",\n\t *\t\t\tselected: false,\n\t *\t\t},\n\t *\t\t{\n\t *\t\t\tcontent: \"Computer\",\n\t *\t\t\tselected: false\n\t *\t\t},\n\t *\t\t{\n\t *\t\t\tcontent: \"Digital\",\n\t *\t\t\tselected: false\n\t *\t\t}\n\t * ];\n\t * ```\n\t *\n\t */\n\t@Input() items: Array<ListItem> = [];\n\t/**\n\t * Combo box type (supporting single or multi selection of items).\n\t */\n\t@Input() type: \"single\" | \"multi\" = \"single\";\n\t/**\n\t * Combo box render size.\n\t */\n\t@Input() size: \"sm\" | \"md\" | \"lg\" = \"md\";\n\t/**\n\t * Specifies the property to be used as the return value to `ngModel`\n\t */\n\t@Input() itemValueKey: string;\n\t/**\n\t * Label for the combobox.\n\t */\n\t@Input() label: string | TemplateRef<any>;\n\t/**\n\t * Hide label while keeping it accessible for screen readers\n\t */\n\t@Input() hideLabel = false;\n\t/**\n\t * Sets the optional helper text.\n\t */\n\t@Input() helperText: string | TemplateRef<any>;\n\t/**\n\t * set to `true` to place the dropdown view inline with the component\n\t */\n\t@Input() appendInline: boolean = null;\n\t/**\n\t * Set to `true` to show the invalid state.\n\t */\n\t@Input() invalid = false;\n\t/**\n\t * Value displayed if combobox is in an invalid state.\n\t */\n\t@Input() invalidText: string | TemplateRef<any>;\n\t/**\n\t* Set to `true` to show a warning (contents set by warnText)\n\t*/\n\t@Input() warn = false;\n\t/**\n\t * Sets the warning text\n\t */\n\t@Input() warnText: string | TemplateRef<any>;\n\t/**\n\t * Max length value to limit input characters\n\t */\n\t@Input() maxLength: number = null;\n\t/**\n\t * @deprecated since v5 - Use `cdsLayer` directive instead\n\t */\n\t@Input() theme: \"light\" | \"dark\" = \"dark\";\n\t/**\n\t * Specify feedback (mode) of the selection.\n\t * `top`: selected item jumps to top\n\t * `fixed`: selected item stays at its position\n\t * `top-after-reopen`: selected item jump to top after reopen dropdown\n\t */\n\t@Input() selectionFeedback: \"top\" | \"fixed\" | \"top-after-reopen\" = \"top-after-reopen\";\n\t/**\n\t * Specify aria-autocomplete attribute of text input.\n\t * \"list\", is the expected value for a combobox that invokes a drop-down list\n\t */\n\t@Input() autocomplete = \"list\";\n\t/**\n\t * Overrides the automatic dropUp.\n\t */\n\t@Input() dropUp: boolean;\n\t/**\n\t * Set to `true` to disable combobox.\n\t */\n\t@Input() disabled = false;\n\t/**\n\t * Set to `true` for readonly state.\n\t */\n\t@Input() readonly = false;\n\t/**\n\t * Emits a ListItem\n\t *\n\t * Example:\n\t * ```javascript\n\t * {\n\t * \t\tcontent: \"one\",\n\t * \t\tselected: true\n\t * }\n\t * ```\n\t */\n\t@Output() selected = new EventEmitter<ListItem | ListItem[]>();\n\t/**\n\t * Intended to be used to add items to the list.\n\t *\n\t * Emits an event that includes the current item list, the suggested index for the new item, and a simple ListItem\n\t *\n\t * Example:\n\t * ```javascript\n\t *\t{\n\t *\t\titems: [{content: \"one\", selected: true}, {content: \"two\", selected: true}],\n\t *\t\tindex: 1,\n\t *\t\tvalue: {\n\t *\t\t\tcontent: \"some user string\",\n\t *\t\t\tselected: false\n\t *\t\t}\n\t *\t}\n\t * ```\n\t *\n\t *\n\t * Example:\n\t * ```javascript\n\t * {\n\t *\tafter: 1,\n\t *\tvalue: \"some user string\"\n\t * }\n\t * ```\n\t */\n\t@Output() submit = new EventEmitter<{\n\t\titems: ListItem[],\n\t\tindex: number,\n\t\tvalue: {\n\t\t\tcontent: string,\n\t\t\tselected: boolean\n\t\t}\n\t}>();\n\t/** Emits an empty event when the menu is closed */\n\t@Output() close = new EventEmitter<void>();\n\t/** Emits the search string from the input */\n\t@Output() search = new EventEmitter<string>();\n\t/** Emits an event when the clear button is clicked. */\n\t@Output() clear = new EventEmitter<Event>();\n\t/** ContentChild reference to the instantiated dropdown list */\n\t@ContentChild(AbstractDropdownView, { static: true }) view: AbstractDropdownView;\n\t@ViewChild(\"dropdownMenu\") dropdownMenu;\n\t@ViewChild(\"input\", { static: true }) input: ElementRef;\n\t@ViewChild(\"listbox\", { static: true }) listbox: ElementRef;\n\t@HostBinding(\"class.cds--list-box__wrapper\") hostClass = true;\n\t@HostBinding(\"style.display\") display = \"block\";\n\n\tpublic open = false;\n\n\tpublic showClearButton = false;\n\n\t/** Selected items for multi-select combo-boxes. */\n\tpublic pills = [];\n\t/** used to update the displayValue */\n\tpublic selectedValue = \"\";\n\n\toutsideClick = this._outsideClick.bind(this);\n\tkeyboardNav = this._keyboardNav.bind(this);\n\t/**\n\t * controls whether the `drop-up` class is applied\n\t */\n\t_dropUp = false;\n\n\tprotected noop = this._noop.bind(this);\n\tprotected onTouchedCallback: () => void = this._noop;\n\tprotected propagateChangeCallback: (_: any) => void = this._noop;\n\n\tprotected _placeholder = this.i18n.getOverridable(\"COMBOBOX.PLACEHOLDER\");\n\tprotected _closeMenuAria = this.i18n.getOverridable(\"COMBOBOX.A11Y.CLOSE_MENU\");\n\tprotected _openMenuAria = this.i18n.getOverridable(\"COMBOBOX.A11Y.OPEN_MENU\");\n\tprotected _clearSelectionsTitle = this.i18n.getOverridable(\"COMBOBOX.CLEAR_SELECTIONS\");\n\tprotected _clearSelectionsAria = this.i18n.getOverridable(\"COMBOBOX.A11Y.CLEAR_SELECTIONS\");\n\tprotected _clearSelectionTitle = this.i18n.getOverridable(\"COMBOBOX.CLEAR_SELECTED\");\n\tprotected _clearSelectionAria = this.i18n.getOverridable(\"COMBOBOX.A11Y.CLEAR_SELECTED\");\n\n\t/**\n\t * Creates an instance of ComboBox.\n\t */\n\tconstructor(\n\t\tprotected elementRef: ElementRef,\n\t\tprotected dropdownService: DropdownService,\n\t\tprotected i18n: I18n\n\t) {}\n\n\t/**\n\t * Lifecycle hook.\n\t * Updates pills if necessary.\n\t *\n\t */\n\tngOnChanges(changes) {\n\t\tif (changes.items) {\n\t\t\tthis.view.items = changes.items.currentValue;\n\t\t\tthis.updateSelected();\n\t\t\t// If new items are added into the combobox while there is search input,\n\t\t\t// repeat the search. Search should only trigger for type 'single' when there is no value selected.\n\t\t\tif (this.type === \"multi\" || (this.type === \"single\" && !this.selectedValue)) {\n\t\t\t\tthis.onSearch(this.input.nativeElement.value, false);\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Sets initial state that depends on child components\n\t * Subscribes to select events and handles focus/filtering/initial list updates\n\t */\n\tngAfterContentInit() {\n\t\tif (this.view) {\n\t\t\tthis.view.type = this.type;\n\n\t\t\t// function to check if the event is organic (isUpdate === false) or programmatic\n\t\t\tconst isUpdate = event => event && event.isUpdate;\n\n\t\t\tthis.view.select.subscribe(event => {\n\t\t\t\tif (Array.isArray(event)) {\n\t\t\t\t\tthis.updatePills();\n\t\t\t\t\tif (!isUpdate(event)) {\n\t\t\t\t\t\tif (this.itemValueKey && this.view.getSelected()) {\n\t\t\t\t\t\t\tconst values = this.view.getSelected().map(item => item[this.itemValueKey]);\n\t\t\t\t\t\t\tthis.propagateChangeCallback(values);\n\t\t\t\t\t\t// otherwise just pass up the values from `getSelected`\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tthis.propagateChangeCallback(this.view.getSelected());\n\t\t\t\t\t\t}\n\t\t\t\t\t\tthis.selected.emit(event);\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\t// If type is single, dropdown list will emit an object\n\t\t\t\t\tif (event.item && event.item.selected) {\n\t\t\t\t\t\tthis.showClearButton = true;\n\t\t\t\t\t\tthis.selectedValue = event.item.content;\n\n\t\t\t\t\t\tif (!isUpdate(event)) {\n\t\t\t\t\t\t\tif (this.itemValueKey) {\n\t\t\t\t\t\t\t\tthis.propagateChangeCallback(event.item[this.itemValueKey]);\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tthis.propagateChangeCallback(event.item);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t} else {\n\t\t\t\t\t\tthis.selectedValue = \"\";\n\t\t\t\t\t\tif (!isUpdate(event)) {\n\t\t\t\t\t\t\tthis.propagateChangeCallback(null);\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\t// not guarding these since the nativeElement has to be loaded\n\t\t\t\t\t// for select to even fire\n\t\t\t\t\t// only focus for \"organic\" selections\n\t\t\t\t\tif (!isUpdate(event)) {\n\t\t\t\t\t\tthis.elementRef.nativeElement.querySelector(\"input\").focus();\n\t\t\t\t\t\tthis.view.filterBy(\"\");\n\t\t\t\t\t\tthis.selected.emit(event.item);\n\t\t\t\t\t}\n\t\t\t\t\tthis.closeDropdown();\n\t\t\t\t}\n\t\t\t});\n\t\t\t// update the rest of combobox with any pre-selected items\n\t\t\t// setTimeout just defers the call to the next check cycle\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.updateSelected();\n\t\t\t});\n\n\t\t\tthis.view.blurIntent.pipe(filter(v => v === \"top\")).subscribe(() => {\n\t\t\t\tthis.elementRef.nativeElement.querySelector(\".cds--text-input\").focus();\n\t\t\t});\n\t\t}\n\t}\n\n\t/**\n\t * Binds event handlers against the rendered view\n\t */\n\tngAfterViewInit() {\n\t\t// if appendInline is default valued (null) we should:\n\t\t// 1. if there are scrollable parents (not including body) don't append inline\n\t\t// this should also cover the case where the dropdown is in a modal\n\t\t// (where we _do_ want to append to the placeholder)\n\t\tif (this.appendInline === null && hasScrollableParents(this.elementRef.nativeElement)) {\n\t\t\tthis.appendInline = false;\n\t\t// 2. otherwise we should append inline\n\t\t} else if (this.appendInline === null) {\n\t\t\tthis.appendInline = true;\n\t\t}\n\t}\n\n\t/**\n\t * Removing the `Dropdown` from the body if it is appended to the body.\n\t */\n\tngOnDestroy() {\n\t\tif (!this.appendInline) {\n\t\t\tthis._appendToDropdown();\n\t\t}\n\t}\n\n\t/**\n\t * Handles `Escape/Tab` key closing the dropdown, and arrow up/down focus to/from the dropdown list.\n\t */\n\t@HostListener(\"keydown\", [\"$event\"])\n\thostkeys(ev: KeyboardEvent) {\n\t\tif (ev.key === \"Escape\") {\n\t\t\tthis.closeDropdown();\n\t\t} else if ((ev.key === \"ArrowDown\")\n\t\t\t&& (!this.dropdownMenu || !this.dropdownMenu.nativeElement.contains(ev.target))) {\n\t\t\tev.preventDefault();\n\t\t\tthis.openDropdown();\n\t\t\tsetTimeout(() => { this.view.initFocus(); }, 0);\n\t\t}\n\n\t\tif (\n\t\t\tthis.open && ev.key === \"Tab\" &&\n\t\t\t(this.dropdownMenu.nativeElement.contains(ev.target as Node) || ev.target === this.input.nativeElement)\n\t\t) {\n\t\t\tthis.closeDropdown();\n\t\t}\n\n\t\tif (this.open && ev.key === \"Tab\" && ev.shiftKey) {\n\t\t\tthis.closeDropdown();\n\t\t}\n\t}\n\n\t/*\n\t * no-op method for null event listeners, and other no op calls\n\t */\n\t_noop() {}\n\n\t/*\n\t * propagates the value provided from ngModel\n\t */\n\twriteValue(value: any) {\n\t\tif (this.type === \"single\") {\n\t\t\tif (this.itemValueKey) {\n\t\t\t\t// clone the specified item and update its state\n\t\t\t\tconst newValue = Object.assign({}, this.view.getListItems().find(item => item[this.itemValueKey] === value));\n\t\t\t\tnewValue.selected = true;\n\t\t\t\tthis.view.propagateSelected([newValue]);\n\t\t\t} else {\n\t\t\t\t// all items in propagateSelected must be iterable\n\t\t\t\tthis.view.propagateSelected([value || \"\"]);\n\t\t\t}\n\t\t\tthis.showClearButton = !!(value && this.view.getSelected().length);\n\t\t} else {\n\t\t\tif (this.itemValueKey) {\n\t\t\t\t// clone the items and update their state based on the received value array\n\t\t\t\t// this way we don't lose any additional metadata that may be passed in via the `items` Input\n\t\t\t\tlet newValues = [];\n\t\t\t\tfor (const v of value) {\n\t\t\t\t\tfor (const item of this.view.getListItems()) {\n\t\t\t\t\t\tif (item[this.itemValueKey] === v) {\n\t\t\t\t\t\t\tnewValues.push(Object.assign({}, item, { selected: true }));\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tthis.view.propagateSelected(newValues);\n\t\t\t} else {\n\t\t\t\tthis.view.propagateSelected(value ? value : [\"\"]);\n\t\t\t}\n\t\t}\n\t\tthis.updateSelected();\n\t}\n\n\tonBlur() {\n\t\tthis.onTouchedCallback();\n\t}\n\n\tregisterOnChange(fn: any) {\n\t\tthis.propagateChangeCallback = fn;\n\t}\n\n\tregisterOnTouched(fn: any) {\n\t\tthis.onTouchedCallback = fn;\n\t}\n\n\t/**\n\t * `ControlValueAccessor` method to programmatically disable the combobox.\n\t *\n\t * ex: `this.formGroup.get(\"myCoolCombobox\").disable();`\n\t */\n\tsetDisabledState(isDisabled: boolean) {\n\t\tthis.disabled = isDisabled;\n\t}\n\n\t/**\n\t * Called by `n-pill-input` when the selected pills have changed.\n\t */\n\tpublic updatePills() {\n\t\tthis.pills = this.view.getSelected() || [];\n\t\tthis.checkForReorder();\n\t}\n\n\tpublic clearSelected(event) {\n\t\tthis.items = this.items.map(item => {\n\t\t\tif (!item.disabled) {\n\t\t\t\titem.selected = false;\n\t\t\t}\n\t\t\treturn item;\n\t\t});\n\t\tthis.view.items = this.items;\n\t\tthis.updatePills();\n\t\t// clearSelected can only fire on type=multi\n\t\t// so we just emit getSelected() (just in case there's any disabled but selected items)\n\t\tconst selected = this.view.getSelected();\n\t\tthis.propagateChangeCallback(selected);\n\t\tthis.selected.emit(selected as any);\n\t\tthis.clear.emit(event);\n\t}\n\n\t/**\n\t * Closes the dropdown and emits the close event.\n\t */\n\tpublic closeDropdown() {\n\t\tthis.open = false;\n\t\tthis.checkForReorder();\n\t\tthis.close.emit();\n\t\tif (!this.appendInline) {\n\t\t\tthis._appendToDropdown();\n\t\t}\n\n\t\tdocument.removeEventListener(\"click\", this.outsideClick, true);\n\t}\n\n\t/**\n\t * Opens the dropdown.\n\t */\n\tpublic openDropdown() {\n\t\tif (this.disabled || this.readonly) { return; }\n\t\tthis.open = true;\n\t\tthis._dropUp = false;\n\n\t\tif (!this.appendInline) {\n\t\t\tthis._appendToBody();\n\t\t}\n\n\t\tdocument.addEventListener(\"click\", this.outsideClick, true);\n\n\t\t// set the dropdown menu to drop up if it is near the bottom of the screen\n\t\t// setTimeout lets us do the calculations after it is visible in the DOM\n\t\tsetTimeout(() => {\n\t\t\tif (this.dropUp === null || this.dropUp === undefined) {\n\t\t\t\tthis._dropUp = this._shouldDropUp();\n\t\t\t}\n\t\t}, 0);\n\t}\n\n\t/**\n\t * Toggles the dropdown.\n\t */\n\tpublic toggleDropdown() {\n\t\tif (this.open) {\n\t\t\tthis.closeDropdown();\n\t\t} else {\n\t\t\tthis.openDropdown();\n\t\t}\n\t}\n\n\t/**\n\t * Sets the list group filter, and manages single select item selection.\n\t */\n\tpublic onSearch(searchString, shouldEmitSearch = true) {\n\t\tif (shouldEmitSearch) {\n\t\t\tthis.search.emit(searchString);\n\t\t}\n\t\tthis.showClearButton = !!searchString;\n\t\tthis.view.filterBy(searchString);\n\t\tif (searchString !== \"\") {\n\t\t\tif (!this.open) {\n\t\t\t\tthis.openDropdown();\n\t\t\t}\n\t\t} else {\n\t\t\tthis.selectedValue = \"\";\n\t\t\tif (this.type === \"multi\" &&\n\t\t\t\t(this.selectionFeedback === \"top\" || this.selectionFeedback === \"top-after-reopen\")) {\n\t\t\t\tthis.view.reorderSelected();\n\t\t\t}\n\t\t}\n\t\tif (this.type === \"single\") {\n\t\t\t// deselect if the input doesn't match the content\n\t\t\t// of any given item\n\t\t\tconst matches = this.view.getListItems().some(item => item.content.toLowerCase().includes(searchString.toLowerCase()));\n\t\t\tif (!matches) {\n\t\t\t\tconst selected = this.view.getSelected();\n\t\t\t\tif (!selected || !selected[0]) {\n\t\t\t\t\tthis.view.filterBy(searchString);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Intended to be used to add items to the list.\n\t */\n\tpublic onSubmit(event: KeyboardEvent) {\n\t\tthis.submit.emit({\n\t\t\titems: this.view.getListItems(),\n\t\t\tindex: 0,\n\t\t\tvalue: {\n\t\t\t\tcontent: (event.target as HTMLInputElement).value,\n\t\t\t\tselected: false\n\t\t\t}\n\t\t});\n\t}\n\n\tclearInput(event) {\n\t\tevent.stopPropagation();\n\t\tevent.preventDefault();\n\n\t\tif (this.disabled || this.readonly) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (this.type === \"single\") { // don't want to clear selected or close if multi\n\t\t\tthis.clearSelected(event);\n\t\t\tthis.closeDropdown();\n\t\t}\n\n\t\tthis.selectedValue = \"\";\n\t\tthis.input.nativeElement.value = \"\";\n\n\t\tthis.showClearButton = false;\n\t\tthis.input.nativeElement.focus();\n\t\tthis.onSearch(this.input.nativeElement.value);\n\t}\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n\n\t/**\n\t * Handles keyboard events so users are controlling the `Dropdown` instead of unintentionally controlling outside elements.\n\t */\n\t_keyboardNav(event: KeyboardEvent) {\n\t\tif ((event.key === \"Escape\") && this.open) {\n\t\t\tevent.stopImmediatePropagation(); // don't unintentionally close modal if inside of it\n\t\t}\n\t\tif (event.key === \"Escape\") {\n\t\t\tevent.preventDefault();\n\t\t\tthis.closeDropdown();\n\t\t\tthis.input.nativeElement.focus();\n\t\t} else if (this.open && event.key === \"Tab\") {\n\t\t\t// this way focus will start on the next focusable item from the dropdown\n\t\t\t// not the top of the body!\n\t\t\tthis.input.nativeElement.focus();\n\t\t\tthis.input.nativeElement.dispatchEvent(new KeyboardEvent(\"keydown\", { bubbles: true, cancelable: true, key: \"Tab\" }));\n\t\t\tthis.closeDropdown();\n\t\t}\n\t}\n\n\t/**\n\t * Creates the `Dropdown` list as an element that is appended to the DOM body.\n\t */\n\t_appendToBody() {\n\t\tthis.dropdownService.appendToBody(\n\t\t\tthis.listbox.nativeElement,\n\t\t\tthis.dropdownMenu.nativeElement,\n\t\t\t`${this.elementRef.nativeElement.className}${this.open ? \" cds--list-box--expanded\" : \"\"}`);\n\t\tthis.dropdownMenu.nativeElement.addEventListener(\"keydown\", this.keyboardNav, true);\n\t}\n\n\t/**\n\t * Creates the `Dropdown` list appending it to the dropdown parent object instead of the body.\n\t */\n\t_appendToDropdown() {\n\t\tthis.dropdownService.appendToDropdown(this.elementRef.nativeElement);\n\t\tthis.dropdownMenu.nativeElement.removeEventListener(\"keydown\", this.keyboardNav, true);\n\t}\n\n\t/**\n\t * Detects whether or not the `Dropdown` list is visible within all scrollable parents.\n\t * This can be overridden by passing in a value to the `dropUp` input.\n\t */\n\t_shouldDropUp() {\n\t\t// check if dropdownMenu exists first.\n\t\tconst menu = this.dropdownMenu && this.dropdownMenu.nativeElement.querySelector(\".cds--list-box__menu\");\n\t\t// check if menu exists first.\n\t\tconst menuRect = menu && menu.getBoundingClientRect();\n\t\tif (menu && menuRect) {\n\t\t\tconst scrollableParents = getScrollableParents(menu);\n\t\t\treturn scrollableParents.reduce((shouldDropUp: boolean, parent: HTMLElement) => {\n\t\t\t\tconst parentRect = parent.getBoundingClientRect();\n\t\t\t\tconst isBelowParent = !(menuRect.bottom <= parentRect.bottom);\n\t\t\t\treturn shouldDropUp || isBelowParent;\n\t\t\t}, false);\n\t\t}\n\n\t\treturn false;\n\t}\n\n\t/**\n\t * Handles clicks outside of the `Dropdown` list.\n\t */\n\t_outsideClick(event) {\n\t\tif (!this.elementRef.nativeElement.contains(event.target) &&\n\t\t\t// if we're appendToBody the list isn't within the _elementRef,\n\t\t\t// so we've got to check if our target is possibly in there too.\n\t\t\t!this.dropdownMenu.nativeElement.contains(event.target)) {\n\t\t\tthis.closeDropdown();\n\t\t}\n\t}\n\n\tprotected updateSelected() {\n\t\tconst selected = this.view.getSelected();\n\t\tif (this.type === \"multi\") {\n\t\t\tthis.updatePills();\n\t\t} else if (selected) {\n\t\t\tconst value = selected[0] ? selected[0].content : \"\";\n\t\t\tconst changeCallbackValue = selected[0] ? selected[0] : \"\";\n\t\t\tthis.selectedValue = value;\n\t\t\tthis.showClearButton = !!value;\n\t\t}\n\t}\n\n\tprotected checkForReorder() {\n\t\tconst topAfterReopen = !this.open && this.selectionFeedback === \"top-after-reopen\";\n\t\tif ((this.type === \"multi\") && (topAfterReopen || this.selectionFeedback === \"top\")) {\n\t\t\tthis.view.reorderSelected(true);\n\t\t}\n\t}\n}\n",
|
|
23817
23828
|
"assetsDirs": [],
|
|
23818
23829
|
"styleUrlsData": "",
|
|
23819
23830
|
"stylesData": "",
|
|
@@ -23842,7 +23853,7 @@
|
|
|
23842
23853
|
"deprecationMessage": ""
|
|
23843
23854
|
}
|
|
23844
23855
|
],
|
|
23845
|
-
"line":
|
|
23856
|
+
"line": 457,
|
|
23846
23857
|
"rawdescription": "\n\nCreates an instance of ComboBox.\n",
|
|
23847
23858
|
"jsdoctags": [
|
|
23848
23859
|
{
|
|
@@ -23898,7 +23909,7 @@
|
|
|
23898
23909
|
}
|
|
23899
23910
|
],
|
|
23900
23911
|
"returnType": "void",
|
|
23901
|
-
"line":
|
|
23912
|
+
"line": 198,
|
|
23902
23913
|
"rawdescription": "\n\nText to show when nothing is selected.\n",
|
|
23903
23914
|
"description": "<p>Text to show when nothing is selected.</p>\n",
|
|
23904
23915
|
"jsdoctags": [
|
|
@@ -23917,7 +23928,7 @@
|
|
|
23917
23928
|
"name": "placeholder",
|
|
23918
23929
|
"type": "",
|
|
23919
23930
|
"returnType": "",
|
|
23920
|
-
"line":
|
|
23931
|
+
"line": 202
|
|
23921
23932
|
}
|
|
23922
23933
|
},
|
|
23923
23934
|
"openMenuAria": {
|
|
@@ -23936,7 +23947,7 @@
|
|
|
23936
23947
|
}
|
|
23937
23948
|
],
|
|
23938
23949
|
"returnType": "void",
|
|
23939
|
-
"line":
|
|
23950
|
+
"line": 208,
|
|
23940
23951
|
"rawdescription": "\n\nValue to display for accessibility purposes on the combobox control menu when closed\n",
|
|
23941
23952
|
"description": "<p>Value to display for accessibility purposes on the combobox control menu when closed</p>\n",
|
|
23942
23953
|
"jsdoctags": [
|
|
@@ -23955,7 +23966,7 @@
|
|
|
23955
23966
|
"name": "openMenuAria",
|
|
23956
23967
|
"type": "",
|
|
23957
23968
|
"returnType": "",
|
|
23958
|
-
"line":
|
|
23969
|
+
"line": 212
|
|
23959
23970
|
}
|
|
23960
23971
|
},
|
|
23961
23972
|
"closeMenuAria": {
|
|
@@ -23974,7 +23985,7 @@
|
|
|
23974
23985
|
}
|
|
23975
23986
|
],
|
|
23976
23987
|
"returnType": "void",
|
|
23977
|
-
"line":
|
|
23988
|
+
"line": 218,
|
|
23978
23989
|
"rawdescription": "\n\nValue to display for accessibility purposes on the combobox control menu when opened\n",
|
|
23979
23990
|
"description": "<p>Value to display for accessibility purposes on the combobox control menu when opened</p>\n",
|
|
23980
23991
|
"jsdoctags": [
|
|
@@ -23993,7 +24004,7 @@
|
|
|
23993
24004
|
"name": "closeMenuAria",
|
|
23994
24005
|
"type": "",
|
|
23995
24006
|
"returnType": "",
|
|
23996
|
-
"line":
|
|
24007
|
+
"line": 222
|
|
23997
24008
|
}
|
|
23998
24009
|
},
|
|
23999
24010
|
"clearSelectionsTitle": {
|
|
@@ -24012,7 +24023,7 @@
|
|
|
24012
24023
|
}
|
|
24013
24024
|
],
|
|
24014
24025
|
"returnType": "void",
|
|
24015
|
-
"line":
|
|
24026
|
+
"line": 228,
|
|
24016
24027
|
"rawdescription": "\n\nValue to display on the clear selections icon, when multi is selected\n",
|
|
24017
24028
|
"description": "<p>Value to display on the clear selections icon, when multi is selected</p>\n",
|
|
24018
24029
|
"jsdoctags": [
|
|
@@ -24031,7 +24042,7 @@
|
|
|
24031
24042
|
"name": "clearSelectionsTitle",
|
|
24032
24043
|
"type": "",
|
|
24033
24044
|
"returnType": "",
|
|
24034
|
-
"line":
|
|
24045
|
+
"line": 232
|
|
24035
24046
|
}
|
|
24036
24047
|
},
|
|
24037
24048
|
"clearSelectionsAria": {
|
|
@@ -24050,7 +24061,7 @@
|
|
|
24050
24061
|
}
|
|
24051
24062
|
],
|
|
24052
24063
|
"returnType": "void",
|
|
24053
|
-
"line":
|
|
24064
|
+
"line": 238,
|
|
24054
24065
|
"rawdescription": "\n\nValue to display for accessibility purposes to clear selections, when multi is selected\n",
|
|
24055
24066
|
"description": "<p>Value to display for accessibility purposes to clear selections, when multi is selected</p>\n",
|
|
24056
24067
|
"jsdoctags": [
|
|
@@ -24069,7 +24080,7 @@
|
|
|
24069
24080
|
"name": "clearSelectionsAria",
|
|
24070
24081
|
"type": "",
|
|
24071
24082
|
"returnType": "",
|
|
24072
|
-
"line":
|
|
24083
|
+
"line": 242
|
|
24073
24084
|
}
|
|
24074
24085
|
},
|
|
24075
24086
|
"clearSelectionTitle": {
|
|
@@ -24088,7 +24099,7 @@
|
|
|
24088
24099
|
}
|
|
24089
24100
|
],
|
|
24090
24101
|
"returnType": "void",
|
|
24091
|
-
"line":
|
|
24102
|
+
"line": 248,
|
|
24092
24103
|
"rawdescription": "\n\nValue to display on the clear the selected item icon, when single is selected\n",
|
|
24093
24104
|
"description": "<p>Value to display on the clear the selected item icon, when single is selected</p>\n",
|
|
24094
24105
|
"jsdoctags": [
|
|
@@ -24107,7 +24118,7 @@
|
|
|
24107
24118
|
"name": "clearSelectionTitle",
|
|
24108
24119
|
"type": "",
|
|
24109
24120
|
"returnType": "",
|
|
24110
|
-
"line":
|
|
24121
|
+
"line": 252
|
|
24111
24122
|
}
|
|
24112
24123
|
},
|
|
24113
24124
|
"clearSelectionAria": {
|
|
@@ -24126,7 +24137,7 @@
|
|
|
24126
24137
|
}
|
|
24127
24138
|
],
|
|
24128
24139
|
"returnType": "void",
|
|
24129
|
-
"line":
|
|
24140
|
+
"line": 258,
|
|
24130
24141
|
"rawdescription": "\n\nValue to display for accessibility purposes on the clear the selected item icon, when single is selected\n",
|
|
24131
24142
|
"description": "<p>Value to display for accessibility purposes on the clear the selected item icon, when single is selected</p>\n",
|
|
24132
24143
|
"jsdoctags": [
|
|
@@ -24145,7 +24156,7 @@
|
|
|
24145
24156
|
"name": "clearSelectionAria",
|
|
24146
24157
|
"type": "",
|
|
24147
24158
|
"returnType": "",
|
|
24148
|
-
"line":
|
|
24159
|
+
"line": 262
|
|
24149
24160
|
}
|
|
24150
24161
|
}
|
|
24151
24162
|
}
|
|
@@ -37103,7 +37114,7 @@
|
|
|
37103
37114
|
},
|
|
37104
37115
|
{
|
|
37105
37116
|
"name": "MultiStepFormStory",
|
|
37106
|
-
"id": "component-MultiStepFormStory-
|
|
37117
|
+
"id": "component-MultiStepFormStory-75613380ff6f52c2bf18317bb358bd1627e8ba0d6f5db0d88ba531b40b6fbc0226990a8b0bc632bc7ffd29d4b77fea4ff22ca72558cd8d871837ebcd6139af68",
|
|
37107
37118
|
"file": "src/patterns/forms/multi-step-form.stories.ts",
|
|
37108
37119
|
"encapsulation": [],
|
|
37109
37120
|
"entryComponents": [],
|
|
@@ -37130,7 +37141,7 @@
|
|
|
37130
37141
|
"type": "number",
|
|
37131
37142
|
"optional": false,
|
|
37132
37143
|
"description": "",
|
|
37133
|
-
"line":
|
|
37144
|
+
"line": 179
|
|
37134
37145
|
},
|
|
37135
37146
|
{
|
|
37136
37147
|
"name": "resourceGroups",
|
|
@@ -37140,7 +37151,7 @@
|
|
|
37140
37151
|
"type": "[]",
|
|
37141
37152
|
"optional": false,
|
|
37142
37153
|
"description": "",
|
|
37143
|
-
"line":
|
|
37154
|
+
"line": 173
|
|
37144
37155
|
},
|
|
37145
37156
|
{
|
|
37146
37157
|
"name": "step2FormGroup",
|
|
@@ -37156,7 +37167,7 @@
|
|
|
37156
37167
|
},
|
|
37157
37168
|
{
|
|
37158
37169
|
"name": "steps",
|
|
37159
|
-
"defaultValue": "[\n\t\t{\n\t\t\
|
|
37170
|
+
"defaultValue": "[\n\t\t{\n\t\t\tlabel: \"Step 1\",\n\t\t\tcomplete: true\n\t\t},\n\t\t{\n\t\t\tlabel: \"Step 2\",\n\t\t\tcurrent: true,\n\t\t\tcomplete: false\n\t\t},\n\t\t{\n\t\t\tlabel: \"Step 3\",\n\t\t\tcomplete: false,\n\t\t\tinvalid: true\n\t\t},\n\t\t{\n\t\t\tlabel: \"Step 4\",\n\t\t\tcomplete: false,\n\t\t\tsecondaryLabel: \"Optional\"\n\t\t}\n\t]",
|
|
37160
37171
|
"deprecated": false,
|
|
37161
37172
|
"deprecationMessage": "",
|
|
37162
37173
|
"type": "[]",
|
|
@@ -37179,7 +37190,7 @@
|
|
|
37179
37190
|
"optional": false,
|
|
37180
37191
|
"returnType": "void",
|
|
37181
37192
|
"typeParameters": [],
|
|
37182
|
-
"line":
|
|
37193
|
+
"line": 199,
|
|
37183
37194
|
"deprecated": false,
|
|
37184
37195
|
"deprecationMessage": "",
|
|
37185
37196
|
"jsdoctags": [
|
|
@@ -37204,7 +37215,7 @@
|
|
|
37204
37215
|
"description": "",
|
|
37205
37216
|
"rawdescription": "\n",
|
|
37206
37217
|
"type": "component",
|
|
37207
|
-
"sourceCode": "import { Component, OnInit, OnDestroy } from \"@angular/core\";\nimport { moduleMetadata, Meta } from \"@storybook/angular\";\nimport { GridModule } from \"../../grid\";\nimport { UIShellModule } from \"../../ui-shell\";\nimport { DropdownModule } from \"../../dropdown\";\nimport { ButtonModule } from \"../../button\";\nimport { InputModule } from \"../../input\";\nimport { ProgressIndicatorModule } from \"../../progress-indicator\";\nimport { BreadcrumbModule } from \"../../breadcrumb\";\nimport {\n\tFormBuilder,\n\tFormControl,\n\tFormGroup,\n\tReactiveFormsModule\n} from \"@angular/forms\";\n\n@Component({\n\tselector: \"app-multi-step-form\",\n\ttemplate: `\n\t\t<div cdsGrid>\n\t\t\t<div cdsRow class=\"header\">\n\t\t\t\t<cds-header name=\"Patterns\">\n\t\t\t\t\t<cds-hamburger></cds-hamburger>\n\t\t\t\t</cds-header>\n\t\t\t</div>\n\t\t\t<div cdsRow>\n\t\t\t\t<div cdsCol [columnNumbers]=\"{'lg': 8, 'md': 8, 'sm': 8}\">\n\t\t\t\t\t<cds-breadcrumb [noTrailingSlash]=\"noTrailingSlash\">\n\t\t\t\t\t\t<cds-breadcrumb-item href=\"#1\">\n\t\t\t\t\t\t\tDashboard\n\t\t\t\t\t\t</cds-breadcrumb-item>\n\t\t\t\t\t</cds-breadcrumb>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<div cdsRow class=\"sub-heading\">\n\t\t\t\t<div cdsCol [columnNumbers]=\"{'lg': 8, 'md': 8, 'sm': 8}\">\n\t\t\t\t\t<h4>Vertical multi-step form</h4>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<div cdsRow>\n\t\t\t\t<div\n\t\t\t\t\tcdsCol\n\t\t\t\t\t[columnNumbers]=\"{'lg': 2, 'md': 2, 'sm': 2}\"\n\t\t\t\t\tclass=\"indicator-wrapper\">\n\t\t\t\t\t<div class=\"indicator\">\n\t\t\t\t\t\t<cds-progress-indicator\n\t\t\t\t\t\t\torientation=\"vertical\"\n\t\t\t\t\t\t\t[steps]=\"steps\"\n\t\t\t\t\t\t\t[current]=\"currentStep\">\n\t\t\t\t\t\t</cds-progress-indicator>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t<div cdsCol [columnNumbers]=\"{'lg': 6, 'md': 6, 'sm': 6}\" [ngSwitch]=\"currentStep\">\n\t\t\t\t\t<ng-container *ngSwitchCase=\"1\">\n\t\t\t\t\t\t<form [formGroup]=\"step2FormGroup\">\n\t\t\t\t\t\t\t<div cdsGrid>\n\t\t\t\t\t\t\t\t<div cdsRow>\n\t\t\t\t\t\t\t\t\t<h4>Create a new workspace</h4>\n\t\t\t\t\t\t\t\t\t<label class=\"form-label\">\n\t\t\t\t\t\t\t\t\t\tWhen you create a workspace, you connect IBM Cloud\n\t\t\t\t\t\t\t\t\t\tSchematics to existing Github / Gitlab repos that host\n\t\t\t\t\t\t\t\t\t\tyour Terraform templates.\n\t\t\t\t\t\t\t\t\t</label>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div cdsRow class=\"form-item\">\n\t\t\t\t\t\t\t\t\t<cds-label>\n\t\t\t\t\t\t\t\t\t\tWorkspace name\n\t\t\t\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\t\t\t\tcdsText\n\t\t\t\t\t\t\t\t\t\t\t[autocomplete]=\"false\"\n\t\t\t\t\t\t\t\t\t\t\tformControlName=\"workspaceName\">\n\t\t\t\t\t\t\t\t\t</cds-label>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div cdsRow class=\"form-item\">\n\t\t\t\t\t\t\t\t\t<cds-dropdown\n\t\t\t\t\t\t\t\t\t\tclass=\"dropdown\"\n\t\t\t\t\t\t\t\t\t\tlabel=\"Resource group\"\n\t\t\t\t\t\t\t\t\t\tvalue=\"content\"\n\t\t\t\t\t\t\t\t\t\tformControlName=\"resourceGroup\"\n\t\t\t\t\t\t\t\t\t\t[dropUp]=\"false\">\n\t\t\t\t\t\t\t\t\t\t<cds-dropdown-list [items]=\"resourceGroups\"></cds-dropdown-list>\n\t\t\t\t\t\t\t\t\t</cds-dropdown>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div cdsRow class=\"form-item\">\n\t\t\t\t\t\t\t\t\t<cds-label>\n\t\t\t\t\t\t\t\t\t\tDescription (optional)\n\t\t\t\t\t\t\t\t\t\t<textarea\n\t\t\t\t\t\t\t\t\t\t\tcdsTextArea\n\t\t\t\t\t\t\t\t\t\t\tplaceholder=\"What is the purpose of this workspace?\"\n\t\t\t\t\t\t\t\t\t\t\tformControlName=\"purpose\"\n\t\t\t\t\t\t\t\t\t\t\t[rows]=\"3\"\n\t\t\t\t\t\t\t\t\t\t\taria-label=\"textarea\"></textarea>\n\t\t\t\t\t\t\t\t\t</cds-label>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div cdsRow class=\"form-item\">\n\t\t\t\t\t\t\t\t\t<button cdsButton (click)=\"changeStep(2)\">Step 3</button>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</form>\n\t\t\t\t\t</ng-container>\n\t\t\t\t\t<ng-container *ngSwitchCase=\"2\">\n\t\t\t\t\t\t<div cdsGrid>\n\t\t\t\t\t\t\t<div cdsRow>\n\t\t\t\t\t\t\t\tStep 3 form!\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div cdsRow class=\"form-item\">\n\t\t\t\t\t\t\t\t<button cdsButton (click)=\"changeStep(1)\">Step 2</button>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</ng-container>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t`,\n\tstyles: [`\n\t\t.header {\n\t\t\tmargin-bottom: 5rem;\n\t\t}\n\n\t\t.indicator-wrapper {\n\t\t\tbackground-color: #f4f4f4;\n\t\t}\n\n\t\t.sub-heading {\n\t\t\tmargin-bottom: 1.5rem;\n\t\t}\n\n\t\t.indicator {\n\t\t\tmargin-top: 1rem;\n\t\t}\n\n\t\t.form-label {\n\t\t\tmargin-top: 0.7rem;\n\t\t\tmargin-bottom: 0.5rem;\n\t\t}\n\n\t\t.dropdown {\n\t\t\twidth: 100%;\n\t\t}\n\n\t\t.form-item {\n\t\t\tmargin-top: 1.5rem;\n\t\t}\n\t`]\n})\nclass MultiStepFormStory implements OnInit, OnDestroy {\n\tpublic step2FormGroup: FormGroup;\n\n\tsteps = [\n\t\t{\n\t\t\
|
|
37218
|
+
"sourceCode": "import { Component, OnInit, OnDestroy } from \"@angular/core\";\nimport { moduleMetadata, Meta } from \"@storybook/angular\";\nimport { GridModule } from \"../../grid\";\nimport { UIShellModule } from \"../../ui-shell\";\nimport { DropdownModule } from \"../../dropdown\";\nimport { ButtonModule } from \"../../button\";\nimport { InputModule } from \"../../input\";\nimport { ProgressIndicatorModule } from \"../../progress-indicator\";\nimport { BreadcrumbModule } from \"../../breadcrumb\";\nimport {\n\tFormBuilder,\n\tFormControl,\n\tFormGroup,\n\tReactiveFormsModule\n} from \"@angular/forms\";\n\n@Component({\n\tselector: \"app-multi-step-form\",\n\ttemplate: `\n\t\t<div cdsGrid>\n\t\t\t<div cdsRow class=\"header\">\n\t\t\t\t<cds-header name=\"Patterns\">\n\t\t\t\t\t<cds-hamburger></cds-hamburger>\n\t\t\t\t</cds-header>\n\t\t\t</div>\n\t\t\t<div cdsRow>\n\t\t\t\t<div cdsCol [columnNumbers]=\"{'lg': 8, 'md': 8, 'sm': 8}\">\n\t\t\t\t\t<cds-breadcrumb [noTrailingSlash]=\"noTrailingSlash\">\n\t\t\t\t\t\t<cds-breadcrumb-item href=\"#1\">\n\t\t\t\t\t\t\tDashboard\n\t\t\t\t\t\t</cds-breadcrumb-item>\n\t\t\t\t\t</cds-breadcrumb>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<div cdsRow class=\"sub-heading\">\n\t\t\t\t<div cdsCol [columnNumbers]=\"{'lg': 8, 'md': 8, 'sm': 8}\">\n\t\t\t\t\t<h4>Vertical multi-step form</h4>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<div cdsRow>\n\t\t\t\t<div\n\t\t\t\t\tcdsCol\n\t\t\t\t\t[columnNumbers]=\"{'lg': 2, 'md': 2, 'sm': 2}\"\n\t\t\t\t\tclass=\"indicator-wrapper\">\n\t\t\t\t\t<div class=\"indicator\">\n\t\t\t\t\t\t<cds-progress-indicator\n\t\t\t\t\t\t\torientation=\"vertical\"\n\t\t\t\t\t\t\t[steps]=\"steps\"\n\t\t\t\t\t\t\t[current]=\"currentStep\">\n\t\t\t\t\t\t</cds-progress-indicator>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t<div cdsCol [columnNumbers]=\"{'lg': 6, 'md': 6, 'sm': 6}\" [ngSwitch]=\"currentStep\">\n\t\t\t\t\t<ng-container *ngSwitchCase=\"1\">\n\t\t\t\t\t\t<form [formGroup]=\"step2FormGroup\">\n\t\t\t\t\t\t\t<div cdsGrid>\n\t\t\t\t\t\t\t\t<div cdsRow>\n\t\t\t\t\t\t\t\t\t<h4>Create a new workspace</h4>\n\t\t\t\t\t\t\t\t\t<label class=\"form-label\">\n\t\t\t\t\t\t\t\t\t\tWhen you create a workspace, you connect IBM Cloud\n\t\t\t\t\t\t\t\t\t\tSchematics to existing Github / Gitlab repos that host\n\t\t\t\t\t\t\t\t\t\tyour Terraform templates.\n\t\t\t\t\t\t\t\t\t</label>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div cdsRow class=\"form-item\">\n\t\t\t\t\t\t\t\t\t<cds-label>\n\t\t\t\t\t\t\t\t\t\tWorkspace name\n\t\t\t\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\t\t\t\tcdsText\n\t\t\t\t\t\t\t\t\t\t\t[autocomplete]=\"false\"\n\t\t\t\t\t\t\t\t\t\t\tformControlName=\"workspaceName\">\n\t\t\t\t\t\t\t\t\t</cds-label>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div cdsRow class=\"form-item\">\n\t\t\t\t\t\t\t\t\t<cds-dropdown\n\t\t\t\t\t\t\t\t\t\tclass=\"dropdown\"\n\t\t\t\t\t\t\t\t\t\tlabel=\"Resource group\"\n\t\t\t\t\t\t\t\t\t\tvalue=\"content\"\n\t\t\t\t\t\t\t\t\t\tformControlName=\"resourceGroup\"\n\t\t\t\t\t\t\t\t\t\t[dropUp]=\"false\">\n\t\t\t\t\t\t\t\t\t\t<cds-dropdown-list [items]=\"resourceGroups\"></cds-dropdown-list>\n\t\t\t\t\t\t\t\t\t</cds-dropdown>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div cdsRow class=\"form-item\">\n\t\t\t\t\t\t\t\t\t<cds-label>\n\t\t\t\t\t\t\t\t\t\tDescription (optional)\n\t\t\t\t\t\t\t\t\t\t<textarea\n\t\t\t\t\t\t\t\t\t\t\tcdsTextArea\n\t\t\t\t\t\t\t\t\t\t\tplaceholder=\"What is the purpose of this workspace?\"\n\t\t\t\t\t\t\t\t\t\t\tformControlName=\"purpose\"\n\t\t\t\t\t\t\t\t\t\t\t[rows]=\"3\"\n\t\t\t\t\t\t\t\t\t\t\taria-label=\"textarea\"></textarea>\n\t\t\t\t\t\t\t\t\t</cds-label>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div cdsRow class=\"form-item\">\n\t\t\t\t\t\t\t\t\t<button cdsButton (click)=\"changeStep(2)\">Step 3</button>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</form>\n\t\t\t\t\t</ng-container>\n\t\t\t\t\t<ng-container *ngSwitchCase=\"2\">\n\t\t\t\t\t\t<div cdsGrid>\n\t\t\t\t\t\t\t<div cdsRow>\n\t\t\t\t\t\t\t\tStep 3 form!\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div cdsRow class=\"form-item\">\n\t\t\t\t\t\t\t\t<button cdsButton (click)=\"changeStep(1)\">Step 2</button>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</ng-container>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t`,\n\tstyles: [`\n\t\t.header {\n\t\t\tmargin-bottom: 5rem;\n\t\t}\n\n\t\t.indicator-wrapper {\n\t\t\tbackground-color: #f4f4f4;\n\t\t}\n\n\t\t.sub-heading {\n\t\t\tmargin-bottom: 1.5rem;\n\t\t}\n\n\t\t.indicator {\n\t\t\tmargin-top: 1rem;\n\t\t}\n\n\t\t.form-label {\n\t\t\tmargin-top: 0.7rem;\n\t\t\tmargin-bottom: 0.5rem;\n\t\t}\n\n\t\t.dropdown {\n\t\t\twidth: 100%;\n\t\t}\n\n\t\t.form-item {\n\t\t\tmargin-top: 1.5rem;\n\t\t}\n\t`]\n})\nclass MultiStepFormStory implements OnInit, OnDestroy {\n\tpublic step2FormGroup: FormGroup;\n\n\tsteps = [\n\t\t{\n\t\t\tlabel: \"Step 1\",\n\t\t\tcomplete: true\n\t\t},\n\t\t{\n\t\t\tlabel: \"Step 2\",\n\t\t\tcurrent: true,\n\t\t\tcomplete: false\n\t\t},\n\t\t{\n\t\t\tlabel: \"Step 3\",\n\t\t\tcomplete: false,\n\t\t\tinvalid: true\n\t\t},\n\t\t{\n\t\t\tlabel: \"Step 4\",\n\t\t\tcomplete: false,\n\t\t\tsecondaryLabel: \"Optional\"\n\t\t}\n\t];\n\n\tresourceGroups = [\n\t\t{ content: \"None\" },\n\t\t{ content: \"Resource group 1\" },\n\t\t{ content: \"Resource group 2\" }\n\t];\n\n\tcurrentStep = 1;\n\n\tconstructor(protected formBuilder: FormBuilder) { }\n\n\tngOnInit() {\n\t\tdocument.querySelector(\".sb-show-main\")?.classList.add(\"full-page\");\n\n\t\tthis.step2FormGroup = this.formBuilder.group({\n\t\t\tworkspaceName: new FormControl(),\n\t\t\tresourceGroup: new FormControl(),\n\t\t\tpurpose: new FormControl()\n\t\t});\n\n\t\tthis.step2FormGroup.get(\"resourceGroup\")?.setValue(\"None\");\n\t}\n\n\tngOnDestroy() {\n\t\tdocument.querySelector(\".sb-show-main\")?.classList.remove(\"full-page\");\n\t}\n\n\tchangeStep(step: number) {\n\t\tthis.currentStep = step;\n\t}\n}\n\n// Storybook starts here\nexport default {\n\ttitle: \"Pattern/Forms\",\n\tdecorators: [\n\t\tmoduleMetadata({\n\t\t\tdeclarations: [ MultiStepFormStory ],\n\t\t\timports: [\n\t\t\t\tButtonModule,\n\t\t\t\tGridModule,\n\t\t\t\tUIShellModule,\n\t\t\t\tProgressIndicatorModule,\n\t\t\t\tBreadcrumbModule,\n\t\t\t\tReactiveFormsModule,\n\t\t\t\tInputModule,\n\t\t\t\tDropdownModule\n\t\t\t]\n\t\t})\n\t]\n} as Meta;\n\nconst Template = (args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<!--\n\t\t\tapp-* components are for demo purposes only.\n\t\t\tYou can create your own implementation by using the component source as an example.\n\t\t-->\n\t\t<app-multi-step-form></app-multi-step-form>\n\t`\n});\nexport const MultiStep = Template.bind({});\n",
|
|
37208
37219
|
"assetsDirs": [],
|
|
37209
37220
|
"styleUrlsData": "",
|
|
37210
37221
|
"stylesData": "\n\t\t.header {\n\t\t\tmargin-bottom: 5rem;\n\t\t}\n\n\t\t.indicator-wrapper {\n\t\t\tbackground-color: #f4f4f4;\n\t\t}\n\n\t\t.sub-heading {\n\t\t\tmargin-bottom: 1.5rem;\n\t\t}\n\n\t\t.indicator {\n\t\t\tmargin-top: 1rem;\n\t\t}\n\n\t\t.form-label {\n\t\t\tmargin-top: 0.7rem;\n\t\t\tmargin-bottom: 0.5rem;\n\t\t}\n\n\t\t.dropdown {\n\t\t\twidth: 100%;\n\t\t}\n\n\t\t.form-item {\n\t\t\tmargin-top: 1.5rem;\n\t\t}\n\t\n",
|
|
@@ -37221,7 +37232,7 @@
|
|
|
37221
37232
|
"deprecationMessage": ""
|
|
37222
37233
|
}
|
|
37223
37234
|
],
|
|
37224
|
-
"line":
|
|
37235
|
+
"line": 179,
|
|
37225
37236
|
"jsdoctags": [
|
|
37226
37237
|
{
|
|
37227
37238
|
"name": "formBuilder",
|
|
@@ -72809,7 +72820,7 @@
|
|
|
72809
72820
|
"deprecated": false,
|
|
72810
72821
|
"deprecationMessage": "",
|
|
72811
72822
|
"type": "",
|
|
72812
|
-
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-combo-box\n\t\t\t[invalid]=\"invalid\"\n\t\t\t[invalidText]=\"invalidText\"\n\t\t\t[label]=\"label\"\n\t\t\t[hideLabel]=\"hideLabel\"\n\t\t\t[warn]=\"warn\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[size]=\"size\"\n\t\t\t[helperText]=\"helperText\"\n\t\t\t[appendInline]=\"false\"\n\t\t\t[items]=\"items\"\n\t\t\t[theme]=\"theme\"\n\t\t\t[selectionFeedback]=\"selectionFeedback\"\n\t\t\t[dropUp]=\"dropUp\"\n\t\t\t[appendInline]=\"appendInline\"\n\t\t\ttype=\"multi\"\n\t\t\t(selected)=\"selected($event)\"\n\t\t\t(submit)=\"submit($event)\"\n\t\t\t(clear)=\"clear($event)\">\n\t\t\t<cds-dropdown-list></cds-dropdown-list>\n\t\t</cds-combo-box>\n\t`\n})"
|
|
72823
|
+
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-combo-box\n\t\t\t[invalid]=\"invalid\"\n\t\t\t[invalidText]=\"invalidText\"\n\t\t\t[label]=\"label\"\n\t\t\t[hideLabel]=\"hideLabel\"\n\t\t\t[warn]=\"warn\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[readonly]=\"readonly\"\n\t\t\t[size]=\"size\"\n\t\t\t[helperText]=\"helperText\"\n\t\t\t[appendInline]=\"false\"\n\t\t\t[items]=\"items\"\n\t\t\t[theme]=\"theme\"\n\t\t\t[selectionFeedback]=\"selectionFeedback\"\n\t\t\t[dropUp]=\"dropUp\"\n\t\t\t[appendInline]=\"appendInline\"\n\t\t\ttype=\"multi\"\n\t\t\t(selected)=\"selected($event)\"\n\t\t\t(submit)=\"submit($event)\"\n\t\t\t(clear)=\"clear($event)\">\n\t\t\t<cds-dropdown-list></cds-dropdown-list>\n\t\t</cds-combo-box>\n\t`\n})"
|
|
72813
72824
|
},
|
|
72814
72825
|
{
|
|
72815
72826
|
"name": "MultiTemplate",
|
|
@@ -73934,7 +73945,7 @@
|
|
|
73934
73945
|
"deprecated": false,
|
|
73935
73946
|
"deprecationMessage": "",
|
|
73936
73947
|
"type": "",
|
|
73937
|
-
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-combo-box\n\t\t\t[(ngModel)]=\"model\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[invalid]=\"invalid\"\n\t\t\t[size]=\"size\"\n\t\t\t[appendInline]=\"appendInline\"\n\t\t\t[invalidText]=\"invalidText\"\n\t\t\t[warn]=\"warn\"\n\t\t\t[warnText]=\"warnText\"\n\t\t\t[label]=\"label\"\n\t\t\t[hideLabel]=\"hideLabel\"\n\t\t\t[helperText]=\"helperText\"\n\t\t\t[items]=\"items\"\n\t\t\t[theme]=\"theme\"\n\t\t\t[dropUp]=\"dropUp\"\n\t\t\t(selected)=\"selected($event)\"\n\t\t\t(submit)=\"submit($event)\"\n\t\t\t(search)=\"search($event)\"\n\t\t\t(clear)=\"clear($event)\">\n\t\t\t<cds-dropdown-list></cds-dropdown-list>\n\t\t</cds-combo-box>\n\t\t<span>{{model | json}}</span>\n\t`\n})"
|
|
73948
|
+
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-combo-box\n\t\t\t[(ngModel)]=\"model\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[readonly]=\"readonly\"\n\t\t\t[invalid]=\"invalid\"\n\t\t\t[size]=\"size\"\n\t\t\t[appendInline]=\"appendInline\"\n\t\t\t[invalidText]=\"invalidText\"\n\t\t\t[warn]=\"warn\"\n\t\t\t[warnText]=\"warnText\"\n\t\t\t[label]=\"label\"\n\t\t\t[hideLabel]=\"hideLabel\"\n\t\t\t[helperText]=\"helperText\"\n\t\t\t[items]=\"items\"\n\t\t\t[theme]=\"theme\"\n\t\t\t[dropUp]=\"dropUp\"\n\t\t\t(selected)=\"selected($event)\"\n\t\t\t(submit)=\"submit($event)\"\n\t\t\t(search)=\"search($event)\"\n\t\t\t(clear)=\"clear($event)\">\n\t\t\t<cds-dropdown-list></cds-dropdown-list>\n\t\t</cds-combo-box>\n\t\t<span>{{model | json}}</span>\n\t`\n})"
|
|
73938
73949
|
},
|
|
73939
73950
|
{
|
|
73940
73951
|
"name": "Template",
|
|
@@ -78098,7 +78109,7 @@
|
|
|
78098
78109
|
"deprecated": false,
|
|
78099
78110
|
"deprecationMessage": "",
|
|
78100
78111
|
"type": "",
|
|
78101
|
-
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-combo-box\n\t\t\t[invalid]=\"invalid\"\n\t\t\t[invalidText]=\"invalidText\"\n\t\t\t[label]=\"label\"\n\t\t\t[hideLabel]=\"hideLabel\"\n\t\t\t[warn]=\"warn\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[size]=\"size\"\n\t\t\t[helperText]=\"helperText\"\n\t\t\t[appendInline]=\"false\"\n\t\t\t[items]=\"items\"\n\t\t\t[theme]=\"theme\"\n\t\t\t[selectionFeedback]=\"selectionFeedback\"\n\t\t\t[dropUp]=\"dropUp\"\n\t\t\t[appendInline]=\"appendInline\"\n\t\t\ttype=\"multi\"\n\t\t\t(selected)=\"selected($event)\"\n\t\t\t(submit)=\"submit($event)\"\n\t\t\t(clear)=\"clear($event)\">\n\t\t\t<cds-dropdown-list></cds-dropdown-list>\n\t\t</cds-combo-box>\n\t`\n})"
|
|
78112
|
+
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-combo-box\n\t\t\t[invalid]=\"invalid\"\n\t\t\t[invalidText]=\"invalidText\"\n\t\t\t[label]=\"label\"\n\t\t\t[hideLabel]=\"hideLabel\"\n\t\t\t[warn]=\"warn\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[readonly]=\"readonly\"\n\t\t\t[size]=\"size\"\n\t\t\t[helperText]=\"helperText\"\n\t\t\t[appendInline]=\"false\"\n\t\t\t[items]=\"items\"\n\t\t\t[theme]=\"theme\"\n\t\t\t[selectionFeedback]=\"selectionFeedback\"\n\t\t\t[dropUp]=\"dropUp\"\n\t\t\t[appendInline]=\"appendInline\"\n\t\t\ttype=\"multi\"\n\t\t\t(selected)=\"selected($event)\"\n\t\t\t(submit)=\"submit($event)\"\n\t\t\t(clear)=\"clear($event)\">\n\t\t\t<cds-dropdown-list></cds-dropdown-list>\n\t\t</cds-combo-box>\n\t`\n})"
|
|
78102
78113
|
},
|
|
78103
78114
|
{
|
|
78104
78115
|
"name": "ReactiveForms",
|
|
@@ -78128,7 +78139,7 @@
|
|
|
78128
78139
|
"deprecated": false,
|
|
78129
78140
|
"deprecationMessage": "",
|
|
78130
78141
|
"type": "",
|
|
78131
|
-
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-combo-box\n\t\t\t[(ngModel)]=\"model\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[invalid]=\"invalid\"\n\t\t\t[size]=\"size\"\n\t\t\t[appendInline]=\"appendInline\"\n\t\t\t[invalidText]=\"invalidText\"\n\t\t\t[warn]=\"warn\"\n\t\t\t[warnText]=\"warnText\"\n\t\t\t[label]=\"label\"\n\t\t\t[hideLabel]=\"hideLabel\"\n\t\t\t[helperText]=\"helperText\"\n\t\t\t[items]=\"items\"\n\t\t\t[theme]=\"theme\"\n\t\t\t[dropUp]=\"dropUp\"\n\t\t\t(selected)=\"selected($event)\"\n\t\t\t(submit)=\"submit($event)\"\n\t\t\t(search)=\"search($event)\"\n\t\t\t(clear)=\"clear($event)\">\n\t\t\t<cds-dropdown-list></cds-dropdown-list>\n\t\t</cds-combo-box>\n\t\t<span>{{model | json}}</span>\n\t`\n})"
|
|
78142
|
+
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-combo-box\n\t\t\t[(ngModel)]=\"model\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[readonly]=\"readonly\"\n\t\t\t[invalid]=\"invalid\"\n\t\t\t[size]=\"size\"\n\t\t\t[appendInline]=\"appendInline\"\n\t\t\t[invalidText]=\"invalidText\"\n\t\t\t[warn]=\"warn\"\n\t\t\t[warnText]=\"warnText\"\n\t\t\t[label]=\"label\"\n\t\t\t[hideLabel]=\"hideLabel\"\n\t\t\t[helperText]=\"helperText\"\n\t\t\t[items]=\"items\"\n\t\t\t[theme]=\"theme\"\n\t\t\t[dropUp]=\"dropUp\"\n\t\t\t(selected)=\"selected($event)\"\n\t\t\t(submit)=\"submit($event)\"\n\t\t\t(search)=\"search($event)\"\n\t\t\t(clear)=\"clear($event)\">\n\t\t\t<cds-dropdown-list></cds-dropdown-list>\n\t\t</cds-combo-box>\n\t\t<span>{{model | json}}</span>\n\t`\n})"
|
|
78132
78143
|
}
|
|
78133
78144
|
],
|
|
78134
78145
|
"src/content-switcher/content-switcher.stories.ts": [
|
|
@@ -83226,7 +83237,7 @@
|
|
|
83226
83237
|
"linktype": "component",
|
|
83227
83238
|
"name": "ComboBox",
|
|
83228
83239
|
"coveragePercent": 68,
|
|
83229
|
-
"coverageCount": "
|
|
83240
|
+
"coverageCount": "50/73",
|
|
83230
83241
|
"status": "good"
|
|
83231
83242
|
},
|
|
83232
83243
|
{
|